/* ==========================================================================
   Wayfable Marketing Kit
   Shared components for the SEO/GEO marketing pages (FAQ, comparison table,
   name-input CTA, forest upsell band, storybook excerpt card, page title).
   mk- prefix to avoid collisions; consumes design tokens from styles.css only.
   Loaded per page via {% block head_extra %}.
   Spec: bmad-output/redesign/DESIGN.md §2.1–2.6
   ========================================================================== */

/* --- Reference link recipe (DESIGN §2.0) ---
   Inter 500, forest at rest (6.23:1 on cloud), underline + darker green on
   hover, standard 2px focus ring. Scoped to the kit components that carry
   in-copy links. --- */
.mk-faq-answer a,
.mk-compare-table a,
.mk-name-cta-hint a {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.mk-faq-answer a:hover,
.mk-compare-table a:hover,
.mk-name-cta-hint a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.mk-faq-answer a:focus-visible,
.mk-compare-table a:focus-visible,
.mk-name-cta-hint a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- mk-link — the same DESIGN §2.0 recipe as a REUSABLE class ---
   The selector list above only reaches links that already sit inside a kit
   component. Bare prose links on the hub/spoke pages match no author rule at
   all, so they fall through to the UA's #0000EE (there is no global `a`
   colour on the marketing surface). `mk-link` is the shared recipe those
   links opt into.
   Modifiers:
     .mk-link--standalone  link alone on its own line → ≥44px touch target
     .mk-link--onforest    link inside a forest band — white ink + underline
                           at rest (white-on-white prose cannot rely on colour
                           alone) + white focus ring; forest/gold ink is
                           prohibited on forest (R-7). */
.mk-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-primary);
    text-decoration: none;
}

.mk-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.mk-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.mk-link--standalone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.mk-link--onforest {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mk-link--onforest:hover {
    color: #fff;
    text-decoration-thickness: 2px;
}

.mk-link--onforest:focus-visible {
    outline-color: #fff;
}

/* --- mk-faq (DESIGN §2.1) ---
   Always-visible Q&A — NOT an accordion. Real <h3> questions + <p> answers,
   mirrored verbatim in the page's FAQPage JSON-LD. No aria-expanded anywhere.
   Expected DOM:
   <div class="mk-faq">
     <div class="mk-faq-item">
       <h3 class="mk-faq-question">…</h3>
       <p class="mk-faq-answer">…</p>
     </div>
   </div> --- */
.mk-faq {
    max-width: 720px;
    margin: 0 auto;
}

.mk-faq-item {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.mk-faq-item:first-child {
    padding-top: 0;
}

.mk-faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mk-faq-question {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.mk-faq-answer {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    max-width: 70ch;
    margin: 0 0 var(--space-3);
}

.mk-faq-answer:last-child {
    margin-bottom: 0;
}

/* --- mk-compare (DESIGN §2.2) ---
   Semantic comparison table in a cloud card. ONE DOM at every breakpoint:
   below 768px the table scrolls inside its own labelled region with a sticky
   row-label column, an edge fade, and a visible swipe hint.
   Expected DOM:
   <p class="mk-compare-hint">Swipe to compare →</p>
   <div class="mk-compare">
     <div class="mk-compare-scroll" role="region" tabindex="0"
          aria-labelledby="{caption-id}">
       <table class="mk-compare-table">
         <caption id="{caption-id}">…</caption>
         … th scope="col"/"row"; every Wayfable-column cell carries
           class="mk-compare-wayfable" plus a visible "Wayfable" text label …
       </table>
     </div>
   </div>
   ✓/✗ marks always sit next to visible text — never a bare icon. --- */
.mk-compare {
    position: relative;
    background-color: var(--cloud);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Edge-fade affordance over the scroll region's right edge (mobile only) */
.mk-compare::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to left, var(--cloud), rgba(254, 252, 247, 0));
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    pointer-events: none;
}

.mk-compare-hint {
    display: none;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

@media (max-width: 767px) {
    .mk-compare-hint {
        display: block;
    }
}

@media (min-width: 768px) {
    .mk-compare::after {
        display: none;
    }
}

.mk-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

.mk-compare-scroll:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mk-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.mk-compare-table caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    padding: var(--space-5) var(--space-4) var(--space-3);
}

.mk-compare-table th,
.mk-compare-table td {
    padding: var(--space-4);
    text-align: left;
    vertical-align: top;
    min-width: 10rem;
    line-height: 1.6;
}

.mk-compare-table thead th {
    background-color: var(--parchment);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
}

.mk-compare-table tbody th[scope="row"] {
    font-weight: 600;
    min-width: 8rem;
}

/* Sticky row-label column (harmless where the table fits without scroll) */
.mk-compare-table thead th:first-child,
.mk-compare-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--color-border);
}

