/*! =============================================================
    spartanmanchester.com — custom.css
    Table of contents:
    1.  Bullet lists
    2.  h2/h3 heading alignment
    3.  Background / overlay
    4.  Leather banner
    5.  Tagline bar
    6.  Phone bar
    7.  Mobile bar (xs)
    8.  Privacy footer
    9.  Wide screen nav (768px+)
    10. Frosted glass nav panel
    11. Nav bar height
    12. Nav link opacity
    13. Dropdown fixes (sm/md)
    14. Content section padding
    15. Gallery grid
    16. Partner cards (services_duo)
    17. Machine images
    18. External link indicator
    19. Overlay pseudo-elements
    20. Styles moved from inline HTML
    21. xs (mobile) view
    22. xs dropdown menu
    23. CTA button (booking page)
    24. Accessibility — focus styles
    25. Print stylesheet
    26. Discretion & safety controls (Safe Escape + Discreet Mode)
    27. Palette custom properties + unified focus ring
    28. Atmospheric layer (candlelight / vignette / grain)
    29. Nav underline — animated hover
    30. Checkboxes & radios - native rendering, site-wide
    31. Enquiry-form styling - one home for the `.mailing-form` class
    32. Body-link colour inside light content cards
    ============================================================= */

/*! Place your custom styles here */

/* Content bullet lists */
.feature__body ul:not([class]) {
    list-style-type: disc;
    padding-left: 1.5em;
}


/* Remove max-width constraint on paragraphs following h4 headings */
.feature h4 + p {
    max-width: none;
}

/* Replace bg.png background image with a flat colour.
   Targets only the main content cover section, not the leather banner.
   The leather banner uses height-35 which distinguishes it from the
   main content section which uses cover-features. */
.cover.cover-features.imagebg .background-image-holder {
    background: none !important;
}
.cover.cover-features.imagebg .background-image-holder img {
    display: none !important;
}
.cover.cover-features.imagebg {
    background-color: #222222;
}

/* Red separator line between leather image and page background.
   Uses box-shadow rather than border-bottom because the theme's data-overlay
   pseudo-element sits above the border and washes out the colour.
   box-shadow renders outside the stacking context and is unaffected. */
.height-35.imagebg {
    box-shadow: 0 1px 0 0 rgba(180, 40, 40, 0.6);
    /* Trim the dead leather space below the logo/nav. Top padding is left as-is
       so the space above the logo is unchanged; only the bottom is reduced.
       Theme default is ~7.43em; lower this to taste. */
    padding-bottom: 5.5em;
}

/* Leather banner — override theme's default opacity:0 and display:none
   on .background-image-holder. The theme normally reveals these via JS
   after the image loads, but we force them visible directly in CSS so
   the leather texture always shows regardless of JS initialisation order. */
.height-35.imagebg .background-image-holder {
    opacity: 1 !important;
    background: none;
}
.height-35.imagebg .background-image-holder img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Phone number bar below the tagline bar on wide screen */
.spartan-phone-bar {
    background-color: #222222;
    text-align: center;
    padding: 4px 0 8px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}
.spartan-phone-bar a {
    display: inline-block;
    background-color: #111111;
    color: #cccccc;
    font-size: 1em;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(180, 40, 40, 0.6);
    text-underline-offset: 3px;
    letter-spacing: 1px;
    border-radius: 10px;
    border: 1px solid rgba(180, 40, 40, 0.6);
    padding: 4px 24px;
}
.spartan-phone-bar a:hover {
    color: #ffffff;
    text-decoration-color: rgb(180, 40, 40);
}

/* ── Wide screen nav styles (768px+) ────────────────────────────────────────
   All min-width: 768px nav rules consolidated into one block. */
@media all and (min-width: 768px) {

    /* Nav link colour, size and opacity */
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > a,
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > span {
        color: #cccccc;
        font-size: 1.26em;
    }
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > a:hover,
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > span:hover {
        color: #ffffff;
    }
    nav#menu1 .menu-horizontal > li:not(:hover) > a,
    nav#menu1 .menu-horizontal > li:not(:hover) > span {
        opacity: 0.75;
    }

    /* Hide old nav phone button */
    .bar__module .btn--primary {
        display: none;
    }

    /* Nav bar height */
    nav#menu1.bar--sm {
        padding-top: 0.36em;
        padding-bottom: 0.36em;
    }

    /* Nav row and column alignment */
    nav#menu1 .container > .row {
        display: flex;
        align-items: center;
    }
    nav#menu1 .col-md-3 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    nav#menu1 .bar__module img[alt="The Spartan logo"] {
        width: 169px;
        height: auto;
        display: block;
    }
    nav#menu1 .col-md-9 {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center !important;
    }
    nav#menu1 .col-md-9 .bar__module {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Convert menu-horizontal from inline-block to flex so that when
       links wrap to a second row, both rows are centred.
       The dropdown__container is position:absolute so it is unaffected.
       top:0 removes the theme's 6px nudge. */
    nav#menu1 .menu-horizontal {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        top: 0;
    }
    nav#menu1 .menu-horizontal > li {
        display: flex !important;
        align-items: center;
    }

    /* Services uses a bare <span> instead of <a> as the flex item.
       Setting it to inline-block matches the vertical alignment of
       the <a> elements used by all other nav links. */
    nav#menu1 .menu-horizontal > li > span.dropdown__trigger {
        display: inline-block;
        vertical-align: middle;
    }
}

/* ── Tagline bar ───────────────────────────────────────────────────────────── */
.spartan-tagline-bar {
    background-color: #222222;
    padding: 6px 0;
    text-align: center;
}
.spartan-tagline-bar .spartan-tagline-inner {
    display: inline-block;
    background-color: #111111;
    color: #cccccc;
    border-radius: 10px;
    border: 1px solid rgba(180, 40, 40, 0.6);
    padding: 4px 24px;
    font-size: 1.25em;
}
.spartan-tagline-bar p {
    margin: 0;
    color: #cccccc;
}

