/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.3
*/

/* ============================================================================
   GLOBAL BASE COLORS
   ----------------------------------------------------------------------------
   The GeneratePress Global Color palette (Customize → Colors → Global Colors),
   defined here as CSS custom properties. Values mirror GeneratePress's stock
   defaults. Note: functions.php injects an inline :root after this stylesheet
   that remaps --accent to the brand accent, so --accent below may be overridden
   at runtime.
   ============================================================================ */

:root {
  /* ---------- Brand colors (placeholders — overridden per-site by functions.php's
     trm_shell_brand_css() / the XML import) ---------- */
  --brand-primary: #334155;
  --brand-primary-dk: #1e293b;   
  --brand-accent:     #64748b;   
  --brand-cta_primary: #334155;
  --brand-cta_primary-dk: #1e293b;
  --brand-cta_secondary_bg: #475569;
  --brand-display_font: Oswald;
  --brand-body_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	

  /* Body Text Color; also Link Color Hover & Navigation text */
  --contrast:   #222222;
  /* Entry meta text (post date/author) */
  --contrast-2: #575760;
  /* Lightest contrast — muted text / subtle borders */
  --contrast-3: #b2b2be;
  /* Sub-navigation (dropdown) background */
  --base:       #f0f0f0;
  /* Body Background Color */
  --base-2:     #f7f8f9;
  /* Header, Navigation, Content, Sidebar & Footer widget backgrounds */
  --base-3:     #ffffff;
  /* Link Color */
  --accent:     #1e73be;

  /* ---------- Header color knob ----------------------------------------------
     Drives the header bar independently of the rest of the palette. Defaults to
     the accent color with white text; override either per-site (or via the XML
     import) to recolor the header on its own. The --hdr-* tokens below read
     from these. */
  --header-bg:   var(--brand-primary);
  --header-text: var(--base-3);
}

/* ============================================================================
   HEADER / NAV SUPPORT TOKENS
   ----------------------------------------------------------------------------
   The header + nav rules below rely on these. Recoded standalone so the old
   DESIGN TOKENS / FOUNDATION blocks could be removed. Colors map to the global
   palette; spacing/type are GeneratePress-friendly defaults. (functions.php
   injects live per-site font values over the --font-* fallbacks below.)
   ============================================================================ */
:root {
  /* Fonts */
  --font-body:    var(--brand-body_font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --font-display: var(--brand-display_font, "Oswald"), var(--font-body);

  /* Type scale (only the sizes the header uses) */
  --text-sm:   0.9rem;
  --text-base: 1rem;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --content-padding-x: 30px;       /* header content L/R gutter — matches .inside-header */

  /* Layout */
  --content-max-width: 1280px;     /* = GeneratePress container width (Customize → Layout → Container) */
  --container-radius:  5px;

  /* Colors the slideout / mobile nav use — mapped to the global palette */
  --color-text-body:   var(--contrast);
  --color-border-soft: var(--contrast-3);
  --color-bg-elevated: var(--base-2);
}
/* ============================================================================
   FONT LOADING
   ----------------------------------------------------------------------------
   Oswald loaded from theme assets, not from upload directory. This keeps the
   stylesheet portable — fonts travel with the theme, not with a given site's
   uploads folder.
   ============================================================================ */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/oswald-v57-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("assets/fonts/oswald-v57-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/oswald-v57-latin-700.woff2") format("woff2");
}

/* ============================================================================
   MAIN NAVIGATION
   ----------------------------------------------------------------------------
   Clean, minimal main menu — white header, dark text, thin underline that
   slides in on hover/focus. Multi-level dropdowns on desktop with full
   keyboard support. On mobile (<1025px) collapses into a slide-out drawer
   from the right with accordion submenus.

   Markup expected from WordPress / GeneratePress:
     .site-header
       .main-navigation
         .menu-toggle              (GP's mobile hamburger — we hijack it)
         .main-nav
           ul.menu
             li.menu-item
             li.menu-item.menu-item-has-children
               a + button.submenu-toggle   (button injected by main-menu.js)
               ul.sub-menu
                 li.menu-item ...

   The submenu-toggle button is injected by assets/js/main-menu.js. The
   .menu-drawer-backdrop element is also injected by that script.

   Per-site customization happens via the design tokens at the top of this
   file (brand color, fonts) or by overriding the --nav-* tokens below.
   ============================================================================ */

:root {
  /* ---------- Header tokens ----------------------------------------------
     The header now derives from the GeneratePress global color palette
     (Customize → Colors → Global Colors / the :root at the top of this file).
     Change a global color and the header recolors with it. To decouple the
     header on a given site, override any --hdr-* directly in a later stylesheet
     or pick one of the body.header-* variants below. */
  --hdr-height:           60px;
  --hdr-bg:               var(--header-bg);    /* main header band (header color knob) */
  --hdr-text:             var(--header-text);  /* wordmark + nav text                 */
  --hdr-accent:           var(--brand-accent);     /* header link / hover / underline (brand accent) */
  /* Menu pipe-separator color. Derives from the header text color so it stays
     readable on any header background; the header-* variants override as needed. */
  --hdr-divider:          color-mix(in srgb, var(--header-text) 30%, transparent);
  /* Gap between top-level menu items, and link weight. */
  --hdr-link-spacing:     24px;
  --hdr-link-weight:      500;

  /* Dropdown panel */
  --dropdown-bg:          var(--base-3);
  --dropdown-shadow:      0 8px 24px -6px rgba(20, 30, 50, 0.18),
                          0 4px 8px -2px rgba(20, 30, 50, 0.06);
  --dropdown-radius:      6px;
  --dropdown-min-width:   200px;

  /* Mobile drawer (Menu Plus slideout — not part of the header redesign) */
  --drawer-bg:            var(--base-3);
  --drawer-width:         min(86vw, 380px);
  --drawer-shadow:        -10px 0 30px -6px rgba(20, 30, 50, 0.18);

  /* ---- Back-compat aliases ----------------------------------------------
     The old --nav-* names now map to the new --hdr-* tokens, so any Tier-2
     vertical stylesheet that referenced them keeps working. The retained
     slideout/mobile rules below also still read --nav-height / --nav-text
     through these. New code should use the --hdr-* tokens above. */
  --nav-height:           var(--hdr-height);
  --nav-bg:               var(--hdr-bg);
  --nav-text:             var(--hdr-text);
  --nav-text-hover:       var(--hdr-accent);
  --nav-underline:        var(--hdr-accent);
  --nav-border:           transparent;
  --nav-link-spacing:     var(--hdr-link-spacing);
  --nav-link-weight:      var(--hdr-link-weight);
}

/* ---------- Header shell -----------------------------------------------
   IMPORTANT: !important is used here intentionally. GeneratePress emits
   inline CSS for .site-header / .main-navigation backgrounds from the
   Customizer Colors panel (see css-output.php :: header_background_color),
   and that inline block always loads after our stylesheet — so without
   forcing the cascade here, any pre-existing Customizer color (including
   GP's stock var(--base-3)) wins and the brand primary doesn't show.
   The generate_option_defaults filter in functions.php points the
   defaults at the brand var for new installs; this rule is the fallback
   for installs whose theme_mods have already been saved. */
.site-header,
body .site-header {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
}
.main-navigation:not(.slideout-navigation),
body .main-navigation:not(.slideout-navigation) {
  background-color: var(--nav-bg) !important;
}

/* ---------- Header color variants (body.header-<scheme>) ----------------
   Set by the "Header style" Customizer picker (functions.php). Default
   `header-brand` needs no rules — the header uses --hdr-bg/--hdr-text straight
   from the brand palette. These three override the MAIN bar to a fixed
   surface. Both --hdr-* and the
   --nav-* aliases are set so the override holds regardless of which the
   underlying rule reads. On the light surfaces the wordmark/nav text flip to
   the brand color, the header gains a hairline bottom border, and the fallback
   logo-mark glyph goes dark so it reads on the gold square. */
