/* ---------------------------------------------------------------------------
   Bible Lessons — biblelessons.school

   Mobile first. Most of this audience arrives from YouTube on a phone, and a
   meaningful share of it is over 55, so the defaults here are larger and
   higher contrast than a typical marketing site.

   Reading comfort is treated as a retention feature rather than decoration:
   the lesson measure is capped near 68 characters, line height is generous,
   and nothing important depends on colour alone.

   No framework, no build step, one file.
   --------------------------------------------------------------------------- */

/* --- palette -------------------------------------------------------------

   Light, warm and quiet. This started out as gold on near-black, which read as
   a nightclub rather than as somewhere you would sit and read Scripture for
   half an hour. A resource like this should feel like daylight.

   Two rules held while choosing these:

   Pastels are for SURFACES, never for text. The audience skews over 55 and
   most of it reads on a phone, often outdoors. Every text colour here clears
   4.5:1 against every background it can land on, checked rather than eyeballed,
   including the faint small print on the tinted bands where it is tightest at
   4.74:1. Pale grey text on pale colour is the usual way a light redesign
   becomes unreadable, and it is avoided deliberately.

   The blue is a calmer relative of the #2f5be7 used on watch.orionmedia.tv, so
   the two sites read as belonging to the same ministry without this one
   borrowing an interface built for browsing video.
   ------------------------------------------------------------------------- */

:root {
    --bg: #fbfaf7;              /* warm near-white, softer than pure white */
    --bg-raised: #ffffff;       /* cards lift by being brighter than the page */
    --bg-sunken: #eef3fb;       /* pastel periwinkle for header, footer, bands */

    --text: #1f2a37;            /* deep slate, not black */
    --text-dim: #51607a;
    --text-faint: #5f6c86;

    --accent: #3a5fa4;          /* the calm blue everything interactive uses */
    --accent-hover: #2c4a85;
    --accent-soft: #dfe8f8;     /* pastel wash of the same hue */
    --accent-line: #b9cbea;

    /* Deep enough to clear 3:1 against its own wash, which is the WCAG floor
       for a non-text element that carries meaning. It marks callouts and the
       decision question, so it is doing a job, not decorating. */
    --warm: #a86232;            /* apricot, sparingly, so the blue is not cold */
    --warm-soft: #fbeee2;

    --border: #e5e2db;
    --border-soft: #eeebe4;
    --ok: #2f7d55;
    --bad: #b0433a;

    --shadow: 0 1px 2px rgba(31, 42, 55, .05), 0 6px 20px rgba(31, 42, 55, .07);
    --shadow-soft: 0 1px 3px rgba(31, 42, 55, .06);

    --measure: 68ch;
    --radius: 10px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.7 ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
    -webkit-font-smoothing: antialiased;
}

/* Headings and interface furniture use a sans stack; body copy stays serif,
   because long-form reading is the whole job of this site. */
h1, h2, h3, .brand, .site-nav, .btn, .pill, .meta, .stat-num, .lesson-num {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; }

.wrap { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }

.skip {
    position: absolute; left: -9999px;
    background: var(--accent); color: #fff; padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- header ------------------------------------------------------------- */

.site-head {
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
    position: sticky; top: 0; z-index: 20;
}
.head-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem 0;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-weight: 600; }
.brand-mark {
    width: .85rem; height: .85rem; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 4px rgba(58,95,164,.14);
    flex: 0 0 auto;
}
.brand-text { letter-spacing: .01em; }

.site-nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; }
/* :not(.btn) matters. ".site-nav a" is one class plus one element, which beats
   the single class of ".btn-primary", so without it the nav's dim grey wins
   over the button's own white and the Start free button renders grey on blue.
   It was wrong before the relight too, quietly: dark text on gold still just
   about read, so nothing looked broken until the background became blue. */
.site-nav a:not(.btn) { color: var(--text-dim); text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--text); }

/* --- buttons ------------------------------------------------------------ */

