:root {
  --color-royal-blue: #003370;
  --color-text-black: #1f2020;
  --color-text-gray: #b3b6b9;
  --color-background-gray: #eff2f5;
  --color-hover-gray: #f7f8f8;
  --color-background-button: #01a2b2;
}

.top-bar {
  display: flex;
  height: 30px;
 background-color: var(--color-royal-blue);
  color: white;
  padding: 6px 24px 6px 24px;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.contact-info {
  display: flex;
  gap:32px;
  align-items: center;
justify-content: end;
/* padding-right: 24px; */
}

@media (max-width: 768px) {
  .contact-info {
    justify-content: space-between;
    width: 100%;
  /* padding-right: 24px; */
  }
}
.contact-info a  {
  display: flex;
  gap:8px;
  align-items: center;
}

.header-menu {
  display: flex;
  height: auto;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 20px 24px;
  background-color: #ffffff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-menu a {
  text-decoration: none;
  align-self: stretch;
  color:  #1F2020;
  font-family:  "Public Sans";
  font-size:  16px;
  font-style: normal;
  font-weight: 400;
  line-height:  24px;
}

.menu {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  color: var(--color-text-black);
  z-index: 1000;
  gap: 8px;
}
/* .menu-item {
  padding: 20px 0 20px 0;
} */

.menu-item > a {
  color: var(--color-text-black);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap:8px;
}

.menu-item > a i {
  
  transition: transform 0.3s;
  font-size: 12px;
}

.submenu {
  display: none;
  position: absolute;
  z-index: 100;
  width: 80vw;
  box-sizing: border-box;
  padding-left: 40px;
  top:52px;
  left: 0;
  right: 0;
  border-radius: 0px 0px 8px 8px !important;
  background-color: var(--color-background-gray);
  overflow: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  flex-wrap: wrap;
}

.submenu h3 {
    color:  rgba(30, 31, 32, 0.50);
    font-family:  "Public Sans";
    font-size:  14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 8px 0;
}

.submenu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.submenu-section {
  gap: 8px;
}
.submenu-section ul li {
  display: flex;
  align-items: center;
}
.submenu-section li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Si necesitas que el ícono esté a la derecha */
.submenu-section li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}

.submenu ul li {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
}

.submenu p {
  color: var(--color-text-black);
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.submenu-content {
  display: flex;
  gap: 40px;
}
.submenu-column {
  white-space: nowrap;
  flex: 1;
  padding-top: 40px;
  gap: 40px;
}

.submenu-column ul li {
  color: var(--color-text-black);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  padding: 0;
  margin-bottom: 8px;
}

.submenu-column ul li i {
  visibility: hidden;
  margin-left: 6px;
}

.submenu-column ul li:hover .fa-arrow-right {
  visibility: visible;
}

.submenu-column ul li:hover {
  background-color: #ffffff;
  padding: 0;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.submenu-featured {
  width: 25em;
  padding: 40px;
  background-color: #ffffff;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.submenu-featured h3 {
  color: var(--color-text-black);
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
}

.submenu-featured img {
  /* width: 400px;
  height: 300px; */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.submenu-featured p {
  margin: 0 0 24px 0;
  color:  #1F2020;

/* Text/Body M */
font-family: "Public Sans";
font-size:  14px;
font-style: normal;
font-weight: 400;
line-height:  18px; /* 128.571% */
}

.backdrop-menu {
  display: none;
  position: fixed;
  top: 110px;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.menu-item:hover .submenu {
  display: block;
}

/* Solo mostrar backdrop en desktop */
@media (min-width: 981px) {
  .menu-item:hover .backdrop-menu {
    display: block;
  }
}

.menu-item:hover > a {
  background-color: var(--color-hover-gray);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.menu-item:hover > a i {
  transform: rotate(180deg);
}

.header-right {
  /* width: 26em; */
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}

.fa-bars,
.fa-magnifying-glass,
.fa-xmark {
  color: var(--color-royal-blue);
  font-size: 24px;
  margin: 12px;
  cursor: pointer;
}
.toggle {
  display: none;
  width: 45px;
}
.cta-button-mobile {
  display: none;
}

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 20px;
  background: white;
  /* width: 50%; */
  padding-top: 2rem;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: 0;
  box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
  animation: fadeIn 1s ease both;
  &::backdrop {
    animation: fadeIn 1s ease both;
    background: rgb(255 255 255 / 40%);
    z-index: 10000;

  }
}

/* Search Overlay Styles */

.search-modal {
  padding: 0;
  border: none;
  max-width: 600px;
  border-radius: 12px;
  width: 90%;
  /* margin: 0 auto */
  ;
  background: white;
  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.search-icon {
  cursor: pointer;
  font-size: 20px;
  color: #003370;
}

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 38, 38, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-overlay-content {
  width: 100%;
  max-width: 800px;
  padding: 2rem;
  position: relative;
}





.search-form-wrapper {
  text-align: center;
}

.search-form-wrapper h2 {
  color: white;
  font-family: "GT Walsheim";
  font-size: 32px;
  margin-bottom: 2rem;
}





.search-form-wrapper input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-form-wrapper input[type="search"]:focus {
  outline: none;

}



.no-scroll {
  overflow: hidden;
}

/* Search Modal Styles */
.search-icon {
  cursor: pointer;
  font-size: 20px;
  color: #003370;
}



.search-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
}

/* Quitar el blur por defecto del dialog */
.search-modal:modal {
  background: white;
}




.search-modal-content {
  padding: 24px;
  
  display: flex;
 
  align-items: center;
  /* min-height: 80px; */
 
}

.search-form-wrapper {
  width: 100%;
}

.search-form-wrapper form {
  display: flex;
  gap: 16px;
  flex-direction: column;
  justify-content: space-between;
}

.search-input-wrapper {
  position: relative;
  width: 100%;

  padding-left:48px;
  border-radius: 8px;
  background: rgba(30, 31, 32, 0.05);
}
@media (min-width:768px){
  .search-form-wrapper form {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
  }
  .search-input-wrapper {
    
    max-width: 430px;
    
  }
}



.search-input-wrapper::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 18px;
  background-image: url('data:image/svg+xml,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.125 14.875C16.5938 15.375 16.5938 16.1562 16.125 16.6562C15.625 17.125 14.8438 17.125 14.3438 16.6562L10.625 12.9062C9.34375 13.75 7.78125 14.1875 6.09375 13.9688C3.21875 13.5625 0.90625 11.2188 0.53125 8.375C0 4.125 3.59375 0.53125 7.84375 1.0625C10.6875 1.4375 13.0312 3.75 13.4375 6.625C13.6562 8.3125 13.2188 9.875 12.375 11.125L16.125 14.875ZM2.96875 7.5C2.96875 9.71875 4.75 11.5 6.96875 11.5C9.15625 11.5 10.9688 9.71875 10.9688 7.5C10.9688 5.3125 9.15625 3.5 6.96875 3.5C4.75 3.5 2.96875 5.3125 2.96875 7.5Z" fill="%23B3B6B9"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}


.search-form-wrapper input[type="search"] {
  width: 100%;
  
  padding-right: -48px;
  font-size: 14px;
  border: none;
  
  color: rgba(30, 31, 32, 0.5);
  font-family: "Public Sans";
  transition: all 0.3s ease;
  max-width: 389px;
  height: 48px;

}

.search-form-wrapper input[type="search"]::placeholder {
  color: rgba(31, 32, 32, 0.5);
}

/* .search-form-wrapper input[type="search"]:focus {
  outline: none;
} */

.search-form-wrapper button[type="submit"] {

  padding: 12px 24px;
  background: #003370;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "GT Walsheim";
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 48px;
  
}

/* Estilos específicos para móvil */
/* @media (max-width: 768px) {
  .search-modal {
    margin: 16px;
    width: calc(100% - 32px);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .search-modal-content {
    padding: 16px;
  }

  .search-input-wrapper {
    max-width: 100%;
  }

  .search-form-wrapper form {
    flex-direction: column;
  }

  .search-form-wrapper button[type="submit"] {
    width: 100%;
  }
} */


/* .dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
} */

.buttons {
  display: flex;
  gap: 16px;
}

.btn-search,
.btn-cancel {
  background-color: var(--color-royal-blue);
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-royal-blue);
  font-size: 14px;
}

.btn-search:hover,
.btn-cancel:hover {
  background-color: #ffffff;
  color: var(--color-royal-blue);
  border: 1px solid var(--color-royal-blue);
}

.input-search {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

@media (max-width: 980px) {
  .backdrop-menu {
    display: none !important;
  }
  .submenu-section li a {
    padding: 0 0 0 16px !important;
  }
  .top-bar {
    height: 42px;
    justify-content: center;
    padding: 0 16px 0 16px;
  }
  .header-menu {
    height: 90px;
    padding: 24px 16px 20px 16px;
    /* background-color: var(--color-background-gray); */
  }

  .cta-button {
    display: none;
  }
  .cta-button-mobile {
    position: fixed;
    height: 48px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-background-button);
    color: #ffffff;
    cursor: pointer;
    z-index: 999999;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    appearance: none;
    border-style: none;
  }
  .toggle {
    display: block;
  }

  .menu {
    height: 100vh;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    background-color: var(--color-background-gray);
    top: 130px;
    left: 0;
    bottom: 0;
    overflow: hidden;
    gap: 24px;
    z-index: 99999;
  }

  .menu.active {
    display: flex;
    padding-top: 24px;
  }

  .menu-item {
    text-align: start;
    padding: 0;
    margin: 8px 0;
  }

  .menu-item > a {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    margin: 0 24px;
    font-size: 18px;
  }
  .menu-item:hover > a {
    background-color: #ffffff;
  }

  .submenu {
    position: static;
    padding: 0;
    flex-direction: column;
    text-align: start;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
  }
  .submenu h3 {
    font-size: 14px;
    margin: 0 0 16px 0;
  }
  .submenu p{
    margin: 0 0 24px 0;
  }
  .submenu a {
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 16px 0;
  }
  .submenu-content {
    width: auto;
    flex-direction: column;
    text-align: start;
    padding: 10px;
    gap: 0;
  }
  .submenu-column {
    padding: 0 24px;
  }
  .submenu-featured {
    display: none;
  }
  /* Neutralizar huecos que mete header.css en móvil sobre el UL */
  #main-menu.menu { gap: 0 !important; }
  #main-menu.menu.active { padding: 20px !important; }

  /* 0) Body bloqueado cuando el menú está abierto */
  body.nav-open {
    overflow: hidden;
    height: 100dvh;
    overscroll-behavior: none;
  }

  /* 1) Drawer: el panexºl con scroll es SOLO el UL (#main-menu), bajo la barra del header */
  body.nav-open #main-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-top, 0px);                         /* lo calcula el JS del header */
    height: calc(100svh - var(--nav-top, 0px));
    background: #eef2f5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 16px 96px;                          /* hueco para el CTA fijo */
    z-index: 98;                                      /* por debajo del header fijo */
  }
  
  /* 2) Nivel principal (Corporate, Rentals, Blog, About) → 8/16/8/16 y sin márgenes extra */
  #main-menu > .menu-item > a[href] {
    padding: 8px 16px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
  }

  /* 3) Acordeón en móvil: submenús dentro del flujo (nada de positions raros) */
  #main-menu .submenu {
    display: none;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #main-menu .menu-item.open > .submenu { display: block; }

  /* 5) Enlaces de submenú: 16/16 y sin márgenes, para que el ritmo lo marque el padding */
  #main-menu .submenu a,
  #main-menu .submenu .submenu-section li a {
    display: block;
    padding: 16px 16px !important;
    margin: 0 !important;                             /* anula margin-bottom de header.css */
  }

  /* 7) Título de sección en UPPERCASE, con 8px hasta su primer link, 16px laterales */
  #main-menu .submenu .submenu-section > h3 {
    margin:8px 16px !important;                    /* 8px hasta "Kids Holiday Parties" */
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  /* 8) Chevron (si existe) con giro al abrir y un poco de aire */
  #main-menu .menu-item .fa-chevron-down { transition: transform .2s ease; margin-left: 8px; }
  #main-menu .menu-item.open .fa-chevron-down { transform: rotate(180deg); }

  /* 9) Desactivar backdrop/mega de desktop en móvil */
  .nav-menu .backdrop-menu { display: none !important; }

}

@media (min-width: 1290px) {
  .submenu {
    width: 1168px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== MOBILE MENU — ESPACIADOS EXACTOS  ===== */
@media (max-width: 980px) {
  /* 0) Limpieza de huecos globales del contenedor de la lista */
  .menu { gap: 0 !important; }                 /* antes: gap:24px */
  .menu.active { padding-top: 0 !important; }  /* antes: padding-top:24px */

  /* 1) Filas principales (Corporate, Rentals, Blog, About)
        → padding 8px arriba/abajo, 16px laterales; sin márgenes laterales */
  .menu-item > a {
    padding: 8px 16px !important;              /* 8 / 16 / 8 / 16 */
    margin: 0 !important;                      /* antes: margin: 0 24px */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 2) Entre "Corporate Events" y "All Corporate Events" → 16px EXACTOS
        (lo da el contenedor del submenú; más robusto que tocar el primer <a>) */
  .menu-item.open > .submenu {
    padding-top: 16px !important;              /* ← la separación que pides */
    margin-top: 0 !important;
  }

  /* 3) Enlaces del submenú con padding vertical 16px
        (anula el 0 0 0 16px !important que elimina el vertical) */
  .submenu a,
  .submenu-section li a {
    padding: 16px 16px !important;
    margin: 0 !important;
  }

  /* 4) "All Corporate Events" → primer título de sección (CHRISTMAS EVENTS) → 24px */
  .submenu a + .submenu-section {              /* link seguido de bloque de sección */
    margin-top: 24px !important;
  }

  /* 5) Entre secciones consecutivas (SUMMER → MARKETING → OTHER POPULAR) → 24px */
  .submenu .submenu-section + .submenu-section {
    margin-top: 14px !important;
  }

  /* 6) Título de sección: UPPERCASE y 8px hasta su primer link; laterales 16px */
  .submenu .submenu-section > h3 {
    margin: 0 16px 8px !important;             /* 8px hasta "Kids Holiday Parties" */
    text-transform: uppercase;
    letter-spacing: .02em;
  }
}