/* ==========================================================================
   HEADER — DIGART Studio
   Componente: Header

   Componente global reutilizable (Foundations → Components → Patterns):
   no pertenece a ningún Pattern. Consume exclusivamente los Design Tokens
   (tokens.css) y el Content Container oficial (.l-container, layout.css);
   no declara un sistema de espaciados ni de contenedores propio.

   Dos estados visuales oficiales (H-005), alternados por header.js
   mediante IntersectionObserver sobre el Hero:

   - .header--transparent (Estado 1, Hero visible): fondo transparente,
     sin borde perceptible, sin sombra; el Header se integra por
     completo con el Hero. Es el estado inicial del marcado.
   - .header--solid (Estado 2, Sticky): fondo oscuro con ligera
     transparencia, blur muy sutil y borde inferior extremadamente
     discreto, garantizando contraste sobre las secciones claras.

   La transición afecta únicamente background-color, backdrop-filter y
   border-color (Motion Tokens); nunca posición, tamaño ni padding. El
   menú móvil queda fuera del alcance de esta implementación.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Root
   El borde inferior existe siempre con color transparente (misma
   anchura en ambos estados) para que la transición anime únicamente
   border-color sin alterar la altura del componente.
   -------------------------------------------------------------------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  z-index: var(--z-header);
  background-color: transparent;
  border-block-end: var(--border-width-default) var(--border-style-solid) transparent;
  box-shadow: none;
  transition: background-color var(--motion-duration-normal) var(--motion-easing-standard),
    backdrop-filter var(--motion-duration-normal) var(--motion-easing-standard),
    border-color var(--motion-duration-normal) var(--motion-easing-standard);
}

/* Estado 1 — transparent (Hero visible): aspecto actual sin cambios. */
.header--transparent {
  background-color: transparent;
  border-block-end-color: transparent;
}

/* Estado 2 — solid (Hero fuera del viewport): fondo del Token de fondo
   inverso con ligera transparencia (88%, derivada del propio Token
   mediante color-mix, sin declarar un color independiente; los
   navegadores sin color-mix conservan el fondo sólido del Token como
   degradación segura), blur muy sutil (radio consumido de la Space
   Scale, el paso mínimo, en tanto no existe un Token de efecto) y
   filete inferior extremadamente discreto (mismo neutro intermedio de
   la Escala de Neutros ya usado como filete sobre superficies inversas
   en Success Stories). Logo, navegación, botón, espaciados y alturas
   permanecen intactos. */
.header--solid {
  background-color: var(--color-background-inverse);
  background-color: color-mix(in srgb, var(--color-background-inverse) 88%, transparent);
  -webkit-backdrop-filter: blur(var(--space-1));
  backdrop-filter: blur(var(--space-1));
  border-block-end-color: var(--color-text-secondary);
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-5);
}

/* --------------------------------------------------------------------
   2. Logotipo
   -------------------------------------------------------------------- */
.header__logo {
  display: inline-flex;
  align-items: center;
}

.header__logo img {
  display: block;
  width: auto;
  height: 28px;
}

/* --------------------------------------------------------------------
   3. Navegación principal
   -------------------------------------------------------------------- */
.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.header__nav-link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-navigation);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Estado activo (H-007): sección de navegación correspondiente a la
   ruta actual, resuelta en PHP por header.php (digart_header_nav_attrs).
   Mismo acento institucional (--color-error, D-036) ya usado como
   Hover/Focus de los enlaces del panel móvil, para no introducir un
   color de estado independiente. */
.header__nav-link--active {
  color: var(--color-error);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------
   4. CTA
   -------------------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------
   4.1 Ubicación contextual (H-007)
   Integrada en .header__actions: no aumenta la altura del Header (fila
   ya gobernada por la altura del CTA) ni el ancho reservado en
   .header--transparent (display: none, sin ocupar espacio). Oculta en
   Mobile de forma implícita: hereda el display: none ya aplicado a
   .header__actions completo en el breakpoint oficial (bloque 5).
   -------------------------------------------------------------------- */
.header__context {
  display: none;
}

.header--solid .header__context {
  display: block;
}

.header__context-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.header__context-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header__context-item:not(:first-child)::before {
  content: "/";
  color: var(--color-text-tertiary);
}

.header__context-link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.header__context-link:hover,
.header__context-link:focus-visible {
  color: var(--color-error);
}

.header__context-current {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
   5. Responsive — Menú móvil Off-canvas (H-006A/H-006B)
   Fuera del breakpoint oficial, los tres elementos del menú móvil
   (hamburguesa, scrim y panel) no se muestran: Desktop permanece
   idéntico. Todo el comportamiento nuevo vive dentro del media query
   (--breakpoint-tablet: 768px, valor literal, mismo criterio que
   layout.css). header.js alterna .header__panel--open y
   .header__scrim--open junto con los atributos ARIA; esta hoja solo
   resuelve apariencia y motion. Motion oficial: apertura con
   --motion-duration-slow y easing enfatizado, cierre con
   --motion-duration-normal y easing estándar (H-006A, 5). El scrim y
   el panel son hermanos del <header> (ver header.php): el
   backdrop-filter del estado solid convertiría al Header en containing
   block de sus descendientes fixed. prefers-reduced-motion ya se
   resuelve globalmente en reset.css.
   -------------------------------------------------------------------- */
.header__menu-toggle,
.header__scrim,
.header__panel {
  display: none;
}

@media (max-width: 768px) {
  /* Contención horizontal del scroller raíz: .header__panel cerrado
     (3. Elements de este bloque) permanece en flujo con su ancho real
     (min(80vw, --breakpoint-mobile)) y solo se retira del viewport
     mediante transform: translateX(100%); el navegador sigue
     contabilizando esa posición pre-transform en el ancho scrollable
     del documento, ampliando documentElement.scrollWidth más allá del
     viewport visual y exponiendo scroll horizontal (además de dejar la
     hamburguesa fuera del área visible en algunos casos). overflow-x
     en el elemento raíz recorta ese excedente sin alterar el ancho, la
     estructura ni la animación del panel: hidden es el valor de
     respaldo (todo navegador lo soporta); clip lo sustituye donde está
     disponible, mismo efecto de recorte sin habilitar programmatic
     scroll al contenido oculto. No afecta el scroll vertical de la
     página ni el de .header__panel (overflow-y: auto, propio). */
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .header__nav,
  .header__actions {
    display: none;
  }

  /* Hamburguesa: tres barras construidas con Tokens existentes (misma
     receta dimensional del indicador de scroll del Hero y los
     divisores editoriales), en color inverso, legible tanto sobre la
     fotografía del Hero (transparent) como sobre el fondo oscuro
     (solid). */
  .header__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .header__menu-toggle-bar {
    display: block;
    width: var(--space-5);
    height: var(--border-width-thick);
    border-radius: var(--border-radius-full);
    background-color: var(--color-text-inverse);
  }

  /* Scrim: área activa de cierre sobre la página, categoría oficial
     Overlay. Cierra con visibility diferida para no cortar el fundido. */
  .header__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background-color: var(--color-overlay-default);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-duration-normal) var(--motion-easing-standard),
      visibility var(--motion-duration-normal) var(--motion-easing-standard);
  }

  .header__scrim--open {
    opacity: 1;
    visibility: visible;
    transition-duration: var(--motion-duration-slow);
    transition-timing-function: var(--motion-easing-emphasized);
  }

  /* Panel Off-canvas derecho: ~80% del viewport con tope en el Token
     --breakpoint-mobile (H-006A, 1), fondo editorial oscuro oficial,
     desplazamiento propio si el contenido excede la altura. */
  .header__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(80vw, var(--breakpoint-mobile));
    padding: var(--space-6);
    overflow-y: auto;
    z-index: var(--z-modal);
    background-color: var(--color-background-inverse);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--motion-duration-normal) var(--motion-easing-standard),
      visibility var(--motion-duration-normal) var(--motion-easing-standard);
  }

  .header__panel--open {
    transform: none;
    visibility: visible;
    transition-duration: var(--motion-duration-slow);
    transition-timing-function: var(--motion-easing-emphasized);
  }

  /* Botón de cierre: X construida con las dos barras rotadas, primer
     elemento focusable del panel (foco inicial, H-006A, 6). */
  .header__panel-close {
    align-self: flex-end;
    position: relative;
    width: var(--space-5);
    height: var(--space-5);
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .header__panel-close-bar {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    display: block;
    height: var(--border-width-thick);
    border-radius: var(--border-radius-full);
    background-color: var(--color-text-inverse);
  }

  .header__panel-close-bar:first-child {
    transform: rotate(45deg);
  }

  .header__panel-close-bar:last-child {
    transform: rotate(-45deg);
  }

  .header__panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
  }

  /* Enlaces del panel: nivel jerárquico H4 para presencia editorial en
     el panel, mismo criterio cromático Hover/Focus (--color-error) ya
     aplicado a los enlaces sobre superficies oscuras (Footer, D-036). */
  .header__panel-link {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-heading);
    color: var(--color-text-inverse);
    text-decoration: none;
  }

  .header__panel-link:hover,
  .header__panel-link:focus-visible {
    color: var(--color-error);
  }

  /* Estado activo (H-007): mismo acento y criterio que
     .header__nav-link--active (Desktop). */
  .header__panel-link--active {
    color: var(--color-error);
  }

  /* CTA: remate de la jerarquía, separado del bloque de navegación
     únicamente con la Space Scale oficial y a ancho completo del panel
     (el Componente Button no se modifica: el ancho lo impone el layout
     del contenedor). */
  .header__panel-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-block-start: var(--space-6);
  }
}