/*
 * Syllables World / SynonymGuide — Playful Geometric design system.
 * Base layer is real Bulma (static/bulma.min.css, loaded before this file).
 * This file overrides Bulma's defaults with the site's visual identity.
 */

:root {
  /* ============================================================
     Syllables World design kit — canonical tokens.
     Source: docs/design-kit/syllables-kit.css (authored in the
     claude.ai/design project). Accessibility corrections below are
     binding over the kit as authored — see "Corrections to the kit"
     in docs/superpowers/specs/2026-08-20-design-kit-adoption-design.md
     ============================================================ */

  /* Ground */
  --paper:        #FBF7F0;   /* bone — the page */
  --paper-2:      #FFFFFF;   /* raised blocks */
  --paper-3:      #F1E9DC;   /* quiet fill, tracks, wells */

  /* Ink */
  --ink:          #2A1B33;   /* blackcurrant — all body text */
  --ink-soft:     #6E5E78;   /* secondary text */
  --ink-faint:    #B7ABBD;   /* dividers, placeholder borders, disabled fills.
                                NEVER text a user must read — 2.05:1 on --paper. */
  --currant:      #4A2B5C;   /* deep brand block */

  /* Action */
  --tangerine:      #EE5F0A;
  --tangerine-dark: #C44A03; /* also: the fill to use when white text is
                                smaller than 18.66px bold — 4.85:1 with #fff */
  --tangerine-tint: #FFE6D2;
  --tangerine-ink:  #A33D02; /* kit v3 — tangerine as TEXT on paper or tint; also hover fill */

  /* Feedback */
  --mint:       #0E9E77;
  --mint-tint:  #D3F3E8;
  --berry:      #D63A5E;
  --berry-tint: #FBDDE3;

  /* Reward + info */
  --sun:      #FFC331;
  --sun-tint: #FFF0C7;
  --sky:      #2C7FD1;
  --sky-tint: #DBEBFA;

  /* Corrected ink variants — for text and icons that must be READ.
     The bright tokens above are fills, borders, and decorative shapes only.
     Ratios measured against --paper (#FBF7F0). */
  --sun-ink:   #8A6100;   /* 5.19:1 — --sun is 1.60:1 on white */
  --mint-ink:  #097054;   /* 5.68:1 — --mint is 3.40:1 on white */
  --berry-ink: #A8213F;   /* 6.65:1 — --berry is 3.58:1 on --berry-tint */
  --sky-ink:   #1F5F9F;   /* 6.16:1 — --sky is 3.88:1, fails as a link colour */

  /* Type */
  --font-display: "Chivo", system-ui, sans-serif;
  --font-body:    "Atkinson Hyperlegible", system-ui, sans-serif;
  --w-display:    900;
  --w-strong:     700;

  /* Shape */
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* Space (4-based) */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Rules */
  --rule-color: #E4DACC;
  --line:      1.5px solid #E4DACC;
  --line-ink:  2px solid var(--ink);

  --container: 1180px;
  --gutter:    clamp(16px, 4vw, 40px); /* kit v3 — fluid page gutter */
  --tap-min:   52px;   /* hard floor for EVERY control, chrome included (kit v3) */

  /* Breakpoints (documentation — media queries cannot read custom properties):
     sm < 760px phone · md 760-1040 tablet · lg > 1040 desktop (kit v3) */

}

/* Print (kit v3) — 114 worksheets, packs, certificates and answer keys come out
   of classroom printers. White ground, black ink, tints become white, rules go
   hairline. Never spend a teacher's toner on a bone background. This retargets
   TOKENS only; worksheet print layout CSS is untouched and keeps working. */
