/*
Casa de Cerezo · Header (cdc) — CSS SITE-WIDE.

Fuente ÚNICA de los estilos del header, extraídos de cdc-home.css para que el
header se vea y se comporte igual en TODAS las páginas, no solo en la Home.
Antes había dos implementaciones en paralelo (la plantilla standalone de la Home
y la template part del tema de bloques) y divergían: hamburguesa a la izquierda
en unas páginas, nav de escritorio desbordando en otras, y Mi cuenta / Carrito /
idioma fuera del panel desplegable.

A diferencia de cdc-footer.css, este archivo SÍ se carga también en la Home, y
las reglas de header se han eliminado de cdc-home.css para no duplicarlas.
*/

:root {
  --cdc-wine-950: #210204;
  --cdc-wine-800: #4a070b;
  --cdc-gold-500: #c9a967;
  --cdc-cream-100: #f7efe3;
  --cdc-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --cdc-sans: "Montserrat", "Inter", Arial, sans-serif;
  --cdc-container: min(100% - 40px, 1160px);
}

.cdc-site-header,
.cdc-site-header * {
  box-sizing: border-box;
}

/* WCAG 2.4.1 — Enlace para saltar al contenido: fuera de pantalla hasta que
   recibe el foco por teclado, momento en el que se muestra sobre el header. */
.cdc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--cdc-wine-950);
  color: var(--cdc-cream-100);
  font-family: var(--cdc-sans);
  font-size: 14px;
  text-decoration: underline;
}

.cdc-skip-link:focus {
  left: 0;
}

.cdc-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--cdc-gold-500);
  background: linear-gradient(90deg, var(--cdc-wine-950), var(--cdc-wine-800) 48%, var(--cdc-wine-950));
  border-bottom: 1px solid rgba(201, 169, 103, .16);
  font-family: var(--cdc-sans);
}

/* En la Home esta anchura la da cdc-home.css, pero en el resto del sitio ese
   archivo no se carga y el contenido quedaba pegado a los bordes. */
.cdc-site-header .cdc-container {
  width: var(--cdc-container);
  margin-inline: auto;
}

/* Defensa ante wpautop: si al servirse por shortcode vuelve a envolver partes
   del header en párrafos, `display:contents` los disuelve y sus hijos vuelven a
   ser elementos flex directos, conservando su `order`. Sin esto, el botón del
   menú acababa antes del logo. */
.cdc-header-inner > p {
  display: contents;
}

.cdc-header-inner {
  min-height: 104px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

/* WCAG 1.4.4 — Con el texto al 200 % la fila del header no cabía y las acciones
   desbordaban el viewport.
   El salto de línea NO puede ser incondicional: flexbox envuelve ANTES de
   encoger, así que un `wrap` permanente partía el header en dos filas ya en
   escritorio normal (el contenido mide ~1181px y el contenedor 1160), y peor
   aún en portátiles de 1024px.
   La media query va en `em` a propósito: los `em` escalan con el tamaño de
   texto del navegador y los `px` no. A tamaño normal, 50em = 800px, así que en
   escritorio nunca entra; con el texto al 200 % la raíz pasa a 32px y 50em
   equivalen a 1600px, de modo que entra en cualquier pantalla y el header se
   reordena en vez de desbordar. */
@media (max-width: 50em) {
  .cdc-header-inner {
    flex-wrap: wrap;
  }
}

.cdc-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--cdc-gold-500);
  text-decoration: none;
}

.cdc-logo__img {
  display: block;
  height: 54px;
  width: auto;
}

.cdc-logo__crest {
  width: 48px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 4px 4px 16px 16px;
  font-family: var(--cdc-serif);
  font-size: 18px;
  line-height: 1;
}

.cdc-logo__wordmark {
  font-family: var(--cdc-serif);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.cdc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 42px);
}

