/* ==========================================================================
   GGDS — Design tokens (literal → semantic)
   RGB channel vars: use as rgb(var(--token)) or rgb(var(--token) / <alpha>).
   ========================================================================== */

:root {
  /* ----- Literal palette ----- */
  --palette-blue-400: 83 169 255;
  --palette-blue-500: 74 158 255;
  --palette-blue-700: 0 92 168;
  --palette-orange-500: 255 107 0;
  --palette-orange-600: 229 90 0;
  /* Cool blue-washed neutrals (ice / mist) — pair with brand blue, not flat office grey */
  --palette-neutral-0: 255 255 255;
  --palette-neutral-100: 236 242 249; /* #ECF2F9 — card / surface mist */
  --palette-neutral-200: 211 222 236; /* #D3DEEC — cool border */
  --palette-neutral-400: 148 158 174; /* #949EAE — muted on dark */
  --palette-neutral-500: 86 98 116;   /* #566274 — muted on light */
  --palette-neutral-800: 38 45 58;    /* #262D3A */
  --palette-neutral-900: 18 23 32;    /* #121720 */
  --palette-neutral-950: 11 15 23;    /* #0B0F17 */
  --palette-green-500: 34 197 94;
  --palette-amber-500: 245 158 11;
  --palette-red-500: 239 68 68;
  --palette-cyan-400: 34 211 238;

  /* ----- Semantic color ----- */
  --color-bg: var(--palette-neutral-950);
  --color-surface: var(--palette-neutral-900);
  --color-surface-elevated: 26 32 42;
  --color-ink: var(--palette-neutral-0);
  --color-ink-muted: var(--palette-neutral-400);
  --color-ink-inverse: var(--palette-neutral-950);
  --color-brand: var(--palette-blue-400);
  --color-accent: var(--palette-orange-500);
  --color-border: var(--palette-neutral-800);
  --color-focus: var(--palette-blue-400);

  /* Vertical / section accents (pillar tints) */
  --color-vertical-news: var(--palette-blue-400);
  --color-vertical-guides: var(--palette-blue-400);
  --color-vertical-concours: var(--palette-orange-500);
  --color-vertical-videos: var(--palette-red-500);
  --color-vertical-breves: var(--palette-amber-500);

  /* Status */
  --color-success: var(--palette-green-500);
  --color-warning: var(--palette-amber-500);
  --color-danger: var(--palette-red-500);
  --color-info: var(--palette-cyan-400);
  --color-live: var(--palette-red-500);

  /* Guide / section helpers */
  --color-guide-accent: var(--color-brand);
  --color-guide-accent-contrast: 7 17 28;
  --color-section-tint: var(--color-brand);

  /*
   * Legacy aliases (compat — do not remove in Phase A)
   * ----------------------------------------------------
   * --accent-primary   → brand blue   (--color-brand)
   * --accent-secondary → true orange  (--color-accent)  CTA / gaming accents
   * --accent-orange    → true orange  (--color-accent)  FIXED (was wrongly blue)
   * --background       → --color-bg
   * --card-bg          → --color-surface
   * --text-primary     → --color-ink
   * --text-secondary   → --color-ink-muted
   * --border-color     → --color-border
   * --guide-accent     → --color-guide-accent
   * --section-tint     → --color-section-tint
   *
   * Correct roles:
   *   brand blue  = --color-brand / --accent-primary
   *   true orange = --color-accent / --accent-secondary / --accent-orange
   *
   * Phase B: templates that used --accent-orange for brand chrome (nav, links,
   * hovers) must switch to --color-brand / --accent-primary.
   */
  --background: var(--color-bg);
  --card-bg: var(--color-surface);
  --accent-primary: var(--color-brand);
  --accent-secondary: var(--color-accent);
  --accent-orange: var(--color-accent);
  --guide-accent: var(--color-guide-accent);
  --guide-accent-contrast: var(--color-guide-accent-contrast);
  --section-tint: var(--color-section-tint);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --border-color: var(--color-border);

  /* ----- Spacing (4px base) ----- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 1.75rem;   /* 28 */
  --space-8: 2rem;      /* 32 */
  --space-9: 2.25rem;   /* 36 */
  --space-10: 2.5rem;   /* 40 */
  --space-11: 2.75rem;  /* 44 */
  --space-12: 3rem;     /* 48 */
  --space-14: 3.5rem;   /* 56 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */

  /* ----- Layout ----- */
  --page-max: 1440px;
  --page-gutter-sm: var(--space-6);   /* 24px — px-6 */
  --page-gutter-md: var(--space-8);   /* 32px — md:px-8 */
  --page-gutter-lg: var(--space-12);  /* 48px — lg:px-12 */
  --section-y: var(--space-14);
  --header-offset: 5rem;
  --sticky-top: var(--header-offset);
  --site-header-offset: var(--header-offset); /* legacy alias */

  /* ----- Radius ----- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 9999px;
  --radius: var(--radius-md); /* legacy alias */

  /* ----- Shadow (border-first depth on dark; soft lift for elevated) ----- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.45);

  /* ----- Z-index ----- */
  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 20;
  --z-header: 50;
  --z-overlay: 80;
  --z-lightbox: 100;

  /* ----- Motion ----- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ----- Typography presets (Inter retained) ----- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-display-size: clamp(2.25rem, 4vw, 3.5rem);
  --text-display-line: 1.1;
  --text-display-weight: var(--font-weight-bold);

  --text-headline-size: clamp(1.75rem, 3vw, 2.5rem);
  --text-headline-line: 1.15;
  --text-headline-weight: var(--font-weight-bold);

  --text-title-size: 1.25rem;
  --text-title-line: 1.3;
  --text-title-weight: var(--font-weight-semibold);

  --text-body-size: 1rem;
  --text-body-line: 1.6;
  --text-body-weight: var(--font-weight-regular);

  --text-meta-size: 0.875rem;
  --text-meta-line: 1.4;
  --text-meta-weight: var(--font-weight-regular);

  --text-label-size: 0.75rem;
  --text-label-line: 1.3;
  --text-label-weight: var(--font-weight-medium);

  /* Aspect ratios (media modules) */
  --aspect-feed: 16 / 10; /* listing / feed-card media */
  --aspect-card: var(--aspect-feed);
  --aspect-video: 16 / 9;
  --aspect-hero: 21 / 9;
  --aspect-thumb: 4 / 3;

  /* Page chrome — secondary / archive heroes clear the sticky header */
  --page-hero-pad-top: calc(var(--header-offset) + var(--space-10));
  --page-hero-pad-bottom: var(--space-10);
  --page-panel-pad: var(--space-6);
  --page-panel-pad-md: var(--space-8);

  /*
   * Hex brand marks (pointy-top, logo language)
   * -------------------------------------------
   * Logo badge hexes are pointy-top (vertex up/down, vertical side walls).
   * Regular pointy-top bounding box: width / height = √3 / 2.
   * --gg-hex-size-* is the vertex-to-vertex height; width = height * aspect.
  * Roles:
 *   outline blue  → section sigils / dividers / corner ticks (chrome)
 *   filled blue   → small interactive marks (video play, carousel nav)
 *   filled orange → sigil nucleus / contest CTA pips only
 * Do not use for content frames, card shapes, or tiled backgrounds.
   */
  --gg-hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --gg-hex-aspect: 0.86602540378; /* √3 / 2 — regular pointy-top box */
  --gg-hex-size-glyph: 1.25rem;   /* 20px — general chrome / dividers */
  --gg-hex-size-sigil: 1.875rem;  /* 30px — section-header brand lockup */
  --gg-hex-size-tick: 0.875rem;   /* 14px — corner ticks */
  --gg-hex-size-badge: 0.5rem;    /* 8px  — contest / CTA pip */
  --gg-hex-size-play: 4.5rem;     /* 72px height — video play control */
  --gg-hex-size-nav: 2.75rem;     /* 44px height — carousel prev/next hit target */
  --gg-hex-stroke: 2px;
  --gg-hex-color: var(--color-brand);
  --gg-hex-accent: var(--color-accent);
}

