/* =====================================================================
   Header — barra sticky con logo, navegación y CTA
   ===================================================================== */

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--fdq-surface-container-lowest);
  border-bottom: 1px solid var(--fdq-slate-200);
  transition: box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
/* Al hacer scroll se compacta (clase añadida por assets/js/header.js) */
header.wp-block-template-part.is-scrolled {
  box-shadow: var(--fdq-shadow-md);
}

.fdq-header__row {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  min-height: 96px;
  padding-inline: var(--fdq-space-md);
  transition: min-height var(--fdq-duration-base) var(--fdq-ease-out);
}
.is-scrolled .fdq-header__row { min-height: 64px; }

.fdq-header__logo { margin: 0; line-height: 0; }
.fdq-header__logo img {
  height: 72px;
  width: auto;
  transition: height var(--fdq-duration-base) var(--fdq-ease-out);
}
.is-scrolled .fdq-header__logo img { height: 46px; }

.fdq-header__actions { gap: var(--fdq-space-lg); margin-left: auto; }

/* ---------- Navegación ---------- */
.fdq-nav { gap: var(--fdq-space-md); }

.fdq-nav .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--fdq-slate-600);
  font-family: var(--fdq-font-heading);
  font-size: var(--fdq-fs-body-md);
  font-weight: 500;
  letter-spacing: -0.025em;
  border-bottom: 2px solid transparent;
  transition: color var(--fdq-duration-base) var(--fdq-ease-out);
}

.fdq-nav .wp-block-navigation-item__content:hover,
.fdq-nav .wp-block-navigation-item__content:focus {
  color: var(--fdq-secondary-container);
}

.fdq-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content,
.fdq-nav .current-menu-item > .wp-block-navigation-item__content,
.fdq-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--fdq-secondary-container);
  font-weight: 700;
  border-bottom-color: var(--fdq-secondary-container);
}

/* ---------- Submenú desplegable (Servicios) ---------- */
.fdq-nav .wp-block-navigation__submenu-icon { margin-left: var(--fdq-space-base); }

/* La "tarjeta" flotante del submenú es solo para el menú en línea de escritorio
   (≥992px). En el overlay móvil el submenú va plano (lo maneja el CSS de core),
   si no se ve como una caja con borde/sombra colgando dentro del menú. */
@media (min-width: 992px) {
  .fdq-nav .wp-block-navigation__submenu-container {
    min-width: 240px;
    padding: var(--fdq-space-xs);
    background-color: var(--fdq-surface-container-lowest);
    border: 1px solid var(--fdq-slate-200);
    border-radius: var(--fdq-radius-md);
    box-shadow: var(--fdq-shadow-lg);
  }
}
.fdq-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  min-height: 0;
  padding: var(--fdq-space-xs) var(--fdq-space-sm);
  border-bottom: 0;
  border-radius: var(--fdq-radius-sm);
  font-weight: 500;
  white-space: nowrap;
}
.fdq-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.fdq-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: var(--fdq-surface-container-low);
  color: var(--fdq-secondary-container)
}
.fdq-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--fdq-secondary-container);
  font-weight: 700;
}

/* Botón hamburguesa (móvil) */
.fdq-nav .wp-block-navigation__responsive-container-open,
.fdq-nav .wp-block-navigation__responsive-container-close {
  color: var(--fdq-primary);
}

/* ---------- Breakpoint del menú ----------
   El bloque Navigation de core colapsa a hamburguesa solo por debajo de 600px.
   Para este diseño (5 enlaces + CTA) el menú en línea queda apretado hasta ~992px
   y parece "abierto de primeras" en tablet/móvil apaisado. Forzamos hamburguesa
   hasta 991px y menú en línea desde 992px. La doble clase (.fdq-nav.fdq-nav) sube
   la especificidad por encima de las reglas de core sin depender del orden de carga.
   Solo afecta al estado cerrado (:not(.is-menu-open)), así que el overlay sigue
   abriéndose con normalidad al pulsar la hamburguesa. */
@media (max-width: 991.98px) {
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}
@media (min-width: 992px) {
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container-open {
    display: none;
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
    position: relative;
    width: 100%;
  }
}

