/* ==========================================================================
   American College of Medical Foot Care & Esthetics — bespoke theme
   --------------------------------------------------------------------------
   Brand tokens are sampled from the seal artwork itself
   (ACMFCE-_-Option-3_Color.png), not from the old Neve settings, which had
   drifted a few points off:

     seal navy   #1C3490   (Neve footer used #21368b)
     seal gold   #BFA14E   (Neve used #baa15b)
     band blue   #0E509A   (Neve --nv-secondary-accent — kept, it is the
                            colour of the programme band and reads well as a
                            deeper, cooler partner to the seal navy)

   Everything structural is prefixed `acm-` so nothing collides with the
   framework. This file is UNLAYERED, so it always beats app.css's
   @layer framework rules regardless of specificity — no !important anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted Source Serif 4 + Source Sans 3
   The original site set Georgia for both body and headings. Georgia is a
   screen-first transitional serif; Source Serif 4 is the closest open face
   with the same brief (Adobe designed it for reading on screen) and it sits
   better beside the seal's classical wordmark. Source Sans 3 carries body
   copy and UI — the certification and membership pages are dense, and the
   sans lifts them considerably. They are a designed superfamily, so the
   pairing is harmonious.

   Swapping the whole site onto another face is a two-line change:
   --acm-font-head and --acm-font-body below.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — sampled from the seal */
    --acm-navy:        #1C3490;
    --acm-navy-deep:   #142566;
    --acm-navy-soft:   #2b47ad;
    --acm-blue:        #0E509A;
    --acm-blue-deep:   #0a3c74;

    --acm-gold:        #BFA14E;
    --acm-gold-deep:   #9c8138;
    --acm-gold-light:  #DCCB9D;
    --acm-gold-wash:   #f7f2e4;

    /* Neutrals */
    --acm-ink:         #23262e;
    --acm-ink-soft:    #4c515c;
    --acm-ink-faint:   #6f7684;
    --acm-white:       #ffffff;
    --acm-cream:       #FBF9F3;   /* warm white, also sampled from the seal */
    --acm-wash:        #f4f6fa;
    --acm-rule:        #e2e6ee;

    /* Type */
    --acm-font-head:   'Source Serif 4', Georgia, 'Times New Roman', serif;
    --acm-font-body:   'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Measure + rhythm */
    --acm-container:   1180px;
    --acm-container-narrow: 820px;
    --acm-gutter:      clamp(1.15rem, 4vw, 2.5rem);
    --acm-section-y:   clamp(3.25rem, 7vw, 5.75rem);

    --acm-radius:      4px;
    --acm-radius-lg:   10px;
    --acm-shadow:      0 1px 2px rgba(28,52,144,.06), 0 8px 24px rgba(28,52,144,.07);
    --acm-shadow-lg:   0 2px 6px rgba(28,52,144,.08), 0 18px 44px rgba(28,52,144,.12);

    --acm-header-h:    clamp(74px, 8vw, 104px);

    /* Bridge the framework's own variables so any un-overridden framework
       section (blog feed, contact form, etc.) inherits the brand rather than
       mmCMS defaults. */
    --color-primary:     #1C3490;
    --color-accent:      #BFA14E;
    --color-secondary:   #0E509A;
    --color-header-bg:   #ffffff;
    --color-footer-bg:   #142566;
    --font-body:         'Source Sans 3', system-ui, sans-serif;
    --font-heading:      'Source Serif 4', Georgia, serif;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--acm-font-body);
    color: var(--acm-ink);
    background: var(--acm-white);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--acm-font-head);
    color: var(--acm-navy);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.22rem, 2.2vw, 1.5rem); }
h4 { font-size: clamp(1.06rem, 1.7vw, 1.2rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--acm-blue); text-underline-offset: 2px; }
a:hover { color: var(--acm-navy); }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--acm-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.acm-container {
    width: 100%;
    max-width: var(--acm-container);
    margin-inline: auto;
    padding-inline: var(--acm-gutter);
}
.acm-container--narrow { max-width: var(--acm-container-narrow); }

