/* ============================================================================
   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 ─────────────────────────────────────────────────────────────── */
/* Paint the cream on the ROOT element, not just <body>. During a full
   page-to-page navigation the browser briefly shows the base canvas before the
   new document's <body> paints; if only <body> is cream the base defaults to
   white and you get a "dead white flash" between tabs. Cream on <html> makes
   that intermediate frame cream instead. */
html { background: var(--bg); }
body { background: var(--bg) !important; color: var(--ink-soft); -webkit-font-smoothing: antialiased; }

/* Cross-document (MPA) View Transitions: cross-fade between our static pages
   instead of a hard reload flash. This lives in theme.css — a render-blocking
   <head> stylesheet present on both ends of every navigation — rather than
   being injected late by site-nav.js's deferred script, because the opt-in has
   to be parsed BEFORE the incoming page's first paint for the transition to
   run. Chromium animates it; other browsers ignore it. Off under reduced-motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
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-soft) !important; }
/* !important below: several blog post templates set their own
   `.article-body p{color:...}` etc. in an inline <style> block. That page-own
   rule is MORE SPECIFIC than a bare `p{}`/`.article-body{}` rule here (two
   selectors vs one), so it silently wins even though this file loads after —
   load order only breaks ties on EQUAL specificity. Without !important here,
   dozens of older posts keep their original dark-theme gray/near-white body
   text on the now-light page. */
.article-body, .article-body p, .article-body li, .article-body em,
.article-body blockquote, .article-body td { color: var(--ink-soft) !important; }
.article-body h2, .article-body h3, .article-body th { color: var(--ink) !important; }
.article-body strong, .article-body b { color: var(--ink) !important; }
.article-body a { color: var(--accent) !important; text-decoration: underline; text-underline-offset: 2px; }
.highlight-box p { color: var(--accent-ink) !important; }
.related-posts-label { color: var(--accent) !important; }
/* Comparison-table semantic colors: same #34d399/#f87171 dark-mode pair used
   throughout the tool pages, too light on a white/cream table cell. */
.comparison-table .win, .win { color: var(--accent) !important; }
.comparison-table .lose, .lose { color: var(--danger) !important; }
/* Plain <footer> links (Privacy/Terms/Home) on ~22 blog post templates, e.g.
   `footer a{color:#2E7D53}` — scoped by tag so it can't outrank the SEO
   pages' own `.ft-links a` (a class selector, which is already more specific
   and unaffected by this). Excludes the "Check My Resume Free"-style CTA
   button that several of these same pages ALSO place inside <footer> — that
   button already sets its own white text on a solid green background; this
   rule would otherwise force the same green onto the text, painting it
   invisible on its own button. */
footer a:not([style*="background:#1F5C3D"]) { color: var(--accent) !important; }
.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);
}
/* Article CTA buttons ("Stop editing. Start submitting." etc.) were authored
   with the old indigo/purple SaaS gradient inline — every blog post shares
   this exact markup, so one shared rule here fixes them all at once. */
.cta-inline a {
  background: var(--accent) !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(31,92,61,0.3) !important;
}
.cta-inline a:hover { background: var(--accent-ink) !important; }
.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.
     `clip`, not `hidden` — `overflow-x:hidden` makes the UA compute
     overflow-y as `auto` per spec, turning body into its own scroll
     container; on mobile Safari that breaks position:sticky on #snav (it
     scrolls away with the page instead of staying pinned), reported directly
     as "no hamburger" once scrolled past the hero on any page this file
     covers. `clip` blocks horizontal overflow without that side effect. */
  html, body { overflow-x: clip !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*="#2E7D53"], [style*="#8FD3AC"], [style*="#8FD3AC"], [style*="#C9E3D4"] { 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; }
}
