:root {
    --brand-blue: #0d6efd;
    --brand-blue-dark: #0b5ed7;
    --brand-blue-light: #dbeafe;
    --accent-bg: #f6f6f6; /* true neutral grey (equal R/G/B, no blue cast) for highlight/promo backgrounds — brand-blue reserved for links, buttons, borders */
    --accent-bg-hover: #ebebeb;
    --ink: #0f172a;
    --muted: #64748b;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #e2e8f0;
    --radius: 0.75rem;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body {
    background: var(--surface-soft);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero-block { max-width: 920px; }
.hero-pill {
    display: inline-block;
    background: rgb(253, 224, 71);
    color: #090900;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}
.hero-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 640px;
    margin-bottom: 1.25rem;
}
/* Homepage-only hero bump — the main entry point earns a bigger, bolder
   hero than the worksheet/static pages, which stay at the smaller shared
   size so this doesn't ripple across all 18+ editor pages. */
.home-hero .hero-title {
    font-size: clamp(2.1rem, 5.5vw, 3.5rem);
}
.home-hero .hero-subtitle {
    /* clamp(), not a fixed 1.25rem — Bootstrap's own .container has a
       breakpoint-based max-width (540px at the sm breakpoint, well under
       900px) that kicks in well before this block's own max-width ever
       becomes the limiting factor, so a fixed font-size wrapped to 3 lines
       in that ~576-767px range regardless of how wide max-width was set
       here. Scaling down with viewport width, the same way .hero-title
       above already does, keeps it to 2 lines further down. */
    font-size: clamp(1rem, 3vw, 1.25rem);
    max-width: 900px;
}

.hero-checks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}
.hero-checks span::before {
    content: '\2713';
    color: #16a34a; /* green-600 — the only color accent here, kept single and consistent */
    margin-right: 0.35rem;
    font-weight: 700;
}

/* Short supporting copy under a section heading (e.g. "See what you can
   create" / "See what families are creating") — Bootstrap's .small
   (0.875em) read as too small here at only 14px; this sits between body
   text and .hero-subtitle in weight, since it's a secondary section, not
   the page's main hero. */
.section-intro-text {
    font-size: 1rem;
    color: #334155; /* slate-700 — matches .editorial-content p, the standard body-text color used across the site */
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 2rem;
}

.hero-intro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-blue);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    color: #334155;
    font-size: 0.95rem;
}

.editor-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

a { color: var(--brand-blue); text-decoration: none; }
a:hover { color: var(--brand-blue-dark); text-decoration: underline; }

.site-navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.site-navbar .brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.site-navbar .brand .brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-blue);
    display: inline-block;
}
.site-navbar .nav-link {
    color: var(--muted);
    font-weight: 500;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--brand-blue);
}

/* Mega menu — full-width bar (styled after full-bleed retail mega menus:
   flat top border instead of a floating drop-shadow card, generous
   whitespace, plain uppercase small-caps column headings, no per-column
   images). Previously a narrow ~760px floating dropdown; the earlier
   attempt at 6 columns inside that fixed width was reverted because
   narrow columns wrapped longer labels onto two lines. Going full-width
   removes that constraint at the source — 6 columns now each get a full
   desktop column's worth of room — so the column count is revisited here
   deliberately, not by accident.

   `.site-navbar` carries Bootstrap's `sticky-top` utility, which already
   makes it a CSS positioned ancestor (position:sticky counts, same as
   relative/absolute/fixed) — that's the containing block `.mega-menu`'s
   `position:absolute` is meant to resolve against. Bootstrap's own
   `.dropdown` class (already on the same <li>, unrelated to this app's
   `.mega-menu-parent`) sets `position: relative` on it independently —
   an easy thing to miss since nothing in this file declares it. Left
   alone, that nearer positioned ancestor hijacks the containing block
   back down to just the "Worksheets" toggle's own ~120px width instead
   of the full nav bar, which is exactly what caused the mega menu to
   render squeezed into a tiny box the first time this was built. The
   explicit `position: static` below defeats that Bootstrap default. */
.mega-menu-parent { position: static; }
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 2rem 0 1.5rem;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12);
}
/* Inner content re-constrained to the same width/gutters as the rest of
   the page (Bootstrap's .container) rather than truly edge-to-edge, so
   columns don't stretch absurdly wide on an ultra-wide monitor — only the
   bar's own background/border span the full viewport. */