@media (min-width: 640px) {
  :root {
    --header-offset: 6rem;
    --sticky-top: var(--header-offset);
    --site-header-offset: var(--header-offset);
  }
}

.light-mode {
  /* Soft ice page + mist cards; elevated stays pure white for clear lift */
  --color-bg: 246 249 253; /* #F6F9FD */
  --color-surface: var(--palette-neutral-100);
  --color-surface-elevated: 255 255 255;
  --color-ink: var(--palette-neutral-950);
  --color-ink-muted: var(--palette-neutral-500);
  --color-ink-inverse: var(--palette-neutral-0);
  --color-brand: var(--palette-blue-700);
  --color-accent: var(--palette-orange-600);
  --color-border: var(--palette-neutral-200);
  --color-focus: var(--palette-blue-700);
  --color-guide-accent: var(--color-brand);
  --color-guide-accent-contrast: var(--palette-neutral-0);
  --color-section-tint: var(--color-brand);

  --color-vertical-news: var(--palette-blue-700);
  --color-vertical-guides: var(--palette-blue-700);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

  /* Legacy aliases re-point via semantic vars above (inherited aliases still work).
     Re-declare channel-consuming aliases that templates read directly. */
  --background: var(--color-bg);
  --card-bg: var(--color-surface);
  --accent-primary: var(--color-brand);
  --accent-secondary: var(--color-accent);
  --accent-orange: var(--color-accent);
  --guide-accent: var(--color-guide-accent);
  --guide-accent-contrast: var(--color-guide-accent-contrast);
  --section-tint: var(--color-section-tint);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --border-color: var(--color-border);
}