/* ── h1/h2 page titles centred in feature boxes ───────────────────────────── */
.feature__body h1,
.feature__body h2 {
    text-align: center;
}
/* New pages use a real <h1> as their title; size it to match the old <h2>
   titles so the switch is purely semantic/SEO with no visual change. */
.feature__body h1 {
    font-size: 2.35714286em;
    line-height: 1.36363636em;
    margin-bottom: 0.85em;
}
@media all and (max-width: 767px) {
    .feature__body h1 { font-size: 1.78571429em; line-height: 1.5em; }
}

/* ── Semantic heading upgrade, no visual change ───────────────────────────── */
/* Section headings across the site are real <h2> / <h3> elements (search and
   answer engines use h2 as the main section boundary), but they keep their old
   look by reusing the theme's existing .h3 / .h4 size classes, the same trick
   used just above to make the real h1 match the old h2 page titles.
   Only two differences are left to undo:
     1. the rule above centres every h2 in a feature box, but a section heading
        must stay left-aligned like the h3 it replaced;
     2. theme.css tightens the space under an h4 (.feature h4), which no longer
        applies once the element is an h2/h3 carrying the .h4 class. */
.feature__body h2.h3,
.feature__body h2.h4 { text-align: left; }
.feature__body h3.h4,
.feature__body h2.h4 { margin-bottom: 0.342105263157895em; }
/* The exception: a heading that deliberately opts back into centring (rates.php
   uses .text-center-custom for exactly that) must still win. */
.feature__body h2.h3.text-center-custom,
.feature__body h2.h4.text-center-custom { text-align: center; }

/* ── External link indicator ──────────────────────────────────────────────── */
/* Adds a small arrow after links that open in a new tab, so visitors know
   they will leave the site. Only applied to content links, not nav. */
.feature__body a[target="_blank"]::after {
    content: "\00a0\2197";
    font-size: 0.75em;
    vertical-align: super;
}

/* ── Partner cards (moved from services_duo.html inline style block) ───────── */

/* ── Partner card rows ─────────────────────────────── */

/* Flex container: columns sit side by side and are equal height */
.partner-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1.5em;
}

/* Each column takes up half the row and is itself a flex column
   so the card inside it can stretch to fill the full height */
.partner-col {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.partner-col:first-child { padding-right: 8px; }
.partner-col:last-child  { padding-left:  8px; }

/* Card stretches to fill its column height */
.partner-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
}

/* feature__body inside a partner card also stretches */
.partner-card .feature__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

/* ── Profile images ────────────────────────────────── */

/* Fixed-height box: all images appear at the same height.
   background:#ffffff matches the white card so any transparent
   or cropped areas around the image blend into the card surface,
   giving the impression of the subject sitting on the page. */
.partner-img-wrap {
    width: 100%;
    height: 280px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 1em;
}

/* object-fit:contain preserves the full aspect ratio —
   the image shrinks to fit, never stretches or crops */
.partner-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Text block below image grows to fill remaining card height,
   so shorter-text cards pad out to match their neighbour */
.partner-text { flex: 1; }

/* ── Mobile: stack cards full-width ────────────────── */
@media (max-width: 767px) {
    .partner-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        margin-bottom: 15px;
    }
    .partner-col:first-child { padding-right: 0; }
    .partner-col:last-child { padding-left: 0; margin-bottom: 0; }
}

/* Fix nav bar at tablet width (768px–991px).
   Two issues solved here:
   1. Bootstrap's hidden-sm hides the desktop nav — override to show it.
   2. The theme only applies bar--absolute (position:absolute) at min-width:991px,
      so at sm width the nav sits in document flow and pushes the leather image
      down rather than overlaying it. We extend absolute positioning to sm width
      so the nav overlays the leather banner correctly at all non-mobile widths. */
@media (min-width: 768px) and (max-width: 991px) {
    nav#menu1 {
        display: block !important;
        position: absolute;
        width: 100%;
        z-index: 99;
    }
}

/* ── Gallery image grids ───────────────────────────────────────────────────── */
/* Scoped to .feature__body to prevent bleeding into sidebar columns */

/* Three-column flex grid */
.feature__body .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    gap: 12px;
}

/* Each cell takes one third of the row minus the gaps */
.feature__body .gallery-cell {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fixed-height image container */
.feature__body .gallery-img-wrap {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.feature__body .gallery-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
    transition: opacity 0.2s ease;
}

.feature__body .gallery-img-wrap img:hover {
    opacity: 0.85;
}

/* Caption below each image */
.feature__body .gallery-caption {
    text-align: center;
    font-size: 0.85em;
    color: #555;
    margin-top: 6px;
    margin-bottom: 0;
}

/* Mobile: two columns */
@media (max-width: 767px) {
    .feature__body .gallery-cell {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
    .feature__body .gallery-img-wrap {
        height: 140px;
    }
}

/* Very narrow mobile: one column */
@media (max-width: 400px) {
    .feature__body .gallery-cell {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Dropdown and nav link fixes at tablet/sm width (768px–991px) ─────────── */
@media (min-width: 768px) and (max-width: 991px) {

    /* Widen the dropdown content column at sm width.
       col-md-2 has no effect below 992px so the dropdown falls back to
       a narrow default. This gives it enough room for the link text. */
    nav#menu1 .dropdown__content.col-md-2 {
        width: 220px;
        min-width: 220px;
    }
}

/* Widen dropdown at md width too — col-md-2 is too narrow for the link text */
@media (min-width: 992px) and (max-width: 1199px) {
    nav#menu1 .dropdown__content.col-md-2 {
        width: 220px;
        min-width: 220px;
    }

    /* Reduce nav link font size slightly at sm width so links stay
       on one line rather than wrapping to two or three rows */
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > a,
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > span {
        font-size: 1.0em;
        letter-spacing: 0;
    }
}


/* Nav font size — sm (768-991px) */
@media all and (min-width: 768px) and (max-width: 991px) {
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > a,
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > span {
        font-size: 0.9em;
    }
}

/* Nav font size — lg (1200px+) */
@media all and (min-width: 1200px) {
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > a,
    .bar--transparent:not(.pos-fixed) .menu-horizontal > li > span {
        font-size: 1.1em;
    }
}
/* ── Frosted glass effect on nav links only ───────────────────────────────── */
@media all and (min-width: 768px) {
    nav#menu1 .col-md-9 .bar__module:first-child {
        background-color: rgba(0, 0, 0, 0.5); /* fallback for no backdrop-filter support */
        border-radius: 10px;
        border: 1px solid rgba(180, 40, 40, 0.6);
        padding: 4px 12px;
    }
}
@supports (backdrop-filter: blur(6px)) {
    @media all and (min-width: 768px) {
        nav#menu1 .col-md-9 .bar__module:first-child {
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            background-color: rgba(0, 0, 0, 0.25);
        }
    }
}

