/* ==========================================================================
   Denty — Header
   ONE header element, position:fixed at all times, same physical
   footprint (height/padding/width never change) in both states — only its
   surface (background/border/shadow) and text colors recolor:
     - default (.site-header, no modifier): transparent, white text — reads
       as part of the Hero.
     - .is-stuck (js/header.js toggles this via IntersectionObserver on
       <main> — see there): the next section has started entering the
       viewport, so the header recolors to a white bar with dark text.
   No inset/pill, no size change — see css/variables.css for the two named
   transition tokens used below (never `transition: all`).
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Background/photo are visible from the first frame and the headline
     is the Hero's one signature reveal (see css/hero.css) — the Header
     just needs to settle in quickly alongside them, not queue up behind
     the rest of the intro. */
  animation: headerIn 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.header-inner {
  max-width: var(--container-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  column-gap: var(--space-6);
  /* Height, padding and width are identical in both states — only the
     surface underneath ever changes. */
  height: var(--header-height);
  /* Left edge reads from the same token as .hero-inner's left padding
     (see variables.css) so the logo and the Hero headline share one
     vertical axis at every breakpoint — right stays on the plain sitewide
     container padding, matching the nav/CTA cluster's usual rhythm. */
  padding-left: var(--content-inset-left);
  padding-right: var(--container-padding);
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  /* background-color gets its own, much shorter duration than
     border/shadow: .is-stuck <-> .is-dark-section swaps this between
     white and dark navy, and animating two opposite colours over the
     same 400ms border/shadow timing means the browser spends a good
     chunk of that interpolating through a visibly muddy grey — not a
     crossfade, a wash-out. Kept quick enough that the eye reads it as a
     clean swap instead of dwelling on the midpoint; border-color and
     box-shadow stay on the slower shared token since their low-alpha
     colours never produce that muddiness. */
  transition: background-color 120ms ease, border-color var(--transition-header-surface),
    box-shadow var(--transition-header-surface);
}

.site-header.is-stuck .header-inner {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: rgba(15, 26, 45, 0.08);
  box-shadow: 0 8px 30px rgba(15, 26, 45, 0.08);
}

/* ---------------------------------------------------------------- Logo -- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-mark {
  display: block;
  /* ~5% down from 42px — the mark was carrying slightly more visual
     weight than the nav/CTA cluster next to it. */
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-word {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
  transition: color var(--transition-header-color);
}

.site-header.is-stuck .logo-word {
  color: var(--color-dark);
}

/* ---------------------------------------------------------- Navigation -- */

.main-nav {
  display: flex;
  flex-shrink: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  /* ~15% wider than the previous clamp(24px, 2.4vw, 40px) — navigation
     reads as spread across the header instead of huddled in the middle. */
  gap: clamp(28px, 2.8vw, 46px);
  flex-wrap: nowrap;
}

.nav-list .nav-link span {
  white-space: nowrap;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 6px 2px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: color var(--transition-header-color);
}

.nav-link:hover {
  color: var(--color-white);
}

.site-header.is-stuck .nav-link {
  color: var(--color-dark);
}

.site-header.is-stuck .nav-link:hover {
  color: var(--color-primary);
}

/* ----------------------------------------------------------- Controls -- */

.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.lang-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding-inline: 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-white);
  font-size: 14px;
  font-weight: var(--fw-medium);
  transition: background var(--transition-fast), border-color var(--transition-header-surface),
    color var(--transition-header-color);
}

.lang-select:hover {
  background: rgba(255, 255, 255, 0.22);
}

.site-header.is-stuck .lang-select {
  background: var(--color-light);
  border-color: rgba(15, 26, 45, 0.06);
  color: var(--color-dark);
}

.site-header.is-stuck .lang-select:hover {
  background: #efefef;
}

.flag-icon {
  font-size: 15px;
  line-height: 1;
}

.lang-select svg {
  width: 10px;
  height: 10px;
  color: currentColor;
  opacity: 0.7;
  transition: transform var(--transition-fast);
}

.lang-select[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------------- CTA -- */

.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 10px;
  height: 50px;
  padding-inline: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--transition-header-surface), color var(--transition-header-color),
    padding var(--transition-base), transform 200ms var(--ease-standard);
}

.cta-btn:hover {
  transform: translateY(-1px);
}

.site-header.is-stuck .cta-btn {
  background: var(--color-primary);
  color: var(--color-white);
}

.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(15, 26, 45, 0.08), rgba(15, 26, 45, 0));
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: -1;
}

.site-header.is-stuck .cta-btn::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

