/* Clearview Accounting & Advisory — Slate + Gold, Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand colors */
  --color-primary:         #334155;
  --color-primary-light:   #475569;
  --color-primary-dark:    #1e293b;
  --color-primary-rgb:     51, 65, 85;
  --color-secondary:       #111827;
  --color-secondary-light: #1f2937;
  --color-accent:          #ca8a04;
  --color-accent-light:    #eab308;

  /* Surfaces */
  --color-bg:              #fafaf9;
  --color-surface:         #f0eeeb;
  --color-surface-light:   #e7e5e4;
  --color-border:          rgba(0, 0, 0, 0.06);

  /* Text */
  --color-text:            #1c1917;
  --color-heading:         #1c1917;
  --color-text-secondary:  #57534e;
  --color-text-muted:      #a8a29e;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius — conservative */
  --radius:    4px;
  --radius-lg: 8px;

  /* Light theme header */
  --color-header-bg:              rgba(255, 255, 255, 0.8);
  --color-header-border:          rgba(0, 0, 0, 0.06);
  --color-header-scrolled-bg:     rgba(255, 255, 255, 0.95);
  --color-header-scrolled-border: rgba(0, 0, 0, 0.1);
  --shadow-header-scrolled:       0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.06);
}


/* ── Light header overrides ─────────────────────────────────────── */
.site-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header.scrolled {
  background: var(--color-header-scrolled-bg);
  border-bottom-color: var(--color-header-scrolled-border);
  box-shadow: var(--shadow-header-scrolled);
}
.nav-link {
  color: var(--color-text-secondary);
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-text);
}
.logo__short {
  color: var(--color-text);
}
.logo__highlight {
  color: var(--color-primary);
}
.hamburger span {
  background: var(--color-text);
}


/* ── Highlight — gold accent ────────────────────────────────────── */
.highlight {
  color: var(--color-accent);
}


/* ── section--dark cards stay white for light themes ────────────── */
.section--dark {
  background: var(--color-secondary);
  color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: #fff;
}
.section--dark .label {
  color: var(--color-accent);
}
.section--dark p,
.section--dark li {
  color: rgba(255, 255, 255, 0.75);
}
.section--dark .card,
.section--dark [class*="-card"],
.section--dark .faq-item {
  background: #fff;
  color: var(--color-text);
  border-color: rgba(0, 0, 0, 0.06);
}
.section--dark .card h3,
.section--dark .card h4,
.section--dark [class*="-card"] h3,
.section--dark [class*="-card"] h4,
.section--dark .faq-item .faq-item__question span {
  color: var(--color-text);
}
.section--dark .card p,
.section--dark [class*="-card"] p,
.section--dark .card__text {
  color: var(--color-text-secondary);
}
.section--dark .btn--ghost,
.section--dark .btn--outline {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}
.section--dark .btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
.section--dark .card .btn--ghost {
  color: var(--color-primary);
}
.section--dark .highlight {
  color: var(--color-accent-light);
}
/* FAQ accordion icon in dark sections */
.section--dark .faq-item__icon {
  color: var(--color-text-muted);
}
/* Process accordion in dark sections */
.section--dark .pa-title {
  color: #fff;
}
.section--dark .pa-body {
  color: rgba(255, 255, 255, 0.7);
}
.section--dark .pa-num {
  color: rgba(255, 255, 255, 0.4);
}
.section--dark .pa-step[open] .pa-num {
  color: var(--color-accent);
}
.section--dark .pa-step[open] {
  border-left-color: var(--color-accent);
}
.section--dark .pa-step {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.section--dark .pa-icon::before,
.section--dark .pa-icon::after {
  background: rgba(255, 255, 255, 0.5);
}
/* Stats inline in dark */
.section--dark .sti-text {
  color: rgba(255, 255, 255, 0.7);
}
.section--dark .sti-num {
  color: var(--color-accent);
}


/* ── Page banner — dark gradient ────────────────────────────────── */
.page-banner {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 8rem 0 4rem;
  text-align: center;
  position: relative;
}
.page-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.page-banner__label {
  color: var(--color-accent);
}
.page-banner__title {
  color: #fff;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb span {
  color: rgba(255, 255, 255, 0.8);
}
.breadcrumb__sep {
  color: rgba(255, 255, 255, 0.3);
}


/* ── Footer — dark ──────────────────────────────────────────────── */
.site-footer {
  background: var(--color-secondary);
  color: rgba(255, 255, 255, 0.7);
}
.site-footer h4 {
  color: #fff;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.6);
}
.site-footer a:hover {
  color: #fff;
}
.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}


/* ── section--accent band ───────────────────────────────────────── */
.section--accent {
  background: var(--color-primary);
}


/* ── Buttons ────────────────────────────────────────────────────── */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-light);
}


/* ── Cards — clean, no colored borders ──────────────────────────── */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.06);
}


/* ── Team card photo placeholder — no letter circles ────────────── */
.team-card__photo {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}


/* ── Trust bar — warm styling for light bg ──────────────────────── */
.trust-bar__name {
  color: var(--color-text);
}
.trust-bar__value {
  color: var(--color-text-muted);
}
.trust-bar__icon {
  color: var(--color-accent);
}


/* ── Divider stats ──────────────────────────────────────────────── */
.ds-num {
  color: var(--color-primary);
}


/* ── Blog card tag ──────────────────────────────────────────────── */
.blog-card__tag {
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: var(--radius);
  padding: 0.2rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ── Form inputs ────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  transition: border-color 0.2s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.1);
}


/* ── Mobile nav overlay — dark ──────────────────────────────────── */
@media (max-width: 968px) {
  .nav-menu {
    background: var(--color-secondary);
  }
  .nav-menu .nav-link {
    color: rgba(255, 255, 255, 0.8);
  }
  .nav-menu .nav-link:hover {
    color: #fff;
  }
}


/* ── Reviews sidebar cards in light context ─────────────────────── */
.rs-card {
  background: var(--color-surface);
}
.rs-quote {
  color: var(--color-text-secondary);
}
.rs-author {
  color: var(--color-text);
}


/* ── Story timeline ─────────────────────────────────────────────── */
.section--dark .stl-line {
  background: rgba(255, 255, 255, 0.12);
}
.section--dark .stl-dot {
  background: var(--color-accent);
}
.section--dark .stl-year {
  color: rgba(255, 255, 255, 0.3);
}
.section--dark .stl-name {
  color: #fff;
}
.section--dark .stl-desc {
  color: rgba(255, 255, 255, 0.65);
}


/* ── About split-image values ───────────────────────────────────── */
.asi-val {
  background: var(--color-surface);
}
.asi-val h5 {
  color: var(--color-primary);
}


/* ── CTA dark section — use accent for brand line ───────────────── */
.cd-section::before,
.cd-section::after {
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}


/* ── Newsletter in dark sections ────────────────────────────────── */
.section--dark .nl-heading {
  color: #fff;
}
.section--dark .nl-desc {
  color: rgba(255, 255, 255, 0.7);
}
.section--dark .nl-hint {
  color: rgba(255, 255, 255, 0.4);
}
.section--dark .form-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.section--dark .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.section--dark .form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(202, 138, 4, 0.15);
}


/* ── FAQ columns in light theme ─────────────────────────────────── */
.fc-question {
  color: var(--color-text);
}
.fc-answer {
  color: var(--color-text-secondary);
}