/* Site header / top navigation.
 *
 * Visual design from the Ohayo Studio landing reference ("Daylight ·
 * pale blue" palette). All colors and fonts read from the live theme
 * tokens (--cms-* from Setting, --design-* from theme_extras) so the
 * nav updates when an editor changes /admin/settings.
 */

/* ─── THE MARK ──────────────────────────────────────────
 * A sun-over-horizon glyph rendered in pure CSS. Used by header,
 * footer, and the landing page — left unscoped so all three share
 * the same definition. */
.mark {
  --mark-sky:    var(--design-sky,      #6e95b8);
  --mark-sun:    var(--cms-secondary,   #f0d670);
  --mark-paper:  var(--cms-background,  #e6eef5);

  position: relative;
  background: var(--mark-sky);
  flex: 0 0 auto;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(126, 149, 168, 0.08);
}
.mark::before {
  content: ""; position: absolute;
  left: 50%; bottom: 36%;
  width: 51%; height: 51%;
  border-radius: 50%;
  background: var(--mark-sun);
  transform: translateX(-50%);
}
.mark::after {
  content: ""; position: absolute;
  left: 13%; right: 13%;
  bottom: 36%;
  background: var(--mark-paper);
  border-radius: 999px;
}
.mark.s16  { width:16px;  height:16px;  border-radius:5px;  }  .mark.s16::after  { height:1.2px; }
.mark.s20  { width:20px;  height:20px;  border-radius:6px;  }  .mark.s20::after  { height:1.4px; }
.mark.s24  { width:24px;  height:24px;  border-radius:7px;  }  .mark.s24::after  { height:1.6px; }
.mark.s32  { width:32px;  height:32px;  border-radius:9px;  }  .mark.s32::after  { height:2px;   }
.mark.s40  { width:40px;  height:40px;  border-radius:11px; }  .mark.s40::after  { height:2.2px; }
.mark.s48  { width:48px;  height:48px;  border-radius:13px; }  .mark.s48::after  { height:2.4px; }
.mark.s64  { width:64px;  height:64px;  border-radius:17px; }  .mark.s64::after  { height:3px;   }
.mark.s96  { width:96px;  height:96px;  border-radius:25px; }  .mark.s96::after  { height:3.5px; }
.mark.s140 { width:140px; height:140px; border-radius:36px; }  .mark.s140::after { height:4.5px; }
.mark.s200 { width:200px; height:200px; border-radius:52px; }  .mark.s200::after { height:6px;   }
.mark.s320 { width:320px; height:320px; border-radius:80px; }  .mark.s320::after { height:9px;   }

/* ─── SITE NAV ─────────────────────────────────────────── */
.site-nav {
  --nav-paper:     var(--cms-background, #e6eef5);
  --nav-ink:       var(--cms-text,       #15171c);
  --nav-ink-soft:  var(--cms-text-primary, #3a3e48);
  --nav-ink-muted: var(--design-ink-muted, #7a7e87);
  --nav-rule-soft: var(--design-rule-soft, #d8e2ea);
  --nav-sun-deep:  var(--design-sun-deep, #a88c2c);
  --f-display: var(--cms-font-display, 'Geist'), -apple-system, system-ui, sans-serif;
  --f-serif:   var(--cms-font-serif,   'Instrument Serif'), 'Newsreader', Georgia, serif;
  --f-mono:    var(--cms-font-mono,    'Geist Mono'), ui-monospace, monospace;
  --nav-page-max: 1240px;

  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, #eeeeeb 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--nav-rule-soft);
}

/* Dark mode keeps the frosted-glass effect over the dark page bg. */
html.dark .site-nav {
  background: color-mix(in srgb, var(--nav-paper) 78%, transparent);
}

.site-nav .inner {
  max-width: var(--nav-page-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 36px;
  gap: 24px;
}

.site-nav .brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--nav-ink);
}
.site-nav .brand .logo-img {
  height: 32px; width: auto; display: block;
}
.site-nav .brand .wm {
  font-family: var(--f-serif); font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--nav-ink);
  line-height: 1;
}

.site-nav .links {
  display: flex; align-items: center; gap: 32px;
  font-family: var(--f-display);
  font-size: 13.5px; font-weight: 500;
  color: var(--nav-ink-soft);
}
.site-nav .links a {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.site-nav .links a:hover { color: var(--nav-ink); }
.site-nav .links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--nav-sun-deep);
  transform: translateX(-50%);
}

.site-nav .meta {
  display: flex; align-items: center; gap: 16px;
  color: var(--nav-ink-muted);
}

/* Style the in-place locale switcher + dark-mode toggle so they read
   as nav meta rather than form widgets. The darkmode partial ships
   with a stack of dead Tailwind classes; we restyle it via its
   wrapping .darkmode span. */
.site-nav .meta .darkmode button {
  background: transparent;
  border: 0;
  color: var(--nav-ink-muted);
  padding: 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.site-nav .meta .darkmode button:hover {
  color: var(--nav-ink);
  background: color-mix(in srgb, var(--nav-ink) 6%, transparent);
}
.site-nav .meta .darkmode button svg { width: 16px; height: 16px; }
.site-nav .meta .darkmode button svg.hidden { display: none; }

.site-nav .meta .locale-switcher > div {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* Mobile header — only one bar, hamburger replaces the link row. */
.site-nav .hamburger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--nav-ink);
  padding: 8px;
  cursor: pointer;
}
.site-nav .hamburger svg { width: 22px; height: 22px; }

.site-nav .mobile-menu {
  display: none;
  border-top: 1px solid var(--nav-rule-soft);
  padding: 8px 36px 16px;
  background: var(--nav-paper);
}
.site-nav .mobile-menu ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.site-nav .mobile-menu a {
  display: block;
  padding: 12px 0;
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--nav-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--nav-rule-soft);
}
.site-nav .mobile-menu a:hover { color: var(--nav-ink); }
.site-nav .mobile-menu a.active { color: var(--nav-sun-deep); }
.site-nav .mobile-menu[aria-hidden="false"] { display: block; }

/* EN / JA switch row in the mobile menu — kept off the desktop nav
   because the desktop has its own .meta .locale-switcher slot. */
.site-nav .mobile-menu .mobile-locale {
  padding: 14px 0 4px;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 880px) {
  .site-nav .inner { padding: 14px 20px; }
  .site-nav .links { display: none; }
  .site-nav .meta .locale-switcher { display: none; }
  .site-nav .hamburger { display: inline-flex; }
}