.mega-menu-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
}
.mega-menu-col { min-width: 0; }
.mega-menu-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}
/* Curated "Most Popular" column, pinned first — an accent heading color
   is enough to read as a featured pick in this flatter, full-width
   layout; the earlier floating highlight box (::before) doesn't suit a
   grid of equal-width columns as cleanly and was dropped along with it. */
.mega-menu-col--popular .mega-menu-heading {
    color: var(--brand-blue-dark);
    border-bottom-color: var(--brand-blue-light);
}
.mega-menu-link--popular { font-weight: 600; }
.mega-menu-link {
    display: block;
    padding: 0.32rem 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
}
.mega-menu-link:hover {
    color: var(--brand-blue);
    text-decoration: none;
}
.mega-menu-footer {
    border-top: 1px solid var(--border);
    margin: 1.5rem auto 0;
    padding-top: 1.25rem;
    max-width: 1140px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* Five compact CTA cards instead of one full-width banner — a single wide
   yellow strip looked disproportionate once the menu itself went full-
   width (it used to be sized to a ~760px dropdown, where one wide banner
   made sense as the panel's whole bottom edge). Bootstrap's `bg-*-subtle`
   utilities were tried first and rejected as too washed-out/muted for
   this site's kid-facing, bright-and-playful feel — these colors instead
   reuse the exact same vivid theme palette WorksheetRenderer::
   resolveBorder() already uses for worksheet page borders (green
   #86efac, sky #7dd3fc, pink #f9a8d4, yellow #fde047 — the same yellow
   already used for the hero pill badge and this footer's original single
   CTA), so the mega menu's color language matches what's already
   established elsewhere on the site rather than introducing a new one.
   No "orange" exists in that palette, so `--orange` is the one genuinely
   new addition, picked to sit at the same saturation/lightness as its
   siblings rather than Bootstrap's paler default orange-200. */
.mega-menu-cta-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}
.mega-menu-cta {
    display: block;
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mega-menu-cta:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.18);
}
.mega-menu-cta--yellow { background: #fef3c7; border-color: #fde047; }
.mega-menu-cta--pink   { background: #fce7f3; border-color: #f9a8d4; }
.mega-menu-cta--sky    { background: #e0f6ff; border-color: #7dd3fc; }
.mega-menu-cta--orange { background: #ffedd5; border-color: #fb923c; }
.mega-menu-cta--green  { background: #dcfce7; border-color: #86efac; }
.mega-menu-cta strong { display: block; font-size: 0.88rem; color: var(--ink); }
.mega-menu-cta span { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }

@media (max-width: 991.98px) {
    .mega-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0.5rem 0 0.5rem 0.5rem;
        width: 100%;
        max-width: 100%;
    }
    .mega-menu-inner { max-width: 100%; padding: 0; }
    .mega-menu-grid { grid-template-columns: 1fr; row-gap: 1rem; }
    .mega-menu-footer { padding-left: 0; padding-right: 0; }
    .mega-menu-cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.btn-brand {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover {
    background: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: #fff;
}
.btn-outline-brand {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 600;
}
.btn-outline-brand:hover {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border-color: var(--brand-blue);
}

.form-check-input {
    border: 1.5px solid #94a3b8; /* slate-400 — Bootstrap's default is too light to see against our background */
}
.form-check-input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

/* Crisp, single-color focus border instead of Bootstrap's default soft
   glow (box-shadow ring) — sharper, no blur. Border is 2px at all times
   (not just on focus) so focusing doesn't shift layout by 1px. */
.form-control,
.form-select {
    border-width: 2px;
}
.form-control::placeholder {
    color: #a3aebd; /* lighter than Bootstrap's default placeholder grey */
    opacity: 1; /* Firefox applies its own opacity to ::placeholder by default */
}
.form-control:focus,
.form-select:focus,
.style-swatch:focus-visible {
    border-color: var(--brand-blue);
    box-shadow: none;
    outline: none;
}
.form-check-input:focus {
    box-shadow: none;
    outline: none;
    border-color: var(--brand-blue);
}

.share-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}
.share-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.card-panel--accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-blue), #60a5fa);
}

.control-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.9rem;
}
.control-section-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--brand-blue-dark);
    font-size: 0.68rem;
}
.control-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
}
.control-actions {
    border-top: 1px solid var(--border);
}

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
}

