/* =========================================================
   WordPress additions — states the prototype never drew.

   site.css is the prototype's style.css copied byte for byte and must stay
   that way (it is diffed against template/assets/css/style.css). Anything
   WordPress needs on top of it lives here, written only with the
   prototype's own tokens and components so it reads as the same design:

   - the search panel behind the header's search button (the prototype's
     button had no behaviour at all)
   - empty states for listings and search
   - the 404 page
   - the Smart Form honeypot and the sending state
   - the admin bar offset for the sticky header
   ========================================================= */

/* ---------- Admin bar: keep the sticky header and sub-nav below it ---------- */
.admin-bar .header { top: 32px; }
.admin-bar .subnav { top: 112px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
  .admin-bar .subnav { top: 126px; }
}
@media (max-width: 600px) {
  .admin-bar .header, .admin-bar .subnav { top: 0; }
}

/* ---------- Search panel (opens under the header) ---------- */
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--line-soft);
}
.search-panel[hidden] { display: none; }
.search-panel__inner { padding-block: 24px; }
.search-form { display: flex; align-items: center; gap: 24px; }
.search-form .field { flex: 1; }
.search-form .field input {
  width: 100%; display: block; padding: 16px 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; line-height: normal; letter-spacing: inherit; color: var(--ink);
}
.search-form .form__submit { flex: none; }

/* ---------- Empty states ---------- */
.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 40px 0;
  border-top: 1px solid var(--line-soft);
}
.empty .text { max-width: 640px; }
.empty .search-form { width: min(590px, 100%); }

/* ---------- 404 ---------- */
.nf { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding-bottom: var(--gap); }
.nf__code { font-size: clamp(72px, 12vw, 160px); font-weight: 500; line-height: 1; letter-spacing: -.04em; color: var(--soft); }
.nf .text { max-width: 560px; }
.nf .search-form { width: min(590px, 100%); }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.nf__links a { font-size: 14px; text-transform: uppercase; color: var(--muted); transition: color .25s var(--ease); }
.nf__links a:hover { color: var(--ink); }

/* ---------- Search results: one heading per post type ---------- */
.results + .results { padding-top: var(--gap); }
.results__head { padding-bottom: 32px; }

/* ---------- Forms ---------- */
/* Smart Form honeypot: off-canvas, never display:none (bots skip hidden fields). */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.is-sending .form__submit { opacity: .5; pointer-events: none; }

/* ---------- Generic page content (Privacy policy etc.) ---------- */
.page-body { padding-top: 0; }

/* ---------- Screen-reader text (core's class, used by paginate_links etc.) ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero with a separate mobile image ----------
   The <picture> takes the hero's full box, so .hero__bg keeps the prototype's
   geometry and site.js's parallax (which measures the image's parent) still
   measures the hero. No z-index: the image's own -2 stays in .hero's context. */
.hero > picture { position: absolute; inset: 0; }

/* ---------- Images inserted in the editor ----------
   Core prints width/height attributes on content images; the prototype's
   `.prose figure img` sizes by aspect-ratio and never set height:auto, so the
   attribute would win and stretch the photo. */
.prose img { height: auto; }

/* ---------- Language switcher (MONA Multilingual) in the header ----------
   The prototype's header has ~15px to spare at 1440 with only the 16px search
   icon in .header__tools, so the plugin's 86px pill (flag + code + padding)
   pushed the bar past the viewport in every language. In the header it is
   drawn like the other tools: the code alone, same 16px type as .nav__link,
   no padding. The flag stays in the open list. */
.header .mml-switcher--select .mml-sel__ctl {
  padding: 4px 16px 4px 0; font-size: 16px; font-weight: 400; color: var(--ink);
}
.header .mml-switcher--select .mml-sel__val .mml-sel__img { display: none; }
.header .mml-switcher--select .mml-sel__caret { right: 0; }
.header .mml-switcher--select .mml-sel__ctl:hover,
.header .mml-switcher--select .mml-sel.is-focus .mml-sel__ctl,
.header .mml-switcher--select .mml-sel.is-open .mml-sel__ctl { background: transparent; }
.brand { flex-shrink: 0; }

/* The nine gaps between the ten menu links absorb the switcher's width.
   Row = pad×2 + brand 248 + 24 + labels + 24 + tools margin + tools ~76, so a
   gap is (row width left over) / 9, capped at the prototype's own value.
   Labels: English ~577px, Vietnamese ~667px, Japanese ~699px; 12px of slack
   covers font fallback differences between systems. Below the width where a
   language's gap would drop under ~20px the burger takes over (VI ≤1340,
   JA ≤1380; English keeps the prototype's 1240). */
@media (min-width: 1441px) {
  .nav { gap: 38px; }
  html:lang(vi) .nav { gap: 30px; }
  html:lang(ja) .nav { gap: 26px; }
}
@media (min-width: 1281px) and (max-width: 1440px) {
  .nav { gap: min(36px, calc((100vw - 1077px) / 9)); }
  html:lang(vi) .nav { gap: min(36px, calc((100vw - 1167px) / 9)); }
  html:lang(ja) .nav { gap: min(36px, calc((100vw - 1199px) / 9)); }
}
@media (min-width: 1241px) and (max-width: 1280px) {
  .nav { gap: min(22px, calc((100vw - 1073px) / 9)); }
}
@media (max-width: 560px) {
  /* Brand 209px + switcher + search + burger must fit 390 − 2×18px. */
  .header__tools { margin-left: 0; gap: 14px; }
}
@media (max-width: 400px) {
  /* 360px phones: the prototype itself overflowed here by ~5px. */
  .header__inner { gap: 12px; }
  .brand span { font-size: 14px; }
}
@media (min-width: 1241px) and (max-width: 1340px) {
  html:lang(vi) .burger { display: block; }
  html:lang(vi) .nav {
    position: fixed; inset: 80px 0 auto 0; z-index: 49;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--pad) 24px; background: var(--white);
    border-top: 1px solid var(--line-soft); box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  html:lang(vi) .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  html:lang(vi) .nav__link { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  html:lang(vi) .nav__link::after { display: none; }
}
@media (min-width: 1241px) and (max-width: 1380px) {
  html:lang(ja) .burger { display: block; }
  html:lang(ja) .nav {
    position: fixed; inset: 80px 0 auto 0; z-index: 49;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--pad) 24px; background: var(--white);
    border-top: 1px solid var(--line-soft); box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  html:lang(ja) .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  html:lang(ja) .nav__link { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  html:lang(ja) .nav__link::after { display: none; }
}