/* ============================================================
 * Editorial Earth contrast guardrail — 2026-05-27
 *
 * Tokens (from theme.json / style.css):
 *   --ink         = #2a1f15  (very dark brown)
 *   --olive-deep  = #3d4a2a  (dark green)
 *   --terracotta-text = #9a4827  (deep terracotta — only on light bg)
 *   --terracotta  = #b85c38  (bright terracotta — accent on light bg)
 *   --honey       = #d8b87a  (warm honey — accent on dark bg)
 *   --paper       = #f5efe4  (light cream)
 *   --paper-warm  = #ede4d2  (warmer cream)
 *
 * Rules:
 *  - Light surface (paper / paper-warm / no surface) -> ink/olive-deep text
 *  - Dark surface (olive / olive-deep) -> paper text
 *  - Accent on light -> terracotta-text / terracotta
 *  - Accent on dark -> honey (NEVER terracotta — fails contrast)
 * ============================================================ */

/* --- LIGHT SURFACES: surface-warm, surface-paper, no class (default paper) --- */
html body section.surface-warm,
html body section.surface-warm.surface-full,
html body div.surface-warm,
html body [class*="surface-warm"]:not([class*="surface-olive"]) {
    background: var(--paper-warm, #ede4d2);
    color: var(--ink, #2a1f15);
}
html body section.surface-warm h1,
html body section.surface-warm h2,
html body section.surface-warm h3,
html body section.surface-warm h4,
html body section.surface-warm p,
html body section.surface-warm li,
html body section.surface-warm summary,
html body section.surface-warm blockquote,
html body section.surface-warm.surface-full h1,
html body section.surface-warm.surface-full h2,
html body section.surface-warm.surface-full h3,
html body section.surface-warm.surface-full h4,
html body section.surface-warm.surface-full p,
html body section.surface-warm.surface-full li,
html body section.surface-warm.surface-full summary,
html body [class*="surface-warm"]:not([class*="surface-olive"]) h1,
html body [class*="surface-warm"]:not([class*="surface-olive"]) h2,
html body [class*="surface-warm"]:not([class*="surface-olive"]) h3,
html body [class*="surface-warm"]:not([class*="surface-olive"]) h4,
html body [class*="surface-warm"]:not([class*="surface-olive"]) p,
html body [class*="surface-warm"]:not([class*="surface-olive"]) li,
html body [class*="surface-warm"]:not([class*="surface-olive"]) summary {
    color: var(--ink, #2a1f15) !important;
}
html body section.surface-warm h2,
html body section.surface-warm.surface-full h2,
html body [class*="surface-warm"]:not([class*="surface-olive"]) h2 {
    color: var(--olive-deep, #3d4a2a) !important;
}
html body section.surface-warm h2 em,
html body section.surface-warm.surface-full h2 em,
html body [class*="surface-warm"]:not([class*="surface-olive"]) h2 em,
html body section.surface-warm em,
html body section.surface-warm.surface-full em,
html body [class*="surface-warm"]:not([class*="surface-olive"]) em {
    color: var(--terracotta, #b85c38) !important;
}
html body section.surface-warm .section-eyebrow,
html body section.surface-warm.surface-full .section-eyebrow,
html body [class*="surface-warm"]:not([class*="surface-olive"]) .section-eyebrow {
    color: var(--terracotta-text, #9a4827) !important;
}

/* --- LIGHT SURFACE: surface-paper --- */
html body section.surface-paper,
html body section.surface-paper.surface-full,
html body [class*="surface-paper"]:not([class*="surface-olive"]) {
    background: var(--paper, #f5efe4);
    color: var(--ink, #2a1f15);
}
html body section.surface-paper h1,
html body section.surface-paper h2,
html body section.surface-paper h3,
html body section.surface-paper h4,
html body section.surface-paper p,
html body section.surface-paper li,
html body section.surface-paper summary,
html body section.surface-paper blockquote {
    color: var(--ink, #2a1f15) !important;
}
html body section.surface-paper h2 { color: var(--olive-deep, #3d4a2a) !important; }
html body section.surface-paper h2 em,
html body section.surface-paper em {
    color: var(--terracotta, #b85c38) !important;
}
html body section.surface-paper .section-eyebrow { color: var(--terracotta-text, #9a4827) !important; }

/* --- DARK SURFACES: surface-olive, surface-olive-deep --- */
html body section.surface-olive,
html body section.surface-olive-deep,
html body section.surface-olive.surface-full,
html body section.surface-olive-deep.surface-full,
html body [class*="surface-olive"] {
    background: var(--olive-deep, #3d4a2a);
    color: var(--paper, #f5efe4);
}
html body section.surface-olive h1,
html body section.surface-olive h2,
html body section.surface-olive h3,
html body section.surface-olive h4,
html body section.surface-olive p,
html body section.surface-olive li,
html body section.surface-olive summary,
html body section.surface-olive blockquote,
html body section.surface-olive-deep h1,
html body section.surface-olive-deep h2,
html body section.surface-olive-deep h3,
html body section.surface-olive-deep h4,
html body section.surface-olive-deep p,
html body section.surface-olive-deep li,
html body section.surface-olive-deep summary,
html body [class*="surface-olive"] h1,
html body [class*="surface-olive"] h2,
html body [class*="surface-olive"] h3,
html body [class*="surface-olive"] h4,
html body [class*="surface-olive"] p,
html body [class*="surface-olive"] li,
html body [class*="surface-olive"] summary,
html body [class*="surface-olive"] blockquote {
    color: var(--paper, #f5efe4) !important;
}
/* On dark surfaces, em accents use honey (NEVER terracotta — terracotta-on-olive = 2.09 fail) */
html body section.surface-olive em,
html body section.surface-olive-deep em,
html body section.surface-olive h2 em,
html body section.surface-olive-deep h2 em,
html body [class*="surface-olive"] em,
html body [class*="surface-olive"] h2 em {
    color: var(--honey, #d8b87a) !important;
}
html body section.surface-olive .section-eyebrow,
html body section.surface-olive-deep .section-eyebrow,
html body [class*="surface-olive"] .section-eyebrow {
    color: var(--honey, #d8b87a) !important;
}
html body section.surface-olive .section-deck,
html body section.surface-olive-deep .section-deck,
html body [class*="surface-olive"] .section-deck {
    color: var(--paper, #f5efe4) !important;
    opacity: 0.92;
}
html body section.surface-olive a:not(.btn-primary):not(.btn-secondary),
html body section.surface-olive-deep a:not(.btn-primary):not(.btn-secondary),
html body [class*="surface-olive"] a:not(.btn-primary):not(.btn-secondary) {
    color: var(--honey, #d8b87a) !important;
    text-decoration: underline;
}

/* --- FEATURE CARDS inside surfaces: cards have their own white background,
       text must follow card not parent surface --- */
html body .feature-card,
html body .venue-class-card,
html body .testimonial-card,
html body .cookbook-card,
html body .team-card,
html body .partner-logo-card,
html body .mood-card,
html body .award-card {
    background: var(--paper, #f5efe4);
    color: var(--ink, #2a1f15);
}
html body .feature-card h1,
html body .feature-card h2,
html body .feature-card h3,
html body .feature-card h4,
html body .feature-card p,
html body .feature-card li,
html body .venue-class-card h1,
html body .venue-class-card h2,
html body .venue-class-card h3,
html body .venue-class-card h4,
html body .venue-class-card p,
html body .testimonial-card p,
html body .cookbook-card h3,
html body .cookbook-card p,
html body .team-card h3,
html body .team-card p {
    color: var(--ink, #2a1f15) !important;
}
html body .feature-card h3,
html body .feature-card h2,
html body .venue-class-card h3,
html body .cookbook-card h3,
html body .team-card h3 {
    color: var(--olive-deep, #3d4a2a) !important;
}
html body .feature-card em,
html body .venue-class-card em,
html body .testimonial-card em,
html body .cookbook-card em,
html body .team-card em {
    color: var(--terracotta, #b85c38) !important;
}

/* --- CTA strip with class only (no surface class) — should be dark bg --- */
html body section.cta-strip:not(.surface-warm):not(.surface-paper) {
    background: var(--olive-deep, #3d4a2a);
    color: var(--paper, #f5efe4);
}
html body section.cta-strip:not(.surface-warm):not(.surface-paper) h2,
html body section.cta-strip:not(.surface-warm):not(.surface-paper) h3,
html body section.cta-strip:not(.surface-warm):not(.surface-paper) p { color: var(--paper, #f5efe4) !important; }
html body section.cta-strip:not(.surface-warm):not(.surface-paper) em { color: var(--honey, #d8b87a) !important; }
html body section.cta-strip:not(.surface-warm):not(.surface-paper) .section-eyebrow { color: var(--honey, #d8b87a) !important; }

/* --- HERO / page-hero / intro-band on default (paper) page bg --- */
html body section.hero,
html body section.page-hero,
html body section.intro-band {
    background: var(--paper, #f5efe4);
    color: var(--ink, #2a1f15);
}
html body section.hero h1,
html body section.hero h2,
html body section.hero p,
html body section.page-hero h1,
html body section.page-hero h2,
html body section.page-hero p,
html body section.intro-band p {
    color: var(--ink, #2a1f15) !important;
}
html body section.hero h1,
html body section.hero h2,
html body section.page-hero h1,
html body section.page-hero h2 { color: var(--olive-deep, #3d4a2a) !important; }
html body section.hero em,
html body section.page-hero em,
html body section.intro-band em { color: var(--terracotta, #b85c38) !important; }
html body section.hero .hero-eyebrow,
html body section.page-hero .hero-eyebrow,
html body section.hero .section-eyebrow,
html body section.page-hero .section-eyebrow { color: var(--terracotta-text, #9a4827) !important; }
html body section.intro-band .lead { color: var(--olive-deep, #3d4a2a) !important; }

/* --- FAQ items: always paper bg with ink text --- */
html body .faq-item,
html body .faq-item[open],
html body details.faq-item,
html body details.faq-item[open] {
    background: var(--paper, #f5efe4) !important;
    color: var(--ink, #2a1f15) !important;
}
html body .faq-question,
html body .faq-item summary,
html body .faq-answer,
html body .faq-answer p {
    color: var(--ink, #2a1f15) !important;
}
html body .faq-question { color: var(--olive-deep, #3d4a2a) !important; }
html body .faq-question em,
html body .faq-section-heading h2 em { color: var(--terracotta, #b85c38) !important; }
html body .faq-section-heading h2 { color: var(--olive-deep, #3d4a2a) !important; }

/* --- Breadcrumb readability --- */
html body .breadcrumb,
html body .breadcrumb a,
html body .breadcrumb span { color: var(--ink, #2a1f15) !important; }
html body .breadcrumb a { color: var(--terracotta-text, #9a4827) !important; }

/* --- Site header dropdown (long-standing green-on-green complaint) --- */
html body .site-header .sub-menu,
html body .site-header .sub-menu li,
html body .site-header .sub-menu a,
html body header .sub-menu li,
html body header .sub-menu a {
    background: var(--paper, #f5efe4) !important;
    color: var(--ink, #2a1f15) !important;
}
html body .site-header .sub-menu a:hover,
html body .site-header .sub-menu a:focus,
html body header .sub-menu a:hover { color: var(--terracotta-text, #9a4827) !important; }

/* --- Class-info banners (added in round 16) — pin to safe colours --- */
html body .class-info-banner,
html body .venue-inclusion-line,
html body .private-payment-note {
    background: var(--paper-warm, #ede4d2);
    color: var(--ink, #2a1f15) !important;
    border-left: 3px solid var(--terracotta-text, #9a4827);
}
html body .class-info-banner p,
html body .class-info-banner strong,
html body .venue-inclusion-line p,
html body .venue-inclusion-line strong,
html body .private-payment-note p,
html body .private-payment-note strong {
    color: var(--ink, #2a1f15) !important;
}

/* --- Footer keeps its own olive-deep / honey treatment --- */
html body .site-footer,
html body footer.site-footer {
    background: var(--olive-deep, #3d4a2a);
    color: var(--paper, #f5efe4);
}
html body .site-footer h3,
html body .site-footer p,
html body .site-footer a,
html body .site-footer li { color: var(--paper, #f5efe4) !important; }
html body .site-footer a:hover { color: var(--honey, #d8b87a) !important; }
html body .site-footer .footer-brand-name em { color: var(--honey, #d8b87a) !important; }

/* --- Region keyfacts cards (Phase 7 region pages) --- */
html body .region-keyfacts .feature-card { background: var(--paper, #f5efe4); color: var(--ink, #2a1f15); }
html body .region-keyfacts .feature-card h3 { color: var(--olive-deep, #3d4a2a) !important; }
html body .region-keyfacts .feature-card p { color: var(--ink, #2a1f15) !important; }

/* --- FAQ jump nav pills --- */
html body .faq-jump-nav a {
    background: var(--paper, #f5efe4) !important;
    color: var(--terracotta-text, #9a4827) !important;
    border-color: var(--rule, rgba(42,31,21,0.18)) !important;
}
html body .faq-jump-nav a:hover,
html body .faq-jump-nav a:focus,
html body .faq-jump-nav a.is-active {
    background: var(--terracotta-text, #9a4827) !important;
    color: var(--paper, #f5efe4) !important;
    border-color: var(--terracotta-text, #9a4827) !important;
}

/* --- Image placeholders --- */
html body .image-placeholder { background: var(--paper-warm, #ede4d2); color: var(--ink, #2a1f15); }
html body .image-placeholder-caption { color: var(--ink, #2a1f15) !important; opacity: 0.7; }
html body .image-placeholder-glyph { color: var(--terracotta-text, #9a4827) !important; }

/* --- Award + partner chips --- */
html body .award-card { background: var(--paper, #f5efe4); color: var(--ink, #2a1f15); }
html body .award-card p { color: var(--ink, #2a1f15) !important; }
html body .partner-logo-card { background: var(--paper, #f5efe4); }
html body .partner-logo-card a,
html body .partner-logo-card span { color: var(--terracotta-text, #9a4827) !important; }

/* --- Cookbook card section heading + Amazon CTA --- */
html body .class-cookbook-section h2 { color: var(--olive-deep, #3d4a2a) !important; }
html body .class-cookbook-section h2 em { color: var(--terracotta, #b85c38) !important; }
html body .class-cookbook-card h3 { color: var(--olive-deep, #3d4a2a) !important; }
html body .class-cookbook-card p { color: var(--ink, #2a1f15) !important; }
/* Newsletter popup + footer brand on dark bg — em must be honey */
html body .ffw-newsletter-popup,
html body .ffw-newsletter-popup-title,
html body .ffw-newsletter-popup-deck,
html body .footer-newsletter,
html body .footer-newsletter-title,
html body .footer-newsletter-deck { color: var(--paper, #f5efe4) !important; }
html body .ffw-newsletter-popup-title em,
html body .ffw-newsletter-popup-eyebrow,
html body .footer-newsletter-title em,
html body .footer-brand-name em { color: var(--honey, #d8b87a) !important; }
/* Any em inside an explicitly dark-coloured container falls back to honey too */
html body section[style*="background: var(--olive"] em,
html body section[style*="background:var(--olive"] em,
html body div[style*="background: var(--olive"] em,
html body div[style*="background:var(--olive"] em { color: var(--honey, #d8b87a) !important; }
/* === RECIPE + SINGLE-POST + COOKING CLASSES width unblock === */
html body.editorial-page main,
html body.editorial-page main#main,
html body.editorial-single main,
html body.editorial-single main#main,
html body.single-post.editorial-page main,
html body.single-post.editorial-page main#main,
html body.single.editorial-page main,
html body.single.editorial-page main#main,
html body.content-width-narrow.editorial-page main,
html body.content-width-narrow.editorial-page main#main { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
html body.editorial-page main > article,
html body.editorial-page main > article.entry,
html body.editorial-page .entry-content,
html body.editorial-page .entry-content-wrap,
html body.editorial-single .entry-content,
html body.editorial-single article.entry,
html body.single-post .entry-content,
html body.single-post article.entry { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 auto !important; }
/* Inner content wraps for prose readability — recipe body uses a 760px column with 24px gutters */
html body.editorial-single .entry-content > *,
html body.single-post.editorial-page .entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
html body.editorial-single .entry-content > .alignfull,
html body.editorial-single .entry-content > .alignwide,
html body.editorial-single .entry-content > section,
html body.editorial-single .entry-content > .recipe-body-grid,
html body.editorial-single .entry-content > .recipe-google-reviews,
html body.single-post.editorial-page .entry-content > .alignfull,
html body.single-post.editorial-page .entry-content > section,
html body.single-post.editorial-page .entry-content > .recipe-body-grid { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
html body.editorial-single .recipe-body-grid,
html body.single-post.editorial-page .recipe-body-grid { max-width: 1100px !important; padding: 0 24px !important; margin-left: auto !important; margin-right: auto !important; }
/* Recipe + post entry title must follow the wider column */
html body.editorial-single .entry-header,
html body.editorial-single h1.entry-title,
html body.single-post.editorial-page .entry-header,
html body.single-post.editorial-page h1.entry-title { max-width: 1100px !important; margin: 32px auto !important; padding: 0 24px !important; }
html body.single-post.editorial-page h1.entry-title { font-size: clamp(32px, 5vw, 56px) !important; line-height: 1.1 !important; word-break: normal !important; overflow-wrap: break-word !important; }
/* === SITEWIDE SECTION ALIGNMENT — every section pins to the same canonical column === */
/* Canonical content column: 1200px max, centred, 24px gutters. Every direct section uses this so left/right edges line up. */
html body.editorial-page section.section,
html body.editorial-page section.surface-warm,
html body.editorial-page section.surface-paper,
html body.editorial-page section.surface-olive,
html body.editorial-page section.surface-olive-deep,
html body.editorial-page section.surface-full,
html body.editorial-page section.intro-band,
html body.editorial-page section.hero,
html body.editorial-page section.page-hero,
html body.editorial-page section.cta-strip,
html body.editorial-page section.calendar-section,
html body.editorial-page section.faq-section,
html body.editorial-page section.class-photo-strip-section,
html body.editorial-page section.class-cookbook-section,
html body.editorial-page section.voucher-denominations,
html body.editorial-page section.team-of-eight-box,
html body.editorial-page section.event-news-signup,
html body.editorial-page section.venue-access-block,
html body.editorial-page section.faq-cross-links,
html body.editorial-page > main > section,
html body.editorial-page article.entry > section,
html body.editorial-single article > section { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
/* Each section uses its own inner-wrapper for the 1200px max — apply consistently */
html body.editorial-page section.section > .section-inner,
html body.editorial-page section .surface-inner,
html body.editorial-page section .section-inner,
html body.editorial-page section.faq-section > .faq-section-heading,
html body.editorial-page section.faq-section > .faq-list,
html body.editorial-page section.faq-section > .faq-all-link,
html body.editorial-page section.calendar-section .mec-wrapper,
html body.editorial-page section.cta-strip > *,
html body.editorial-page section.intro-band .inner,
html body.editorial-page section.hero > *,
html body.editorial-page section.page-hero > *,
html body.editorial-page section.page-hero .page-hero-inner,
html body.editorial-page section.class-photo-strip-section > div,
html body.editorial-page section.class-cookbook-section .section-inner,
html body.editorial-page section.voucher-denominations > .section-eyebrow,
html body.editorial-page section.voucher-denominations > h2,
html body.editorial-page section.voucher-denominations > p,
html body.editorial-page section.voucher-denominations > .venue-classes-grid,
html body.editorial-page section.team-of-eight-box .section-inner,
html body.editorial-page section.event-news-signup .surface-inner,
html body.editorial-page section.venue-access-block .venue-access-inner,
html body.editorial-page section.faq-cross-links .surface-inner { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
/* Prose (FAQ list, single paragraph runs) gets a narrower 880px column for readability but inside the same outer 1200px frame */
html body.editorial-page section.faq-section .faq-list { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
html body.editorial-page section.faq-section .faq-section-heading { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
/* Long-form recipe and single-post prose: 760px reading column inside the 1905px main, centred */
html body.editorial-single article.entry > p,
html body.editorial-single .entry-content > p,
html body.single-post.editorial-page .entry-content > p,
html body.editorial-single article.entry > ul,
html body.editorial-single article.entry > ol,
html body.single-post.editorial-page .entry-content > ul,
html body.single-post.editorial-page .entry-content > ol,
html body.editorial-single article.entry > h2,
html body.editorial-single article.entry > h3,
html body.single-post.editorial-page .entry-content > h2,
html body.single-post.editorial-page .entry-content > h3 { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
/* Class page filter bar — already sticky, just pin to canonical column */
html body.editorial-page .filter-bar { max-width: 100% !important; }
html body.editorial-page .filter-bar-inner { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }
/* Featured image on recipe + single post pages — break out to a wider hero column */
html body.editorial-single .entry-content > .wp-post-image,
html body.editorial-single .entry-content > figure.wp-block-image,
html body.single-post.editorial-page .entry-content > .wp-post-image,
html body.single-post.editorial-page .entry-content > figure.wp-block-image { max-width: 1200px !important; margin: 24px auto !important; }
/* Unify all recipe + single-post block widths to one column — 1100px */
html body.editorial-single .entry-content,
html body.editorial-single .entry-content.ee-recipe-body,
html body.single-post.editorial-page .entry-content { max-width: 100% !important; padding: 0 !important; }
html body.editorial-single .entry-content > *,
html body.editorial-single .entry-content.ee-recipe-body > *,
html body.single-post.editorial-page .entry-content > * { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
/* Hero image, breadcrumb, header, recipe grid, related-recipes, google-reviews all use the same column */
html body.editorial-single nav.breadcrumb,
html body.editorial-single .single-post-image,
html body.editorial-single .entry-header,
html body.editorial-single .recipe-body-grid,
html body.editorial-single .recipe-google-reviews,
html body.editorial-single .single-post-article > *,
html body.single-post.editorial-page nav.breadcrumb,
html body.single-post.editorial-page .entry-header,
html body.single-post.editorial-page .single-post-image { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
/* Full-bleed sections (related recipes strip, reviews band) opt out */
html body.editorial-single .recipe-google-reviews,
html body.editorial-single .alignfull,
html body.editorial-single .surface-full,
html body.editorial-single .surface-warm.surface-full,
html body.editorial-single .surface-olive.surface-full { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
html body.editorial-single .recipe-google-reviews > *,
html body.editorial-single .surface-full > * { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
/* === FAQ jump nav — horizontal pill row matching the look Jackie likes, single row, scrolls horizontally on overflow, no wrap === */
html body nav.faq-jump-nav { position: sticky !important; top: 64px !important; z-index: 20 !important; background: var(--paper-warm, #ede4d2) !important; border-bottom: 1px solid rgba(42, 31, 21, 0.18) !important; padding: 12px 0 0 0 !important; margin: 0 0 32px 0 !important; }
html body nav.faq-jump-nav ul { display: flex !important; flex-wrap: nowrap !important; gap: 32px !important; overflow-x: auto !important; overflow-y: hidden !important; list-style: none !important; margin: 0 auto !important; padding: 0 24px 12px 24px !important; max-width: 1200px !important; scrollbar-width: thin !important; scrollbar-color: var(--terracotta-text, #9a4827) var(--paper, #f5efe4) !important; }
html body nav.faq-jump-nav ul::-webkit-scrollbar { height: 8px; background: var(--paper, #f5efe4); }
html body nav.faq-jump-nav ul::-webkit-scrollbar-thumb { background: var(--terracotta-text, #9a4827); border-radius: 4px; }
html body nav.faq-jump-nav ul::-webkit-scrollbar-track { background: var(--paper, #f5efe4); }
html body nav.faq-jump-nav li { margin: 0 !important; flex: 0 0 auto !important; list-style: none !important; }
html body nav.faq-jump-nav a { display: inline-block !important; padding: 6px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--terracotta-text, #9a4827) !important; font-family: Inter, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: underline !important; text-underline-offset: 3px !important; white-space: nowrap !important; }
html body nav.faq-jump-nav a:hover,
html body nav.faq-jump-nav a:focus,
html body nav.faq-jump-nav a.is-active { background: transparent !important; color: var(--olive-deep, #3d4a2a) !important; text-decoration: underline !important; }
/* Hide any nav with bare ul/li bullets that may still appear inside a faq-section heading (legacy artefact) */
html body section.faq-section ul.faq-jump-nav,
html body section.faq-section .faq-category-list { display: none !important; }
/* === GLOBAL PADDING REDUCTION === Lighten the vertical rhythm everywhere */
html body section.section,
html body section.surface-warm,
html body section.surface-paper,
html body section.surface-olive,
html body section.surface-olive-deep,
html body section.surface-full,
html body section.intro-band,
html body section.hero,
html body section.page-hero,
html body section.cta-strip,
html body section.calendar-section,
html body section.faq-section,
html body section.class-photo-strip-section,
html body section.class-cookbook-section { padding-top: 40px !important; padding-bottom: 40px !important; }
html body .section-deck,
html body .hero-deck,
html body .page-hero-deck { margin-bottom: 24px !important; }
html body .section-eyebrow,
html body .hero-eyebrow { margin-bottom: 6px !important; }
/* FAQ items stretch the full jump-nav width (1200px) — match the top scroll-bar nav */
html body section.faq-section { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }
html body section.faq-section .faq-list,
html body section.faq-section .faq-section-heading,
html body section.faq-section .faq-all-link { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
html body section.faq-section details.faq-item { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
/* Legacy .faq-body wrapper was clamping the whole FAQ page to ~784px — widen to match the canonical column */
html body .faq-body { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; width: 100% !important; box-sizing: border-box !important; }
/* Make sure the sticky jump nav breaks out of the .faq-body padding so its scroll bar visually anchors edge to edge */
html body .faq-body > nav.faq-jump-nav { margin-left: -24px !important; margin-right: -24px !important; }
/* FAQ page final alignment — match the top .header-inner width (1400px) and LEFT-align the hero */
html body .faq-body { max-width: 1320px !important; margin: 0 auto !important; padding: 0 24px !important; width: 100% !important; box-sizing: border-box !important; }
html body section.faq-hero { max-width: 1320px !important; margin: 0 auto !important; padding: 40px 24px 24px 24px !important; text-align: left !important; }
html body section.faq-hero nav.breadcrumb,
html body section.faq-hero nav.breadcrumb ol,
html body section.faq-hero .breadcrumb { justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; padding-left: 0 !important; }
html body section.faq-hero h1 { text-align: left !important; margin-left: 0 !important; max-width: 100% !important; }
html body section.faq-hero p,
html body section.faq-hero .faq-hero-deck { text-align: left !important; margin-left: 0 !important; max-width: 760px !important; }
html body .faq-body > nav.faq-jump-nav { max-width: 1320px !important; margin: 24px 0 32px 0 !important; padding: 12px 0 0 0 !important; }
html body .faq-body > nav.faq-jump-nav ul { max-width: 100% !important; padding: 0 0 12px 0 !important; margin: 0 !important; }
html body section.faq-section { max-width: 100% !important; padding: 40px 0 !important; }
html body section.faq-section .faq-section-heading,
html body section.faq-section .faq-list,
html body section.faq-section .faq-all-link { max-width: 100% !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
html body section.faq-section details.faq-item { width: 100% !important; max-width: 100% !important; }
/* === SITEWIDE BREADCRUMB NORMALISATION === Every breadcrumb across the site adopts the same look regardless of underlying markup (.breadcrumb, .breadcrumb ol/li, .breadcrumb a + .breadcrumb-sep span, Yoast breadcrumb_links, Kadence breadcrumb). All left-aligned, Inter caps, terracotta links, slash separators. === */
html body nav.breadcrumb,
html body .breadcrumb,
html body .yoast-breadcrumb,
html body .kadence-breadcrumbs { display: block !important; font-family: Inter, sans-serif !important; font-size: 13px !important; line-height: 1.6 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; text-align: left !important; margin: 0 0 24px 0 !important; padding: 0 !important; color: var(--ink, #2a1f15) !important; }
html body nav.breadcrumb ol,
html body .breadcrumb ol { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; align-items: center !important; }
html body nav.breadcrumb ol li,
html body .breadcrumb ol li { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; font-family: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
html body nav.breadcrumb ol li::after,
html body .breadcrumb ol li::after { content: "/" !important; color: rgba(42, 31, 21, 0.4) !important; font-weight: 400 !important; margin-left: 8px !important; }
html body nav.breadcrumb ol li:last-child::after,
html body .breadcrumb ol li:last-child::after { content: "" !important; margin-left: 0 !important; }
html body nav.breadcrumb a,
html body .breadcrumb a,
html body .yoast-breadcrumb a { color: var(--terracotta-text, #9a4827) !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 500 !important; font-family: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
html body nav.breadcrumb a:hover,
html body .breadcrumb a:hover { color: var(--olive-deep, #3d4a2a) !important; }
html body nav.breadcrumb span[aria-current="page"],
html body .breadcrumb span[aria-current="page"],
html body .breadcrumb-current { color: var(--ink, #2a1f15) !important; opacity: 0.78 !important; font-weight: 500 !important; text-transform: uppercase !important; }
/* Inline (no <ol>) breadcrumb with .breadcrumb-sep span separators (FAQ page variant) */
html body nav.breadcrumb > a,
html body nav.breadcrumb > span { display: inline-block !important; vertical-align: baseline !important; font-family: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
html body .breadcrumb-sep { color: rgba(42, 31, 21, 0.4) !important; margin: 0 8px !important; font-weight: 400 !important; font-family: inherit !important; font-size: inherit !important; letter-spacing: normal !important; text-transform: none !important; }
html body nav.breadcrumb a + span:not(.breadcrumb-sep):not([aria-current]) { color: var(--ink, #2a1f15) !important; opacity: 0.78 !important; }
/* Hide native Yoast breadcrumb if its container is empty / styled by Yoast */
html body .yoast-breadcrumb { background: transparent !important; padding: 0 !important; }
/* Final breadcrumb consistency — override any per-page inline overrides (eg .faq-hero .breadcrumb) so every breadcrumb uses identical font-weight, letter-spacing and opacity sitewide */
html body section.faq-hero nav.breadcrumb,
html body section.faq-hero .breadcrumb,
html body .page-hero nav.breadcrumb,
html body .page-hero .breadcrumb,
html body section[class*="hero"] nav.breadcrumb,
html body section[class*="hero"] .breadcrumb { font-family: Inter, sans-serif !important; font-size: 13px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; text-align: left !important; font-weight: 400 !important; }
html body section.faq-hero nav.breadcrumb a,
html body section.faq-hero .breadcrumb a,
html body .page-hero nav.breadcrumb a,
html body .page-hero .breadcrumb a,
html body section[class*="hero"] nav.breadcrumb a,
html body section[class*="hero"] .breadcrumb a { color: var(--terracotta-text, #9a4827) !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; letter-spacing: 0.18em !important; }
html body section.faq-hero nav.breadcrumb span[aria-current="page"],
html body section.faq-hero .breadcrumb span[aria-current="page"],
html body .page-hero nav.breadcrumb span[aria-current="page"],
html body .page-hero .breadcrumb span[aria-current="page"] { color: var(--ink, #2a1f15) !important; opacity: 0.78 !important; font-weight: 500 !important; letter-spacing: 0.18em !important; }
html body section.faq-hero .breadcrumb-sep,
html body .page-hero .breadcrumb-sep,
html body section[class*="hero"] .breadcrumb-sep { color: rgba(42, 31, 21, 0.4) !important; margin: 0 8px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
/* Newsletter popup has PAPER background — text must be ink, not paper */
html body .ffw-newsletter-popup { background: var(--paper, #f5efe4) !important; color: var(--ink, #2a1f15) !important; }
html body .ffw-newsletter-popup-eyebrow { color: var(--terracotta-text, #9a4827) !important; font-family: Inter, sans-serif !important; font-size: 12px !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; font-weight: 600 !important; }
html body .ffw-newsletter-popup-title { color: var(--olive-deep, #3d4a2a) !important; font-family: Fraunces, serif !important; font-weight: 300 !important; }
html body .ffw-newsletter-popup-title em { color: var(--terracotta, #b85c38) !important; font-style: italic !important; }
html body .ffw-newsletter-popup-deck { color: var(--ink, #2a1f15) !important; opacity: 0.9 !important; }
html body .ffw-newsletter-popup-close { color: var(--ink, #2a1f15) !important; }
html body .ffw-newsletter-popup .mc_input,
html body .ffw-newsletter-popup input[type="email"],
html body .ffw-newsletter-popup input[type="text"] { color: var(--ink, #2a1f15) !important; background: var(--paper-warm, #ede4d2) !important; border: 1px solid rgba(42,31,21,0.32) !important; }
/* Footer newsletter sits on dark olive footer — text stays paper but em uses honey (already covered above, keep) */
/* Dumplings + class-page "Where it runs" block — pin .ffw-venue-class-row and parent <section> to canonical 1400px column with proper inner padding */
html body.editorial-page main > section:not([class]),
html body.editorial-page main > section[class=""],
html body.editorial-page main > section.ffw-venue-class-row { max-width: 1320px !important; margin: 32px auto !important; padding: 32px 24px !important; width: 100% !important; box-sizing: border-box !important; }
html body.editorial-page .ffw-class-venues-block,
html body.editorial-page .ffw-class-venues-block-wrap { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; padding: 32px 24px !important; box-sizing: border-box !important; }
html body.editorial-page .ffw-class-venues-block > h2,
html body.editorial-page .ffw-class-venues-block > .section-title,
html body.editorial-page section:not([class]) > h2,
html body.editorial-page section:not([class]) > .section-title { padding-left: 0 !important; max-width: 100% !important; }
/* Venue row: two-column on desktop, single column on mobile. Left = info (60%), right = Rezdy widget (40%) */
html body.editorial-page .ffw-venue-class-row { display: grid !important; grid-template-columns: 1.4fr 1fr !important; gap: 32px !important; align-items: start !important; padding: 32px 24px !important; margin: 24px 0 !important; background: var(--paper-warm, #ede4d2) !important; border-radius: 6px !important; }
@media (max-width: 800px) { html body.editorial-page .ffw-venue-class-row { grid-template-columns: 1fr !important; } }
html body.editorial-page .ffw-venue-class-row .ffw-class-info { padding: 0 !important; max-width: 100% !important; }
html body.editorial-page .ffw-venue-class-row .ffw-class-info h3 { font-family: Fraunces, serif !important; font-size: 26px !important; font-weight: 500 !important; color: var(--olive-deep, #3d4a2a) !important; margin: 0 0 12px 0 !important; }
html body.editorial-page .ffw-venue-class-row .ffw-class-info p { color: var(--ink, #2a1f15) !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
html body.editorial-page .ffw-venue-class-row .ffw-class-info a { color: var(--terracotta-text, #9a4827) !important; text-decoration: underline !important; }
html body.editorial-page .ffw-venue-class-row .ffw-class-widget,
html body.editorial-page .ffw-venue-class-row .rezdy-widget-slot { padding: 0 !important; }
html body.editorial-page .ffw-venue-class-row iframe { max-width: 100% !important; width: 100% !important; }
/* Pick-a-date venue cards grid — 4 columns desktop, 2 columns tablet, 1 column mobile */
html body .ffw-pick-a-date-section { max-width: 1320px !important; margin: 32px auto !important; padding: 32px 24px !important; }
html body .ffw-venue-cards-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; margin-top: 32px !important; align-items: start !important; }
@media (max-width: 1100px) { html body .ffw-venue-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { html body .ffw-venue-cards-grid { grid-template-columns: 1fr !important; } }
html body .ffw-venue-card { background: var(--paper, #f5efe4) !important; padding: 24px 20px !important; border-left: 3px solid var(--terracotta-text, #9a4827) !important; color: var(--ink, #2a1f15) !important; }
html body .ffw-venue-card h3 { font-family: Fraunces, serif !important; font-weight: 500 !important; font-size: 22px !important; color: var(--olive-deep, #3d4a2a) !important; margin: 0 0 12px 0 !important; }
html body .ffw-venue-card p { font-family: Fraunces, serif !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--ink, #2a1f15) !important; margin: 0 0 16px 0 !important; }
html body .ffw-venue-card a { color: var(--terracotta-text, #9a4827) !important; text-decoration: underline !important; }
html body .ffw-venue-card-widget iframe { width: 100% !important; min-height: 600px !important; border: 0 !important; }
html body .ffw-venue-card-enquiry input[type="email"] { width: 100% !important; padding: 10px 14px !important; font-family: Fraunces, serif !important; font-size: 14px !important; background: var(--paper-warm, #ede4d2) !important; border: 1px solid rgba(42,31,21,0.32) !important; margin: 8px 0 12px 0 !important; box-sizing: border-box !important; color: var(--ink, #2a1f15) !important; }
html body .ffw-venue-card-enquiry .ffw-checkbox-row { display: flex !important; gap: 8px !important; font-size: 13px !important; color: var(--ink, #2a1f15) !important; margin-bottom: 12px !important; align-items: flex-start !important; }
html body .ffw-venue-card-enquiry label[for] { display: block !important; font-family: Inter, sans-serif !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--terracotta-text, #9a4827) !important; margin: 8px 0 4px 0 !important; }
html body .ffw-venue-card-enquiry button { width: 100% !important; padding: 12px !important; background: var(--terracotta-text, #9a4827) !important; color: var(--paper, #f5efe4) !important; border: 0 !important; font-family: Inter, sans-serif !important; font-size: 12px !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; font-weight: 600 !important; cursor: pointer !important; }
html body .ffw-venue-card-coming { padding: 8px 0 !important; }
html body .ffw-venue-card-coming strong { color: var(--terracotta-text, #9a4827) !important; }
/* Breadcrumb sitewide alignment — pin to the same 1320px canonical column as every section, with 24px padding gutters */
html body nav.breadcrumb,
html body .breadcrumb { max-width: 1320px !important; margin: 24px auto !important; padding: 0 24px !important; box-sizing: border-box !important; }
html body section.faq-hero nav.breadcrumb,
html body section.page-hero nav.breadcrumb,
html body section[class*="hero"] nav.breadcrumb { max-width: 100% !important; margin: 0 0 16px 0 !important; padding: 0 !important; }
/* Venue cards uniform inset booking-panel treatment — every card has the same paper-warm inner panel so all 4 cards look identical regardless of widget vs coming-soon vs enquiry */
html body .ffw-venue-card { display: flex !important; flex-direction: column !important; min-height: 720px !important; padding: 28px 24px !important; background: var(--paper, #f5efe4) !important; border-left: 3px solid var(--terracotta-text, #9a4827) !important; }
html body .ffw-venue-card > h3 { margin-bottom: 12px !important; }
html body .ffw-venue-card > p { margin-bottom: 20px !important; flex-grow: 0 !important; }
html body .ffw-venue-card .ffw-venue-card-widget,
html body .ffw-venue-card .ffw-venue-card-coming,
html body .ffw-venue-card .ffw-venue-card-enquiry { background: var(--paper-warm, #ede4d2) !important; padding: 20px 18px !important; border: 1px solid rgba(42, 31, 21, 0.18) !important; margin-top: auto !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important; }
html body .ffw-venue-card .ffw-venue-card-widget iframe { width: 100% !important; min-height: 580px !important; flex-grow: 1 !important; background: transparent !important; }
html body .ffw-venue-card .ffw-venue-card-coming { justify-content: center !important; text-align: center !important; min-height: 580px !important; }
html body .ffw-venue-card .ffw-venue-card-coming p { color: var(--ink, #2a1f15) !important; font-family: Fraunces, serif !important; font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 12px 0 !important; }
html body .ffw-venue-card .ffw-venue-card-coming p:first-child strong { display: block !important; font-family: Inter, sans-serif !important; font-size: 12px !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--terracotta-text, #9a4827) !important; margin-bottom: 16px !important; font-weight: 600 !important; }
html body .ffw-venue-card .ffw-venue-card-coming p:nth-child(2)::before { content: "" !important; display: block !important; width: 32px !important; height: 1px !important; background: rgba(42, 31, 21, 0.32) !important; margin: 0 auto 16px auto !important; }
html body .ffw-venue-card .ffw-venue-card-enquiry { min-height: 580px !important; justify-content: flex-start !important; }
html body .ffw-venue-card .ffw-venue-card-enquiry p { font-family: Fraunces, serif !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--ink, #2a1f15) !important; margin: 0 0 16px 0 !important; }
html body .ffw-venue-card .ffw-venue-card-enquiry p a { color: var(--terracotta-text, #9a4827) !important; text-decoration: underline !important; }
html body .ffw-venue-card .ffw-venue-card-enquiry form { display: flex !important; flex-direction: column !important; margin-top: auto !important; }