.section-tint {
  background: rgb(var(--section-tint) / 0.08);
}

/* ==========================================================================
   Typography preset helpers
   ========================================================================== */

.gg-text-display {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  font-weight: var(--text-display-weight);
}

.gg-text-headline {
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-line);
  font-weight: var(--text-headline-weight);
}

.gg-text-title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-line);
  font-weight: var(--text-title-weight);
}

.gg-text-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
}

.gg-text-meta {
  font-size: var(--text-meta-size);
  line-height: var(--text-meta-line);
  font-weight: var(--text-meta-weight);
  color: rgb(var(--color-ink-muted));
}

.gg-text-label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Layout utilities (Guardian-style containers)
   ========================================================================== */

.gg-shell {
  box-sizing: border-box;
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter-sm);
}

@media (min-width: 768px) {
  .gg-shell {
    padding-inline: var(--page-gutter-md);
  }
}

@media (min-width: 1024px) {
  .gg-shell {
    padding-inline: var(--page-gutter-lg);
  }
}

/* Chrome shell — progressive gutters so header/nav never get 240px side padding at lg. */
.gg-shell--chrome {
  width: 100%;
  max-width: none;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .gg-shell--chrome {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 768px) {
  .gg-shell--chrome {
    padding-inline: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .gg-shell--chrome {
    padding-inline: var(--space-16);
  }
}

@media (min-width: 1280px) {
  .gg-shell--chrome {
    padding-inline: var(--space-24);
  }
}

@media (min-width: 1536px) {
  .gg-shell--chrome {
    padding-inline: var(--page-gutter-lg);
  }
}

.gg-section {
  padding-block: var(--section-y);
}

.gg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.gg-stack--sm {
  gap: var(--space-3);
}

.gg-stack--lg {
  gap: var(--space-10);
}

/* ==========================================================================
   Base — global typography & form defaults
   ========================================================================== */

* {
  border-color: rgb(var(--border-color));
}

html {
  scroll-behavior: smooth;
}

body.site {
  background-color: rgb(var(--background));
  color: rgb(var(--text-primary));
  font-family: var(--font-sans);
}

.site :focus-visible {
  outline: 3px solid rgb(var(--color-focus)) !important;
  outline-offset: 3px !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-lightbox);
  padding: 0.75rem 1rem;
  color: #fff;
  background: rgb(var(--color-brand));
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

h1 {
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

h2 {
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

h3 {
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

p {
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

button {
  font-weight: var(--font-weight-medium);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 56px !important;
}

@media (prefers-reduced-motion: reduce) {
  html,
  .scroll-smooth {
    scroll-behavior: auto !important;
  }

  .site *,
  .site *::before,
  .site *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .newsletter-logo,
  .hero-carousel .hero-slide-content {
    animation: none !important;
  }

  :is(
    .news-card,
    .listing-card,
    .reco-card-large,
    .reco-card-small,
    .video-card,
    .guide-card,
    .concours-card,
    .team-card,
    .podcast-card,
    .feed-card
  ):hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Page heroes — archives, search, static pages (header-aware chrome)
   ========================================================================== */

.gg-page-hero {
  position: relative;
  padding-bottom: var(--page-hero-pad-bottom);
}

/* Use when <main> does not already clear the sticky header (archives, designed secondary heroes). */
.gg-page-hero--offset {
  padding-top: var(--page-hero-pad-top);
}

.gg-page-hero--tint {
  background: rgb(var(--section-tint) / 0.08);
}

.gg-page-hero__badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  background: rgb(var(--color-brand));
  color: #fff;
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
}

.gg-page-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.gg-page-hero__lede {
  margin: 0;
  max-width: 42rem;
  color: rgb(var(--color-ink-muted));
  font-size: 1.0625rem;
  line-height: 1.6;
}

.gg-page-panel {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0;
  padding: var(--page-panel-pad);
}

@media (min-width: 768px) {
  .gg-page-panel {
    padding: var(--page-panel-pad-md);
  }
}

/* Search hero — loaded early because search pages skip WP Rocket bundles. */

.search-hero {
  position: relative;
  padding-top: var(--space-6);
  padding-bottom: var(--space-2);
}

.search-hero__badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  background: rgb(var(--color-brand));
  color: #fff;
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
}

.search-hero__title {
  margin: 0 0 1.25rem;
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  font-weight: var(--text-display-weight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.search-hero__count {
  margin: 0 0 2rem;
  color: rgb(var(--color-ink-muted));
  font-size: var(--text-meta-size);
}

.search-hero__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 42rem;
}

.search-hero__input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0;
  color: rgb(var(--color-ink));
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.search-hero__input:focus {
  outline: none;
  border-color: rgb(var(--color-focus));
}

.search-hero__submit {
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  background: rgb(var(--color-accent));
  color: #fff;
  border: 2px solid rgb(var(--color-accent));
  border-radius: 0;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.search-hero__submit:hover,
.search-hero__submit:focus-visible {
  background: rgb(var(--palette-orange-600));
  border-color: rgb(var(--palette-orange-600));
}

/* Empty / 404 state */
.gg-empty-state {
  position: relative;
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
  text-align: center;
}

.gg-empty-state__mark {
  --gg-hex-size: var(--gg-hex-size-sigil);
  color: rgb(var(--color-brand));
}

.gg-empty-state__code {
  margin: 0 0 var(--space-4);
  color: rgb(var(--color-brand));
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  font-weight: var(--text-display-weight);
  letter-spacing: -0.03em;
}

.gg-empty-state__title {
  margin: 0 0 var(--space-8);
  color: rgb(var(--color-ink-muted));
  font-size: var(--text-title-size);
  font-weight: var(--font-weight-medium);
}