.acm-section { padding-block: var(--acm-section-y); }
.acm-section--wash  { background: var(--acm-wash); }
.acm-section--cream { background: var(--acm-cream); }
.acm-section--navy  { background: var(--acm-navy-deep); color: #dfe4f5; }
.acm-section--navy h2,
.acm-section--navy h3 { color: #fff; }

/* The old site centred its copy with an empty 15% / 70% / 15% column trick.
   A max-width does the same job and survives a narrow viewport. */
.acm-measure { max-width: 68ch; margin-inline: auto; }

/* Section heading with the gold rules the original used above and below */
.acm-heading {
    text-align: center;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.acm-heading h2,
.acm-heading h1 { margin-bottom: 0; }
.acm-heading::after {
    content: "";
    display: block;
    width: 74px;
    height: 3px;
    margin: 1.1rem auto 0;
    background: var(--acm-gold);
    border-radius: 2px;
}
.acm-heading .acm-eyebrow { margin-bottom: .55rem; }
.acm-section--navy .acm-heading::after { background: var(--acm-gold-light); }

.acm-eyebrow {
    display: block;
    font-family: var(--acm-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acm-gold-deep);
}
.acm-section--navy .acm-eyebrow { color: var(--acm-gold-light); }

.acm-lead {
    font-size: 1.14rem;
    line-height: 1.62;
    color: var(--acm-ink-soft);
}

/* --------------------------------------------------------------------------
   5. Buttons
   The original's buttons collapsed to the left edge because the Gutenberg
   `aligncenter` rules were gone. These are flex-centred at the group level,
   so alignment never depends on a plugin stylesheet.
   -------------------------------------------------------------------------- */
.acm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .78rem 1.65rem;
    border: 2px solid transparent;
    border-radius: var(--acm-radius);
    font-family: var(--acm-font-body);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease;
}
.acm-btn:hover { transform: translateY(-1px); }

.acm-btn--gold {
    background: var(--acm-gold);
    border-color: var(--acm-gold);
    color: #1d1a10;
}
.acm-btn--gold:hover { background: var(--acm-gold-deep); border-color: var(--acm-gold-deep); color: #fff; }

.acm-btn--navy {
    background: var(--acm-navy);
    border-color: var(--acm-navy);
    color: #fff;
}
.acm-btn--navy:hover { background: var(--acm-navy-deep); border-color: var(--acm-navy-deep); color: #fff; }

.acm-btn--ghost {
    background: transparent;
    border-color: var(--acm-navy);
    color: var(--acm-navy);
}
.acm-btn--ghost:hover { background: var(--acm-navy); color: #fff; }

.acm-btn--on-dark {
    background: transparent;
    border-color: rgba(255,255,255,.7);
    color: #fff;
}
.acm-btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--acm-navy); }

.acm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 1.85rem;
}
.acm-btn-group--start { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.acm-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--acm-white);
    border-bottom: 1px solid var(--acm-rule);
    transition: box-shadow .2s ease;
}
.acm-header.is-stuck { box-shadow: var(--acm-shadow); }

.acm-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--acm-header-h);
    padding-block: .6rem;
}

.acm-logo { display: flex; align-items: center; flex-shrink: 0; }
.acm-logo img {
    display: block;
    width: auto;
    height: clamp(46px, 5.4vw, 68px);
}
.acm-logo__text {
    font-family: var(--acm-font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--acm-navy);
    letter-spacing: .02em;
}

/* ---- Mobile-first defaults ----
   These must be declared BEFORE the desktop media query: they share its
   specificity, so if they came after they would win at every width and the
   burger would never disappear on desktop. */
.acm-nav { display: none; }
.acm-header__cta { display: none; flex-shrink: 0; }

