/**
 * GS Homepage — Base Design Tokens
 * Shared components used across all homepage blocks.
 * Loaded once when any homepage block is present.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   GENERATEPRESS CONTAINER RESETS
   Kills GP's default padding, width constraints, page title, and sidebar
   that interfere with full-width homepage blocks. Only fires on pages
   where has-gs-homepage body class is present (set by PHP).
   ═══════════════════════════════════════════════════════════════════════════ */
.has-gs-homepage #primary { width: 100% !important; float: none !important; margin: 0 !important; }
.has-gs-homepage .entry-content { padding: 0 !important; max-width: none !important; }
.has-gs-homepage .entry-header { display: none !important; }
/* Preserve top padding — GP uses it to compensate for sticky header height */
.has-gs-homepage .site-main { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; }
.has-gs-homepage .inside-article { padding: 0 !important; }
/* Standard WP blocks (paragraphs, images) that aren't homepage blocks get side padding back */
.has-gs-homepage .entry-content > p,
.has-gs-homepage .entry-content > .wp-block-image,
.has-gs-homepage .entry-content > .wp-block-heading,
.has-gs-homepage .entry-content > ul,
.has-gs-homepage .entry-content > ol { padding-left: 24px; padding-right: 24px; max-width: 1108px; margin-left: auto; margin-right: auto; }
/* Hide GenerateBlocks podcast player injection */
.has-gs-homepage .inside-article > *:not(.entry-header):not(.entry-content) { display: none !important; }

/* ── LABEL ── */
.gs-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 8px;
}

/* ── PILL (default) ── */
.gs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #000;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 100px;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.gs-pill:hover { background: #111 !important; color: #fff !important; text-decoration: none !important; }
.gs-pill--sm { font-size: 12px; padding: 7px 14px; }