body.header-black {
  --hdr-bg:     #1a1a1a;   /* slightly lighter black for the main bar */
  --nav-bg:     #1a1a1a;
  --hdr-text:   #ffffff;
  --nav-text:   #ffffff;
  --hdr-divider: color-mix(in srgb, #ffffff 30%, transparent);  /* light divider on dark header */
}
body.header-white {
  --hdr-bg:   #ffffff;
  --nav-bg:   #ffffff;
  --hdr-text: var(--brand-primary);
  --nav-text: var(--brand-primary);
}
body.header-grey {
  --hdr-bg:   #f1f1f1;
  --nav-bg:   #f1f1f1;
  --hdr-text: var(--brand-primary);
  --nav-text: var(--brand-primary);
}
body.header-white .site-header,
body.header-grey .site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--hdr-text) 15%, transparent);
}
body.header-white .trm-logo-mark,
body.header-grey .trm-logo-mark {
  color: var(--brand-primary);
}
/* Light headers get a dark menu pipe-divider. (The default is now dark to suit
   the light GP header; header-black flips it back to light.) */
body.header-white,
body.header-grey {
  --hdr-divider: color-mix(in srgb, #000000 30%, transparent);
}

/* ---------- Logo container — fixed width across all viewports ----------
   Pinning the logo wrapper to 300px keeps every site built from this
   shell visually consistent regardless of the logo's intrinsic image
   dimensions. The logo image inside scales proportionally to fit.
   flex: 0 0 300px = no grow, no shrink, basis 300px. The !important
   beats GP's css-output and any prior media-query rule. max-width: 100%
   is a safety net for viewports under 300px (very narrow phones) where
   overflowing the row would be worse than shrinking. */
.inside-header .site-branding,
.inside-header .site-logo,
.site-header .site-branding,
.site-header .site-logo,
.has-inline-mobile-toggle .inside-header .site-branding,
.has-inline-mobile-toggle .inside-header .site-logo {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 100%;
}
.inside-header .site-logo img,
.site-header .site-logo img,
.inside-header .header-image,
.site-header .header-image {
  /* Explicit height (NOT height:auto) is retina-proof: the logo <img> often ships
     srcset="… 1x, … 2x" pointing at the same file, and with height:auto a DPR-2
     screen renders it at half its CSS size (the logo "shrinks on refresh"). A fixed
     height pins it; width:auto preserves aspect ratio; max-width:100% is the narrow-
     viewport safety net. Per site, override .site-logo img height to retune. */
  height: 70px;
  max-height: 70px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Keep the logo hard-left at every width. Two things can otherwise make it look
   centered: the fixed-width (300px) logo container centers a small/retina image
   inside itself, and at the mobile-nav breakpoint the header's flex row can center
   a lone logo once the nav is pinned absolute. margin-right:auto pins it left and
   pushes anything else (hamburger) to the right edge. */
.inside-header .site-logo,
.site-header .site-logo,
.inside-header .site-branding,
.site-header .site-branding {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* A little vertical breathing room above/below the logo so the header feels
   less cramped (applies to both the image logo and the fallback mark+wordmark). */
.inside-header .site-branding,
.inside-header .site-logo,
.site-header .site-branding,
.site-header .site-logo {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---------- Fallback logo mark -----------------------------------------
   Shown only when no image logo is set (body.trm-no-logo, set in
   functions.php). A large brand-accent rounded square with the site's
   initial on the left, and a text column on the right holding the site name
   over the tagline. As soon as a logo image is added in Customize → Site
   Identity, the whole fallback disappears and GP's logo shows instead. */
.trm-logo-mark {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: var(--hdr-accent);
  color: var(--hdr-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
body.trm-no-logo .site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
body.trm-no-logo .trm-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
}
body.trm-no-logo .main-title {
  margin: 0;
  line-height: 1.1;
}
body.trm-no-logo .main-title a,
body.trm-no-logo .main-title a:hover {
  color: var(--hdr-text);
}
body.trm-no-logo .trm-brand-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--hdr-text);
  opacity: 0.7;
}

/* ---------- Desktop nav layout ----------------------------------------- */
.main-navigation {
  background: transparent;
  min-height: var(--nav-height);
}
.main-navigation .inside-navigation {
  display: flex;
  align-items: center;
  min-height: var(--nav-height);
}
.main-navigation .main-nav {
  margin-left: auto;
}
.main-navigation .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;          /* never wrap to a second row */
  align-items: center;
  gap: var(--nav-link-spacing);
}
.main-navigation .menu-item {
  position: relative;
  flex: 0 0 auto;             /* each item is as wide as its content, no shrink */
}
.main-navigation .menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  font-size: 15px;
  font-weight: var(--nav-link-weight);
  /* Top-level desktop menu items are hard-coded white. !important is
     necessary because GP's css-output emits an inline rule
     `.main-navigation .main-nav ul li a { color: <header_link_color> }`
     which has higher specificity than this selector. The slideout panel
     uses its own selectors below and is unaffected. The value is the header
     text token so it follows the brand palette. */
  color: var(--hdr-text) !important;
  letter-spacing: 0.01em;
  white-space: nowrap;        /* a multi-word label never breaks mid-text */
  position: relative;
  transition: color 160ms ease;
  background: none;
  text-decoration: none;
}

/* Subtle underline that slides in on hover/focus.
   Rendered on the .menu-item itself (not the inner <a>) so it spans the
   full row including the .submenu-toggle button next to the link text on
   parent items with dropdowns. Scoped to top-level items only via the
   `.menu >` direct-child combinator — sub-menu items don't use .menu as
   their immediate parent (they sit under .sub-menu) so they're skipped. */
.main-navigation .menu > .menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Anchor ~10px below the (vertically centered) link text instead of the
     bottom of the full-height nav item, so the gap stays constant if
     --nav-height changes. 0.7em ≈ half the text line-height. */
  top: calc(50% + 0.7em + 10px);
  height: 2px;
  background: var(--nav-underline);
  transform: scaleX(0);
  /* Center origin = the default "center-out underline" hover. The picker can
     swap this whole treatment for another via the body.nav-hover-* variants
     at the end of this section. */
  transform-origin: center;
  transition: transform 220ms ease;
  pointer-events: none;
}
.main-navigation .menu > .menu-item:hover::after,
.main-navigation .menu > .menu-item:focus-within::after,
.main-navigation .menu > .menu-item.current-menu-item::after,
.main-navigation .menu > .menu-item.current-menu-ancestor::after {
  transform: scaleX(1);
}
.main-navigation .menu-item:hover > a,
.main-navigation .menu-item:focus-within > a,
.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-ancestor > a {
  color: var(--nav-text-hover);
}

/* ---------- Injected submenu toggle (button after parent <a>) ---------- */
.main-navigation .submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: var(--space-1);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--nav-text);
  cursor: pointer;
  transition: color 160ms ease;
}
.main-navigation .submenu-toggle .caret {
  width: 10px;
  height: 10px;
  transition: transform 220ms ease;
}
.main-navigation .menu-item.is-open > .submenu-toggle .caret,
.main-navigation .submenu-toggle[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}
.main-navigation .menu-item:hover > .submenu-toggle,
.main-navigation .menu-item:focus-within > .submenu-toggle {
  color: var(--nav-text-hover);
}

/* ---------- Dropdown panels ------------------------------------------- */
.main-navigation .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  position: absolute;
  /* Pin flush to the bottom of the parent — any visual gap causes the
     :hover state to drop when the mouse crosses it. Anything that looks
     like padding/spacing between the parent and the dropdown should be
     created with internal padding inside the dropdown, not with a gap. */
  top: 100%;
  left: 0;
  min-width: var(--dropdown-min-width);
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border);
  border-radius: var(--dropdown-radius);
  box-shadow: var(--dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease,
              visibility 0s linear 160ms;
  z-index: 50;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}
.main-navigation .sub-menu .menu-item {
  width: 100%;
}
.main-navigation .sub-menu .menu-item > a {
  display: flex;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 400;
  /* Hard-coded black on the white dropdown panel background. !important
     beats GP's inline rule (.main-navigation .main-nav ul ul li a { color: ... })
     which would otherwise apply the header_link_color Customizer value. */
  color: #000000 !important;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
}
.main-navigation .sub-menu .menu-item > a::after {
  display: none;
}
.main-navigation .sub-menu .menu-item:hover > a,
.main-navigation .sub-menu .menu-item:focus-within > a {
  color: #000 !important;
  background: var(--hdr-accent);
}

/* Nested submenu (level 2+) flies out to the right */
.main-navigation .sub-menu .sub-menu {
  top: -1px;
  left: 100%;
  margin-left: 2px;
}
.main-navigation .sub-menu .submenu-toggle .caret {
  transform: rotate(-90deg);
}
.main-navigation .sub-menu .menu-item.is-open > .submenu-toggle .caret {
  transform: rotate(90deg);
}