.btn {
    display: inline-block; padding: .8rem 1.5rem; border-radius: var(--radius);
    border: 1px solid transparent; font-weight: 600; font-size: 1rem;
    text-decoration: none; cursor: pointer; line-height: 1.2;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { border-color: var(--border); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-sm { padding: .5rem .9rem; font-size: .9rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }

/* --- hero --------------------------------------------------------------- */

/* A wash rather than a flat panel. On a light design the top of the page is
   the whole first impression, and a plain white block above plain white
   content reads as unfinished rather than as clean. The gradient runs from the
   warm pastel into the page colour, so the fold has some daylight in it
   without anything competing with the headline. */
.hero {
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--border-soft);
    background:
        radial-gradient(60rem 22rem at 12% -20%, var(--accent-soft) 0%, transparent 68%),
        radial-gradient(48rem 20rem at 92% -30%, var(--warm-soft) 0%, transparent 62%),
        linear-gradient(180deg, #fdfdfb 0%, var(--bg) 100%);
}
.hero h1 {
    font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.12;
    margin: 0 0 1rem; letter-spacing: -.02em; font-weight: 700;
}
.hero .lede { font-size: clamp(1.1rem, 2.6vw, 1.3rem); color: var(--text-dim); max-width: var(--measure); margin: 0 0 1.25rem; }

/* The hero opens straight on the headline. There was a badge above it, first
   naming the denomination and then carrying a "free, self-paced" line; both
   are gone by owner decision. The headline says free, and the page says the
   rest. */

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.stat-row { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2.25rem; }
.stat-num { font-size: 1.75rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-label { font-size: .88rem; color: var(--text-faint); margin-top: .3rem; }

/* --- sections ----------------------------------------------------------- */

section.band { padding: 3rem 0; border-bottom: 1px solid var(--border-soft); }
section.band:nth-of-type(even) { background: var(--bg-sunken); }
section.band:last-of-type { border-bottom: 0; }

h2 { font-size: clamp(1.35rem, 3.4vw, 1.8rem); margin: 0 0 .4rem; letter-spacing: -.01em; }
.section-note { color: var(--text-dim); max-width: var(--measure); margin: 0 0 1.75rem; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin: 1.75rem 0 .5rem; font-size: 1.12rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1.15rem; }
.prose li { margin-bottom: .5rem; }

/* --- what to expect ----------------------------------------------------- */

.expect { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.expect li {
    background: var(--bg-raised); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-soft);
}
.expect b { display: block; margin-bottom: .25rem; font-family: ui-sans-serif, system-ui, sans-serif; }
.expect span { color: var(--text-dim); font-size: .97rem; }

/* --- the questions ------------------------------------------------------ */

/* Set larger than body copy and one per line. These are the hook, and every
   study-guide site that works leads with them, so they are not a bulleted
   list to be skimmed past on the way to something else. */
.questions { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: var(--measure); }
.questions li {
    position: relative; padding: .7rem 0 .7rem 1.9rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 1.08rem; line-height: 1.55;
}
.questions li:last-child { border-bottom: 0; }
.questions li::before {
    content: "?";
    position: absolute; left: 0; top: .72rem;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .8rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.questions-foot { max-width: var(--measure); color: var(--text-dim); margin: 0; }

@media (min-width: 40rem) {
    .questions li { font-size: 1.14rem; }
}

/* --- syllabus ----------------------------------------------------------- */

.course-block {
    border: 1px solid var(--border-soft); border-radius: var(--radius);
    background: var(--bg-raised); margin-bottom: 1rem; overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.course-block > summary {
    cursor: pointer; padding: 1.1rem 1.25rem; list-style: none;
    display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
}
.course-block > summary::-webkit-details-marker { display: none; }
.course-block > summary:hover { background: var(--bg-sunken); }
.course-title { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; }
.course-sub { display: block; color: var(--text-faint); font-size: .9rem; font-weight: 400; margin-top: .15rem; }
.course-count { color: var(--text-faint); font-size: .88rem; white-space: nowrap; }

.lesson-list { list-style: none; margin: 0; padding: 0 1.25rem 1.1rem; }
.lesson-list li {
    display: flex; gap: .85rem; padding: .6rem 0;
    border-top: 1px solid var(--border); align-items: baseline;
}
.lesson-num {
    color: var(--text-faint); font-size: .82rem; font-variant-numeric: tabular-nums;
    min-width: 2.1rem; flex: 0 0 auto;
}
.lesson-name { flex: 1 1 auto; }
.lesson-teaser { display: block; color: var(--text-faint); font-size: .9rem; margin-top: .15rem; }
.pill {
    font-size: .72rem; padding: .12rem .5rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-faint); white-space: nowrap;
}
.pill-decision { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* --- callout ------------------------------------------------------------ */

.callout {
    border: 1px solid var(--border-soft); border-left: 3px solid var(--warm);
    background: var(--warm-soft); border-radius: var(--radius);
    padding: 1.1rem 1.25rem; margin: 1.75rem 0; max-width: var(--measure);
}
.callout p:last-child { margin-bottom: 0; }

/* --- footer ------------------------------------------------------------- */

.site-foot {
    border-top: 1px solid var(--border); background: var(--bg-sunken);
    padding: 2.5rem 0 3rem; margin-top: 1rem; color: var(--text-faint); font-size: .93rem;
}
.sponsor { margin: 0 0 .75rem; color: var(--text-dim); }
.sponsor strong { color: var(--text); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 .9rem; }
/* Same :not(.btn) guard as .site-nav, for the same specificity reason. There is
   no button in the footer today; this is so that putting one there later does
   not silently repaint its text. */
.foot-links a:not(.btn) { color: var(--text-dim); text-decoration: none; }
.foot-links a:not(.btn):hover { color: var(--accent); text-decoration: underline; }
.foot-fine { margin: 0; max-width: var(--measure); line-height: 1.6; }

/* --- wider screens ------------------------------------------------------ */

@media (min-width: 40rem) {
    .expect { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
    body { font-size: 1.09375rem; }
}

/* --- accessibility ------------------------------------------------------ */

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Some students will want paper even on the online track. */
@media print {
    .site-head, .site-nav, .site-foot, .hero-actions, .skip { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    a { color: #000; }
    .course-block, .callout { border: 1px solid #999; background: #fff; }
    .lesson-list { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Student screens: enrolment, the lesson, results, dashboard, certificate.
   --------------------------------------------------------------------------- */

/* --- forms -------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.5rem; max-width: 32rem; }
.field > span { display: block; margin-bottom: .4rem; font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: .97rem; }
.field input[type="text"], .field input[type="email"], .field textarea {
    width: 100%; padding: .8rem .9rem; font: inherit; font-size: 1.05rem;
    background: var(--bg-raised); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.field small { display: block; margin-top: .4rem; color: var(--text-faint); font-size: .88rem; }
.err { display: block; margin-top: .4rem; color: var(--bad); font-style: normal; font-size: .9rem; }
.fine { color: var(--text-faint); font-size: .9rem; max-width: var(--measure); line-height: 1.6; }
.enrol-form { max-width: 34rem; }
.optional { margin-bottom: 1.5rem; }
.optional > summary { cursor: pointer; color: var(--text-dim); font-size: .95rem; padding: .3rem 0; }
/* Spam trap: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The referral opt-in is the only checkbox on the student side, and it is
   deliberately not styled to look inviting. It is a plain box that has to be
   ticked on purpose, sized large enough to hit on a phone. Nothing here
   pre-selects it, highlights it, or makes the unticked state look unfinished. */
.field-check {
    display: flex; gap: .75rem; align-items: flex-start;
    max-width: var(--measure); margin: 1.75rem 0;
    line-height: 1.6;
}
.field-check input[type="checkbox"] {
    flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .25rem;
    accent-color: var(--accent);
}

.plain-list { max-width: var(--measure); margin: 0 0 1.25rem; padding-left: 1.15rem; line-height: 1.7; }
.plain-list li { margin-bottom: .5rem; color: var(--text-dim); }

/* This is the link a student has to be able to read off the screen and keep,
   and while mail is deferred it is the ONLY way back into their account. So it
   is near-black and bold on white, not styled to be decorative.
   It was var(--accent-soft) on var(--bg-sunken), which was pale gold on
   near-black before the relight and became pale blue on pale blue after it:
   1.1:1, invisible. Exactly the mistake the palette note at the top of this
   file warns about, made in the one rule where it mattered most. */
.resume-link code {
    display: block; padding: .7rem .8rem; background: var(--bg-raised);
    border: 1px solid var(--accent-line); border-radius: 6px;
    font-size: .9rem; word-break: break-all;
    color: var(--text); font-weight: 700;
}

/* --- lesson ------------------------------------------------------------- */

.lesson-bar { position: sticky; top: 0; z-index: 15; background: var(--bg-sunken); border-bottom: 1px solid var(--border); }
.lesson-bar-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .88rem; }
.lesson-course { color: var(--text-dim); margin-right: .6rem; }
.lesson-pos { color: var(--text-faint); }
.lesson-mins { color: var(--text-faint); white-space: nowrap; }
.progress { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }

.lesson { padding: 2.5rem 0 4rem; }
.lesson h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; margin: 0 0 .6rem; max-width: var(--measure); }
.key-texts { color: var(--text-faint); font-size: .92rem; margin: 0 0 2rem; max-width: var(--measure); }

/* The operator's own lesson markup: only p, h2 and blockquote.scripture. */
.lesson-body { max-width: var(--measure); }
.lesson-body p { margin: 0 0 1.3rem; }
.lesson-body h2 { font-size: 1.3rem; margin: 2.5rem 0 .9rem; letter-spacing: -.01em; }
.lesson-body blockquote.scripture,
blockquote.scripture {
    margin: 1.6rem 0; padding: 1rem 1.2rem;
    border-left: 3px solid var(--accent-line); background: var(--accent-soft);
    border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.02rem;
}
blockquote.scripture cite { display: block; margin-top: .6rem; font-style: normal; font-size: .86rem; color: var(--text-faint); font-family: ui-sans-serif, system-ui, sans-serif; }
.vnum { font-size: .68em; vertical-align: super; color: var(--accent); margin-right: .25em; font-family: ui-sans-serif, system-ui, sans-serif; }

/* The line between being taught and being asked. The questions used to be
   scattered through the reading, so no such line existed. */
.q-intro {
    max-width: var(--measure); margin: 3rem 0 0; padding-top: 2rem;
    border-top: 2px solid var(--accent-line);
}
.q-intro h2 { margin: 0 0 .4rem; }
.q-intro p { margin: 0; color: var(--text-dim); }

/* --- questions ---------------------------------------------------------- */

.q {
    max-width: var(--measure); margin: 2rem 0; padding: 1.3rem 1.4rem;
    background: var(--bg-raised); border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft);
    border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.q-prompt { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; padding: 0; margin-bottom: .9rem; line-height: 1.5; }
.q-help { color: var(--text-faint); font-size: .9rem; margin: 0 0 .8rem; }
.q-ref { color: var(--accent); font-size: .9rem; margin: 0 0 .8rem; font-family: ui-sans-serif, system-ui, sans-serif; }
.q input[type="text"], .q textarea {
    width: 100%; padding: .75rem .85rem; font: inherit; font-size: 1.02rem;
    background: var(--bg-raised); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
}
.q textarea { resize: vertical; min-height: 6rem; }
.opt { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; cursor: pointer; }
.opt input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: 0 0 auto; }
.q-decision { border-left-color: var(--warm); }

.scripture-toggle { margin-bottom: .9rem; }
.scripture-toggle > summary { cursor: pointer; color: var(--accent); font-size: .9rem; font-family: ui-sans-serif, system-ui, sans-serif; padding: .2rem 0; }
.verse-missing { color: var(--text-faint); font-size: .9rem; }

.submit-row { max-width: var(--measure); margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.submit-row .fine { margin-top: .8rem; }

/* --- results ------------------------------------------------------------ */

.ans { max-width: var(--measure); margin-bottom: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border-soft); border-left: 3px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-raised); box-shadow: var(--shadow-soft); }
.ans-right { border-left-color: var(--ok); }
.ans-wrong { border-left-color: var(--bad); }
.ans-open  { border-left-color: var(--accent); }
.ans-prompt { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; margin: 0 0 .7rem; }
.ans-yours, .ans-right-was { margin: 0 0 .5rem; }
.ans-label { display: inline-block; min-width: 6.5rem; color: var(--text-faint); font-size: .82rem; font-family: ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.ans-note { color: var(--text-faint); font-size: .9rem; margin: 0; }

/* --- dashboard ---------------------------------------------------------- */

.course-progress { max-width: 40rem; margin-bottom: 1.6rem; }
.cp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; font-family: ui-sans-serif, system-ui, sans-serif; }
.cp-count { color: var(--text-faint); font-size: .88rem; white-space: nowrap; }
.cp-more { color: var(--text-faint); }
.cp-cert { margin: .5rem 0 0; font-size: .92rem; }

/* --- certificate -------------------------------------------------------- */

.cert {
    max-width: 44rem; margin: 0 auto; padding: 3.5rem 2.5rem; text-align: center;
    border: 2px solid var(--accent-line); border-radius: var(--radius);
    background: var(--bg-raised); box-shadow: var(--shadow);
}
.cert-issuer { font-family: ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--accent); margin: 0 0 2rem; }
.cert-pre { color: var(--text-dim); margin: 0 0 .5rem; font-size: .97rem; }
.cert-name { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 1.5rem; letter-spacing: -.01em; }
.cert-course { font-size: 1.3rem; color: var(--accent); margin: 0 0 2rem; }
.cert-date { color: var(--text-dim); margin: 0 0 1.5rem; }
.cert-serial { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .8rem; color: var(--text-faint); letter-spacing: .05em; margin: 0; }

@media print {
    .cert { border-color: #333; color: #000; background: #fff; }
    .cert-issuer, .cert-course { color: #444; }
    .lesson-bar, .submit-row, .q { display: none !important; }
}