/* Sermon Helper — public lectionary/EOL pages, "Sage Chapel v2" layout.
   Loaded AFTER app.css by views/lectionary/_head.ejs, and scoped entirely under
   body.lect-page, so it restyles ONLY the crawlable public pages (hub, sunday,
   calendar, publisher, reverse-*, freebies, denom-hub, what-sunday) to match the
   Lovable redesign (sermon-seedling-space). The authenticated app — which shares
   app.css but never carries .lect-page — is untouched.

   Palette/fonts already match (app.css is Sage Chapel); this file only changes
   COMPOSITION: bigger editorial hero, airy white rounded cards with hover lift,
   full-width tinted bands, a centered email band, a light footer. */

/* ---- roomier page width (Lovable max-w-6xl = 72rem) --------------------- */
body.lect-page .wrap-narrow { max-width: 72rem; }

/* ---- hero: large serif display with an italic sage accent --------------- */
body.lect-page main > h1:first-of-type,
body.lect-page .sc-hero h1 {
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-bottom: 0.5em;
}
body.lect-page h1 .accent,
body.lect-page .sc-hero .accent { font-style: italic; color: var(--sage); }
body.lect-page main > .lead:first-of-type,
body.lect-page .sc-hero .lead { max-width: 44ch; }
body.lect-page .eyebrow { margin-bottom: 1rem; }

/* section rhythm — a touch more air between blocks */
body.lect-page main h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-top: 2.5rem; }
body.lect-page main h2.mt-3, body.lect-page main h2.mt-4 { margin-top: 3rem; }

/* ---- cards: white, rounded, airy, lift on hover ------------------------- */
body.lect-page .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
body.lect-page .card {
  background: #fff;
  border: 1px solid rgba(31, 42, 36, 0.06);
  border-radius: 1rem;
  padding: 1.5rem 1.6rem;
  gap: 0.35rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
body.lect-page .card:hover {
  border-color: rgba(125, 155, 118, 0.45);
  box-shadow: 0 18px 40px -24px rgba(31, 42, 36, 0.45);
  transform: translateY(-2px);
}
body.lect-page .card h3 { font-size: 1.35rem; }
/* the "this Sunday" feature card — larger, with a terracotta "Open" cue */
body.lect-page .card-feature {
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  border-radius: 1.25rem;
}
body.lect-page .card-feature h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
body.lect-page .card-feature .muted::after,
body.lect-page .card-feature .text-sm:last-child { color: var(--ink-muted); }

/* ---- full-width tinted band (Lovable bg-sage/30 border-y) --------------- */
body.lect-page .sc-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: rgba(220, 229, 212, 0.5); /* --mist / pale sage */
  border-top: 1px solid rgba(31, 42, 36, 0.06);
  border-bottom: 1px solid rgba(31, 42, 36, 0.06);
  margin-top: 3.5rem;
}
body.lect-page .sc-band-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter);
}
body.lect-page .sc-band-inner > h2:first-child { margin-top: 0; }
body.lect-page .sc-band .denom-pills { gap: 0.5rem; }

/* ---- email subscribe band (Lovable EmailSubscribeBand) ------------------ */
body.lect-page .sc-email-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 3.5rem;
  background: rgba(220, 229, 212, 0.5);
  border-top: 1px solid rgba(31, 42, 36, 0.06);
  border-bottom: 1px solid rgba(31, 42, 36, 0.06);
  text-align: center;
}
body.lect-page .sc-email-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--gutter);
}
body.lect-page .sc-email-band h3 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
body.lect-page .sc-email-band h3 .accent { font-style: italic; color: var(--sage); }
body.lect-page .sc-email-band p { color: var(--ink-muted); max-width: 34rem; margin: 0 auto 2rem; }
body.lect-page .sc-email-form {
  display: flex;
  gap: 0.75rem;
  max-width: 32rem;
  margin: 0 auto;
}
body.lect-page .sc-email-form input[type="email"] {
  flex: 1;
  height: 3rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(31, 42, 36, 0.15);
  background: #fff;
  font: inherit;
}
body.lect-page .sc-email-form input[type="email"]:focus { outline: none; border-color: var(--sage); }
body.lect-page .sc-email-form .btn { height: 3rem; border-radius: 0.5rem; }
body.lect-page .sc-email-band .alert { margin-bottom: 1rem; }
@media (max-width: 560px) {
  body.lect-page .sc-email-form { flex-direction: column; }
}

