/*
Theme Name: The Allergy Team
Theme URI: https://innermedia.co.uk
Author: InnerMedia
Author URI: https://innermedia.co.uk
Description: Child theme of SCMS Starter for The Allergy Team. Brand colours/fonts/spacing live in assets/css/tokens.css; component + layout styling lives in this file.
Version: 1.8.0
Template: scms-starter
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: theallergyteam
*/

/* ════════════════════════════════════════════════════════════════
   THE ALLERGY TEAM
   Built from the v7 home + v1 inner Figma exports (visual spec).
   Block markup/classes come from scms-starter; restyled here.
   NOTE: nav menu styling is intentionally minimal — final menu
   design pending. Header/footer chrome is styled.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. BASE / TYPOGRAPHY  (weights + scale from the export)
   ───────────────────────────────────────────────────────────── */
body {
    font-weight: var(--weight-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-h2); color: var(--color-primary); }
h1 { font-size: var(--text-5xl); font-weight: var(--weight-h1); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-h2); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-h3); }
h4 { font-size: var(--text-lg); }

@media (max-width: 992px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 1.875rem; }
}
@media (max-width: 576px) {
    h1 { font-size: 2.25rem; }
}

p { font-weight: var(--weight-body); line-height: var(--line-height-base); }
.body-text { font-size: var(--text-xl); line-height: var(--line-height-base); }
.body-text p { font-size: var(--text-xl); }
@media (max-width: 768px) { .body-text, .body-text p { font-size: 1.125rem; } }

.section_title { text-align: left; }
.section_title h2 { color: var(--color-navy); }

/* small uppercase label used for "DATE", "FOLLOW US" etc. */
.eyebrow, .smallLabel {
    font-size: var(--text-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────
   2. BUTTONS  (pill; coral outline default, teal fill variant)
   ───────────────────────────────────────────────────────────── */
.button, a.button, button.button,
.READ-MORE, .explore-more-wrapper, .quiz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    padding: var(--btn-padding);
    font-family: var(--font-primary);
    font-size: var(--btn-font-size);
    font-weight: var(--weight-button);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--btn-radius);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.button:hover, a.button:hover, button.button:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-text-hover);
    border-color: var(--btn-bg-hover);
}

