/*
  Design Refresh — Maple Syrup Money
  Visual upgrade layer inspired by mainline-nextjs-template.
  Load AFTER design-system.css: <link rel="stylesheet" href="/styles/design-refresh.css" />
  Reversible: removing this file reverts all visual changes.
*/

/* ═══════════════════════════════════════════════
   R1. REFRESH TOKENS
   Override / extend design-system.css tokens.
   ═══════════════════════════════════════════════ */
:root {
  /* New radius tokens */
  --r-panel:  24px;
  --r-nav:    32px;
  --r-card:   16px;   /* upgrade from 12px */

  /* Typography — DM Sans for headings */
  --font-heading: 'DM Sans', var(--font);

  /* Spacing — standardized section rhythm */
  --sp-section:    7rem;     /* ~112px */
  --sp-section-lg: 8rem;     /* ~128px, used at lg+ */

  /* Content panel */
  --panel-bg:     rgba(255, 255, 255, 0.60);
  --panel-border: rgba(0, 0, 0, 0.04);
  --panel-mx:     2rem;      /* side margins */

  /* Card muted */
  --card-muted-bg: rgba(232, 160, 32, 0.04);

  /* Dashed divider */
  --divider-color: rgba(232, 160, 32, 0.25);
}

/* Dark mode token overrides */
html[data-theme="dark"] {
  --panel-bg:      rgba(28, 28, 28, 0.55);
  --panel-border:  rgba(255, 255, 255, 0.06);
  --card-muted-bg: rgba(232, 160, 32, 0.06);
  --divider-color: rgba(232, 160, 32, 0.18);
}


/* ═══════════════════════════════════════════════
   R2. HEADING TYPOGRAPHY
   DM Sans + OpenType features + tight tracking.
   ═══════════════════════════════════════════════ */
.refresh h1,
.refresh h2,
.refresh h3,
.refresh .section-title,
.refresh .display-heading {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
  letter-spacing: -0.025em;
}

.refresh h1 { font-weight: 700; }
.refresh h2 { font-weight: 700; }
.refresh h3 { font-weight: 600; }


/* ═══════════════════════════════════════════════
   R3. CONTENT PANEL
   Floating background panels with large border-radius,
   side margins, warm amber-tinted gradient wash.
   ═══════════════════════════════════════════════ */
.content-panel {
  background:
    linear-gradient(135deg, rgba(232, 160, 32, 0.03) 0%, transparent 60%),
    var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-panel);
  margin-left: var(--panel-mx);
  margin-right: var(--panel-mx);
  padding: 3rem 2.5rem;
}

@media (min-width: 769px) {
  .content-panel {
    padding: 4rem 3.5rem;
  }
}

@media (max-width: 640px) {
  .content-panel {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    padding: 2rem 1.25rem;
    border-radius: 16px;
  }
}

/* Dark mode panel */
[data-theme="dark"] .content-panel {
  background:
    linear-gradient(135deg, rgba(232, 160, 32, 0.04) 0%, transparent 60%),
    var(--panel-bg);
}


/* ═══════════════════════════════════════════════
   R4. DASHED DIVIDER
   Gradient-masked dashed lines replacing solid <hr>.
   ═══════════════════════════════════════════════ */
