/* ==========================================================================
   Header - Figma node 7129:264 (transparent) and 7129:6544 (solid).

   The buttons in the bar are plain .btn / .btn--secondary / .btn--primary from
   buttons.css; what this file owns is how that pair is dressed for the ground
   it is standing on - white page, photo, or blue bar. The bar, the nav, the
   brand lockup's placement and the mobile drawer are the rest of it.
   Depends on the tokens in tokens.css and .brand in layout.css.
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--header-h);
  padding-block: 12px;
  border-bottom: 0;
  background: transparent;
  color: var(--c-on-dark);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

  /*
   * The pair of action buttons swaps costume between the two grounds, and the
   * swap is the design rather than a workaround: whichever button is the loud
   * one has to be the one that is filled, and on a blue bar "filled" means
   * white while on a photo it means blue. So --primary is loud and --secondary
   * quiet in both, they just trade fills.
   *
   * Careful reading the variant names against what is stored: the two buttons
   * in Site settings are saved as primary = "Tham quan", secondary = "Đăng ký
   * gian hàng", which is the reverse of what the labels suggest. It renders
   * correctly and the names are only ever seen in wp-admin, so it is left
   * alone - but do not "fix" one half of it without the other.
   */
  &:not(.is-scrolled):not(.site-header--solid) {
    /* Over the hero: white fill, and blue fill with a white ring. */
    .btn--primary {
      background: var(--c-surface);
      color: var(--c-ink-pure);
      border-color: var(--c-border-light);
    }

    .btn--secondary {
      background: var(--c-primary);
      color: var(--c-on-dark-muted);
      border-color: var(--c-border-on-dark);
    }
  }

  /*
   * On the blue bar the quiet button drops its fill entirely - a white pill on
   * blue would read as loud as the loud one - and the loud one takes the white
   * fill with brand-blue text. The 1px ring is the design's, and it is thinner
   * than the 2px .btn carries by default because there is no photo behind it
   * to hold an edge against.
   */
  &.is-scrolled,
  &.site-header--solid {
    .btn--primary {
      background: transparent;
      border: 1px solid var(--c-on-dark);
      color: var(--c-on-dark);
    }

    .btn--primary:hover {
      background: var(--c-on-dark-faint);
    }

    .btn--secondary {
      background: var(--c-surface);
      border: 1px solid var(--c-border-on-primary);
      color: var(--c-primary);
    }
  }
}

.site-header.is-scrolled {
  background: var(--c-primary);
  box-shadow: var(--shadow-header);
}

/* The bar itself is full-bleed (it is the coloured strip), but its content has
   to stop at the same width as everything else on the page - otherwise a very
   wide viewport pushes the logo and nav further apart than the sections below
   them. Same formula as .container in layout.css, kept here rather than
   shared because this element also needs to be a flex row. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.875rem, -0.5285rem + 1.7544vw, 1.5rem); /* 14 → 24, see .site-header__right */
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Buttons excluded: this would otherwise outrank .btn--light's own colour. */
.site-header a:not(.btn) {
  text-decoration: none;
  color: inherit;
}

/* The lockup carries its own sizing (.brand in layout.css); all the bar has to
   say is that it must never be the thing that pushes the nav off the row. */
.site-header__logo {
  min-width: 0;
  flex-shrink: 1;
}

.site-header__logo .brand__words {
  color: inherit;
}

/*
 * Every size in the header bar - this gap included - is one of a matched set
 * of clamps that all run from a compact value at 1280 (the hamburger cutoff,
 * where the wordmark, six nav labels, two buttons and the language pill all
 * have to share one row) up to their original static value at 1850 (where
 * there is room to spare and the row looks exactly as it did before any of
 * this shrank). Same two endpoints everywhere in the group - .site-header
 * __right, .site-header__inner, .site-header__actions, the .brand gap below,
 * --fs-brand-title/--fs-brand-sub and --fs-nav (tokens.css, the wordmark and
 * .site-nav__list a below), and the two buttons and the language pill further
 * down this file - so nothing here finishes shrinking, or starts growing,
 * ahead of its neighbours; only the two endpoint values differ per element.
 *
 * That last part is not a nicety: an early version let --fs-nav alone reach
 * full size sooner (1550) on the theory that the nav was the tightest fit and
 * should let go first. It clipped the wordmark to "Festiv…" in a ~1480-1590
 * band instead, because nav stopped giving room back right as the wordmark
 * still needed it. Tuned by forcing the row to every width from 1280 to 1920
 * and checking nothing wraps, overflows, or clips; do not change one clamp's
 * endpoints without re-checking the whole range, since it is the combination
 * that was tuned, not any single value.
 *
 * .site-nav__list's own gap (below) is the one exception, deliberately left
 * on its original clamp(12px, 1.25vw, 24px) rather than joining this group -
 * shrinking the buttons, the language pill and the wordmark left enough room
 * at 1280 without it, and a tighter gap there read as more cramped than the
 * row needed to be.
 */