@media print {
  :root {
    --paper: #FFFFFF; --paper-2: #FFFFFF; --paper-3: #FFFFFF;
    --ink: #000000; --ink-soft: #333333; --ink-faint: #767676;
    --tangerine: #000000; --tangerine-dark: #000000; --tangerine-ink: #000000;
    --tangerine-tint: #FFFFFF; --mint-tint: #FFFFFF; --berry-tint: #FFFFFF;
    --sun-tint: #FFFFFF; --sky-tint: #FFFFFF;
    --sun-ink: #000000;
    --mint-ink: #000000;
    --berry-ink: #000000;
    --sky-ink: #000000;
    --line: 1px solid #000000;
    /* The kit's print spec: "display weights reduced". Chivo 900 is heavy on
       an inkjet; 700 keeps hierarchy without the toner cost. */
    --w-display: 700;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.05rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
}

/* Display weight has to be set on .title as well as the bare tags. Headings in
   this codebase are usually written <h1 class="title">, and Bulma's own .title
   rule (specificity 0,1,0) beats an element selector — so setting the weight on
   h1-h6 alone silently loses and the heading stays at Bulma's 600/700.
   .subtitle is deliberately excluded: it is supporting copy, not display. */
h1, h2, h3, h4, h5, h6, .title {
  font-weight: var(--w-display);
}

.content a:not(.button):not(.navbar-item):not(.nav-panel-link):not(.nav-grade-pill):not(.site-logo) {
  color: var(--sky-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content a:not(.button):not(.navbar-item):not(.nav-panel-link):not(.nav-grade-pill):not(.site-logo):hover {
  color: var(--sky-ink);
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.button {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px);
}

.button.is-primary {
  background-color: var(--tangerine-dark) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.button.is-primary:hover, .button.is-primary:focus {
  background-color: var(--tangerine-ink) !important;
}
.button.is-primary:active {
  background-color: var(--tangerine-ink) !important;
}

.button.is-link {
  background-color: var(--paper-2) !important;
  border-color: var(--ink) !important;
  color: var(--sky-ink) !important;
}
.button.is-link:hover, .button.is-link:focus {
  background-color: var(--paper-2) !important;
  color: var(--sky-ink) !important;
}

.button.is-info {
  background-color: var(--sky-tint) !important;
  border-color: var(--ink) !important;
  color: var(--sky-ink) !important;
}
.button.is-success {
  background-color: var(--mint-tint) !important;
  border-color: var(--ink) !important;
  color: var(--mint-ink) !important;
}
.button.is-warning {
  background-color: var(--sun-tint) !important;
  border-color: var(--ink) !important;
  color: var(--sun-ink) !important;
}
.button.is-danger {
  background-color: var(--berry) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.button.is-light {
  background-color: var(--paper-2) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  border-width: 1.5px;
}
.button.is-dark {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.button.is-ghost {
  background: transparent !important;
  border: 1.5px dashed var(--ink) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.button.is-ghost:hover {
  background: rgba(26, 26, 46, 0.05) !important;
}

.button.is-small {
  border-width: 1.5px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  padding: 0.35em 0.75em;
}
.button.is-small:active {
  box-shadow: 1px 1px 0 var(--ink);
}
.button.is-medium {
  font-size: 1.15rem;
  padding: 0.65em 1.25em;
}
.button.is-large {
  font-size: 1.35rem;
  padding: 0.85em 1.6em;
  border-radius: var(--r-lg);
}
.button.is-fullwidth {
  display: flex;
}

/* ─── Tags ─────────────────────────────────────────────────────────────── */
/* :not(body) matches Bulma 0.9.3's own .tag:not(body) specificity — plain
   .tag/.tag.is-info lost to Bulma's built-in colors otherwise (final-review
   fix, 2026-08-10; this re-reverts a silent regression of commit b1f9a8a). */
.tag:not(body) {
  font-family: var(--font-body);
  font-weight: 800;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background-color: var(--paper-2);
  color: var(--ink);
}
.tag:not(body).is-info { background-color: var(--sky-tint); color: var(--sky-ink); }
.tag:not(body).is-success { background-color: var(--mint-tint); color: var(--mint-ink); }
.tag:not(body).is-warning { background-color: var(--sun-tint); color: var(--sun-ink); }
.tag:not(body).is-danger { background-color: var(--berry-tint); color: var(--berry-ink); }
.tag:not(body).is-light { background-color: var(--paper-2); border-width: 1px; }

/* ─── Box / card ───────────────────────────────────────────────────────── */
.box {
  border-radius: var(--r-lg);
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
}

/* ─── Breadcrumb ───────────────────────────────────────────────────────── */
.breadcrumb {
  font-family: var(--font-body);
  font-weight: 700;
  background-color: rgba(26, 26, 46, 0.04);
  border-radius: var(--r-sm);
  padding: 0.6rem 1rem;
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--sky-ink); }
.breadcrumb li.is-active a { color: var(--ink); }

/* ─── Notification ─────────────────────────────────────────────────────── */
.notification {
  border-radius: var(--r-lg);
  border: 1.5px solid var(--ink);
}
.notification.is-light {
  background-color: rgba(255, 216, 77, 0.15);
}

/* ─── Custom (non-Bulma) modifiers already used in templates ──────────────
   Same bug class as is-small/is-light: a modifier class with no definition
   anywhere. Found via full-repo grep, not in the original inventory. */
.button.is-kids-primary {
  background-color: var(--tangerine-dark) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.button.is-kids-primary:hover, .button.is-kids-primary:focus {
  background-color: var(--tangerine-ink) !important;
}
.box.is-nice {
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 216, 77, 0.35);
}

/* ─── Tables ───────────────────────────────────────────────────────────── */
.table {
  border-radius: var(--r-md);
  overflow: hidden;
}
.table.is-bordered td, .table.is-bordered th {
  border: 1px solid var(--rule-color);
}
.table.is-striped tbody tr:nth-child(even) {
  background-color: rgba(26, 26, 46, 0.03);
}
.table.is-hoverable tbody tr:hover {
  background-color: rgba(255, 216, 77, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════
   Nav / header / mobile-drawer / hero / forms / footer chrome
   Moved verbatim from layout.html's embedded <style> block (Task 3), then
   reskinned to Playful Geometric tokens (ink borders, hard offset shadows,
   yellow/coral accent washes in place of the old soft-shadow/mint-wash
   look). Structural/behavioral properties (display, position, z-index,
   media query breakpoints, transition timing) are unchanged from source.
   layout.html's own <style> block is untouched until Task 4 deletes it.

   Fix-up pass (2026-08-10, coordinator review): also swept remaining
   old sky-blue-family colors inside the mobile-drawer media query that
   the original substitution list didn't name individually, and added the
   site-wide accessibility-toggle widget (.a11y-toggle*, body.a11y-dyslexia,
   body.a11y-contrast) that was missing from the first pass. See task-3
   report for the exact color-mapping rationale per selector.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header styles - single row, compact */
.site-header {
    background-color: var(--paper-2);
    position: relative;
    z-index: 1000;
    padding: 0;
    min-height: 3.25rem;
    border-bottom: var(--line);
}

/* Single source for the logo. This rule previously existed twice, ~1000 lines
   apart, with conflicting weights (700 here, `bold` in the later block) — the
   later one silently won on every property it set. Merged here so the tile
   treatment has one rule to build on. Values below are what the page actually
   computed before the merge, except the weight, which now follows the kit. */
.site-logo {
    font-family: var(--font-display), var(--font-display);
    font-weight: var(--w-display);
    font-size: 1.25rem;
    color: var(--ink);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: currentColor;
    background-clip: unset;
    letter-spacing: 0.02em;
    height: 3.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-logo:hover {
    text-decoration: none;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Tangerine rounded-square logo tile (kit prototype treatment, Task 4). Only
   rendered by layout.html's non-synonyms branch — SynonymGuide keeps its
   plain wordmark, so this class never matches on that brand's DOM even
   though the rule ships in the same stylesheet. */
.site-logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--tangerine);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: var(--w-display);
    font-size: 1.25rem;
    line-height: 1;
}

.main-nav .navbar-item {
    font-weight: 600;
    color: var(--ink);
    border-radius: var(--r-md);
    transition: all 0.18s ease;
}

.main-nav .navbar-item:hover,
.main-nav .navbar-item.is-active {
    background-color: rgba(255, 216, 77, 0.1);
    color: var(--ink);
    transform: translateY(-2px);
}

/* Hero section */
.hero-section {
    background: var(--tangerine-dark);
    color: #fff;
    padding: 4rem 2rem;
    margin-bottom: 2rem;
    border-radius: var(--r-lg);
    border: 2px solid var(--ink);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><path d="M0,0 L100,100 M0,100 L100,0" stroke="rgba(23, 62, 62, 0.05)" stroke-width="2"/></svg>');
    background-size: 20px 20px;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
    position: relative;
}

.hero-subtitle {
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
    color: #fff;
    position: relative;
    opacity: 0.9;
}

/* Content sections */
.content-section {
    margin-bottom: 3rem;
    margin-top: 2rem;
    padding: 1rem 0;
}

.section-title {
    font-size: 1.75rem;
    color: var(--ink);
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--tangerine);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--tangerine-dark);
}

/* Content spacing */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.content h1 {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.content p {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.content ul, .content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.content li {
    margin-bottom: 0.5rem;
}

/* Button group container */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Cards and boxes */
.feature-card {
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border-radius: var(--r-lg);
    border: 2px solid var(--ink);
    background-color: var(--paper-2);
    padding: 1.5rem;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--tangerine-dark);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--tangerine);
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--ink);
}
/* Example boxes */
.example-box {
    background-color: rgba(255, 216, 77, 0.1);
    border-left: 4px solid var(--tangerine);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

.example-word {
    font-weight: var(--w-strong);
    color: var(--ink);
    background-color: rgba(255, 216, 77, 0.2);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

.syllable-highlight {
    background-color: rgba(255, 216, 77, 0.2);
    padding: 0 4px;
    border-radius: 4px;
    margin: 0 2px;
}

/* Practice tips */
.practice-tip {
    background-color: var(--mint-tint);
    border-radius: var(--r-md);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 2px solid var(--tangerine);
}

.tip-title {
    color: var(--ink);
    font-weight: var(--w-strong);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

/* Conclusion section */
.conclusion-section {
    background-color: var(--paper-3);
    padding: 2rem;
    border-radius: var(--r-md);
    margin-top: 2rem;
    border: 1px solid var(--rule-color);
}

/* Footer styles */
.footer {
    background-color: var(--tangerine-dark);
    color: #fff;
    padding: 3rem 1.5rem;
    margin-top: 3rem;
    border-top: 3px solid var(--tangerine-ink);
}

.footer a {
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer a:hover {
    color: #fff;
    opacity: 1;
    transform: translateY(-2px);
}

.bd-footer-link-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.bd-footer-link {
    margin-top: 0.5rem;
}

/* Touch floor: footer links measured 27px tall on phones — pad each link's
   tap area to >=44px without changing the visual rhythm on desktop. */
@media (max-width: 760px) {
    .footer a {
        padding: 0.55rem 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

.bd-footer-link .ph-fill {
    margin-right: 0.35em;
}

/* Tool sections */
.tool-container {
    background-color: white;
    border-radius: var(--r-lg);
    border: var(--line);
    padding: 2rem;
    margin-bottom: 2rem;
}

.tool-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--sky-ink);
}

/* Form elements */
.input, .textarea {
    border-radius: var(--r-sm);
    border: 1.5px solid var(--ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.8rem 1rem;
}

.input:focus, .textarea:focus {
    border-color: var(--tangerine);
    box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.25);
    outline: none;
}

.textarea {
    min-height: 120px;
    line-height: 1.6;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .hero-section {
        padding: 3rem 1.5rem;
    }

    /* Prevent hero overflow on mobile */
    .hero .hero-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Utility classes */
.has-text-primary {
    color: var(--sky-ink) !important;
}

.has-text-accent {
    color: var(--sky-ink) !important;
}

.has-background-primary {
    background-color: var(--tangerine) !important;
}

.has-background-accent {
    background-color: var(--sky-ink) !important;
}

.has-background-light {
    background-color: rgba(255, 216, 77, 0.1) !important;
}

/* Speak button */
.js-speak {
    background: url("/static/img/speaker.aa8bb5ff3afc.png") no-repeat right center;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    opacity: 0.7;
    transition: opacity 0.18s ease;
}

.js-speak:hover {
    opacity: 1;
}

/* Enhanced Input Styles */
.input-enhanced {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--paper-2);
    background-clip: padding-box;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-sm);
    transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
    font-family: var(--font-body);
}

.input-enhanced:focus {
    border-color: var(--tangerine);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.25);
}

.input-enhanced::placeholder {
    color: var(--ink-soft);
    opacity: 0.7;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1rem;
}

.input-group .input-enhanced {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

.input-group-append {
    display: flex;
    margin-left: -1px;
}

.input-group .input-enhanced:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Hero search: same visual height for field + button (mobile) */
.input-group-append .button-enhanced {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    height: 3.5rem;
}

.search-form .input-group .input-enhanced {
    min-height: 3.5rem;
    box-sizing: border-box;
}

/* Enhanced Button Styles */
.button-enhanced {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 2px solid var(--ink);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--r-md);
    transition: transform 0.2s ease,
               box-shadow 0.2s ease,
               background-color 0.18s ease-in-out,
               border-color 0.18s ease-in-out;
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    transform: translateY(0);
}

.button-enhanced:focus, .button-enhanced:hover {
    text-decoration: none;
    outline: 0;
    transform: translateY(-2px);
}

.button-enhanced:active {
    transform: translateY(1px);
}

.button-enhanced:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.button-enhanced.primary {
    color: #fff;
    background-color: var(--tangerine-dark);
    border-color: var(--tangerine-dark);
}

.button-enhanced.primary:hover {
    background-color: var(--tangerine-ink);
    border-color: var(--tangerine-ink);
}

.button-enhanced.primary:active {
    background-color: var(--tangerine-ink);
    border-color: var(--tangerine-ink);
}

.button-enhanced.secondary {
    color: #fff;
    background-color: var(--tangerine-dark); /* raw tangerine is 3.35:1 under white 13px text */
}

.button-enhanced.secondary:hover {
    background-color: var(--tangerine-ink);
}

.button-enhanced.secondary:active {
    background-color: var(--tangerine-dark);
}

/* Button Sizes */
.button-enhanced.small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: calc(var(--r-md) - 2px);
}

.button-enhanced.large {
    padding: 1rem 2rem;
    font-size: 1.25rem;
}

/* Button with Icon */
.button-enhanced.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-enhanced.icon-button .icon {
    margin-right: 0.5rem;
}

.button-enhanced.icon-button.icon-right .icon {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Search Form Specific Styles */
.search-form {
    max-width: 600px;
    margin: 2rem auto;
}

.search-form .input-group {
    margin-bottom: 0;
}

.search-form .button-enhanced {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Floating Label Input */
.floating-label {
    position: relative;
    margin-bottom: 1.5rem;
}

.floating-label input {
    height: 3.5rem;
    padding: 1rem 0.75rem;
}

.floating-label label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    color: var(--ink-soft);
}

.floating-label input:focus ~ label,
.floating-label input:not(:placeholder-shown) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Custom Checkbox */
.custom-checkbox {
    position: relative;
    padding-left: 2.2rem;
    cursor: pointer;
    display: inline-block;
    margin-right: 1rem;
    font-family: var(--font-body);
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.4rem;
    width: 1.4rem;
    background-color: var(--paper-2);
    border: 2px solid var(--tangerine);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: var(--tangerine-dark);
    transform: scale(1.05);
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--tangerine);
    border-color: var(--tangerine);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Accent CTAs on white cards — sky primary + white text (no green + link-blue clash) */
.button-enhanced.accent {
    color: #ffffff;
    background-color: var(--tangerine-dark);
    border: 2px solid var(--tangerine-dark);
}

.button-enhanced.accent:hover {
    color: #ffffff;
    background-color: var(--tangerine-ink);
    border-color: var(--tangerine-ink);
}

.button-enhanced.accent:active {
    color: #ffffff;
    background-color: var(--tangerine-ink);
    border-color: var(--tangerine-ink);
}

a.button-enhanced {
    text-decoration: none;
}

a.button-enhanced:hover {
    text-decoration: none;
}

.button-enhanced.outline-accent {
    color: var(--ink);
    background-color: transparent;
    border: 2px solid var(--ink);
}

.button-enhanced.outline-accent:hover {
    color: var(--ink);
    background-color: rgba(255, 216, 77, 0.1);
    border-color: var(--ink);
}

.button-enhanced.outline-accent:active {
    background-color: rgba(255, 216, 77, 0.2);
    transform: translateY(1px);
}

.button-enhanced.outline-primary {
    color: var(--ink);
    background-color: transparent;
    border: 2px solid var(--ink);
}

.button-enhanced.outline-primary:hover {
    color: var(--ink);
    background-color: rgba(255, 216, 77, 0.1);
    border-color: var(--ink);
}

.button-enhanced.outline-primary:active {
    background-color: rgba(255, 216, 77, 0.2);
    transform: translateY(1px);
}

.button-enhanced.outline-secondary {
    color: var(--ink);
    background-color: transparent;
    border: 2px solid var(--ink);
}

.button-enhanced.outline-secondary:hover {
    color: var(--ink);
    background-color: rgba(255, 216, 77, 0.1);
    border-color: var(--ink);
}

.button-enhanced.outline-secondary:active {
    background-color: rgba(255, 216, 77, 0.2);
    transform: translateY(1px);
}

.navbar {
    background-color: var(--paper-2);
    border-bottom: var(--line);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-brand {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.main-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}

.main-nav .navbar-item {
    white-space: nowrap;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.nav-menu-plain-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Megamenu dropdown ──────────────────────────────────── */
.nav-dropdown {
    position: relative;
}

.nav-menu-intro {
    display: none;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: var(--r-lg);
    border: none;
    background: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease;
    height: var(--tap-min);
    text-decoration: none;
    box-sizing: border-box;
    font-family: var(--font-body);
}

.nav-trigger-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.nav-trigger-emoji {
    font-size: 1.1rem;
    line-height: 1;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.is-active {
    background-color: var(--tangerine-tint);
    border-radius: var(--r-sm);
    transform: translateY(-2px);
    color: var(--tangerine-ink);
}

.nav-dropdown-trigger .nav-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.55;
    flex-shrink: 0;
    min-width: 1rem;
    text-align: center;
}

.nav-dropdown.is-open .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper-2);
    border-radius: var(--r-lg);
    border: var(--line);
    padding: 1rem;
    min-width: 200px;
    z-index: 2000;
    animation: dropIn 0.15s ease;
}

.nav-dropdown.is-open .nav-dropdown-panel {
    display: block;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-dropdown-panel.is-wide {
    min-width: 480px;
}

.nav-panel-section {
    margin-bottom: 0.75rem;
}

.nav-panel-section:last-child {
    margin-bottom: 0;
}

.nav-panel-label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 0 0.5rem 0.35rem;
    border-bottom: 1px solid var(--rule-color);
    margin-bottom: 0.35rem;
}

.nav-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem;
}

.nav-panel-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.nav-panel-link:hover {
    background-color: var(--tangerine-tint);
    color: var(--tangerine-ink);
}

.nav-panel-link .nav-icon {
    font-size: 1.05rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}

/* Family icons in family colours (kit v3 panel restyle spec): each mega-menu
   panel tints its own leaf-link icons so the four panels stay scannable at a
   glance. Trigger icons stay neutral (inherit ink-soft, then tangerine-ink
   on hover/open) so only the panel content carries the family hue. */
#panel-learn .nav-icon { color: var(--sky-ink); }
#panel-practice .nav-icon { color: var(--mint-ink); }
#panel-worksheets .nav-icon { color: var(--sun-ink); }
#panel-tools .nav-icon { color: var(--berry-ink); }

.nav-panel-divider {
    height: 1px;
    background: var(--rule-color);
    margin: 0.5rem 0;
}

.nav-panel-footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tangerine-ink);
    text-decoration: none;
    border: var(--line);
    transition: background-color 0.15s ease;
}

.nav-panel-footer-link:hover {
    background-color: var(--tangerine-tint);
}

/* Grade badge pills in worksheets dropdown */
.nav-grade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.nav-grade-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.25rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    background: var(--paper-3);
    color: var(--ink-soft);
    border: 1px solid var(--rule-color);
    transition: all 0.15s ease;
    line-height: 1.2;
}

.nav-grade-pill:hover {
    background: var(--tangerine-tint);
    border-color: var(--tangerine);
    color: var(--tangerine-ink);
}

/* Mobile accordion for dropdowns */
@media screen and (max-width: 1023px) {
    .nav-dropdown {
        border-bottom: 1px solid rgba(34, 48, 73, 0.06);
    }

    .nav-dropdown-panel {
        position: static;
        transform: none;
        border-radius: 0 0 var(--r-md) var(--r-md);
        margin: 0 0.75rem 0.5rem;
        padding: 0.5rem 0.75rem 0.75rem;
        background: var(--paper-3);
        border: var(--line);
        border-top: none;
        animation: none;
        min-width: unset;
    }

    .nav-dropdown-panel.is-wide {
        min-width: unset;
    }

    .nav-panel-grid {
        grid-template-columns: 1fr;
    }

    .nav-grade-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-dropdown-trigger {
        height: auto;
        min-height: var(--tap-min);
        padding: 1rem 1.1rem;
        margin: 0 0.35rem 0.5rem;
        width: calc(100% - 0.7rem);
        border-bottom: none;
        border-radius: var(--r-md);
        justify-content: space-between;
        font-size: 1.05rem;
        background: var(--paper-2);
        border: var(--line);
    }

    .nav-dropdown-trigger .nav-caret {
        font-size: 0.8rem;
        opacity: 0.65;
    }

    .nav-dropdown-trigger:hover {
        transform: none;
        background-color: var(--tangerine-tint);
    }

    .nav-panel-link {
        min-height: 40px;
        padding: 0.75rem 0.65rem;
        border-bottom: none;
        border-radius: 10px;
        white-space: normal;
        font-size: 1rem;
    }

    .nav-panel-link:hover {
        background-color: var(--tangerine-tint);
    }

    .nav-panel-label {
        padding-top: 0.35rem;
        padding-left: 0.35rem;
    }

    .nav-panel-footer-link {
        margin-top: 0.35rem;
    }
}

/* .site-logo's second declaration was merged into the single rule near the top
   of this file. */

.navbar-burger {
    height: 2.75rem;
    width: 2.75rem;
    margin-left: auto;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-sm);
    background: var(--paper-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.navbar-burger:hover {
    background: var(--paper-2);
    border-color: var(--sky-ink);
}

.navbar-burger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(55, 168, 255, 0.35);
}

.navbar-burger span {
    background-color: var(--ink);
    height: 2px;
    width: 18px;
    margin: 0;
    display: block;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.navbar-burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-burger.is-active span:nth-child(2) {
    opacity: 0;
}

.navbar-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.navbar-menu {
    box-shadow: none;
    transition: all 0.3s ease;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.navbar-item {
    padding: 0.4rem 0.75rem;
    transition: all 0.3s ease;
}

.section {
    padding: 3rem 1.5rem;
    margin-top: 0;
}

/* Reserve space for fixed navbar - prevent content overlap */
main {
    padding-top: 3.25rem;
}

@media screen and (min-width: 1024px) {
    .navbar-burger {
        display: none;
    }

    .nav-dropdown-trigger {
        width: auto;
    }
}

@media screen and (max-width: 1023px) {
    .navbar-burger {
        display: flex;
    }

    .navbar-menu {
        position: fixed;
        top: 3.25rem;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: calc(100vh - 3.25rem);
        max-height: calc(100dvh - 3.25rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
        padding: 0.75rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0));
        border-top: 1px solid var(--rule-color);
        display: none;
        flex-grow: unset;
        justify-content: unset;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.22s ease, transform 0.22s ease;
        z-index: 1002;
    }

    .navbar-menu.is-active {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-menu-intro {
        display: block;
        margin: 0;
        padding: 0.6rem 1.25rem 0.35rem;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ink-soft);
    }

    .navbar-start {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 0.35rem;
    }

    .navbar-item {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(34, 48, 73, 0.06);
        width: 100%;
        text-align: left;
        font-size: 1.05rem;
        font-weight: 600;
    }

    a.navbar-item.nav-menu-plain-link {
        margin: 0.35rem 0.65rem 0.85rem;
        padding: 0.95rem 1.1rem !important;
        border-radius: 14px !important;
        background: var(--paper-2) !important;
        border: 2px solid var(--rule-color) !important;
        border-bottom: 2px solid var(--rule-color) !important;
        text-align: left !important;
        color: var(--ink) !important;
    }

    a.navbar-item.nav-menu-plain-link:hover {
        background: rgba(255, 216, 77, 0.18) !important;
        border-color: var(--ink) !important;
    }

    .navbar-item:last-child {
        border-bottom: none;
    }

    .navbar-item:hover {
        background-color: rgba(255, 216, 77, 0.08);
    }

    .section {
        padding: 2rem 1rem;
    }

    .navbar-brand {
        width: auto;
        flex: 1;
        min-width: 0;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .navbar-inner {
        padding: 0.5rem 1rem;
        flex-wrap: nowrap;
    }

    .site-logo {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Utilities absent from purge.min.css (Bulma was purged before
      these classes were used; see CLAUDE.md "purged Bulma subset").
      Keep additions here, never re-add classes to purge.min.css. ── */
.has-text-white { color: #fff !important; }
.has-text-dark { color: var(--ink) !important; }
.has-text-grey { color: var(--ink-soft) !important; }
/* Card grids on list pages: never break words mid-word */
.box a, .card a, .title { overflow-wrap: normal; word-break: normal; }
[data-star-word].word-star-btn--saved { border-color: var(--sun); color: var(--sun-ink); }

/* Accessibility toggle: dyslexia-friendly font + high contrast, CSS-only, no new font asset */
.a11y-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 1000; }
.a11y-toggle__btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);
    background: var(--ink); color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer;
}
.a11y-toggle__panel {
    position: absolute; bottom: 52px; right: 0; background: var(--paper-2); color: var(--ink-soft);
    border: 1px solid var(--rule-color); border-radius: 10px; padding: 12px 16px;
    white-space: nowrap;
}
.a11y-toggle__option { display: block; font-size: .9rem; padding: 4px 0; cursor: pointer; }
body.a11y-dyslexia, body.a11y-dyslexia * { font-family: Verdana, Tahoma, sans-serif !important; letter-spacing: .04em !important; word-spacing: .1em !important; line-height: 1.7 !important; }
body.a11y-contrast { background: #000 !important; color: #fff !important; }
body.a11y-contrast * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; }
body.a11y-contrast a { color: #ffeb3b !important; text-decoration: underline !important; }
body.a11y-contrast img, body.a11y-contrast svg { filter: grayscale(1) contrast(1.2); }
body.a11y-contrast .a11y-toggle__btn { background: #ffeb3b !important; color: #000 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Restored behavioral rules (final-review fix, 2026-08-10)
   These are layout/behavior rules from the deleted site-design-system.css
   that other templates/files still need — not decoration, so they were
   restored verbatim where they have no color reference, and reskinned to
   --ds-* tokens where they do. Structural/behavioral properties (flex,
   media breakpoints, overflow, padding math) are unchanged from source.
   ═══════════════════════════════════════════════════════════════════════ */

/* Mobile nav drawer: prevent page scroll behind overlay (layout.html JS toggle) */
body.nav-drawer-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.nav-drawer-open {
    overflow: visible;
  }
}

/* Reserve space so fixed/anchor ads (e.g. AdSense) do not cover CTAs on mobile */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Home page hero + card-grid rebuild (kit v3, Task 5, Phase 2)
   Two-column hero — eyebrow pill, huge Chivo display headline, lead copy,
   search + CTAs on the left; syllable-breakdown card on the right — stacks
   at 760px, the kit's own sm breakpoint (documented in :root), not Bulma's
   769px tablet edge.
   The hero ground is solid --tangerine-dark rather than the previous
   tangerine→tangerine-dark gradient: the kit's contrast contract says white
   text under 18.66px bold needs --tangerine-dark to clear 4.5:1, and the
   lead paragraph + CTA labels are smaller than that. A gradient would pass
   at one end and fail at the other, so the whole hero commits to the safe
   shade. The old inline blue-tinted box-shadow (flagged forward from Task 2)
   is dropped, not replaced — the kit forbids shadows.
   Card grids below (feature cards, "how to find," words-by-syllable,
   consonant sounds, FAQ, etc.) get --paper-2/--line/--r-lg, no shadow,
   scoped under .home-page so the shared .box/.feature-card/.practice-tip
   rules other templates (rules.html, consonant.html, worksheet-practice.html,
   ...) still rely on are untouched.
   ═══════════════════════════════════════════════════════════════════════ */

.home-hero {
  background: var(--tangerine-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 1.5rem 0;
  padding: 3rem var(--gutter);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--sun-tint);
  color: var(--sun-ink);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.4em 1em;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.home-hero-title {
  color: #fff;
  font-size: clamp(2.25rem, 4vw + 1.25rem, 4.5rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.home-hero-lead {
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.home-hero .search-form {
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

.home-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Home-page-scoped tangerine-dark overrides removed (design-gap-closure T1):
   the base .button-enhanced.primary/.accent and .button.is-primary rules
   above now carry this fill + border site-wide, so the duplicate was dead. */
.home-hero-actions .button-enhanced {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-hero-actions .button-enhanced.outline-primary {
  /* Fully transparent, not a white wash: white text over a 15% white wash on
     --tangerine-dark composites to ~#CD6529, which is 3.81:1 with white and
     fails AA at this size. White on raw --tangerine-dark is 4.85:1. The final
     review measured this; the wash was decoration purchased with contrast. */
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.home-hero-actions .button-enhanced.outline-primary:hover,
.home-hero-actions .button-enhanced.outline-primary:focus {
  background: #fff;
  color: var(--tangerine-ink);
  border-color: #fff;
}

.home-hero-card {
  background: var(--paper-2);
  border: var(--line);
  border-radius: var(--r-xl);
  padding: 2rem;
}

.home-hero-card-label {
  display: inline-block;
  background: var(--tangerine-tint);
  color: var(--tangerine-ink);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.4em 1em;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.home-hero-card-heading {
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.home-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.home-hero-chip {
  background: var(--sky-tint);
  color: var(--sky-ink);
  font-weight: 700;
  padding: 0.5em 1em;
  border-radius: var(--r-md);
}

.home-hero-chip--stress {
  background: var(--mint-tint);
  color: var(--mint-ink);
}

.home-hero-card-meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

@media (min-width: 761px) {
  .home-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .home-hero {
    padding: 2.5rem var(--gutter);
  }
  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Card grids on the home page: neutral paper-2/line/r-lg treatment, no
   shadow — scoped under .home-page so it never touches the shared
   .box/.feature-card/.practice-tip rules other templates still rely on. */
.home-page .content-section .box,
.home-page .feature-card,
.home-page .practice-tip {
  background: var(--paper-2);
  border: var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.home-page .content-section .box p,
.home-page .feature-card p,
.home-page .practice-tip p {
  color: var(--ink-soft);
}

.home-page .button-enhanced,
.home-page .button.is-link,
.home-page .button.is-primary {
  min-height: var(--tap-min);
}

.home-blog-promo {
  background: var(--mint-tint);
  border: 1px solid var(--mint);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.home-blog-promo p {
  color: var(--mint-ink);
}

/* Syllable word list cards (home.html): avoid equal-height columns creating huge empty areas */
.home-words-by-syllable .columns.is-multiline {
  align-items: flex-start;
}

.home-words-by-syllable .box {
  overflow: visible;
}

/* Home — interactive tools CTAs: full-width stack on phone, no overlap */
.home-tool-cta-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.home-tool-cta-row .home-tool-cta-btn {
  width: 100%;
  margin: 0 !important;
  white-space: normal;
  line-height: 1.35;
  min-height: 3rem;
}

@media (min-width: 769px) {
  .home-tool-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: none;
    gap: 1rem;
  }

  .home-tool-cta-row .home-tool-cta-btn {
    width: auto;
    white-space: nowrap;
  }
}

/**
 * Stacked primary actions on small screens (prevents overlapping Bulma button rows).
 * Use with Bulma `.buttons` or alone on a flex wrapper. Optional `.is-centered` for CTAs.
 * Used on 8+ templates: home, worksheets-index, games-landing, games-placement,
 * games-dashboard, blog-post, others.
 */
.buttons.sw-stack-buttons,
.sw-stack-buttons {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap !important;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.buttons.sw-stack-buttons .button,
.sw-stack-buttons .button,
.sw-stack-buttons .button-enhanced,
.sw-stack-buttons a.button {
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.35;
  min-height: 2.75rem;
  justify-content: center;
  text-align: center;
}

.sw-stack-buttons.is-centered {
  align-items: stretch;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 769px) {
  .buttons.sw-stack-buttons,
  .sw-stack-buttons {
    flex-direction: row;
    flex-wrap: wrap !important;
    align-items: center;
    width: auto;
    max-width: none;
  }

  .buttons.sw-stack-buttons.is-centered,
  .sw-stack-buttons.is-centered {
    justify-content: center;
    max-width: none;
  }

  .buttons.sw-stack-buttons .button,
  .sw-stack-buttons .button,
  .sw-stack-buttons .button-enhanced,
  .sw-stack-buttons a.button {
    width: auto;
    white-space: nowrap;
    flex: 0 1 auto;
  }
}

/* Syllable counter tool (syllables-counter.html) — aligned full-width actions on mobile */
.syllable-counter-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.syllable-counter-actions .control {
  width: 100%;
  margin: 0 !important;
}

.syllable-counter-actions .button-enhanced {
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.35;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 769px) {
  .syllable-counter-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: none;
    gap: 1rem;
  }

  .syllable-counter-actions .control {
    width: auto;
  }

  .syllable-counter-actions .button-enhanced {
    width: auto;
    white-space: nowrap;
    min-width: 11rem;
  }
}

/* Worksheet print pages (worksheet-base.html) — align with design tokens (screen) */
body.worksheet-page {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 100%) !important;
}

body.worksheet-page .ws-toolbar {
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
}

body.worksheet-page .ws-sheet {
  border-radius: var(--r-md);
  border: 1.5px solid var(--ink);
  font-family: var(--font-body), "Nunito", Arial, sans-serif;
}

@media print {
  body.worksheet-page {
    background: var(--paper-2) !important;
  }
}

/* Motion utilities (opt-in) */
@keyframes sw-floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes sw-pop-in {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.sw-floaty {
  animation: sw-floaty 3.6s ease-in-out infinite;
}

.sw-pop-in {
  animation: sw-pop-in 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .sw-floaty,
  .sw-pop-in {
    animation: none !important;
  }
}

/* ─── Heading sizes (final-review fix, 2026-08-10) ────────────────────────
   Bulma's minireset zeroes h1-h6 font-size/weight/margin; the h1..h6/.title
   rule above only restores font-family/color/line-height. Restore a real
   type scale for bare <hN> tags outside a .content/.title context (values
   sourced from the pre-Bulma layout.html embedded <style> block). */
h1, h2, h3, h4, h5, h6 {
  /* The kit sets display text at --w-display (900). This deliberately does NOT
     use --font-weight-strong: that alias is 700 and .tip-title / .example-word
     share it, so repointing it would drag them along too. */
  font-weight: var(--w-display);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
h1 { font-size: 2.5rem; margin-top: 1rem; margin-bottom: 2rem; }
h2 { font-size: 2rem; margin-top: 2.5rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.75rem; margin-top: 2rem; margin-bottom: 1.25rem; }
h4 { font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 1rem; }
h5 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
h6 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.75rem; }

/* ─── Games hub family headers (Phase 4 IA regroup) ───────────────────────
   games-landing.html groups its 18 games into the kit's 3 families
   (Syllables / Spelling / Sounds and words). Each family gets an icon chip
   in its own ink colour, plus an optional tint on that family's card icons
   for a quick scan cue. Card body treatment itself is untouched - kit-styled
   already in Phase 3. */
.games-family-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.games-family-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-lg);
  font-size: 1.6rem;
  flex-shrink: 0;
}

.games-family-icon--tangerine { color: var(--tangerine-ink); background: var(--tangerine-tint); }
.games-family-icon--mint { color: var(--mint-ink); background: var(--mint-tint); }
.games-family-icon--sky { color: var(--sky-ink); background: var(--sky-tint); }

.games-family-tagline {
  color: var(--ink-soft);
  margin: 0;
}

.games-family--tangerine .games-card__emoji i { color: var(--tangerine-ink); }
.games-family--mint .games-card__emoji i { color: var(--mint-ink); }
.games-family--sky .games-card__emoji i { color: var(--sky-ink); }

/* ─── Kids practice level map (Phase 4 Task 3) ─────────────────────────────
   kids-practice-level-select.html groups 100 levels into 4 courses on
   family-tint grounds (Foundations/sun, Building Skills/mint, Advanced/sky,
   Expert/tangerine). Level buttons carry the three states the design
   project resolved - locked, unlocked-unplayed, completed - plus a
   "current" highlight for the next playable level. JS sets these classes
   from localStorage; the unlocked-unplayed look ships as the base/default
   style so a pre-JS render never looks locked. */
.kp-course {
  border-radius: var(--r-xl);
  margin-bottom: 2rem;
  overflow: hidden;
}
.kp-course--sun { background: var(--sun-tint); }
.kp-course--mint { background: var(--mint-tint); }
.kp-course--sky { background: var(--sky-tint); }
.kp-course--tangerine { background: var(--tangerine-tint); }

.kp-course-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  min-height: var(--tap-min);
  cursor: pointer;
  user-select: none;
}
.kp-course-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  font-size: 1.5rem;
}
.kp-course-info { flex: 1; min-width: 0; }
.kp-course-name {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 1.1rem;
  margin-bottom: 0.1rem;
}
.kp-course-levels { font-size: 0.85rem; }
.kp-course-badge {
  background: var(--paper-2);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.kp-course-chevron { font-size: 1.1rem; transition: transform 0.2s; }
.kp-course-chevron.open { transform: rotate(180deg); }

.kp-course--sun .kp-course-icon, .kp-course--sun .kp-course-name,
.kp-course--sun .kp-course-badge, .kp-course--sun .kp-course-chevron { color: var(--sun-ink); }
.kp-course--mint .kp-course-icon, .kp-course--mint .kp-course-name,
.kp-course--mint .kp-course-badge, .kp-course--mint .kp-course-chevron { color: var(--mint-ink); }
.kp-course--sky .kp-course-icon, .kp-course--sky .kp-course-name,
.kp-course--sky .kp-course-badge, .kp-course--sky .kp-course-chevron { color: var(--sky-ink); }
.kp-course--tangerine .kp-course-icon, .kp-course--tangerine .kp-course-name,
.kp-course--tangerine .kp-course-badge, .kp-course--tangerine .kp-course-chevron { color: var(--tangerine-ink); }

.kp-course-body { display: none; padding: 0 1.25rem 1.25rem; }
.kp-course-body.open { display: block; }

.kp-course-progress {
  height: 6px;
  background: var(--paper-2);
  border-radius: 999px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.kp-course-progress-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.kp-course--sun .kp-course-progress-fill { background: var(--sun-ink); }
.kp-course--mint .kp-course-progress-fill { background: var(--mint-ink); }
.kp-course--sky .kp-course-progress-fill { background: var(--sky-ink); }
.kp-course--tangerine .kp-course-progress-fill { background: var(--tangerine-ink); }

.kp-course-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.kp-course-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap-min);
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.kp-course-nav-pill--sun { background: var(--sun-tint); color: var(--sun-ink); }
.kp-course-nav-pill--mint { background: var(--mint-tint); color: var(--mint-ink); }
.kp-course-nav-pill--sky { background: var(--sky-tint); color: var(--sky-ink); }
.kp-course-nav-pill--tangerine { background: var(--tangerine-tint); color: var(--tangerine-ink); }

.kp-tier-section { margin-bottom: 0.75rem; }
.kp-tier-title { font-size: 0.95rem; margin-top: 0; margin-bottom: 0.6rem; color: var(--ink-soft); }

.kp-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.kp-level-btn {
  position: relative;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: var(--line-ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.kp-level-btn:hover { transform: translateY(-3px); }

.kp-level-lock-icon { display: none; }

/* LOCKED: quiet fill, faint border+number, small lock glyph. */
.kp-level-btn.locked {
  background: var(--paper-3);
  border: 1.5px solid var(--ink-faint);
  /* The number stays readable content — locking is cosmetic (the link still
     works), so a child genuinely reads it to decide whether to jump ahead.
     --ink-faint is 2.05:1 and its own rule forbids it on read text; the
     border and lock glyph keep it, the number gets --ink-soft (5.56:1). */
  color: var(--ink-soft);
}
.kp-level-btn.locked .kp-level-lock-icon {
  display: block;
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 0.55rem;
  color: var(--ink-faint);
}

/* COMPLETED: mint border, stars badge in sun-ink (never raw --sun on light). */
.kp-level-btn.completed {
  background: var(--paper-2);
  border: 2px solid var(--mint);
  color: var(--ink);
}
.kp-level-btn.stars-1::after, .kp-level-btn.stars-2::after, .kp-level-btn.stars-3::after {
  font-family: "Phosphor-Fill";
  position: absolute;
  top: 3px;
  right: 4px;
  color: var(--sun-ink);
}
.kp-level-btn.stars-1::after { content: "\e46a"; font-size: 0.6em; }
.kp-level-btn.stars-2::after { content: "\e46a\e46a"; font-size: 0.5em; }
.kp-level-btn.stars-3::after { content: "\e46a\e46a\e46a"; font-size: 0.45em; }

/* CURRENT / next playable level: white number needs the dark fill. */
.kp-level-btn.current {
  background: var(--tangerine-dark);
  border-color: var(--tangerine-dark);
  color: #fff;
}

/* Worksheet picture-clue SVGs (replaces emoji picture prompts). */
.ws-clue-img {
  vertical-align: middle;
}