/* ═══════════════════════════════════════════════════════════════════════
   §ACRED HUNGER — Teaching Page Components
   Styles for /cookbook/teaching/ pages.
   Light surface (cream/ivory) base throughout.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chapter hero: gold number contrast fix ──────────────────────────── */
/* var(--gold) #C4A855 is ~2:1 on cream — fails AA. Use gold-deep (4.5:1). */

.chapter-hero__number {
    color: var(--gold-deep);
}

/* ── Chapter intro paragraph ─────────────────────────────────────────── */

.chapter-intro {
    font-size: var(--text-md);
    color: var(--black);
    line-height: 1.85;
    margin-bottom: var(--spacing-md-plus);
    font-weight: var(--weight-normal);
}

/* ── Chapter nav (fix: make direct-child links flex) ─────────────────── */

.chapter-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.chapter-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--spacing-sm);
    background: var(--cream-warm);
    border: 1px solid var(--cream-deep);
    text-decoration: none;
    flex: 0 1 46%;
    transition: border-color 0.15s;
}

.chapter-nav__link:hover {
    border-color: var(--gold-deep);
}

.chapter-nav__link--next {
    text-align: right;
    margin-left: auto;
}

.chapter-nav__label {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.chapter-nav__title {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-sm);
    color: var(--black);
    font-weight: 500;
}

/* ── teacher-section (seven-teachers.html) ───────────────────────────── */

.teacher-section {
    margin: var(--spacing-lg) 0 var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid var(--cream-deep);
}

.teacher-section__header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.teacher-section__icon {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--gold-deep);
}

.teacher-section__title {
    font-family: var(--font-important);
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.2rem;
    line-height: 1.2;
}

.teacher-section__subtitle {
    font-family: var(--font-important);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--earth-light);
    margin: 0;
}

/* Teacher colour variants */
.teacher-section--floor   { border-left-color: var(--teacher-floor); }
.teacher-section--floor   .teacher-section__icon  { color: var(--teacher-floor); }
.teacher-section--cold    { border-left-color: var(--teacher-cold); }
.teacher-section--cold    .teacher-section__icon  { color: var(--teacher-cold); }
.teacher-section--heat    { border-left-color: var(--teacher-heat); }
.teacher-section--heat    .teacher-section__icon  { color: var(--teacher-heat); }
.teacher-section--dark    { border-left-color: #5A6577; }
.teacher-section--dark    .teacher-section__icon  { color: #5A6577; }
.teacher-section--sun     { border-left-color: var(--teacher-sun); }
.teacher-section--sun     .teacher-section__icon  { color: var(--teacher-sun); }
.teacher-section--silence { border-left-color: var(--teacher-silence); }
.teacher-section--silence .teacher-section__icon  { color: var(--teacher-silence); }
.teacher-section--hunger  { border-left-color: #9A7E2A; }
.teacher-section--hunger  .teacher-section__icon  { color: #9A7E2A; }

/* Traditions row */
.teacher-traditions {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--cream-deep);
}

.teacher-traditions__label {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--earth-light);
    margin-bottom: 0.5rem;
}

.teacher-traditions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.teacher-traditions__tag {
    font-family: var(--font-important);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--earth);
    background: var(--cream-warm);
    border: 1px solid var(--cream-deep);
    border-radius: 3px;
    padding: 0.2rem 0.6rem;
}

/* ── convergence-quote (universal-patterns.html) ─────────────────────── */

.convergence-quote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
    border-left: 3px solid var(--gold);
    background: linear-gradient(135deg, rgba(196, 168, 85, 0.05) 0%, transparent 80%);
}

.convergence-quote__text {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 300;
    color: var(--black);
    line-height: 1.75;
    margin: 0 0 0.6rem;
    font-style: normal;
}

.convergence-quote__source {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* ── pattern-card (universal-patterns.html) ──────────────────────────── */

.pattern-card {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    background: var(--cream-warm);
    border: 1px solid var(--cream-deep);
    border-top: 3px solid var(--gold);
}

.pattern-card__number {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.4rem;
}

.pattern-card__title {
    font-family: var(--font-important);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--black);
    margin: 0 0 var(--spacing-sm);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* Pattern traditions comparison grid */
.pattern-traditions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.3rem 1rem;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--cream-deep);
}

.pattern-tradition {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--earth);
    padding: 0.2rem 0;
    line-height: 1.4;
}

.pattern-tradition__label {
    font-weight: 600;
    color: var(--earth);
}

/* ── burst-block (how-to-use.html) ───────────────────────────────────── */

.burst-block {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(196, 168, 85, 0.07) 0%, transparent 100%);
    border-left: 3px solid var(--gold);
}

.burst-block p {
    font-family: var(--font-important);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--black);
    margin: 0;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