.site-header__right {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, -0.5285rem + 1.7544vw, 1.5rem); /* 14 → 24 */
}

/* --- Nav ----------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.25vw, var(--space-lg));
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    text-align: center;
  }
}

/*
 * `white-space: nowrap` plus a font-size that shrinks to make room for it:
 * --fs-nav (tokens.css), part of the clamp group described above, from 11px
 * at 1280 up to the body's own 16px at 1850. Sized against the six Vietnamese
 * labels with the header buttons and language pill already on the row;
 * English and Chinese are shorter, so they always have slack. Letting the
 * labels wrap instead (the original approach, before the rest of the row
 * learned to shrink too) kept them at a fixed 16px and cost a two-row bar
 * between 1200 and ~1500 - readable but cramped; this keeps one row instead.
 */
.site-nav__list a {
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-nav);
  text-transform: capitalize;
  white-space: nowrap;
  color: inherit;
  transition: opacity var(--dur) var(--ease);
}

.site-nav__list a:hover {
  opacity: 0.75;
}

.site-nav__list .current-menu-item > a {
  opacity: 0.75;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, -0.2171rem + 1.0526vw, 1rem); /* 10 → 16 */
  flex-shrink: 0;
}

/* The two buttons are plain .btn from buttons.css (min-height: 45px stays -
   that is the touch-target floor and this never touches it), but their type
   size and horizontal padding are part of the same 1280→1850 scheme as the
   rest of the row. Scoped here rather than in buttons.css so every other
   button on the site keeps its normal size. */
.site-header__actions .btn {
  padding: clamp(0.375rem, -0.1864rem + 0.7018vw, 0.625rem) clamp(0.75rem, -0.3728rem + 1.4035vw, 1.25rem); /* 6/12 → 10/20 */
  font-size: clamp(0.75rem, 0.1886rem + 0.7018vw, 1rem); /* 12 → 16 */
}

/* Same scheme for the language pill: padding, the gap between flag and
   caret, and the two icons. The mobile-drawer copy of this control is a
   separate instance in the DOM (template-parts/header/lang-switch.php) but
   this selector only ever matches the one inside the header bar, so the
   drawer's pill - which always has room to spare - stays full size. */
.site-header__actions .lang-switch__toggle {
  gap: clamp(0.125rem, -0.1557rem + 0.3509vw, 0.25rem); /* 2 → 4 */
  padding: clamp(0.375rem, -0.1864rem + 0.7018vw, 0.625rem) clamp(0.5rem, -0.0614rem + 0.7018vw, 0.75rem); /* 6/8 → 10/12 */
}

.site-header__actions .lang-switch__toggle img {
  width: clamp(1rem, -0.1228rem + 1.4035vw, 1.5rem);  /* 16 → 24 */
  height: clamp(1rem, -0.1228rem + 1.4035vw, 1.5rem);
}

/* --- Language switcher ------------------------------------------------------
   One shape from one partial, rendered both in the header bar and inside the
   mobile drawer. The list is real markup and is opened by CSS alone, so it
   works with JavaScript off - :focus-within is what lets a keyboard reach it.
   main.js only adds aria-expanded, Escape and click-outside on top. */
.lang-switch {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    inset-inline: 0;
    height: 12px;
    opacity: 0;
  }
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 10px 12px;
  border: 1px solid var(--c-border-pill);
  border-radius: 37px;
  background: var(--c-surface-alt);
  cursor: pointer;
}