/* ---- nav: cleaner logo mark (sage square + cream dot) ------------------- */
body.lect-page .site-header { background: transparent; border-bottom: 1px solid rgba(31, 42, 36, 0.06); }
body.lect-page .masthead-inner { max-width: 72rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
body.lect-page .brand-mark {
  background: var(--sage);
  color: transparent;
  border-radius: 8px;
  position: relative;
  font-size: 0;
}
body.lect-page .brand-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--cream);
}
body.lect-page .brand-name { font-size: 1.3rem; font-weight: 600; }
body.lect-page .brand-name em { color: inherit; font-style: normal; }
body.lect-page .brand-tagline { display: none; }
body.lect-page .primary-menu a { border-bottom: none; font-weight: 500; color: var(--ink-soft); }
body.lect-page .primary-menu a:hover, body.lect-page .primary-menu a.is-active { color: var(--ink-green); background: transparent; }
/* the "Start free" pill — ink, not amber, per Lovable */
body.lect-page .primary-menu .btn-amber {
  background: var(--ink-green);
  border-color: var(--ink-green);
  color: var(--cream);
  border-radius: 0.5rem;
}
body.lect-page .primary-menu .btn-amber:hover { background: var(--sage); border-color: var(--sage); color: var(--cream); }

/* ---- footer: light, italic serif tagline + link row (Lovable) ---------- */
body.lect-page .site-footer {
  background: transparent;
  color: var(--ink-muted);
  border-top: 1px solid rgba(31, 42, 36, 0.06);
  margin-top: 0;
  padding: 2.5rem 0;
}
body.lect-page .site-footer a { color: var(--ink-muted); text-decoration: none; }
body.lect-page .site-footer a:hover { color: var(--ink-green); }
body.lect-page .footer-inner { max-width: 72rem; align-items: center; }
body.lect-page .footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--ink-muted); }

/* ---- panels: rounded, soft (worship notes, FAQ, forms, calendar feed) --- */
body.lect-page .panel {
  background: #fff;
  border: 1px solid rgba(31, 42, 36, 0.06);
  border-radius: 1rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
body.lect-page .panel + .panel { margin-top: 1rem; }
body.lect-page .panel h3 { font-size: 1.25rem; }
body.lect-page .hymn-list li { padding: 0.6rem 0; }

/* ---- CTA block: soft sage highlight (Lovable in-page call to action) ---- */
body.lect-page .cta-block {
  background: rgba(220, 229, 212, 0.5);
  border: 1px solid rgba(125, 155, 118, 0.28);
  border-radius: 1.25rem;
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  margin-top: 3rem;
}
body.lect-page .cta-block h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.5rem; }
body.lect-page .cta-block .muted { margin-bottom: 1.25rem; }

/* forms inside panels — modern inputs */
body.lect-page .panel input[type="text"],
body.lect-page .panel input[type="email"] {
  border-radius: 0.5rem;
  border: 1px solid rgba(31, 42, 36, 0.15);
}
body.lect-page .panel input:focus { outline: none; border-color: var(--sage); }

/* screen-reader-only label helper */
body.lect-page .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- denom pills: soft sage chips ------------------------------------- */
body.lect-page .denom-pill { background: #fff; border: 1px solid rgba(31, 42, 36, 0.06); border-radius: 0.5rem; padding: 0.55rem 0.9rem; font-family: var(--font-display); font-weight: 500; }
body.lect-page .denom-pill:hover { border-color: rgba(125, 155, 118, 0.45); background: #fff; }

/* ======================================================================
   Lovable component library — faithful to sermon-seedling-space/src/routes
   ====================================================================== */

/* ---- hero eyebrow as serif-italic (Lovable p.font-serif.italic) --------- */
body.lect-page .sc-eyebrow { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--sage); margin-bottom: 1rem; letter-spacing: 0; text-transform: none; }
body.lect-page .sc-eyebrow::before { display: none; }

/* ---- hero pill: "This Sunday: … · Green" (calendar) --------------------- */
body.lect-page .sc-pill { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.65rem; background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 999px; padding: 0.5rem 1.15rem; font-size: 0.9rem; }
body.lect-page .sc-pill .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sage); flex: none; }

