/* Shared Site Header (pages/shared/site-header.js). */

.sr-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav, 100);
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
}

.sr-site-header--scrolled {
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
}

.sr-site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-s) var(--space-l);
  display: flex;
  align-items: center;
  gap: var(--space-l);
  box-sizing: border-box;
}

.sr-site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  /* The image itself carries the brand color/shape now (no more
     currentColor SVG + text label), so no font/color styling belongs
     on the link itself -- only layout. */
}

/* Final Logo Implementation -- the approved brand images (see
   pages/shared/site-header.js's LOGO_FULL_SRC / LOGO_MARK_SRC).
   `height` is the single sizing knob; `width: auto` on an <img> with
   real `width`/`height` attributes preserves the image's own intrinsic
   aspect ratio (never stretches/distorts) while still avoiding layout
   shift before the image loads, per the standard responsive-image
   pattern. Only one of the two is ever visible at a time (toggled by
   the breakpoints below).

   Product decision (Logo QA follow-up): the Project Owner asked for the
   full lockup (compass + "SpainReady") to stay visible on mobile rather
   than swapping to the icon-only mark as the default. Measured against
   the real header layout (language toggle + Instagram + "Empieza ahora"
   CTA, none of which this task is allowed to shrink or remove), the
   space actually available for the logo at each supported width is:
     320px -> ~40px   360px -> ~67px   390px -> ~97px   430px -> ~137px
   A lockup at the desktop height (34px, aspect ratio 900:213) needs
   ~144px -- so below ~390px there simply isn't room to show it without
   shrinking it into illegibility (at 320px the budget only allows a
   ~9px-tall image). 20px is the largest height that safely fits the
   lockup at the tightest width this range still covers (390px, ~97px
   budget, leaving ~13px of slack) and it only gets roomier as the
   viewport grows from there. */
.sr-site-header__logo-img {
  display: block;
  width: auto;
  height: 20px;
}
.sr-site-header__logo-img--mark { display: none; }

/* Below 390px (320-360/375px phones) the full lockup no longer fits
   next to the language toggle/Instagram/CTA at a legible size (see the
   budget numbers above). Only at this narrowest tier -- not the whole
   sub-768px mobile range -- fall back to the compass mark alone: the
   SAME approved asset family, not a fabricated alternative, kept
   slightly smaller than the desktop lockup height so it never makes
   the header taller than before. */
@media (max-width: 389px) {
  .sr-site-header__logo-img--full { display: none; }
  .sr-site-header__logo-img--mark { display: block; height: 28px; }

  /* Final Public Home / Locked Guide Preview Corrections Sprint, item
     19 (responsive QA): at this same narrowest tier, the actions row
     (language toggle + Instagram + account icon + CTA button, none of
     which this task may shrink or remove -- see the logo comment
     above) was ~7px wider than the viewport itself, causing page-level
     horizontal scroll. Tightening the header's own side padding and
     inter-icon gaps at this one breakpoint recovers that space without
     touching any icon, label, or the CTA's text/price. */
  .sr-site-header__inner { padding-left: var(--space-m); padding-right: var(--space-m); gap: var(--space-s); }
  .sr-site-header__actions { gap: var(--space-xs); }
  .sr-site-header__cta { padding: 8px 12px; }
}

/* Desktop: restore the original, roomier lockup height (nav is visible
   here and the header has far more width to spare). */
@media (min-width: 768px) {
  .sr-site-header__logo-img--full {
    height: 34px;
  }
}

.sr-site-header__nav {
  display: none;
  gap: var(--space-l);
  flex: 1;
  /* Final Production QA & Corrections Sprint, Home #1: the nav links
     sat flush against the logo (justify-content defaulted to
     flex-start within this flex:1 space) -- centered in the space
     between the logo and the actions/CTA instead. */
  justify-content: center;
}
.sr-site-header__link {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}
.sr-site-header__link:hover { color: var(--color-primary); }

.sr-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-left: auto;
}
.sr-site-header__cta {
  font-size: 14px;
  padding: 8px 16px;
  white-space: nowrap;
}

.sr-site-header__instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color 150ms ease;
}
.sr-site-header__instagram:hover { color: var(--color-primary); }

/* Final Public Home / Locked Guide Preview Corrections Sprint, item 2:
   account/login control. Same icon-link treatment as Instagram above
   (visually aligned, same color/hover behavior) with its own padding
   so it clears a ~40px tappable area on mobile without changing the
   header's own height (padding is absorbed by the existing row, not
   added on top of it). */
.sr-site-header__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  margin: -8px -6px;
  border-radius: 6px;
  color: var(--color-text-secondary);
  transition: color 150ms ease, background-color 150ms ease;
}
.sr-site-header__account:hover { color: var(--color-primary); }
.sr-site-header__account:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sr-site-header__account--signed-in { color: var(--color-primary); }

@media (min-width: 768px) {
  .sr-site-header__nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-site-header { transition: none; }
}