/* West Georgia Misfits — DESKTOP layout.
 *
 * Loaded as <link media="(min-width:1241px)">, so nothing in here can reach a
 * stacked viewport no matter what it selects. That is the point: the nav row,
 * the More dropdown card and the four-column footer used to sit in the shared
 * cascade and be un-styled again by a max-width block 60 lines later, which is
 * how a phone fix kept landing on desktop and vice versa. The "undo" rules do
 * not exist any more — the base simply is not there below 1241px.
 *
 * The only @media allowed in this file is (min-width:1440px) for a wide tier,
 * plus the feature queries (hover/pointer/resolution/print) that modify rules
 * living here. scripts/check-layout.mjs enforces that.
 */

/* ---------- header: the full-size link row ---------- */
.nav-links{display:flex;flex-wrap:wrap;align-items:stretch;margin-left:auto}
.nav-toggle{display:none}
/* "More" disclosure, as a real dropdown card. Below the break this is not a
   disclosure at all — the panel is already a stack, so the More links are
   simply more rows in it — which is why none of this belongs in the shared
   sheet. */
.nav-more-wrap{position:relative;display:flex;align-items:stretch}
/* A DETACHED card, not the bar extruding downward.
   Measured before (W9 desktop F1, identical at 1280/1440/1920): 196 x 302px —
   28% of a 1080px viewport — six 50px rows for one-word labels, `top:100%`
   with `border-top:0` and the bar's own #0b0b0d ground, so the gap between
   trigger and card was 0px and the 0 18px 40px shadow was invisible at the
   only edge that mattered. Nothing about it read as a layer.
   A gap, a radius, a lighter ground and the shared elevation ring are what
   make it a layer; --elev-2 carries its own hairline, so no border is needed
   and the card stops being another outline box. */
.nav-more-menu{
  position:absolute;top:calc(100% + 8px);right:-12px;z-index:var(--z-header);min-width:220px;
  display:flex;flex-direction:column;padding:5px;
  /* Opaque on purpose: at .98 the score ticker's text still ghosted through
     the LIVE row, because the header's backdrop-filter composites the card
     against the blurred ticker rather than the page. */
  background:var(--surface-1);border-radius:var(--r-md);
  box-shadow:var(--elev-2);isolation:isolate;
  /* Motion. `hidden` is a binary — nothing can transition it — so site.js
     drops `hidden` first and adds .is-open on the next frame, and on close
     removes .is-open and re-hides on transitionend. `hidden` stays the
     a11y truth; the class is only what moves. */
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:100% 0;
  /* `hidden` lands ~180ms after the class comes off, so for those frames the
     card is on its way out but still hit-testable over the page under it. */
  pointer-events:none;
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
.nav-more-menu.is-open{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.nav-more-menu{transition:none}}
/* ~34px rows instead of 50, and the divider-per-row goes: the highlight is an
   inset pill (the card has 5px of padding for it), which is the menu idiom.
   Hover was colour-only, so the cursor moved over six rows and the page did
   not respond to it at all.
   line-height is declared rather than inherited so the row height is
   arithmetic (17.6 + 16 = 33.6px) instead of a function of whichever face has
   loaded — the card is 302px -> ~217px, and it stays there through the font
   swap rather than settling into its final size a second after it opened. */
/* The menu rows shout like the bar rows they dropped out of — they are the
   same seven nav labels, so a row that changed case on its way into the card
   would read as a different kind of thing. */
.nav-more-menu a{
  padding:8px 14px;font-size:var(--t-sm);line-height:1.3;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-2);
  /* These <a>s are descendants of .nav-links, which now floors a BAR row at
     62px so --header-h:63px is arithmetic rather than a back-calculation. A
     menu row is not a bar row: left on, it took the card to 387px. */
  min-height:0;
  border-bottom:0;border-radius:var(--r-sm);
}
@media (hover:hover){
  .nav-more-menu a:hover{background:var(--surface-hover);color:var(--text-1)}
}
.nav-more-menu a:active{background:var(--surface-active)}
/* The Coaches/admin row is the one real group break in the card. */
.nav-more-menu a[href="/admin"]{
  margin-top:5px;border-top:1px solid var(--hairline);
  border-radius:0 0 var(--r-sm) var(--r-sm);
}
.nav-more[aria-expanded="true"]{background:var(--surface-hover)}