/* ---- deadline badge: pulsing (publisher) ------------------------------- */
body.lect-page .sc-deadline { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(196,101,74,0.1); color: var(--amber); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.5rem; }
body.lect-page .sc-deadline .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--amber); animation: sc-pulse 1.6s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- search form (reverse) --------------------------------------------- */
body.lect-page .sc-search { display: flex; gap: 0.75rem; max-width: 36rem; }
body.lect-page .sc-search input[type="text"] { flex: 1; height: 3rem; padding: 0 1rem; border-radius: 0.5rem; border: 1px solid rgba(31,42,36,0.15); background: #fff; font: inherit; }
body.lect-page .sc-search input:focus { outline: none; border-color: var(--sage); }
body.lect-page .sc-search .btn { height: 3rem; border-radius: 0.5rem; }
@media (max-width: 560px) { body.lect-page .sc-search { flex-direction: column; } }

/* ---- freebie grid: cards with kind badge (freebies) -------------------- */
body.lect-page .sc-freebie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
body.lect-page .sc-freebie { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 0.75rem; padding: 1.5rem; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease); }
body.lect-page a.sc-freebie:hover { border-color: rgba(125,155,118,0.45); box-shadow: 0 18px 40px -24px rgba(31,42,36,0.45); transform: translateY(-2px); text-decoration: none; }
body.lect-page .sc-freebie-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
body.lect-page .sc-freebie h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.5rem; }
body.lect-page .sc-freebie p { font-size: 0.9rem; color: var(--ink-muted); line-height: 1.55; margin: 0 0 1.5rem; flex: 1; }
body.lect-page .sc-freebie .sc-dl { font-size: 0.9rem; font-weight: 600; color: var(--amber); display: inline-flex; align-items: center; gap: 0.3rem; }
body.lect-page a.sc-freebie:hover .sc-dl { transform: translateX(2px); }
body.lect-page .sc-freebie .sc-generating { font-size: 0.85rem; color: var(--ink-muted); }
body.lect-page .sc-filemeta { font-size: 0.75rem; color: var(--ink-muted); }

/* ---- kind badge (PDF / PNG / TXT) -------------------------------------- */
body.lect-page .sc-badge { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 0.25rem; text-transform: uppercase; }
body.lect-page .sc-badge.pdf { background: rgba(196,101,74,0.1); color: var(--amber); }
body.lect-page .sc-badge.png { background: rgba(125,155,118,0.15); color: var(--sage); }
body.lect-page .sc-badge.txt, body.lect-page .sc-badge.ics { background: rgba(31,42,36,0.1); color: var(--ink); }

/* ---- year-ahead list: one container, divide-y rows (calendar/what-sunday) */
body.lect-page .sc-yearlist { background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 1.25rem; overflow: hidden; }
body.lect-page .sc-yearlist li { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(31,42,36,0.05); }
body.lect-page .sc-yearlist li:last-child { border-bottom: none; }
body.lect-page .sc-yearlist li:hover { background: rgba(245,240,232,0.5); }
body.lect-page .sc-yearlist .sc-row-main { flex: 1; min-width: 0; }
body.lect-page .sc-yearlist .sc-row-title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; margin: 0; }
body.lect-page .sc-yearlist .sc-row-sub { font-size: 0.85rem; color: var(--ink-muted); margin: 0.15rem 0 0; }
body.lect-page .sc-yearlist .sc-row-right { text-align: right; flex: none; }
body.lect-page .sc-yearlist .sc-row-date { font-size: 0.85rem; font-weight: 600; margin: 0; }
body.lect-page .sc-yearlist .sc-row-color { font-size: 0.75rem; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 0.35rem; justify-content: flex-end; margin: 0.25rem 0 0; }

/* ---- season badge + color dot ------------------------------------------ */
body.lect-page .sc-season { flex: none; margin-top: 0.35rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; padding: 0.15rem 0.5rem; border-radius: 0.25rem; background: var(--sage); }
body.lect-page .sc-season.advent { background: #4b3a7a; }
body.lect-page .sc-season.christmas, body.lect-page .sc-season.easter { background: #d4a94a; }
body.lect-page .sc-season.lent { background: #5d3a6b; }
body.lect-page .sc-season.pentecost { background: var(--amber); }
body.lect-page .sc-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sage); display: inline-block; }

/* ---- subscribe card (calendar) ----------------------------------------- */
body.lect-page .sc-subscribe { background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 1.25rem; padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); }
body.lect-page .sc-subscribe h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.5rem; }
body.lect-page .sc-feedurl { background: var(--cream); border: 1px solid rgba(31,42,36,0.05); border-radius: 0.4rem; padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.85rem; word-break: break-all; margin: 0 0 1.5rem; }
body.lect-page .sc-btn-outline { display: inline-flex; align-items: center; height: 2.85rem; padding: 0 1.25rem; border-radius: 0.5rem; border: 1px solid rgba(31,42,36,0.15); background: transparent; color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
body.lect-page .sc-btn-outline:hover { border-color: rgba(31,42,36,0.4); text-decoration: none; color: var(--ink); }

/* ---- accordion FAQ (no-JS <details>) ----------------------------------- */
body.lect-page .sc-accordion { display: flex; flex-direction: column; gap: 0.75rem; }
body.lect-page .sc-faq { background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 0.75rem; overflow: hidden; }
body.lect-page .sc-faq > summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-size: 1.25rem; }
body.lect-page .sc-faq > summary::-webkit-details-marker { display: none; }
body.lect-page .sc-faq > summary::after { content: '+'; color: var(--amber); font-size: 1.6rem; line-height: 1; flex: none; transition: transform .2s var(--ease); }
body.lect-page .sc-faq[open] > summary::after { content: '+'; transform: rotate(45deg); }
body.lect-page .sc-faq > summary:hover { background: rgba(245,240,232,0.5); }
body.lect-page .sc-faq-body { padding: 0 1.5rem 1.5rem; color: var(--ink-muted); line-height: 1.6; }