/* Reduce gap between phone bar and first content box.
   The theme sets padding-top: 7.43em on all section elements, plus
   .cover-features .row:nth-child(2) adds margin-top: 11.14em on top.
   Both are halved here. */
section.cover-features {
    padding-top: 3.71em;
    padding-bottom: 3.71em;
}
.cover-features .row:nth-child(2) {
    margin-top: 5.57em;
}
@media all and (max-width: 767px) {
    section.cover-features {
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .cover-features .row:nth-child(2) {
        margin-top: 1.85em;
    }
}

/* Mobile WhatsApp/phone bar — match the pill box and red underline
   styling used in the wider spartan-phone-bar */
.spartan-mobile-bar {
    background-color: #222222;
    text-align: center;
    padding: 4px 0 8px 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}
.spartan-mobile-bar a {
    display: inline-block;
    background-color: #111111;
    color: #cccccc;
    font-size: 1em;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(180, 40, 40, 0.6);
    text-underline-offset: 3px;
    letter-spacing: 1px;
    border-radius: 10px;
    border: 1px solid rgba(180, 40, 40, 0.6);
    padding: 4px 24px;
}
.spartan-mobile-bar a:hover {
    color: #ffffff;
    text-decoration-color: rgb(180, 40, 40);
}

/* ── xs (mobile) view ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* 1. Hide leather banner at xs */
    .height-35.imagebg {
        display: none !important;
    }

    /* Dark background on the opened mobile nav menu */
    nav#menu1 {
        background-color: #222222;
    }

    /* Nav link colours in mobile menu */
    nav#menu1 .menu-horizontal > li > a,
    nav#menu1 .menu-horizontal > li > span,
    nav#menu1 .menu-vertical > li > a {
        color: #cccccc !important;
        opacity: 1 !important;
    }
    nav#menu1 .menu-horizontal > li > a:hover,
    nav#menu1 .menu-horizontal > li > span:hover {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    /* Frosted glass panel around the links.
       The col-md-9 column defaults to 100% width at xs, so we constrain
       it directly, then use padding on the row to create breathing room
       either side rather than touching the container. */
    /* Gap between logo and links box */
    nav#menu1 .col-md-3 .bar__module {
        margin-bottom: 8px;
    }

    /* Links column — constrained to 90% width and centred */
    nav#menu1 .col-md-9 {
        width: 90%;
        margin: 0 auto;
        float: none;
        padding-top: 8px;
        padding-bottom: 2px;
    }

    /* Frosted glass panel — scoped to the links column's bar__module only,
       not the logo column */
    nav#menu1 .col-md-9 .bar__module {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        border: 1px solid rgba(180, 40, 40, 0.6);
        padding: 8px 12px;
        margin: 0;
    }

    /* 2. Reorder elements visually using flex on main-container.
       Desired xs order: hamburger bar (in nav-container, unaffected)
       → tagline → mobile bar → content (phone bar hidden at xs anyway).
       The nav-container sits outside main-container so we use flex on
       main-container to reorder its children. */
    .main-container {
        display: flex;
        flex-direction: column;
    }

    /* Explicit order for every direct child of main-container.
       Order: tagline(1) → leather hidden(2) → mobile bar(3) → phone bar(4) → content(5) */
    .main-container .height-35 {
        order: 2;
    }
    .main-container .spartan-tagline-bar {
        order: 1;
    }
    .main-container .spartan-mobile-bar {
        order: 3;
    }
    .main-container .spartan-phone-bar {
        order: 4;
    }
    .main-container section.cover-features {
        order: 5;
    }

    /* 3. Constrain tagline bar width to 75% at xs */
    .spartan-tagline-bar {
        background-color: #222222;
        padding: 0 0 6px 0;
        text-align: center;
    }
    .spartan-tagline-inner {
        font-size: 1em;
        width: 75%;
        display: block;
        margin: 0 auto;
    }

    /* Mobile bar at xs — override visible-xs display:block to restore flex */
    div.spartan-mobile-bar.visible-xs {
        background-color: #222222;
        display: flex !important;
        justify-content: center;
        gap: 40px;
    }
    div.spartan-mobile-bar.visible-xs a {
        text-align: center;
        padding: 4px 20px;
    }
}

/* ── Styles moved from inline HTML ────────────────────────────────────────── */

/* 1. Privacy policy footer bar — matches phone bar pill style */
.spartan-privacy-footer {
    background-color: #222222;
    text-align: center;
    padding: 8px 0 10px 0;
}
.spartan-privacy-footer a {
    display: inline-block;
    background-color: #111111;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(180, 40, 40, 0.6);
    text-underline-offset: 3px;
    letter-spacing: 1px;
    border-radius: 10px;
    border: 1px solid rgba(180, 40, 40, 0.6);
    padding: 4px 24px;
    text-transform: uppercase;
}
.spartan-privacy-footer a:hover {
    color: #cccccc;
    text-decoration-color: rgb(180, 40, 40);
}

