/* ═══════════════════════════════════════════════════════════════
   RAMSEY PAGES — Page-specific overrides for all key pages
   Based on design audit blueprint #337061 (April 7, 2026)

   Transforms each page type to Ramsey's editorial clean style:
   - Light page bg (#f5f7f8), white cards, shadow-only
   - Navy headings (#003561), green accents (#22c55e)
   - Yellow (#fcd214) for CTAs on dark backgrounds
   - 16px card radius, 3-elevation shadow system
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared font ── */
:root {
  --rp-font: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif;
  --rp-navy: #003561;
  --rp-navy-deep: #002342;
  --rp-primary: #22c55e;
  --rp-primary-dark: #16a34a;
  --rp-yellow: #fcd214;
  --rp-text: #1f2426;
  --rp-text-sub: #495257;
  --rp-text-muted: #69757a;
  --rp-bg: #f5f7f8;
  --rp-white: #ffffff;
  --rp-border: #e8eced;
  --rp-shadow: rgba(31,36,38,0.12) 0px 4px 16px 0px;
  --rp-shadow-high: rgba(31,36,38,0.18) 0px 8px 24px 0px;
  --rp-radius: 16px;
  --rp-radius-btn: 4px;
  --rp-transition: 0.3s cubic-bezier(0.19,1,0.22,1);
}

/* ════════════════════════════════════════════════════════════════
   PRICING PAGE
   ════════════════════════════════════════════════════════════════ */
.pricing-page #main-content,
body[data-page="pricing"] #main-content {
  background: var(--rp-bg) !important;
}

/* Pricing hero: light (clean Ramsey style — white bg, dark text) */
.pricing-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  color: #111827 !important;
}

.pricing-hero h1, .pricing-hero h2 {
  color: #111827 !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}

.pricing-hero p {
  color: #4b5563 !important;
}

/* Pricing plan cards: Ramsey shadow-only white cards */
.plan-card,
.pricing-card,
[class*="plan-card"],
.pricing-plan {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
  color: var(--rp-text) !important;
  transition: box-shadow var(--rp-transition), transform 0.2s ease !important;
}

.plan-card:hover,
.pricing-card:hover {
  box-shadow: var(--rp-shadow-high) !important;
  transform: translateY(-3px);
}

/* Plan names */
.plan-name, .plan-tier {
  font-family: var(--rp-font) !important;
  color: var(--rp-navy) !important;
}

.plan-tier { color: var(--rp-primary) !important; }

/* Plan prices */
.plan-price {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}

.plan-price-unit, .plan-billed-note {
  color: var(--rp-text-muted) !important;
}

/* Annual savings badge */
.plan-annual-saving {
  background: rgba(34,197,94,0.1) !important;
  color: var(--rp-primary-dark) !important;
}

.plan-desc {
  color: var(--rp-text-sub) !important;
  font-family: var(--rp-font) !important;
}

/* Featured plan */
.plan-card--featured, .plan-card.featured {
  border: 2px solid var(--rp-primary) !important;
}

/* Business plan cards */
.biz-card {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
  transition: box-shadow var(--rp-transition), transform 0.2s ease !important;
}
.biz-card:hover {
  box-shadow: var(--rp-shadow-high) !important;
  transform: translateY(-2px);
}
.biz-card h3 { color: var(--rp-navy) !important; font-family: var(--rp-font) !important; }
.biz-card p { color: var(--rp-text-sub) !important; }

/* One-time cards */
.onetime-card {
  background: var(--rp-white) !important;
  border: 1px solid var(--rp-border) !important;
  border-radius: var(--rp-radius) !important;
  box-shadow: var(--rp-shadow) !important;
}
.onetime-info h3 { color: var(--rp-navy) !important; }
.onetime-info p { color: var(--rp-text-sub) !important; }
.onetime-price { color: var(--rp-primary) !important; }

/* Pricing CTA buttons */
.plan-cta-btn,
.pricing-cta,
.btn-upgrade,
.btn-subscribe {
  background: var(--rp-primary) !important;
  color: #ffffff !important;
  border-radius: var(--rp-radius-btn) !important;
  font-weight: 700 !important;
  border: none !important;
  font-family: var(--rp-font) !important;
  transition: background-color var(--rp-transition) !important;
}
.plan-cta-btn:hover, .pricing-cta:hover {
  background: var(--rp-primary-dark) !important;
}

/* ════════════════════════════════════════════════════════════════
   TOOLS PAGE (Ramsey: clean list layout + dark hero)
   ════════════════════════════════════════════════════════════════ */
.tools-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  padding: 5rem 1rem 3.5rem !important;
}