/* ---- dark ink CTA band (freebies / reverse / publisher) ---------------- */
body.lect-page .sc-cta-dark { width: 100vw; margin-inline: calc(50% - 50vw); background: var(--ink-green); color: var(--cream); padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--gutter); text-align: center; }
body.lect-page .sc-cta-dark-inner { max-width: 48rem; margin: 0 auto; }
body.lect-page .sc-cta-dark h2 { color: var(--cream); font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); line-height: 1.12; margin-bottom: 1.25rem; }
body.lect-page .sc-cta-dark h2 .accent { font-style: italic; color: var(--fern); }
body.lect-page .sc-cta-dark p { color: rgba(245,240,232,0.72); max-width: 34rem; margin: 0 auto 2rem; line-height: 1.6; }
body.lect-page .sc-cta-dark .btn-amber { border-radius: 0.5rem; }
body.lect-page .sc-cta-dark a { color: var(--cream); }

/* ---- numbered options list (publisher) --------------------------------- */
body.lect-page .sc-options { display: flex; flex-direction: column; gap: 1.25rem; }
body.lect-page .sc-option { display: flex; gap: 1.5rem; background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 0.75rem; padding: 1.75rem 2rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
body.lect-page .sc-option:hover { border-color: rgba(125,155,118,0.45); box-shadow: 0 18px 40px -24px rgba(31,42,36,0.45); }
body.lect-page .sc-option .sc-num { font-family: var(--font-display); font-style: italic; font-size: 2rem; color: var(--amber); flex: none; line-height: 1; }
body.lect-page .sc-option h3 { font-size: 1.5rem; margin: 0 0 0.5rem; }
body.lect-page .sc-option p { margin: 0; color: var(--ink-muted); line-height: 1.6; }

/* ---- compare cards (publisher "what breaks") --------------------------- */
body.lect-page .sc-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
body.lect-page .sc-compare-card { position: relative; background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 1.25rem; padding: 2rem; }
body.lect-page .sc-compare-card.flagged { border-color: rgba(196,101,74,0.25); }
body.lect-page .sc-compare-card .sc-flag { position: absolute; top: -0.75rem; left: 1.5rem; background: var(--amber); color: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 0.25rem; }
body.lect-page .sc-compare-card h3 { font-size: 1.25rem; margin: 0 0 0.75rem; }
body.lect-page .sc-compare-card p { margin: 0; font-size: 0.9rem; color: var(--ink-muted); line-height: 1.6; }
body.lect-page .sc-inline-dark { background: var(--ink-green); color: var(--cream); border-radius: 1.25rem; padding: 1.75rem 2rem; margin-top: 2rem; line-height: 1.6; }
body.lect-page .sc-inline-dark .accent { font-family: var(--font-display); font-style: italic; color: var(--fern); }

/* narrow prose column (publisher "what's happening") */
body.lect-page .sc-prose { max-width: 46rem; }
body.lect-page .sc-prose p { margin: 0 0 1.15rem; line-height: 1.7; color: var(--ink-soft); }
body.lect-page .sc-prose ul, body.lect-page .sc-prose ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
body.lect-page .sc-prose li { margin: 0 0 0.75rem; line-height: 1.65; color: var(--ink-soft); }

/* ---- book grid (reverse "browse by book") ------------------------------ */
body.lect-page .sc-bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
body.lect-page .sc-bookchip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: #fff; border: 1px solid rgba(31,42,36,0.06); border-radius: 0.5rem; padding: 0.7rem 1rem; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
body.lect-page .sc-bookchip:hover { border-color: rgba(125,155,118,0.45); box-shadow: 0 8px 20px -14px rgba(31,42,36,0.4); text-decoration: none; color: inherit; }
body.lect-page .sc-bookchip .name { font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.lect-page .sc-bookchip .count { font-size: 0.75rem; color: var(--ink-muted); flex: none; font-variant-numeric: tabular-nums; }