/* === Shared site header ================================================
   The single header look used across the whole site. Section/home pages get
   these same rules from css/site.css; the legacy theme.css pages (practice
   sheets, flashcard sheets, privacy/terms) link THIS file so they render the
   identical header after js/header.js was retired.

   Uses only palette tokens that exist in BOTH site.css and theme.css
   (theme.css aliases --page/--card/--line/--ink/--muted/--faint/etc.), so it
   themes correctly under either stylesheet, light or dark. */

.site-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:saturate(1.1) blur(8px);
  background:color-mix(in srgb, var(--page) 86%, transparent);
  border-bottom:1px solid var(--line);
  /* Set the UI font explicitly so the header never inherits a host page's
     body font (e.g. the Georgia serif on games/solitaire.html). Matches
     site.css's --font-ui, but spelled out because theme.css pages that link
     this file don't define that variable. */
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.site-header__inner{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand__mark{
  width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Sans JP',sans-serif;font-weight:500;font-size:21px;line-height:1;
  flex-shrink:0;box-shadow:0 3px 10px rgba(32,80,126,0.30);
}
html.dark .brand__mark{box-shadow:0 3px 10px rgba(0,0,0,0.45)}
.brand__name{font-size:17px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.brand__tld{font-weight:500;color:var(--faint)}
.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-left:6px}
.nav a{
  text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:600;
  padding:7px 12px;border-radius:8px;transition:color .2s,background .2s;
}
.nav a:hover{color:var(--accent);background:var(--accent-bg)}
.nav a.is-active{color:var(--accent);background:var(--accent-bg)}
.util{display:flex;align-items:center;gap:8px;margin-left:auto}
.lang{color:var(--faint);font-size:13.5px;font-weight:700;border:1px solid var(--line);background:var(--inset);padding:0 12px;height:38px;display:inline-flex;align-items:center;border-radius:10px}
.theme-toggle{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--inset);color:var(--ink);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.theme-toggle:hover{background:var(--accent-bg)}

/* Mobile nav — hamburger (☰) that collapses .nav into a dropdown panel. */
.nav-toggle{
  display:none;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;font-size:17px;
  align-items:center;justify-content:center;transition:background .2s,color .2s;
}
.nav-toggle:hover{background:var(--accent-bg);color:var(--accent)}
@media(max-width:880px){
  .site-header .nav{display:none}
  .site-header .nav-toggle{display:flex}
  .site-header.nav-open .nav{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-card);padding:12px 24px 16px;margin:0;
  }
  .site-header.nav-open .nav a{padding:10px 12px;font-size:15px}
}

/* Language switcher — built at runtime by i18n.buildLangSwitcher into
   #lang-switcher (page-i18n.js on these pages). */
.lang-switcher{position:relative}
.lang-current{display:inline-flex;align-items:center;gap:5px;height:38px;color:var(--ink);padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--inset);font-size:13.5px;font-weight:700;cursor:pointer;transition:all 0.2s}
.lang-current:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);min-width:120px;z-index:100;overflow:hidden}
.lang-switcher.open .lang-dropdown{display:block}
.lang-option{display:block;padding:8px 14px;color:var(--ink);text-decoration:none;font-size:0.82rem;transition:background 0.15s}
.lang-option:hover{background:var(--accent-bg);color:var(--accent)}
.lang-option.active{color:var(--accent);font-weight:600;cursor:default;pointer-events:none}