/* ── entry-point (how-to-use.html) ───────────────────────────────────── */

.entry-point {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    border: 1px solid var(--cream-deep);
    border-left: 3px solid var(--gold-deep);
    background: var(--ivory);
}

.entry-point__title {
    font-family: var(--font-important);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--black);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.35;
}

.entry-point p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--earth);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm-plus);
}

.entry-point p:last-of-type {
    margin-bottom: 0;
}

.entry-point__link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-family: var(--font-important);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    color: var(--gold-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(196, 168, 85, 0.4);
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
}

.entry-point__link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ── Tradition page token fallbacks ──────────────────────────────────── */
/* cookbook.css uses --bg-card / --border-subtle / --text-* which are    */
/* only defined in cookbook-splash.css. Define them here as fallbacks     */
/* so tradition chapter pages render correctly without the splash sheet.  */

.tf-chapter-content,
.tf-tradition-hero ~ .tf-chapter-content {
    --bg-card:       var(--cream-warm, #EBE6DC);
    --bg-elevated:   var(--ivory, #FAF8F3);
    --bg-deep:       var(--black, #1C1A18);
    --bg-mid:        var(--black, #1C1A18);
    --border-subtle: var(--cream-deep, #DED7CA);
    --text-primary:  var(--black, #1A1816);
    --text-secondary: var(--earth, #5C564E);
    --text-muted:    var(--earth, #5C564E);       /* earth-light fails AA at small sizes */
    --white-03:      rgba(255,255,255,0.03);
    --white-05:      rgba(255,255,255,0.05);
    --white-08:      rgba(255,255,255,0.08);
    --gold-05:       rgba(196,168,85,0.05);
    --gold-08:       rgba(196,168,85,0.08);
}

/* ── Italic suppression ──────────────────────────────────────────────── */
/* Design system: no italics. Override browser default for em elements.   */
/* Use near-black for foreign terms and book titles to maintain emphasis.  */

.tf-chapter-content em,
.chapter-content em {
    font-style: normal;
    color: var(--black);
}

/* ── Light-background legibility overrides ───────────────────────────── */
/* Teacher accent colours are designed for dark contexts. On cream/ivory   */
/* backgrounds the verse sources, principle labels, and table borders need  */
/* darker values to meet minimum contrast.                                  */

.tf-chapter-content .tf-verse__source {
    color: var(--gold-deep);
}

.tf-chapter-content .tf-principle__label {
    color: var(--gold-deep);
}

/* Table row dividers: --white-08 is invisible on cream — use cream-deep */
.tf-chapter-content .tf-data-table td {
    border-bottom-color: var(--cream-deep);
}

.tf-chapter-content .tf-data-table tr:hover td {
    background: var(--cream-warm);
}

/* Recipe story aside: --white-03 is invisible on cream — use cream-warm */
.tf-chapter-content .tf-recipe__story {
    background: var(--cream-warm);
}

/* Recipe card background is already cream-warm via --bg-card fallback.   */
/* Give it a top border in gold to distinguish it as a structural section. */
.tf-chapter-content .tf-recipe {
    border-top: 3px solid var(--gold);
    border-radius: 0;
}

/* Teaching section: bg-elevated = ivory on cream-warm card. Add a clear  */
/* top border to separate it from the method steps above.                  */
.tf-chapter-content .tf-recipe__teaching {
    border-top: 1px solid var(--cream-deep);
    border-radius: 0;
}

/* Sources section: --white-05 border is invisible on cream */
.tf-chapter-content .tf-sources li {
    border-bottom-color: var(--cream-deep);
}

/* Recipe steps: --white-05 border is invisible on cream */
.tf-chapter-content .tf-recipe__steps li {
    border-bottom-color: var(--cream-deep);
}

/* Teacher card names + icons: teacher colours fail contrast on cream.    */
/* Border-left retains the colour; names and icons use accessible values. */
.tf-chapter-content .tf-cookbook-teacher__name {
    color: var(--black);
}
.tf-chapter-content .tf-cookbook-teacher__icon {
    color: var(--gold-deep);
}

/* ── Hebrew verse treatment (jewish) ─────────────────────────────────── */

.tf-verse__hebrew {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.7;
    color: var(--black);
    margin-bottom: 0.5rem;
}

.tf-verse__translation {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--earth);
    line-height: 1.7;
    margin: 0;
}

/* ── Teachers section wrappers (jewish) ───────────────────────────────── */

.tf-cookbook-teachers__title {
    font-family: var(--font-important);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--black);
    margin: var(--spacing-lg) 0 0.5rem;
    line-height: 1.3;
}

.tf-cookbook-teachers__intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--earth);
    line-height: 1.7;
    margin: 0 0 var(--spacing-md);
}

/* Grid wrapper alias — same layout as .tf-cookbook-teachers */
.tf-cookbook-teachers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-sm);
}

/* "It refuses..." statement in teacher cards */
.tf-cookbook-teacher__refusing {
    font-family: var(--font-important);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--gold-deep);
    margin: var(--spacing-xs) 0 0;
    line-height: 1.5;
}

/* ── Recipe method list (jewish) — same as tf-recipe__steps ──────────── */
/* Jewish recipes use tf-recipe__method instead of tf-recipe__steps.      */

.tf-recipe__method {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: recipe-step;
}

.tf-recipe__method li {
    position: relative;
    padding: var(--spacing-xs-plus) 0 var(--spacing-xs-plus) var(--spacing-lg);
    border-bottom: 1px solid var(--cream-deep);
    font-size: var(--text-sm);
    color: var(--earth);
    line-height: 1.7;
}

.tf-recipe__method li:last-child {
    border-bottom: none;
}

.tf-recipe__method li::before {
    counter-increment: recipe-step;
    content: counter(recipe-step);
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--gold);
    color: var(--black);
    border-radius: 50%;
    font-family: var(--font-important);
    font-size: var(--text-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Three Sisters grid (indigenous) ─────────────────────────────────── */

.tf-sisters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.tf-sister-card {
    background: var(--cream-warm);
    border: 1px solid var(--cream-deep);
    border-top: 3px solid var(--teacher-floor);
    padding: var(--spacing-sm);
}

.tf-sister-card__name {
    font-family: var(--font-important);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.3rem;
}

.tf-sister-card__role {
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 var(--spacing-xs);
}

.tf-sister-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--earth);
    line-height: 1.6;
    margin: 0;
}

