/*! gr-fix.css: Greenridge fleet-wide mobile polish layer.
 * Loaded at the end of <head>, after each page's inline <style>, so equal-
 * specificity rules win the cascade. Rules are surgical and mostly mobile-
 * scoped. Oct 2026 mobile pass. */

/* iOS: suppress the grey tap-flash on interactive elements. Brand :active /
   :hover states still provide feedback. */
a, button, summary, label, [role="button"], .btn, .mbtn, .thm {
  -webkit-tap-highlight-color: transparent;
}

/* In-page anchors must clear the fixed/sticky header when jumped to.
   :where() keeps specificity at 0 so any page-specific value still wins. */
:where([id]) { scroll-margin-top: 84px; }

/* Defensive responsive-media reset (prevents any future image from forcing
   horizontal scroll). Type selectors, so any class-based sizing still wins. */
img, video { max-width: 100%; height: auto; }

@media (max-width: 760px) {
  /* Footer column links: real >=44px tap rows instead of ~18-26px text. */
  .fcol a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 3px 0;
    margin-bottom: 2px;
    font-size: 15px;
  }

  /* Legal / inline footer link rows: comfortable tap targets and a little
     more breathing room between wrapped rows. */
  .fleg-links a, .flinks a, .fleg a, .ft-leg-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 3px 2px;
  }
  .fleg-links, .flinks { row-gap: 2px; }

  /* Footer social icons up to a 44px hit area. */
  .fsocial a, .ft-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* All button-style CTAs comfortably tappable on phones. */
  .btn { min-height: 44px; }

  /* Delta Brokers footer SEO link blocks: give wrapped city/industry links a
     little tap height and spacing instead of a dense run. */
  .fseo-col a { display: inline-block; padding: 6px 0; margin-right: 16px; }

  /* Long tracked kickers wrap gracefully instead of crowding the edge. */
  .kick { flex-wrap: wrap; }
}

/* Make whole "explore" cards tappable, not just the small link (opt-in via the
   .xplore class on the card grid). */
.xplore .cell { position: relative; }
.xplore .cell .go::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* On the smallest phones, let the signature display headline ease below its
   ~2.8rem clamp floor so long headings stop locking oversized and wrapping
   awkwardly. Still large and impactful (~38px); desktop cap unchanged. */
@media (max-width: 420px) {
  .display { font-size: clamp(2.4rem, 9vw, 6rem); }
}

/* Flagship hero stat row: tighter spacing so the three stats sit cleanly
   instead of the last one wrapping under a divider. */
@media (max-width: 560px) {
  .hero-read .c { padding-right: 16px; margin-right: 16px; }
}

/* Edge-to-edge on notched phones (paired with viewport-fit=cover in the meta):
   drop the fixed nav below the status bar / notch, and inset the nav + content
   from a side notch in landscape. The nav element carries no padding of its own,
   and env() is 0 on devices without a notch, so this is a no-op everywhere else. */
@supports (top: env(safe-area-inset-top)) {
  header.nav { padding-top: env(safe-area-inset-top); }
  @media (orientation: landscape) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    header.nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  }
}

/* First-visit-per-session brand intro: hide the splash on repeat views this session. */
html.gri-seen .gr-intro{display:none!important}

/* ============================================================================
   Oct 2026 desktop pass. Verified fixes from the desktop design/quality audit.
   This layer loads after every inline <style>, so these equal-or-higher
   specificity rules win the cascade and correct all pages at once.
   ========================================================================== */

/* [rank 1] CRITICAL: the per-page grx-a11y block ships a global
   `label{color:#39473f!important}` and `.cmeta{color:#6f5a34!important}` that
   were meant for cream sections but repaint the ONLY labels on the site: the
   contact form, which sits on a dark panel in both themes (1.44:1 / 2.14:1,
   unreadable). Restore the intended gold on the form. `.cform label` (0,1,1)
   with !important beats the bare `label` (0,0,1) !important by specificity;
   `.cform .cmeta` (0,2,0) beats bare `.cmeta` (0,1,0). */
.cform label{color:var(--gold2)!important}
.cform .cmeta{color:var(--gold2)!important}
/* Dark form placeholders were falling to the UA default (often sub-4.5:1). */
.cform ::placeholder{color:rgba(245,239,226,.62)}