/* Right-edge collision: flip rightward submenus to the left */
.main-navigation .sub-menu.flip-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

/* Hover bridge for nested flyouts (level-2+). A transparent strip on the flyout's
   left reaches back over the parent column and spans the flyout's full height. Because
   it's part of the flyout (its ::before), hovering it keeps the parent item's :hover
   alive — so a diagonal move from the parent row down to a lower flyout row no longer
   drops the hover chain and snaps the panel shut. Mirrored to the right when the flyout
   is edge-flipped (.flip-left). The flyout is already position:absolute (see the
   dropdown-panel rules above), so ::before anchors to it correctly.
   Scoped :not(.slideout-navigation): in the slide-out, sub-menus are position:static and
   a -26px strip would hang off the drawer and cause overflow / stray hit-testing. */
.main-navigation:not(.slideout-navigation) .sub-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -26px;
  width: 26px;
  /* transparent — purely a hover catch, no visual. Tune 26px up (e.g. 32px) if a
     flyout still feels twitchy; bigger = more forgiving, overlaps more of the parent. */
}
.main-navigation:not(.slideout-navigation) .sub-menu .sub-menu.flip-left::before {
  left: auto;
  right: -26px;
}

/* ---------- Focus styles (keyboard only) ------------------------------ */
.main-navigation .menu-item > a:focus-visible,
.main-navigation .submenu-toggle:focus-visible,
.menu-toggle:focus-visible,
.menu-drawer-close:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 2px;
}



/* =====================================================================
   NAV HOVER VARIANTS  (body.nav-hover-<style>)
   ---------------------------------------------------------------------
   Default (.nav-hover-underline): the center-out underline defined above.
   The Customizer "Navigation hover style" picker sets the body class
   (functions.php :: body_class); <trm:nav_hover> seeds it on import. Exactly
   one is active at a time. Each non-underline variant first hides the
   ::after underline, then applies its own treatment. All read --hdr-* so
   they recolor with the brand palette.
   ===================================================================== */
body.nav-hover-pill    .main-navigation .menu > .menu-item::after,
body.nav-hover-slideup .main-navigation .menu > .menu-item::after,
body.nav-hover-bracket .main-navigation .menu > .menu-item::after,
body.nav-hover-ghost   .main-navigation .menu > .menu-item::after,
body.nav-hover-pipes   .main-navigation .menu > .menu-item::after {
  display: none;
}

/* Pill fill — a chip that wraps the WHOLE top-level item, including the
   dropdown caret on parent items. The caret is a .submenu-toggle button that
   sits beside the link (not inside it), so the pill is drawn on the .menu-item
   rather than the <a> — a pill on the link alone would stop at the text. The
   item carries the horizontal padding; the link carries the vertical, with
   line-height:1 so the chip hugs the text height. */
body.nav-hover-pill .main-navigation .menu > .menu-item {
  border-radius: 999px;
  padding: 0 14px;
  transition: background 200ms ease;
}
body.nav-hover-pill .main-navigation .menu > .menu-item:hover,
body.nav-hover-pill .main-navigation .menu > .menu-item:focus-within,
body.nav-hover-pill .main-navigation .menu > .menu-item.current-menu-item,
body.nav-hover-pill .main-navigation .menu > .menu-item.current-menu-ancestor {
  background: var(--hdr-accent);
}
body.nav-hover-pill .main-navigation .menu-item > a {
  padding: 8px 0;
  line-height: 1;
}
/* Pull the caret in tight against its label so it sits inside the chip. */
body.nav-hover-pill .main-navigation .menu-item-has-children > .submenu-toggle {
  width: auto;
  margin-left: 4px;
}
/* Text and caret go black on the gold chip. */
body.nav-hover-pill .main-navigation .menu > .menu-item:hover > a,
body.nav-hover-pill .main-navigation .menu > .menu-item:focus-within > a,
body.nav-hover-pill .main-navigation .menu > .menu-item.current-menu-item > a,
body.nav-hover-pill .main-navigation .menu > .menu-item.current-menu-ancestor > a,
body.nav-hover-pill .main-navigation .menu > .menu-item:hover > .submenu-toggle,
body.nav-hover-pill .main-navigation .menu > .menu-item:focus-within > .submenu-toggle,
body.nav-hover-pill .main-navigation .menu > .menu-item.current-menu-ancestor > .submenu-toggle {
  color: #000 !important;
}

/* Text slide-up swap. main-menu.js wraps each top-level link's text in
   span.trm-label > span.trm-label-inner[data-text]. .trm-label is a fixed
   one-line clip box; .trm-label-inner holds the visible text plus a gold
   ::after duplicate one line below it, and slides up on hover so the gold copy
   rises into view. Clipping lives on .trm-label (not the padded <a>), so the
   link's vertical padding doesn't expose the duplicate. */
body.nav-hover-slideup .main-navigation .menu > .menu-item > a .trm-label {
  display: block;
  height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
}
body.nav-hover-slideup .main-navigation .menu > .menu-item > a .trm-label-inner {
  display: block;
  transition: transform 240ms ease;
}
body.nav-hover-slideup .main-navigation .menu > .menu-item > a .trm-label-inner::after {
  content: attr(data-text);
  display: block;
  color: var(--hdr-accent);
}
body.nav-hover-slideup .main-navigation .menu > .menu-item:hover > a .trm-label-inner,
body.nav-hover-slideup .main-navigation .menu > .menu-item:focus-within > a .trm-label-inner {
  transform: translateY(-1.5em);
}

/* Bracket reveal — gold [ ] slide in to frame the WHOLE item (label + caret).
   Drawn on the .menu-item (not the link) so the closing ] lands after the
   dropdown caret instead of between the label and caret. The item already has
   position:relative; horizontal padding gives the brackets room at each edge.
   The ::after here is the same pseudo the underline variant uses — the variant
   reset hides it, and the higher-specificity rules below repurpose it as "]". */
body.nav-hover-bracket .main-navigation .menu > .menu-item {
  padding: 0 16px;
}
body.nav-hover-bracket .main-navigation .menu-item > a {
  padding-left: 0;
  padding-right: 0;
}
body.nav-hover-bracket .main-navigation .menu-item-has-children > .submenu-toggle {
  width: auto;
  margin-left: 4px;
}
body.nav-hover-bracket .main-navigation .menu > .menu-item::before,
body.nav-hover-bracket .main-navigation .menu > .menu-item::after {
  display: block;
  height: auto;
  background: none;
  position: absolute;
  top: 50%;
  color: var(--hdr-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
body.nav-hover-bracket .main-navigation .menu > .menu-item::before {
  content: "[";
  left: 4px;
  right: auto;
  transform: translateY(-50%) translateX(5px);
}
body.nav-hover-bracket .main-navigation .menu > .menu-item::after {
  content: "]";
  left: auto;
  right: 4px;
  transform: translateY(-50%) translateX(-5px);
}
body.nav-hover-bracket .main-navigation .menu > .menu-item:hover::before,
body.nav-hover-bracket .main-navigation .menu > .menu-item:focus-within::before,
body.nav-hover-bracket .main-navigation .menu > .menu-item:hover::after,
body.nav-hover-bracket .main-navigation .menu > .menu-item:focus-within::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
body.nav-hover-bracket .main-navigation .menu > .menu-item:hover > a,
body.nav-hover-bracket .main-navigation .menu > .menu-item:focus-within > a {
  color: var(--hdr-accent);
}

/* Ghost outline box — gold rounded outline draws in around the WHOLE item
   (link + dropdown caret), same reasoning as the pill: the caret is a sibling
   button, so the outline goes on the .menu-item. The item is a centered flex
   row so link and caret align; reduced vertical padding keeps the box short. */
body.nav-hover-ghost .main-navigation .menu > .menu-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 16px;
  box-shadow: inset 0 0 0 0 var(--hdr-accent);
  transition: box-shadow 200ms ease;
}
body.nav-hover-ghost .main-navigation .menu > .menu-item:hover,
body.nav-hover-ghost .main-navigation .menu > .menu-item:focus-within,
body.nav-hover-ghost .main-navigation .menu > .menu-item.current-menu-item,
body.nav-hover-ghost .main-navigation .menu > .menu-item.current-menu-ancestor {
  box-shadow: inset 0 0 0 1.5px var(--hdr-accent);
}
body.nav-hover-ghost .main-navigation .menu-item > a {
  padding: 8px 0;
  line-height: 1;
}
body.nav-hover-ghost .main-navigation .menu-item-has-children > .submenu-toggle {
  width: auto;
  height: auto;
  margin-left: 4px;
}
body.nav-hover-ghost .main-navigation .menu > .menu-item:hover > a,
body.nav-hover-ghost .main-navigation .menu > .menu-item:focus-within > a,
body.nav-hover-ghost .main-navigation .menu > .menu-item.current-menu-item > a,
body.nav-hover-ghost .main-navigation .menu > .menu-item.current-menu-ancestor > a {
  color: var(--hdr-accent);
}

/* Pipe separators — thin dividers between items, gold text on hover */
body.nav-hover-pipes .main-navigation .menu {
  gap: 0;
}
body.nav-hover-pipes .main-navigation .menu > .menu-item {
  border-left: 1px solid var(--hdr-divider);
}
body.nav-hover-pipes .main-navigation .menu > .menu-item:first-child {
  border-left: 0;
}
body.nav-hover-pipes .main-navigation .menu-item > a {
  padding-left: 18px;
  padding-right: 18px;
}
/* Parent items: the dropdown caret otherwise butts against the next pipe while
   the label keeps its 18px on the left. Keep the caret in its normal fixed box
   (NO width:auto — that shrank the box and caused a layout jump when a link was
   clicked/focused) and just add space to its right so both sides clear the
   pipes evenly. */
body.nav-hover-pipes .main-navigation .menu-item-has-children > .submenu-toggle {
  margin-right: 10px;
}

/* ===========================================================================
   MOBILE DRAWER ( < 1025px )
   The same .main-navigation element is restyled into a fixed slide-out
   drawer below the breakpoint. .menu-drawer-backdrop is appended to <body>
   by main-menu.js.
   =========================================================================== */
.menu-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  z-index: 200;
}
.menu-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}

