/* site-chrome.css — shared base styles */

/* Prevent layout shift from scrollbar gutter; set html bg so no flash during page nav */
html { scrollbar-gutter: stable; background-color: #ffffff; }

/* ── Keyboard focus (invisible to mouse users) ──────────────── */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: inherit;
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] { background-color: #1b1a16; }

/* ── Mobile nav accordion ──────────────────────────────────── */
.menu-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #1b1a16;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.acc-arrow { flex-shrink: 0; opacity: 0.35; transition: transform 0.22s ease; }
.menu-accordion.is-open .acc-arrow { transform: rotate(180deg); }
.menu-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.menu-accordion.is-open .menu-acc-panel { grid-template-rows: 1fr; }
.menu-acc-list { min-height: 0; overflow: hidden; list-style: none; padding: 0 0 10px; margin: 0; }
.menu-acc-list li a {
  display: block;
  font-size: 22px;
  font-weight: 400;
  color: #1b1a16;
  text-decoration: none;
  padding: 9px 0;
  opacity: 0.5;
  transition: opacity 0.14s;
}
@media (hover: hover) and (pointer: fine) { .menu-acc-list li a:hover { opacity: 1; } }
:root[data-theme="dark"] .menu-acc-trigger { color: #F7F7F7; }
:root[data-theme="dark"] .menu-acc-list li a { color: #F7F7F7; }

/* ── Experiments — hidden until reinstated ─────────────────── */
a[href="#experiments"],
a[href="index.html#experiments"],
li.menu-accordion:has(a[href="card-generator.html"]),
#experiments { display: none !important; }

/* ── Mobile nav overrides (≤900px) ──────────────────────────── */
@media (max-width: 900px) {
  /* Top pill only — hide the bottom site-nav pill */
  .site-nav { display: none !important; }

  /* Topbar sits above the fullscreen menu overlay */
  .mobile-topbar { z-index: 400 !important; }

  /* Circle button on hamburger / X */
  .mobile-topbar .nav-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.07) !important;
    display: flex !important;
  }
  :root[data-theme="dark"] .mobile-topbar .nav-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  /* Hide duplicate menu-head — topbar stays on top with logo + X */
  .mobile-menu-head { display: none !important; }

  /* Pad menu content below the persistent topbar (top:16px + ~54px pill + gap) */
  .mobile-menu-nav { padding-top: 96px !important; }
}