/* Solid teal pill */
.button.btn-fill, a.button.btn-fill {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-navy);
}
.button.btn-fill:hover {
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-navy);
}
/* Solid coral pill */
.button.btn-coral, a.button.btn-coral {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.button.btn-coral:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* On dark sections the outline button flips to cream */
.is-dark .button, .dark-section .button {
    color: var(--color-cream);
    border-color: var(--color-cream);
}
.is-dark .button:hover, .dark-section .button:hover {
    background: var(--color-cream); color: var(--color-navy); border-color: var(--color-cream);
}

/* ─────────────────────────────────────────────────────────────
   3. LAYOUT HELPERS
   ───────────────────────────────────────────────────────────── */
.container { max-width: var(--container-width); }
.dynamicContent { padding: var(--space-2xl) 0; }
.bg-cream  { background: var(--color-cream); }
.bg-navy   { background: var(--color-navy); color: var(--color-cream); }
.bg-teal   { background: var(--color-secondary); }
img { border-radius: 0; }

/* ─────────────────────────────────────────────────────────────
   4. HEADER
   Inner pages: solid navy sticky bar.
   Home page (front-page / .home): transparent over the banner;
   on scroll only the buttons + burger remain (logo hides).
   The parent adds/removes .fixedHeader on <body> when scrolling
   (see assets/js/scripts.js).
   ───────────────────────────────────────────────────────────── */
.site-header.headGroup {
    background: var(--color-navy);
    position: sticky;
    top: 0;
    z-index: 999;
    transition: background var(--transition-base);
}
.mainHeader { min-height: var(--header-height); display: flex; align-items: center; }
.mainHeader .container { width: 100%; }
.site-logo img, .site-logo .site-title { max-height: 56px; width: auto; color: var(--color-cream); }
.headGroup .site-title { font-size: var(--text-xl); text-decoration: none; }

/* header action buttons (Get in Touch / newsletter) — if placed in topBar */
.topBar { background: transparent; padding: .25rem 0; }
.topBar a { color: var(--color-cream); }

/* Burger */
.mobileToggle { background: none; border: 0; padding: .5rem; display: inline-flex; flex-direction: column; gap: 6px; }
.mobileToggle span { display:block; width: 30px; height: 2px; background: var(--color-cream); transition: var(--transition-base); }

/* ── Home page: transparent header over the illustrated banner ── */
.home .site-header.headGroup,
.front-page .site-header.headGroup {
    background: transparent;
    position: absolute;
    left: 0; right: 0;
}
/* once scrolled, parent toggles body.fixedHeader */
.home.fixedHeader .site-header.headGroup,
.front-page.fixedHeader .site-header.headGroup {
    position: fixed;
    background: transparent;          /* design: bar stays transparent */
}
/* on the home page the logo hides on scroll, buttons+burger stay */
.home.fixedHeader .logoCol { opacity: 0; visibility: hidden; }
.home .mobileToggle span { background: var(--color-cream); }

/* ─────────────────────────────────────────────────────────────
   5. INNER PAGE BANNER  (blue bar + breadcrumb + H1)
   ───────────────────────────────────────────────────────────── */
.pageBanner {
    background: var(--color-navy);
    min-height: var(--banner-min-height);
    padding-top: var(--header-height);
}
.pageBanner.hasBannerImage { background: var(--color-navy); }
.pageBanner.hasBannerImage::after { background: rgba(15,38,69,var(--banner-overlay-opacity)); }
.bannerTitle { color: var(--color-cream); font-size: var(--text-5xl); }
@media (max-width: 576px){ .bannerTitle{ font-size: 2.5rem; } }

/* ─────────────────────────────────────────────────────────────
   6. DYNAMIC TEXT  (H2/H3 + bullets)
   ───────────────────────────────────────────────────────────── */
.dynamic-text .section_title { margin-bottom: var(--space-md); }
.dynamic-text .body-text h3 { color: var(--color-navy); margin-top: var(--space-md); }
.dynamic-text .body-text ul { list-style: none; padding-left: 0; }
.dynamic-text .body-text ul li {
    position: relative; padding-left: 2rem; margin-bottom: .6rem;
    font-size: var(--text-xl);
}
.dynamic-text .body-text ul li::before {
    content: ''; position: absolute; left: 0; top: .55em;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────
   7. TEXT + IMAGE  (title, text, link; image left/right)
   ───────────────────────────────────────────────────────────── */
.dynamic-text-image .container { }
.dynamic-text-image img { border-radius: var(--border-radius-sm); width: 100%; object-fit: cover; }
.dynamic-text-image .body-text { padding: var(--space-md) var(--space-lg); }
.dynamic-text-image .body-text h2,
.dynamic-text-image .body-text h3 { color: var(--color-navy); margin-bottom: var(--space-md); }
.dynamic-text-image .body-text .button { margin-top: var(--space-md); }

/* ─────────────────────────────────────────────────────────────
   8. SINGLE IMAGE
   ───────────────────────────────────────────────────────────── */
.dynamic-image figure.image-item img { border-radius: var(--border-radius-sm); }
.dynamic-image .imageItemCaption {
    font-size: var(--text-sm); color: var(--color-dark-grey);
    margin-top: var(--space-sm); text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   9. GALLERY
   ───────────────────────────────────────────────────────────── */
.dynamic-gallery .gallery-item img { border-radius: var(--border-radius-sm); }
.dynamic-gallery .gallery { display:flex; flex-wrap:wrap; gap: var(--space-md); }
.dynamic-gallery .gallery-item { margin: 0 !important; }

/* ─────────────────────────────────────────────────────────────
   10. CAROUSELS (image + link/logo)
   ───────────────────────────────────────────────────────────── */
.dynamic-carousel .item img,
.dynamic-link-carousel .item img { border-radius: var(--border-radius-sm); }
.scms-carousel .owl-nav button.owl-prev,
.scms-carousel .owl-nav button.owl-next {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-primary) !important; color: #fff !important;
    font-size: 22px; line-height: 48px;
}
.scms-carousel .owl-dots .owl-dot span {
    width: 12px; height: 12px; background: var(--color-mid-grey);
}
.scms-carousel .owl-dots .owl-dot.active span { background: var(--color-primary); }

/* ─────────────────────────────────────────────────────────────
   11. FAQ accordion  (one open shows styles)
   ───────────────────────────────────────────────────────────── */
.dynamic-faq .accordionGroup { border-top: none; max-width: 900px; }
.dynamic-faq .accordionItem {
    border: none; margin-bottom: var(--space-md);
    background: var(--color-cream); border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.dynamic-faq .accordionTab {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-lg); color: var(--color-navy);
    font-weight: 400;
}
.dynamic-faq .accordionTab::after { color: var(--color-primary); right: var(--space-lg); }
.dynamic-faq .accordionItem.open { background: var(--color-cream); }
.dynamic-faq .accordionItem.open .accordionTab { color: var(--color-primary); }
.dynamic-faq .accordionContent { padding: 0 var(--space-lg) var(--space-lg); }
.dynamic-faq .accordionContent .body-text { font-size: var(--text-lg); }

/* ─────────────────────────────────────────────────────────────
   12. QUOTES carousel  (cycle2)
   ───────────────────────────────────────────────────────────── */
.dynamic-quote { background: transparent; }
.dynamic-quote .quotes-holder { padding: var(--space-2xl) 0; }
.dynamic-quote .quoteContainer { max-width: 900px; text-align: center; }
.dynamic-quote .quote-text {
    font-size: var(--text-2xl); font-weight: var(--weight-h3);
    font-style: normal; color: var(--color-navy); line-height: 1.4;
}
.dynamic-quote .quote-cite {
    color: var(--color-primary); letter-spacing: 2px; text-transform: uppercase;
    font-size: var(--text-sm); margin-top: var(--space-lg);
}
.dynamic-quote .cycle-pager { text-align: center; margin-top: var(--space-lg); }
.dynamic-quote .cycle-pager span {
    display:inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-mid-grey); margin: 0 5px; cursor: pointer;
    font-size: 0; color: transparent;
}
.dynamic-quote .cycle-pager span.cycle-pager-active { background: var(--color-primary); }
/* dark-blue variant (home page) */
.dynamic-quote.is-dark, .dynamic-quote.bg-navy { background: var(--color-navy); }
.dynamic-quote.is-dark .quote-text,
.dynamic-quote.bg-navy .quote-text { color: var(--color-cream); }
.dynamic-quote.is-dark .quote-cite,
.dynamic-quote.bg-navy .quote-cite { color: var(--color-secondary); }

/* ─────────────────────────────────────────────────────────────
   13. STAFF  (explore-more → individual staff page)
   ───────────────────────────────────────────────────────────── */
.dynamic-staff .staff { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 992px){ .dynamic-staff .staff { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 576px){ .dynamic-staff .staff { grid-template-columns: 1fr; } }
.dynamic-staff .staffMember img { border-radius: var(--border-radius-sm); width:100%; }
.dynamic-staff .staffName, .dynamic-staff h3 { color: var(--color-navy); margin-top: var(--space-md); }
.dynamic-staff .staffPosition { color: var(--color-primary); letter-spacing: 1px; text-transform: uppercase; font-size: var(--text-sm); }
.dynamic-staff .button { margin-top: var(--space-md); }

/* ─────────────────────────────────────────────────────────────
   14. DOCUMENTS  (1, 2 or 3 per row)
   ───────────────────────────────────────────────────────────── */
.dynamic-documents .documents .row { gap: var(--space-md) 0; }
.dynamic-documents .document-link {
    width: 100%; text-align: left; justify-content: space-between;
    background: var(--color-cream); border-color: var(--color-cream);
    color: var(--color-navy); text-transform: none; letter-spacing: 0;
    font-size: var(--text-md); padding: 1rem 1.5rem;
}
.dynamic-documents .document-link::after { content: '\2193'; color: var(--color-primary); font-size: 1.25rem; }
.dynamic-documents .document-link:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-navy); }
/* control per-row count by adding col-md-12 / col-md-6 / col-md-4 via the
   block's items_per_row field (parent outputs col-md-6 by default) */

