/*
 * CCS review redesign — design tokens
 * Translated from the Stitch (Google) tailwind.config for the comparison /
 * single-review pages. All component CSS uses these custom properties.
 */
:root {
  /* Colour — Material Design 3 palette from Stitch */
  --ccs-primary: #310058;
  --ccs-on-primary: #ffffff;
  --ccs-primary-container: #4c127c;
  --ccs-on-primary-container: #bb84ee;
  --ccs-primary-fixed: #f1dbff;
  --ccs-primary-fixed-dim: #deb7ff;
  --ccs-on-primary-fixed: #2d0050;
  --ccs-on-primary-fixed-variant: #602b90;

  --ccs-secondary: #775a00;
  --ccs-on-secondary: #ffffff;
  --ccs-secondary-container: #fecb45;
  --ccs-on-secondary-container: #715600;
  --ccs-secondary-fixed: #ffdf99;
  --ccs-secondary-fixed-dim: #f2bf3b;
  --ccs-on-secondary-fixed: #251a00;
  --ccs-on-secondary-fixed-variant: #5a4300;

  --ccs-tertiary: #301a00;
  --ccs-on-tertiary: #ffffff;
  --ccs-tertiary-container: #4d2d00;
  --ccs-on-tertiary-container: #da8b1b;
  --ccs-tertiary-fixed: #ffddba;
  --ccs-tertiary-fixed-dim: #ffb866;
  --ccs-on-tertiary-fixed: #2b1700;
  --ccs-on-tertiary-fixed-variant: #673d00;

  --ccs-error: #ba1a1a;
  --ccs-on-error: #ffffff;
  --ccs-error-container: #ffdad6;
  --ccs-on-error-container: #93000a;

  --ccs-background: #f8f9fa;
  --ccs-on-background: #191c1d;
  --ccs-surface: #f8f9fa;
  --ccs-on-surface: #191c1d;
  --ccs-surface-bright: #f8f9fa;
  --ccs-surface-dim: #d9dadb;
  --ccs-surface-variant: #e1e3e4;
  --ccs-on-surface-variant: #4c4451;
  --ccs-surface-container-lowest: #ffffff;
  --ccs-surface-container-low: #f3f4f5;
  --ccs-surface-container: #edeeef;
  --ccs-surface-container-high: #e7e8e9;
  --ccs-surface-container-highest: #e1e3e4;
  --ccs-inverse-surface: #2e3132;
  --ccs-inverse-on-surface: #f0f1f2;
  --ccs-inverse-primary: #deb7ff;

  --ccs-outline: #7d7482;
  --ccs-outline-variant: #cec3d2;
  --ccs-surface-tint: #7945aa;

  /* Accents not in the MD3 palette but used by the Stitch design */
  --ccs-cta-orange: #f7a335;
  --ccs-pros: #16a34a;       /* tailwind green-600 */
  --ccs-cons: #dc2626;       /* tailwind red-600 */
  --ccs-badge-bg: #f3effa;   /* literal used in design for trust pills */

  /* Type */
  --ccs-font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ccs-font-label: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing */
  --ccs-base: 8px;
  --ccs-margin-mobile: 16px;
  --ccs-gutter: 24px;
  --ccs-card-padding: 20px;
  /* Inner content cap. Wider than the design's 1200px so the page feels
     spacious like the live site, but capped so component proportions stay
     sensible (hero offer panel doesn't stretch its CTAs miles from the copy).
     The body grey bg extends edge-to-edge behind this. */
  --ccs-container-max: 1700px;

  /* Radius */
  --ccs-radius-sm: 2px;
  --ccs-radius-lg: 4px;
  --ccs-radius-xl: 8px;
  --ccs-radius-full: 12px;

  /* Elevation */
  --ccs-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
  --ccs-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --ccs-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Page-wide scope for the redesign — keeps these styles from leaking into the
   legacy review template when ?v=new is not set. NB: no background here on
   purpose — we let the GP body grey (#f7f8f9) show through so the page has the
   same 'lifted' feel as the legacy template, with white component cards
   floating on top. */
.ccs-rev {
  font-family: var(--ccs-font-display);
  color: var(--ccs-on-surface);
  background: transparent;
}
.ccs-rev,
.ccs-rev * { box-sizing: border-box; }

.ccs-rev__container {
  max-width: var(--ccs-container-max);
  margin: 0 auto;
  /* Top padding is tight because the breadcrumbs + Jump-to-Casinos pill above
     the container already provide their own spacing; we used to stack a 32-48px
     padding here on top of that and the gap above the pagehead felt huge. */
  padding: 8px var(--ccs-margin-mobile) 32px;
}
@media (min-width: 768px) {
  .ccs-rev__container { padding: 12px var(--ccs-margin-mobile) 48px; }
}

/* Section spacing — every direct child of the container gets bottom margin */
.ccs-rev__container > * + * { margin-top: 48px; }
@media (min-width: 768px) {
  .ccs-rev__container > * + * { margin-top: 64px; }
}

/* ---- Full-width override (body.ccs-rev-fullwidth) ----
   GeneratePress's dynamic CSS loads after ours and applies .inside-article
   padding via lower-specificity selectors; !important is the cleanest way to
   beat it without re-ordering the global enqueue chain. Scope is body-class
   gated so nothing else on the site is touched. */
body.ccs-rev-fullwidth {
  /* Explicit grey body bg so the page has the same 'lifted' feel as the legacy
     template even if a plugin overrides GP's --base-2. */
  background: #f7f8f9 !important;
}
body.ccs-rev-fullwidth .inside-article,
body.ccs-rev-fullwidth article.ccs-product-detail,
body.ccs-rev-fullwidth article.ccs-attribute-page,
body.ccs-rev-fullwidth .entry-content,
body.ccs-rev-fullwidth.one-container .site-content,
body.ccs-rev-fullwidth.one-container .inside-content,
body.ccs-rev-fullwidth.one-container .container {
  /* GP paints .one-container .container white via --base-3 — that was hiding
     the grey body bg behind a wall of white. Force transparent so the grey
     shows through edge-to-edge. .ccs-attribute-page is the comparison-page
     article class (review pages use .ccs-product-detail). */
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.ccs-rev-fullwidth #primary,
body.ccs-rev-fullwidth #content,
body.ccs-rev-fullwidth .site-content,
body.ccs-rev-fullwidth .content-area {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Outer site wrapper only — DON'T target every .grid-container; that hits the
   header (.inside-header) and nav (.inside-navigation) and blanks out the
   customizer-set padding. Just zero the outermost #page wrapper so content
   below can stretch full-width. */
body.ccs-rev-fullwidth #page.grid-container,
body.ccs-rev-fullwidth .site.grid-container.container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Hide the duplicate entry-header (page title H1) on V2 — the title now lives
   in the pagehead card. The sf-author-box at the bottom is intentionally
   rendered inside .ccs-author-box-wrap by the V2 the_content filter, so we
   no longer blanket-hide it. */
body.ccs-rev-fullwidth header.entry-header {
  display: none !important;
}

/* =============================================================
   NAV OVERRIDES — TEMPORARILY EXTRACTED 2026-05-14.
   Per user request the mobile + desktop nav goes back to GP Customizer
   so the menu can be styled there without my overrides fighting it.
   The original block (font-family fallback, dropdown current-item readability
   fix, desktop logo cap, mobile-header compaction, sticky-nav layout, and
   the toggled-drawer pattern) is preserved verbatim at:
     wp-content/themes/ccs/assets/css/disabled/nav-overrides.css.disabled
   Drop the contents back here (or rename + enqueue the file) to restore.
   ============================================================= */

/* Style the breadcrumb + Jump-to-Casinos strip when it appears on V2 pages so
   it sits cleanly above the pagehead instead of looking unstyled. */
body.ccs-rev-fullwidth .breadcrumbs {
  max-width: var(--ccs-container-max);
  margin: 16px auto 0;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--ccs-on-surface-variant);
  font-family: var(--ccs-font-display);
}
body.ccs-rev-fullwidth .breadcrumbs a { color: var(--ccs-primary); text-decoration: none; }
body.ccs-rev-fullwidth .breadcrumbs a:hover { text-decoration: underline; }
body.ccs-rev-fullwidth a.jump {
  /* Sibling of .breadcrumbs, not nested — center it on its own block so it
     sits below the breadcrumbs flush in the middle of the page. */
  display: block;
  width: max-content;
  margin: 8px auto 16px;
  padding: 6px 14px;
  background: var(--ccs-secondary-container);
  color: var(--ccs-on-secondary-container);
  border-radius: var(--ccs-radius-full);
  font-family: var(--ccs-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
body.ccs-rev-fullwidth a.jump:hover { filter: brightness(1.05); }

/* Hide the auto-injected featured-sites strip that sits above #content on
   every page. On V2 we re-render it inside .ccs-rev__container after the
   page-head so it follows the comparison-page stack (title → intro → meta →
   featured → comparison card). */
body.ccs-rev-fullwidth > #page > .featured-sites,
body.ccs-rev-fullwidth #page > .featured-sites:not(.ccs-rev-featured-wrap .featured-sites) {
  display: none !important;
}