.style-swatch {
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    background: var(--surface);
    transition: border-color 0.15s, color 0.15s;
}
.style-swatch:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.style-swatch.active {
    border-color: var(--brand-blue);
    color: var(--brand-blue-dark);
}

.preview-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    /* The worksheet page is scaled to fit in JS (fitPreviewScale) — hidden,
       not auto, because CSS transform:scale() doesn't shrink an element's
       layout footprint, only its visual size, so overflow:auto would still
       show a scrollbar for the untransformed space even though everything
       visible already fits. */
    overflow: hidden;
}

/* --- Ad slots -------------------------------------------------------
   Placeholder containers only — no publisher/ad-unit code wired in yet.
   Sized to standard IAB/AdSense units and placed per policy: clearly
   separated from interactive controls, never inside the worksheet
   render itself, capped at a sane density (rail + in-content + footer).
   Swap the inner comment for the real <ins class="adsbygoogle"> unit
   once a publisher ID is available. -------------------------------- */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ad-slot--rail { width: 300px; min-height: 250px; }
.ad-slot--in-content { min-height: 90px; margin: 2rem 0; }
.ad-slot--footer { min-height: 90px; max-width: 728px; margin: 1.5rem auto 0; }

@media (max-width: 991.98px) {
    .ad-slot--rail { display: none; }
}

/* Fills the same layout slots the ad placeholders used, with genuinely
   useful content (real cross-links, real feature promo) instead of an
   empty box — until AdSense is approved and these can carry real units. */
.promo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, var(--brand-blue-light) 0%, #eef6ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: 1.1rem 1.5rem;
    margin: 1.5rem 0;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.promo-banner:hover {
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    background: linear-gradient(135deg, #dbeafe 0%, #e6f0ff 100%);
}
.promo-banner__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.promo-banner__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 1.3rem;
}
.promo-banner strong { display: block; font-size: 0.95rem; }
.promo-banner span:not(.promo-banner__cta) { display: block; font-size: 0.85rem; color: var(--muted); }
.promo-banner__cta {
    flex-shrink: 0;
    font-weight: 700;
    color: #fff;
    background: var(--brand-blue);
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.promo-banner:hover .promo-banner__cta { background: var(--brand-blue-dark); }

/* Real, verifiable claims about the product — not attributed quotes from
   people. Stands in for a testimonials section on a site with no accounts
   or review system, so there's no honest source of "real user" quotes yet
   (see the discussion in-repo before adding actual testimonials). */
.trust-signals-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.5rem;
    margin: 0 0 2rem;
}
.trust-signal {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}
.trust-signal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    font-size: 1rem;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .trust-signals-bar { justify-content: flex-start; gap: 1rem 1.5rem; }
}

/* Sidebar "create your own worksheet" CTA — one random type per page load,
   never the type the current page is already about (see
   WorksheetTypeRegistry::randomExcept and editor/_promo_card.php). */
.promo-card {
    text-align: center;
    background: #f0fbff;
    transition: background-color 0.15s ease;
}
.promo-card:hover {
    background: #dcf0f7;
}
.promo-card-img {
    width: 100%;
    border-radius: 0.6rem;
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
    display: block;
}
.promo-card-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #090909;
    margin-bottom: 0.3rem;
}
.promo-card-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: #090909;
    margin-bottom: 0.75rem;
}

/* A row of real worksheet-preview thumbnails pooled from across every
   type (ExampleImageLibrary) — used on static/company pages, which
   aren't scoped to one worksheet type, to keep the same "see the actual
   product" visual language the editor pages use in their sidebar. */
/* Fixed column count, not auto-fill — auto-fill computes however many
   190px+ columns happen to fit the container width (5, 6, 7...), which is
   why an 8-image grid rendered as a full 6-wide row plus a sparse leftover
   row of 2 instead of two clean rows. A deterministic column count paired
   with counts that are themselves multiples of it (see the PHP call sites)
   guarantees full rows regardless of viewport width. */