/* ── Thanksgiving address (indigenous) ───────────────────────────────── */

.tf-thanksgiving-block {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--cream-warm);
    border-left: 3px solid var(--teacher-floor);
}

.tf-thanksgiving-block__title {
    font-family: var(--font-important);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin: 0 0 var(--spacing-sm);
}

.tf-thanksgiving-line {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--cream-deep);
}

.tf-thanksgiving-line:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tf-thanksgiving-line p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--earth);
    line-height: 1.7;
    margin: 0 0 0.4rem;
}

.tf-thanksgiving-line__response {
    display: block;
    font-family: var(--font-important);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-deep);
    padding-left: var(--spacing-sm);
}

/* ── Sacred foods grid (indigenous) ──────────────────────────────────── */

.tf-sacred-foods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.tf-sacred-food-card {
    background: var(--cream-warm);
    border: 1px solid var(--cream-deep);
    padding: var(--spacing-sm);
}

.tf-sacred-food-card__name {
    font-family: var(--font-important);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--black);
    margin: 0 0 0.4rem;
}

.tf-sacred-food-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-xs-plus);
    color: var(--earth);
    line-height: 1.6;
    margin: 0;
}

/* ── Mantra text (hindu) ─────────────────────────────────────────────── */
/* Sacred Sanskrit text — use display font with ceremonial spacing.        */

.tf-chapter-content .mantra-text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--gold-deep);
    letter-spacing: 0.08em;
    line-height: 2;
    text-align: center;
    margin: var(--spacing-lg) auto;
}

/* ── Element table (taoist) — same treatment as tf-data-table ────────── */

.tf-element-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    font-size: var(--text-sm);
}

.tf-element-table th {
    font-family: var(--font-important);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: var(--cream-warm);
    padding: var(--spacing-xs-plus) var(--spacing-sm);
    text-align: left;
    border-bottom: 2px solid var(--gold-20);
}

.tf-element-table td {
    padding: var(--spacing-xs-plus) var(--spacing-sm);
    border-bottom: 1px solid var(--cream-deep);
    color: var(--earth);
}

.tf-element-table tr:hover td {
    background: var(--cream-warm);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .teacher-section {
        padding-left: var(--spacing-sm);
        margin: var(--spacing-md) 0 var(--spacing-lg);
    }

    .teacher-section__title {
        font-size: var(--text-xl);
    }

    .pattern-traditions {
        grid-template-columns: 1fr 1fr;
    }

    .convergence-quote {
        padding-left: var(--spacing-sm);
    }

    .chapter-nav {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .chapter-nav__link {
        flex: 1 1 100%;
    }

    .chapter-nav__link--next {
        text-align: left;
    }

    .tf-sisters-grid {
        grid-template-columns: 1fr;
    }

    .tf-sacred-foods-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tf-element-table {
        font-size: var(--text-xs-plus);
    }

    .tf-element-table th,
    .tf-element-table td {
        padding: var(--spacing-xs) var(--spacing-xs-plus);
    }

    .mantra-text {
        font-size: var(--text-base);
        letter-spacing: 0.04em;
    }
}