/* =============================================================================
   wgf-site-directory.css - layout for THE site directory (site_directory.py).
   -----------------------------------------------------------------------------
   One home (Rule 11) for how the canonical directory registry LOOKS on its three
   surfaces:
     1. the sitewide escape-menu overlay (the "Menu" pillar's .wgf-nav-menu--directory
        panel inside <nav id="wgf-primary-nav">),
     2. the themed 404 page (404.html, .wgf-sitedir-page wrapper), and
     3. the /sitemap/ page (sitemap/index.html, same wrapper).

   The BUTTONS and GROUP HEADERS are the chrome kit's (.wgf-btn-red / .wgf-btn-dark /
   .wgf-secthead from assets/wgf-chrome.css) - consumed, never forked. This file only
   owns flow (columns/stacks), the overlay panel geometry, and the cascade shield that
   protects kit buttons from the topbar's generic link rules.

   Loaded via site_directory.directory_css_links() (carried inside the nav markup so
   every shell gets it with no per-page edits) and via the <head> of 404.html +
   sitemap/index.html. Cache token: site_directory.CSS_VERSION.

   Owner law: docs/ui-ux/13-ingame-reference.md (escape/Game Menu idiom = a stack of
   client red buttons under gold Friz small-caps headers; squared plates; no pills).
   ============================================================================= */

/* --- The directory object (all surfaces) ------------------------------------ */

.wgf-sitedir {
  column-gap: var(--space-4, 20px);
}

.wgf-sitedir__group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--space-4, 20px);
  padding-top: var(--space-2, 8px);
}

/* Group header: the kit section-header object, stretched to head its column card. */
.wgf-sitedir__head {
  display: block;
  width: auto;
  margin: 0 0 var(--space-2, 8px);
}

/* The game-menu stack: full-width red buttons, tight vertical rhythm. */
.wgf-sitedir__stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wgf-sitedir__link {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Secondary destinations (e.g. per-region token pages) sit indented under their
   parent as the kit's compact dark button. */
.wgf-sitedir__link--sub {
  width: calc(100% - var(--space-4, 20px));
  margin-left: var(--space-4, 20px);
}

/* --- Surface 1: the escape-menu overlay panel (desktop) ---------------------- */
/* The "Menu" pillar's panel keeps the shared .wgf-nav-menu chrome (well plate, metal
   edge, hover/focus reveal, forgiving close delay - all from wgf-site-shell.css) and
   only overrides GEOMETRY here: the group goes position:static so the panel anchors
   to the topbar (position:relative) and centers on the viewport as a full directory
   sheet instead of a 210px dropdown. */
@media (min-width: 1021px) {
  .wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory {
    position: static;
  }
  .wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory > .wgf-nav-menu.wgf-nav-menu--directory {
    left: 50%;
    right: auto;                     /* undo the :last-child right-anchor rule */
    width: min(1140px, 96vw);
    display: block;                  /* the base menu is a flex column */
    padding: var(--space-3, 12px) var(--space-4, 20px) var(--space-4, 20px);
    max-height: calc(100vh - 110px);
    overscroll-behavior: contain;
    transform: translate(-50%, -5px);
  }
  .wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory:hover > .wgf-nav-menu.wgf-nav-menu--directory,
  .wgf-shell-topbar .wgf-shell-nav .wgf-nav-group--directory:focus-within > .wgf-nav-menu.wgf-nav-menu--directory {
    transform: translate(-50%, 0);
  }
  .wgf-nav-menu--directory .wgf-sitedir {
    column-count: 3;
  }
}

/* Overlay lead-in line (all widths). */
.wgf-nav-menu--directory .wgf-sitedir-tag {
  margin: var(--space-1, 4px) 0 var(--space-2, 8px);
  text-align: center;
  font-size: 12px;
  color: var(--wgf-muted, #9d9d9d);
}

/* --- Cascade shield ---------------------------------------------------------- */
/* wgf-site-shell.css styles EVERY <a> in the topbar nav (font-ui 15px, warm-grey
   color, hover underline, mobile border-top rows). Those generic rules out-rank the
   kit's single-class buttons, so the directory's kit buttons re-assert the kit voice
   here at higher specificity. Values are the kit's own tokens - no new voice. */
.wgf-shell-topbar .wgf-shell-nav .wgf-sitedir a.wgf-sitedir__link {
  display: flex;
  white-space: normal;
  border-top: 0;
  font-family: var(--font-game);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.wgf-shell-topbar .wgf-shell-nav .wgf-sitedir a.wgf-sitedir__link:hover,
.wgf-shell-topbar .wgf-shell-nav .wgf-sitedir a.wgf-sitedir__link:focus-visible {
  text-decoration: none;
}
.wgf-shell-topbar .wgf-shell-nav .wgf-sitedir a.wgf-btn-red {
  color: var(--wgf-gold-bright);
  font-size: var(--text-sm);
  padding: 0 var(--wgf-btn-cap);
}
.wgf-shell-topbar .wgf-shell-nav .wgf-sitedir a.wgf-btn-dark {
  color: var(--wgf-gold);
  font-size: var(--text-xs);
  padding: 0 var(--space-2, 8px);
}
/* The shell's active-page marker is the pillar underline bar; on a kit button the
   button itself is the affordance. */
.wgf-shell-topbar .wgf-shell-nav .wgf-sitedir a.wgf-sitedir__link.is-active::after {
  display: none;
}

/* --- Overlay panel inside the mobile drawer ---------------------------------- */
@media (max-width: 1020px) {
  /* The drawer shows the panel as a stacked block (the shared mobile menu rules
     already make it static and visible); the accordion cap of 1200px would clip a
     ~70-link directory, so the directory panel is uncapped when expanded. */
  .wgf-shell-nav.is-accordion .wgf-nav-group.is-expanded > .wgf-nav-menu--directory {
    max-height: none;
  }
  .wgf-nav-menu--directory .wgf-sitedir {
    column-count: 1;
    padding: var(--space-2, 8px) 0;
  }
}

/* --- Surfaces 2 + 3: the 404 and /sitemap/ pages ----------------------------- */
/* Hand-authored wrapper on those pages; sits above the 404's fixed backdrops. */
.wgf-sitedir-page {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 56px;
}
.wgf-sitedir-page__title {
  margin: 34px auto 6px;
}
.wgf-sitedir-page__tag {
  text-align: center;
  color: var(--wgf-muted, #9d9d9d);
  font-size: 12px;
  margin: 0 0 18px;
}
@media (min-width: 1000px) {
  .wgf-sitedir-page .wgf-sitedir { column-count: 3; }
}
@media (min-width: 660px) and (max-width: 999px) {
  .wgf-sitedir-page .wgf-sitedir { column-count: 2; }
}