body.menu-drawer-open {
  overflow: hidden;
}

/* ===========================================================================
   GP DROPDOWN-MENU-TOGGLE — hide
   GP auto-injects <span class="dropdown-menu-toggle"> into items with
   children. We inject our own <button class="submenu-toggle"> via JS and
   use that everywhere. Hide GP's so there's no duplicate caret/icon.
   =========================================================================== */
.main-navigation .dropdown-menu-toggle {
  display: none !important;
}

/* ===========================================================================
   SLIDEOUT NAVIGATION (Menu Plus / Off Canvas Panel)
   ---------------------------------------------------------------------------
   Restyles GP Premium's slideout panel to match the drawer design from the
   original custom-built prototype. Menu Plus owns open/close, focus trap,
   scroll lock, ESC/backdrop dismiss — we just provide the look.

   Activation: Customize → Layout → Off Canvas Panel → enable.
   =========================================================================== */

/* Align Menu Plus's slideout width with our drawer-width token.
   IMPORTANT: Menu Plus uses --gp-slideout-width for BOTH the panel width
   AND its off-screen offset (right: calc(var(--gp-slideout-width) * -1)).
   If we override only `width`, the offset stays at the default 265px and
   the panel pokes 115px into view on desktop. Re-defining the variable
   keeps both sides of the equation in sync. */
:root {
  --gp-slideout-width: var(--drawer-width);
}

/* The slideout panel itself */
#generate-slideout-menu.slideout-navigation {
  background: var(--drawer-bg) !important;
  box-shadow: var(--drawer-shadow);
  border-left: 1px solid var(--color-border-soft);
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Slideout inside container — flex column so header pins, menu scrolls */
#generate-slideout-menu.slideout-navigation .inside-navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100% !important;
  max-width: none;
}

/* Injected header at top of slideout (rendered by generate_inside_slideout_navigation hook).
   Close button only — pinned to the left edge of the slideout header.
   Scoped with #generate-slideout-menu so specificity beats any
   GP / Menu Plus rule that targets generic .slideout-navigation buttons. */
#generate-slideout-menu .slideout-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  align-self: stretch;
  height: var(--nav-height);
  padding: 0 var(--space-3);
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-soft);
  flex-shrink: 0;
  text-align: left !important;
  box-sizing: border-box !important;
}

#generate-slideout-menu .slideout-menu-header .slideout-menu-close,
#generate-slideout-menu .slideout-menu-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 40px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  border-radius: 4px;
  color: var(--color-text-body);
  box-sizing: border-box !important;
}
#generate-slideout-menu .slideout-menu-close:hover,
#generate-slideout-menu .slideout-menu-close:focus-visible {
  background: var(--color-bg-elevated) !important;
}
#generate-slideout-menu .slideout-menu-close svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Hide Menu Plus's stock "outside" close button — we use the injected one
   in the header instead. (Inside-style close button stays styled below.) */
.slideout-overlay .slideout-exit {
  display: none;
}

/* The menu list inside the slideout */
#generate-slideout-menu.slideout-navigation .main-nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  width: 100%;
}
#generate-slideout-menu.slideout-navigation .main-nav .menu,
#generate-slideout-menu.slideout-navigation .main-nav > ul,
#generate-slideout-menu.slideout-navigation ul.slideout-menu {
  display: block !important;
  padding: 0 0 var(--space-8);
  margin: 0;
  gap: 0;
  list-style: none;
}

/* Menu items in the slideout */
#generate-slideout-menu.slideout-navigation .menu-item {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border-soft);
  background: transparent !important;
}
#generate-slideout-menu.slideout-navigation .menu-item > a {
  flex: 1 1 auto;
  padding: var(--space-3) var(--space-5) !important;
  font-size: var(--text-base); /* 1rem */
  font-weight: 500;
  color: var(--color-text-body) !important;
  line-height: 1.4 !important;
  height: auto !important;
  background: transparent !important;
}
#generate-slideout-menu.slideout-navigation .menu-item > a::after {
  display: none;
}
/* TOP-LEVEL rows only: fill with the site's PRIMARY brand color + white text on
   hover of the whole row — the link OR the arrow toggle. Hover ONLY (deliberately
   not :focus-within, which persists after a click and would leave the fill "stuck"
   while an accordion submenu is open). var(--brand-primary) is per-site (maroon,
   blue, …) — never the slate accent. Sub-menu items are intentionally excluded;
   they stay flat grey with no hover state (see the accordion rules below). */
#generate-slideout-menu.slideout-navigation .slideout-menu > .menu-item:hover > a,
#generate-slideout-menu.slideout-navigation .slideout-menu > .menu-item:hover > .submenu-toggle,
#generate-slideout-menu.slideout-navigation .main-nav > ul > .menu-item:hover > a,
#generate-slideout-menu.slideout-navigation .main-nav > ul > .menu-item:hover > .submenu-toggle {
  color: #ffffff !important;
  background: var(--brand-primary) !important;
}

/* Submenu-toggle (injected by main-menu.js) inside slideout — full-height
   tap target on the right of each parent row. */
#generate-slideout-menu.slideout-navigation .submenu-toggle {
  width: 56px;
  height: auto;
  margin: 0;
  flex: 0 0 56px;
  border: 0;
  background: transparent;
  color: var(--color-text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#generate-slideout-menu.slideout-navigation .submenu-toggle .caret {
  width: 14px;
  height: 14px;
  transition: transform 220ms ease;
}
#generate-slideout-menu.slideout-navigation .menu-item.is-open > .submenu-toggle .caret {
  transform: rotate(180deg);
}

/* Accordion sub-menus */
#generate-slideout-menu.slideout-navigation .sub-menu {
  position: static !important;
  display: block !important;
  /* Flat light-grey resting panel using the palette neutral --base (the shell's
     documented "sub-navigation background"). Static: dark text, no hover state — the
     open accordion reads as a quiet indented panel, clearly distinct from the
     brand-filled top-level rows above. No brand tint/stripe here by design. */
  background: var(--base) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  /* Closed by default. GeneratePress CORE (main.min.css) pins .main-navigation ul ul
     to height:0, and GP's menu.min.js re-collapses the panel on mouse-out — so the
     shell's old max-height-only accordion never actually held open. We drive it with
     height + !important on the .is-open rule below to win over both. */
  height: 0;
  max-height: 0;
  overflow: hidden;
  flex-basis: 100%;
  order: 3;
  width: 100% !important;
  pointer-events: auto !important;
}
/* Hover/focus alone must NOT open the accordion — a CLICK (.is-open, toggled by
   main-menu.js) is the only opener. !important beats GP core's height:0 and any inline
   height GP's menu.min.js sets on hover, so a mouse-over never expands a panel. */