/* 3. feature__body full width — overrides theme max-width on all feature bodies */
.feature__body {
    width: 100%;
}

/* 4. Machine images — centred, responsive */
.spartan-machine-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 6. Small print text */
.spartan-small-print {
    font-size: 0.85em;
    color: #555;
}

/* 7. Centred h3 headings — applied via class to avoid affecting all h3s */
.text-center-custom {
    text-align: center;
}

/* 8. data-overlay replacement — shared base rule with individual opacity values */
.spartan-overlay-leather::before,
.spartan-overlay-content::before {
    position: absolute;
    content: '';
    background: #252525;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.spartan-overlay-leather::before { opacity: 0.1; }
.spartan-overlay-content::before { opacity: 0.2; }

/* ── xs dropdown menu styling ─────────────────────────────────────────────── */
/* Theme sets background:#ffffff on .dropdown__content:not([class*='bg-'])
   and color:#666666 on .menu-vertical a — both need !important to override */
@media (max-width: 767px) {

    /* Dark background on the dropdown content box */
    nav#menu1 .dropdown .dropdown__content {
        background: #222222 !important;
    }

    /* White link text in dropdown */
    nav#menu1 .dropdown .dropdown__content .menu-vertical a {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    nav#menu1 .dropdown .dropdown__content .menu-vertical a:hover {
        color: #cccccc !important;
    }
}

/* ── Click-to-load CTA button (booking page) ──────────────────────────────── */
.spartan-cta-btn {
    display: inline-block;
    background-color: #111111;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(180, 40, 40, 0.6);
    text-underline-offset: 3px;
    letter-spacing: 1px;
    border-radius: 10px;
    border: 1px solid rgba(180, 40, 40, 0.6);
    padding: 4px 24px;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
}
.spartan-cta-btn:hover {
    color: #cccccc;
    text-decoration-color: rgb(180, 40, 40);
}

/* ── CTA button wrapper (booking page) ────────────────────────────────────── */
.spartan-cta-wrapper {
    text-align: center;
    margin-top: 1em;
}

/* ── Accessibility: focus styles ──────────────────────────────────────────── */
/* Visible focus indicator for keyboard navigation */
a:focus,
button:focus {
    outline: 2px solid rgba(180, 40, 40, 0.6);
    outline-offset: 3px;
}

/* ── Print stylesheet ─────────────────────────────────────────────────────── */
@media print {
    .nav-container,
    .spartan-tagline-bar,
    .spartan-phone-bar,
    .spartan-mobile-bar,
    .spartan-privacy-footer,
    .col-sm-3,
    .back-to-top,
    .height-35 {
        display: none !important;
    }
    .col-sm-9 {
        width: 100% !important;
    }
    .feature.boxed {
        border: none !important;
        box-shadow: none !important;
    }
    body, .feature__body, p, li, td, th {
        color: #000 !important;
        background: #fff !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
    a[href^="#"]:after,
    a[href^="tel:"]:after,
    a[href^="mailto:"]:after {
        content: "";
    }
}

/* ── Underline headings and strong tags in content body ───────────────────── */
.feature__body h1,
.feature__body h2,
.feature__body h3,
.feature__body h4,
.feature__body h5,
.feature__body strong {
    text-decoration: underline;
    text-decoration-color: rgba(180, 40, 40, 0.6);
    text-underline-offset: 3px;
}

/* ── Ensure pages always fill the full viewport height ────────────────────── */
.main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-container section.cover {
    flex: 1;
}

/* ── Raise nav-container z-index so dropdown sits above page content ─────── */
.nav-container {
    z-index: 9999 !important;
    position: relative !important;
}
/* nav#menu1 already has position:absolute from .bar--absolute — do NOT add
   position:relative here as it would remove it from absolute flow and push
   the hero section down */

/* ── Fix dropdown positioning (neutralise Bootstrap container inside dropdown) */
nav#menu1 .dropdown .dropdown__container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: auto !important;
}
nav#menu1 .dropdown .dropdown__content {
    min-width: 180px !important;
    width: auto !important;
}

/* ── Restore pointer-events on dropdown ─────────────────────────────────────
   Theme sets pointer-events:none on .dropdown__container and restores it via:
   .dropdown--active > .container > .row > .dropdown__content
   We removed .container and .row, so we must restore pointer-events ourselves */
nav#menu1 .dropdown:hover > .dropdown__container,
nav#menu1 .dropdown.dropdown--active > .dropdown__container,
nav#menu1 .dropdown:focus-within > .dropdown__container,
nav#menu1 .dropdown:hover > .dropdown__container *,
nav#menu1 .dropdown.dropdown--active > .dropdown__container *,
nav#menu1 .dropdown:focus-within > .dropdown__container * {
    pointer-events: all !important;
}

/* ── Keyboard: the dropdown must OPEN on focus, not only on hover ────────────
   The menu opened on :hover and on a JS class, so the two nav dropdowns - and the
   16 pages behind them, including Rates, the Availability checker and the Directory -
   could not be reached at all without a mouse. :focus-within keeps them open while
   focus is anywhere inside, so Tab walks the menu naturally.
   Paired with the keyboard handlers at the end of js/scripts.js. */
nav#menu1 .dropdown:focus-within > .dropdown__container {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Underline nav links ───────────────────────────────────────────────────── */
nav#menu1 .menu-horizontal > li > a > span.dropdown__trigger,
nav#menu1 .menu-horizontal > li > span.dropdown__trigger {
    text-decoration: underline !important;
    text-decoration-color: rgba(180, 40, 40, 0.6) !important;
    text-underline-offset: 3px !important;
    -webkit-text-decoration-color: rgba(180, 40, 40, 0.6) !important;
    display: inline !important;
}