.acm-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 42px;
    padding: 0 9px;
    margin-inline-start: auto;
    background: transparent;
    border: 1px solid var(--acm-rule);
    border-radius: var(--acm-radius);
    cursor: pointer;
}
.acm-burger span {
    display: block;
    height: 2px;
    background: var(--acm-navy);
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
}
.acm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.acm-burger.is-open span:nth-child(2) { opacity: 0; }
.acm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Desktop navigation ---- */
@media (min-width: 1060px) {
    .acm-nav { display: block; margin-inline-start: auto; }
    .acm-nav__list {
        display: flex;
        align-items: center;
        gap: .35rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .acm-nav__item { position: relative; }
    .acm-nav__link {
        display: flex;
        align-items: center;
        gap: .3rem;
        padding: .6rem .8rem;
        font-size: .845rem;
        font-weight: 700;
        letter-spacing: .085em;
        text-transform: uppercase;
        color: var(--acm-navy);
        text-decoration: none;
        border-bottom: 3px solid transparent;
        transition: color .15s ease, border-color .15s ease;
    }
    .acm-nav__link:hover,
    .acm-nav__item.is-current > .acm-nav__link {
        color: var(--acm-gold-deep);
        border-bottom-color: var(--acm-gold);
    }
    .acm-nav__chev { width: 9px; height: 9px; transition: transform .18s ease; }
    .acm-nav__item:hover .acm-nav__chev { transform: rotate(180deg); }

    .acm-nav__drop {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        list-style: none;
        margin: 0;
        padding: .4rem;
        background: #fff;
        border: 1px solid var(--acm-rule);
        border-top: 3px solid var(--acm-gold);
        border-radius: 0 0 var(--acm-radius) var(--acm-radius);
        box-shadow: var(--acm-shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .acm-nav__item:hover > .acm-nav__drop,
    .acm-nav__item:focus-within > .acm-nav__drop {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .acm-nav__drop a {
        display: block;
        padding: .6rem .8rem;
        font-size: .9rem;
        font-weight: 600;
        color: var(--acm-ink);
        text-decoration: none;
        border-radius: 3px;
    }
    .acm-nav__drop a:hover { background: var(--acm-gold-wash); color: var(--acm-navy); }

    .acm-header__cta { display: inline-flex; }
    .acm-burger { display: none; }
}

/* ---- Mobile drawer ---- */
.acm-drawer {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--acm-white);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
    overflow-y: auto;
}
.acm-drawer.is-open { transform: translateX(0); visibility: visible; }

.acm-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--acm-gutter);
    border-bottom: 1px solid var(--acm-rule);
}
.acm-drawer__close {
    width: 42px; height: 42px;
    font-size: 1.6rem; line-height: 1;
    background: transparent;
    border: 1px solid var(--acm-rule);
    border-radius: var(--acm-radius);
    color: var(--acm-navy);
    cursor: pointer;
}
.acm-drawer__body { padding: 1.25rem var(--acm-gutter) 3rem; }
.acm-drawer__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.acm-drawer__list > li { border-bottom: 1px solid var(--acm-rule); }
.acm-drawer__list a {
    display: block;
    padding: .95rem .1rem;
    font-family: var(--acm-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--acm-navy);
    text-decoration: none;
}
.acm-drawer__sub { list-style: none; margin: 0 0 .7rem; padding: 0 0 0 1rem; }
.acm-drawer__sub li { border: 0; }
.acm-drawer__sub a {
    padding: .55rem .1rem;
    font-size: .92rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--acm-ink-soft);
}
.acm-drawer .acm-btn { width: 100%; }

@media (min-width: 1060px) { .acm-drawer { display: none; } }

/* --------------------------------------------------------------------------
   7. Programme band
   The original's "Training Programs Available" strip, rebuilt as a real
   component instead of a Customizer HTML widget wrapped in a cover block.
   -------------------------------------------------------------------------- */