.lang-switch__toggle img {
  width: 24px;
  height: 24px;
}

.lang-switch__flag {
  border-radius: var(--radius-pill);
}

/* `.site-header a:not(.btn) { color: inherit }` higher up is (0,2,1) and would
   otherwise paint these white on the transparent header. Match its specificity
   from further down the file rather than reaching for !important. (The drawer's
   own link rule excludes this class instead - it sits further down still, so
   matching its specificity would not have been enough.) */
.site-header .lang-switch__menu a,
.lang-switch__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-copy);
  color: var(--c-ink-pure);
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch__link img {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
}

.lang-switch__link:hover {
  background: var(--c-primary-soft);
}

.lang-switch__link.is-current {
  font-weight: var(--fw-semibold);
}

.lang-switch__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-3xs));
  right: 0;
  display: none;
  min-width: 180px;
  margin: 0;
  padding: var(--space-3xs);
  border: 1px solid var(--c-border-pill);
  border-radius: var(--radius-input);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  list-style: none;
}

/* Hover and focus-within keep it usable without JavaScript; the attribute
   selector is what the script drives. */
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu,
.lang-switch__toggle[aria-expanded="true"] + .lang-switch__menu {
  display: block;
}

/* --- Hamburger ------------------------------------------------------------ */
/* The glyph is 18x14 (Figma 5939:608: three 2px bars, 4px apart) inside a 40px
   square, so the thumb target stays the size the rest of the bar assumes. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1279px) {
  .site-header__right {
    display: none;
  }
}

/*
 * The wordmark used to be hidden between 1280 and 1659px because at a fixed
 * 16px the nav plus buttons plus language pill left no room for it there.
 * Now that --fs-nav and the whole clamp group above shrink to make room
 * instead, the wordmark stays visible at every width from 1280 up - its own
 * font-size (--fs-brand-title/--fs-brand-sub, tokens.css) is already a clamp
 * that bottoms out right at 1280, so it needed no new sizing, only the hiding
 * rule removed. .brand__title/.brand__sub keep their overflow:hidden +
 * ellipsis regardless, as the safety net for a menu item long enough to
 * still outgrow the tuned range.
 */

@media (min-width: 1280px) {
  /* The transparent bar hugs the hero (12px), the solid one breathes (24px).
     Only from here up: below 1280px the bar is a seal and a hamburger, and
     there is nothing to give room to. */
  .site-header--solid {
    padding-block: 24px;
  }

  .nav-toggle {
    display: none;
  }
}

/* --- Solid header (inner pages) ------------------------------------------- */
.site-header--solid {
  position: sticky;
  min-height: var(--header-h-solid);
  background: var(--c-primary);
}

/* --- Mobile drawer -------------------------------------------------------- */
/* Figma node 5907:1152. A full-screen blue panel above the bar (50), so nothing
   behind it needs dimming and there is no scrim: it carries its own seal and
   close button. Nothing behind it should scroll while it is up - it only ever
   opens below 1280px, the one width where the hamburger exists. */
body.has-nav-open {
  overflow: hidden;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--c-primary);
  color: var(--c-on-dark);
}

.mobile-nav[hidden] {
  display: none;
}

/*
 * Open/close motion. main.js takes `hidden` off first and adds .is-open a frame
 * later (and does the reverse on close, waiting out the exit), so the panel
 * always has a "from" state to transition away from. The panel wipes down from
 * the top edge; its three blocks and each menu row then rise in one after
 * another. On close there is no stagger - everything leaves together, quicker.
 */
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    clip-path: inset(0 0 100%);
    opacity: 0;
    transition:
      clip-path var(--dur) var(--ease),
      opacity var(--dur) var(--ease);
  }

  .mobile-nav.is-open {
    clip-path: inset(0);
    opacity: 1;
    transition-duration: 0.45s, 0.3s;
    transition-timing-function: var(--ease-out);
  }

  .mobile-nav__head,
  .mobile-nav__list li,
  .mobile-nav__actions,
  .mobile-nav__foot {
    opacity: 0;
    transform: translateY(var(--space-sm));
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }

  .mobile-nav.is-open :is( .mobile-nav__head, .mobile-nav__list li, .mobile-nav__actions, .mobile-nav__foot ) {
    opacity: 1;
    transform: none;
    transition-duration: 0.5s;
    transition-timing-function: var(--ease-out);
    transition-delay: calc(0.12s + var(--i, 0) * 0.05s);
  }

  .mobile-nav__head { --i: 0; }
  .mobile-nav__list li:nth-child(1) { --i: 1; }
  .mobile-nav__list li:nth-child(2) { --i: 2; }
  .mobile-nav__list li:nth-child(3) { --i: 3; }
  .mobile-nav__list li:nth-child(4) { --i: 4; }
  .mobile-nav__list li:nth-child(5) { --i: 5; }
  .mobile-nav__list li:nth-child(6) { --i: 6; }
  .mobile-nav__list li:nth-child(n + 7) { --i: 7; }
  .mobile-nav__actions { --i: 8; }
  .mobile-nav__foot { --i: 9; }
}