/* =============================================================
   26. Discretion & safety controls (Safe Escape + Discreet Mode)
   Fixed bottom-left so it clears the bottom-right back-to-top button.
   ============================================================= */
#spartan-safety {
    position: fixed;
    left: 14px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    gap: 6px;
    align-items: center;
}
.spartan-safety-btn {
    background: #111111;                        /* opaque — cleanly occludes text behind */
    color: #dcdcdc;
    /* WAS: 1px solid rgba(180,40,40,0.55). Composited over the page background (#1b1d20)
       that border painted as rgb(111,35,36) and measured 1.56:1, and the button's own fill
       (#111111) is only 1.12:1 against the page - so the whole control had no visible edge
       at all. WCAG 1.4.11 wants 3:1 for the boundary of a control.
       The FILL cannot carry it: 3:1 against #1b1d20 needs a relative luminance of 0.1365 or
       more, which is a mid grey, and this pill is deliberately near-black so it opaquely
       occludes whatever it sits over (the whole point of a discreet Exit control). So the
       BORDER carries it instead, at a lightened brand red: rgb(210,70,70) measures 3.79:1
       against the page background, and the pill still reads as brand red. The label inside
       (#dcdcdc on #111111) was never the problem - that is 13.77:1. */
    border: 1.5px solid rgb(210, 70, 70);
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);  /* lift it clear of the content behind */
    transition: color 0.2s ease, box-shadow 0.2s ease;
}
.spartan-safety-btn:hover,
.spartan-safety-btn:focus {
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(180, 40, 40, 0.25);
    /* NO `outline: none` here. It used to be, and it silently defeated the site's own
       focus ring: this selector is (0,2,0) and `button:focus-visible` in section 27 is
       (0,1,1), so the higher specificity won wherever the two met and the only thing left
       marking focus was that 0.25-alpha red glow - 1.17:1 against the page background.
       A keyboard user could not tell they had landed on the Exit control, which is the one
       control on the site somebody may need to find in a hurry and under stress. */
}
/* An explicit focus ring for the safety pill, rather than borrowing section 27's.
   Section 27's ring leans on a white box-shadow halo to carry contrast on the dark
   background, but this button sets its own box-shadow at (0,2,0) and would suppress it,
   leaving only the 2px red outline - 2.64:1 on #1b1d20, under the 3:1 minimum. A white
   outline measures 16.89:1 there, so the outline is what carries the contrast here and the
   red ring outside it is brand, not information.

   The `!important` is load-bearing, not laziness. theme.css line 1385 says

       button:focus { outline: none !important; }

   and an important declaration is beaten only by another important declaration, whatever
   the specificity - so without it this outline computes to `none` no matter how tightly it
   is selected. Verified in a browser: the white outline was in the parsed stylesheet, was
   matching the element, and still produced outline-style: none.

   And because relying on winning an important fight is a fragile way to guard the one
   control somebody may need under stress, the white ring is drawn a SECOND time as a
   box-shadow. That rule cannot touch box-shadow at all, so the indicator survives even if
   the outline is suppressed again by something nobody has noticed yet. */
.spartan-safety-btn:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45),
                0 0 0 3px #ffffff,
                0 0 0 6px rgba(180, 40, 40, 0.95);
}
/* box-shadow is ignored in Windows high-contrast mode, so the outline has to stand alone
   there - in the system's own highlight colour, which is guaranteed to contrast. */
@media (forced-colors: active) {
    .spartan-safety-btn:focus-visible {
        outline: 3px solid Highlight !important;
    }
}
.spartan-safety-btn.spartan-exit {
    text-transform: uppercase;
    padding: 7px 14px;
}
#spartan-discreet-toggle {
    font-size: 15px;
    padding: 6px 9px;
}
#spartan-discreet-toggle[aria-pressed="true"] {
    /* WAS: rgb(180,40,40). This rule uses an ID, so it out-specifies the border set above
       and quietly undid the 3:1 fix whenever discreet mode was switched ON - brand red is
       only 2.64:1 against the page background, and the pressed ring behind it composites to
       1.33:1, so in the pressed state the control lost its visible edge again. A brighter
       red measures 4.94:1, and being brighter than the resting rgb(210,70,70) (3.79:1) it
       still reads clearly as "this is on". */
    border-color: rgb(235, 90, 90);
    box-shadow: 0 0 0 2px rgba(235, 90, 90, 0.55);
}
@media print { #spartan-safety { display: none !important; } }
/* On phones (Bootstrap xs, ≤767px) these used to be hidden outright:
       @media (max-width: 767px) { #spartan-safety { display: none !important; } }
   The reason given was that the fixed buttons overlapped page content. That is a real
   nuisance, but hiding them was the wrong trade: Safe Escape and Discreet Mode exist for
   somebody who may need to leave the site quickly, and a phone is the device most of them
   are holding. The two features built for that person were absent on the only screen size
   that matters.
   So they stay, smaller, tucked lower into the corner, and with a real thumb target -
   min 44x44px, which is WCAG 2.5.5 / 2.5.8. The overlap is dealt with properly instead, by
   giving the page enough room at the foot that nothing ends up permanently underneath. */
@media (max-width: 767px) {
    #spartan-safety {
        left: 10px;
        bottom: 12px;
        gap: 8px;
    }
    .spartan-safety-btn {
        font-size: 12px;
        padding: 0 12px;
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #spartan-discreet-toggle {
        font-size: 17px;
        padding: 0 11px;
    }
    /* Room at the foot of every page so the last line of content is never stuck under the
       pill. It is position:fixed, so content scrolls beneath it; without this the very
       bottom of the page can never be read on a phone. */
    body { padding-bottom: 66px; }
}