/* ─────────────────────────────────────────────────────────────
   15. POI  (photo CTA + text CTA, carousels)
   ───────────────────────────────────────────────────────────── */
.dynamic-poi .poi { border-radius: var(--border-radius-sm); }
.dynamic-poi .poiImageBG img { height: 320px; border-radius: var(--border-radius-sm); }
.dynamic-poi .poiText {
    background: linear-gradient(transparent, rgba(15,38,69,0.85));
    padding: var(--space-lg);
}
.dynamic-poi .poiTitle { font-size: var(--text-xl); font-weight: var(--weight-h3); }
.dynamic-poi .poiEx { font-size: var(--text-base); }
/* text CTA variant (image, title, text + button) */
.dynamic-poi .textOnlyBlock {
    background: var(--color-cream); color: var(--color-navy);
    border-radius: var(--border-radius-sm); padding: var(--space-lg);
}
.dynamic-poi .textOnlyBlock .poiTitle { color: var(--color-navy); }
.dynamic-poi .textOnlyBlock .button { margin-top: var(--space-md); }

/* ─────────────────────────────────────────────────────────────
   16. CALLOUT  (colour bg + image bg)
   ───────────────────────────────────────────────────────────── */
.dynamic-callout .callout { border-radius: var(--border-radius-md); overflow: hidden; }
.dynamic-callout .callout:not(.hasbg) { background: var(--color-secondary); }
.dynamic-callout .callout:not(.hasbg) .calloutContent { color: var(--color-navy); }
.dynamic-callout .callout.hasbg::after { background: rgba(15,38,69,0.55); }
.dynamic-callout .calloutContent { text-align: center; max-width: 760px; margin: 0 auto; }
.dynamic-callout .calloutTitle h3 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.dynamic-callout .calloutContent .button { margin-top: var(--space-lg); }

/* ─────────────────────────────────────────────────────────────
   17. CURRICULUM  (button opens accordion w/ title, text, image)
   ───────────────────────────────────────────────────────────── */
.dynamic-curriculum .curriculumTile {
    border-radius: var(--border-radius-sm); overflow: hidden;
    background: var(--color-cream);
}
.dynamic-curriculum .curriculumTile .button,
.dynamic-curriculum .curriculumTrigger { width: 100%; }
.dynamic-curriculum .curriculumPanel { background: var(--color-cream); padding: var(--space-lg); }
.dynamic-curriculum .curriculumPanel h3 { color: var(--color-navy); }

/* ─────────────────────────────────────────────────────────────
   18. TABLE style
   ───────────────────────────────────────────────────────────── */
.table-responsive table { width: 100%; border-collapse: collapse; }
.table-responsive th {
    background: var(--color-navy); color: var(--color-cream);
    padding: 1rem; text-align: left; font-weight: 400;
}
.table-responsive td { padding: 1rem; border-bottom: 1px solid var(--color-mid-grey); }
.table-responsive tr:nth-child(even) td { background: var(--color-cream); }

/* ─────────────────────────────────────────────────────────────
   19. FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer a { color: var(--footer-link); text-decoration: none; }
.site-footer a:hover { color: var(--color-secondary); }
.footerMain { padding: var(--space-2xl) 0 var(--space-lg); }
.footerBrand img, .footerBrand .site-title { max-height: 64px; }
.footerNav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.footerBottom { padding: var(--space-md) 0; border-top: 1px solid rgba(237,238,233,0.15); }
.footerBottom .copyright { font-size: var(--text-sm); color: var(--color-cream); margin: 0; }
/* footer contact + newsletter rows (markup may be added to footer.php) */
.footerContact a { display: inline-flex; align-items: center; gap: .5rem; }
.footerNewsletter .button { margin-top: var(--space-sm); }
.footerSocial { display: flex; gap: var(--space-md); }
.footerSocial img { height: 28px; width: auto; }

/* ════════════════════════════════════════════════════════════════
   v1.1 OVERRIDES
   ──────────────────────────────────────────────────────────────── */