#generate-slideout-menu.slideout-navigation .menu-item-has-children:hover > .sub-menu,
#generate-slideout-menu.slideout-navigation .menu-item-has-children:focus-within > .sub-menu {
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
/* Open on click and STAY open — mouse-out does not close it. Placed AFTER the hover
   guard with equal specificity so an open item that's also being hovered stays open.
   height:auto + !important beats GP core (.main-navigation ul ul { height:0 }) and the
   inline height GP's menu.min.js sets when it tries to re-collapse on mouse-out. */
#generate-slideout-menu.slideout-navigation .menu-item.is-open > .sub-menu {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#generate-slideout-menu.slideout-navigation .sub-menu .menu-item {
  border-bottom: 1px solid var(--color-border-soft);
}
#generate-slideout-menu.slideout-navigation .sub-menu .menu-item > a {
  padding-left: calc(var(--space-8) + var(--space-2)) !important;
  font-size: var(--text-sm); /* 0.9rem — slightly smaller than top level */
  font-weight: 500;
  position: relative;
  white-space: normal;
}

/* Dash marker before each child link */
#generate-slideout-menu.slideout-navigation .sub-menu .menu-item > a::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--brand-primary);
  transform: translateY(-50%);
  opacity: 0.7;
  transition: width 160ms ease, opacity 160ms ease;
}
/* Sub-menu dash markers are STATIC — no hover/focus growth. The slide-out sub-menu
   has no hover state by design (flat grey, dark text). Keyboard focus is still
   indicated by the shared :focus-visible outline defined for .main-navigation links. */

/* Nested 3rd-level — step down typography and indent */
#generate-slideout-menu.slideout-navigation .sub-menu .sub-menu .menu-item > a {
  padding-left: calc(var(--space-10) + var(--space-2)) !important;
  font-weight: 400;
  font-size: var(--text-sm);
}
#generate-slideout-menu.slideout-navigation .sub-menu .sub-menu .menu-item > a::before {
  left: var(--space-8);
  width: 8px;
  opacity: 0.55;
}

/* Backdrop overlay for the slideout (Menu Plus's body-level overlay) */
.slideout-overlay {
  background: rgba(20, 30, 50, 0.45) !important;
}

/* The .menu-toggle (hamburger). Accent by default (reads on the dark brand/black
   headers); the light header variants switch it to the darker brand primary.
   !important + the SVG fill are needed because GeneratePress's mobile-menu
   breakpoint is 768px while ours runs to 1025px — so in the 769–1024 tablet
   range GP's own (dark) navigation color would otherwise win. The toggle is
   hidden ≥1025px, so no media query is needed here. Tracks the palette vars. */
body .site-header .menu-toggle,
body .site-header .menu-toggle:hover,
body .site-header .menu-toggle:focus,
body .site-header .menu-toggle .gp-icon,
body .site-header .menu-toggle svg {
  color: var(--hdr-accent) !important;
  fill: currentColor !important;
  background: transparent !important;
}
body.header-white .site-header .menu-toggle,
body.header-white .site-header .menu-toggle svg,
body.header-grey .site-header .menu-toggle,
body.header-grey .site-header .menu-toggle svg {
  color: var(--brand-primary) !important;
}

/* ===========================================================================
   MOBILE HEADER LAYOUT
   ---------------------------------------------------------------------------
   With inline mobile toggle on (forced via the generate_has_inline_mobile_toggle
   filter), GP renders the hamburger inside .inside-header alongside the logo.
   This block makes them sit on a single row: logo on the left (flex-shrinking
   as needed), hamburger pinned hard right, both vertically centered.
   =========================================================================== */
@media (max-width: 1024px) {
  .has-inline-mobile-toggle .inside-header,
  body .inside-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    /* flex-start (not space-between) so a lone logo is never centered once the nav
       is pinned absolute at this breakpoint. The logo's margin-right:auto keeps it
       hard-left and pushes the hamburger to the right edge. */
    justify-content: flex-start !important;
    gap: var(--space-3);
    text-align: left !important;
  }

  /* Logo / branding — flex-shrinks to whatever space remains after the toggle.
     min-width: 0 lets a flex item actually shrink below its content width
     (browsers default min-width on flex children to "auto" which prevents
     shrinking). max-width keeps a hard ceiling on it. */
  /* Logo container sizing is handled by the top-level rule above (fixed
     300px). Here we only kill any margin GP adds in mobile context. */
  .has-inline-mobile-toggle .inside-header .site-branding,
  .has-inline-mobile-toggle .inside-header .site-logo,
  body .inside-header .site-branding,
  body .inside-header .site-logo {
    /* margin-right:auto pins the logo hard-left and pushes the hamburger right. */
    margin: 0 auto 0 0 !important;
  }
  /* If the site title is text (no image logo), let it ellipsis if it's too long
     rather than wrapping or overflowing the row. */
  .has-inline-mobile-toggle .inside-header .main-title,
  body .inside-header .main-title {
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Make .inside-header a positioning context for the absolutely-pinned
     .main-navigation below. */
  .has-inline-mobile-toggle .inside-header,
  body .inside-header {
    position: relative !important;
  }

  /* Pin .main-navigation (which holds the .menu-toggle button) absolutely
     to the right edge of .inside-header. Absolute positioning sidesteps
     all the flex-order / margin-auto / sibling-element shenanigans that
     can leave the hamburger short of the right edge. The element fills
     the header height vertically and shrinks to its content width. */
  .main-navigation:not(.slideout-navigation),
  body .main-navigation:not(.slideout-navigation) {
    position: absolute !important;
    /* 10px of breathing room from the right edge so the hamburger aligns
     * with the content edge. */
    right: 10px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2;
  }

  /* Zero out the inner .inside-navigation padding so the toggle sits
     flush with the right edge of .main-navigation. */
  .main-navigation:not(.slideout-navigation) .inside-navigation,
  body .main-navigation:not(.slideout-navigation) .inside-navigation {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide just the menu UL container — keeps the hamburger visible. */
  .main-navigation:not(.slideout-navigation) .main-nav,
  body .main-navigation:not(.slideout-navigation) .main-nav {
    display: none !important;
  }

  /* Hide any header widget areas on mobile so they don't eat space
     between the logo and the hamburger. (Header widgets remain visible
     on desktop where there's room.) */
  .inside-header .header-widget,
  body .inside-header .header-widget {
    display: none !important;
  }

  /* Navigation Location = "Below Header Bar" (body.nav-below-header) renders TWO
     body-level navs: the inline mobile-toggle wrapper (.mobile-menu-control-wrapper,
     which main-menu.js relocates into the header) and the actual desktop menu bar
     (.has-menu-bar-items, which carries its OWN toggle). At mobile we drive everything
     from the relocated hamburger + slide-out, so hide that desktop nav bar entirely —
     otherwise its toggle shows as a second, mis-placed hamburger down the page. The
     !important beats the shell's own `display:flex !important` pin above. */
  body.nav-below-header .main-navigation:not(.slideout-navigation):not(.mobile-menu-control-wrapper) {
    display: none !important;
  }

  /* The hamburger button itself */
  .mobile-menu-control-wrapper .menu-toggle,
  .inside-header .menu-toggle {
    padding: 0 var(--space-3) !important;
    line-height: 1 !important;
    min-height: 44px !important;
    width: auto !important;
    color: var(--hdr-accent) !important;
    background: transparent !important;
    border: 0 !important;
  }
  /* Hide GP's default "Menu" text next to the icon — we only want the icon */
  .inside-header .menu-toggle .mobile-menu {
    display: none !important;
  }
}

/* ===========================================================================
   DESKTOP — hide every toggle / mobile-menu artifact above the breakpoint
   ---------------------------------------------------------------------------
   Three things can render a hamburger / slideout opener:
     - .menu-toggle              GP's stock mobile menu toggle
     - .slideout-toggle          Menu Plus's slideout opener (when placed via
                                 menu item or menu-bar widget)
     - .mobile-menu-control-wrapper  GP's inline-toggle container
   Hide all three above 1024px so only the inline horizontal nav shows on
   desktop. Uses !important because GP's css-output generates inline rules
   that compete for these same selectors.
   =========================================================================== */
@media (min-width: 1025px) {
  .menu-toggle,
  .main-navigation .menu-toggle,
  .slideout-toggle,
  li.slideout-toggle,
  .menu-bar-item.slideout-toggle,
  .mobile-menu-control-wrapper {
    display: none !important;
  }
}

/* On desktop, hide GP's mobile menu-toggle button */
@media (min-width: 1025px) {
  .menu-toggle {
    display: none;
  }
}

/* ============================================================================
   CARDS
   ----------------------------------------------------------------------------
   Reusable content cards. Every card uses the base .default-card class (layout)
   plus ONE variation class for its look; the optional .card-dark modifier flips
   a variation to the dark/blue surface. All colors come from the GLOBAL BASE
   COLORS palette at the top of this file. Icons are inline SVG using
   stroke="currentColor", so they recolor with the palette (no icon font needed).

   Layout: an icon + heading row (.dc-head) with a full-width divider under it,
   then the body content stacked below, all flush to the left edge.

   Question card:
     <article class="default-card card-question">
       <div class="dc-head">
         <span class="dc-icon" aria-hidden="true"></span>   (the ? is CSS-drawn)
         <h3>Did you know</h3>
       </div>
       <p>…blurb…</p>
     </article>

   Problem-gambling card (append card-dark for the blue version):
     <article class="default-card card-gambling">
       <div class="dc-head">
         <span class="dc-icon" aria-hidden="true"><svg …lifebuoy… ></svg></span>
         <h3>Gamble responsibly</h3>
       </div>
       <p>…blurb…</p>
       <a class="dc-cta" href="tel:18004262537" aria-label="Call 1-800-GAMBLER, 18 and over">
         <svg …phone… ></svg><span>Call 1-800-GAMBLER</span><span class="dc-age">18+</span>
       </a>
     </article>
   ============================================================================ */
.default-card {
  padding: var(--space-6);
  border-radius: var(--container-radius);
  text-align: left;
}
/* Icon + heading row. Robust to core/group wrapping its inner blocks in a
   .wp-block-group__inner-container: the row layout is applied to .dc-head AND to
   that wrapper, so it works whether the icon + heading are direct children or
   nested one level down. The card body itself stays in normal block flow
   (spacing via margins below), which survives the wrapper too. */
.default-card .dc-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--contrast) 14%, transparent);
}
.default-card .dc-head > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.default-card .dc-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Card icons are drawn from CSS (::before) per variation below, so the page
   markup carries no inline SVG (which KSES can strip). */