/* The column keeps the phone layout on a tablet instead of stretching the
   rows across the whole panel. */
.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  width: 100%;
  min-height: 100%;
  margin-inline: auto;
  padding: 12px var(--gutter) 28px;
}

.mobile-nav__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

/* The icon is 24px; the button is the 48px square the design gives it so the
   target is thumb-sized. */
.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mobile-nav__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--c-nav-panel);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-nav);
  text-transform: capitalize;
  transition: background-color var(--dur) var(--ease);
}

/* The first and last rows are taller in the design (16px of padding against
   12px for the four between). */
.mobile-nav__list li:first-child a,
.mobile-nav__list li:last-child a {
  padding-block: var(--space-md);
}

.mobile-nav__list a:hover,
.mobile-nav__list .current-menu-item > a,
.mobile-nav__list .current-menu-ancestor > a,
.mobile-nav__list .current-menu-parent > a {
  background: var(--c-nav-active);
}

.mobile-nav__list a img {
  flex: none;
}

/* The two buttons keep the costume they wear on the transparent bar: whichever
   is stored as primary is the white one, secondary the blue one with a ring
   (see the note at the top of this file on why the names read backwards). */
.mobile-nav__actions {
  display: flex;
  gap: 8px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-divider-on-panel);
}

.mobile-nav__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px var(--space-lg);
  font-size: var(--fs-sm);
}

.mobile-nav__actions .btn--primary {
  background: var(--c-surface);
  border-color: var(--c-border-light);
  color: var(--c-ink-pure);
  font-weight: var(--fw-regular);
}

.mobile-nav__actions .btn--primary:hover {
  background: var(--c-btn-light-hover);
}

.mobile-nav__actions .btn--secondary {
  background: var(--c-primary);
  border-color: var(--c-border-on-dark);
  color: var(--c-on-dark);
  font-weight: var(--fw-medium);
}

.mobile-nav__actions .btn--secondary:hover {
  background: var(--c-primary-hover);
}

.mobile-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--c-divider-on-panel);
}

.mobile-nav__lang {
  display: flex;
}

/* Last block of the drawer, so the list has to open upwards - downwards would
   hang it off the bottom edge, over the page rather than over the panel. */
.mobile-nav__lang .lang-switch__menu {
  top: auto;
  right: auto;
  bottom: calc(100% + var(--space-3xs));
  left: 0;
}

.mobile-nav__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0.8;
}

.mobile-nav__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-contact);
}

.mobile-nav__contact img {
  flex: none;
  width: var(--space-md);
  height: var(--space-md);
}

/* The Facebook glyph is exported upside down; the design flips it back (Figma
   node 5907:1496, -scale-y-100). */
.mobile-nav__contact-item--facebook img {
  transform: scaleY(-1);
}

.mobile-nav__contact a[href^="mailto:"] {
  text-decoration: underline;
}

/* The transparent header is position:fixed and takes no layout space, so the
   content needs pushing down - EXCEPT when the page opens with a full-bleed
   hero, which is meant to sit underneath it. Without the second rule the hero
   is shoved down and the white logo lands on the white page background. */
.site-header:not(.site-header--solid) ~ .site-main {
  padding-top: var(--header-h);
}

.site-header:not(.site-header--solid) ~ .site-main:has( > .hero:first-child ) {
  padding-top: 0;
}