/* =============================================================
   27. Palette custom properties + unified focus ring (craft-pack
   foundation). The vars mirror the hard-coded values in this file
   (design-system.md) so the palette becomes tunable in one place;
   existing literals are left as-is and can migrate over time.
   ============================================================= */
:root {
    --red:       rgb(180, 40, 40);        /* #b42828 brand accent */
    --red-soft:  rgba(180, 40, 40, 0.6);  /* borders / underlines */
    --red-faint: rgba(180, 40, 40, 0.25); /* focus / glow */
    --bg:        #111111;                  /* darkest (button bg) */
    --bg-2:      #252525;                  /* raised dark */
    --ink:       #ffffff;                  /* on-dark text */
    --card:      #f8f8f8;                  /* light cards / inputs */
}

/* Unified focus ring — a soft red glow, more visible than a thin outline
   (accessibility) and on-brand. Additive box-shadow; shape is preserved. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.spartan-cta-btn:focus-visible {
    /* WAS: outline:none plus a 0.25-alpha glow. Measured 1.50:1 against a white card and
       1.17:1 against the page background - WCAG 2.2 needs 3:1 for a focus indicator, so
       keyboard users effectively had none. A real outline is kept AND the glow, and the
       outline is what carries the contrast. outline-offset keeps it clear of the text.
       An outline is also not clipped by a parent overflow:hidden, which is what hid the
       booking accordions' focus entirely.

       ADDED 17/08/2026 - the `!important`, and it matters more than it looks. theme.css
       line 1385 says `button:focus { outline: none !important; }`, and an important
       declaration beats a non-important one no matter how specific the selector is. So on
       every <button> on the site this outline has always computed to `none`, and the note
       above about "the red outline carries the light one" was simply not true in practice:
       on a light card the only indicator left was the white halo, which measures 1.51:1
       against the #d2d2d2 card. Buttons on light cards have had no visible focus indicator
       at all. Found while checking the safety pill in a real browser - the rule was in the
       stylesheet, was matching, and still produced outline-style: none. */
    outline: 2px solid rgb(180,40,40) !important;
    outline-offset: 2px;
    /* Two-tone on purpose. The site has both white cards and a near-black background, and
       no single colour clears 3:1 on both: the red alone measures 6.41:1 on a white card but
       only 2.63:1 on the page background. The white halo carries the dark case (about 15:1),
       the red outline carries the light one. */
    box-shadow: 0 0 0 4px rgba(255,255,255,0.92);
}
/* Preserve a solid outline where box-shadow is ignored (high-contrast mode).
   `!important` for the same reason as above: without it, theme.css's important
   `button:focus { outline: none }` wins here too, and high-contrast mode is the one place
   with no box-shadow left to fall back on. */
@media (forced-colors: active) {
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible { outline: 2px solid !important; }
}
@media (prefers-reduced-motion: reduce) {
    .spartan-safety-btn { transition: none; }
}

/* =============================================================
   28. Atmospheric layer — candlelight glow, edge vignette, faint grain
   (craft pack). Two fixed, non-interactive overlays; they sit above page
   content but below the safety pill (z 99999). Tune the alphas here.
   ============================================================= */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90000;
    background:
        radial-gradient(135% 90% at 50% -12%, rgba(180, 40, 40, 0.10), rgba(180, 40, 40, 0) 55%),
        radial-gradient(100% 100% at 50% 42%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.32));
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90000;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

/* =============================================================
   29. Nav underline — animated hover (craft pack). Keeps the always-on
   resting red underline (brand signature); on hover it eases to solid red
   and lifts slightly. Motion only; disabled for reduced-motion.
   ============================================================= */
nav#menu1 .menu-horizontal > li > a > span.dropdown__trigger,
nav#menu1 .menu-horizontal > li > span.dropdown__trigger {
    transition: text-decoration-color 0.25s ease, text-underline-offset 0.25s ease;
}
nav#menu1 .menu-horizontal > li:hover > a > span.dropdown__trigger,
nav#menu1 .menu-horizontal > li:hover > span.dropdown__trigger {
    text-decoration-color: rgb(180, 40, 40) !important;
    -webkit-text-decoration-color: rgb(180, 40, 40) !important;
    text-underline-offset: 5px !important;
}
@media (prefers-reduced-motion: reduce) {
    nav#menu1 .menu-horizontal > li > a > span.dropdown__trigger,
    nav#menu1 .menu-horizontal > li > span.dropdown__trigger { transition: none; }
}

/* =============================================================
   30. Checkboxes & radios — native rendering, site-wide (permanent fix)

   ROOT CAUSE (recurring): theme.css has
       input[type], textarea, select { -webkit-appearance:none; padding:0.46em; border; }
   and `input[type]` ALSO matches type="checkbox" and type="radio". That strips
   their native tick/dot and pads them into wide boxes, so any checkbox/radio
   without a per-element patch looked broken — a wide box that fills blue when
   selected but shows no tick. It kept coming back because the old fix
   (.booking-checkbox) was opt-in per element, so every newly-added control
   re-broke.

   PERMANENT FIX: target the control TYPES directly (not a helper class) so
   EVERY checkbox and radio — current or future, class or not — renders as a
   small native control with a visible tick/dot. custom.css loads last, and
   these type selectors out-specify theme.css's `input[type]`, so they win.
   Only checkbox/radio are touched; text inputs, selects and textareas keep
   their theme styling. (No custom toggle-switch inputs exist on the site, so
   forcing native appearance here is safe.)
   ============================================================= */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    accent-color: rgb(180, 40, 40);   /* brand red tick/fill */
    width: auto !important;           /* never stretched by inherited width:100% */
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;            /* undo theme.css's 0.46em box inflation */
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    flex: 0 0 auto !important;        /* never grow/shrink inside a flex row */
    vertical-align: middle;
    cursor: pointer;
}