/* [rank 4] CRITICAL (systemic): the grx-a11y !important dark-ink rules have no
   theme guard, so in dark mode they defeat the non-important per-theme dark
   overrides and drop eyebrow kickers / role / intro text to ~2:1. Pair each
   with a theme-guarded counter at higher specificity. --gold2 is #C8A86A on
   every group page (this file only serves the greenridgegroup.org property;
   Delta has its own copy), so there is no cross-brand misfire. */
html[data-theme=dark] .premise .t,
html[data-theme=dark] .lead .t,
html[data-theme=dark] .cta .t,
html[data-theme=dark] .contact .t,
html[data-theme=dark] .thesis .t,
html[data-theme=dark] .track .t,
html[data-theme=dark] .t,
html[data-theme=dark] .sn,
html[data-theme=dark] .pn,
html[data-theme=dark] .rt{color:var(--gold2)!important}
html[data-theme=dark] .role,
html[data-theme=dark] .m .role{color:var(--gold2)!important}
html[data-theme=dark] .pn span,
html[data-theme=dark] .elev small{color:rgba(245,239,226,.6)!important}
html[data-theme=dark] .lh b,
html[data-theme=dark] .lr b{color:var(--cream)!important}
html[data-theme=dark] .lead-intro{color:rgba(245,239,226,.72)!important}
html[data-theme=dark] .note{color:rgba(246,242,234,.78)!important}

/* [rank 3] CRITICAL: two flagship serif headlines are color:var(--forest)
   with no dark override, so they vanish on the dark premise/lead bands in dark
   mode (1.16:1 / 1.33:1). These classes exist only on the flagship. */
html[data-theme=dark] .pm-open{color:var(--cream)}
html[data-theme=dark] .pm-open em{color:var(--gold2)}
html[data-theme=dark] .lead-line{color:var(--cream)}

/* [rank 10] HIGH: on-cream gold link affordance (e.g. "Read the full thesis")
   is gold2 at 1.98:1 on cream in light mode. Set to a dark gold (6.6:1) for
   light, and flip back to the light gold that reads on the dark premise band
   in dark mode (the !important beats the element's inline colour). */
html[data-theme=dark] .tlink{color:var(--gold2)!important;border-bottom-color:rgba(200,168,106,.5)!important}

/* [rank 9] HIGH: the proof/press logo strip is a full-bleed cream slab that
   stays bright between the dark premise and platform sections in dark mode.
   The logos are PNGs tuned for light, so darken the band and seat each logo on
   its own light plate rather than hiding them. Flagship-only classes. */
html[data-theme=dark] .proof{background:var(--forest2);border-top-color:rgba(245,239,226,.08);border-bottom-color:rgba(245,239,226,.08)}
html[data-theme=dark] .proof .pl{background:rgba(245,239,226,.94);border-radius:9px;padding:6px 14px;box-sizing:border-box}
html[data-theme=dark] .proof .pl-logo{opacity:.85}
html[data-theme=dark] .proof .pl:hover .pl-logo{opacity:1}
html[data-theme=dark] .proof .pl-word{color:var(--cream)}

/* [rank 7] HIGH (systemic): 277 of 381 pages have no :focus-visible at all,
   and where one exists the plain gold2 ring is only ~1.98:1 on cream. A single
   colour cannot clear 3:1 on both the cream and forest surfaces that appear
   within one page, so use a two-tone halo (one ring always contrasts). The
   transparent outline keeps a ring in Windows High Contrast Mode, and the
   box-shadow survives `outline:none` on the few sliders/fields that strip it.
   `:where()` keeps specificity at the :focus-visible level so later source
   order wins over the older bare :focus-visible rule. */
