/*
Theme Name:  Centsable
Theme URI:   https://centsable.ca
Description: Custom comparison theme for Centsable.ca. Pure PHP + ACF, no page builder.
Version:     1.0.0
Author:      Creative Strategic
Author URI:  https://creativestrategic.ca
Text Domain: centsable
*/

/* ── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
  --color-primary:    #113F32; /* 2026-07-10: aligned to the Alpine Crisp brand spec (Evergreen Forest) — was #1e3a5f (navy, inherited from possibal.ca). --color-accent (lime) intentionally left as-is pending a usage audit: the brand doc reserves orange EXCLUSIVELY for CTA buttons, and --color-accent is currently used in ~48 places sitewide, not all of them CTAs — swapping it wholesale risks putting orange somewhere the spec explicitly forbids (e.g. data badges). Flagged for Vic, see chat. */
  --color-accent:     #CFD9D6; /* 2026-07-10 (session 37): swapped from lime #90E64F per Vic's
     Adobe Color palette. This is the DECORATIVE/interactive-hover accent only —
     hover borders, link-active states, subtle highlights. NOT a button colour;
     see --color-cta below for that (matches cc-hub.css's existing, correct
     separation of these two concerns). */
  --color-cta:        #EA580C; /* Safety Orange — CTA buttons ONLY, never badges/borders/decoration */
  --color-cta-hover:  #C2410C;
  --color-primary-700: #0C2E25; /* darker forest shade, for gradients/hover states (matches cc-hub.css) */
  --color-secondary:  #93c5fd;
  --color-bg:         #f9fafb;
  --color-text:       #1f2937;
  --color-muted:      #6b7280;
  --color-border:     #e5e7eb;
  --color-white:      #ffffff;
  --color-navy-dark:  #122540;

  /* Alpine Crisp palette tokens (2026-07-03, scoped test page: /compare/best-credit-cards-canada/) */
  --color-alpine-forest:   #113F32; /* Evergreen Forest — brand anchor */
  --color-alpine-mint:     #F3F6F5; /* Mint Frost — alternating section bg */
  --color-alpine-orange:   #EA580C; /* Safety Orange — CTA-only accent */
  --color-alpine-ink:      #0F172A; /* Ink Slate — body/data typography */
  --color-alpine-border:   #E2E8F0; /* Light Slate Grey — structural borders */
  --color-nav-grey:        #4B5563; /* Nav scroll-state grey (site-wide nav) */
  --badge-positive-bg:     #DCFCE7;
  --badge-positive-text:   #14532D;
  --badge-negative-bg:     #FEE2E2;
  --badge-negative-text:   #7F1D1D;

  --max-width:        1200px;
  --container-pad:    0 24px; /* aligned to .cc-container's 24px scheme (session mobile-QA fix) — was 20px, caused a ~4-8px edge mismatch vs .cc-hub sections */
  --radius:           8px;
  --radius-lg:        12px;
  --shadow-sm:        0 1px 3px rgba(0,0,0,.08);
  --shadow-md:        0 4px 16px rgba(0,0,0,.10);

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--container-pad);
}
@media (max-width:767px){ :root{ --container-pad: 0 16px; } } /* matches .cc-hub's 16px mobile container-pad (session mobile-QA fix) */

.container--narrow { max-width: 800px; }

/* ── Typography ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.875rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
}

.btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn--primary   { background: var(--color-primary); color: var(--color-white); }
.btn--accent    { background: var(--color-cta); color: var(--color-white); }
.btn--accent:hover { background: var(--color-cta-hover); }
.btn--outline   { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn--sm        { padding: 7px 14px; font-size: .875rem; }
.btn--lg        { padding: 14px 28px; font-size: 1.0625rem; }

/* ── Site Header (Alpine Crisp nav redesign, 2026-07-03) ─────────────────────── */
/* Default/top-of-page: solid white background, Evergreen Forest logo/text/icons.
   On scroll, JS (footer.php) adds .is-scrolled to .site-header: background
   fades to a translucent/frosted white (backdrop-filter blur) and logo/nav
   text/icons switch to a mid-grey token for a "glass" scroll state, while
   staying AA-compliant against the translucent white. Replaces the earlier
   transparent-top/opaque-on-scroll version entirely (session 20) — not layered. */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(17,63,50,.08);
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.site-header.is-scrolled {
  /* 2026-07-03: increased transparency per Vic's explicit request — opacity
     dropped from .8 to .5 (more see-through frosted glass). This trades some
     contrast for the more transparent look; nav text still switches to the
     mid-grey token below and blur(11px) is retained so text stays legible
     (~3:1+ against typical page content) even though it no longer hits strict
     AA against arbitrary backgrounds. */
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  box-shadow: 0 2px 10px rgba(17,63,50,.10);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--container-pad);
}

/* 2026-07-03 fix pass: on desktop, .site-header__inner has 3 flex children
   (logo, .site-nav, .site-header__controls). space-between was pushing
   .site-nav (the middle child) into the centered gap instead of sitting
   left-justified right after the logo. Scoped to desktop/larger viewports
   only — mobile (<=640px) hides .site-nav entirely via the existing
   max-width:640px breakpoint below, so this never touches that stacked
   mobile nav. */
@media (min-width: 641px) {
  .site-header__inner { justify-content: flex-start; }
  .site-nav { margin-left: 28px; }
  .site-header__controls { margin-left: auto; }
}

.site-logo {
  display: flex;
  align-items: center;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-alpine-forest, #113F32);
  letter-spacing: -.5px;
  transition: color .25s ease;
}

.site-logo img {
  display: block;
  height: 32px;
  width: auto; /* maintain ~4:1 native aspect ratio, never stretch */
}