.acm-programs {
    background: var(--acm-blue);
    border-block: 4px solid var(--acm-gold);
    padding-block: 1.15rem;
    text-align: center;
}
.acm-programs__title {
    margin: 0 0 .8rem;
    font-family: var(--acm-font-head);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
}
.acm-programs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.acm-programs__list a {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.15rem;
    background: var(--acm-gold);
    border: 1px solid var(--acm-gold);
    border-radius: var(--acm-radius);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: #1d1a10;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}
.acm-programs__list a:hover { background: #fff; border-color: #fff; color: var(--acm-navy); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.acm-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 56vh, 560px);
    background: var(--acm-navy-deep) center/cover no-repeat;
    color: #fff;
    isolation: isolate;
}
.acm-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
                rgba(20,37,102,.92) 0%,
                rgba(20,37,102,.78) 46%,
                rgba(14,80,154,.55) 100%);
}
.acm-hero__inner { padding-block: clamp(3rem, 8vw, 5rem); max-width: 46rem; }
.acm-hero h1 { color: #fff; margin-bottom: .5rem; }
.acm-hero__sub {
    font-size: clamp(1.02rem, 1.9vw, 1.22rem);
    color: #dbe2f6;
    max-width: 40rem;
    margin-bottom: 0;
}
.acm-hero .acm-btn-group { justify-content: flex-start; }
.acm-hero .acm-eyebrow { color: var(--acm-gold-light); margin-bottom: .7rem; }

/* --------------------------------------------------------------------------
   9. Split (text + image) — replaces the old columns hack
   -------------------------------------------------------------------------- */
.acm-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
}
@media (min-width: 860px) {
    .acm-split { grid-template-columns: 1fr 1fr; }
    .acm-split--reverse .acm-split__media { order: -1; }
}
.acm-split__media img {
    display: block;
    width: 100%;
    border-radius: var(--acm-radius-lg);
    box-shadow: var(--acm-shadow-lg);
}
.acm-split .acm-btn-group { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.acm-grid {
    display: grid;
    gap: clamp(1.1rem, 2.4vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.acm-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 2.6vw, 1.9rem);
    background: #fff;
    border: 1px solid var(--acm-rule);
    border-top: 4px solid var(--acm-gold);
    border-radius: var(--acm-radius-lg);
    box-shadow: var(--acm-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.acm-card:hover { transform: translateY(-3px); box-shadow: var(--acm-shadow-lg); }
.acm-card h3 { margin-bottom: .45rem; }
.acm-card p  { color: var(--acm-ink-soft); font-size: .97rem; }
.acm-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-bottom: .9rem;
    background: var(--acm-gold-wash);
    border: 1px solid var(--acm-gold-light);
    border-radius: 50%;
    font-family: var(--acm-font-head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--acm-gold-deep);
}
.acm-card__link { margin-top: auto; padding-top: 1rem; }
.acm-card__link a {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--acm-navy);
    text-decoration: none;
}
.acm-card__link a:hover { color: var(--acm-gold-deep); }

/* Audience cards — the two certification tracks */
.acm-track {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--acm-rule);
    border-radius: var(--acm-radius-lg);
    box-shadow: var(--acm-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.acm-track:hover { transform: translateY(-3px); box-shadow: var(--acm-shadow-lg); }
.acm-track__band {
    padding: .55rem 1.4rem;
    background: var(--acm-navy);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acm-gold-light);
}
.acm-track__body { padding: clamp(1.4rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.acm-track__body p { color: var(--acm-ink-soft); }
.acm-track .acm-btn-group { justify-content: flex-start; margin-top: auto; padding-top: 1.35rem; }

/* --------------------------------------------------------------------------
   11. CTA banner
   -------------------------------------------------------------------------- */
.acm-cta {
    background: var(--acm-navy);
    color: #fff;
    text-align: center;
    border-block: 4px solid var(--acm-gold);
}
.acm-cta h2 { color: #fff; }
.acm-cta p  { color: #d8dff5; max-width: 54ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. Rich content — what WpImport-ed pages render into
   -------------------------------------------------------------------------- */
.acm-rich { font-size: 1.0625rem; }
.acm-rich > * + * { margin-top: 1.1em; }
.acm-rich h2 { margin-top: 2.1em; }
.acm-rich h3 { margin-top: 1.7em; }
.acm-rich h2:first-child, .acm-rich h3:first-child { margin-top: 0; }
.acm-rich ul, .acm-rich ol { padding-inline-start: 1.4em; }
.acm-rich li + li { margin-top: .45em; }
.acm-rich li::marker { color: var(--acm-gold-deep); font-weight: 700; }
.acm-rich img { border-radius: var(--acm-radius-lg); box-shadow: var(--acm-shadow); }
.acm-rich blockquote {
    margin: 1.6em 0;
    padding: .3em 0 .3em 1.3em;
    border-left: 4px solid var(--acm-gold);
    font-family: var(--acm-font-head);
    font-size: 1.15rem;
    color: var(--acm-navy);
}
.acm-rich hr {
    height: 3px;
    margin: 2.2em 0;
    background: var(--acm-gold);
    border: 0;
    border-radius: 2px;
    opacity: .55;
}
.acm-rich table {
    width: 100%;
    border-collapse: collapse;
    font-size: .96rem;
}
.acm-rich th, .acm-rich td {
    padding: .7rem .85rem;
    border: 1px solid var(--acm-rule);
    text-align: left;
}
.acm-rich th { background: var(--acm-wash); color: var(--acm-navy); font-weight: 700; }

/* Wide content must scroll inside its own box, never the page */
.acm-scroll-x { overflow-x: auto; }

/* --------------------------------------------------------------------------
   13. Page header (interior pages)
   -------------------------------------------------------------------------- */
.acm-pagehead {
    padding-block: clamp(2.4rem, 5vw, 3.6rem);
    background: var(--acm-navy-deep);
    border-bottom: 4px solid var(--acm-gold);
    color: #fff;
    text-align: center;
}
.acm-pagehead h1 { color: #fff; margin-bottom: .35rem; }
.acm-pagehead p  { color: #cdd6ef; max-width: 60ch; margin-inline: auto; }

.acm-crumbs {
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9fb0dd;
    margin-bottom: .7rem;
}
.acm-crumbs a { color: var(--acm-gold-light); text-decoration: none; }
.acm-crumbs a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.acm-footer {
    background: var(--acm-navy-deep);
    color: #c4cee9;
    border-top: 4px solid var(--acm-gold);
}
.acm-footer__main { padding-block: clamp(2.5rem, 5.5vw, 3.75rem); }
.acm-footer__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .acm-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.acm-footer__seal {
    display: block;
    width: 84px; height: 84px;
    margin-bottom: 1rem;
    padding: 7px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--acm-gold);
}
.acm-footer__seal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.acm-footer__name {
    font-family: var(--acm-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .3rem;
}
.acm-footer__tag { font-size: .95rem; color: #a9b6da; max-width: 34ch; }

.acm-footer h3 {
    font-family: var(--acm-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acm-gold-light);
    margin-bottom: .95rem;
}
.acm-footer__links { list-style: none; margin: 0; padding: 0; }
.acm-footer__links li + li { margin-top: .55rem; }
.acm-footer__links a { color: #c4cee9; text-decoration: none; font-size: .96rem; }
.acm-footer__links a:hover { color: #fff; text-decoration: underline; }

.acm-footer__bottom {
    padding-block: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.13);
    font-size: .86rem;
    color: #93a2ca;
    text-align: center;
}
.acm-footer__bottom a { color: var(--acm-gold-light); text-decoration: none; }
.acm-footer__bottom a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. Framework bridge
   Sections the theme does not override still render with framework markup.
   Give them the brand rather than mmCMS defaults.
   -------------------------------------------------------------------------- */
.section-title, .section-heading { font-family: var(--acm-font-head); color: var(--acm-navy); }
.btn, .button, .btn-primary {
    font-family: var(--acm-font-body);
    letter-spacing: .085em;
    text-transform: uppercase;
    border-radius: var(--acm-radius);
}

/* Framework's skip link, restyled to brand */
.skip-to-content {
    background: var(--acm-gold);
    color: #1d1a10;
    font-weight: 700;
}

/* The framework's no-sections fallback hero paints a dark ground. Our global
   h1 colour is navy, which is unreadable on it. Only bites if the homepage
   ever loses all its sections, but that is exactly when nobody is watching. */
.hero, .hero-content { color: #fff; }
.hero-content h1, .hero-content .subtitle { color: #fff; }

/* --------------------------------------------------------------------------
   16. Motion + print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .acm-btn:hover, .acm-card:hover, .acm-track:hover { transform: none; }
}

@media print {
    .acm-header, .acm-drawer, .acm-programs, .acm-footer, .acm-btn-group { display: none; }
    body { color: #000; font-size: 11pt; }
    a::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
}