.tools-hero h1 {
  color: #111827 !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -0.02em !important;
}

.tools-hero p {
  color: #4b5563 !important;
  font-size: 1.125rem !important;
}

.tools-section {
  background: var(--rp-bg) !important;
}

.tools-section-label {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--rp-navy) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 2px solid var(--rp-border) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}

.tools-section-label::after {
  display: none !important;
}

/* Tool cards: Ramsey shadow-only style */
.tools-grid {
  gap: 1rem !important;
}

.tool-card,
[class*="tool-card"],
.tools-grid > * {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
  transition: box-shadow var(--rp-transition), transform 0.2s ease !important;
}

.tool-card:hover {
  box-shadow: var(--rp-shadow-high) !important;
  transform: translateY(-2px);
}

.tool-card h3, .tool-card h4 {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}

.tool-card p { color: var(--rp-text-sub) !important; }
.tool-card a { color: var(--rp-primary) !important; }

/* ════════════════════════════════════════════════════════════════
   GUIDES INDEX + GUIDE PAGES (Ramsey editorial article layout)
   ════════════════════════════════════════════════════════════════ */
.guides-page #main-content,
.guide-page #main-content,
body[data-page="guide"] #main-content {
  background: var(--rp-bg) !important;
}

/* Guides index hero */
.guides-hero,
.guide-hero,
.category-hub-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  padding: clamp(4rem, 7vw, 6rem) 1.5rem clamp(2.5rem, 4vw, 3.5rem) !important;
}

.guides-hero h1, .guide-hero h1, .category-hub-hero h1 {
  color: #111827 !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}
.guides-hero p, .guide-hero p { color: #4b5563 !important; }

/* Guide cards: shadow-only Ramsey pattern */
.guide-card,
[class*="guide-card"],
.resource-card {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
  transition: box-shadow var(--rp-transition), transform 0.2s ease !important;
  overflow: hidden !important;
}

.guide-card:hover {
  box-shadow: var(--rp-shadow-high) !important;
  transform: translateY(-2px);
}

.guide-card h2, .guide-card h3, .guide-card .card-title {
  color: var(--rp-navy) !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}

.guide-card p, .guide-card .card-desc {
  color: var(--rp-text-sub) !important;
  line-height: 1.6 !important;
}

/* Guide article body (editorial layout) */
.guide-body,
.guide-content,
.article-body,
.blog-body {
  font-family: var(--rp-font) !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--rp-text) !important;
  max-width: 720px !important;
}

.guide-body h2, .guide-content h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.875rem) !important;
  font-weight: 700 !important;
  color: var(--rp-navy) !important;
  margin-top: 2.5rem !important;
}
.guide-body h3, .guide-content h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
  font-weight: 600 !important;
  color: var(--rp-navy) !important;
  margin-top: 2rem !important;
}

/* ════════════════════════════════════════════════════════════════
   FOR-LAW-FIRMS + FOR-EMPLOYERS (B2B pages)
   ════════════════════════════════════════════════════════════════ */
.law-firms-page #main-content,
.employers-page #main-content,
.for-law-firms #main-content {
  background: var(--rp-bg) !important;
}

/* B2B hero: light (clean, professional) */
.law-firms-hero, .employers-hero, .b2b-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
  padding: clamp(5rem, 8vw, 7rem) 1.5rem clamp(3rem, 5vw, 4rem) !important;
}

.law-firms-hero h1, .employers-hero h1, .b2b-hero h1 {
  color: #111827 !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
}

.law-firms-hero p, .employers-hero p, .b2b-hero p {
  color: #4b5563 !important;
}

/* B2B pricing cards */
.lf-plan-card,
.employer-plan-card,
[class*="b2b-card"],
[class*="lf-card"] {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
  transition: box-shadow var(--rp-transition), transform 0.2s ease !important;
}

.lf-plan-card:hover {
  box-shadow: var(--rp-shadow-high) !important;
  transform: translateY(-3px);
}

/* B2B feature/benefit cards */
.lf-feature, .lf-benefit, [class*="lf-feat"] {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
}