.default-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}
.default-card p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
	margin-bottom: 10px;
}

/* Call-to-action button (used by cards that need one, e.g. card-gambling) */
.dc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .4px;
  line-height: 1;
  padding: 9px 12px 9px 15px;
  border-radius: var(--container-radius);
  background: var(--brand-cta_primary);
  color: var(--brand-cta-text, #fff);
  margin-top: var(--space-3);
}
.dc-cta::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dc-age {
  margin-left: 12px;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid color-mix(in srgb, var(--base-3) 55%, transparent);
}

/* ---------- Variation: question ("Did you know") ---------- */
.card-question { background: var(--base-3); border: 1px solid var(--base); }
.card-question .dc-icon { background: var(--accent); color: var(--base-3); }
.card-question .dc-icon::before {
  content: "?";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.card-question h3 { color: var(--contrast); }
.card-question p  { color: var(--contrast-2); }

/* ---------- Variation: problem gambling ---------- */
.card-gambling { background: var(--base-3); border: 1px solid var(--base); }
.card-gambling .dc-icon { background: var(--accent); color: var(--base-3); }
.card-gambling .dc-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card-gambling h3 { color: var(--contrast); }
.card-gambling p  { color: var(--contrast-2); }

/* ---------- Modifier: dark / blue surface ---------- */
.card-dark { background: var(--brand-primary-dk); border-color: transparent; }
.card-dark .dc-head { border-bottom-color: color-mix(in srgb, var(--base-3) 30%, transparent); }
.card-dark .dc-icon { background: var(--base-3); color: var(--contrast); }
.card-dark h3 { color: var(--base-3); }
.card-dark p  { color: var(--base); }
.card-dark .dc-cta { background: var(--base-3); color: var(--contrast); }
.card-dark .dc-age { border-color: color-mix(in srgb, var(--contrast) 30%, transparent); }

/* ============================================================================
   BRAND CTA + FONT WIRING
   Surfaces the per-site brand CTA colors and fonts. CTA / button blocks use
   --brand-cta_primary (primary) and --brand-cta_secondary_bg (secondary); body and
   headings inherit the brand font tokens. NOTE: if a font or button color is
   set explicitly in Customize, that wins -- clear it to defer to these.
   ============================================================================ */
.wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--brand-cta_primary);
  color: var(--brand-cta-text, #fff);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--brand-cta_primary);
  border-color: var(--brand-cta_primary);
}
.dc-cta--secondary,
.wp-block-button.is-secondary .wp-block-button__link {
  background: var(--brand-cta_secondary_bg);
  color: var(--brand-cta-text, #fff);
}
body,
button, input, select, textarea {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--font-display);
}

/* Dark-card body links: keep them light/legible on the dark surface */
.card-dark p a {
  color: var(--base-3, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card-dark p a:hover {
  text-decoration: none;
}

/* ============================================================================
   END
   ----------------------------------------------------------------------------
   Tier 2 vertical-specific layers (sportsbook odds widgets, horse racing
   cards, etc.) load AFTER this file in their own stylesheets and may
   override these tokens for their vertical.
   ============================================================================ *


/* ============================================================================
   STATEHOUSE ALMANAC — complete skin for stateswithslots.com
   ----------------------------------------------------------------------------
   REPLACES the whole child-theme custom.css, so it must cover EVERY class the
   site's 54 pages use. Coverage verified by _build/check-coverage.py against
   _work-class-usage.json (47 used classes) — do not ship if that reports a gap.

   Direction: authority-led "legal ledger". White document surface, casino-night
   plum structure, gold accent, the owner's CTA-green. Pip colours are FACTUAL
   CLAIMS and are carried over byte-identical from the statehouse skin.

   Layers below:  1 tokens · 2 base/prose · 3 components · 4 new almanac parts
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* brand — carried over from statehouse, unchanged */
  --c-brand:      #2a0f45;   /* casino-night plum (structure)      */
  --c-brand-dk:   #1c0730;   /* deep plum (header band, dark bands)*/
  --c-accent:     #18bb51;   /* CTA green — never red              */
  --c-accent-dk:  #0f9a40;
  --c-warn:       #f4b400;   /* casino gold — accent/ribbon        */
  --c-bad:        #e0102f;

  /* status pips — FACTUAL CLAIMS. Do not restyle these values. */
  --pip-live:     #1a8a3c;   /* regulator has licensed online play */
  --pip-none:     #6b7280;   /* no regulated online market         */
  --pip-pending:  #f4b400;   /* law passed, market not yet live    */
  --c-good:       #1a8a3c;

  /* surfaces — almanac shift: paper instead of flat white */
  --c-bg:         #ffffff;
  --c-paper:      #fbfafc;   /* faint plum-biased paper            */
  --c-bg-soft:    #f6f3f9;   /* tint band                          */
  --c-ink:        #171320;
  --c-muted:      #4c4459;
  --c-muted-2:    #7c7389;
  --c-line:       #e2dcea;
  --c-line-soft:  #efeaf4;

  /* type — the almanac pairing */
  --font:      "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-num:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-sm: .875rem; --fs: 1rem;
  --fs-h3: clamp(1.12rem, 1rem + .5vw, 1.3rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-h1: clamp(1.95rem, 1.5rem + 2.2vw, 3rem);

  --sp-xs: .25rem; --sp-sm: .5rem; --sp: 1rem; --sp-lg: 1.5rem; --sp-xl: 2.25rem;
  --radius: 8px; --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(23,19,32,.05), 0 0 0 1px rgba(23,19,32,.05);
  --cta-gradient: none;

  /* header knobs — retarget the shell's chain at the plum palette
     (style.css forces .site-header{background:var(--nav-bg)!important}) */
  --header-bg:    var(--c-brand-dk);
  --header-text:  #ffffff;
  --brand-accent: var(--c-warn);
}

/* ------------------------------------------------------ 2. BASE / PROSE */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

.wrap { width: 100%; }
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp); }
.row-border { border-top: 1px solid var(--c-line-soft); }