.cdc-nav a,
.cdc-header-actions a {
  color: var(--cdc-cream-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.cdc-nav a:hover,
.cdc-header-actions a:hover {
  color: var(--cdc-gold-500);
}

.cdc-header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Hamburguesa: oculta en escritorio, a la derecha en móvil. */
.cdc-menu-toggle {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(201, 169, 103, .5);
  background: transparent;
  color: var(--cdc-gold-500);
  cursor: pointer;
}

.cdc-menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
}

/* ------------------------------------------------------------------
   Móvil: un único patrón en todo el sitio. El nav de escritorio y las
   acciones se ocultan; la hamburguesa de la derecha las despliega TODAS
   (navegación + Mi cuenta + Carrito + selector de idioma).
   ------------------------------------------------------------------ */
@media (max-width: 1240px) {
  /* La altura la fija cerezo-visual-system.css (min-height:64px) para las dos
     plantillas; no se repite aquí para no dejar una regla muerta. */
  .cdc-header-inner {
    flex-wrap: wrap;
  }

  /* Con flex-wrap, el botón es el último hijo y al desplegarse el panel caía
     debajo de todo. El orden explícito lo mantiene arriba a la derecha, junto
     al logo, tanto cerrado como abierto. */
  .cdc-logo {
    order: 1;
    min-width: 0;
    margin-right: auto;
  }

  .cdc-menu-toggle {
    order: 2;
  }

  .cdc-nav {
    order: 3;
  }

  .cdc-header-actions {
    order: 4;
  }

  .cdc-logo__wordmark {
    font-size: 26px;
  }

  .cdc-nav,
  .cdc-header-actions {
    display: none;
  }

  .cdc-menu-toggle {
    display: block;
  }

  /* Panel abierto: ocupa la pantalla completa. Al quedarse a la altura de su
     contenido asomaba el hero por debajo y el menú no se leía como una capa
     propia. `position:fixed` + alto de viewport lo convierten en overlay.
     100dvh evita que la barra de direcciones de Safari iOS recorte el panel;
     100vh queda de reserva para navegadores sin soporte. */
  .cdc-site-header.is-open {
    position: fixed;
    inset: 0;
    z-index: 100;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Al ser fixed, el panel ignora el desplazamiento que la barra de admin
     aplica al body: sin esto, navegando logueado la barra taparía el logo y el
     botón de cerrar. En móvil la barra de WordPress mide 46px. */
  body.admin-bar .cdc-site-header.is-open {
    top: 46px;
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }

  /* Dentro del overlay, el ancho de .cdc-container dejaba márgenes asimétricos
     (el panel tiene su propia caja de scroll), así que los elementos no
     quedaban centrados respecto a la pantalla. En el panel el contenido ocupa
     todo el ancho y el aire lo da el padding. */
  .cdc-site-header.is-open .cdc-header-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 20px;
    min-height: 100vh;
    min-height: 100dvh;
    align-content: flex-start;
  }

  /* Todo el contenido del panel, centrado y a un tamaño cómodo de pulsar. */
  .cdc-site-header.is-open .cdc-nav,
  .cdc-site-header.is-open .cdc-header-actions {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 22px;
    justify-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Espaciados medidos para que el menú completo quepa en una pantalla de
     móvil sin scroll interno (verificado a 390x844). */
  .cdc-site-header.is-open .cdc-nav {
    padding-top: 4vh;
  }

  .cdc-site-header.is-open .cdc-nav a {
    font-size: 1.3rem;
    letter-spacing: .14em;
  }

  .cdc-site-header.is-open .cdc-header-actions {
    margin-top: 3vh;
    padding: 3vh 0 4vh;
    border-top: 1px solid rgba(201, 169, 103, .22);
    gap: 18px;
  }

  .cdc-site-header.is-open .cdc-header-actions a {
    font-size: 1.05rem;
    letter-spacing: .12em;
  }

  /* El selector de idioma es un <select>: se centra y se agranda aparte. */
  .cdc-site-header.is-open .cdc-lang-switcher {
    justify-content: center;
  }

  .cdc-site-header.is-open .cdc-lang-switcher select {
    font-size: 1.05rem;
    padding: .5em 1em;
  }
}