/* Zebra rows (white ↔ cloud) with a parchment row-hover tint.
   Backgrounds sit on the cells so the sticky column stays opaque. */
.mk-compare-table tbody th,
.mk-compare-table tbody td {
    background-color: #fff;
}

.mk-compare-table tbody tr:nth-child(even) th,
.mk-compare-table tbody tr:nth-child(even) td {
    background-color: var(--cloud);
}

.mk-compare-table tbody tr:hover th,
.mk-compare-table tbody tr:hover td {
    background-color: var(--parchment);
}

/* Wayfable column — ember border/top-band only; the column is additionally
   labelled "Wayfable" in charcoal text (never colour alone, R-3) */
.mk-compare-table .mk-compare-wayfable {
    border-left: 3px solid var(--ember-orange);
    border-right: 3px solid var(--ember-orange);
}

.mk-compare-table thead th.mk-compare-wayfable {
    border-top: 3px solid var(--ember-orange);
}

.mk-compare-table tbody tr:last-child .mk-compare-wayfable {
    border-bottom: 3px solid var(--ember-orange);
}

/* ✓/✗ marks — always paired with visible text in the same cell */
.mk-compare-yes {
    color: var(--color-success);
    font-weight: 700;
}

.mk-compare-no {
    color: var(--color-text-primary);
    font-weight: 700;
}

/* Mobile: the caption box takes the TABLE's width (~608px, forced by the
   `min-width: 10rem` cell floors) inside a ~327px scroll port, so it could not
   wrap and was truncated mid-sentence under the edge fade. Pin it to the left
   of the scroll region and give it the visible width so it wraps.
   100vw − 2 × --space-5 (the .landing-container inner width) − the card's 2 ×
   1px border = the visible scroll port; the extra --space-6 of right padding
   keeps text clear of the 32px edge-fade. */
