/*
Theme Name:        SlotRover
Theme URI:         https://slotrover.com
Author:            Molty
Author URI:        https://slotrover.com
Description:       Hand-coded WordPress theme for SlotRover — a UK slot-only affiliate review site operating in the UKGC market. Tokens-driven brutalist editorial design with REST API + n8n automation hooks. No page builders, no block patterns, no third-party frameworks. Companion to the slot and theme CPTs and the provider / feature / attribute taxonomies.
Version:           0.9.99
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       slotrover
Tags:              custom-colors, custom-menu, editor-style, full-width-template, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   SlotRover brand tokens — single source of truth.
   Mirrors the Lovable prototype (src/styles.css). OKLCH values are canonical;
   the HEX values quoted in PROJECT_BRIEF.md are approximations for reference.
   Container vars, font-size baseline, and brutalist offset-shadow conventions
   are documented inline so inc/ partials and assets/css/main.css can rely on
   them without redefining anything.
--------------------------------------------------------------------------- */

:root {
  /* Brand — OKLCH (canonical) */
  --cherry:      oklch(0.566 0.215 27.5);
  --cherry-dark: oklch(0.48  0.21  27.5);
  --gold:        oklch(0.82  0.165 80);
  --felt:        oklch(0.38  0.09  158);
  --cream:       oklch(0.972 0.012 85);
  --cream-100:   oklch(0.94  0.018 85);
  --charcoal:    oklch(0.18  0.005 0);
  --white:       oklch(1 0 0);

  /* Status */
  --success: oklch(0.62 0.17 145);
  --warning: oklch(0.78 0.16 75);
  --error:   oklch(0.6  0.22 27);
  --info:    oklch(0.7  0.13 230);

  /* Semantic aliases */
  --background:           var(--cream);
  --foreground:           var(--charcoal);
  --card:                 var(--white);
  --card-foreground:      var(--charcoal);
  --primary:              var(--cherry);
  --primary-foreground:   var(--white);
  --secondary:            var(--cream-100);
  --secondary-foreground: var(--charcoal);
  --muted:                var(--cream-100);
  --muted-foreground:     oklch(0.45 0.015 60);
  --accent:               var(--gold);
  --accent-foreground:    var(--charcoal);
  --destructive:          var(--error);
  --destructive-foreground: var(--white);
  --border:               oklch(0.78 0.015 60);
  --input:                oklch(0.88 0.012 80);
  --ring:                 var(--cherry);

  /* Typography */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --container-max:         1280px;     /* matches Lovable's max-w-[1280px] (Stage 1 — was 880 in Phase 2 brief) */
  --container-padding-x:   1rem;       /* mobile gutter — matches Lovable's px-4 */
  --container-padding-x-md: 2rem;      /* tablet+ gutter — matches Lovable's lg:px-8 */

  /* Geometry — sharp brutalist surfaces */
  --radius: 0;

  /* Brutalist offset shadows — paired with --radius: 0. Soft / blur shadows
     are NOT used anywhere on the site; only these flat offset stacks. */
  /* Brutalist offset shadows REMOVED in 0.3.2 to match live Lovable site.
     The "newspaper" look these created was rejected during the Lovable
     phase. Variables are kept (resolved to `none`) so the cascade of
     `box-shadow: var(--shadow-offset)` consumers in main.css + style.css
     auto-neutralises without touching every rule. If shadows ever return,
     change these two values back and every consumer picks them up. */
  --shadow-offset:       none;
  --shadow-offset-hover: none;
}

/* ---------------------------------------------------------------------------
   Reset + base
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { border-color: var(--border); }

html {
  font-family: var(--font-sans);
  /* Sitewide ~15% type-scale reduction: 1rem = ~13.6px. All rem-based sizing
     inherits this. Headings below are declared in px to avoid double-scaling. */
  font-size: 85%;
  scrollbar-width: thin;
  scrollbar-color: var(--cherry) var(--cream-100);
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--cherry);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--cherry-dark); }

/* ---------------------------------------------------------------------------
   Heading scale — px so the 85% root reduction doesn't compound, AND
   marked !important so individual section heading rules (e.g.
   .uk-reg-section__title { font-size: 1.875rem }) don't drift back
   above the design-system sizes. Matches Lovable's styles.css h1-h4
   block, which uses the same !important strategy to clamp Tailwind
   text-Xrem classes site-wide. Desktop / mobile sizes are identical
   to Lovable's numbers (24/20 for h2, 18/16 for h3, 15/13 for h4).
--------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 0.5em;
}

h1, .h1 {
  font-size: clamp(26px, 3.2vw, 32px) !important;
  font-weight: 800 !important;
}
h2, .h2 { font-size: 24px !important; font-weight: 700 !important; }
h3, .h3 { font-size: 18px !important; font-weight: 700 !important; }
h4, .h4 { font-size: 15px !important; font-weight: 600 !important; }

@media (max-width: 767px) {
  h1, .h1 { font-size: clamp(22px, 6vw, 28px) !important; }
  h2, .h2 { font-size: 20px !important; }
  h3, .h3 { font-size: 16px !important; }
  h4, .h4 { font-size: 13px !important; }
}

/* ---------------------------------------------------------------------------
   Accessibility — focus ring uses cherry; 4px outline radius matches Lovable
   (the brand's --radius: 0 rule applies to surfaces, not focus indicators).
--------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--cherry);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Honour reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Branded scrollbar — cherry thumb with gold inner edge on cream track.
--------------------------------------------------------------------------- */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: var(--cream-100);
  border-left: 1px solid color-mix(in oklab, var(--charcoal) 10%, transparent);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cherry), var(--cherry-dark));
  border: 2px solid var(--cream-100);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cherry-dark), var(--cherry));
}
::-webkit-scrollbar-corner { background: var(--cream-100); }

/* ---------------------------------------------------------------------------
   Layout primitives
--------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--container-padding-x-md); }
}

/* Skip-link target for keyboard users (header.php places #content). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem; top: 1rem;
  width: auto; height: auto;
  padding: 0.5rem 1rem;
  background: var(--charcoal);
  color: var(--white);
  z-index: 9999;
}

/* ---------------------------------------------------------------------------
   Utilities
--------------------------------------------------------------------------- */

/* Stat numerals — applied to RTPs, max wins, RoverScore values, table figures. */
.font-mono-stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Visually hidden but available to assistive tech. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}

/* Canonical card framing — was "brutalist offset shadow" until 0.3.2, which
   was rejected globally on Lovable for its newspaper aesthetic. The utility
   classes are kept as harmless no-ops via the neutralised `--shadow-offset`
   vars (so 4 PHP templates referencing `shadow-offset shadow-offset-hover`
   don't need to be edited). The hover-translate lift is preserved for
   subtle interactivity feedback. */
.shadow-offset       { box-shadow: var(--shadow-offset); }
.shadow-offset-hover { transition: transform 200ms ease, box-shadow 200ms ease; }
.shadow-offset-hover:hover {
  box-shadow: var(--shadow-offset-hover);
  transform: translate(-2px, -2px);
}

/* ---------------------------------------------------------------------------
   Mobile table scroll — per PROJECT_BRIEF SlottyHouse pattern.
--------------------------------------------------------------------------- */

table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
th { font-weight: 600; background: var(--cream-100); }

/* ---------------------------------------------------------------------------
   WordPress block-editor reset — neutralise default block styles we don't use.
   Comments are disabled site-wide so no comment-form styling is provided.
--------------------------------------------------------------------------- */

figure { margin: 0; }
blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--cherry);
  background: var(--cream-100);
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}