/* ── PILL DARK — hardened against GP a:hover ── */
.gs-pill--dark,
.gs-pill--dark:link,
.gs-pill--dark:visited,
.gs-pill--dark:active,
.gs-pill--dark:focus,
a.gs-pill--dark,
a.gs-pill--dark:link,
a.gs-pill--dark:visited,
a.gs-pill--dark:active,
a.gs-pill--dark:focus {
  background: #111 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.gs-pill--dark:hover,
a.gs-pill--dark:hover {
  background: #333 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── MOBILE TOUCH TARGETS — WCAG 44px minimum ── */
@media (max-width: 640px) {
  .gs-pill { padding: 12px 20px; font-size: 14px; min-height: 44px; }
  .gs-pill--sm { padding: 10px 16px; font-size: 13px; min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INVERSE BLOCK STYLES
   Three variants selectable per-block via ACF dropdown.
   Applied as modifier class on each block's wrapper element.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BACKGROUNDS ── */
.gs-inverse--black { background: #111 !important; }
.gs-inverse--dark  { background: #222 !important; }
.gs-inverse--light { background: #f5f5f5 !important; }

/* ── DARK VARIANTS (black + dark grey) — shared text/border/component rules ── */
.gs-inverse--black,
.gs-inverse--dark {
  color: #ccc !important;
  border-bottom-color: #333 !important;
}

/* Headings and titles */
.gs-inverse--black h1,
.gs-inverse--black h2,
.gs-inverse--black h3,
.gs-inverse--black [class$="__title"],
.gs-inverse--black [class$="__q"],
.gs-inverse--dark h1,
.gs-inverse--dark h2,
.gs-inverse--dark h3,
.gs-inverse--dark [class$="__title"],
.gs-inverse--dark [class$="__q"] {
  color: #fff !important;
}

/* Body text, descriptions, answers */
.gs-inverse--black p,
.gs-inverse--black [class$="__a"],
.gs-inverse--black [class$="__body"],
.gs-inverse--black [class$="__desc"],
.gs-inverse--black [class$="__tagline"],
.gs-inverse--black [class$="__summary"],
.gs-inverse--black [class$="__meta"],
.gs-inverse--black [class$="__date"],
.gs-inverse--dark p,
.gs-inverse--dark [class$="__a"],
.gs-inverse--dark [class$="__body"],
.gs-inverse--dark [class$="__desc"],
.gs-inverse--dark [class$="__tagline"],
.gs-inverse--dark [class$="__summary"],
.gs-inverse--dark [class$="__meta"],
.gs-inverse--dark [class$="__date"] {
  color: #ccc !important;
}

/* Labels (.gs-label) */
.gs-inverse--black .gs-label,
.gs-inverse--dark .gs-label {
  color: #ccc !important;
}

/* Kickers and small text */
.gs-inverse--black [class$="__kicker"],
.gs-inverse--black [class$="__subtitle"],
.gs-inverse--black [class$="__search-label"],
.gs-inverse--dark [class$="__kicker"],
.gs-inverse--dark [class$="__subtitle"],
.gs-inverse--dark [class$="__search-label"] {
  color: #999 !important;
}

/* Internal borders (items, dividers) */
.gs-inverse--black [class$="__item"],
.gs-inverse--black [class$="__header"],
.gs-inverse--dark [class$="__item"],
.gs-inverse--dark [class$="__header"] {
  border-bottom-color: #333 !important;
}

/* Fact cards, guide cards, venue cards — dark card backgrounds */
.gs-inverse--black [class*="__fact"],
.gs-inverse--black [class*="-card"],
.gs-inverse--black [class*="__card"],
.gs-inverse--dark [class*="__fact"],
.gs-inverse--dark [class*="-card"],
.gs-inverse--dark [class*="__card"] {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #ccc !important;
}
.gs-inverse--dark [class*="__fact"],
.gs-inverse--dark [class*="-card"],
.gs-inverse--dark [class*="__card"] {
  background: #2a2a2a !important;
}

/* Card titles and strong text inside dark cards */
.gs-inverse--black [class*="-card"] [class$="__title"],
.gs-inverse--black [class*="__card"] [class$="__title"],
.gs-inverse--black [class*="__fact"] strong,
.gs-inverse--dark [class*="-card"] [class$="__title"],
.gs-inverse--dark [class*="__card"] [class$="__title"],
.gs-inverse--dark [class*="__fact"] strong {
  color: #fff !important;
}

/* Card tags */
.gs-inverse--black [class$="__tag"],
.gs-inverse--dark [class$="__tag"] {
  color: #999 !important;
}

/* Links — override GP global a:hover within dark inverse blocks */
.gs-inverse--black a,
.gs-inverse--black a:visited,
.gs-inverse--black a:active,
.gs-inverse--black a:focus,
.gs-inverse--dark a,
.gs-inverse--dark a:visited,
.gs-inverse--dark a:active,
.gs-inverse--dark a:focus {
  color: #fff !important;
  text-decoration: none !important;
}
.gs-inverse--black a:hover,
.gs-inverse--dark a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

/* Default pills in dark context — white border, white text */
.gs-inverse--black .gs-pill,
.gs-inverse--dark .gs-pill {
  color: #fff !important;
  background: transparent !important;
  border-color: #fff !important;
}
.gs-inverse--black .gs-pill:hover,
.gs-inverse--dark .gs-pill:hover {
  background: #fff !important;
  color: #111 !important;
}

/* Dark pills in dark context — white bg, dark text */
.gs-inverse--black .gs-pill--dark,
.gs-inverse--black a.gs-pill--dark,
.gs-inverse--dark .gs-pill--dark,
.gs-inverse--dark a.gs-pill--dark {
  background: #fff !important;
  color: #111 !important;
}
.gs-inverse--black .gs-pill--dark:hover,
.gs-inverse--black a.gs-pill--dark:hover,
.gs-inverse--dark .gs-pill--dark:hover,
.gs-inverse--dark a.gs-pill--dark:hover {
  background: #ccc !important;
  color: #111 !important;
}

/* Feature block left/right divider */
.gs-inverse--black .gs-feature__left,
.gs-inverse--dark .gs-feature__left {
  border-right-color: #333 !important;
}

/* Trust items (hero) */
.gs-inverse--black .gs-hero__trust-item,
.gs-inverse--dark .gs-hero__trust-item {
  color: #ccc !important;
}
.gs-inverse--black .gs-hero__trust-icon,
.gs-inverse--dark .gs-hero__trust-icon {
  color: #fff !important;
}

/* Venue status badges — preserve functional colours */
.gs-inverse--black .gs-vs-badge--open,
.gs-inverse--dark .gs-vs-badge--open { background: #e8f5e9 !important; color: #2e7d32 !important; }
.gs-inverse--black .gs-vs-badge--closed,
.gs-inverse--dark .gs-vs-badge--closed { background: #fbe9e7 !important; color: #c62828 !important; }

/* Region venue count badges */
.gs-inverse--black [class$="__count"],
.gs-inverse--dark [class$="__count"] {
  background: #333 !important;
  color: #fff !important;
}

/* Ticker in dark mode */
.gs-inverse--black .gs-ticker__item,
.gs-inverse--dark .gs-ticker__item {
  color: #ccc !important;
}
.gs-inverse--black .gs-ticker__sep,
.gs-inverse--dark .gs-ticker__sep {
  color: #555 !important;
}

/* Duo numbered items */
.gs-inverse--black .gs-duo-item__rank,
.gs-inverse--dark .gs-duo-item__rank {
  color: #555 !important;
}
.gs-inverse--black .gs-duo-item__name,
.gs-inverse--dark .gs-duo-item__name {
  color: #fff !important;
}
.gs-inverse--black .gs-duo-item__info,
.gs-inverse--dark .gs-duo-item__info {
  color: #999 !important;
}

/* Duo column divider */
.gs-inverse--black .gs-duo__col + .gs-duo__col,
.gs-inverse--dark .gs-duo__col + .gs-duo__col {
  border-left-color: #333 !important;
}

/* ── LIGHT VARIANT — minimal overrides, just bg swap ── */
.gs-inverse--light {
  border-bottom-color: #ddd !important;
}
.gs-inverse--light [class$="__item"] {
  border-bottom-color: #ddd !important;
}
.gs-inverse--light [class*="__fact"],
.gs-inverse--light [class*="-card"],
.gs-inverse--light [class*="__card"] {
  background: #fff !important;
}