@media (max-width: 767px) {
    .mk-compare-table caption {
        position: sticky;
        left: 0;
        width: calc(100vw - var(--space-5) * 2 - 2px);
        box-sizing: border-box;
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .mk-compare {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- mk-name-cta (DESIGN §2.3) ---
   Inline name-input CTA in the .prompt-box visual language. The name input
   deliberately has NO name attribute — a plain GET submit carries theme only
   and the child's name never enters the URL (DP-02).
   Expected DOM:
   <form class="mk-name-cta" method="get" action="/register">
     <label class="mk-name-cta-label" for="{id}">Your child's first name</label>
     <div class="mk-name-cta-row">
       <input class="mk-name-cta-input" id="{id}" type="text" maxlength="40"
              autocomplete="off" autocapitalize="words">
       <input type="hidden" name="theme" value="{slug}">
       <button class="btn-magic" type="submit">Create
         <span class="mk-name-cta-echo">…</span>'s story</button>
     </div>
     <p class="mk-name-cta-hint">3 free trial credits at signup — no card needed.</p>
   </form> --- */
.mk-name-cta {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    /* The card sets its own alignment. Without this it inherited
       `text-align: center` from .lib-personalise-banner in the forest band,
       so the SAME component rendered left-aligned in the hero and centred in
       the band on one page (label detached from the field it names). */
    text-align: left;
}

.mk-name-cta--centred {
    margin-left: auto;
    margin-right: auto;
}

.mk-name-cta-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.mk-name-cta-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mk-name-cta-input {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px; /* keeps iOS from zooming the input */
    color: var(--color-text-primary);
}

/* Focus = forest border + the standard 2px ring — never gold (R-2) */
.mk-name-cta-input:focus,
.mk-name-cta-input:focus-visible {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Name echo inside the .btn-magic label: bold weight is the cue. It inherits
   the button's white — ember on forest is ~1.6:1, far below every AA
   threshold, so the specced ember echo is suppressed here (see R-3). */
.mk-name-cta-echo {
    font-weight: 700;
    color: inherit;
}

.mk-name-cta-hint {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary); /* not driftwood — R-1 */
}

.mk-name-cta .form-error {
    margin-top: var(--space-3);
}

@media (min-width: 768px) {
    .mk-name-cta-row {
        flex-direction: row;
        align-items: stretch;
        /* The submit label is theme-driven and long ("Create your child's
           starting-school story" ≈ 440px at 1.25rem/700). With a nowrap row
           the input was the only flexible item and collapsed; wrapping lets it
           drop to its own full-width line instead of vanishing. */
        flex-wrap: wrap;
    }

    /* Was `flex: 1 1 auto; min-width: 0` — combined with the ≥1024 max-width
       below that left the field ~60×48px (an empty square) beside the button,
       and a typed name was almost entirely invisible. A 12rem floor keeps the
       field readable and forces a wrap rather than a collapse. */
    .mk-name-cta-input {
        flex: 1 1 12rem;
        min-width: 12rem;
    }

    .mk-name-cta-row .btn-magic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        flex: 0 0 auto;
    }
}

@media (min-width: 1024px) {
    /* 720 − 48 (card padding) = 672 of row: 440 button + 12 gap + 220 input
       still fits on one line for the longest theme label. At 560 it did not. */
    .mk-name-cta {
        max-width: 720px;
    }
}

/* --- mk-upsell (DESIGN §2.4) ---
   The forest upsell band: exactly ONE CTA (white pill), white copy, sage only
   on the large sub-line (R-4), no gold anywhere on forest (R-7). Inset-card
   and full-bleed-band variants share one inner layout.
   Expected DOM:
   <section class="mk-upsell mk-upsell--band" aria-labelledby="{id}">
     <div class="landing-container mk-upsell-inner">
       <div class="mk-upsell-copy">
         <h2 class="mk-upsell-title" id="{id}">…</h2>
         <p class="mk-upsell-sub">…</p>
         <p class="mk-upsell-pricing">…</p>
       </div>
       <a class="mk-upsell-cta" href="/register">…</a>
     </div>
   </section>
   (Pixel-tool instance: <aside class="mk-upsell mk-upsell--inset" aria-label="…">.) --- */
.mk-upsell {
    background-color: var(--forest-moss);
    color: #fff;
    padding: var(--space-6);
}

.mk-upsell--inset {
    border-radius: var(--radius-lg);
}

.mk-upsell--band {
    border-radius: 0;
    padding: 60px 5%;
}

.mk-upsell-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mk-upsell-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: var(--line-height-tight);
    color: #fff;
    margin: 0 0 var(--space-3);
}

.mk-upsell-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: #fff;
    margin: 0 0 var(--space-3);
}

/* Sage is permitted ONLY at the sub-line's large size on forest (R-4);
   every smaller supporting line stays white. */
.mk-upsell-sub--sage {
    color: var(--sage-mist);
}

.mk-upsell-pricing {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: #fff;
    margin: 0;
}

.mk-upsell-note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: #fff;
    margin: var(--space-2) 0 0;
}

/* Single white-pill CTA (.sb-final-cta recipe, self-contained so consuming
   pages don't need landing_v3.css) */
.mk-upsell-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: var(--forest-moss);
    border: none;
    padding: 20px 48px;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    cursor: pointer;
    min-height: 44px;
}

.mk-upsell-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.mk-upsell-cta:active {
    transform: translateY(-1px);
}

/* Focus on forest = 2px white outline (the one focus-colour adaptation) */
.mk-upsell-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Secondary action renders as a plain white text link — never a second button */
.mk-upsell-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mk-upsell-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .mk-upsell-cta {
        width: 100%;
    }
}

/* Support wrappers used by consuming pages (guide/pixel-tool instances):
   content = the copy column (same flex role as .mk-upsell-copy), actions =
   CTA + text-link row, media = optional illustration column, small = the
   white --text-sm supporting line (same recipe as .mk-upsell-note). */
.mk-upsell-content {
    flex: 1 1 auto;
    min-width: 0;
}

.mk-upsell-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.mk-upsell-media {
    max-width: 420px;
}

.mk-upsell-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.mk-upsell-small {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: #fff;
    margin: var(--space-2) 0 0;
}

/* Visually-hidden live-region utility for kit consumers (status text that
   must be announced but not seen — e.g. the name-CTA loading state). */
.mk-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    .mk-upsell--band {
        padding: 100px 5%;
    }

    .mk-upsell-title {
        font-size: var(--text-3xl);
    }

    .mk-upsell-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
    }

    .mk-upsell-copy {
        flex: 1 1 auto;
    }

    .mk-upsell-cta {
        flex: 0 0 auto;
    }
}