/* ---------- header: what the Next Up line has to share the row with -------- */
/* desktop F22: at 1280 the bar carries brand (131px) + the NEXT UP tag + the
   game line + seven nav links + More + a SEASON FALL 2026 block — eleven
   elements in 1265px — and the one that gets ellipsised by
   `.na-text{text-overflow:ellipsis}` is the single most time-sensitive fact on
   the site: "10U vs Georgia Sticks 10U — Sun, …". The season is decoration, it
   is repeated in every hero eyebrow, and mobile.css already demotes it to a
   chip for the same reason. Below the wide tier it gives its ~130px back to
   the game line; at 1440+ there is room for both. */
.na-season{display:none}
@media (min-width:1440px){
  .na-season{display:flex}
}

/* ---------- footer ---------- */
/* Four columns is a desktop measure. mobile.css keeps them at 1025-1240 and
   collapses to two at its own tiers. */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}

/* ---------- roster cards: hover choreography ---------- */
/* Still gated on a fine pointer: a >=1241px viewport can still be a
   touchscreen, and :hover sticks there after a tap. */
@media (hover:hover) and (pointer:fine){
  .player-card:hover{
    border-color:rgb(var(--red-rgb) / .55);
    transform:translateY(-5px);
    box-shadow:0 18px 36px rgba(0,0,0,.45), 0 0 0 1px rgb(var(--red-rgb) / .12);
  }
  .player-card:hover::before{transform:scaleX(1)}
  .player-card:hover .pc-photo > img,
  .player-card:hover .pc-photo .pc-ph{transform:scale(1.1)}
  .player-card:hover .pc-photo::after{
    opacity:1;
    background:
      linear-gradient(180deg,rgb(var(--red-rgb) / .16) 0%,transparent 38%,rgba(0,0,0,.7) 100%),
      linear-gradient(135deg,rgb(var(--red-rgb) / .2),transparent 50%);
  }
  .player-card:hover .pc-ph img{opacity:.7;transform:scale(1.06)}
  .player-card:hover .pc-num{
    transform:skewX(var(--skew)) scale(1.1) translate(-1px,-2px);
    box-shadow:0 10px 22px rgb(var(--red-rgb) / .45);
  }
  .player-card:hover .pc-meta{transform:translateY(-2px)}
  /* `.player-card:hover b{letter-spacing:.06em}` used to live here. Tracking is
     not in the transitionable set (colour, background, border, opacity,
     transform, shadow — nothing else): it re-lays out the name on every
     pointer-enter, so a card the mouse crosses reflows text under the cursor. */
  .player-card:hover .pc-squad{color:var(--text-2)}
  /* Active cards are <a class="player-card"> links, so this IS the focused
     element. The 1px red-tinted border it used to substitute for the ring
     blends to ~#730E1F over --ink: 1.7:1, i.e. no visible focus at all. */
  .player-card:focus-within{
    border-color:rgb(var(--red-rgb) / .55);
    outline:2px solid var(--white);outline-offset:2px;
  }
}
@media (hover:hover) and (pointer:fine){
  .roster-inactive .player-card:hover{
    transform:none;box-shadow:none;border-color:var(--hairline);
  }
  .roster-inactive .player-card:hover::before{transform:scaleX(0)}
  .roster-inactive .player-card:hover .pc-photo > img,
  .roster-inactive .player-card:hover .pc-photo .pc-ph{transform:none}
  .roster-inactive .player-card:hover .pc-num{
    transform:skewX(var(--skew));box-shadow:0 6px 16px rgba(0,0,0,.35);
  }
}

/* ---------- hero rungs ---------- */
/* The 1600px rung, for the arm of the old two-arm query that lived above the
   break: (min-width:1101px) and (max-resolution:1.5dppx). A 2x desktop keeps
   the 2400px master. See mobile.css for the full explanation of why these are
   media queries and not image-set(). */
@media (max-resolution:1.5dppx){
  .soc-hero{--hero-img:url("/assets/img/social-hero-1600.webp")}
  .sc-hero{--hero-img:url("/assets/img/scores-hero-1600.webp")}
  .cal-hero{--hero-img:url("/assets/img/calendar-hero-1600.webp")}
  .ro-hero{--hero-img:url("/assets/img/roster-hero-1600.webp")}
  .ph-hero{--hero-img:url("/assets/img/photos-hero-1600.webp")}
  .jn-hero{--hero-img:url("/assets/img/join-hero-1600.webp")}
  .og-hero{--hero-img:url("/assets/img/calendar-hero-1600.webp")}
  .sp-hero{--hero-img:url("/assets/img/sponsors-hero-1600.webp")}
  .fr-hero{--hero-img:url("/assets/img/join-hero-1600.webp")}
  .lv-hero{--hero-img:url("/assets/img/scores-hero-1600.webp")}
  .du-hero{--hero-img:url("/assets/img/roster-hero-1600.webp")}
}