/* ── Gunmetal / brushed-steel content background — Option B ───────────────────
   Site-wide: every page's .main-container, public and member area alike. Steel
   spans the phone/WhatsApp bars + content as one continuous backdrop; the leather
   hero (opaque) covers it and stays as-is.
   To revert: delete this block. ────────────────────────────────────────────── */
/* ON THE BODY, not on .main-container.
   It used to sit on .main-container, and the header (logo and nav) and the footer (privacy
   and terms) are SIBLINGS of that element, not children - so the steel stopped dead at the
   top and bottom of the middle section and their own flat #222222 showed through. Worst at
   xs, where the opaque leather banner that used to hide the join is switched off, leaving a
   bare grey strip above and below.
   A background is only ever painted inside its own element's box, so background-attachment:
   fixed could not rescue it; the pattern has to be on an element that spans the whole page. */
body {
    background-color: #1b1d20;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(115deg, rgba(0,0,0,.14) 0 1px, transparent 1px 6px),
        radial-gradient(130% 90% at 28% 0%, rgba(255,255,255,.03), transparent 60%);
    background-attachment: fixed;
}
/* ...and the three regions must stop painting over it. */
.main-container { background: transparent; }
.nav-container,
nav#menu1,
.spartan-privacy-footer { background-color: transparent !important; }
.main-container .spartan-tagline-bar,
.main-container .spartan-mobile-bar,
.main-container .spartan-phone-bar { background-color: transparent !important; }
.main-container section.imagebg.spartan-overlay-content { background: transparent !important; }
.main-container section.imagebg.spartan-overlay-content::before { display: none !important; }
.main-container section.imagebg.spartan-overlay-content .background-image-holder { background: transparent !important; }
.main-container section.imagebg.spartan-overlay-content .background-image-holder img { opacity: 0 !important; }
/* Centre the phone/WhatsApp + tagline bars in the gap: push them down from the
   leather banner, and pull the first content box up closer beneath them.
   The two values are kept roughly equal so the bars stay centred in the gap. */
@media (min-width: 768px) {
    .main-container .spartan-tagline-bar { margin-top: 1em; }
    .main-container section.cover-features { padding-top: 0.9em; }
}

/* Accessibility: skip-to-content link — visually hidden until keyboard focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #141414; color: #fff; padding: 10px 18px; border-radius: 0 0 6px 0; text-decoration: none; }
/* The colour has to be restated for :focus, and that is not belt-and-braces.
   bootstrap.css has `a:focus { color: #23527c }`, which is (0,1,1) and so beats
   `.skip-link` at (0,1,0). Focus is the ONLY moment this link is ever on screen, so the one
   state that mattered was the one state that lost: it rendered dark blue on its own
   near-black background, measured 2.25:1, effectively unreadable. #ffffff on #141414 is
   18.42:1. Found by tabbing to it in a real browser - reading the CSS would not have shown
   it, because the rule that breaks it is in a different stylesheet and only applies while
   the element is focused. The white outline marks it as focused without leaning on the
   red ring, which is only 2.64:1 against this background. */
.skip-link:focus,
.skip-link:hover,
.skip-link:active {
    left: 0;
    color: #fff;
    background: #141414;
    outline: 2px solid #ffffff !important;
    outline-offset: -2px;
}

/* =============================================================
   31. Enquiry-form styling - ONE home for the `.mailing-form` class

   These rules used to live in an inline <style> block inside mailing-list.html, and
   only inside mailing-list.html. They existed as a workaround: theme.css has

       .imagebg:not(.image--light) label { color: #fff; }

   which paints every label white, on the assumption that a form inside an .imagebg
   section sits on the dark hero image. On this site it does not - the form sits inside
   a light content card - so the labels came out white on light grey.

   gangbangs.html then reused class="mailing-form" and inherited none of the workaround,
   because the workaround was in the other page's <head>. Measured on the live markup, its
   four labels were #ffffff on #d2d2d2 = 1.51:1 (4.5:1 required) and the three input
   borders were #ececec on #d2d2d2 = 1.28:1. The one page on the site whose entire job is
   to capture an enquiry had an all-but-invisible form on it.

   So the rules live here now, where both pages read them and the next page to reuse the
   class is covered without anybody remembering to copy a <style> block.

   Two things were also wrong in the original and are corrected rather than carried over:

   1. The border was rgba(180,40,40,0.4). Composited it measures 1.81:1 on the grey card
      and 1.97:1 on the input's own #f5f5f5 - both under the 3:1 that WCAG 1.4.11 wants
      for the boundary of a control, so the fields were hard to find even on the page the
      workaround was written for. Full-strength brand red is 4.24:1 and 5.88:1: same
      colour, no longer see-through.
   2. It carried `outline: none` on :focus. That is the same defect as the safety pill had
      in section 26 - (0,3,0) beats `input:focus-visible` (0,1,1), so the site's own focus
      ring never appeared on these fields. Dropped; section 27's ring now shows.

   The higher-specificity duplicates below are deliberate, and are why no !important is
   needed: theme.css's label rule is (0,2,1) and its input colour rule is (0,2,1), so a
   plain `.mailing-form label` at (0,1,1) would lose on specificity no matter that this
   file loads later.
   ============================================================= */
.mailing-form .form-group {
    margin-bottom: 1.2em;
}
.mailing-form label,
.bg--dark .mailing-form label,
.imagebg:not(.image--light) .mailing-form label {
    font-weight: 600;
    font-size: 0.9em;
    color: #252525;                 /* 10.14:1 on the #d2d2d2 card, 14.43:1 on #f8f8f8 */
    margin-bottom: 0.3em;
    display: block;
}
.mailing-form .form-control,
.bg--dark .mailing-form .form-control,
.imagebg:not(.image--light) .mailing-form .form-control {
    border: 1px solid rgb(180, 40, 40);   /* 4.24:1 on the card, 5.88:1 on the field */
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.95em;
    width: 100%;
    color: #252525;                 /* what the visitor types: 14.05:1 on #f5f5f5 */
    background-color: #f5f5f5;      /* an explicit surface, so the text has a known ground */
    transition: border-color 0.2s ease;
}
.mailing-form .form-control:focus {
    border-color: rgb(140, 24, 24);
    background-color: #ffffff;
}
.mailing-form .form-control::placeholder {
    color: #5c5c5c;                 /* 6.15:1 on #f5f5f5 - a hint, but a readable one */
    opacity: 1;                     /* Firefox dims placeholders by default */
}
.mailing-form .optional-note {
    font-size: 0.8em;
    color: #5c5c5c;
    margin-top: 0.2em;
}