/* --- mk-excerpt (DESIGN §2.5) ---
   Storybook excerpt card — the story voice (italic Lora), parchment surface.
   Text is locked at --text-xl so the <strong> name highlights render ≥18.66px
   at weight 700 (large text): ember on parchment is 3.46:1, which passes AA
   only at large size — do not shrink this type.
   Expected DOM:
   <figure class="mk-excerpt">
     <p class="mk-excerpt-kicker">EXAMPLE STORY — 60-SECOND READ</p>
     <p class="mk-excerpt-text">… <strong class="mk-excerpt-name">Maya</strong> …</p>
     <figcaption class="mk-excerpt-caption">…</figcaption>
   </figure>
   <p class="mk-excerpt-callout">…</p>  (optional, e.g. R5's same-cost line) --- */
.mk-excerpt {
    background-color: var(--parchment);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    max-width: 640px;
    margin: 0 auto;
}

/* Lead-in paragraph above the card and the follow-up links paragraph below it.
   Both share the card's 640px measure so the section has ONE left edge: before
   this the lead and links sat at the 1040px container edge while the card was
   centred at 640px, giving three stacked left edges in one column.
   Charcoal, NOT --color-text-secondary: driftwood is restricted to large text
   (R-1) and --text-lg is 18px regular, which is not large text. */
.mk-excerpt-lead {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text-primary);
    max-width: 640px;
    margin: 0 auto var(--space-5);
}

.mk-excerpt-links {
    max-width: 640px;
    margin: var(--space-5) auto 0;
}

.mk-excerpt-kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary); /* not driftwood at this size — R-1 */
    margin: 0 0 var(--space-4);
}

.mk-excerpt-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: 1.75;
    color: var(--color-text-primary);
    margin: 0;
}

.mk-excerpt-text p {
    margin: 0 0 var(--space-4);
}

.mk-excerpt-text p:last-child {
    margin-bottom: 0;
}

/* Name highlight: bold weight PLUS colour — never colour alone (R-3).
   Ember passes here only because the excerpt type is large (see above). */
.mk-excerpt-name {
    /* Upright bold inside the italic prose: Lora italic is only loaded at
       600, so weight 700 must drop the italic to avoid a synthesised face.
       The upright-bold-in-italic contrast is deliberate and contract-safe. */
    font-style: normal;
    font-weight: 700;
    font-style: inherit;
    color: var(--ember-orange);
}

.mk-excerpt-caption {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-text-primary); /* not driftwood at this size — R-1 */
    margin: var(--space-4) 0 0;
}

/* Optional callout line — the specimen-label register at sentence scale.
   A plain <p> in the reading order, non-interactive, never aria-hidden. */
.mk-excerpt-callout {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--color-text-primary);
    text-align: center;
    max-width: 640px;
    /* Was --space-3 (12px): the callout sat closer to the excerpt card above
       it than to its own subordinate follow-on line (16px) below, so the most
       important statement on the page read as the card's footer instead of a
       standalone specimen-label line. */
    margin: var(--space-6) auto 0;
}

@media (max-width: 767px) {
    .mk-excerpt {
        padding: var(--space-5);
    }

    .mk-excerpt-callout {
        font-size: var(--text-lg);
    }
}

/* --- mk-page-title (DESIGN §2.6) ---
   AA-passing H1 recipe for new hub/spoke pages: charcoal Lora 700 with a
   short DECORATIVE gold rule beneath (carries no information). The existing
   gold .lib-page-title stays untouched on existing pages (DP-08). --- */
.mk-page-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.mk-page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--color-accent);
    border-radius: 2px;
    margin-top: var(--space-3);
}

.mk-page-title--centred {
    text-align: center;
}

.mk-page-title--centred::after {
    margin-left: auto;
    margin-right: auto;
}

/* --- Related-themes row, mobile orphan (layout-only) ---
   .lib-browse-grid is repeat(2, 1fr) below 768 (the --3 variant only kicks in
   from 768up), so a three-card related row ends with one card alone beside an
   empty slot — the last thing a reader sees before the footer. A trailing odd
   card spans the row instead. Scoped to .lib-related-categories so the shared
   free-stories browse grids keep their 2-up rhythm. */
@media (max-width: 767px) {
    .lib-related-categories .lib-browse-grid--3 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
    .mk-faq-question {
        font-size: var(--text-lg);
    }

    .mk-page-title {
        font-size: var(--text-2xl);
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .mk-upsell-cta {
        transition: none;
    }

    .mk-upsell-cta:hover,
    .mk-upsell-cta:active {
        transform: none;
    }
}