h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -.012em; }
h1 { font-size: var(--fs-h1); line-height: 1.06; font-weight: 700; }
h2 { font-size: var(--fs-h2); color: var(--c-brand); font-weight: 600; line-height: 1.15; }
h3 { font-size: var(--fs-h3); color: var(--c-brand); font-weight: 600; }

/* a gold hairline rail under section heads — the almanac signature */
h2::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 3px;
  background: var(--c-warn); margin-top: .45rem;
}
.callout h2::after, .box h2::after, .cta-band h2::after { display: none; }

/* ------------------------------------------------------- 3. COMPONENTS */

/* --- 3.1 buttons -------------------------------------------------------- */
.btn {
  display: inline-block; background: var(--c-accent); border: 1px solid var(--c-accent-dk);
  color: #fff; text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
  padding: .62em 1.15em; border-radius: var(--radius-sm); text-align: center; line-height: 1.25;
}
.btn:hover, .aff.btn:hover { background: var(--c-accent-dk); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.btn--brand { background: var(--c-accent); border-color: var(--c-accent-dk); color: #fff; }
.btn--full  { display: block; width: 100%; }
.btn--warn  { background: var(--c-warn); border-color: #c89400; color: var(--c-brand-dk); }
.btn__icon  { margin-right: .4em; }
.aff        { font-weight: 600; }

/* --- 3.2 operator row (.book-row) — "offer card" treatment --------------
   Uses the EXISTING six children in their existing order, so all 47 pages that
   carry .book-row get this look with no markup change. __bonus and __cta share
   one gold surface so they read as a single offer panel.
   ------------------------------------------------------------------------- */
.book-list { list-style: none; margin: var(--sp-lg) 0; padding: 0; display: grid; gap: 14px; }

.book-row {
  position: relative; background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 10px; overflow: hidden; padding: 0;
  display: grid; gap: 0;
  grid-template-areas: "logo" "pitch" "features" "bonus" "cta";
}

/* rank badge notched into the top-left corner, out of the flow */
.rank-badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--font-num); font-weight: 700; font-size: .72rem; line-height: 1;
  background: var(--c-brand); color: var(--c-warn);
  padding: .45em .7em; border-radius: 0 0 5px 0;
}
.rank-badge--top { background: var(--c-warn); color: var(--c-brand-dk); }
.rank-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: var(--c-brand); }

/* square library logo — 5px radius, hairline so white marks read on white */
.book-row__logo { grid-area: logo; padding: 18px 20px 0 20px; }
.book-row__logo img {
  width: 46px; height: 46px; border-radius: 5px; object-fit: contain;
  border: 1px solid var(--c-line-soft); background: #fff; display: block;
}

.book-row__pitch { grid-area: pitch; padding: 10px 20px 0 20px; }
.book-row__pitch h3 { margin: 0 0 .45rem; font-size: 1.32rem; line-height: 1.15; }
.book-row__pitch p  { margin: 0 0 .7rem; font-size: .95rem; color: var(--c-muted); line-height: 1.6; }
.book-row__pitch p:last-child { margin-bottom: 0; }
/* licence line under the brand name - says plainly where none is published */
.book-row__lic {
  display: block; font-family: var(--font-num); font-size: .72rem;
  color: var(--c-muted-2); margin: -.25rem 0 .7rem;
}

/* terms table inside the offer panel */
.book-row__terms {
  margin: 12px 0 0; width: 100%; display: grid; gap: 1px;
  background: #f0e3c2; border: 1px solid #f0e3c2; border-radius: 6px; overflow: hidden;
}
.book-row__terms > div {
  background: #fffdf6; display: flex; justify-content: space-between;
  gap: 10px; padding: 7px 10px; text-align: left;
}
.book-row__terms dt { margin: 0; font-size: .72rem; color: var(--c-muted-2); }
.book-row__terms dd {
  margin: 0; font-family: var(--font-num); font-size: .72rem;
  font-weight: 600; color: var(--c-muted); text-align: right;
}

.book-row__features { grid-area: features; padding: 14px 20px 20px 20px; }
.book-row__features ul {
  margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.book-row__features li {
  position: relative; padding-left: 17px; font-size: .855rem;
  color: var(--c-muted); line-height: 1.5;
}
.book-row__features li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-good);
}

/* the offer panel — two elements, one gold surface */
.book-row__bonus, .book-row__cta {
  background: linear-gradient(180deg, #fffdf6, #fdfaf0);
  border-top: 1px solid #f0e3c2;
}
.book-row__bonus {
  grid-area: bonus; text-align: center; padding: 18px 18px 6px;
}
.book-row__bonus b, .book-row__bonus span:first-child {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.7rem; line-height: 1.1; color: var(--c-brand);
}
.book-row__bonus > span {
  display: block; font-family: var(--font-num); font-size: .72rem;
  letter-spacing: .04em; color: #8a6a00; margin-top: .35rem;
}
.book-row__cta { grid-area: cta; padding: 10px 18px 18px; border-top: 0; }
.book-row__cta .btn {
  width: 100%; font-weight: 700; font-size: .95rem; padding: .72em 1.1em;
}
.book-row__more { grid-area: cta; font-size: var(--fs-sm); }

/* --- 3.3 THE CON MARKER (751 uses / 44 pages — unstyled before this skin) */
.con { color: var(--c-muted); }
.book-row__features li.con::before,
.checklist li.con::before { background: var(--c-bad); }
li.con { --marker: var(--c-bad); }

/* --- 3.4 table-list (key/value fact rows) -------------------------------- */
.table-list { list-style: none; margin: var(--sp-lg) 0; padding: 0; display: grid; gap: var(--sp-sm); }
.table-list__item {
  background: var(--c-bg); border: 1px solid var(--c-line); border-left: 3px solid var(--c-brand);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.table-list__item--top { border-left-color: var(--c-warn); background: #fffcf2; }
.table-list__title {
  margin: 0 0 .5rem; font-family: var(--font-head); font-weight: 600;
  font-size: 1.08rem; color: var(--c-brand);
}
.table-list__fields { margin: 0; display: grid; gap: .3rem .9rem; }
.table-list__fields > div { display: flex; gap: .55rem; flex-wrap: wrap; font-size: var(--fs-sm); }
.table-list__fields dt {
  margin: 0; font-weight: 600; color: var(--c-muted-2); min-width: 8.5rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
}
.table-list__fields dd { margin: 0; color: var(--c-ink); flex: 1 1 12rem; }

/* --- 3.5 callouts -------------------------------------------------------- */
.callout {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-warn); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: var(--sp-lg) 0; font-size: var(--fs-sm);
  color: var(--c-muted); line-height: 1.55;
}
.callout__label {
  display: block; font-family: var(--font-num); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8a6a00; margin-bottom: .35rem; font-weight: 600;
}
.callout p:last-child { margin-bottom: 0; }
.callout--data  { border-left-color: var(--c-warn); }
.callout--def   { border-left-color: var(--c-brand); background: #f8f6fb; }
.callout--def  .callout__label { color: var(--c-brand); }
.callout--quote { border-left-color: var(--c-muted-2); font-style: italic; }
.callout--quote .callout__label { color: var(--c-muted-2); font-style: normal; }
.callout--warn  { border-left-color: var(--c-bad); background: #fdf3f4; }
.callout--warn  .callout__label { color: var(--c-bad); }

/* --- 3.6 boxes ----------------------------------------------------------- */
.box {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp); margin: var(--sp-lg) 0;
}
.box--facts { background: var(--c-paper); }
.box__head  { border-bottom: 2px solid var(--c-warn); margin: -.25rem 0 .7rem; padding-bottom: .5rem; }
.box__head h3 { margin: 0; color: var(--c-brand); }
.box__label, .box__title {
  display: block; font-family: var(--font-num); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted-2); margin-bottom: .3rem; font-weight: 600;
}
.box__title { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: normal;
  text-transform: none; color: var(--c-brand); }
.box p:last-child { margin-bottom: 0; }

/* --- 3.7 checklists / pros-cons ------------------------------------------ */
.checklist { list-style: none; margin: var(--sp) 0; padding: 0; display: grid; gap: .35rem; }
.checklist li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); line-height: 1.5; }
.checklist li::before {
  content: "22"; position: absolute; left: .25rem; top: -.05em;
  font-weight: 700; color: var(--c-muted-2);
}
.checklist--pros li::before { content: "13"; color: var(--c-good); }
.checklist--cons li::before { content: "17"; color: var(--c-bad); }
.pros-cons { display: grid; gap: var(--sp); margin: var(--sp-lg) 0; }
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }

/* --- 3.8 tables (mockup treatment: bordered card, plum head, zebra) ------ */
.wp-block-table, .table-wrap {
  overflow-x: auto; margin: var(--sp-lg) 0;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-bg);
}
.wp-block-table table, .cmp-table, .data-table {
  border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .9rem;
}
.wp-block-table thead th, .cmp-table thead th, .data-table thead th, .data-table th {
  background: var(--c-brand); color: #fff; text-align: left; font-weight: 600;
  font-size: .75rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 11px 14px; white-space: nowrap;
}
.wp-block-table tbody th, .cmp-table tbody th, .data-table tbody th {
  text-align: left; font-weight: 600; color: var(--c-brand); white-space: nowrap;
}
.wp-block-table tbody th, .wp-block-table tbody td,
.cmp-table tbody th, .cmp-table tbody td,
.data-table tbody th, .data-table tbody td {
  padding: 11px 14px; border-top: 1px solid var(--c-line-soft); vertical-align: top;
}
.wp-block-table tbody tr:nth-child(even) th, .wp-block-table tbody tr:nth-child(even) td,
.cmp-table tbody tr:nth-child(even) th, .cmp-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) th, .data-table tbody tr:nth-child(even) td {
  background: #faf8fc;
}
.wp-block-table tbody th .pip, .cmp-table tbody th .pip { margin-right: 8px; }
/* figures already provide the frame - don't double it */
figure.wp-block-table { padding: 0; }
figure.wp-block-table > table { border: 0; }
.num, .wp-block-table td:last-child, .wp-block-table th:last-child {
  font-variant-numeric: tabular-nums;
}

/* --- 3.9 CTA band -------------------------------------------------------- */
.cta-band {
  background: var(--c-brand-dk); color: #ede7f3; border-radius: var(--radius);
  padding: var(--sp-lg); margin: var(--sp-xl) 0;
  display: grid; gap: var(--sp); align-items: center;
}
@media (min-width: 760px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band__copy { min-width: 0; }
.cta-band__copy h2, .cta-band__copy h3 { color: #fff; margin: 0 0 .4rem; }
.cta-band__copy h2::after { display: none; }
.cta-band__copy p { margin: 0; color: #beb2ce; font-size: var(--fs-sm); }
.cta-band__act  { display: grid; gap: .4rem; justify-items: stretch; }
.cta-band__note { font-size: .72rem; color: #8e82a0; text-align: center; }
.cta-band__logo img { max-height: 34px; width: auto; }

/* --- 3.10 status pips + state grid (mockup treatment) ------------------- */
.state-grid {
  list-style: none; padding-left: 0; margin: 0 0 var(--sp) 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 2px 10px;
}
/* each row is a tinted, rounded chip whose colour states the legal status */
.state-grid li {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 5px 8px; border-radius: 4px; font-size: .9rem;
}
.state-grid li a {
  color: var(--c-muted); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.state-grid li:hover   { background: var(--c-bg-soft); }
.state-grid li:hover a { color: var(--c-brand); }
/* status tint is driven by the pip the row carries - no extra class needed */
.state-grid li:has(.pip--live)      { background: #f2f9f4; }
.state-grid li:has(.pip--live) a    { color: #14612b; font-weight: 600; }
.state-grid li:has(.pip--pending)   { background: #fdf7e6; }
.state-grid li:has(.pip--pending) a { color: #7a5a00; font-weight: 600; }

.pip {
  display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: var(--pip-none); flex: 0 0 auto; vertical-align: middle;
}
.pip--live    { background: var(--pip-live); }
.pip--pending { background: var(--pip-pending); }

.state-grid-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 15px 0;
  padding-bottom: 14px; border-bottom: 1px solid var(--c-line-soft);
  font-size: .82rem; color: var(--c-muted);
}
.state-grid-legend span {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}

/* --- 3.11 misc ----------------------------------------------------------- */
.disclosure, .rg-strip {
  font-size: .78rem; color: var(--c-muted-2); line-height: 1.5; margin: var(--sp) 0;
}
.rg-strip {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: .7rem .9rem; text-align: center;
}
.trm-comp-note { font-size: .78rem; color: var(--c-muted-2); font-style: italic; }
.card-grid { display: grid; gap: var(--sp); grid-template-columns: 1fr; margin: var(--sp-lg) 0; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.spec-box {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp); margin: var(--sp-lg) 0;
}
.review-card {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp); margin: var(--sp-lg) 0; box-shadow: var(--shadow);
}
.review-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.author-box {
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp); margin: var(--sp-xl) 0 var(--sp-lg);
}
.is-top { border-color: var(--c-warn); }
.date { font-family: var(--font-num); font-size: .78rem; color: var(--c-muted-2); }
.code { font-family: var(--font-num); font-size: .82rem; background: var(--c-bg-soft);
  border: 1px solid var(--c-line-soft); border-radius: 4px; padding: .1em .4em; }

/* ------------------------------------------------ 4. ALMANAC ADDITIONS */
/* the 7 / 1 / 43 status ledger that opens the homepage */
.tally {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px; background: var(--c-line); border: 1px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden; margin: var(--sp-lg) 0;
}
.tally__c { background: var(--c-bg); padding: .9rem 1rem; display: flex; gap: .75rem;
  align-items: flex-start; }
.tally__n { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; line-height: .95;
  font-variant-numeric: tabular-nums; color: var(--c-brand); }
.tally__c--live    .tally__n { color: var(--pip-live); }
.tally__c--pending .tally__n { color: #9a7200; }
.tally__c--none    .tally__n { color: var(--pip-none); }
.tally__l { font-size: .8rem; line-height: 1.35; color: var(--c-muted); padding-top: .15rem; }
.tally__l b { display: block; color: var(--c-ink); font-weight: 600; font-size: .84rem; }

/* the hero lede - larger, quieter, sits above the tally */
.hero-lede { font-size: 1.12rem; line-height: 1.55; color: var(--c-muted); margin: .85rem 0 0; }
.hero-lede b { color: var(--c-ink); font-weight: 600; }

/* small caps eyebrow above a section head */
.eyebrow {
  display: block; font-family: var(--font-num); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: #8a6a00; margin-bottom: .3rem; font-weight: 600;
}

/* FAQ disclosures */
.faq { display: grid; gap: .5rem; margin: var(--sp-lg) 0; }
.faq details {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: .8rem 1rem; font-weight: 600;
  color: var(--c-brand); display: flex; gap: .6rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--font-num); color: var(--c-warn);
  font-weight: 700; }
.faq details[open] summary::before { content: "12"; }
.faq summary:hover { background: var(--c-bg-soft); }
.faq summary:focus-visible { outline: 2px solid var(--c-warn); outline-offset: -2px; }
.faq__a { padding: 0 1rem .9rem 2.2rem; color: var(--c-muted); font-size: var(--fs-sm); }
.faq__a > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------ 5. RESPONSIVE BUILD-UP */
@media (min-width: 780px) {
  .book-row {
    grid-template-columns: 1fr 268px;
    grid-template-areas:
      "logo     bonus"
      "pitch    bonus"
      "features cta";
  }
  .book-row__bonus, .book-row__cta {
    border-top: 0; border-left: 1px solid #f0e3c2;
  }
  /* offer sits at the top of the panel, CTA anchored to the bottom, so a long
     verdict leaves breathing room between them rather than dead gold below */
  .book-row__bonus {
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 24px 18px 12px;
  }
  .book-row__cta {
    display: flex; align-items: flex-end; padding: 12px 18px 22px;
  }
  .book-row__cta .btn { align-self: end; }
}
@media (min-width: 640px) {
  .table-list__fields { grid-template-columns: 1fr 1fr; }
}