/**
 * Stone Soup — Curriculum Design System
 * Extracted from style.css Section 20e
 * Loaded conditionally on curriculum pages only
 *
 * COLORS: All Orphist palette colors reference style.css :root variables
 * with hardcoded fallbacks. If palette changes, update style.css :root —
 * the fallbacks here are safety nets only.
 * Last synced: v5.1.1
 *
 * @version 5.5.1
 */

/* ══════════════════════════════════════════════
   Section 20e: Curriculum Design System
   ══════════════════════════════════════════════
   Activated by: Template → "Curriculum" in Page Attributes.
   Adds body.curriculum-page → all rules below scope to that class.
   Components (.curriculum-activity, .module-label, etc.) work on
   any page, but base typography requires the body class.
   ══════════════════════════════════════════════ */

/* ── Curriculum page title — two-tone split on colon ── */
/* Template splits "Module One: Topic Name" into two styled spans */
body.curriculum-page .stonesoup-page-title {
    font-family: var(--stonesoup-font-display, 'Cormorant Garamond', serif);
    text-align: center;
    color: var(--stonesoup-color-story, #c04a25) !important;  /* override base teal !important — fallback for titles without colons */
}

/* "MODULE ONE:" — small, uppercase, Fira Sans, Orphist color */
.curriculum-title-prefix {
    display: block;
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.55em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.75em;
    color: var(--stonesoup-color-story, #c04a25);  /* default: vivid orange */
}

/* "What If a Story Didn't Have a Story?" — Fira Sans, near-black */
.curriculum-title-name {
    display: block;
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-weight: 300;
    color: var(--stonesoup-text-dark, #2a2520);
}

/* Cycling Orphist color for prefix — matches module in content */
body.curriculum-page .stonesoup-page:has(.module-cobalt) .curriculum-title-prefix { color: var(--stonesoup-color-poetry, #2560a0); }
body.curriculum-page .stonesoup-page:has(.module-plum)   .curriculum-title-prefix { color: var(--stonesoup-color-art, #5c3db8); }
body.curriculum-page .stonesoup-page:has(.module-ochre)  .curriculum-title-prefix { color: var(--stonesoup-color-review, #9a6b1e); }
body.curriculum-page .stonesoup-page:has(.module-green)  .curriculum-title-prefix { color: var(--stonesoup-color-memoir, #1a826a); }

/* ── Base typography for curriculum pages ── */
body.curriculum-page .stonesoup-page-content {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--stonesoup-text-dark, #2a2520);
}

body.curriculum-page .stonesoup-page-content p {
    margin-bottom: 0.8em;
    text-indent: 0;  /* curriculum uses paragraph spacing, not book-style indent */
}

body.curriculum-page .stonesoup-page-content h2 {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif) !important;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 2em 0 0.8em;
    color: var(--stonesoup-text-dark, #2a2520) !important;
}

body.curriculum-page .stonesoup-page-content h3 {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif) !important;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 1.8em 0 0.6em;
    color: var(--stonesoup-text-dark, #2a2520) !important;
}

body.curriculum-page .stonesoup-page-content h4 {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif) !important;
    font-weight: 500;
    font-size: 1.1rem;
    margin: 1.5em 0 0.5em;
}

body.curriculum-page .stonesoup-page-content ul,
body.curriculum-page .stonesoup-page-content ol {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
}

body.curriculum-page .stonesoup-page-content blockquote {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
}

body.curriculum-page .stonesoup-page-content a {
    color: var(--stonesoup-cobalt-blue, #1d3557);
}

/* ── Large all-caps opening words ── */
/* Usage: <span class="opening-words">You already know</span> */
.opening-words {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 1.15em;
    letter-spacing: 0.04em;
    font-weight: 500;
    color: var(--stonesoup-color-story, #c04a25);  /* default: vivid orange */
}

/* Opening words color matches module */
.module-red   .opening-words,
.module-red   ~ p .opening-words   { color: var(--stonesoup-color-story, #c04a25); }
.module-cobalt .opening-words,
.module-cobalt ~ p .opening-words  { color: var(--stonesoup-color-poetry, #2560a0); }
.module-plum  .opening-words,
.module-plum  ~ p .opening-words   { color: var(--stonesoup-color-art, #5c3db8); }
.module-ochre .opening-words,
.module-ochre ~ p .opening-words   { color: var(--stonesoup-color-review, #9a6b1e); }
.module-green .opening-words,
.module-green ~ p .opening-words   { color: var(--stonesoup-color-memoir, #1a826a); }

/* ── Curriculum figure captions ── */
body.curriculum-page .stonesoup-page-content figcaption {
    font-family: var(--stonesoup-font-ui, 'Source Sans 3', sans-serif);
    font-size: 0.78rem;
    color: var(--stonesoup-text-light, #736a5e);
    margin-top: 0.6em;
    line-height: 1.5;
}

/* ── WordPress block columns inside curriculum ── */
body.curriculum-page .wp-block-columns {
    gap: 1.25rem;
}


/* ── Module label (colored by module) ── */
.module-label {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 0.4em;
}

.module-subtitle {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-style: italic;
    font-size: 1.1rem;
    text-align: center;
    color: var(--stonesoup-text-medium, #5a5148);
    margin-bottom: 1.5em;
}

.module-red    { color: var(--stonesoup-color-story, #c04a25); }
.module-cobalt { color: var(--stonesoup-color-poetry, #2560a0); }
.module-plum   { color: var(--stonesoup-color-art, #5c3db8); }
.module-ochre  { color: var(--stonesoup-color-review, #9a6b1e); }
.module-green  { color: var(--stonesoup-color-memoir, #1a826a); }

/* "The Modules" heading — strong Orphist color */
.curriculum-nav-heading,
body.curriculum-page .stonesoup-page-content h2:first-of-type {
    color: var(--stonesoup-color-story, #c04a25) !important;
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif) !important;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    text-align: center;
    margin-bottom: 1.2em;
}

/* Curriculum nav (index page module list) */
.curriculum-nav {
    list-style: none;
    padding: 0;
}

.curriculum-nav li {
    padding: 1em 0;
    border-bottom: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
}

.curriculum-nav li:first-child {
    border-top: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
}

.curriculum-nav a {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-weight: 300;
    font-size: 1.4rem;
    text-decoration: none;
}

/* Each module link — cycling Orphist colors by position */
.curriculum-nav li:nth-child(1) a { color: var(--stonesoup-color-story, #c04a25); }      /* vivid orange */
.curriculum-nav li:nth-child(2) a { color: var(--stonesoup-color-poetry, #2560a0); }     /* clear blue */
.curriculum-nav li:nth-child(3) a { color: var(--stonesoup-color-art, #5c3db8); }        /* vivid purple */
.curriculum-nav li:nth-child(4) a { color: var(--stonesoup-color-review, #9a6b1e); }     /* warm gold */
.curriculum-nav li:nth-child(5) a { color: var(--stonesoup-color-memoir, #1a826a); }     /* emerald green */
.curriculum-nav li:nth-child(6) a { color: var(--stonesoup-color-editorial, #a03058); }  /* deep rose */

.curriculum-nav li:nth-child(1) a:hover { color: #2a2520; }
.curriculum-nav li:nth-child(2) a:hover { color: #2a2520; }
.curriculum-nav li:nth-child(3) a:hover { color: #2a2520; }
.curriculum-nav li:nth-child(4) a:hover { color: #2a2520; }
.curriculum-nav li:nth-child(5) a:hover { color: #2a2520; }
.curriculum-nav li:nth-child(6) a:hover { color: #2a2520; }

.curriculum-desc {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.92rem;
    color: var(--stonesoup-text-medium, #5a5148);
}

.curriculum-byline {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.82rem;
    color: var(--stonesoup-text-light, #736a5e);
    text-align: center;
    margin-bottom: 2em;
}

/* Literary excerpt */
.curriculum-literary-excerpt {
    margin: 1.8em 0;
    padding: 1.5em 2em;
    border: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
    background: #faf9f6;
    border-radius: 2px;
}

.curriculum-literary-excerpt blockquote {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--stonesoup-text-medium, #5a5148);
    margin: 0 0 0.75em;
    padding: 0;
    border: none;
}

.excerpt-attribution {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.78rem;
    color: var(--stonesoup-text-light, #736a5e);
    text-align: right;
    margin-bottom: 0;
}

/* Pull quote — bold, beautiful, attention-grabbing */
.curriculum-pullquote {
    border-left: 4px solid var(--stonesoup-color-story, #c04a25);
    margin: 2.5em 0;
    padding: 1.2em 0 1.2em 2em;
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--stonesoup-text-dark, #2a2520);
}

.curriculum-pullquote p { margin-bottom: 0; }

/* Cycle pullquote border colors by position within a page */
.curriculum-pullquote:nth-of-type(1) { border-left-color: var(--stonesoup-color-story, #c04a25); }
.curriculum-pullquote:nth-of-type(2) { border-left-color: var(--stonesoup-color-poetry, #2560a0); }
.curriculum-pullquote:nth-of-type(3) { border-left-color: var(--stonesoup-color-art, #5c3db8); }
.curriculum-pullquote:nth-of-type(4) { border-left-color: var(--stonesoup-color-review, #9a6b1e); }
.curriculum-pullquote:nth-of-type(5) { border-left-color: var(--stonesoup-color-memoir, #1a826a); }
.curriculum-pullquote:nth-of-type(6) { border-left-color: var(--stonesoup-color-editorial, #a03058); }

/* Activity box */
.curriculum-activity {
    margin: 2em 0;
    padding: 1.5em 2em;
    border: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
    background: rgba(237, 232, 223, 0.15);
}

.curriculum-activity .activity-label {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--stonesoup-text-medium, #5a5148);
    margin-bottom: 0.3em;
}

.curriculum-activity h4 {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 0.8em;
}

/* Main event (larger activity) */
.curriculum-activity-main {
    padding: 2em 2.5em;
    border-width: 1.5px;
    background: rgba(237, 232, 223, 0.2);
}

.curriculum-activity-main .activity-label { font-size: 0.72rem; }
.curriculum-activity-main h4 { font-size: 1.3rem; }

/* Teacher note */
.curriculum-teacher-note {
    margin: 2em 0;
    padding: 1.2em 1.75em;
    border-left: 2px solid var(--stonesoup-color-review, #9a6b1e);
    background: rgba(138, 101, 48, 0.05);
}

.curriculum-teacher-note .note-label {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--stonesoup-color-review, #9a6b1e);
    font-weight: 600;
    margin-bottom: 0.4em;
}

.curriculum-teacher-note p { font-size: 0.92rem; }

/* Notice box (What to Notice) */
.curriculum-notice {
    margin: 1.2em 0 1.5em;
    padding: 1em 1.5em;
    border-left: 2px solid var(--stonesoup-text-rule, #c4b5a0);
    background: rgba(237, 232, 223, 0.25);
}

.curriculum-notice .notice-label {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--stonesoup-color-review, #9a6b1e);
    margin-bottom: 0.4em;
}

.curriculum-notice p { font-size: 0.92rem; }

/* Comparison cards */
.curriculum-compare .curriculum-card {
    padding: 1.5em;
    border: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
}

.curriculum-card h4 {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-weight: 400;
    font-size: 1.05rem;
    margin-bottom: 0.75em;
}

.card-interior { background: rgba(26, 130, 106, 0.06); }
.card-interior h4 { color: var(--stonesoup-color-memoir, #1a826a); }
.card-stream { background: rgba(192, 74, 37, 0.06); }
.card-stream h4 { color: var(--stonesoup-color-story, #c04a25); }

/* Author date (inline with h2) */
.author-date {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.78rem;
    color: var(--stonesoup-text-light, #736a5e);
    font-weight: 400;
}

/* Tags */
.curriculum-tag {
    display: inline-block;
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.12rem 0.5rem;
    border-radius: 2px;
}

.tag-pioneer  { background: rgba(92, 61, 184, 0.1);   color: var(--stonesoup-color-art, #5c3db8); }
.tag-poet     { background: rgba(26, 130, 106, 0.1);  color: var(--stonesoup-color-memoir, #1a826a); }
.tag-prose    { background: rgba(37, 96, 160, 0.1);   color: var(--stonesoup-color-poetry, #2560a0); }
.tag-radical  { background: rgba(192, 74, 37, 0.1);   color: var(--stonesoup-color-story, #c04a25); }
.tag-power    { background: rgba(192, 74, 37, 0.15);  color: var(--stonesoup-color-story, #c04a25); }
.tag-minimal  { background: rgba(42, 37, 32, 0.08);   color: var(--stonesoup-text-medium, #5a5148); }
.tag-melody   { background: rgba(26, 130, 106, 0.15); color: var(--stonesoup-color-memoir, #1a826a); }
.tag-stream   { background: rgba(192, 74, 37, 0.15);  color: var(--stonesoup-color-story, #c04a25); }

/* Thunderword */
.curriculum-thunderword {
    margin: 2em 0;
    padding: 2em;
    background: var(--stonesoup-text-dark, #2a2520);
    text-align: center;
}

.curriculum-thunderword .tw-label {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--stonesoup-color-review, #9a6b1e);
    margin-bottom: 0.8em;
}

.curriculum-thunderword .tw-text {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    word-break: break-all;
    color: #d0cdc6;
    font-style: italic;
}

.curriculum-thunderword .tw-note {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    margin-top: 0.8em;
}

/* Listen-compare (music module) */
.curriculum-listen-compare {
    margin: 2em 0;
    padding: 1.5em 2em;
    border: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
    background: #faf9f6;
}

.curriculum-listen-compare h4 {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-weight: 400;
    font-size: 1.15rem;
    margin-bottom: 1em;
}

.listen-composer {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stonesoup-text-light, #736a5e);
    margin-bottom: 0.2em;
}

.listen-piece {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--stonesoup-text-medium, #5a5148);
    margin-bottom: 0.5em;
}

/* ── Curriculum page navigation ── */
.page-nav-back,
.page-nav-next {
    font-family: var(--stonesoup-font-curriculum, 'Fira Sans', sans-serif);
    font-size: 0.88rem;
    margin: 0;
}

.page-nav-back {
    margin-bottom: 2em;
}

.page-nav-next {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 0.5px solid var(--stonesoup-text-rule, #c4b5a0);
}

.page-nav-back a,
.page-nav-next a {
    color: var(--stonesoup-text-medium, #5a5148);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.page-nav-back a:hover,
.page-nav-next a:hover {
    color: var(--stonesoup-text-dark, #2a2520);
}

/* ── Curriculum responsive ── */
@media (max-width: 900px) {
    body.curriculum-page .curriculum-compare,
    body.curriculum-page .wp-block-columns {
        flex-direction: column;
    }

    body.curriculum-page .wp-block-column {
        flex-basis: 100% !important;
    }
}