/* Metric/stats bar on B2B pages */
.lf-stats, .lf-metrics, [class*="lf-stat"] {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
}

/* B2B CTA buttons */
.lf-cta, .lf-btn, [class*="lf-cta-btn"] {
  background: var(--rp-yellow) !important;
  color: var(--rp-text) !important;
  border: none !important;
  border-radius: var(--rp-radius-btn) !important;
  font-weight: 700 !important;
  font-family: var(--rp-font) !important;
  transition: background-color var(--rp-transition) !important;
}
.lf-cta:hover { background: var(--rp-yellow-light, #ffe45e) !important; }

/* ════════════════════════════════════════════════════════════════
   QUIZ / CALCULATOR / IS-IT-LEGIT (Tool pages)
   ════════════════════════════════════════════════════════════════ */
.quiz-page #main-content,
.calculator-page #main-content,
.legit-page #main-content {
  background: var(--rp-bg) !important;
}

/* Tool hero — light */
.quiz-hero, .calc-hero, .legit-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
}
.quiz-hero h1, .calc-hero h1, .legit-hero h1 {
  color: #111827 !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}

/* Tool content cards */
.quiz-card, .calc-card, .legit-card,
[class*="quiz-card"], [class*="calc-card"] {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
}

/* Quiz options */
.quiz-option, [class*="quiz-option"] {
  background: var(--rp-bg) !important;
  border: 2px solid var(--rp-border) !important;
  border-radius: var(--rp-radius-sm, 8px) !important;
  color: var(--rp-text) !important;
  transition: border-color var(--rp-transition), background-color var(--rp-transition) !important;
}

.quiz-option:hover {
  border-color: var(--rp-primary) !important;
  background: rgba(34,197,94,0.06) !important;
}

.quiz-option.selected, .quiz-option:checked {
  border-color: var(--rp-primary) !important;
  background: rgba(34,197,94,0.1) !important;
}

/* Quiz submit */
.quiz-submit, .calc-submit, [class*="quiz-submit"] {
  background: var(--rp-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--rp-radius-btn) !important;
  font-weight: 700 !important;
  transition: background-color var(--rp-transition) !important;
}
.quiz-submit:hover { background: var(--rp-primary-dark) !important; }

/* ════════════════════════════════════════════════════════════════
   BLOG / NEWS PAGES
   ════════════════════════════════════════════════════════════════ */
.blog-page #main-content,
.news-page #main-content {
  background: var(--rp-bg) !important;
}

/* Blog post cards */
.blog-card, .post-card, [class*="blog-card"] {
  background: var(--rp-white) !important;
  border: none !important;
  box-shadow: var(--rp-shadow) !important;
  border-radius: var(--rp-radius) !important;
  overflow: hidden !important;
  transition: box-shadow var(--rp-transition), transform 0.2s ease !important;
}
.blog-card:hover { box-shadow: var(--rp-shadow-high) !important; transform: translateY(-2px); }

/* Blog card elements */
.blog-card h2, .blog-card h3 { color: var(--rp-navy) !important; font-family: var(--rp-font) !important; }
.blog-card p { color: var(--rp-text-sub) !important; }
.blog-card .post-meta, .blog-card .post-date { color: var(--rp-text-muted) !important; }

/* Blog article body */
.blog-post-body, .post-content {
  font-family: var(--rp-font) !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--rp-text) !important;
}

/* ════════════════════════════════════════════════════════════════
   CATEGORY PAGES (Sticky sub-nav Ramsey pattern)
   ════════════════════════════════════════════════════════════════ */
.category-page #main-content,
.settlement-category #main-content {
  background: var(--rp-bg) !important;
}