/* ── 20. CONTAINER + GRID FALLBACK ───────────────────────────────
   The parent theme relies on Bootstrap for .container and the grid,
   but Bootstrap is not present on this install. These rules make the
   theme self-sufficient: centred container, flex grid, and the few
   display utilities the templates use. If Bootstrap is later added,
   these are harmless (compatible class names).
   ──────────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.container-wide { max-width: var(--container-wide-width); }

.row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.row > * { width: 100%; padding-inline: 12px; }
.row.align-items-center { align-items: center; }
.row.align-items-start  { align-items: flex-start; }

.col      { flex: 1 0 0%; width: auto; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-3    { flex: 0 0 25%;  max-width: 25%; }

@media (min-width: 576px) {
    .col-sm-4    { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-12   { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
    .col-md     { flex: 1 0 0%; width: auto; }
    .col-md-4   { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-6   { flex: 0 0 50%; max-width: 50%; }
    .col-md-12  { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
}

/* display utilities used by header.php */
.d-none { display: none !important; }
@media (min-width: 992px) {
    .d-lg-block { display: block !important; }
    .d-lg-none  { display: none !important; }
}

/* ── 21. GALLERY FIX (WP [gallery] shortcode output) ────────────── */
.dynamic-gallery .gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
.dynamic-gallery .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.dynamic-gallery .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.dynamic-gallery .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.dynamic-gallery .gallery-item {
    width: auto !important; margin: 0 !important; float: none !important;
}
.dynamic-gallery .gallery-item img {
    width: 100% !important; height: 260px; object-fit: cover;
    border: none !important; border-radius: var(--border-radius-sm);
}
.dynamic-gallery .gallery br { display: none; }
.dynamic-gallery .gallery-caption { display: none; }
@media (max-width: 768px) {
    .dynamic-gallery .gallery,
    .dynamic-gallery .gallery-columns-3,
    .dynamic-gallery .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
    .dynamic-gallery .gallery-item img { height: 180px; }
}

/* ── 22. SINGLE IMAGE — constrain + centre ─────────────────────── */
.dynamic-image figure.image-item { max-width: 1000px; margin-inline: auto; }
.dynamic-image figure.image-item img { width: 100%; border-radius: var(--border-radius-sm); }

/* ── 23. CAROUSEL items full-width per slide ───────────────────── */
.news-carousel_slider.owl-carousel .news-carousel_item { width: 100%; }

/* ── 24. HEADER (structured) ─────────────────────────────────────
   Inner pages: solid navy bar, cream elements.
   Home: transparent over the cream banner → navy elements.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 992px) { .d-lg-flex { display: flex !important; } }

.headerFlex {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-lg); min-height: var(--header-height);
}
.headerActions { display: flex; align-items: center; gap: var(--space-lg); }
.headerCtas    { display: flex; align-items: center; gap: var(--space-md); }
.headerContact { color: var(--color-cream); font-size: 1.05rem; display: inline-flex; }
.headerCta     { padding: .6rem 1.4rem; font-size: .8125rem; }
.logoCol .site-logo { display: inline-flex; align-items: center; }
.logoCol .site-logo img { max-height: 56px; width: auto; }
.headGroup .site-title { color: var(--color-cream); font-size: var(--text-xl); }

.nav-menu, .mobile-nav-inner ul {
    display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0;
}
.nav-menu a { color: var(--color-cream); text-decoration: none; font-size: var(--text-md); }
.nav-menu a:hover { color: var(--color-secondary); }

/* Home: navy elements on the cream banner */
.home .headGroup .site-title,
.home .nav-menu a,
.home .headerContact { color: var(--color-navy); }
.home .nav-menu a:hover { color: var(--color-primary); }
.home .mobileToggle span { background: var(--color-navy); }

/* Mobile nav panel */
.mobileNav {
    display: none; background: var(--color-navy); padding: var(--space-lg);
}
.mobileNav.open { display: block; }
.mobile-nav-inner ul { flex-direction: column; gap: var(--space-md); }
.mobile-nav-inner a { color: var(--color-cream); text-decoration: none; font-size: var(--text-lg); }
.mobileNavCtas { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }

/* ── 25. FOOTER (structured) ─────────────────────────────────────── */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.footerMain { padding: var(--space-2xl) 0; }
.footerBrand .site-logo img { max-height: 64px; }
.footerStrap { color: var(--color-cream); margin-top: var(--space-md); font-size: var(--text-lg); max-width: 24ch; }
.footerSocial { display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
.footerSocial a {
    width: 42px; height: 42px; border: 1px solid rgba(237,238,233,.4); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-cream); transition: var(--transition-base);
}
.footerSocial a:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-navy); }
.footerHeading { color: var(--color-cream); font-size: var(--text-lg); margin-bottom: var(--space-md); }
.footerContactCol, .footerNewsletter { padding-top: .25rem; }
.footerContact a { color: var(--color-cream); display: inline-flex; gap: .5rem; align-items: center; line-height: 2.2; text-decoration: none; }
.footerContact a:hover { color: var(--color-secondary); }
.footerNewsletterIntro { color: var(--color-cream); margin-bottom: var(--space-md); }
.newsletterForm { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletterForm input {
    flex: 1; min-width: 180px; padding: .85rem 1.25rem;
    border-radius: var(--border-radius-pill); border: 1px solid var(--color-cream);
    background: transparent; color: var(--color-cream); font-family: var(--font-primary);
}
.newsletterForm input::placeholder { color: rgba(237,238,233,.7); }
.footerBottom { padding: var(--space-md) 0; border-top: 1px solid rgba(237,238,233,.15); }
.footerBottomFlex { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.footerLegalMenu { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.footerLegal, .footerLegal a, .footerLegalMenu a, .designedBy, .copyright {
    color: var(--color-cream); font-size: var(--text-sm); text-decoration: none; margin: 0;
}
.footerLegal a:hover, .footerLegalMenu a:hover { color: var(--color-secondary); }
.designedBy { opacity: .8; }
@media (max-width: 992px) {
    .footerContactCol, .footerNewsletter { margin-top: var(--space-lg); }
    .footerBottomFlex { justify-content: flex-start; }
}

/* ── 26. FOOTER — corrected to match the export (supersedes §25) ──
   Left: coral "Get in Touch" + email/phone with icons + social.
   Middle: empty. Right: turquoise "Join our Newsletter" + form.
   Bottom bar: no top border, larger text. BG = navy #0f2645 (token).
   ──────────────────────────────────────────────────────────────── */
.footerMain { padding: var(--space-3xl) 0 var(--space-2xl); }
.footerCols {
    display: flex; justify-content: space-between; gap: var(--space-2xl);
    flex-wrap: wrap;
}
.footerLeft  { flex: 1 1 460px; max-width: 560px; }
.footerRight { flex: 0 1 420px; max-width: 460px; }

/* Get in Touch title (coral) */
.footerGetInTouch {
    color: var(--color-primary);
    font-weight: var(--weight-h1);
    font-size: 2.75rem;
    margin: 0 0 var(--space-lg);
}

/* Contact list with icons */
.footerContactList { list-style: none; margin: 0 0 var(--space-xl); padding: 0; }
.footerContactList li { margin-bottom: var(--space-md); }
.footerContactList a {
    display: inline-flex; align-items: center; gap: .75rem;
    color: var(--color-cream); text-decoration: none; font-size: var(--text-lg);
}
.footerContactList a:hover { color: var(--color-secondary); }
.footerContactList i { color: var(--color-primary); font-size: 1.25rem; width: 1.5rem; text-align: center; }

/* Social — coral circles with navy (blue) icons */
.footerSocial { display: flex; gap: var(--space-md); margin: 0; }
.footerSocial a {
    width: 56px; height: 56px; border: none; border-radius: 50%;
    background: var(--color-primary); color: var(--color-navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; transition: var(--transition-base);
}
.footerSocial a:hover { background: var(--color-secondary); color: var(--color-navy); }

/* Newsletter (right) */
.footerNewsletterTitle {
    color: var(--color-secondary);
    font-weight: var(--weight-h2);
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-sm);
}
.footerNewsletterIntro { color: var(--color-white); font-size: var(--text-lg); margin-bottom: var(--space-lg); }
.newsletterForm { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletterForm input {
    flex: 1; min-width: 200px; padding: .95rem 1.5rem;
    border-radius: var(--border-radius-pill); border: 1px solid var(--color-cream);
    background: transparent; color: var(--color-cream); font-family: var(--font-primary);
}
.newsletterForm input::placeholder { color: rgba(237,238,233,.7); }

/* Bottom bar — NO top border, larger text */
.footerBottom { padding: var(--space-lg) 0; border-top: none; }
.footerBottomFlex {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md) var(--space-xl); flex-wrap: wrap;
}
.footerBottomFlex .copyright,
.footerLegal, .footerLegal span, .footerLegal a,
.footerLegalMenu a, .designedBy {
    color: var(--color-cream); font-size: var(--text-md); margin: 0; text-decoration: none;
}
.footerLegal { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.footerLegalMenu { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.footerLegal a:hover, .footerLegalMenu a:hover { color: var(--color-secondary); }
.designedBy { opacity: .85; }

@media (max-width: 992px) {
    .footerCols { gap: var(--space-xl); }
    .footerLeft, .footerRight { flex: 1 1 100%; max-width: 100%; }
    .footerGetInTouch { font-size: 2.25rem; }
    .footerBottomFlex { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════
   v1.3 — RECONCILED WITH ANIMA INNER EXPORT
   Headings are coral; body #000d25; FAQ/Documents are coral-outline
   pills; quote text navy + teal cite; staff/curriculum CTAs teal-fill;
   table bordered (no zebra); curriculum = yellow circle triggers +
   white rounded panels; inner banner = coral H1 + teal breadcrumb.
   ════════════════════════════════════════════════════════════════ */

/* ── Section titles / block headings → coral ─────────────────────── */
.section_title h2,
.dynamic-text-image .body-text h2, .dynamic-text-image .body-text h3,
.dynamic-text .body-text h2, .dynamic-text .body-text h3 { color: var(--color-primary); }
.eyebrow { color: var(--color-primary); }
.eyebrow.is-teal { color: var(--color-secondary); }

/* ── Inner banner: coral H1 + teal breadcrumb ────────────────────── */
.pageBanner { background: var(--color-navy); }
.bannerTitle { color: var(--color-primary); }
.bannerCrumb { color: var(--color-secondary); font-size: var(--text-xl); margin-bottom: var(--space-md); }
.bannerCrumb a { color: var(--color-secondary); text-decoration: none; }
.bannerCrumb a:hover { color: var(--color-cream); }
.bannerCrumb .sep { opacity: .6; margin: 0 .25rem; }

/* ── Buttons: comfortable pill height ────────────────────────────── */
.button, a.button, button.button { padding: .85rem 2rem; }

/* ── FAQ: coral-outline pills; open = coral fill + cream text ─────── */
.dynamic-faq .accordionGroup { border-top: none; max-width: 1296px; margin: 0 auto; }
.dynamic-faq .accordionItem {
    border: 1px solid var(--color-primary); background: transparent;
    border-radius: var(--border-radius-pill); margin-bottom: var(--space-md); overflow: hidden;
}
.dynamic-faq .accordionTab {
    padding: 1.15rem 2rem; margin: 0; color: var(--color-primary);
    font-size: 18px; font-weight: var(--weight-button); letter-spacing: 2.7px; text-transform: uppercase;
}
.dynamic-faq .accordionTab::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--color-primary); font-size: 1rem; right: 2rem;
}
.dynamic-faq .accordionItem.open { background: var(--color-primary); border-radius: var(--border-radius-lg); }
.dynamic-faq .accordionItem.open .accordionTab,
.dynamic-faq .accordionItem.open .accordionTab::after { color: var(--color-cream); }
.dynamic-faq .accordionItem.open .accordionTab::after { content: '\f077'; }
.dynamic-faq .accordionContent { padding: 0 2rem 1.5rem; }
.dynamic-faq .accordionItem.open .accordionContent,
.dynamic-faq .accordionItem.open .accordionContent * { color: var(--color-cream); }

/* ── Documents: coral-outline pills with download icon ───────────── */
.dynamic-documents .document-link {
    width: 100%; justify-content: space-between; text-align: left;
    background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary);
    border-radius: var(--border-radius-pill); text-transform: uppercase; letter-spacing: 2.7px;
    font-size: 18px; padding: 1.1rem 2rem;
}
.dynamic-documents .document-link::after {
    content: '\f019'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--color-primary);
}
.dynamic-documents .document-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-cream); }
.dynamic-documents .document-link:hover::after { color: var(--color-cream); }

/* ── Quote: navy text, teal cite, coral / faded-teal pager dots ──── */
.dynamic-quote .quote-text { font-size: var(--text-3xl); color: var(--color-navy); font-weight: var(--weight-h2); font-style: normal; }
.dynamic-quote .quote-cite { color: var(--color-secondary); font-size: var(--text-xl); letter-spacing: 1px; text-transform: none; margin-top: var(--space-lg); }
.dynamic-quote .cycle-pager span { width: 16px; height: 16px; border-radius: 8px; background: #80ceca66; }
.dynamic-quote .cycle-pager span.cycle-pager-active { background: var(--color-primary); }
/* Home quote sits on dark navy (design) — wired via the .home class */
.home .dynamic-quote { background: var(--color-navy); }
.home .dynamic-quote .quote-text { color: var(--color-cream); }
.home .dynamic-quote .quote-cite { color: var(--color-secondary); }

/* ── Staff: coral name/position, teal-fill Read More ─────────────── */
.dynamic-staff .staff-name { color: var(--color-primary); }
.dynamic-staff .standard-staff-text .meta-value, .dynamic-staff .staff-biog { color: var(--color-text); }
.dynamic-staff .button {
    background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-navy);
}
.dynamic-staff .button:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-navy); }

