/*
 * 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;
  padding: 32px var(--ccs-margin-mobile);
}
@media (min-width: 768px) {
  .ccs-rev__container { padding: 48px var(--ccs-margin-mobile); }
}

/* 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. Same for the auto-injected sf-author-box at the
   bottom of pages (also redundant when the V2 byline is in the pagehead). */
body.ccs-rev-fullwidth header.entry-header,
body.ccs-rev-fullwidth .sf-author-box {
  display: none !important;
}

/* Nav font fallback. GP customizer controls size/weight/spacing — this only
   tells the browser to prefer Hanken Grotesk via the CSS variable. */
body.ccs-rev-fullwidth .main-navigation,
body.ccs-rev-fullwidth .main-navigation a,
body.ccs-rev-fullwidth .main-navigation .menu-toggle {
  font-family: var(--ccs-font-display);
}

/* Submenu current-item readability fix — GP's default for
   `subnavigation_background_current_color` is dark grey `#4f4f4f` which
   renders dark purple text on dark grey = unreadable. Override here only,
   so the customizer's stored colours stay intact and the user can change
   them via Customizer if they want. */
body.ccs-rev-fullwidth .main-navigation .main-nav ul ul li[class*="current-menu-"] > a,
body.ccs-rev-fullwidth .main-navigation .main-nav ul ul li[class*="current-menu-"] > a:hover,
body.ccs-rev-fullwidth .main-navigation .main-nav ul ul li[class*="current-menu-"] > a:focus {
  background-color: var(--ccs-primary-fixed, #f1dbff) !important;
  color: var(--ccs-primary, #310058) !important;
}
body.ccs-rev-fullwidth .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
body.ccs-rev-fullwidth .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
body.ccs-rev-fullwidth .main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a {
  background-color: var(--ccs-surface-container-low, #f3f4f5) !important;
  color: var(--ccs-primary, #310058) !important;
}
@media (min-width: 1024px) {
  body.ccs-rev-fullwidth .main-navigation .main-nav ul li a {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
}

/* Desktop logo cap — GP's Customizer logo_width setting isn't being respected
   on the live site (likely because the Mobile Header feature also handles
   logo sizing). Force a sensible max-height so the nav fits inline at typical
   viewports instead of wrapping. Keeps natural aspect ratio. */
@media (min-width: 1024px) {
  body.ccs-rev-fullwidth .site-logo img,
  body.ccs-rev-fullwidth img.header-image.is-logo-image {
    max-height: 60px;
    width: auto;
  }
}

/* Header/logo sizing on desktop is controlled by GP's Customizer. The rules
   below ONLY kick in below 1024px to compact the mobile/tablet header into a
   single row: small logo on the left, hamburger Menu on the right. */
@media (max-width: 1023px) {
  /* Solid white background on the mobile/tablet header + sticky variant — the
     default lets content show through and reads as a mess when scrolling. */
  body.ccs-rev-fullwidth .site-header,
  body.ccs-rev-fullwidth .main-navigation.navigation-stick,
  body.ccs-rev-fullwidth .has-sticky-branding.main-navigation.navigation-stick,
  body.ccs-rev-fullwidth #sticky-navigation {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  /* GP creates a #sticky-placeholder to reserve space when the nav becomes
     fixed. On mobile/tablet we've absolute-positioned the nav (hamburger only,
     visually zero-height) so the placeholder shouldn't reserve any vertical
     space. Without this override there's a ~150px blank gap between header
     and content when the sticky activates. */
  body.ccs-rev-fullwidth #sticky-placeholder,
  body.ccs-rev-fullwidth .sticky-navigation-logo {
    height: 0 !important;
    display: none !important;
  }
  body.ccs-rev-fullwidth .main-navigation,
  body.ccs-rev-fullwidth .main-navigation.navigation-stick {
    /* Force zero contribution to flow height — the .menu-toggle is positioned
       absolutely so it doesn't need its own row. */
    min-height: 0 !important;
    height: auto !important;
  }
  body.ccs-rev-fullwidth .site-header .inside-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    gap: 12px;
  }
  /* Force logo to the LEFT — GP's mobile header default centers .site-logo
     via text-align/margin auto. */
  body.ccs-rev-fullwidth .site-header,
  body.ccs-rev-fullwidth .site-header .inside-header {
    text-align: left !important;
  }
  body.ccs-rev-fullwidth .site-header .site-logo {
    margin: 0 !important;
    margin-right: auto !important;
    flex: 0 0 auto;
    align-self: center;
  }
  body.ccs-rev-fullwidth .site-header .site-logo img,
  body.ccs-rev-fullwidth .site-header img.header-image {
    height: 44px !important;
    width: auto !important;
    max-width: 200px;
  }
  /* Pull the nav into the header bar so the hamburger sits to the right of
     the logo on the same row. */
  body.ccs-rev-fullwidth .main-navigation {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent !important;
    width: auto !important;
    z-index: 5;
  }
  body.ccs-rev-fullwidth .main-navigation .inside-navigation {
    padding: 0 !important;
    background: transparent !important;
  }
  body.ccs-rev-fullwidth .main-navigation .menu-toggle {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--ccs-primary) !important;
    background: transparent !important;
    font-size: 24px;
  }
  /* Site header gets relative positioning so the absolutely-positioned nav
     anchors to it. */
  body.ccs-rev-fullwidth .site-header {
    position: relative;
  }
  /* When the menu is toggled open, expand it as a full-width drawer below the
     header bar instead of staying tucked in the corner. */
  body.ccs-rev-fullwidth .main-navigation.toggled {
    position: static;
    width: 100% !important;
    background: #fff !important;
    border-top: 1px solid var(--ccs-outline-variant);
  }
  body.ccs-rev-fullwidth .main-navigation.toggled .inside-navigation {
    padding: 8px 16px !important;
  }
  body.ccs-rev-fullwidth .main-navigation.toggled .menu-toggle {
    display: none;
  }
  body.ccs-rev-fullwidth .main-navigation.toggled .main-nav ul {
    display: block !important;
  }
}

/* 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;
}