:where(a,button,summary,input,select,textarea,[tabindex],.btn):focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--forest);
  border-radius:3px;
}
html[data-theme=dark] :where(a,button,summary,input,select,textarea,[tabindex],.btn):focus-visible{
  box-shadow:0 0 0 2px var(--forest3,#081A14),0 0 0 4px var(--gold2);
}

/* [rank 17] Resting dark form-field border was rgba(245,239,226,.2) = 1.81:1,
   below the 3:1 non-text minimum. Raise it to ~3.2:1; keyboard focus is handled
   by the halo above, so sliders/fields that strip the outline still get a ring. */
.cform input,.cform textarea,.cform select{border-color:rgba(245,239,226,.4)}

/* [rank 8] HIGH (brokerage, ~56 pages): small uppercase labels/breadcrumbs use
   #9A7438 (4.01:1) and muted captions use #7A7362 (4.44:1) on the brokerage
   near-white cream, both below AA for sub-24px text. Darken to #6A5024 (7.1:1)
   and #6B6453 (5.5:1) in LIGHT mode only (dark mode already remaps these to
   gold2). Listing classes (.lcard/.filters/.lst-count) are brokerage-only; the
   darker tones stay safe on cream wherever .crumbs/.note also appear. */
:root:not([data-theme=dark]) .filters label,
:root:not([data-theme=dark]) .crumbs,
:root:not([data-theme=dark]) .crumbs a,
:root:not([data-theme=dark]) .lcard .chip-loc,
:root:not([data-theme=dark]) .lcard .metrics .k{color:#6A5024}
:root:not([data-theme=dark]) .track .note,
:root:not([data-theme=dark]) .lst-count,
:root:not([data-theme=dark]) .lcard .ind{color:#6B6453}

/* [rank 30] WCAG 2.2 target size: the 40-44px tap rows above are mobile-only,
   so desktop footer/legal columns kept ~20px hit boxes. Give them a 24px
   minimum on all widths (these columns already render as flex on mobile). */
.fcol a,.flinks a,.fleg-links a,.fleg a,.ft-leg-links a{min-height:24px}

/* [rank 31] Reduced-motion: cover the whole fleet in one place. The learn
   template sets html{scroll-behavior:smooth} with no reset, and the trailing
   custom cursor is gated only on pointer, not on reduced-motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .cur,.curd,.grpol-spot{display:none!important}
}

/* [rank 20] Print: legal, disclosure and learn pages are what prospects save
   to PDF, but with no @media print they print dark backgrounds, the fixed nav,
   the progress bar and the custom cursor. One shared block covers all 381
   pages. Print-only, so no effect on screen. */
@media print{
  header.nav,.nav,.cur,.curd,.prog,.gr-intro,.grpol-vig,.grpol-spot,.thm,.mbtn,.mobile-menu,#mmenu{display:none!important}
  .reveal,.grpol-hd{opacity:1!important;transform:none!important;clip-path:none!important}
  details:not([open])>:not(summary){display:block!important}
  html,body{background:#fff!important}
  body,section,header,footer,main,div,article,aside{background:transparent!important;box-shadow:none!important}
  body *{color:#000!important;text-shadow:none!important}
  a{text-decoration:underline}
}

/* ============================================================================
   Oct 2026 a11y + dark-mode plumbing pass (desktop audit rank 14/16/18/26/27).
   ========================================================================== */

/* Dark-mode plumbing: scoped to [data-theme=dark], so it only ever matches the
   65 themed pages in their dark state (the 316 non-themed pages never carry
   data-theme, so this cannot leak onto them). color-scheme gives native
   scrollbars/controls a dark hint; the html background kills the white
   overscroll gutter and the pre-paint flash in dark mode. */
html[data-theme=dark]{color-scheme:dark;background:var(--forest3,#081A14)}

/* Skip-to-content link: visually hidden until focused, then a branded pill at
   top-left. Injected as the first child of <body> on all 381 pages; the target
   is <main id="top" tabindex="-1"> (tabindex makes the fragment link actually
   MOVE focus into main, not just scroll). scroll-margin-top on [id] already
   offsets #top below the fixed nav. */
.gr-skip{position:absolute;left:-9999px;top:0;z-index:2000}
.gr-skip:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 16px;border-radius:10px;background:var(--forest,#15342A);color:var(--cream,#F5EFE2);outline:2px solid var(--gold2,#C8A86A);outline-offset:2px;font:600 14px/1 var(--body,system-ui)}
/* Suppress the programmatic-focus ring on the skip target itself. */
main[tabindex='-1']:focus{outline:none}