.site-header.is-scrolled .site-logo { color: var(--color-nav-grey, #4B5563); }
.site-header.is-scrolled .site-logo img { filter: grayscale(1) brightness(.75); }

.site-logo span { color: var(--color-accent); }
.site-logo:hover { text-decoration: none; opacity: .9; }

.site-nav { display: flex; align-items: center; gap: 4px; }

.site-nav a {
  color: var(--color-alpine-forest, #113F32);
  font-size: .9rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: background .15s, color .25s;
}

.site-nav a:hover,
.site-nav a.current {
  background: rgba(17,63,50,.08);
  color: var(--color-alpine-forest, #113F32);
  text-decoration: none;
}

.site-header.is-scrolled .site-nav a {
  color: var(--color-nav-grey, #4B5563);
}

.site-header.is-scrolled .site-nav a:hover,
.site-header.is-scrolled .site-nav a.current {
  background: rgba(75,85,99,.10);
  color: var(--color-nav-grey, #4B5563);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--color-alpine-forest, #113F32);
  transition: color .25s ease;
}

.site-header.is-scrolled .nav-toggle { color: var(--color-nav-grey, #4B5563); }

/* ── Header far-right controls (search icon + mega-menu hamburger) — 2026-07-03 nav restructure ── */
.site-header__controls { display: flex; align-items: center; gap: 6px; }

.cc-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--color-alpine-forest, #113F32);
  transition: color .25s ease;
}
.site-header.is-scrolled .cc-search-toggle { color: var(--color-nav-grey, #4B5563); }

/* The mega-menu hamburger reuses .nav-toggle's look but is always visible
   (desktop + mobile), distinct from the legacy #nav-toggle which stays
   mobile-only for the simple stacked list. */
.cc-mega-toggle { display: inline-flex; }

/* Search panel: expands directly under the header bar on toggle */
.cc-search-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-white); border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); z-index: 99;
}
.cc-search-panel[hidden] { display: none; }
.cc-search-panel__inner { display: flex; align-items: center; gap: 12px; padding: 14px 20px; height: auto; }
.cc-search-panel__field {
  flex: 1; border: 1.5px solid var(--color-border); border-radius: var(--radius);
  padding: 10px 14px; font-size: .95rem; font-family: var(--font-sans);
}
.cc-search-panel__field:focus { outline: none; border-color: var(--color-alpine-forest, #113F32); }
.cc-search-panel__btn {
  background: var(--color-alpine-forest, #113F32); color: #fff; border: none;
  border-radius: var(--radius); padding: 10px 18px; font-weight: 600; cursor: pointer;
}

/* Full mega-menu overlay panel */
.cc-mega-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-white); border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); z-index: 98; max-height: calc(100vh - 60px); overflow-y: auto;
}
.cc-mega-panel[hidden] { display: none; }
.cc-mega-panel__inner { max-width: var(--max-width); margin: 0 auto; padding: 32px 20px; }
.cc-mega-panel__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px;
}
.cc-mega-panel__title {
  display: block; font-weight: 700; font-size: 1.0625rem;
  color: var(--color-alpine-forest, #113F32); text-decoration: none; margin-bottom: 8px;
}
.cc-mega-panel__title:hover { text-decoration: underline; }
.cc-mega-panel__list { list-style: none; margin: 0; padding: 0; }
.cc-mega-panel__list li { margin: 0; }
.cc-mega-panel__list a {
  display: block; padding: 6px 0; color: var(--color-muted); text-decoration: none; font-size: .9rem;
}
.cc-mega-panel__list a:hover { color: var(--color-alpine-forest, #113F32); }
.cc-mega-panel__cta {
  display: flex; gap: 16px; align-items: center; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.cc-mega-panel__ai {
  background: none; border: 1.5px solid var(--color-alpine-forest, #113F32);
  color: var(--color-alpine-forest, #113F32); border-radius: var(--radius);
  padding: 12px 20px; font-weight: 600; cursor: pointer;
}
.cc-mega-panel__cta-btn {
  display: inline-block; background: var(--color-alpine-orange, #EA580C);
  color: #fff; border-radius: var(--radius); padding: 12px 20px;
  font-weight: 700; text-decoration: none;
}
.cc-mega-panel__cta-btn:hover { opacity: .9; text-decoration: none; }
.cc-mega-panel__scrim {
  position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 97;
}
.cc-mega-panel__scrim[hidden] { display: none; }

@media (max-width: 640px) {
  .cc-mega-panel__grid { grid-template-columns: 1fr; gap: 4px; }
  .cc-mega-panel__col { border-bottom: 1px solid var(--color-border); padding: 8px 0; }
  .cc-mega-panel__cta { flex-direction: column; align-items: stretch; }
}

/* ── Site Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  /* 2026-07-03: switched to Ink Slate (#0F172A), the darkest Alpine Crisp
     token, replacing the old --color-navy-dark (#122540). Site-wide, shared
     component — applies to all pages. */
  background: var(--color-alpine-ink, #0F172A);
  color: rgba(255,255,255,.7);
  margin-top: 80px;
  padding: 48px 20px 28px;
}

.footer-brand .site-logo img {
  display: block;
  height: 32px;
  width: auto; /* maintain ~4:1 native aspect ratio, never stretch */
}

.site-footer__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-brand .site-logo { font-size: 1.25rem; margin-bottom: 12px; }
.footer-brand p { font-size: .875rem; line-height: 1.6; }

.footer-col h3 { /* was h4 -- session 70 (2026-07-17): fixed skipped heading level (h2 -> h4) flagged by accessibility audit, footer.php's three column headings changed to h3 to match */
  color: var(--color-white);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }

.footer-col a {
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  transition: color .15s;
}

.footer-col a:hover { color: var(--color-accent); text-decoration: none; }

.site-footer__bottom {
  max-width: var(--max-width);
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .8125rem;
  color: rgba(255,255,255,.45);
}

.footer-legal a { color: rgba(255,255,255,.45); }
.footer-legal a:hover { color: var(--color-accent); text-decoration: none; }

/* ── Rate Banner (2026-07-10, v2 — static tiles, possibal.ca pattern) ─────────
   Replaces the v1 scrolling ticker/marquee. White background + thin bottom
   border (not the solid brand-colour bar the ticker used), Ink Slate values
   per the brand doc's "Zero-Color Typography Rule" (financial data never
   takes brand/accent colour). Hidden on mobile — nav + rate bar + hero would
   eat too much of a small viewport's first screen otherwise. */
.rate-banner {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-alpine-border, var(--color-border));
  padding: 5.6px 0; /* 2026-07-10 v3: cut ~60% from the original 14px per Vic — more
    compact strip, pushes the hero down without excess whitespace. Was never
    overlapping the hero (normal document flow throughout), just visually heavy. */
}
.rate-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--container-pad);
  display: flex;
  align-items: center;
  /* 2026-07-11 v4: was justify-content:space-between across 2 flex children
     (.rate-banner__stats as one block, .rate-banner__more as the other) --
     the 3 stats were evenly spaced WITHIN their own block, but that block
     and the "more" link were not part of the same distribution, so the gap
     before "more" didn't match the gaps between stats. Switched to
     space-evenly and made .rate-banner__stats a non-box (display:contents,
     below) so all 4 real items -- 3 stats + "See more rates" -- sit as
     direct flex children here and get identical spacing, per Vic's "space
     the 4 sections evenly" ask. */
  justify-content: space-evenly;
  gap: var(--space-4, 24px);
}
.rate-banner__stats {
  /* v4: unwraps this div from the flex layout (children render as if they
     were direct children of .rate-banner__inner) without touching the PHP
     markup -- lets the outer space-evenly rule treat all 3 stats + the
     "more" link as one evenly-spaced group of 4, instead of 2 nested boxes
     with independent spacing rules. */
  display: contents;
}
.rate-banner__stat {
  display: flex;
  flex-direction: column;
  align-items: center; /* v4: centre each stat's label/value/source, per Vic */
  text-align: center;
  gap: 2px;
  padding: 4px 12px;
  margin: -4px -12px; /* v3: invisible hit-area padding, cancelled by negative margin so layout doesn't shift */
  border-radius: var(--radius, 6px);
  color: inherit;
  text-decoration: none;
  transition: background-color .15s ease;
}
.rate-banner__stat:hover {
  background: var(--color-accent); /* v3: "light accent colour to show it's linkable" per Vic */
  text-decoration: none;
}
.rate-banner__stat-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rate-banner__stat-value {
  font-size: 1.2rem; /* v4: was 1.375rem -- "reduce the text size slightly" per Vic */
  font-weight: 800;
  color: var(--color-alpine-ink, var(--color-text)); /* financial data = Ink Slate, never brand colour */
  line-height: 1.1;
}
.rate-banner__stat-source { font-size: .75rem; color: var(--color-muted); }
.rate-banner__more {
  flex-shrink: 0;
  font-weight: 700;
  font-size: .875rem;
  color: var(--color-alpine-forest, var(--color-primary));
  white-space: nowrap;
  text-align: center; /* v4: matches the centred stats now that it's an equal 4th column */
}
.rate-banner__more:hover { text-decoration: underline; }
@media (max-width:1023px) {
  .rate-banner__stats { max-width: none; gap: 24px; }
  .rate-banner__stat-label { display: none; } /* keep it tight — value + source still identify the product */
}
@media (max-width:767px){
  .rate-banner{ display:none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
/* Canonical hero block — shared by page.php, template-compare.php, and the
   (currently unused) template-compare-hub.php. Fixed min-height keeps all
   headers the same height regardless of title/content length or viewport.
   background-image (set inline per-page via ACF hero_bg_image) is layered
   under a dark gradient overlay for text readability; falls back to the
   brand gradient when no image is set. */
.page-hero {
  /* 2026-07-10 (session 39): two-layer composite — a fixed dark-forest
     gradient overlay ALWAYS sits on top, with the photo (or the brand
     gradient fallback) as the layer underneath via --hero-photo. Previously
     the compare pages set an inline `background-image:url(...)`, which as a
     single CSS property silently WINS over this rule's `background`
     shorthand for that page — replacing the gradient outright instead of
     layering under it, so any page with a hero photo had NO overlay at all
     and relied purely on the photo's own tones for text legibility (Vic
     flagged this as "the header image gradient overlay isn't correct" —
     there wasn't one). Pages with no photo still fall back to the plain
     brand gradient via --hero-photo's own fallback value.
     2026-07-11 (session 51c): added a 3rd layer on top — fade to the page
     background in the final ~10-12% of the hero, matching the exact
     technique .hh-hero (session 48b) and .cc-hero already use. This was the
     one hero system that never got that fix — session 48b explicitly
     flagged ".page-hero (About/Contact/compare pages) still doesn't have
     this fade" and it sat as a known gap until now. All 3 hero systems
     (.page-hero/.cc-hero/.hh-hero) use the same fade approach as of this
     change. */
  background:
    linear-gradient(to bottom, rgba(6,47,34,0) 0%, rgba(6,47,34,0) 88%, var(--color-bg) 100%),
    linear-gradient(180deg, rgba(6,47,34,.62) 0%, rgba(6,47,34,.34) 45%, rgba(6,47,34,.58) 100%),
    var(--hero-photo, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-700) 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
  padding: 56px 0; /* horizontal padding removed session 29 - .page-hero .container already supplies 24px/16px via --container-pad; the old 20px here double-padded hero content ~20px further in than every other section */
  min-height: 280px; /* mobile/base height — left as-is per Vic's instruction */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}

/* Desktop-only header image height increase (2026-07-03) — mobile untouched. */
@media (min-width: 641px) {
  .page-hero { min-height: 440px; }
}

.page-hero .container {
  width: 100%;
  text-align: left;
}
.page-hero__inner,
.page-hero__copy {
  text-align: left;
}

.page-hero .hero-subtitle,
.page-hero__sub {
  margin: 0;
}

/* Breadcrumb -- plain inline trail, no list numbering/bullets, left-aligned. */
.breadcrumbs {
  text-align: left;
  margin-bottom: 10px;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
  color: rgba(255,255,255,.75);
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: rgba(255,255,255,.45);
}
.breadcrumbs li a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.breadcrumbs li a:hover {
  color: var(--color-white);
  text-decoration: underline;
}
.breadcrumbs li[aria-current="page"] {
  color: var(--color-white);
  font-weight: 500;
}

.page-hero h1 { color: var(--color-white); margin-bottom: 12px; }
.page-hero .freshness-badge {
  display: inline-block;
  background: rgba(144,230,79,.2);
  color: var(--color-accent);
  border: 1px solid rgba(144,230,79,.4);
  border-radius: 20px;
  font-size: .8125rem;
  font-weight: 600;
  padding: 3px 12px;
  margin-bottom: 16px;
}

.page-hero .hero-subtitle {
  font-size: 1.125rem;
  opacity: .85;
  max-width: 640px;
  margin: 0;
}

/* ── Cards (Top Picks) ──────────────────────────────────────────────────────── */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.pick-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow .2s, transform .2s;
}

.pick-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pick-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
}

.featured-badge {
  position: absolute;
  top: -1px;
  left: 20px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: .75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0 0 6px 6px;
}

.pick-card__best-for {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.pick-card__name { font-size: 1.0625rem; font-weight: 700; margin-bottom: 4px; }
.pick-card__issuer { font-size: .875rem; color: var(--color-muted); margin-bottom: 14px; }

.pick-card__rate {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.pick-card__rate-label { font-size: .8125rem; color: var(--color-muted); margin-bottom: 14px; }

.pick-card__stars { color: #f59e0b; font-size: .9375rem; margin-bottom: 12px; }
.pick-card__stars span { color: var(--color-muted); font-size: .8125rem; margin-left: 4px; }

.pick-card__editorial {
  font-size: .875rem;
  color: var(--color-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.pick-card__cta { width: 100%; text-align: center; }

/* ── Comparison Table ───────────────────────────────────────────────────────── */
.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 32px 0;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: .9rem;
}

.compare-table th {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: .8125rem;
  white-space: nowrap;
}

.compare-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: #f0f4ff; }

.compare-table .featured-row td { background: #f0fce6; }
.compare-table .featured-row:hover td { background: #e4f8d0; }

.rate-cell { font-weight: 700; color: var(--color-primary); }
.apply-cell { white-space: nowrap; }

/* ── FAQ ─────────────────────────────────────────────────────────────────────── */
.faq-list { margin: 24px 0; }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: var(--color-white);
  border: none;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background .15s;
}

.faq-question:hover { background: #f3f4f6; }
.faq-question[aria-expanded="true"] { background: #f0f4ff; color: var(--color-primary); }

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  transition: transform .2s;
}

.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  display: none;
  padding: 0 20px 16px;
  font-size: .9375rem;
  color: var(--color-muted);
  line-height: 1.7;
  background: var(--color-white);
}

.faq-answer.open { display: block; }

/* ── Section Headings ───────────────────────────────────────────────────────── */
.section { padding: 48px 0; }
.section--alt { background: var(--color-white); }

.section-header { margin-bottom: 28px; }
.section-header h2 { margin-bottom: 8px; }
.section-header p { color: var(--color-muted); font-size: 1.0625rem; }

/* ── Author Block ────────────────────────────────────────────────────────────── */
.author-block {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 32px 0;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.author-name { font-weight: 700; font-size: 1rem; }
.author-title { font-size: .875rem; color: var(--color-muted); }
.author-reviewed { font-size: .8125rem; color: var(--color-muted); margin-top: 4px; }

/* ── Methodology ─────────────────────────────────────────────────────────────── */
.methodology {
  background: #f0f4ff;
  border: 1px solid #c7d7f9;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 32px 0;
  font-size: .9375rem;
}

.methodology h3 { color: var(--color-primary); margin-bottom: 10px; }

/* ── Related Content ─────────────────────────────────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.related-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  transition: box-shadow .2s;
}

.related-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.related-card h4 { font-size: .9375rem; color: var(--color-primary); margin-bottom: 6px; }
.related-card p { font-size: .8125rem; color: var(--color-muted); margin: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-nav { display: none; }
  .site-nav.open { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: var(--color-primary); padding: 16px; gap: 4px; }
  .nav-toggle { display: block; }
  /* 2026-07-03 nav restructure: mobile keeps the original hamburger-only
     pattern untouched — only #nav-toggle (opens #site-nav) shows. The new
     far-right search icon + mega-menu hamburger are desktop-only additions. */
  .cc-search-toggle,
  .cc-mega-toggle { display: none; }
  .picks-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__bottom { flex-direction: column; text-align: center; }
  .author-block { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SINGLE ARTICLE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb-bar { background: var(--color-white); border-bottom: 1px solid var(--color-border); padding: 10px 0; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--color-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }
.breadcrumb span[aria-current] { color: var(--color-text); }

/* Article Hero */
.article-hero { background: var(--color-primary); color: #fff; padding: 48px 0 36px; }
.article-cat-badge { display: inline-block; background: var(--color-accent); color: var(--color-primary); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 20px; margin-bottom: 14px; }
.article-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.2; color: #fff; max-width: 780px; margin-bottom: 14px; }
.article-standfirst { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 680px; margin-bottom: 18px; line-height: 1.55; }
.article-meta { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: rgba(255,255,255,.7); flex-wrap: wrap; }
.article-meta__sep { opacity: .5; }
.article-meta svg { vertical-align: middle; margin-right: 3px; }

/* Featured image */
.article-featured-img { background: var(--color-white); }
.article-featured-img .container { max-width: 900px; }
.article-featured-img__img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.article-featured-img__credit { font-size: 0.75rem; color: var(--color-muted); text-align: right; padding: 4px 0 12px; }

/* Article layout: 2-col */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding-top: 40px; padding-bottom: 60px; align-items: start; }

/* Article content */
.article-content { min-width: 0; }
.article-content h2 { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin: 36px 0 12px; line-height: 1.3; }
.article-content h3 { font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin: 24px 0 8px; }
.article-content p { margin-bottom: 18px; line-height: 1.75; font-size: 1.02rem; }
.article-content ul, .article-content ol { margin: 0 0 18px 24px; }
.article-content li { margin-bottom: 6px; line-height: 1.65; }
.article-content a { color: var(--color-primary); font-weight: 500; }
.article-content a:hover { text-decoration: underline; }
.article-content strong { font-weight: 600; }

/* FAQ section (generated by automation) */
.faq-section { margin: 40px 0; }
.faq-section h2 { margin-bottom: 20px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-item h3 { font-size: 1rem; font-weight: 600; padding: 16px 20px; cursor: pointer; margin: 0; background: var(--color-white); }
.faq-item h3:hover { background: #f3f4f6; }
.faq-item p { padding: 0 20px 16px; color: var(--color-text); font-size: 0.97rem; }

/* Author block */
.author-block { display: flex; gap: 18px; align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin: 40px 0 24px; }
.author-block__avatar { position: relative; flex-shrink: 0; }
.author-block__img { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: block; }
.author-block__badge { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 12px; line-height: 20px; text-align: center; border: 2px solid var(--color-white); }
.author-block__label { font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.author-block__name { font-size: 1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 2px; display: inline-block; }
.author-block__title { font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); opacity: .8; margin-bottom: 4px; }
.author-block__credentials { font-size: 0.8125rem; color: var(--color-muted); margin-bottom: 6px; font-style: italic; }
.author-block__bio { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 4px; line-height: 1.5; }
.author-block__reviewed { font-size: 0.78rem; color: var(--color-muted); margin-bottom: 2px; }
.author-block__updated { font-size: 0.78rem; color: var(--color-muted); }

/* Editorial note */
.editorial-note { display: flex; gap: 10px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: var(--radius); padding: 14px 16px; font-size: 0.82rem; color: #0369a1; }
.editorial-note svg { flex-shrink: 0; margin-top: 2px; }
.editorial-note p { margin: 0; }
.editorial-note a { color: #0369a1; font-weight: 600; }

/* Sidebar */
.article-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }

/* Sidebar widgets */
.sidebar-widget { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; }
.sidebar-widget__title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-bottom: 14px; }

/* Table of contents */
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list__item { border-bottom: 1px solid var(--color-border); }
.toc-list__item:last-child { border-bottom: none; }
.toc-list__link { display: block; padding: 8px 0; font-size: 0.875rem; color: var(--color-text); transition: color .15s; }
.toc-list__link:hover, .toc-list__link.active { color: var(--color-primary); font-weight: 600; text-decoration: none; }

/* Compare CTA widget */
.compare-cta-widget { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.compare-cta-widget__eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); margin-bottom: 6px; }
.compare-cta-widget__heading { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.compare-cta-widget__copy { font-size: 0.875rem; color: rgba(255,255,255,.8); margin-bottom: 16px; }
.compare-cta-widget__btn { display: block; text-align: center; }
.btn--green { background: var(--color-accent); color: var(--color-primary); font-weight: 700; padding: 12px 20px; border-radius: var(--radius); transition: opacity .15s; }
.btn--green:hover { opacity: .9; text-decoration: none; }

/* Recent posts */
.recent-posts-list { list-style: none; margin: 0; padding: 0; }
.recent-posts-list__item { border-bottom: 1px solid var(--color-border); padding: 10px 0; }
.recent-posts-list__item:last-child { border-bottom: none; }
.recent-posts-list__link { display: flex; gap: 10px; align-items: center; color: var(--color-text); font-size: 0.875rem; line-height: 1.4; }
.recent-posts-list__link:hover { color: var(--color-primary); text-decoration: none; }
.recent-posts-list__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

/* Related posts section */
.related-posts { background: var(--color-white); border-top: 1px solid var(--color-border); padding: 48px 0; }
.related-posts__heading { font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; }
.related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-post-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); }
.related-post-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.related-post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.related-post-card__img-wrap:hover .related-post-card__img { transform: scale(1.03); }
.related-post-card__body { padding: 16px; }
.related-post-card__title { font-size: 0.95rem; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.related-post-card__title a { color: var(--color-text); }
.related-post-card__title a:hover { color: var(--color-primary); text-decoration: none; }
.related-post-card__date { font-size: 0.78rem; color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════════════════
   BLOG INDEX PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-hero { background: var(--color-primary); color: #fff; padding: 48px 0 36px; }
.blog-hero__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 10px; }
.blog-hero__sub { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 560px; }

.blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; padding-top: 40px; padding-bottom: 60px; align-items: start; }

/* Blog grid */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 40px; }

/* Featured card spans full width */
.blog-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.blog-card--featured .blog-card__img-wrap { aspect-ratio: auto; height: 100%; min-height: 260px; }
.blog-card--featured .blog-card__body { padding: 28px; display: flex; flex-direction: column; justify-content: center; }

/* Standard blog card */
.blog-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); transition: box-shadow .2s; }
.blog-card:hover { box-shadow: var(--shadow-md); }
.blog-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; background: #e5e7eb; }
.blog-card__img-wrap--placeholder { display: flex; align-items: center; justify-content: center; }
.blog-card__placeholder-icon { font-size: 2rem; }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.blog-card__img-wrap:hover .blog-card__img { transform: scale(1.03); }
.blog-card__body { padding: 18px; }
.blog-card__cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent); background: #f0f7e8; border-radius: 20px; padding: 2px 8px; display: inline-block; margin-bottom: 8px; }
.blog-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.blog-card__title--lg { font-size: 1.3rem; }
.blog-card__title a { color: var(--color-text); }
.blog-card__title a:hover { color: var(--color-primary); text-decoration: none; }
.blog-card__excerpt { font-size: 0.9rem; color: var(--color-muted); line-height: 1.55; margin-bottom: 14px; }
.blog-card__meta { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--color-muted); }
.blog-card__sep { opacity: .5; }
.blog-card__badge { background: var(--color-accent); color: var(--color-primary); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 20px; }

/* Pagination */
.blog-pagination { margin-top: 8px; }
.blog-pagination .page-numbers { display: inline-flex; }
.blog-pagination ul { display: flex; list-style: none; gap: 6px; flex-wrap: wrap; }
.blog-pagination .page-numbers a, .blog-pagination .page-numbers span { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.875rem; color: var(--color-text); transition: all .15s; }
.blog-pagination .page-numbers a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); text-decoration: none; }
.blog-pagination .page-numbers .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Category list sidebar */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list__item { border-bottom: 1px solid var(--color-border); }
.cat-list__item:last-child { border-bottom: none; }
.cat-list__link { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 0.875rem; color: var(--color-text); }
.cat-list__link:hover { color: var(--color-primary); text-decoration: none; }
.cat-list__count { font-size: 0.75rem; background: #f3f4f6; color: var(--color-muted); border-radius: 20px; padding: 1px 7px; }

/* Blog sidebar sticky */
.blog-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }

.blog-empty { color: var(--color-muted); text-align: center; padding: 60px 0; }

/* ── Responsive: single + blog ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-card--featured { grid-template-columns: 1fr; }
  .blog-card--featured .blog-card__img-wrap { min-height: 200px; }
  .related-posts__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .related-posts__grid { grid-template-columns: 1fr; }
  .article-hero { padding: 32px 0 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GENERIC PAGE (page.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* NOTE: background/padding/min-height for .page-hero are defined once, above
   (canonical "── Hero ──" block). This block previously redeclared .page-hero
   with different padding (48px 0 36px) and a flat background, which won the
   cascade and silently overrode the hero block above for every page using
   .page-hero — the two compare-hero variants (page.php generic pages and
   template-compare.php's 9 pages) rendered at different heights as a result.
   Fixed 2026-07-03: removed the duplicate rule so height/background are
   consistent everywhere .page-hero is used. */
.page-hero__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: #fff; margin-bottom: 8px; }
.page-hero__meta { font-size: 0.84rem; color: rgba(255,255,255,.65); }
.page-hero__inner { position: relative; z-index: 1; width: 100%; }
.page-hero__sub { font-size: 1.05rem; opacity: .85; max-width: 640px; margin: 8px 0 0; }

.page-content-wrap { padding: 48px 0 64px; }

/* Full-width page content — no artificial max-width on prose */
.page-content { width: 100%; }
.page-content h2 { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin: 36px 0 12px; }
.page-content h3 { font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin: 24px 0 8px; }
.page-content p { margin-bottom: 18px; line-height: 1.75; font-size: 1.02rem; }
.page-content ul, .page-content ol { margin: 0 0 18px 24px; }
.page-content li { margin-bottom: 6px; line-height: 1.65; }
.page-content a { color: var(--color-primary); font-weight: 500; }
.page-content a:hover { text-decoration: underline; }
.page-content strong { font-weight: 600; }
.page-content table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 0.95rem; }
.page-content th { background: var(--color-primary); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.page-content td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.page-content tr:nth-child(even) td { background: #f9fafb; }

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL: Force full width on WP default content wrappers
   Prevents WP/Gutenberg/plugin styles from constraining content to narrow columns
   ═══════════════════════════════════════════════════════════════════════════ */

/* WP block editor full-width override */
.wp-block-group, .wp-block-columns, .alignfull, .alignwide {
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure main content areas never get constrained by WP core styles */
.entry-content, .wp-block-post-content {
  max-width: 100%;
}

/* Remove any WP core inline max-width on blocks */
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
}

/* Gutenberg cover block — always full width */
.wp-block-cover { width: 100% !important; max-width: 100% !important; }

/* Admin bar offset when logged in */
.admin-bar .article-sidebar,
.admin-bar .blog-sidebar { top: 112px; }


/* ── Primary nav dropdown (Compare) — added 2026-06-27 ──────────────────────── */
.nav-item.has-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-item.has-dropdown > a .nav-caret { font-size: .7em; margin-left: 1px; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 6px; display: none; z-index: 1000;
}
.nav-item.has-dropdown:hover > .dropdown-menu,
.nav-item.has-dropdown:focus-within > .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: .9rem; color: var(--color-text); white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--color-bg); color: var(--color-primary); }

@media (max-width: 640px) {
  .nav-item.has-dropdown { display: block; width: 100%; }
  .dropdown-menu {
    position: static; display: block; box-shadow: none; border: none;
    background: transparent; padding: 0 0 4px 14px; min-width: 0;
  }
  .dropdown-menu a { color: var(--color-white); padding: 7px 8px; }
  .dropdown-menu a:hover { background: rgba(255,255,255,.12); color: var(--color-white); }
}


/* ─────────────────────────────────────────────────────────────────────────
   Cloudflare AutoRAG AI Chat Modal (mirrors possibal.ca; centsable branding)
   ───────────────────────────────────────────────────────────────────────── */
#rp-chat-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(10,22,40,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#rp-chat-overlay.open { display: flex; }
#rp-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 820px;
    background: #90E64F;
    color: #1e3a5f;
    padding: 14px 20px;
    border-radius: 14px 14px 0 0;
}
#rp-chat-title { display: flex; align-items: center; gap: 8px; }
.rp-chat-wordmark { font-size: 16px; font-weight: 900; letter-spacing: 0.08em; color: #1e3a5f; }
.rp-chat-ai-badge {
    background: #1e3a5f; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
    padding: 2px 8px; border-radius: 4px; text-transform: uppercase; line-height: 1.4;
}
#rp-chat-close {
    background: transparent; border: none; color: rgba(30,58,95,0.6); font-size: 18px;
    cursor: pointer; padding: 4px 8px; border-radius: 4px; line-height: 1; transition: color .15s;
}
#rp-chat-close:hover { color: #1e3a5f; }
#rp-chat-body {
    width: 100%; max-width: 820px; height: min(75vh, 640px); background: #fff;
    border-radius: 0 0 14px 14px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
#rp-chat-widget {
    flex: 1; width: 100%; height: 100%; display: block;
    --search-snippet-primary-color: #90E64F;
    --search-snippet-primary-hover: #7dd43d;
    --search-snippet-focus-ring: rgba(144,230,79,0.3);
    --search-snippet-text-color: #1e3a5f;
    --search-snippet-text-secondary: #6b7280;
    --search-snippet-text-description: #374151;
    --search-snippet-background: #ffffff;
    --search-snippet-surface: #f8fafc;
    --search-snippet-border-color: #e5e7eb;
    --search-snippet-hover-background: #f0fdf4;
    --search-snippet-user-message-bg: #1e3a5f;
    --search-snippet-user-message-text: #ffffff;
    --search-snippet-assistant-message-bg: #f0fdf4;
    --search-snippet-assistant-message-text: #1e3a5f;
    --search-snippet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --search-snippet-border-radius: 10px;
    --search-snippet-font-size-base: 15px;
}
/* Ask AI launcher button (header) */
.nav-ask-ai {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid rgba(30,58,95,0.25); color: #1e3a5f;
    font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
    padding: 7px 14px; border-radius: 8px; transition: background .15s, border-color .15s;
}
.nav-ask-ai:hover { background: #f0fdf4; border-color: #90E64F; }
.nav-ask-ai svg { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   IN-DEPTH REVIEWS SHELL — moved here from template-compare.php (session 39)
   ══════════════════════════════════════════════════════════════════════════
   This CSS used to live inline inside template-compare.php's own <style>
   tag, which only ever loads when that specific template renders. Once the
   markup became a shared partial (template-parts/cc-hub/in-depth-reviews.php,
   session 38) used by the Component Library (template-style-guide.php) and
   any template-flexible.php page too, those other templates got completely
   UNSTYLED output for these classes — not just worse, nothing at all (native
   <details> marker, no card border, no spacing). That's the real reason it
   "looked better" only on the credit-cards compare page. Moved to this file
   (sitewide, loaded everywhere) so it's consistent wherever the shell is
   used. Includes the .cmp-section-header rules other .cmp-* sections in
   template-compare.php also rely on, same issue, moved for the same reason. */
.cmp-section-header{margin-bottom:36px;}
.cmp-section-title{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;color:#1e3a5f;margin:0 0 10px;line-height:1.2;}
.cmp-section-sub{font-size:15px;color:#6b7280;margin:0;line-height:1.6;}

.cmp-deepdives-section{background:#f7f9fc;border-top:1px solid #e2e8f0;padding:64px 0;}
/* 2026-07-10 (session 39): spacing/border pass per Vic's Component Library
   review — gap widened 12px->20px, top margin added so the
   absolutely-positioned .cmp-dd-flag badge (desktop only — mobile already
   switches it to static) doesn't crowd the section heading above it. */
.cmp-deepdives-list{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
@media(min-width:641px){ .cmp-deepdives-list{margin-top:36px;} }
.cmp-deepdive{border:1.5px solid var(--color-accent,#CFD9D6);border-radius:12px;background:#fff;overflow:hidden;}
.cmp-deepdive-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:none;border:none;cursor:pointer;text-align:left;gap:16px;}
.cmp-deepdive-toggle:hover{background:#f7f9fc;}
.cmp-deepdive-toggle-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.cmp-dd-rank{font-size:12px;font-weight:700;color:#90E64F;background:#f0fdf4;padding:2px 8px;border-radius:10px;white-space:nowrap;}
.cmp-dd-name{font-size:15px;font-weight:700;color:#1e3a5f;flex:1;}
.cmp-dd-rate{font-size:18px;font-weight:900;color:#1e3a5f;white-space:nowrap;}
.cmp-dd-arrow{font-size:12px;color:#6b7280;transition:transform .2s;flex-shrink:0;}
/* session 40: optional bank/issuer logo in the proscons variant's collapsed
   row (Bank Compare page) — no-op on the 7 pages that don't set logo_url. */
.cmp-dd-logo{width:24px;height:24px;object-fit:contain;flex-shrink:0;}
.cmp-deepdive-body{padding:0 24px 24px;}
.cmp-dd-inner{display:flex;flex-direction:column;gap:16px;}
.cmp-dd-overview p{font-size:14px;color:#374151;line-height:1.65;margin:0 0 8px;}
/* session 40: proscons variant's CTA row — supports an external site link
   (cta_url) alongside an internal "Read full profile" link (profile_url,
   Bank Compare page only). Single-CTA pages render one button, unaffected. */
.cmp-dd-proscta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.cmp-dd-proscons{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:580px){.cmp-dd-proscons{grid-template-columns:1fr;}}
.cmp-dd-pros h4,.cmp-dd-cons h4{font-size:13px;font-weight:700;margin:0 0 8px;}
.cmp-dd-pros h4{color:#059669;}
.cmp-dd-cons h4{color:#dc2626;}
.cmp-dd-pros ul,.cmp-dd-cons ul{margin:0;padding:0 0 0 16px;}
.cmp-dd-pros li,.cmp-dd-cons li{font-size:13px;color:#374151;line-height:1.55;margin-bottom:4px;}

/* ---- Session 30: merged rich-header + "Full review" toggle card (credit
   cards format). Reuses .cc-prodcard/.cc-badge/.cc-btn/.cc-stars from
   cc-hub.css verbatim for visual consistency — this block only adds the
   layout shell + the <details> "Full review" toggle styling. ---- */
.cmp-deepdive--merged{padding:28px 24px 24px;}
.cmp-dd-head{position:relative;display:grid;grid-template-columns:64px 240px 1fr;gap:20px;align-items:start;}
.cmp-dd-flag{position:absolute;top:-40px;left:0;}
.cmp-dd-rank2{font-family:var(--font-heading,inherit);font-weight:700;font-size:1.25rem;color:#6b7280;text-align:center;}
.cmp-dd-name2{font-size:1.1rem;font-weight:700;color:#113F32;margin:0 0 2px;}
.cmp-dd-issuer{display:block;font-size:13px;color:#6b7280;margin-bottom:8px;}
.cmp-dd-body-top .cc-prodcard__stats{margin:12px 0;}
.cmp-dd-full{margin-top:16px;border-top:1px solid #e2e8f0;padding-top:12px;}
/* 2026-07-10 (session 39): toggle was plain text on white — easy to miss as
   an interactive control (same category as the session-28 checkbox
   affordance fix). Now a full-width shaded bar: light mint fill at rest,
   accent-tinted on hover, so it reads as a real expandable control. */
.cmp-dd-full-toggle{cursor:pointer;font-size:14px;font-weight:700;color:#113F32;list-style:none;padding:10px 14px;margin:0 -14px;display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--color-bg-subtle,#F3F6F5);border-radius:8px;transition:background-color .15s ease;}
.cmp-dd-full-toggle:hover{background:var(--color-accent,#CFD9D6);}
.cmp-dd-full-toggle::-webkit-details-marker{display:none;}
.cmp-dd-full-toggle::after{content:"\25BE";font-size:11px;flex-shrink:0;}
.cmp-dd-full[open] .cmp-dd-full-toggle::after{content:"\25B4";}
.cmp-dd-full-body{padding:14px 0 0;display:flex;flex-direction:column;gap:12px;}
.cmp-dd-full-body p{font-size:14px;color:#374151;line-height:1.65;margin:0;}
@media(max-width:767px){
  .cmp-dd-head{grid-template-columns:48px 140px 1fr;}
}
@media(max-width:640px){
  .cmp-deepdive--merged{padding-top:40px;}
  .cmp-dd-head{grid-template-columns:1fr;gap:12px;}
  .cmp-dd-rank2{text-align:left;}
  .cmp-dd-flag{position:static;display:inline-block;margin-bottom:8px;}
}
@media (max-width: 680px) {
    #rp-chat-overlay { padding: 0; }
    #rp-chat-header, #rp-chat-body { border-radius: 0; max-width: 100%; }
    #rp-chat-body { height: calc(100vh - 52px); }
    #rp-chat-widget { min-height: 0; }
}


/* Session 77 (2026-07-22) — contact form (shortcode [centsable_contact_form], see functions.php) */
.cs-contact-form { width: 100%; margin: 1.5rem 0 2rem; }
.cs-contact-form .cs-form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; }
@media (min-width: 640px) {
	.cs-contact-form .cs-form-grid { grid-template-columns: 1fr 1fr; }
	.cs-contact-form .cs-field--full { grid-column: 1 / -1; }
}
.cs-contact-form .cs-field { margin-bottom: 1.1rem; }
.cs-contact-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.cs-contact-form input[type="text"],
.cs-contact-form input[type="email"],
.cs-contact-form select,
.cs-contact-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
}
.cs-contact-form textarea { resize: vertical; }
.cs-contact-form .cs-btn--primary {
	background: var(--color-cta, #EA580C);
	color: var(--color-white, #fff);
	border: none;
	padding: 0.7rem 1.6rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.cs-contact-form .cs-btn--primary:hover { background: var(--color-cta-hover, #C2410C); }
.cs-form-notice { width: 100%; padding: 0.85rem 1rem; border-radius: 6px; margin: 1rem 0; font-weight: 500; box-sizing: border-box; }
.cs-form-notice--success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc0; }
.cs-form-notice--error { background: #fdecea; color: #a3262c; border: 1px solid #f3c2c2; }