.dashed-divider {
  border: none;
  height: 0;
  border-top: 2px dashed var(--divider-color);
  margin: 0 auto;
  max-width: var(--max-w);
  /* Gradient fade at edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}


/* ═══════════════════════════════════════════════
   R5. SECTION REFRESH
   Standardized section spacing.
   ═══════════════════════════════════════════════ */
.section-refresh {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

@media (min-width: 1024px) {
  .section-refresh {
    padding-top: var(--sp-section-lg);
    padding-bottom: var(--sp-section-lg);
  }
}


/* Section-refresh with content-panel: section provides vertical rhythm,
   content-panel provides visual container. Remove section horizontal padding. */
.section-refresh > .content-panel > .section-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* Story/mission/values/journey sections — remove default padding
   when section-refresh class is applied (content-panel handles it) */
.section-refresh.story,
.section-refresh.mission,
.section-refresh.values,
.section-refresh.journey-stages,
.section-refresh.contact-section,
.section-refresh.faq,
.section-refresh.articles-section {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* FAQ items with card-muted — remove existing border/bg */
.refresh .faq-item.card-muted {
  border: none;
  border-radius: var(--r-card);
}

.refresh .faq-item.card-muted .faq-question:hover {
  background: transparent;
}

/* Blog article cards — larger radii */
.refresh .article-card {
  border-radius: var(--r-card);
}

/* Info cards (contact sidebar) — larger radii */
.refresh .info-card {
  border-radius: var(--r-card);
}

/* The content-panel's max-width for readability */
.section-refresh > .content-panel {
  max-width: calc(var(--max-w) + 5rem);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .section-refresh > .content-panel {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}


/* ═══════════════════════════════════════════════
   R6. CARD MUTED
   Borderless tinted cards (supplements .glass-card).
   ═══════════════════════════════════════════════ */
.card-muted {
  background: var(--card-muted-bg);
  border: none;
  border-radius: var(--r-card);
  padding: 2rem 1.5rem;
  transition: background var(--dur-med) var(--ease-smooth);
}

.card-muted:hover {
  background: rgba(232, 160, 32, 0.08);
}

[data-theme="dark"] .card-muted:hover {
  background: rgba(232, 160, 32, 0.10);
}


/* ═══════════════════════════════════════════════
   R7. HOVER FADE
   Opacity-based hover for links, icons, etc.
   ═══════════════════════════════════════════════ */
.hover-fade {
  transition: opacity var(--dur-med) var(--ease-smooth);
}

.hover-fade:hover {
  opacity: 0.75;
}


/* ═══════════════════════════════════════════════
   R8. REFRESH UTILITIES
   Small helpers used within refreshed pages.
   ═══════════════════════════════════════════════ */

/* Large border-radius for stat cards */
.refresh .mission-stat,
.refresh .value-card,
.refresh .timeline-content {
  border-radius: var(--r-card);
}

/* Smooth upgrade for value-icon containers */
.refresh .value-icon {
  border-radius: var(--r-card);
}

/* Story pull-quote upgrade */
.refresh .story-pull {
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

/* Founder photo — slightly larger radius */
.refresh .founder-photo {
  border-radius: 50%;
}

/* Article content — DM Sans for prose headings */
.refresh .article-content h2,
.refresh .article-content h3,
.refresh .article-content h4 {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
  letter-spacing: -0.025em;
}

/* Article hero title — DM Sans */
.refresh .hero-title {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
}

/* Ebook strip in blog — larger radius */
.refresh .ebook-strip {
  border-radius: var(--r-card);
}

/* Contact form wrap — larger radius */
.refresh .contact-form-wrap {
  border-radius: var(--r-card);
}


/* ═══════════════════════════════════════════════
   R8b. PHASE 4-6 SECTION OVERRIDES
   Ebooks, Newsletter, Legal pages.
   ═══════════════════════════════════════════════ */

/* Remove old section padding/bg when section-refresh applied */
.section-refresh.featured-ebook,
.section-refresh.ebook-carousel-section,
.section-refresh.guides-section,
.section-refresh.ebook-faq,
.section-refresh.archive,
.section-refresh.legal-content {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* Guide cards — larger radii */
.refresh .guide-card {
  border-radius: var(--r-card);
}

/* Issue cards (newsletter archive) — larger radii */
.refresh .issue-card {
  border-radius: var(--r-card);
}

/* Legal content headings — DM Sans */
.refresh .legal-inner h2 {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Ebook FAQ items — card-muted styling */
.refresh .ebook-faq .faq-item.card-muted {
  border: none;
  border-radius: var(--r-card);
}

.refresh .ebook-faq .faq-item.card-muted .faq-question:hover {
  background: transparent;
}

/* Book cover — larger radius */
.refresh .book-cover-lg {
  border-radius: var(--r-card);
}

/* Charity banner — larger radius */
.refresh .charity-banner {
  border-radius: var(--r-card);
}

/* Partner table (affiliate disclosure) — larger radius */
.refresh .partner-table {
  border-radius: var(--r-card);
  overflow: hidden;
}


/* ═══════════════════════════════════════════════
   R8c. PHASE 7 SECTION OVERRIDES
   Tools hub, residential, commercial pages.
   ═══════════════════════════════════════════════ */

/* Remove old section padding/bg when section-refresh applied */
.section-refresh.tools-split,
.section-refresh.all-tools,
.section-refresh.tools-section {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* Tools split cards — larger radii */
.refresh .tools-split-card {
  border-radius: var(--r-card);
}

/* Tool grid items — larger radii */
.refresh .tool-item {
  border-radius: var(--r-card);
}

/* Tool icon containers — larger radii */
.refresh .tool-icon {
  border-radius: var(--r-card);
}

/* Calculator cards (residential/commercial) — larger radii */
.refresh .calc-card {
  border-radius: var(--r-card);
}

/* Calculator result panels — larger radii */
.refresh .calc-results {
  border-radius: var(--r-card);
}


/* ═══════════════════════════════════════════════
   R8d. PHASE 8 SECTION OVERRIDES
   Investing hub, courses, news, chapters.
   ═══════════════════════════════════════════════ */

/* Remove old section padding/bg when section-refresh applied */
.section-refresh.hub-section,
.section-refresh.invest-split,
.section-refresh.value-props,
.section-refresh.key-numbers,
.section-refresh.discussion-section,
.section-refresh.why-section,
.section-refresh.learn-section,
.section-refresh.modules-section,
.section-refresh.faq-section,
.section-refresh.course-overview,
.section-refresh.free-preview,
.section-refresh.locked-section,
.section-refresh.prereqs,
.section-refresh.trust,
.section-refresh.courses-section,
.section-refresh.news-section,
.section-refresh.chapter-content,
.section-refresh.investing-hero-wrap,
.section-refresh.course-nav-section {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* Investing page cards — larger radii */
.refresh .hub-card,
.refresh .course-card,
.refresh .news-card,
.refresh .invest-card,
.refresh .why-card,
.refresh .learn-card,
.refresh .module-card,
.refresh .for-card,
.refresh .vp-card,
.refresh .faq-item {
  border-radius: var(--r-card);
}

/* Chapter sidebar — larger radii */
.refresh .chapter-sidebar {
  border-radius: var(--r-card);
}

/* Price card — larger radii */
.refresh .price-card {
  border-radius: var(--r-card);
}


/* ═══════════════════════════════════════════════
   R8e. PHASE 11 — LANDING PAGE
   Hero, showcase slider, bento grid, CTA, blog.
   ═══════════════════════════════════════════════ */

/* Hero — DM Sans heading */
.refresh .aurora-hero h1 {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
  letter-spacing: -0.03em;
}

/* Float cards — larger border-radius */
.refresh .float-card {
  border-radius: var(--r-panel);
}

@media (max-width: 640px) {
  .refresh .float-card {
    border-radius: 16px;
  }
}

/* Float card section headings — DM Sans */
.refresh .float-card h2 {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
  letter-spacing: -0.025em;
}

/* Bento cells — larger radius, smoother hover */
.refresh .bento-cell {
  border-radius: var(--r-card);
}

/* Bento headings — DM Sans */
.refresh .bento-cell h3 {
  font-family: var(--font-heading);
  font-feature-settings: 'ss02', 'ss03', 'ss04';
  letter-spacing: -0.02em;
}

/* Slider cards — larger radius */
.refresh .slider-card {
  border-radius: var(--r-card);
}

/* Blog cards — larger radius */
.refresh .blog-card {
  border-radius: var(--r-card);
}

/* CTA section input — refined border-radius */
.refresh .pill-form input[type="email"] {
  border-radius: 100px;
}

.refresh .pill-form button {
  border-radius: 100px;
}


/* ═══════════════════════════════════════════════
   R9. FOOTER REFRESH
   Editorial footer with refined spacing and
   cleaner typography.
   ═══════════════════════════════════════════════ */

/* Footer top — refined grid */
.refresh footer .footer-top {
  gap: 2rem;
}

/* Footer column headers — DM Sans */
.refresh footer .footer-col h3 {
  font-family: 'DM Sans', var(--font, 'Inter', sans-serif);
  font-size: .72rem;
  letter-spacing: .14em;
}

/* Footer description — tighter */
.refresh footer .footer-desc {
  font-size: .82rem;
  max-width: 240px;
}

/* Footer links — slightly smaller, refined spacing */
.refresh footer .footer-col ul {
  gap: .55rem;
}

.refresh footer .footer-col ul li a {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
}

.refresh footer .footer-col ul li a:hover {
  color: #E8A020;
}

/* Disclaimer — cleaner card treatment */
.refresh footer .footer-disclaimer {
  border-radius: var(--r-card, 16px);
  padding: 1rem 1.25rem;
  font-size: .74rem;
  line-height: 1.65;
  background: rgba(255,255,255,.03);
  border-left: 2px solid rgba(232,160,32,.35);
}

/* Affiliate text — subtler */
.refresh footer .footer-affiliate {
  font-size: .7rem;
  color: rgba(255,255,255,.3);
}

/* Footer bottom — refined */
.refresh footer .footer-bottom {
  font-size: .76rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 1.5rem;
}

/* Logo in footer — DM Sans wordmark */
.refresh footer .footer-logo .logo-text {
  font-size: 19px;
}


/* ═══════════════════════════════════════════════
   R10. REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .content-panel,
  .card-muted,
  .hover-fade {
    transition-duration: 0.01s !important;
  }
}