.static-preview-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}
@media (max-width: 767.98px) {
    .static-preview-strip { grid-template-columns: repeat(2, 1fr); }
}
.static-preview-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface);
    transition: box-shadow 0.15s, transform 0.15s;
}
.static-preview-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.static-preview-card img {
    width: 100%;
    aspect-ratio: 320 / 420;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Homepage names-showcase cards (gallery/_names_showcase.php) — same
   lift + shadow as .static-preview-card, plus an actual image zoom
   (clipped by the card's own overflow:hidden) since these are photo-like
   worksheet thumbnails rather than icon-style previews. */
.name-showcase-card {
    transition: box-shadow 0.15s, transform 0.15s;
}
.name-showcase-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.name-showcase-card img {
    transition: transform 0.25s ease;
}
.name-showcase-card:hover img {
    transform: scale(1.08);
}

/* Popular-names tabs (gallery/_popular_names_tabs.php) — plain black
   list-group links read flat against the surrounding card; a vertical
   divider between columns and brand-colored links make each column
   scannable as its own group instead of one long undifferentiated list. */
.name-links-col {
    border-left: 1px solid var(--border);
}
.name-links-col:first-child {
    border-left: none;
}
.name-links-list .list-group-item {
    border: none;
    background: transparent;
    padding: 0.35rem 0.9rem;
}
.name-links-list .name-link {
    color: var(--brand-blue);
    font-weight: 500;
    font-size: 0.92rem;
    border-radius: 0.4rem;
}
.name-links-list .name-link:hover {
    color: var(--brand-blue-dark);
    background: var(--surface-soft);
}

/* Gallery hub "browse" cards (country cards on /worksheets/names, gender
   cards on /worksheets/names/{country}) — same lift/border/shadow language
   as .trending-tile so hub-level browsing feels consistent with the
   homepage's own tile grid. */
.gallery-child-card {
    border: 1px solid var(--border);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gallery-child-card:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.static-preview-card span {
    display: block;
    padding: 0.55rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
}

.related-link {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ink);
}
.related-link:hover {
    color: var(--brand-blue);
}
/* Sidebar "Did you know?" trivia callout — random fact per page load, for
   repeat-visit freshness. See TriviaLibrary/worksheet_config/trivia.json;
   deliberately not wrapped in FAQPage schema, just a visible engagement
   element. Pinned first in the sidebar and given its own light-yellow
   treatment (distinct from the neutral --accent-bg used elsewhere) so it
   reads as a standout callout, not just another list card. */
.trivia-card {
    background: #fef9e7;
    border: 1px solid #fde68a;
}
.trivia-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92650a;
}
.trivia-bulb {
    font-size: 1rem;
    line-height: 1;
}
.trivia-question {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
}
.trivia-answer {
    font-size: 0.85rem;
    color: #334155;
}

.trust-list li {
    position: relative;
    padding-left: 1.2rem;
    color: #334155;
    margin-bottom: 0.4rem;
}
.trust-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}

/* Horizontal "glide" strip of example chips — native scroll-snap rather
   than a JS carousel library, consistent with the no-build-step stack.
   Clicking a chip pre-fills the editor via the existing non-indexed
   ?text= query param mechanism (see editor.js) — never a new URL path
   per example, which would recreate the doorway-page problem this whole
   site's URL structure exists to avoid. */
.example-glide {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}
.example-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.example-chip:hover, .example-chip.active {
    border-color: var(--brand-blue);
    color: var(--brand-blue-dark);
}

/* Second sidebar variation of the same example-picker: a large, auto-
   sliding carousel of real rendered full-worksheet-page previews
   (pre-generated by spark generate:example-thumbnails, never per-request),
   one tall page at a time with dot indicators — versus the compact text
   chip strip above it. Bootstrap's native carousel component (already
   loaded) rather than a third-party library, since it already gives
   autoplay + indicators + swipe out of the box. */
.example-carousel {
    border-radius: 0.6rem;
    overflow: hidden;
}
.example-carousel-item {
    cursor: pointer;
    background: var(--surface-soft);
    position: relative;
}
.live-preview-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--brand-blue-dark);
    background: var(--brand-blue-light);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
/* .carousel-item img (not just .example-carousel-item img) so this also
   covers _template_carousel.php's plain-link carousel items, which don't
   carry the example-carousel-item class (they're not click-to-select, just
   links) — that mismatch was the actual bug behind "cut off on the right":
   the image rendered at its full natural 803x1000px intrinsic size with
   no sizing rule ever matching it at all. */
