/* ============================================================================
   ResumeTailored — shared light "editorial" design system.
   Loaded AFTER each page's own inline <style> block, so these rules override
   the legacy dark/purple theme on equal-specificity selectors (the inline
   blocks use no !important). Covers the base elements plus the shared class
   vocabulary used across the 277 generated SEO pages, the blog, and flyers.
   Warm cream paper + deep forest-green accent + Fraunces/Inter typography.
   ============================================================================ */

:root {
  --bg:        #FAF7F0;
  --bg-alt:    #F1EADD;
  --surface:   #FFFFFF;
  --ink:       #191512;
  --ink-soft:  #57514A;
  --ink-faint: #918A7E;
  --line:      #E7DFD1;
  --line-2:    #D9CFBC;
  --accent:    #1F5C3D;
  --accent-2:  #2E7D53;
  --accent-ink:#153F2A;
  --accent-tint:#E8F0E9;
  --warm:      #B4562E;
  --gold:      #B4832A;
  --danger:    #B23A2E;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px;
  --radius:14px; --radius-sm:9px;
  --shadow-sm: 0 1px 2px rgba(25,21,18,.05), 0 4px 14px rgba(25,21,18,.05);
  --shadow-md: 0 2px 6px rgba(25,21,18,.06), 0 18px 44px rgba(25,21,18,.09);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body { background: var(--bg) !important; color: var(--ink-soft); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .logo, .ft-brand, .article-hero h1 {
  font-family: var(--serif); color: var(--ink); letter-spacing: -0.015em; font-weight: 600;
}
p { color: var(--ink-soft); }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
hr, section { border-color: var(--line) !important; }

/* ── Nav (shared across SEO + blog) ───────────────────────────────────── */
.nav {
  background: rgba(250,247,240,0.85) !important;
  border-bottom: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.logo { color: var(--ink) !important; font-family: var(--serif); }
.badge-ai { background: var(--accent) !important; color: #fff !important; font-family: var(--sans); }
.nav-links a, .nav-login { color: var(--ink-soft) !important; }
.nav-links a:hover { color: var(--accent) !important; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary, .btn.btn-primary {
  background: var(--accent) !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(31,92,61,0.22);
}
.btn-primary:hover { background: var(--accent-ink) !important; }
.btn-outline, .btn-ghost {
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}

/* ── SEO role-page vocabulary ─────────────────────────────────────────── */
.hero .accent, .accent {
  background: none !important; color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}
.hero p { color: var(--ink-soft); }
.hero-note { color: var(--ink-faint) !important; }
.trust { color: var(--ink-soft) !important; }
.trust .st { color: var(--gold) !important; }
.trust .dot { color: var(--line-2) !important; }
.kw span {
  background: var(--accent-tint) !important; border: 1px solid rgba(31,92,61,0.22) !important;
  color: var(--accent-ink) !important;
}
.card, .cards .card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.faq-q { color: var(--ink) !important; }
.faq-a { color: var(--ink-soft) !important; }
.cta-band { background: transparent; }

/* ── Footer (shared) ──────────────────────────────────────────────────── */
.ft { border-top: 1px solid var(--line) !important; background: var(--bg-alt); }
.ft-brand { color: var(--ink) !important; }
.ft-tag, .ft-copy { color: var(--ink-faint) !important; }
.ft-links a { color: var(--ink-soft) !important; }
.ft-links a:hover { color: var(--accent) !important; }

/* ── Blog article vocabulary ──────────────────────────────────────────── */
.article-hero { background: var(--bg-alt) !important; border-bottom: 1px solid var(--line); }
.article-tag, .related-card-tag {
  background: var(--accent-tint) !important; color: var(--accent) !important;
}
.article-meta { color: var(--ink-faint) !important; }
.article-body { color: var(--ink-soft); }
.article-body h2, .article-body h3 { color: var(--ink); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.highlight-box {
  background: var(--accent-tint) !important; border: 1px solid rgba(31,92,61,0.22) !important;
  border-left: 3px solid var(--accent) !important; color: var(--accent-ink) !important;
}
.cta-inline {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.back-link { color: var(--ink-soft) !important; }
.back-link:hover { color: var(--accent) !important; }
.stat-box, .related-card {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.stat-num { color: var(--accent) !important; font-family: var(--serif); }
.stat-label, .related-posts-label { color: var(--ink-faint) !important; }
.related-card-title { color: var(--ink) !important; }

/* ── Motion courtesy: respect reduced-motion everywhere ───────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── Mobile legibility & containment (≤820px only; desktop unchanged) ──────
   On the cream (#FAF7F0) background several shared pages read too faintly on
   phones and some cards run their text off the right edge. Scope every fix to
   the mobile viewport so the desktop editorial look is untouched. */
@media (max-width: 820px) {
  /* Darken the muted text tokens so body/label/FAQ text clears WCAG AA on cream.
     --ink stays #191512; these two were the low-contrast culprits. */
  :root { --ink-soft: #2d2d2d; --ink-faint: #4a4a4a; }
  /* Anything explicitly set to the common light grays becomes readable too. */
  [style*="#9ca3af"], [style*="#94a3b8"], [style*="#a1a1aa"] { color: #4a4a4a !important; }
  /* Never let a page scroll sideways, and force long unbreakable strings
     (e.g. yourname.resumetailored.com) to wrap instead of overflowing a card. */
  html, body { overflow-x: hidden !important; }
  .feat-card, .card, .cards .card, .feature-row, .feature-body, .container { overflow-wrap: anywhere; word-break: break-word; }
  /* Give white cards a light edge so they don't float on the cream. */
  .card, .cards .card { border: 1px solid rgba(0,0,0,0.08) !important; }

  /* ── Headings must never be faint on mobile ──────────────────────────────
     The biggest offender: headings drawn as GRADIENT-CLIPPED text
     (-webkit-text-fill-color: transparent over a light gradient) render
     near-white on cream. Blog titles, step headings, the Optimization Hub
     title, FAQ questions and card headings were all nearly invisible. On
     mobile, force every heading (and its coloured word-spans) to a solid dark
     ink and kill the gradient fill, so readability always wins. app.html does
     not load this file, so its dark editor/auth surfaces are unaffected. */
  h1, h2, h3, h4,
  h1 span, h2 span, h3 span, h4 span,
  .faq-q, .feature-body h3, .feat-card h2, .feat-card h3,
  [class*="title"], [class*="heading"], [class*="headline"] {
    -webkit-text-fill-color: #1a1a1a !important;
    color: #1a1a1a !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
  }
  /* Light-tint chips/cards (e.g. the lavender "ATS Match Rate" pill) had light
     text on a light fill — make their text dark too. */
  [style*="#818CF8"], [style*="#a5b4fc"], [style*="#c4b5fd"], [style*="#c7d2fe"] { color: #2d2d2d !important; }
  /* Legacy dark-theme slate/near-white text colors left inline on some tool
     pages (labels like "YOUR RESUME", "JOB DESCRIPTION") — invisible on cream. */
  [style*="#e2e8f0"], [style*="#f1f5f9"], [style*="#cbd5e1"], [style*="#e5e7eb"],
  [style*="#d1d5db"], [style*="#f8fafc"], [style*="#94a3b8"] { color: #2d2d2d !important; }
}