/* Category hero banner — light */
.category-hero, .category-banner {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
}
.category-hero h1 {
  color: #111827 !important;
  font-family: var(--rp-font) !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════
   DIRECTORY PAGE (settlements-index)
   Extend the existing dir-* variables with Ramsey values
   ════════════════════════════════════════════════════════════════ */
.dir-page {
  --dir-bg: #f5f7f8;
  --dir-card: #ffffff;
  --dir-border: #e8eced;
  --dir-shadow: rgba(31,36,38,0.10) 0 2px 4px 0;
  --dir-shadow-hover: rgba(31,36,38,0.18) 0 8px 24px 0;
  --dir-text: #1f2426;
  --dir-text-secondary: #495257;
  --dir-text-muted: #69757a;
  --dir-green: #22c55e;
  --dir-green-light: rgba(34,197,94,0.1);
  --dir-green-dark: #16a34a;
  --dir-red: #cc392f;
  --dir-amber: #d97706;
  --dir-blue: #22c55e;
  --dir-filter-bg: #ffffff;
  --dir-filter-active: #22c55e;
  font-family: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif !important;
}

/* Directory hero: white on dir pages */
.dir-hero {
  background: #ffffff !important;
  border-bottom: 1px solid #e8eced !important;
  padding: 5rem 1.5rem 2.5rem !important;
}

.dir-h1 {
  font-family: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif !important;
  color: #003561 !important;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.dir-h1 .count { color: #22c55e !important; }
.dir-hero-sub { color: #495257 !important; }

/* Dir hero stats: green numbers */
.dir-hero-stat-num { color: #22c55e !important; font-weight: 700 !important; }
.dir-hero-stat-label { color: #69757a !important; }

/* Settlement cards in directory: shadow-only Ramsey pattern */
.dir-card, .settlement-dir-card {
  background: #ffffff !important;
  border: none !important;
  box-shadow: rgba(31,36,38,0.10) 0 2px 4px 0 !important;
  border-radius: 16px !important;
  transition: box-shadow 0.3s cubic-bezier(0.19,1,0.22,1), transform 0.2s ease !important;
}
.dir-card:hover {
  box-shadow: rgba(31,36,38,0.18) 0 8px 24px 0 !important;
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL SITEWIDE OVERRIDES
   These catch any remaining dark-theme elements globally
   ════════════════════════════════════════════════════════════════ */

/* All card-like elements site-wide get Ramsey shadow-only treatment */
.card, [class*="-card"]:not([class*="credit-card"]) {
  background: #ffffff !important;
}

/* All form buttons sitewide */
button.btn-primary, a.btn-primary,
.btn-primary {
  background: #22c55e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
  transition: background-color 0.3s cubic-bezier(0.19,1,0.22,1) !important;
}
button.btn-primary:hover, a.btn-primary:hover {
  background: #16a34a !important;
}

/* Section headings: navy */
.section-title, .page-title, h2.title {
  color: #003561 !important;
  font-family: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* Input focus: Ramsey style */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: #22c55e !important;
  box-shadow: inset 0 0 0 1px #22c55e !important;
}

/* ════════════════════════════════════════════════════════════════
   SP-HERO (secondary-pages hero on light pages)
   ════════════════════════════════════════════════════════════════ */
.sp-page {
  background: #f5f7f8 !important;
}

.sp-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%) !important;
}

.sp-hero h1 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-family: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.sp-hero-sub {
  color: #4b5563 !important;
}

/* SP-section card alternating */
.sp-section--alt {
  background: #f5f7f8 !important;
}

/* SP-cards: Ramsey shadow-only */
.sp-card {
  background: #ffffff !important;
  border: none !important;
  box-shadow: rgba(31,36,38,0.12) 0px 4px 16px 0px !important;
  border-radius: 16px !important;
}

.sp-card:hover {
  box-shadow: rgba(31,36,38,0.18) 0px 8px 24px 0px !important;
}

/* SP text on cards */
.sp-card-title,
.sp-card h3,
.sp-card h4 {
  color: #003561 !important;
  font-family: 'Plus Jakarta Sans', 'DM Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
}

.sp-card p,
.sp-card-desc {
  color: #495257 !important;
}

/* SP CTAs */
.sp-cta-btn,
.sp-btn-primary,
.sp-section .btn-primary {
  background: #22c55e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  transition: background-color 0.3s cubic-bezier(0.19,1,0.22,1) !important;
}

.sp-cta-btn:hover { background: #16a34a !important; }

/* SP hero CTA: green on light background */
.sp-section--navy .sp-cta-btn,
.sp-hero .sp-cta-btn {
  background: #16a34a !important;
  color: #ffffff !important;
}

.sp-section--navy .sp-cta-btn:hover { background: #15803d !important; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tools-hero, .guides-hero, .guide-hero,
  .pricing-hero, .law-firms-hero, .employers-hero {
    padding: 5rem 1.25rem 2.5rem !important;
  }
}