/* ==========================================================================
   Grow Your Soul — the warmer, more modern reading area
   Loaded after site.css and nature.css. Remove this file (and modern.js, and
   their two lines in build.py) and the site goes back exactly as it was.
     1. Fonts: Lora for headings, Source Sans 3 for reading text (Quran verses keep Source Serif)
     2. Colour bands that follow each section's element
     3. One deep band per page (the "Learn, then live it" steps)
     4. Cards with pictures, soft corners and a gentle lift
     5. Picture breaks with a verse (added by modern.js)
     6. Content eases in as it scrolls into view
   ========================================================================== */

:root {
  --font-display: "Lora", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --sand: #F5EEE2;
  --sand-2: #EFE5D3;
  --deep: #1E3527;
}
body[data-section="home"]       { --accent-soft:#ECF1E4; --deep:#1E3527; }
body[data-section="god"]        { --deep:#3A2716; }
body[data-section="submission"] { --deep:#2F2B17; }
body[data-section="practices"]  { --deep:#123C47; }
body[data-section="quran"]      { --deep:#3D2E0E; }
body[data-section="media"]      { --deep:#1D2D4A; }
body[data-section="grow"]       { --deep:#173826; }

/* ---- 1. Type ------------------------------------------------------------ */
html body[data-visual][data-section] h1, html body[data-visual][data-section] h2, html body[data-visual][data-section] h3 {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 560; letter-spacing: -0.015em;
}
html body[data-visual][data-section] h3 { font-weight: 600; letter-spacing: -0.005em; }
html body[data-visual][data-section] .hero h1 { font-weight: 520; letter-spacing: -0.02em; }
html body[data-visual][data-section] .block-head h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem); line-height: 1.1; }
html body[data-visual][data-section] .block-head .intro { font-weight: 400; color: #3E4A58; }
html body[data-visual][data-section] .prose > p,
html body[data-visual][data-section] .faq .faq-body { font-size: clamp(1.1rem, 1.04rem + .25vw, 1.24rem); line-height: 1.78; color: #26303B; }
html body[data-visual][data-section] .band-intro .prose > p:first-child { font-size: clamp(1.25rem, 1.15rem + .45vw, 1.55rem); font-weight: 400; line-height: 1.55; }
html body[data-visual][data-section] .card p, html body[data-visual][data-section] .related-card .rc-note { font-size: 1rem; color: #3E4A58; }
html body[data-visual][data-section] .kicker { letter-spacing: .16em; font-weight: 700; }

/* ---- 2. Colour bands ---------------------------------------------------- */
html body[data-visual][data-section] .band-tint {
  background:
    radial-gradient(1200px 380px at 12% 0%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 60%, var(--paper)) 100%);
}
html body[data-visual][data-section] .band.is-verses,
html body[data-visual][data-section] .band:has(.growth) { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%); }
html body[data-visual][data-section] .is-verses > .wrap { background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(60,40,10,.05), 0 18px 50px rgba(60,40,10,.07); }
/* the thin rule only between two plain bands; coloured bands speak for themselves */
html body[data-visual][data-section] .band-tint::before,
html body[data-visual][data-section] .band-tint + .band::before,
html body[data-visual][data-section] .band.is-verses::before,
html body[data-visual][data-section] .band.is-verses + .band::before,
html body[data-visual][data-section] .band:has(.growth)::before,
html body[data-visual][data-section] .band:has(.growth) + .band::before,
html body[data-visual][data-section] .pic-break + .band::before,
html body[data-visual][data-section] .band-accent + .band::before { display: none; }
/* bands meet edge to edge, so their own padding sets the rhythm */
html body[data-visual][data-section] .band-tint, html body[data-visual][data-section] .band.is-verses,
html body[data-visual][data-section] .band:has(.growth), html body[data-visual][data-section] .band-accent,
html body[data-visual][data-section] .band-tint + .band, html body[data-visual][data-section] .band-accent + .band,
html body[data-visual][data-section] .pic-break + .band { padding-top: clamp(3.4rem, 2.6rem + 3.4vw, 5.6rem); }

/* ---- 3. The deep band --------------------------------------------------- */
html body[data-visual][data-section] .band-accent {
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(226,178,76,.18), transparent 65%),
    radial-gradient(700px 400px at 0% 100%, rgba(255,255,255,.06), transparent 70%),
    var(--deep);
  color: rgba(255,255,255,.86);
}
html body[data-visual][data-section] .band-accent h2 { color: #fff; }
html body[data-visual][data-section] .band-accent .intro { color: rgba(255,255,255,.74) !important; }
html body[data-visual][data-section] .band-accent .kicker { color: #E2B24C; }
html body[data-visual][data-section] .band-accent .framework-step {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: .55em 1.2em; font-weight: 500;
}
html body[data-visual][data-section] .band-accent .framework-arrow { color: #E2B24C; }

/* ---- 4. Cards ----------------------------------------------------------- */
html body[data-visual][data-section] .card,
html body[data-visual][data-section] .related-card {
  background: #fff; border: 1px solid rgba(30,40,30,.07); border-radius: 18px;
  padding: 1.5rem 1.5rem 1.4rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,40,20,.04), 0 10px 30px rgba(30,40,20,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
html body[data-visual][data-section] a.card:hover,
html body[data-visual][data-section] .related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(30,40,20,.06), 0 22px 48px rgba(30,40,20,.12);
}
html body[data-visual][data-section] .band-tint .card, html body[data-visual][data-section] .band-tint .related-card { background: rgba(255,255,255,.88); }
html body[data-visual][data-section] .grid, html body[data-visual][data-section] .grid-4, html body[data-visual][data-section] .cards .grid { gap: 1.4rem; }
html body[data-visual][data-section] .grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card-pic {
  display: block; margin: -1.5rem -1.5rem 1.2rem; aspect-ratio: 16/9; overflow: hidden; background: var(--accent-soft);
}
.card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.card:hover .card-pic img { transform: scale(1.05); }
html body[data-visual][data-section] .related-card .rc-section { color: var(--accent); }

/* ---- 5. Picture break --------------------------------------------------- */
.pic-break {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  min-height: clamp(340px, 52vh, 560px); display: grid; place-items: center;
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter);
}
.pic-break .pb-img {
  position: absolute; inset: -18% 0; background: var(--pb) center / cover no-repeat;
  will-change: transform; transform: translate3d(0,0,0);
}
.pic-break::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,18,12,.42), rgba(10,18,12,.68));
}
.pic-break .pb-text { position: relative; z-index: 1; max-width: 50rem; }
.pic-break blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1.4; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.pic-break cite { display: block; margin-top: 1.1rem; font-style: normal; font-family: var(--font-ui); letter-spacing: .14em; font-size: .85rem; color: #F0C866; }
.pic-break .pb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.pic-break .pb-chips a {
  color: #fff; text-decoration: none; font-family: var(--font-ui); font-size: .9rem; font-weight: 500;
  padding: .5em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(10,20,12,.35);
  transition: background .2s ease;
}
.pic-break .pb-chips a:hover { background: #E2B24C; color: #1d1a10; border-color: #E2B24C; }
html body[data-visual][data-section] .pic-break + .band::before { display: none; }

/* ---- 6. Ease in --------------------------------------------------------- */
.js-reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js-reveal .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .rv { opacity: 1; transform: none; transition: none; }
  .pic-break .pb-img { inset: 0; }
}

/* contents box on long pages: soft corners and a lift, like the cards */
html body[data-visual][data-section] .toc { border-radius: 16px; overflow: hidden; border-color: rgba(30,40,30,.08);
  box-shadow: 0 1px 2px rgba(30,40,20,.04), 0 10px 30px rgba(30,40,20,.06); }


/* Lora headings read best a little heavier; the sans reading text a touch more open */
html body[data-visual][data-section] h1, html body[data-visual][data-section] h2 { font-weight: 600; }
html body[data-visual][data-section] .prose > p { line-height: 1.72; }

/* ==========================================================================
   Lavender: every second coloured band turns a soft lavender, so a long page
   moves between the section's own colour and lavender as you scroll.
   ========================================================================== */
:root { --lav: #F1ECF8; --lav-2: #E9E1F4; --lav-ink: #6B5A92; }
html body[data-visual][data-section] .band-tint.tone-lav {
  background:
    radial-gradient(1100px 380px at 88% 0%, rgba(255,255,255,.6), transparent 70%),
    linear-gradient(180deg, var(--lav) 0%, color-mix(in srgb, var(--lav) 55%, var(--paper)) 100%);
}
html body[data-visual][data-section] .band-tint.tone-lav .kicker { color: var(--lav-ink); }
html body[data-visual][data-section] .band-tint.tone-lav .card-pic { background: var(--lav-2); }
/* the closing verses sit on a lavender-to-sand wash */
html body[data-visual][data-section] .band.is-verses { background: linear-gradient(180deg, var(--lav) 0%, var(--sand) 100%); }

/* The round tree logo (September 2026) sits square beside the name */
.brand-mark { width: 46px; height: 46px; }