.example-carousel .carousel-item img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}
.example-carousel-caption {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.5rem 0.25rem 0.1rem;
}
.example-carousel .carousel-indicators {
    position: static;
    margin: 0.5rem 0 0;
}
.example-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--brand-blue);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.35;
}
.example-carousel .carousel-indicators .active { opacity: 1; }
.example-carousel .carousel-control-prev,
.example-carousel .carousel-control-next {
    width: 10%;
    opacity: 0;
    transition: opacity 0.15s;
}
.example-carousel:hover .carousel-control-prev,
.example-carousel:hover .carousel-control-next {
    opacity: 0.8;
}
.example-carousel .carousel-control-prev-icon,
.example-carousel .carousel-control-next-icon {
    filter: invert(1) grayscale(1);
    width: 1.5rem;
    height: 1.5rem;
}

/* Homepage-only polish: a quick stat strip under the hero, and a full-
   bleed tinted band (breaks out of .container via the negative-margin
   trick) to give the page visual rhythm instead of one flat white column
   of sections stacked top to bottom. */
.home-stat-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    max-width: 1100px;
}
.home-stat-bar > div { text-align: center; }
.home-stat-bar strong {
    display: block;
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--brand-blue);
    line-height: 1.1;
}
/* Capped width + centered margin on the LABEL only (not the number, and
   not the parent div) — a long label like "Names per batch PDF" wraps
   onto its own second line within that narrow strip, so the 6-item row
   holds one line at tablet-ish widths (~768px) instead of overflowing
   into a second row. Constraining the parent div itself instead of just
   the label was tried first and clipped/overlapped the number ("100%"
   ran into "3-7") since a number can be wider than a narrow fixed box at
   the large end of its clamp() — the label is always the narrower,
   safer thing to cap. */
.home-stat-bar span {
    display: block;
    max-width: 92px;
    margin: 0 auto;
    font-size: 0.76rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* Full-bleed tinted band. Note: no width:100vw + negative-margin trick
   here — that's the classic cause of a page-wide horizontal scrollbar
   (100vw includes the scrollbar's own width, so it's wider than the
   actual viewport). Not needed anyway: .home-band sits directly in
   <main>, never nested inside .container, so it's already full width by
   default block behavior. */
.how-it-works-step {
    text-align: center;
    padding: 0 0.5rem;
}
.how-it-works-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.how-it-works-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.how-it-works-step p {
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 0;
}

/* "Popular & trending" quick-access tile grid — real pages only, see
   Home::TRENDING_TILES for why cursive/alphabet aren't included yet. */
.trending-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.trending-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 0.75rem;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.trending-tile:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--ink);
    text-decoration: none;
}
.trending-tile-icon { font-size: 1.9rem; line-height: 1; }
.trending-tile-label { font-weight: 700; font-size: 0.95rem; }
.trending-tile-desc { font-size: 0.78rem; color: var(--muted); }

.home-band {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.home-band h2 { font-size: 1.6rem; font-weight: 800; }
.home-band p { color: #334155; }

.editorial-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 2rem;
}
.editorial-content { color: var(--ink); }
.editorial-content p, .editorial-content li { color: #334155; }
.editorial-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 1.5rem 0;
}
.static-page-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.static-page-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 1.5rem;
}

/* Worksheet-type links in the footer — a plain single stacked column grows
   unusably tall once the type count passes ~15. CSS multi-column flow (not
   grid) keeps that compact: with grid-template-columns, every row's height
   matches its tallest cell, so one link wrapping to two lines inflates the
   whole row across all 4 columns. Columns let each one size independently
   — a wrapped link only makes its own column taller. */
.footer-worksheet-grid {
    /* 2, not the old 4 — this column shrank from col-lg-6 to col-lg-3 when
       the new "Word Lists & Galleries" footer column was added, and 4 text
       columns in half that width wrapped labels badly. */
    column-count: 2;
    column-gap: 1.5rem;
    font-size: 0.85rem;
}
.footer-worksheet-grid a {
    display: block;
    color: inherit;
    margin-bottom: 0.45rem;
    break-inside: avoid;
}
@media (max-width: 767.98px) {
    .footer-worksheet-grid { column-count: 2; }
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.85rem;
}
.site-footer a {
    color: inherit;
}
.site-footer a:hover {
    color: var(--ink);
    text-decoration: underline;
}