/* ── POI: photo tile = white title overlay; text tile = no card ──── */
.dynamic-poi .poiTitle { color: #fff; font-size: var(--text-xl); font-weight: var(--weight-button); }
.dynamic-poi .poiText { background: linear-gradient(transparent, rgba(15,38,69,.78)); }
.dynamic-poi .textOnlyBlock { background: transparent; padding: 0; }
.dynamic-poi .textOnlyBlock .poiTitle { color: var(--color-navy); }
.dynamic-poi .textOnlyBlock .poiEx { color: var(--color-text); font-size: 16px; }

/* ── Table: bordered cells, navy header, no zebra ────────────────── */
.table-responsive table { border-collapse: collapse; width: 100%; }
.table-responsive th { background: var(--color-navy); color: #fff; font-weight: 700; border: 1px solid #13264d; padding: 1rem 1.25rem; font-size: 1.125rem; text-align: left; }
.table-responsive td { border: 1px solid #13264d; color: var(--color-text); padding: 1rem 1.25rem; font-size: 1.125rem; }
.table-responsive tr:nth-child(even) td { background: transparent; }

/* ── Curriculum: yellow circular triggers, white rounded panels ──── */
.dynamic-curriculum .subject-tile { border-radius: var(--border-radius-lg); }
.dynamic-curriculum .subject-tile .cover .button-wrap {
    background: var(--color-accent); border: none; border-radius: 50%; height: 56px; width: 56px;
}
.dynamic-curriculum .subject-tile .cover .button-wrap .toggle-subject:before { color: var(--color-navy); }
.dynamic-curriculum .subject-tile.subjectOpen .cover .button-wrap { background: var(--color-accent); }
.dynamic-curriculum .subject-block .panel { background: #fff; border-radius: var(--border-radius-pill); padding: 40px; }
.dynamic-curriculum .subject-block .subject-close { background: var(--color-primary); border-radius: 50%; }
.dynamic-curriculum .subjContent .title { color: var(--color-primary); }
.dynamic-curriculum .subjContent .body { color: var(--color-text); }

/* ── Callout heading stays light on image/colour backgrounds ─────── */
.dynamic-callout .calloutTitle h3 { color: inherit; }

/* ── 28. CUSTOM BLOCKS — reconciled with home export ─────────────── */
/* Who We Are: "NEXT" is a coral text link + arrow (not a pill) */
.who-we-are .who-we-are_next {
    background: transparent; border: none; padding: 0; color: var(--color-primary);
    font-size: var(--text-xl); font-weight: var(--weight-button); letter-spacing: 2px;
    text-transform: uppercase;
}
.who-we-are .who-we-are_next:hover { background: transparent; color: var(--color-primary-dark); }
.who-we-are .who-we-are_label { color: var(--color-primary); }

/* Social grid: featured event tile is dark (navy) with cream text */
.social-grid_event { background: var(--color-navy); }
.social-grid_event-title { color: var(--color-cream); }
.social-grid_event-text { color: var(--color-cream); }
.social-grid_event .eyebrow { color: var(--color-secondary); }

/* News carousel: post title is coral (export) */
.news-carousel_title, .news-carousel_title a { color: var(--color-primary); }
.news-carousel_date { color: var(--color-primary); }

/* ── 29. STAFF LAYOUT FIX — stacked rows, photo left / text right ──
   (overrides the earlier 3-col grid; matches the inner export) ──── */
.dynamic-staff .staff { display: block; }
.dynamic-staff .featured-staff,
.dynamic-staff .standard-staff-member { margin-bottom: var(--space-2xl); }
.dynamic-staff .featured-staff:last-child,
.dynamic-staff .standard-staff-member:last-child { margin-bottom: 0; }
.dynamic-staff .staff-name { color: var(--color-primary); font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.dynamic-staff .postThumb img,
.dynamic-staff .standard-staff-image img { width: 100%; border-radius: var(--border-radius-sm); }
.dynamic-staff .staff-metas { margin-bottom: var(--space-md); }
.dynamic-staff .staff-meta { font-size: var(--text-lg); margin-bottom: .35rem; color: var(--color-text); }
.dynamic-staff .meta-label { color: var(--color-primary); font-weight: 400; margin-right: .25rem; }
.dynamic-staff .staff-biog p, .dynamic-staff .featured-staff .body-text { font-size: var(--text-lg); color: var(--color-text); }
.dynamic-staff .button { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-navy); margin-top: var(--space-md); }
.dynamic-staff .button:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-navy); }
/* widen the photo column a touch for a stronger photo-left/text-right split */
@media (min-width: 768px) {
    .dynamic-staff .featured-staff .row > .col-3,
    .dynamic-staff .featured-staff .row > .col-sm-4,
    .dynamic-staff .standard-staff-member .row > .col-3 { flex: 0 0 30%; max-width: 30%; }
}

/* ════════════════════════════════════════════════════════════════
   v1.7 — design-review fixes (FontAwesome is NOT installed on this
   site, so all icon glyphs are inline SVG / SVG data-URIs here).
   ════════════════════════════════════════════════════════════════ */

/* ── 30a. INNER BANNER: image only; breadcrumb + H1 BELOW ───────── */
.pageBanner { background: transparent; min-height: 0; padding: 0; display: block; }
.pageBanner.hasBannerImage::after { content: none; display: none; }
.pageBanner .bannerImage { position: static; inset: auto; }
.pageBanner .bannerImg, .pageBanner .bannerImage img {
    width: 100%; height: clamp(220px, 36vw, 540px); object-fit: cover; display: block;
}
.bannerBelow { padding: var(--space-xl) 0 var(--space-md); }
.bannerBelow .bannerCrumb { color: var(--color-secondary); font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.bannerBelow .bannerCrumb a { color: var(--color-secondary); text-decoration: none; }
.bannerBelow .bannerCrumb a:hover { color: var(--color-primary); }
.bannerBelow .bannerCrumb .sep { opacity: .6; margin: 0 .35rem; }
.bannerBelow .bannerTitle { color: var(--color-primary); font-size: var(--text-5xl); margin: 0; }
@media (max-width: 576px){ .bannerBelow .bannerTitle { font-size: 2.5rem; } }

/* ── 30b. FAQ: SVG down-arrow; hover → coral bg, white text/arrow ─ */
.dynamic-faq .accordionTab { position: relative; padding-right: 3.5rem; }
.dynamic-faq .accordionTab::after {
    content: ''; width: 22px; height: 22px; right: 1.75rem;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f07a6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    transition: transform var(--transition-base);
}
.dynamic-faq .accordionItem:hover { background: var(--color-primary); border-radius: var(--border-radius-lg); }
.dynamic-faq .accordionItem:hover .accordionTab { color: #fff; }
.dynamic-faq .accordionItem:hover .accordionTab::after,
.dynamic-faq .accordionItem.open .accordionTab::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.dynamic-faq .accordionItem.open .accordionTab::after { transform: rotate(180deg); }
.dynamic-faq .accordionItem.open .accordionTab { color: #fff; }

/* ── 30c. DOCUMENTS: SVG download icon on the right ─────────────── */
.dynamic-documents .document-link::after {
    content: ''; width: 22px; height: 22px; flex: 0 0 auto; font-size: 0;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f07a6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11M8 11l4 4 4-4M5 20h14'/%3E%3C/svg%3E");
}
.dynamic-documents .document-link:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11M8 11l4 4 4-4M5 20h14'/%3E%3C/svg%3E");
}

/* ── 30d. QUOTE: 2 columns, big mark, coral divider, pager right ── */
.dynamic-quote .quoteContainer { max-width: 1000px; margin: 0 auto; position: relative; padding-right: 64px; }
.dynamic-quote .cycle-slideshow { border-right: 3px solid var(--color-primary); padding-right: 44px; }
.dynamic-quote .quotesTitle { text-align: right; }
.dynamic-quote .quote-text {
    text-align: right; font-size: var(--text-2xl); font-weight: var(--weight-h3);
    font-style: normal; color: var(--color-navy); position: relative; border: none; margin: 0;
}
.dynamic-quote .quote-text::before {
    content: '\201C'; font-family: Georgia, 'Times New Roman', serif;
    font-size: 6.5rem; line-height: .9; color: var(--color-primary);
    display: block; text-align: left; margin-bottom: -1.5rem;
}
.dynamic-quote .quote-cite {
    display: block; text-align: right; text-transform: uppercase;
    color: var(--color-secondary); letter-spacing: 1.5px; font-size: var(--text-base); margin-top: var(--space-md);
}
.dynamic-quote .cycle-pager {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px; margin: 0;
}
.dynamic-quote .cycle-pager span { width: 16px; height: 16px; border-radius: 50%; background: #80ceca66; cursor: pointer; }
.dynamic-quote .cycle-pager span.cycle-pager-active { background: var(--color-primary); }
.home .dynamic-quote .quote-text { color: var(--color-cream); }
@media (max-width: 576px){
    .dynamic-quote .quoteContainer { padding-right: 0; }
    .dynamic-quote .cycle-slideshow { border-right: none; padding-right: 0; }
    .dynamic-quote .cycle-pager { position: static; flex-direction: row; justify-content: flex-end; transform: none; margin-top: 1rem; }
}

/* ── 30e. GALLERY: more rounded corners ─────────────────────────── */
.dynamic-gallery .gallery-item img { border-radius: var(--border-radius-lg); }

/* ── 30f. STAFF: photo radius, name+position right, labels ──────── */
.dynamic-staff .postThumb img,
.dynamic-staff .standard-staff-image img { border-radius: var(--border-radius-lg); width: 100%; }
.dynamic-staff .staff-name { color: var(--color-primary); font-size: var(--text-3xl); margin-bottom: .25rem; }
.dynamic-staff .staff-position { color: var(--color-primary); font-size: var(--text-lg); margin-bottom: var(--space-md); }
.dynamic-staff .staff-metas { margin-bottom: var(--space-md); }
.dynamic-staff .staff-meta { font-size: var(--text-lg); color: var(--color-text); margin-bottom: .35rem; }
.dynamic-staff .meta-label { font-weight: 700; color: var(--color-black); margin-right: .4rem; }
.dynamic-staff .meta-value { color: var(--color-text); }
.dynamic-staff .body-text, .dynamic-staff .staff-biog p { color: var(--color-text); font-size: var(--text-lg); }
.dynamic-staff .staff-info { padding-left: var(--space-md); }
@media (max-width: 767px){ .dynamic-staff .staff-info { padding-left: 0; margin-top: var(--space-md); } }

/* ── 30g. CALLOUT: left-aligned content, white button, coral hover ─ */
.dynamic-callout .calloutContent { text-align: left; max-width: none; margin: 0; }
.dynamic-callout .calloutContent .row { justify-content: flex-start; }
.dynamic-callout .calloutContent .col { flex: 0 1 640px; max-width: 640px; }
.dynamic-callout .calloutTitle h3 { color: #fff; text-align: left; }
.dynamic-callout .calloutSubtitle, .dynamic-callout .calloutText { color: #fff; }
.dynamic-callout .calloutContent .button {
    background: transparent; border: 1px solid #fff; color: #fff;
}
.dynamic-callout .calloutContent .button:hover {
    background: var(--color-primary); border-color: #fff; color: #fff;
}

/* ── 30h. CURRICULUM toggles: SVG (replace FontAwesome) ─────────── */
.dynamic-curriculum .toggle-subject:before {
    content: '' !important; position: absolute; inset: 0;
    background: no-repeat center / 42%
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2645' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.dynamic-curriculum .subject-tile.subjectOpen .toggle-subject:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2645' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.dynamic-curriculum .subject-close:before {
    content: '' !important; position: absolute; inset: 0;
    background: no-repeat center / 40%
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* ── 30i. FOOTER social icons render via inline SVG now ─────────── */
.footerSocial a svg, .footerContact a svg { display: block; }

/* ── 31. v1.8 — logo size, header button colour, banner spacing ──── */
/* Logo: cap height (the_custom_logo outputs .custom-logo) */
.site-logo img, .custom-logo, .logoCol img { max-height: 52px; width: auto; height: auto; }
.footerBrand .custom-logo, .footerBrand img { max-height: 64px; width: auto; }

/* Header coral button (Hub Login) has navy text, per export */
.headerCta.btn-coral, .mobileNavCtas .btn-coral { color: var(--color-navy); }
.headerCta.btn-coral:hover, .mobileNavCtas .btn-coral:hover { color: var(--color-navy); }

/* Inner banner: breadcrumb uppercase + tight to the image; big gap above H1 */
.bannerBelow { padding: var(--space-md) 0 var(--space-2xl); }
.bannerBelow .bannerCrumb { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; }
.bannerBelow .bannerTitle { margin-top: var(--space-3xl); }
@media (max-width: 576px){ .bannerBelow .bannerTitle { margin-top: var(--space-xl); } }