/* Header over the hero. --n (0 = day … 1 = night) follows the hero's clock: hero.js sets --hn on the header itself (on the
   root it would restyle the whole page each frame); the classes below override it. Pages without a hero get .is-solid. */
:root { --n: 0; }

.site-header {
  --n: var(--hn, 0);
  position: fixed; inset-inline: 0; top: 0; z-index: 70;
  height: var(--header-h);
  color: color-mix(in oklab, var(--white) calc(var(--n) * 100%), var(--ink));
  transition: background-color .35s, backdrop-filter .35s;
}
/* legibility washes: light under dark text by day, dark under white text by night */
.site-header::before, .site-header::after {
  content: ""; position: absolute; inset: 0 0 -40px; pointer-events: none; z-index: -1; transition: opacity .3s;
}
.site-header::before { background: linear-gradient(to bottom, rgb(255 248 236 / .55), rgb(255 248 236 / 0)); opacity: calc(1 - var(--n)); }
.site-header::after  { background: linear-gradient(to bottom, rgb(4 12 32 / .62), rgb(4 12 32 / 0)); opacity: var(--n); }
.site-header.is-solid { --n: 1; background: rgb(7 23 57 / .78); backdrop-filter: blur(14px) saturate(140%); }
.site-header.is-solid::before, .site-header.is-solid::after { opacity: 0; }
.site-header.is-solid[data-tint="cocoa"] { background: rgb(43 27 20 / .82); }
.site-header.is-solid[data-tint="teal"] { background: rgb(6 22 27 / .8); }   /* (over the clinic at dusk) */
.site-header.is-solid[data-tint="graphite"] { background: rgb(9 12 14 / .82); }   /* (over the car workshop at night) */
.site-header.is-solid[data-tint="navy"] { background: rgb(11 18 32 / .82); }   /* (over the home at night) */
/* over a room of its own ([data-header="clear"]: the journal hall), the night header of the hero: no bar */
.site-header.is-clear { --n: 1; }
/* over light sections ([data-header="light"], app.js): ivory glass, ink text */
.site-header.is-light { background: rgb(251 249 245 / .84); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgb(27 23 20 / .06); }
.site-header.is-light::before, .site-header.is-light::after { opacity: 0; }
:root .site-header.is-light { --n: 0; }   /* (outranks the static hero's night header, hero.css) */
/* while the full-screen menu is open the bar sits on the night panel */
html.mm-open .site-header { --n: 1; background: transparent; backdrop-filter: none; }
html.mm-open .site-header::before, html.mm-open .site-header::after { opacity: 0; }

.site-header__bar {
  height: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.brand__mark { width: 40px; height: 40px; }
.brand__word { font-family: var(--font-mark); font-weight: 600; font-size: 22px; letter-spacing: .01em; line-height: 1; }

.site-header__tools { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.lang-switch {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  text-decoration: none; font-size: 13px; font-weight: 600; font-family: var(--font-latin);
}
.lang-switch[lang="fa"] { font-family: var(--font-fa); }
.lang-switch:hover { border-color: currentColor; }
/* the languages: one button, the four in a small list under it */
.lang-menu { position: relative; }
.lang-menu > summary { display: inline-flex; gap: 6px; list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary svg { width: 17px; height: 17px; }
.lang-menu__list {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 5; min-width: 150px; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; background: #F7F6F2; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(11 26 51 / .08);
}
.lang-menu__list a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.lang-menu__list a[lang="ka"] { font-family: var(--font-ka-text); }
.lang-menu__list a[lang="fa"], .lang-menu__list a[lang="ar"] { font-family: var(--font-fa); }
.lang-menu__list a[lang="en"] { font-family: var(--font-latin); }
.lang-menu__list a:hover { background: rgb(11 26 51 / .06); }
.lang-menu__list a[aria-current] { background: var(--ink); color: #fff; }

.btn--header {
  min-height: 42px; padding: 0 18px; font-size: 14px;
  color: inherit; border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  background: color-mix(in oklab, currentColor 8%, transparent);
  backdrop-filter: blur(8px);
}
.btn--header:hover { background: var(--green); border-color: var(--green); color: var(--night); }

/* menu button: white pill → green "close" pill (after Art of Documentary) */
.mm-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 18px; border: 0; border-radius: 999px;
  background: var(--white); color: var(--night); cursor: pointer; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 18px -10px rgb(0 0 0 / .45);
  transition: background-color .35s var(--ease-out), color .35s;
}
.mm-btn__txt { display: grid; height: 1.5em; overflow: hidden; line-height: 1.5; }
.mm-btn__txt > span { grid-area: 1 / 1; transition: transform .45s var(--ease-out); }
.mm-btn__txt > span + span { transform: translateY(110%); }
.mm-btn__ico { position: relative; width: 16px; height: 10px; }
.mm-btn__ico i { position: absolute; inset-inline: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.mm-btn__ico i:first-child { top: 1px; }
.mm-btn__ico i:last-child { top: 7.4px; }
.mm-btn:hover { background: var(--green-hi); }
.mm-btn[aria-expanded="true"] { background: var(--green); }
.mm-btn[aria-expanded="true"] .mm-btn__txt > span:first-child { transform: translateY(-110%); }
.mm-btn[aria-expanded="true"] .mm-btn__txt > span + span { transform: none; }
.mm-btn[aria-expanded="true"] .mm-btn__ico i:first-child { top: 4.2px; transform: rotate(45deg); }
.mm-btn[aria-expanded="true"] .mm-btn__ico i:last-child { top: 4.2px; transform: rotate(-45deg); }

@media (max-width: 599px) {
  .btn--header { display: none; }
  .brand__word { font-size: 19px; }
  .brand__mark { width: 34px; height: 34px; }
  .site-header__tools { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-btn__txt > span, .mm-btn__ico i { transition: none; }
}