/* =============================================================
   32. Body-link colour inside light content cards

   theme.css paints links #4a90e2 (line 4086), and for a card inside the hero section the
   rule that actually wins is

       .imagebg:not(.image--light) .feature.bg--white a:not(.btn)

   Every content card on the site is that shape, and theme.css also redefines .bg--white as
   #d2d2d2 rather than white. Measured: #4a90e2 on #d2d2d2 = 2.18:1, against a 4.5:1
   requirement. It is not a corner case - 13 links on the duo page alone, 353 unclassed
   links inside content cards across the site, every public page and every members page.

   #1a5490 measures 5.12:1 on #d2d2d2 and 7.28:1 on the #f8f8f8 cards, so that is the
   resting colour, with a darker hover for a visible state change (7.61:1).

   The underline is not decoration, it is required. WCAG 1.4.1 says a link identified only
   by colour needs 3:1 against the surrounding text. #4a90e2 managed that against the
   #000000 body text (6.38:1); #1a5490 does not (2.72:1). Darkening the colour without
   adding a second cue would have fixed one criterion by breaking another. Links that
   already carry an inline underline are unchanged in appearance.

   `:not([class])` rather than a list of exclusions: every link in these cards that carries
   a class is a button (.spartan-cta-btn, .member-menu-card, .stat-link, .reply-btn,
   .review-link, .wl-btn-2) with its own colour, and none of them should be underlined.
   Naming the classes to exclude would be an allowlist by omission - the next button class
   somebody adds would silently get body-link styling. This way it cannot.
   ============================================================= */
.bg--white a:not([class]),
.imagebg:not(.image--light) .feature.bg--white a:not([class]) {
    color: #1a5490;
    text-decoration: underline;
    text-decoration-color: rgba(180, 40, 40, 0.6);
    text-underline-offset: 3px;
}
.bg--white a:not([class]):hover,
.bg--white a:not([class]):focus,
.imagebg:not(.image--light) .feature.bg--white a:not([class]):hover,
.imagebg:not(.image--light) .feature.bg--white a:not([class]):focus {
    color: #0f3a68;                          /* 7.61:1 on #d2d2d2 */
    text-decoration-color: rgb(180, 40, 40);
}

/* The duo page's partner cards are a separate case and need a darker link still.
   They are `.boxed` panels nested INSIDE a light card, and theme.css line 5473 washes any
   nested .boxed with rgba(20,20,20,0.3) on the assumption it is sitting on the dark hero
   image. Over the #d2d2d2 card that composites to a muddy #999999, on which the theme's
   #4a90e2 measured 1.16:1 - the worst link contrast on the site, and invisible unless you
   composite the alpha, which is why a spot check of the raw background colour misses it.
   #1a5490 only reaches 2.72:1 there, so these get #0d3057 (4.67:1) and a darker hover
   (5.75:1). Both are underlined by the rule above, which they must be: against the panel's
   black body text #0d3057 is 1.58:1, so colour alone could not identify them.
   Surveyed the whole tree first: .partner-card is the only place on the site where a
   nested panel sits inside a light card, so this is scoped rather than general. */
.imagebg:not(.image--light) .feature.bg--white .partner-card a:not([class]) {
    color: #0d3057;
}
.imagebg:not(.image--light) .feature.bg--white .partner-card a:not([class]):hover,
.imagebg:not(.image--light) .feature.bg--white .partner-card a:not([class]):focus {
    color: #08203c;
}

/* ── A question in an accordion is a real heading ────────────────────────────
 *
 * The theme writes accordion titles as <span class="h5">, so the FAQ and the activities
 * directory had questions that were not headings at all. Answer engines cut a page into
 * passages at an h2, so a page made entirely of questions offered them nowhere to cut.
 *
 * ⚠ THIS IS WHY THE SPAN WAS THERE IN THE FIRST PLACE: the theme sets h2 to 2.36em and
 * CENTRES it, so an <h2> dropped into an accordion title comes out as a huge centred banner.
 * The fix is never to avoid the tag - it is to keep the tag and take the size from the .h5
 * class, which is what these three declarations do. font-size is deliberately NOT set here:
 * .h5 is a class and beats the bare h2 element selector on its own.
 */
.accordion .accordion__title h2,
.accordion .accordion__title h3 {
    display: inline-block;   /* matches the span rule, so the +/- marker stays on the line */
    margin: 0;
    text-align: left;        /* beats h2's text-align:center - specificity 0,0,2,1 */
}

/* ── "Link" - copy the address of one question ───────────────────────────────
 * Sits inside the title, which is itself a click-to-open control, so its click is stopped
 * from reaching the accordion in scripts.js. Muted until hovered: it is a tool for Craig,
 * not something a visitor needs to notice.
 */
.accordion .accordion__title .faq-anchor {
    margin-left: 0.7em;
    padding: 0.15em 0.55em;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    background: transparent;
    color: #8a8a8a;
    font-size: 0.62em;
    line-height: 1.7;
    letter-spacing: 0.04em;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
}
.accordion .accordion__title .faq-anchor:hover,
.accordion .accordion__title .faq-anchor:focus {
    color: #252525;
    border-color: #8a8a8a;
    background: #f4f4f4;
}