.cta-btn:hover::before {
  opacity: 1;
}

.cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
}

.cta-btn:hover .cta-arrow {
  transform: translateX(3px);
}

/* -------------------------------------------------------- Mobile burger -- */

.burger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-white);
  transition: color var(--transition-header-color);
}

.site-header.is-stuck .burger-btn {
  color: var(--color-dark);
}

.burger-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.site-header.is-stuck .burger-btn:hover {
  background: var(--color-light);
}

.burger-btn svg {
  width: 20px;
  height: 20px;
}

.burger-icon-close {
  display: none;
}

.site-header.is-menu-open .burger-icon-open {
  display: none;
}

.site-header.is-menu-open .burger-icon-close {
  display: block;
}

/* --------------------------------------------------------- Mobile panel -- */

.mobile-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.site-header.is-menu-open .mobile-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-nav-list .nav-link {
  width: 100%;
  padding: 12px 4px;
  font-size: 17px;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav-list .nav-link:last-child {
  border-bottom: none;
}

.mobile-panel .cta-btn {
  width: 100%;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
}

/* ================================================================== */
/* Responsive                                                          */
/* ================================================================== */

@media (max-width: 1240px) {
  .nav-list {
    gap: clamp(16px, 1.85vw, 32px);
  }

  .header-controls {
    gap: var(--space-4);
  }

  .cta-btn {
    height: 46px;
    padding-inline: 20px;
    font-size: 14.5px;
  }

  .lang-select {
    height: 42px;
    padding-inline: 14px;
    font-size: 13px;
  }

  .header-inner {
    padding-right: var(--space-6);
  }
}

@media (max-width: 1100px) {
  .main-nav,
  .header-controls > .cta-btn {
    display: none;
  }

  .header-inner {
    justify-content: space-between;
    padding-right: var(--space-5);
  }

  .burger-btn {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .logo-word {
    font-size: 22px;
  }

  .logo-mark {
    width: 30px;
    height: 30px;
  }

  .lang-select {
    height: 38px;
    padding-inline: 12px;
  }

  .mobile-panel {
    left: -1px;
    right: -1px;
  }
}

/* ==========================================================================
   Desktop geometry (>=1101px; below that the burger layout above applies
   untouched). Geometry, type and spacing ONLY — surfaces/colours live in
   the .is-stuck / .is-dark-section rules and are not touched here.
   One flex row: LOGO — NAV — (free space) — ACTIONS, with explicit gaps
   rather than per-element margins. Every tier below just re-points the
   same custom properties, so the layout itself is written once.
   ========================================================================== */

@media (min-width: 1101px) {
  .header-inner {
    /* Floating bar: real outer air left/right instead of touching the
       viewport edges; margin scales with the viewport, capped so ultra
       wide screens don't stretch it. */
    width: min(100% - clamp(48px, 6.94vw, 120px), 1880px);
    max-width: none;
    /* Spacing between the three groups comes only from the variables
       below (logo->nav margin, nav->actions padding, actions gap). */
    column-gap: 0;
    padding-left: var(--h-pad-l);
    padding-right: var(--h-pad-r);

    /* Tier C (1101-1279): compact — gaps first, then type. */
    --h-pad-l: 32px;
    --h-pad-r: 28px;
    --h-logo-mark: 38px;
    --h-logo-fs: 27px;
    --h-logo-nav: 24px;
    --h-nav-fs: 14.5px;
    --h-nav-gap: 16px;
    --h-nav-actions: 20px;
    --h-actions-gap: 12px;
    --h-lang-h: 42px;
    --h-lang-w: 92px;
    --h-lang-fs: 14px;
    --h-flag: 16px;
    --h-cta-h: 46px;
    --h-cta-w: 160px;
    --h-cta-fs: 14.5px;
  }

  .header-inner .logo-mark {
    width: var(--h-logo-mark);
    height: var(--h-logo-mark);
  }

  .header-inner .logo-word {
    font-size: var(--h-logo-fs);
  }

  /* Navigation floats in the free space between logo and actions: the
     logo's margin sets the minimum distance to it, and any extra width
     (wide desktops) is shared equally on both sides instead of opening a
     hole after the last item. */
  .header-inner .logo {
    margin-right: var(--h-logo-nav);
  }

  .header-inner .main-nav {
    margin-inline: auto;
  }

  .header-inner .nav-list {
    gap: var(--h-nav-gap);
  }

  .header-inner .nav-link {
    font-size: var(--h-nav-fs);
    font-weight: var(--fw-medium);
    line-height: 1;
  }

  .header-inner .header-controls {
    /* The actions read as their own group: this padding is the minimum
       air between the last nav item and the language selector. */
    padding-left: var(--h-nav-actions);
    gap: var(--h-actions-gap);
    /* Free space is shared by the two auto margins around the nav only. */
    margin-left: 0;
  }

  .header-controls > .lang-select {
    height: var(--h-lang-h);
    min-width: var(--h-lang-w);
    justify-content: center;
    padding-inline: 14px;
    gap: 8px;
    font-size: var(--h-lang-fs);
    line-height: 1;
  }

  .header-controls > .lang-select .flag-icon {
    font-size: var(--h-flag);
  }

  .header-controls > .lang-select svg {
    width: 12px;
    height: 12px;
  }

  .header-controls > .cta-btn {
    height: var(--h-cta-h);
    min-width: var(--h-cta-w);
    justify-content: center;
    padding-inline: 20px;
    gap: 12px;
    font-size: var(--h-cta-fs);
    font-weight: var(--fw-semibold);
    line-height: 1;
  }
}

/* Tier B (1280-1439) */
@media (min-width: 1280px) {
  .header-inner {
    --h-pad-l: 40px;
    --h-pad-r: 32px;
    --h-logo-mark: 40px;
    --h-logo-fs: 29px;
    --h-logo-nav: 32px;
    --h-nav-fs: 15.5px;
    --h-nav-gap: 24px;
    --h-nav-actions: 32px;
    --h-actions-gap: 16px;
    --h-lang-h: 48px;
    --h-lang-w: 104px;
    --h-lang-fs: 15px;
    --h-flag: 18px;
    --h-cta-h: 52px;
    --h-cta-w: 188px;
    --h-cta-fs: 16px;
  }
}

/* Tier A1 (1440-1599): reference proportions at the tightest width they
   fit — the logo still lands on the hero headline's left edge here. */
@media (min-width: 1440px) {
  .header-inner {
    --h-pad-l: clamp(48px, 3.5vw, 56px);
    --h-pad-r: 40px;
    --h-logo-mark: 42px;
    --h-logo-fs: 31px;
    --h-logo-nav: 40px;
    --h-nav-fs: 16.5px;
    --h-nav-gap: 32px;
    --h-nav-actions: 40px;
    --h-actions-gap: 22px;
    --h-lang-h: 54px;
    --h-lang-w: 116px;
    --h-lang-fs: 16px;
    --h-flag: 20px;
    --h-cta-h: 60px;
    --h-cta-w: 220px;
    --h-cta-fs: 17px;
  }
}

/* Tier A2 (>=1600): full reference sizes, extra room goes to the air
   between navigation and actions. */
@media (min-width: 1600px) {
  .header-inner {
    --h-pad-l: 56px;
    --h-pad-r: 48px;
    --h-logo-mark: 44px;
    --h-logo-fs: 33px;
    --h-logo-nav: 48px;
    --h-nav-fs: 17.5px;
    --h-nav-gap: 40px;
    --h-nav-actions: 52px;
    --h-actions-gap: 24px;
    --h-lang-w: 118px;
    --h-cta-w: 224px;
  }
}

/* ==========================================================================
   Dark-section header (js/header.js, via [data-header-theme="dark"] on a
   section like .cases-body): recolors the already-.is-stuck header to sit
   on a dark background instead of leaving a white bar over it — same
   solid/frosted treatment as .is-stuck, just the surface and text polarity
   flipped to match (white text on dark, same as the Hero look, but opaque
   instead of transparent). Declared last on purpose: every rule here has
   the same specificity as its .is-stuck counterpart above, so source order
   is what makes these win while .is-dark-section is present.
   ========================================================================== */

.site-header.is-dark-section .header-inner {
  background-color: rgba(15, 26, 45, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.site-header.is-dark-section .logo-word {
  color: var(--color-white);
}

.site-header.is-dark-section .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.site-header.is-dark-section .nav-link:hover {
  color: var(--color-white);
}

.site-header.is-dark-section .lang-select {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--color-white);
}

.site-header.is-dark-section .lang-select:hover {
  background: rgba(255, 255, 255, 0.22);
}

.site-header.is-dark-section .cta-btn {
  background: var(--color-white);
  color: var(--color-dark);
}

.site-header.is-dark-section .cta-btn::before {
  background: linear-gradient(180deg, rgba(15, 26, 45, 0.08), rgba(15, 26, 45, 0));
}

.site-header.is-dark-section .burger-btn {
  color: var(--color-white);
}

.site-header.is-dark-section .burger-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}