/* ==========================================================================
   Seidr Labs · sectioned main navigation
   Five sections (Games, AI, Products, Websites, Projects) instead of ten
   loose links. Pure CSS: a section opens on hover or keyboard focus on a
   wide screen, and the section's own page is always one click away. On a
   phone every section is already open inside the menu overlay, so nothing
   depends on a script (the page CSP allows none inline).
   Generated markup: scripts/site-chrome.js — edit the lists there.
   ========================================================================== */

.nav-links { gap: 2px; }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > .nav-top { display: inline-flex; align-items: center; gap: 6px; }
.nav-group.has-sub > .nav-top::before {
  content: ""; order: 2; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .25s, opacity .25s;
}
.nav-group.current-section > .nav-top { color: var(--bone); }
.nav-group.current-section > .nav-top::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--sap); box-shadow: 0 0 8px var(--sap);
}
/* the dot already marks the current page on the section's own link */
.nav-group > .nav-top[aria-current]::after { display: none; }
.nav-group.current-section > .nav-top[aria-current]::after { display: block; }

.nav-sub { display: none; }
.nav-sub a small { display: block; font-size: .78rem; line-height: 1.35; color: var(--mist); opacity: .8; font-weight: 400; }
.nav-sub a b { display: block; font-weight: 600; font-size: .92rem; color: var(--bone); }
.nav-sub a[aria-current] { background: rgba(255, 190, 90, .09); }
.nav-sub a::after { display: none !important; }
.nav-sub .ext { opacity: .6; font-weight: 400; margin-left: 4px; }

@media (min-width: 961px) {
  .nav-sub {
    position: absolute; top: calc(100% - 2px); left: -12px; min-width: 290px; z-index: 5;
    padding: 10px; margin-top: 10px; flex-direction: column; gap: 2px;
    background: rgba(8, 14, 16, .97); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 22px 60px -20px rgba(0, 0, 0, .75);
  }
  /* bridge the gap so the pointer can travel from the label to the panel */
  .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-group.has-sub:hover > .nav-sub,
  .nav-group.has-sub:focus-within > .nav-sub { display: flex; }
  .nav-group.has-sub:hover > .nav-top::before,
  .nav-group.has-sub:focus-within > .nav-top::before { transform: rotate(225deg); opacity: .9; margin-top: 2px; }
  .nav-sub a { padding: 10px 14px; border-radius: 12px; white-space: normal; }
  .nav-sub a:hover, .nav-sub a:focus-visible { background: rgba(237, 230, 213, .07); }
  .nav-group.align-end > .nav-sub { left: auto; right: -12px; }
  /* Escape dismisses an open panel until the pointer or focus leaves the section (js/nav-sections.js) */
  .nav-group.dismissed > .nav-sub { display: none !important; }
  .nav-sub { max-height: calc(100vh - 96px); overflow-y: auto; }
}

@media (max-width: 960px) {
  .site-nav .nav-links {
    overflow-y: auto; justify-content: flex-start; align-items: stretch; text-align: center;
    padding: calc(env(safe-area-inset-top, 0px) + 84px) 24px 40px; gap: 4px;
  }
  .site-nav .menu-toggle { min-height: 44px; min-width: 44px; }
  .site-nav .nav-group { flex-direction: column; align-items: center; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  .site-nav .nav-group:last-of-type { border-bottom: 0; }
  .site-nav .nav-group > .nav-top { font-size: 1.7rem; padding: 4px 12px; }
  .site-nav .nav-group.has-sub > .nav-top::before { display: none; }
  .site-nav .nav-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-top: 6px; }
  .site-nav .nav-links .nav-sub a {
    font-family: var(--f-body); font-size: .92rem; font-weight: 400; color: var(--mist); padding: 8px 16px;
    border: 1px solid var(--line-2); border-radius: 99px; min-height: 44px; display: inline-flex; align-items: center;
  }
  .site-nav .nav-sub a b { display: inline; font-size: inherit; font-weight: 500; color: var(--bone); }
  .site-nav .nav-sub a small { display: none; }
  .site-nav .nav-links .nav-cta { align-self: center; margin-top: 18px; min-height: 48px; display: inline-flex; align-items: center; }
}

/* touch targets: every button, chip and brand link is at least 44px tall on a phone */
@media (max-width: 960px) {
  .btn, .chip, .btn-small { min-height: 44px; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .brand { min-height: 44px; }
  .site-nav .menu-toggle { min-height: 44px; min-width: 44px; }
}

/* Flora's own stylesheet restyles the menu; the phone menu looks the same on every page */
@media (max-width: 960px) {
  .page-flora .site-nav .nav-links { background: rgba(6, 11, 13, .96); }
  .page-flora .site-nav .nav-links .nav-top { color: var(--bone); display: inline-flex; padding: 4px 12px; }
  .page-flora .site-nav .nav-links .nav-sub a:not(.nav-cta) { color: var(--mist); display: inline-flex; padding: 8px 16px; }
  .page-flora .site-nav .nav-links .nav-sub a b { color: var(--bone); }
  .page-flora .site-nav .menu-toggle { min-height: 44px; padding: 8px 14px; }
  .page-flora .site-nav .nav-links .nav-cta { display: inline-flex; padding: 14px 26px; }
}