/* ---------- Overlay móvil: panel desplegable bajo el header ----------
   Por defecto el overlay de core es una ventana a pantalla completa (top:0) que
   tapa el header. Lo abrimos JUSTO debajo del header para que el logo siga
   visible, como un panel desplegable de altura según contenido y con padding. */
@media (max-width: 991.98px) {
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open {
    top: 96px;            /* arranca bajo el header (logo visible) */
    bottom: 0;            /* y llega hasta abajo: fondo sólido, no se ve la página */
    height: auto;
    overflow-y: auto;
    padding: var(--fdq-space-xs) var(--fdq-space-md) var(--fdq-space-md);
    background-color: var(--fdq-surface-container-lowest); /* mismo fondo que el header */
    border-top: 1px solid var(--fdq-slate-200);
    /* Sin la animación de core: deja un transform aplicado (fill-mode forwards) que
       convierte el panel en bloque contenedor y atraparía la X (position:fixed). */
    animation: none;
  }
  /* Cuando el header está compactado (scroll) mide 64px */
  header.wp-block-template-part.is-scrolled .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open {
    top: 64px;
  }

  /* ----- Hamburguesa ↔ X -----
     Al abrir, ocultamos la hamburguesa y llevamos la X al hueco que ocupaba en el
     header (queda como si una se transformara en la otra). Core añade
     `has-modal-open` al <html> al abrir, así que lo usamos como ancestro fiable
     (más compatible que :has). La doble clase del botón sube la especificidad por
     encima de la regla que lo muestra. */
  html.has-modal-open .fdq-nav.fdq-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
    display: none;
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: 36px;                       /* centrado en el header de 96px */
    right: var(--fdq-space-md);
    z-index: 100001;
    color: var(--fdq-primary);
  }
  header.wp-block-template-part.is-scrolled .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 20px;                       /* centrado en el header compactado de 64px */
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: var(--fdq-space-xs);
  }

  /* ----- Enlaces de primer nivel: línea separadora entre ellos ----- */
  /* stretch para que cada ítem (y su borde) ocupe el 100% del ancho, no solo el
     ancho de su texto (que varía por enlace). */
  .fdq-nav.fdq-nav .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    gap: 0;
    align-items: stretch;
    width: 100%;
  }
  .fdq-nav.fdq-nav .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
    border-bottom: 1px solid var(--fdq-outline-variant);
  }
  .fdq-nav.fdq-nav .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:last-child {
    border-bottom: 0;
  }

  /* ----- Servicios = acordeón ----- */
  /* La fila "Servicios": enlace + flecha en la MISMA línea (core los apila en
     columna en el overlay), y el submenú envuelve a la línea de abajo. */
  .fdq-nav.fdq-nav .is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .fdq-nav.fdq-nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    flex: 1 1 auto;
    min-height: 52px;                /* alto de la fila pulsable de "Servicios" */
  }
  /* El botón-flecha cubre TODA la fila de "Servicios" (no solo la flecha), para que
     un toque en cualquier punto despliegue. Transparente, con la flecha a la derecha. */
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;                    /* igual que la fila del enlace, no tapa el submenú */
    width: auto;
    margin: 0;
    padding-right: var(--fdq-space-sm);
    justify-content: flex-end;
    align-items: center;
    /* El enlace "Servicios" lleva z-index:1 de core (efectivo por ser flex item),
       así que el toggle debe ir por encima para recibir los taps de toda la fila. */
    z-index: 2;
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
    width: 18px;
    height: 18px;
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    flex-basis: 100%;
    height: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    padding: 0;
  }
  .fdq-nav.fdq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    height: auto;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    padding-block: var(--fdq-space-xs);
  }
  /* Indent de los subenlaces para marcar jerarquía */
  .fdq-nav.fdq-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-left: var(--fdq-space-md);
  }
}

/* ---------- CTA (oculto en móvil, como el diseño) ---------- */
.wp-block-buttons.fdq-header__cta { display: none; }

@media (min-width: 768px) {
  .wp-block-buttons.fdq-header__cta { display: flex; }
}

/* "Contacto" dentro del menú: solo se muestra cuando el botón CTA está oculto
   (< 768px), donde el hamburguesa es la única vía. A partir de 768px el botón
   reaparece, así que ocultamos el enlace del menú para no duplicarlo. */
@media (min-width: 768px) {
  .fdq-nav .wp-block-navigation-item.fdq-nav-contacto { display: none; }
}