/* =========================================================================
   Lindy-inspired light theme for DailyFix.
   Loaded LAST (after style.css + aura.css) so it re-skins the site to a
   clean, cream + royal-blue, Manrope look without touching the base files.
   To revert the whole redesign: remove the <link> to this file in header.php.
   ========================================================================= */

/* ---------- Palette + type tokens (Lindy) ---------- */
:root {
  --bg: #FCF9F8;          /* warm cream page background */
  --ink: #0F1E2E;         /* dark navy text */
  --muted: #5B6B7B;       /* slate secondary text */
  --line: #E9E9EB;        /* hairline borders */
  --line-2: #D6D9DE;
  --panel: #F4F1EE;       /* subtle warm panel */
  --card: #FFFFFF;
  --accent: #2A66FF;      /* royal blue */
  --accent-2: #0A84FF;    /* bright blue */
  --accent-3: #2A66FF;
  --radius: 14px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Drop the serif/italic + shiny display treatments — Lindy is all Manrope */
.font-playfair,
.nav-logo-text,
.hero-line1,
.post-header h1,
.newsletter h2,
.steps-watermark {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-style: normal !important;
}
.shiny-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  filter: none;
  animation: none;
}

/* ---------- Kill the dark decorative layers ---------- */
.aurora-bg,
.aura-guides { display: none !important; }

/* ---------- Nav (light, solid) ---------- */
.site-nav { background: rgba(252,249,248,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-nav.is-scrolled { background: rgba(252,249,248,0.94); box-shadow: 0 1px 0 var(--line); }
.nav-logo { color: var(--ink); }
.nav-logo-mark { background: var(--accent); }
.nav-pill { background: #fff; border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-pill a { color: var(--muted); }
.nav-pill a:hover, .nav-pill a.active { background: #EEF2FF; color: var(--accent); }
.nav-burger { background: #fff; border: 1px solid var(--line); }
.nav-burger span { background: var(--ink); }
.mobile-nav { background: rgba(252,249,248,0.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.mobile-nav a { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #1f57e6; box-shadow: 0 8px 24px rgba(42,102,255,0.28); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(42,102,255,0.28); }
.btn-outline { border: 1.5px solid var(--line-2); color: var(--ink); }
.btn-outline:hover { background: #F1EFEC; }
.btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { background: #F1EFEC; }

/* ---------- Hero (light, compact) ---------- */
.hero, .hero-compact { background: var(--bg); }
.hero-base, .hero-reveal, .hero-vignette, .hero-scroll-cue { display: none !important; }
.hero-content h1, .hero-line1 { color: var(--ink); }
.hero-sub { color: var(--muted); }

/* ---------- Eyebrows ---------- */
.eyebrow { color: var(--accent); }
.aura-eyebrow { color: var(--muted); }
.aura-eyebrow .dot { background: var(--accent); }
.aura-eyebrow .tag { border: 1px solid var(--line); color: var(--muted); }
.section-head p { color: var(--muted); }

/* ---------- Cards: solid white, soft shadow (replaces glass) ---------- */
.liquid-glass {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,30,46,0.04), 0 10px 26px rgba(15,30,46,0.06);
}
.liquid-glass::before { display: none; }

.post-card { background: var(--card); border: 1px solid var(--line); }
.post-card:hover { box-shadow: 0 16px 36px rgba(15,30,46,0.10); border-color: var(--line-2); }
.post-card-tag { background: rgba(255,255,255,0.94); color: #16181c; border: 1px solid var(--line); }
.badge-pillar { background: #EEF2FF; color: var(--accent); }
.post-header .post-card-tag { background: #EEF2FF; color: var(--accent); }

/* ---------- Newsletter → Lindy blue feature panel ---------- */
.newsletter { background: var(--accent); box-shadow: 0 20px 50px rgba(42,102,255,0.22); }
.newsletter::before { display: none; }
.newsletter p { color: rgba(255,255,255,0.86); }
.newsletter-form input { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); color: #fff; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.72); }
.newsletter .btn-accent { background: #fff; color: var(--accent); }
.newsletter .btn-accent:hover { background: #f0f3ff; box-shadow: none; }

/* ---------- Logo cloud ---------- */
.logo-cloud-kicker { color: var(--muted); }
.logo-cloud-grid span { color: #9aa4ad; }
.logo-cloud-grid span:hover { color: var(--ink); }

/* ---------- Single post ---------- */
.post-answer { color: var(--ink); }
.post-body a { color: var(--accent); }
.author-bio { background: #fff; border: 1px solid var(--line); }
.post-body h2 { scroll-margin-top: 96px; }
.post-body h3 { scroll-margin-top: 96px; }

/* ---------- Blog article: sticky Table-of-Contents sidebar (Lindy) ---------- */
.post-layout { max-width: 1080px; margin: 40px auto 0; padding: 0 24px; }
@media (min-width: 1040px) {
  .post-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
}
.post-layout .post-body { max-width: 760px; margin: 0; padding: 0 0 80px; }
.post-layout.is-single { display: block; }
.post-layout.is-single .post-body { max-width: 720px; margin: 0 auto; }

.post-toc { display: none; }
@media (min-width: 1040px) {
  .post-toc { display: block; position: sticky; top: 96px; }
}
.post-toc-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--muted); margin-bottom: 14px;
}
.post-toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.post-toc nav a {
  font-size: 14px; line-height: 1.45; color: var(--muted);
  padding: 7px 0 7px 16px; margin-left: -2px;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.post-toc nav a:hover { color: var(--ink); }
.post-toc nav a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* ---------- Share row (X / LinkedIn / WhatsApp / copy) ---------- */
.share-row { flex-wrap: wrap; }
.share-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.share-row .share-btn {
  width: 40px; height: 40px; padding: 0; gap: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.share-row .share-btn:hover { background: #EEF2FF; border-color: var(--line-2); color: var(--accent); }
#copyLinkBtn { position: relative; }
.share-copied {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
#copyLinkBtn.is-copied .share-copied { opacity: 1; }

/* ---------- Category FAQ accordion ---------- */
.faq-container { max-width: 760px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 2px 20px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] { border-color: var(--line-2); box-shadow: 0 6px 20px rgba(15,30,46,0.05); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 16px 0;
  font-weight: 600; font-size: 16px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 22px; font-weight: 400; line-height: 1; color: var(--muted);
  transition: transform 0.2s ease; flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-answer { padding: 0 0 18px; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }