/**
 * The site's own header and footer.
 *
 * The version in this FILENAME is the cache busting. Write to a new number and change
 * SE_Chrome::STYLE; never overwrite this file in place.
 *
 * Every value here was measured off the RENDERED live footer, not read out of Elementor's stored
 * settings. The two deliberate differences from the live footer are explained in
 * templates/chrome/footer.php.
 *
 * WHY EVERY SELECTOR CARRIES `.se-chrome.se-chrome-footer`, which looks like belt and braces and is
 * not. Both classes are on the same <footer>, so the compound scores 0,2,0 and a descendant rule
 * scores 0,2,1. v1 of this file used one class and lost two visible fights to CSS already on the
 * page:
 *
 *   - the legal links came out orange-brown, because Elementor's global kit ships
 *     `.elementor-kit-8929 a { color: #b86410 }` at 0,2,1 and beat `.se-foot-legal-list a` at 0,1,1;
 *   - the bottom bar was 41px too tall, because something on the page sets a logical
 *     `margin-block-end` on paragraphs, and a later logical longhand beats an earlier `margin: 0`
 *     shorthand at equal specificity.
 *
 * A single class is not enough on a page that still has Elementor's kit on it, and this whole
 * exercise exists to be run alongside that kit for a while yet. Raising the scope by one class beats
 * the kit outright and needs no !important, which would only move the fight somewhere worse. When
 * Elementor is finally gone this can come back down; until then, do not add a rule here with a
 * shallower scope than its neighbours.
 */

/* Assistant, the site's body face. Elementor serves it today from its own locally hosted Google
   Fonts, so the chrome would lose its typeface the moment Elementor is switched off, which is the
   whole point of this work. Our own copy lives in the plugin: one variable woff2, latin only,
   covering every weight the chrome uses. */
/* Raleway, the site's heading face on the plain pages. Same reasoning as Assistant below: Elementor
   serves it today from its own locally hosted Google Fonts, and the pages we take off Elementor still
   need to look the same afterwards. One variable woff2, latin only, 48 KB, every normal weight. */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/raleway-latin-variable.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: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(fonts/assistant-latin-variable.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;
}

.se-chrome.se-chrome-footer {
    --se-ink: #333333;
    --se-legal-ink: #232323;
    --se-orange: #e4770a;
    --se-bar: #d56a2a;
    --se-whatsapp: #25d366;
    --se-font: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    box-sizing: border-box;
    background: #ffffff;
    color: var(--se-ink);
    font-family: var(--se-font);
}

.se-chrome.se-chrome-footer *,
.se-chrome.se-chrome-footer *::before,
.se-chrome.se-chrome-footer *::after {
    box-sizing: inherit;
}

/* Paragraph margins are set explicitly below, so start from nothing. `margin` alone lost to a
   logical `margin-block-end` in v1; naming both longhand axes settles it. */
.se-chrome.se-chrome-footer p {
    margin: 0;
    margin-block: 0;
}

/* Elementor's global kit rounds EVERY image on the site by 20px (`.elementor-kit-8929 img`). On the
   lotus, which is already a circle, you cannot see it. On the wordmark, which is 114 x 21, a 20px
   radius rounds the ends clean off, and it reads as a logo that has been cropped. David spotted it
   and correctly guessed it was a global setting rather than anything in the footer.
   Worth remembering when the header lands: the same rule is waiting for the header logo. */
.se-chrome.se-chrome-footer img {
    border-radius: 0;
}

.se-chrome.se-chrome-footer .se-foot-main {
    padding: 55px 0 40px;
}

.se-chrome.se-chrome-footer .se-foot-main > .se-foot-inner {
    /* 1340 is the site's content width, matching SE_Chrome::CONTENT_WIDTH. It is not a guess: on the
       live site at a 1600px window the header container, the footer container and the page content
       all start at x=130 and are 1340 wide. v1 to v4 of this used 1280, which lines up at exactly
       1280px wide and nowhere else, and David spotted the footer not agreeing with the header above
       it. If this number changes, change the constant, not this line. */
    /* Identical to the header's inner box, which is the whole point: width rather than max-width
       plus padding, so at wide windows the blurb starts exactly on the content edge where the logo
       above it starts, and below 1388 there is still 24px of air either side. */
    width: min(1340px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
}

.se-chrome.se-chrome-footer .se-foot-col {
    min-width: 0;
}

/* The blurb ------------------------------------------------------------- */

.se-chrome.se-chrome-footer .se-foot-about {
    font-size: 14px;
    line-height: 21px;
}

.se-chrome.se-chrome-footer .se-foot-about p + p {
    margin-top: 14px;
}

/* Lotus, wordmark and the social row ----------------------------------- */

.se-chrome.se-chrome-footer .se-foot-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}

.se-chrome.se-chrome-footer .se-foot-lotus {
    width: 57px;
    height: auto;
}

.se-chrome.se-chrome-footer .se-foot-wordmark {
    width: 114px;
    height: auto;
}

.se-chrome.se-chrome-footer .se-foot-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* 3px, not the live footer's 17px. The marks keep the live 47px pitch, but each one now sits in
       a 44px tappable box instead of a 29px one, and the gap absorbs the difference. */
    gap: 3px;
}

.se-chrome.se-chrome-footer .se-foot-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--se-orange);
    text-decoration: none;
}

.se-chrome.se-chrome-footer .se-foot-social svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.se-chrome.se-chrome-footer .se-foot-social a:hover,
.se-chrome.se-chrome-footer .se-foot-social a:focus-visible {
    color: var(--se-bar);
}

/* Trustindex's review badge, under the social row -------------------- */

.se-chrome.se-chrome-footer .se-foot-reviews {
    /* The widget arrives with its own centred layout, so this only has to give it room and stop it
       stretching the flex column. min-height reserves the space it will take, so the footer does not
       jump when the script resolves. */
    min-height: 24px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* The legal links ------------------------------------------------------ */

.se-chrome.se-chrome-footer .se-foot-legal {
    text-align: right;
}

.se-chrome.se-chrome-footer .se-foot-legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.se-chrome.se-chrome-footer .se-foot-legal-list a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--se-legal-ink);
    text-decoration: none;
}

.se-chrome.se-chrome-footer .se-foot-legal-list a:hover,
.se-chrome.se-chrome-footer .se-foot-legal-list a:focus-visible {
    color: var(--se-orange);
    text-decoration: underline;
}

/* The bottom bar ------------------------------------------------------- */

.se-chrome.se-chrome-footer .se-foot-bar {
    background: var(--se-bar);
    color: #ffffff;
    padding: 10px 0 14px;
}

.se-chrome.se-chrome-footer .se-foot-bar > .se-foot-inner {
    width: min(1340px, calc(100% - 48px));
    margin: 0 auto;
    text-align: center;
}

.se-chrome.se-chrome-footer .se-foot-copy {
    font-size: 15px;
    line-height: 28.5px;
}

.se-chrome.se-chrome-footer .se-foot-credit {
    /* The live site sets this one line in Sarala. Not worth a second font family; see footer.php. */
    font-size: 12px;
    line-height: 18px;
}

.se-chrome.se-chrome-footer .se-foot-credit a {
    color: #ffffff;
}

/* The floating WhatsApp button ----------------------------------------- */

.se-chrome.se-chrome-footer .se-whatsapp {
    position: fixed;
    right: 13px;
    bottom: 11px;
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 15px;
    min-height: 44px;
    border-radius: 20px;
    background: var(--se-whatsapp);
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 18px;
    line-height: 27px;
    text-decoration: none;
}

.se-chrome.se-chrome-footer .se-whatsapp svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    flex: none;
}

.se-chrome.se-chrome-footer .se-whatsapp:hover,
.se-chrome.se-chrome-footer .se-whatsapp:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

/* Keyboard focus, which the Elementor footer has none of ---------------- */

.se-chrome.se-chrome-footer a:focus-visible {
    outline: 2px solid var(--se-orange);
    outline-offset: 2px;
}

.se-chrome.se-chrome-footer .se-foot-bar a:focus-visible,
.se-chrome.se-chrome-footer .se-whatsapp:focus-visible {
    outline-color: #ffffff;
}

/* ------------------------------------------------------------ narrower */

@media (max-width: 1024px) {
    .se-chrome.se-chrome-footer .se-foot-main > .se-foot-inner {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .se-chrome.se-chrome-footer .se-foot-main {
        padding: 34px 0 30px;
    }

    .se-chrome.se-chrome-footer .se-foot-main > .se-foot-inner {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* The live footer reverses its columns on a phone, so the legal links come first and the blurb
       last. Kept, because that order is what a returning visitor is used to scrolling to. */
    .se-chrome.se-chrome-footer .se-foot-legal {
        order: 1;
        text-align: center;
    }

    .se-chrome.se-chrome-footer .se-foot-brand {
        order: 2;
    }

    .se-chrome.se-chrome-footer .se-foot-about {
        order: 3;
        text-align: center;
    }

    /* The WhatsApp button loses its label on a phone. 197px by 44 pinned across the bottom right
       covers real content on the library and the event pages, which is David's report, and the live
       site does the same thing. So this is a change rather than a port, and it is his decision, not
       one smuggled in: the icon alone in a 52px circle, with the label kept as the link's accessible
       name so it still announces itself as "Chat on WhatsApp". */
    .se-chrome.se-chrome-footer .se-whatsapp {
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .se-chrome.se-chrome-footer .se-whatsapp span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .se-chrome.se-chrome-footer .se-whatsapp svg {
        width: 26px;
        height: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .se-chrome.se-chrome-footer * {
        transition: none !important;
        animation: none !important;
    }
}

/* ======================================================================= header
 *
 * Same scoping rule as the footer above, and for the same reason: two classes on the one element, so
 * a descendant rule scores 0,2,1 and beats Elementor's global kit. Do not add a shallower rule.
 *
 * Measured off the live header: top bar 52px on #d56a2a, main bar 80px on white, logo 192px, menu
 * items acumin-pro 13px #242424 with 11px/14px padding and 4px between, dropdowns white with a 1px
 * #333 border, 10px radius, 18px below the bar. The content width is the same 1340 the footer uses,
 * which is what makes the two line up.
 */

.se-chrome.se-chrome-header {
    --se-ink: #242424;
    --se-bar: #d56a2a;
    --se-orange: #c46a26;
    --se-orange-dark: #a2551d;
    --se-border: #333333;
    /* The knock-out colour for the solid Instagram mark: on the top bar it sits on orange. */
    --se-knock: #d56a2a;
    --se-font: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --se-nav-font: 'acumin-pro', 'Assistant', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

    box-sizing: border-box;
    position: relative;
    z-index: 100;
    background: #ffffff;
    font-family: var(--se-font);
    color: var(--se-ink);
}

.se-chrome.se-chrome-header *,
.se-chrome.se-chrome-header *::before,
.se-chrome.se-chrome-header *::after {
    box-sizing: inherit;
}

.se-chrome.se-chrome-header .se-sr,
.se-chrome.se-login .se-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The one shared inner box. Identical to the footer's, deliberately: it is what makes the header,
   the footer and the page content all start at the same x. width rather than max-width + padding, so
   that at wide windows the logo sits exactly on the content edge instead of 24px inside it. */
.se-chrome.se-chrome-header .se-head-inner {
    width: min(1340px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------------------------------------------------------------- top bar */

.se-chrome.se-chrome-header .se-head-top {
    background: var(--se-bar);
    color: #ffffff;
    /* 34px, which is what the live bar measures. v7 had 52 because I read the height off the wrong
       element, and the bar came out half again as thick as the one it was replacing. David spotted it
       against a screenshot. Measure the two children of the header, not the first div that matches. */
    min-height: 34px;
    display: flex;
    align-items: center;
}

.se-chrome.se-chrome-header .se-head-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}

.se-chrome.se-chrome-header .se-head-social a {
    display: grid;
    place-items: center;
    /* Inside a 34px bar these cannot be 44px boxes. 34 tall and 30 wide is as much target as the bar
       has to give, and the bar's height is the thing being matched. */
    width: 30px;
    height: 34px;
    color: #ffffff;
    text-decoration: none;
}

.se-chrome.se-chrome-header .se-head-social svg,
.se-chrome.se-chrome-header .se-head-social img {
    width: 16px;
    height: 16px;
    fill: currentColor;
    /* Elementor's kit rounds every image; these are 16px, so a 20px radius would erase them. */
    border-radius: 0;
}

.se-chrome.se-chrome-header .se-head-account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.se-chrome.se-chrome-header .se-head-acct-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 13px is the live size, and the padding is what the 34px bar allows: the live row is 20px tall,
       so this is still more target than the header being replaced, but it is not the 44px I would
       want. The bar's height is what David is comparing, and it wins. */
    padding: 8px 0;
    background: none;
    border: 0;
    font-family: var(--se-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.se-chrome.se-chrome-header .se-head-acct-link:hover,
.se-chrome.se-chrome-header .se-head-acct-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.se-chrome.se-chrome-header .se-head-acct-link .se-i {
    width: 16px;
    height: 16px;
    flex: none;
}

/* --------------------------------------------------------------- main bar */

.se-chrome.se-chrome-header .se-head-main {
    background: #ffffff;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.se-chrome.se-chrome-header .se-head-logo {
    display: block;
    flex: none;
    line-height: 0;
}

.se-chrome.se-chrome-header .se-head-logo img {
    width: 192px;
    height: auto;
    /* Elementor's kit rounds every image by 20px, which on a 37px-tall logo shaves its corners. The
       footer wordmark was the visible casualty; this is the same rule getting in first. */
    border-radius: 0;
}

.se-chrome.se-chrome-header .se-head-nav {
    margin-left: auto;
}

.se-chrome.se-chrome-header .se-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.se-chrome.se-chrome-header .se-nav-list > li {
    position: relative;
    list-style: none;
    margin: 0;
}

.se-chrome.se-chrome-header .se-nav-list > li > a {
    display: block;
    padding: 11px 14px;
    font-family: var(--se-nav-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 1.4;
    color: var(--se-ink);
    text-decoration: none;
    white-space: nowrap;
}

.se-chrome.se-chrome-header .se-nav-list > li > a:hover,
.se-chrome.se-chrome-header .se-nav-list > li.se-open > a {
    color: var(--se-orange-dark);
}

/* The caret button, which the script adds to any item that has children. It is a real button so the
   menu works by keyboard and on a touch screen wide enough to still be showing this bar. */
.se-chrome.se-chrome-header .se-nav-caret {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 18px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--se-ink);
    cursor: pointer;
}

.se-chrome.se-chrome-header .se-nav-caret svg {
    width: 11px;
    height: 11px;
    display: block;
    margin: 0 auto;
}

.se-chrome.se-chrome-header .se-has-sub > a {
    padding-right: 22px;
}

/* Dropdowns. Hover and focus-within do the work so the menu still opens with no JavaScript at all;
   the .se-open class is the click and keyboard path on top of that. */
.se-chrome.se-chrome-header .se-nav-list ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 240px;
    max-width: 330px;
    margin: 18px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--se-border);
    border-radius: 10px;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease;
}

/* The gap between an item and its dropdown is 18px of nothing, and a mouse crossing it would close
   the menu it is on its way to. This bridges it without moving the panel. */
.se-chrome.se-chrome-header .se-nav-list > li::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    display: none;
}

.se-chrome.se-chrome-header .se-nav-list > li:hover::after {
    display: block;
}

.se-chrome.se-chrome-header .se-nav-list li:hover > ul,
.se-chrome.se-chrome-header .se-nav-list li:focus-within > ul,
.se-chrome.se-chrome-header .se-nav-list li.se-open > ul {
    opacity: 1;
    visibility: visible;
}

.se-chrome.se-chrome-header .se-nav-list ul li {
    position: relative;
    list-style: none;
    margin: 0;
}

.se-chrome.se-chrome-header .se-nav-list ul a {
    display: block;
    padding: 9px 16px;
    font-family: var(--se-nav-font);
    font-size: 13px;
    line-height: 1.45;
    color: var(--se-ink);
    text-decoration: none;
}

.se-chrome.se-chrome-header .se-nav-list ul a:hover,
.se-chrome.se-chrome-header .se-nav-list ul a:focus-visible {
    background: var(--se-bar);
    color: #ffffff;
}

/* A third level opens to the side of its parent, not below it. */
.se-chrome.se-chrome-header .se-nav-list ul ul {
    top: -6px;
    left: 100%;
    margin: 0 0 0 2px;
}

.se-chrome.se-chrome-header .se-nav-list ul .se-nav-caret {
    right: 4px;
    transform: translateY(-50%) rotate(-90deg);
}

/* ------------------------------------------------------- the calendar link
 * The live header has a 22px unlabelled glyph here and a member told David he could not find it. It
 * is also invisible on every rebuild page, because the glyph is Modern Events Calendar's icon font
 * and the asset diet strips MEC. Ours is inline, and it says what it is.
 */
.se-chrome.se-chrome-header .se-head-cal {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--se-ink);
    text-decoration: none;
    white-space: nowrap;
}

.se-chrome.se-chrome-header .se-head-cal .se-i {
    width: 21px;
    height: 21px;
    flex: none;
}

.se-chrome.se-chrome-header .se-head-cal:hover,
.se-chrome.se-chrome-header .se-head-cal:focus-visible {
    background: #fbeee0;
    color: var(--se-orange-dark);
}

/* ------------------------------------------------------------- hamburger */

.se-chrome.se-chrome-header .se-head-toggle {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #2e2e2e;
    cursor: pointer;
}

.se-chrome.se-chrome-header .se-head-toggle-bars,
.se-chrome.se-chrome-header .se-head-toggle-bars::before,
.se-chrome.se-chrome-header .se-head-toggle-bars::after {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    border-radius: 2px;
}

.se-chrome.se-chrome-header .se-head-toggle-bars {
    position: relative;
}

.se-chrome.se-chrome-header .se-head-toggle-bars::before,
.se-chrome.se-chrome-header .se-head-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.se-chrome.se-chrome-header .se-head-toggle-bars::before { top: -7px; }
.se-chrome.se-chrome-header .se-head-toggle-bars::after { top: 7px; }

.se-chrome.se-chrome-header .se-head-toggle[aria-expanded="true"] .se-head-toggle-bars {
    background: transparent;
}

.se-chrome.se-chrome-header .se-head-toggle[aria-expanded="true"] .se-head-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.se-chrome.se-chrome-header .se-head-toggle[aria-expanded="true"] .se-head-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- drawer */

.se-chrome.se-chrome-header .se-head-drawer {
    border-top: 1px solid #e4ddd6;
    background: #ffffff;
    padding: 8px 0 20px;
    max-height: calc(100vh - 114px); /* the header's own height, now the bar is 34 not 52 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.se-chrome.se-chrome-header .se-head-drawer[hidden] {
    display: none;
}

.se-chrome.se-chrome-header .se-drawer-list,
.se-chrome.se-chrome-header .se-drawer-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(1340px, calc(100% - 48px));
    margin-inline: auto;
}

.se-chrome.se-chrome-header .se-drawer-list li {
    position: relative;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid #f0eee9;
}

.se-chrome.se-chrome-header .se-drawer-list a {
    display: block;
    /* Right padding leaves room for the accordion control, so the two never overlap. */
    padding: 13px 52px 13px 0;
    font-family: var(--se-nav-font);
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--se-ink);
    text-decoration: none;
}

.se-chrome.se-chrome-header .se-drawer-list ul {
    width: auto;
    padding-left: 16px;
}

.se-chrome.se-chrome-header .se-drawer-list ul a {
    font-size: 14.5px;
    color: #5f564f;
}

.se-chrome.se-chrome-header .se-drawer-list ul[hidden] {
    display: none;
}

.se-chrome.se-chrome-header .se-sub-toggle {
    position: absolute;
    top: 2px;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--se-ink);
    cursor: pointer;
}

.se-chrome.se-chrome-header .se-sub-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
    transition: transform .16s ease;
}

.se-chrome.se-chrome-header .se-sub-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.se-chrome.se-chrome-header .se-drawer-cal {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(1340px, calc(100% - 48px));
    margin: 16px auto 0;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 24px;
    background: #fbeee0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--se-orange-dark);
    text-decoration: none;
}

.se-chrome.se-chrome-header .se-drawer-cal .se-i {
    width: 21px;
    height: 21px;
    flex: none;
}

.se-chrome.se-chrome-header a:focus-visible,
.se-chrome.se-chrome-header button:focus-visible {
    outline: 2px solid var(--se-orange-dark);
    outline-offset: 2px;
}

.se-chrome.se-chrome-header .se-head-top a:focus-visible,
.se-chrome.se-chrome-header .se-head-top button:focus-visible {
    outline-color: #ffffff;
}

/* --------------------------------------------------- header, small screens */

@media (max-width: 1024px) {
    /* The live header hides the social row on tablet and phone. Kept. */
    .se-chrome.se-chrome-header .se-head-social {
        display: none;
    }

    .se-chrome.se-chrome-header .se-head-account {
        margin: 0 auto;
        gap: 22px;
    }

    .se-chrome.se-chrome-header .se-head-nav {
        display: none;
    }

    .se-chrome.se-chrome-header .se-head-toggle {
        display: block;
    }

    .se-chrome.se-chrome-header .se-head-cal {
        margin-left: auto;
    }

    .se-chrome.se-chrome-header .se-head-logo img {
        width: 168px;
    }
}

@media (max-width: 600px) {
    .se-chrome.se-chrome-header .se-head-logo img {
        width: 148px;
    }

    /* Under the word, the icon on its own: at this width the label pushes the hamburger off the bar.
       The link keeps its accessible name from the icon's own title in the drawer, and the drawer
       carries a full-width labelled calendar row, which is the point David was making. */
    .se-chrome.se-chrome-header .se-head-cal span {
        display: none;
    }

    .se-chrome.se-chrome-header .se-head-cal {
        padding: 0 8px;
    }
}

/* When the drawer or the modal is open the page behind must not scroll under it. */
.se-drawer-open,
.se-modal-open {
    overflow: hidden;
}

/* ================================================================ sign-in modal
 *
 * In the Practice Library's visual language rather than the header's: Mulish, the library's cream and
 * orange, a 16px radius. It is the same act as signing in inside the library or a booking, so it
 * should look like that and not like a WordPress form.
 */

.se-chrome.se-login {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Mulish', 'Assistant', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.se-chrome.se-login[hidden] {
    display: none;
}

.se-chrome.se-login .se-login-veil {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 27, 0.55);
}

.se-chrome.se-login .se-login-card {
    position: relative;
    width: 100%;
    max-width: 408px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px 28px 26px;
    background: #ffffff;
    border: 1px solid #e3e0d8;
    border-radius: 16px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.se-chrome.se-login .se-login-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #948d80;
    cursor: pointer;
}

.se-chrome.se-login .se-login-x svg {
    width: 18px;
    height: 18px;
    display: block;
    margin: 0 auto;
}

.se-chrome.se-login .se-login-x:hover {
    color: #33312e;
}

.se-chrome.se-login .se-login-mark {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    display: block;
    border-radius: 0;
}

.se-chrome.se-login h2 {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #33312e;
}

.se-chrome.se-login .se-login-sub {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #615c53;
}

.se-chrome.se-login .se-login-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.se-chrome.se-login label {
    font-size: 13px;
    font-weight: 700;
    color: #33312e;
}

.se-chrome.se-login input {
    width: 100%;
    /* 46px, not the theme's input height: a form somebody meets on a phone in a modal. */
    min-height: 46px;
    margin: 0 0 8px;
    padding: 0 13px;
    background: #faf8f4;
    border: 1px solid #e3e0d8;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15.5px;
    color: #33312e;
}

.se-chrome.se-login input:focus {
    outline: 2px solid #c46a26;
    outline-offset: 1px;
    background: #ffffff;
}

.se-chrome.se-login .se-login-error {
    margin: 2px 0 8px;
    padding: 9px 12px;
    background: #fdeceb;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #8f2f24;
}

.se-chrome.se-login .se-login-error[hidden] {
    display: none;
}

.se-chrome.se-login .se-login-go {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    padding: 0 18px;
    background: #c46a26;
    border: 0;
    border-radius: 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
}

.se-chrome.se-login .se-login-go:hover:not(:disabled) {
    background: #a2551d;
}

.se-chrome.se-login .se-login-go:disabled {
    opacity: 0.65;
    cursor: default;
}

.se-chrome.se-login .se-login-links {
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #615c53;
}

.se-chrome.se-login .se-login-links a {
    color: #a2551d;
    text-decoration: underline;
}

.se-chrome.se-login .se-login-links span {
    margin: 0 6px;
    color: #948d80;
}

.se-chrome.se-login :focus-visible {
    outline: 2px solid #c46a26;
    outline-offset: 2px;
}

/* The account links in the drawer, for the phone, where the bar only keeps the greeting ------- */

.se-chrome.se-chrome-header .se-drawer-account {
    display: none;
    width: min(1340px, calc(100% - 48px));
    margin: 14px auto 0;
    padding-top: 12px;
    border-top: 1px solid #f0eee9;
    flex-direction: column;
    gap: 2px;
}

.se-chrome.se-chrome-header .se-drawer-account a,
.se-chrome.se-chrome-header .se-drawer-account button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--se-nav-font);
    font-size: 15.5px;
    color: var(--se-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.se-chrome.se-chrome-header .se-drawer-account .se-i {
    width: 19px;
    height: 19px;
    flex: none;
    color: var(--se-orange);
}

@media (max-width: 600px) {
    /* Signed in, three links wrapped onto a second row and took the orange bar to 230px, pushing the
       whole page down. Only the greeting stays; the other two are in the drawer. */
    .se-chrome.se-chrome-header .se-head-acct-extra {
        display: none;
    }

    .se-chrome.se-chrome-header .se-drawer-account {
        display: flex;
    }
}

/* ============================================== pages taken off Elementor
 *
 * A page Elementor used to draw carries its layout in Elementor's widget settings, and taking
 * Elementor off the page takes that with it. The words survive in post_content; nothing else does.
 *
 * These numbers are MEASURED off the Elementor version of /calendar/. Two rounds of this were needed
 * and the second one is the instructive one. Round one centred the text; David said the page was not
 * the same, and it was also 200px narrower in the wrong typeface. Round two matched the width, the
 * faces, the sizes, the colours and every vertical position, declared it identical, and shipped a page
 * with a 244px hole in it where a photograph belongs. The hole was the thing I had "matched": I
 * reproduced the space the hero image occupied without noticing there was an image in it.
 *
 * The lesson is not "measure more". Every number matched. It is that a list of measurements cannot
 * tell you what is missing, only whether the things you thought of agree. The photograph was never in
 * post_content, because on an Elementor page a background image is a section setting.
 *
 * What Elementor was doing, at a 1440px window:
 *
 *   hero        full-bleed background image, min-height 431, pulled up 80px, headings centred in it
 *   container   1340 wide at x=50, for the headings AND the calendar AND the listing
 *   h1          Raleway 500, 35px/35px, #232323, centred, at y=247
 *   h3          Raleway 400, 26px/26px, #d56929, centred, at y=290
 *   p           Assistant 400, 15px/22.5px, #333, centred, at y=534
 *   calendar    y=614
 *   links       no underline anywhere; Elementor's reset was removing it
 */

.se-off-elementor main#content,
.se-off-elementor main.site-main {
    max-width: 1340px;
    margin-inline: auto;
}

/* Elementor's reset removed link underlines site-wide, and the theme's does not, so every event title
   and every date in the listing came out underlined. Scoped to released pages so the rest of the site
   keeps whatever it has. */
.se-off-elementor main a {
    text-decoration: none;
}

.se-off-elementor main a:hover,
.se-off-elementor main a:focus-visible {
    text-decoration: none;
}

/* --------------------------------------------------------------- the hero
 *
 * EVERY VALUE HERE IS COPIED FROM THE COMPUTED STYLES OF THE PRODUCTION PAGE, not judged by eye
 * against a screenshot, which is how the first three attempts went wrong. Captured at a 1440px
 * window from https://www.samadhi.org.uk/calendar/ :
 *
 *   section          1440 x 431 at x=0, y=34            full bleed, and 80px up under the header
 *   image layer      position absolute, inset 0
 *                    background-position 0px -132px
 *                    background-size cover
 *                    background-image ...-24.jpg.webp   (1200x900 source)
 *   overlay ::before opacity 0.96
 *                    linear-gradient(rgb(255,255,255) 0%, rgba(255,255,255,0.89) 69%)
 *   h1               y=214, x=20, w=1399                so the content is centred in the 431 box
 *   h3               y=257
 *
 * The reference has to be PRODUCTION, or staging with ?se_nodiet=1. I first captured this from staging
 * with the diet on, and the diet strips elementor-pro's JavaScript, so Elementor's motion-effects
 * layer never initialised: the layer sat over the headings instead of behind them and the section
 * measured 1340 wide instead of 1440. I then "matched" that. David caught it: the hero is full bleed.
 * A reference render must have nothing stripped from it, or you faithfully reproduce a broken page.
 *
 * Elementor's own structure is a container, a motion-effects container with overflow hidden, and a
 * layer inside it that scroll-scales (transform: matrix(1.02425...)) and fades. Two pseudo-elements do
 * the same job here without the JavaScript: ::before carries the photograph, ::after carries the wash.
 * The scroll animation is the one thing not reproduced, and it is the one thing that needs a scroll
 * listener, which is what these pages exist to stop shipping.
 */

.se-page-hero {
    position: relative;
    /* Full bleed out of the 1340 container, as the Elementor section is. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -80px;
    height: 431px;
    /* The motion-effects container clips its scaled layer; nothing here scales, but the clip keeps the
       hero honest if the image is ever positioned outside the box. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background-color: #ffffff;
}

/* The photograph. Same file production serves, the full-size webp at 166 KB rather than the 861 KB jpg
   Elementor's own markup points at, with the jpg behind it for anything that cannot read webp. */
.se-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: image-set(
        url(/wp-content/uploads/2026/05/Samadhi-Retreat_small-in-Lincolnshire-2025-24.jpg.webp) type("image/webp"),
        url(/wp-content/uploads/2026/05/Samadhi-Retreat_small-in-Lincolnshire-2025-24.jpg) type("image/jpeg")
    );
    background-position: 0px -132px;
    background-size: cover;
    background-repeat: no-repeat;
}

/* The wash, exactly as Elementor's overlay: this gradient, this opacity. It is much paler than it
   looks like it should be, and three earlier guesses all had it too dark. */
.se-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.89) 69%);
    opacity: 0.96;
}

.se-page-hero h1,
.se-page-hero h3 {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.se-page-hero h1 {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 35px;
    font-weight: 500;
    line-height: 35px;
    color: #232323;
    margin-bottom: 6px;
}

.se-page-hero h3 {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 26px;
    color: #d56929;
}

/* ------------------------------------------------- the line under the hero */

.se-page-intro {
    text-align: center;
}

.se-page-intro p {
    font-family: 'Assistant', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
    color: #333333;
    text-align: center;
    margin-top: 39px;
    margin-bottom: 58px;
}

@media (max-width: 767px) {
    .se-page-hero {
        min-height: 300px;
        padding: 0 20px;
    }

    /* M191. The hero was 431px tall with its bottom 132px blank white on a phone, which read as a
       large gap between the photograph and the line of text under it. Nothing was missing: the
       offset below frames the picture for a DESKTOP-width hero, where `cover` scales the image far
       taller than 431px and there is plenty of picture to shift up into. At 375px `cover` scales it
       to only just cover 431px, so shifting it up 132px exposed 132px of the hero's own white
       background. Centre it at phone widths: the box stays full and the framing is still sensible. */
    .se-page-hero::before { background-position: 50% 50%; }

    .se-page-hero h1 {
        font-size: 28px;
        line-height: 30px;
    }

    .se-page-hero h3 {
        font-size: 20px;
        line-height: 24px;
    }

    .se-page-intro p {
        margin-top: 34px;
        margin-bottom: 34px;
    }
}

/* ══ THE HEADER SLIDES AWAY AND COMES BACK ON SCROLL UP ════════════════════════════════════════════
   David: "Do you think we could have it so when you scroll up the header appears back in view? Esp on
   mobile?"

   `.se-head-reveal` is added by se-chrome-v3.js, so a visitor with JavaScript off keeps exactly the
   header they have now - a relative one that scrolls away and stays away - rather than a sticky element
   nothing can ever bring back.

   Sticky and not fixed. Fixed would take the header out of the flow and every page on the site would
   jump up by its height, which is 132px on desktop; sticky keeps the space it already occupies. */
.se-chrome.se-chrome-header.se-head-reveal {
    position: sticky;
    top: 0;
    transition: transform .22s ease;
    will-change: transform;
}
.se-chrome.se-chrome-header.se-head-reveal.se-head-away {
    /* 101% rather than 100%: a subpixel row of orange survived at some zoom levels. */
    transform: translateY(-101%);
}
/* The admin bar is fixed at the top and would be slid under. */
body.admin-bar .se-chrome.se-chrome-header.se-head-reveal { top: 32px; }
@media screen and (max-width: 782px) {
    /* Below this WordPress stops overlaying, so the offset would become a gap. */
    body.admin-bar .se-chrome.se-chrome-header.se-head-reveal { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .se-chrome.se-chrome-header.se-head-reveal { transition: none; }
    /* Somebody who asked for less motion gets a header that stays where it is. The script also skips
       its scroll listener, so this is belt and braces. */
    .se-chrome.se-chrome-header.se-head-reveal.se-head-away { transform: none; }
}

/* ══ THE PHONE'S ACCOUNT ROW ═══════════════════════════════════════════════════════════════════════
   David: "on mobile it says 'Hello, Name' but maybe that is aligned left and then we have a practice
   library link too? If it's not too big."

   Left-aligned by dropping the `margin: 0 auto` that centred it under 1024px, and the row becomes
   space-between so the greeting sits at the left edge and the account/library pair at the right. That
   is what makes it fit: they are at opposite ends rather than competing for the middle.

   REVISED 2026-08-22, approved by David: a name read as a greeting does not read as a button, so members
   were not finding "Hello, David" was a link to My Account. The greeting itself is unchanged - he wants
   it kept as the signed-in indicator - but it now sits next to an explicit "Account" link (same person
   icon), and "Library" gains the book icon the Practice Library sub-nav uses rather than staying a bare
   underlined word. Both new/changed links sit in one wrapper, .se-head-acct-mobile, so the pair reads as
   a group at the right edge instead of three items fighting the space-between rule. */
.se-chrome.se-chrome-header .se-head-acct-lib { display: none; }
.se-chrome.se-chrome-header .se-head-acct-mobile { display: none; }

@media (max-width: 600px) {
    .se-chrome.se-chrome-header .se-head-account {
        margin: 0;
        width: 100%;
        gap: 12px;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .se-chrome.se-chrome-header .se-head-acct-link {
        min-width: 0;                       /* so a long name ellipsises instead of pushing the link off */
    }
    .se-chrome.se-chrome-header .se-head-acct-link > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* The pair, grouped so they move as one flex item against the greeting. 16px between them: enough
       that a thumb aiming for one does not catch the other on a 375px screen. flex:none so the group
       does not stretch and pull the two links apart from each other. */
    .se-chrome.se-chrome-header .se-head-acct-mobile {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: none;
    }
    .se-chrome.se-chrome-header .se-head-acct-mob-account,
    .se-chrome.se-chrome-header .se-head-acct-lib {
        display: inline-flex;
        flex: none;
    }
}

/* ------------------------------------------------- kit-proofing the header's own controls

   Elementor's global kit ships

       .elementor-kit-8929 button { width: 100% !important; border-radius: 20px !important }

   and nothing in this file can outrank an !important declaration by specificity alone. So on every
   page that still loads the kit the header's hamburger stretched from 44px to 327px and started at
   x=241 in a 375px viewport: mostly off the right of the screen, and the mobile menu with it.

   That is every legacy Elementor page, because se-frontend-asset-diet.php only strips the kit from
   the pages the rebuild renders itself. It is why the fault looked page-specific and was first
   reported against /donate/, which was clean only because the diet had already stripped the kit
   there. Reproduced on /become-a-supporter/ (M148, fault I4).

   Width only. The kit's border-radius is also reaching these buttons, but it is not what breaks the
   menu and changing it would restyle a header David has signed off, so it is left alone and noted.

   Same lineage as the two fights recorded at the top of this file: when the kit uses !important,
   say so back, explicitly, once. */

.se-chrome button {
    width: auto !important;
}

.se-chrome.se-chrome-header .se-head-toggle {
    width: 44px !important;
    height: 44px !important;
}

.se-chrome.se-chrome-header .se-sub-toggle {
    width: 44px !important;
}

.se-chrome.se-chrome-header .se-nav-caret {
    width: 18px !important;
}

/* ── M197c: the last dropdown must not hang off the right edge ───────────────────────────────
   `.se-chrome.se-chrome-header .se-nav-list ul` (above, around line 591) opens every dropdown at
   `left: 0` of its parent item with `min-width: 240px`. The last top-level item, Contact, starts
   1060.8px in on a 1280px screen, so its dropdown ran to 1300.8 - 20.8px past the viewport.

   And because that dropdown is only `visibility: hidden; opacity: 0` until hover rather than
   `display: none`, IT IS LAID OUT AT ALL TIMES. So it added those 20.8px to the document on every
   page on the site, whether or not anybody ever opened the menu. Measured constant at 20.8px at
   1280, 1366 and 1440, because the nav's right edge tracks the header container and not the
   viewport.

   THIS WAS REPORTED AS A RETREAT-PAGE FAULT AND IS NOTHING OF THE KIND. It is on every page. It
   was merely VISIBLE on the templates that do not crop: measured before this fix, the retreats,
   the practice library, My Account and the calendar all genuinely scrolled sideways at desktop
   widths, while the class and hybrid event pages and the Elementor pages swallowed the identical
   overhang in their own `overflow-x` and read a clean 1280. Same masking, same lesson.

   Fixed by opening the LAST item's dropdown from its own right edge, which is ordinary practice at
   the end of a navigation bar and changes nothing about how it reads. `:last-child` rather than
   naming Contact, so adding a menu item carries the rule with it instead of quietly reintroducing
   the fault; the second-to-last dropdown ends 165px inside the viewport, so one item is the only
   one that can overflow at these widths.

   NOT fixed with an `overflow-x` on the header, which would clip the dropdown the moment somebody
   opened it. Nothing here applies at phone width: the desktop nav is not rendered there, and the
   header contributed 0 offenders on all nine pages measured at 375. */
.se-chrome.se-chrome-header .se-nav-list > li:last-child ul {
    left: auto;
    right: 0;
}

/* ── M197e: no text control anywhere may sit under the iOS zoom threshold ─────────────────────
   iOS Safari zooms the whole page in when a form control with a computed font-size UNDER 16px is
   focused, and it never zooms back. From that tap onwards the layout is wider than the screen and
   the page pans sideways - which is why the client's screenshots show the heading cut off at the
   LEFT edge rather than content running off the right. A zoomed, panned page, not an over-wide one.

   THIS IS THE SECOND TIME THIS EXACT FAULT HAS BEEN REPORTED, IN A SECOND PLACE. It was fixed for
   the booking flow on 14 August (`se-booking-mobile-v3.css`) and everything else was left, because
   that fix was scoped to the forms it was looking at. He then wrote a post in the community, tapped
   the composer at 15px, and the page zoomed exactly as the booking form used to.

   Measured on the live stylesheets, by injecting each control's own markup into the real document
   and reading the computed size, because several of these only exist in states that cannot be
   reached safely (the composer needs community write access, the comment box needs a post, the
   report box needs a menu):

       .lb-composer textarea    15px    <- the post box. This is the one he tapped
       .lb-cbox textarea        14.5px  <- the comment box
       .lb-pmenu-ask textarea   14px    <- the report / ask box
       .lb-field input          15px    <- the library's own auth fields
       .don-field input         15.5px  <- donations, inside the library
       .don-field textarea      15.5px
       .don-card-panel input    15px

   `!important` because the rules being overridden are `#se-library-root`-scoped, so this sheet
   cannot outscore them on specificity and the two sheets' print order is not guaranteed.

   It lives HERE, in the site chrome, and NOT in the library stylesheet on purpose: the chrome loads
   on every page of the rebuild, so one rule now covers the library, the community, the donation
   surfaces and anything added later, instead of the same fault being fixed in one stylesheet and
   missed in the next. A harness checks every text control on the site against this threshold
   (`_build-src/booking/m197-textcontrols.cjs`) precisely so it cannot be missed a third time.

   NOT fixed with `maximum-scale=1` or `user-scalable=no`, which also stops the zoom and stops a
   member ever pinching to enlarge anything again. */
#se-library-root .lb-composer textarea,
#se-library-root .lb-cbox textarea,
#se-library-root .lb-pmenu-ask textarea,
#se-library-root .lb-field input,
#se-library-root .don-field input,
#se-library-root .don-field textarea,
#se-library-root .don-card-panel input {
    font-size: 16px !important;
}

/* ── M197f: a colour that does not exist, and a spinner wearing the video player's clothes ────
   Both handed over as leads from the design-brief mission, both VERIFIED IN A RENDERED BROWSER at
   375px before being touched, because both were read off the stylesheet rather than seen.

   (1) `--accent` IS USED NINE TIMES IN THE LIBRARY AND DEFINED NOWHERE. Measured:
   `getComputedStyle(#se-library-root).getPropertyValue('--accent')` returns EMPTY, and so does the
   same read on `html`. The only `--accent` on the account is on `.se-booking`, a different scope.

   What that does, measured rather than reasoned:
     - `.lb-postto-opt.on` - THE SELECTED AUDIENCE OPTION IN THE COMPOSER - computes
       `background: rgba(0,0,0,0)` with `color: rgb(255,255,255)`. **White text on nothing.** It is
       invisible against the panel, which is almost certainly what the client meant by "the other
       option just disappears": it is the CHOSEN one that vanishes, not the other.
     - `.lb-post-link` falls back to the ink colour, so links inside a post render as plain dark
       text rather than the accent.
     - `.lb-feedwait i`, the connecting spinner, takes its border-top from `color`, giving a faint
       grey arc on a grey ring with almost no contrast.
   Fixed at the cause, once, rather than at the nine call sites: the variable is defined in the
   library's scope, pointing at the library's own orange, which is the same value `.se-booking`
   has always used for `--accent`.

   (2) THE UPLOAD SPINNER IS OVERRIDDEN BY THE VIDEO PLAYER'S. `#se-library-root .lb-spin` is
   declared twice at identical specificity: once for the photograph being uploaded (14x14, in the
   row, grey ring) and once, LATER, for the player's veil (44x44, `position: absolute`, centred by
   `left/top: 50%` with `margin: -22px`, translucent-white ring). Later wins, so the upload spinner
   was being pulled out of its inline row, thrown to the middle of its nearest positioned ancestor
   at three times the size, with a ring that is invisible on a light background. It is not that it
   never appears; it is that it does not appear where the member is looking. Given its own, more
   specific selector so the player's rule cannot reach it. The player's spinner is untouched.

   Both of these are fixes made for the client earlier today that were not reaching the screen, so
   they are worth more than their size: without this we would have told him something was fixed
   while he still saw it broken. */
#se-library-root {
    --accent: var(--orange, #c46a26);
    --accent-deep: var(--orange-dark, #a2551d);
}
#se-library-root .lb-attbusy .lb-spin {
    position: static;
    left: auto;
    top: auto;
    margin: 0;
    width: 14px;
    height: 14px;
    flex: none;
    border: 2px solid var(--border, #e3e0d8);
    border-top-color: var(--accent, #c46a26);
    pointer-events: auto;
}

/* ══ M197g: THE 16px FLOOR, MADE GENERAL, BECAUSE ENUMERATING IT HAS NOW FAILED THREE TIMES ══
   iOS Safari zooms the page in when a control under 16px is focused and never zooms back; from
   that tap on, the page pans sideways. Three rounds of this have now been fixed by listing the
   controls in front of whoever was looking:

     round 1 (booking, 14 Aug)  fixed the booking forms      -> the composer at 15px survived
     round 2 (library, M197e)   fixed the library/community  -> the SIGN-IN PANEL survived
     round 3 (this)             stopped listing them

   Round 2 is the embarrassing one: `.se-chrome.se-login input` is 15.5px and sits in THIS FILE,
   which I had already edited twice the same day. A signed-out member taps that box before they can
   book anything. Measured in a browser at 375px, it was 15.5px on my-account, donate, the library
   AND the event pages - every page on the site - along with the my-account fields (15), the
   my-account inline login (15), the supporter field (15.5) and card (15), the donation field (15.5)
   and card (15), the account-offer password (15.5) and the waitlist field (15). A static sweep of
   every LIVE stylesheet found 38 such rules; several were already covered by earlier overrides,
   which is exactly why a static hit is only a candidate and each was re-checked in a rendered page.

   SO THIS INVERTS THE FRAGILITY. Instead of listing the controls that are too small - a list that
   is wrong the moment anybody adds a field - it sets a floor on ALL of them and then restores the
   handful that are deliberately LARGER. That second list is short, stable, and its members are
   design decisions rather than oversights.

   Confined to `max-width: 767px` on purpose: the zoom only happens on a phone, so desktop
   typography is left exactly as designed and the blast radius is the situation that matters.

   NOT done with `maximum-scale=1`, which also stops the zoom and stops a member ever pinching to
   enlarge anything again. */
@media (max-width: 767px) {
    /* `:not(:where(...))` and NOT a chain of `:not()`s, and this is the whole reason v25 was wrong.
       A `:not()` carries the specificity of its argument, so seven of them scored (0,7,1) and the
       blanket outranked every exception below it - the donation amount, the search bar and the
       booking amount all collapsed to 16px. `:where()` contributes ZERO, so this selector is (0,0,1)
       and any class-based exception beats it cleanly.

       That is the SECOND time this exact trap has bitten in this mission: the first booking
       stylesheet shipped with the same `:not()` chain and silently shrank the donation amount field
       from 17px to 16px. Caught both times only by re-measuring the deployed page. */
    input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="file"], [type="hidden"], [type="image"])),
    textarea,
    select,
    [contenteditable="true"] {
        font-size: 16px !important;
    }

    /* Deliberately larger, restored. These are the design's own decisions, not oversights. */
    .bk-custom-amt input,
    #retreat-booking .bk-custom-amt input,
    .se-scope .custom-amt input {
        font-size: 17px !important;
    }
    #se-library-root .lb-searchbar input {
        font-size: 18px !important;
    }
    .sup-more-field input {
        font-size: 22px !important;
    }
    .don-custom-field input,
    #se-library-root .don-custom-field input {
        font-size: 28px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   M237 — ONE HEADING WEIGHT FOR THE WHOLE SITE.

   THE FAULT, measured on the switched front page. Elementor's global kit (8929)
   sets h1, h2, h3 and h4 to Raleway 500. Everything the rebuild draws sets its
   titles at 700 and above. So the front page shows both inside one screen: a
   light, airy "Upcoming Retreats" sitting directly on top of heavy card titles.
   Same typeface, two different voices, on the most visited page on the site.

   THE DIRECTION, and it is the decision this block exists to record. The LEGACY
   pages move UP to the rebuild's weight, and nothing the rebuild renders is
   touched at all. Chosen that way round for one reason: the six designed
   retreat pages are the client's protected reference, he has asked in writing
   that they are not redesigned, and they already set their headings at 700
   (`.se-retreat-<venue> h1, h2, h3, h4`). Taking the rebuild DOWN to 500 would
   mean editing those six stylesheets, which is the one thing that was ruled
   out. Taking legacy UP costs them nothing.

   WHY 700 AND NOT 800, because 800 was the obvious guess and is wrong here.
   800 and 900 are what the rebuild uses for CARD titles (17.5px to 36px) and
   for numbers, where a heavier face is normal and the type is small. Elementor's
   kit puts h1, h2 AND h3 all at 35px, dropping to 25px on a phone, with no
   scale between them - so a blog article's sub-headings are already the same
   size as its title, and setting them all to 800 would give a long article a
   wall of display type. 700 is the weight of the designed retreat pages, closes
   the gap that is actually visible, and stays readable in body copy. It leaves
   100 units between a section heading and a card title beside it, which is
   ordinary typographic contrast rather than the 300 that reads as two sites.

   SPECIFICITY, and the leading `body` is not decoration. The kit writes
   `.elementor-kit-8929 h1` (0,1,1) and Elementor's own widget writes
   `.elementor-widget-heading .elementor-heading-title` (0,2,0). A bare
   `.elementor-heading-title` (0,1,0) loses to both - which is exactly how an
   earlier weight fix on the retreat sheets sat in the file looking effective
   while doing nothing, and the comment there says so. `body` buys (0,2,1) and
   (0,1,2), which cannot lose to either, and it does not name the kit id, so
   this survives the kit being rebuilt with a new number.

   SCOPE, by construction rather than by care. Every selector below is either an
   Elementor widget class or the theme's own article container. None of them
   appears anywhere in what the rebuild renders: the library is under
   `#se-library-root`, the account under `.se-account`, the event and course
   cards under `.sam-views`, the designed retreats under `.se-retreat-*`, and
   this header and footer under `.se-chrome`. So this block CANNOT reach them.

   TO REVERSE IT: set SE_Chrome::STYLE back to se-chrome-v26.css. Nothing else
   in the plugin depends on this file's number.
   ═════════════════════════════════════════════════════════════════════════════ */

/* The heading widget, which is what draws every section heading on every legacy
   page, and the post-title widget that draws an article's own title. */
body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-theme-post-title .elementor-heading-title {
    font-weight: 700;
}

/* Headings typed inside a text editor or sitting in an article body, so a post
   cannot end up with a 700 title above 500 sub-headings. h5 and h6 are left
   alone: the kit never restyled them, so they are already the theme's own. */
body .elementor-widget-text-editor h1,
body .elementor-widget-text-editor h2,
body .elementor-widget-text-editor h3,
body .elementor-widget-text-editor h4,
body .elementor-widget-theme-post-content h1,
body .elementor-widget-theme-post-content h2,
body .elementor-widget-theme-post-content h3,
body .elementor-widget-theme-post-content h4,
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4 {
    font-weight: 700;
}

/* The chrome's own page hero is a PORT of the legacy Elementor hero (the note
   further up this file records the measurements it was copied from), so it has
   to move with the thing it was copying. Its h3 is a strapline, not a heading,
   and stays at 400 - the same distinction the designed retreat pages make
   between `.hero h1` and `.hero .sub`. */
.se-page-hero h1 {
    font-weight: 700;
}

/* M284 sweep, 2026-08-23: hello-elementor's reset.css carries a bare
   [type=button]:focus,[type=button]:hover,button:focus,button:hover{background-color:#c36}
   (an attribute selector, specificity 0,0,1,1) which ties or beats a single bare class and is
   then decided by load order - see commit 53951bb, which fixed exactly two instances of this
   one at a time (the gv-redeem toggle and the account page's .gv-hist-toggle) after David
   found the pink background stuck on a toggle. It leaked AGAIN on the post-payment "create
   account" button while processing, because 53951bb requalified two specific components and
   not the shape of the problem: any bare <button> or [type=button] inside ANY of our own
   component roots is exposed to this theme rule, and the next new button anywhere in this
   plugin would be born with it.

   So this is the one place it is fixed for good: every current mount root this plugin renders
   into, qualified with the pseudo-class, which outranks the theme's attribute selector on
   specificity alone (a class or ID ancestor plus the pseudo-class beats an attribute selector
   plus the pseudo-class) regardless of which stylesheet loads last. A :focus-visible ring is
   kept for keyboard users, using the same outline/colour convention 53951bb already set.
   Add a new component's root id/class to this selector list when it is built - do not give it
   its own one-off patch the way the toggle got one. */
.se-scope button:not(.accent):not(.dark):hover,.se-scope button:not(.accent):not(.dark):focus,.se-scope button:not(.accent):not(.dark):active,
.se-scope [type=button]:not(.accent):not(.dark):hover,.se-scope [type=button]:not(.accent):not(.dark):focus,.se-scope [type=button]:not(.accent):not(.dark):active,
#se-library-root button:not(.accent):not(.dark):hover,#se-library-root button:not(.accent):not(.dark):focus,#se-library-root button:not(.accent):not(.dark):active,
#se-library-root [type=button]:not(.accent):not(.dark):hover,#se-library-root [type=button]:not(.accent):not(.dark):focus,#se-library-root [type=button]:not(.accent):not(.dark):active,
#samadhi-account button:not(.accent):not(.dark):hover,#samadhi-account button:not(.accent):not(.dark):focus,#samadhi-account button:not(.accent):not(.dark):active,
#samadhi-account [type=button]:not(.accent):not(.dark):hover,#samadhi-account [type=button]:not(.accent):not(.dark):focus,#samadhi-account [type=button]:not(.accent):not(.dark):active,
#se-event-root button:not(.accent):not(.dark):hover,#se-event-root button:not(.accent):not(.dark):focus,#se-event-root button:not(.accent):not(.dark):active,
#se-event-root [type=button]:not(.accent):not(.dark):hover,#se-event-root [type=button]:not(.accent):not(.dark):focus,#se-event-root [type=button]:not(.accent):not(.dark):active,
#book button:not(.accent):not(.dark):hover,#book button:not(.accent):not(.dark):focus,#book button:not(.accent):not(.dark):active,
#book [type=button]:not(.accent):not(.dark):hover,#book [type=button]:not(.accent):not(.dark):focus,#book [type=button]:not(.accent):not(.dark):active,
#retreat-booking button:not(.accent):not(.dark):hover,#retreat-booking button:not(.accent):not(.dark):focus,#retreat-booking button:not(.accent):not(.dark):active,
#retreat-booking [type=button]:not(.accent):not(.dark):hover,#retreat-booking [type=button]:not(.accent):not(.dark):focus,#retreat-booking [type=button]:not(.accent):not(.dark):active,
#donate-root button:not(.accent):not(.dark):hover,#donate-root button:not(.accent):not(.dark):focus,#donate-root button:not(.accent):not(.dark):active,
#donate-root [type=button]:not(.accent):not(.dark):hover,#donate-root [type=button]:not(.accent):not(.dark):focus,#donate-root [type=button]:not(.accent):not(.dark):active,
#donate-course-root button:not(.accent):not(.dark):hover,#donate-course-root button:not(.accent):not(.dark):focus,#donate-course-root button:not(.accent):not(.dark):active,
#donate-course-root [type=button]:not(.accent):not(.dark):hover,#donate-course-root [type=button]:not(.accent):not(.dark):focus,#donate-course-root [type=button]:not(.accent):not(.dark):active,
#donate-fundraiser-root button:not(.accent):not(.dark):hover,#donate-fundraiser-root button:not(.accent):not(.dark):focus,#donate-fundraiser-root button:not(.accent):not(.dark):active,
#donate-fundraiser-root [type=button]:not(.accent):not(.dark):hover,#donate-fundraiser-root [type=button]:not(.accent):not(.dark):focus,#donate-fundraiser-root [type=button]:not(.accent):not(.dark):active,
#donate-nudge-root button:not(.accent):not(.dark):hover,#donate-nudge-root button:not(.accent):not(.dark):focus,#donate-nudge-root button:not(.accent):not(.dark):active,
#donate-nudge-root [type=button]:not(.accent):not(.dark):hover,#donate-nudge-root [type=button]:not(.accent):not(.dark):focus,#donate-nudge-root [type=button]:not(.accent):not(.dark):active,
#supporter-root button:not(.accent):not(.dark):hover,#supporter-root button:not(.accent):not(.dark):focus,#supporter-root button:not(.accent):not(.dark):active,
#supporter-root [type=button]:not(.accent):not(.dark):hover,#supporter-root [type=button]:not(.accent):not(.dark):focus,#supporter-root [type=button]:not(.accent):not(.dark):active,
#supporter-account-root button:not(.accent):not(.dark):hover,#supporter-account-root button:not(.accent):not(.dark):focus,#supporter-account-root button:not(.accent):not(.dark):active,
#supporter-account-root [type=button]:not(.accent):not(.dark):hover,#supporter-account-root [type=button]:not(.accent):not(.dark):focus,#supporter-account-root [type=button]:not(.accent):not(.dark):active,
#samadhi-gift-voucher button:not(.accent):not(.dark):hover,#samadhi-gift-voucher button:not(.accent):not(.dark):focus,#samadhi-gift-voucher button:not(.accent):not(.dark):active,
#samadhi-gift-voucher [type=button]:not(.accent):not(.dark):hover,#samadhi-gift-voucher [type=button]:not(.accent):not(.dark):focus,#samadhi-gift-voucher [type=button]:not(.accent):not(.dark):active,
#se-course-checkout-host button:not(.accent):not(.dark):hover,#se-course-checkout-host button:not(.accent):not(.dark):focus,#se-course-checkout-host button:not(.accent):not(.dark):active,
#se-course-checkout-host [type=button]:not(.accent):not(.dark):hover,#se-course-checkout-host [type=button]:not(.accent):not(.dark):focus,#se-course-checkout-host [type=button]:not(.accent):not(.dark):active
{background-color:transparent}

/* M301 fix, 2026-09-10: the M284 sweep above (background-color:transparent on
   hover/focus/active for every bare button in these roots) correctly defeated the theme's
   pink flash, but it also stripped the background off FILLED buttons - .btn.accent (solid
   orange, white text) and .btn.dark (solid ink, white text) - because the ID-qualified
   selector above outranks a plain .btn.accent rule on specificity. Pressing/tapping/
   focusing "Review" (booking) or "Join the group" (recurring class booking), and any other
   .btn.accent/.btn.dark button across the site, dropped the background to transparent while
   the white text stayed white: white-on-white, button text unreadable. Both buttons share
   the plain .btn.accent class - this is one shared bug, not two.
   Fixed by excluding .accent/.dark from the blanket rule above and restoring their own
   correct hover/focus/active background here, at the same ID-qualified specificity, using
   the same colours .btn.accent:hover / .btn.dark:hover already use per-bundle. */
.se-scope button.accent:hover,.se-scope button.accent:focus,.se-scope button.accent:active,
.se-scope [type=button].accent:hover,.se-scope [type=button].accent:focus,.se-scope [type=button].accent:active,
#se-library-root button.accent:hover,#se-library-root button.accent:focus,#se-library-root button.accent:active,
#se-library-root [type=button].accent:hover,#se-library-root [type=button].accent:focus,#se-library-root [type=button].accent:active,
#samadhi-account button.accent:hover,#samadhi-account button.accent:focus,#samadhi-account button.accent:active,
#samadhi-account [type=button].accent:hover,#samadhi-account [type=button].accent:focus,#samadhi-account [type=button].accent:active,
#se-event-root button.accent:hover,#se-event-root button.accent:focus,#se-event-root button.accent:active,
#se-event-root [type=button].accent:hover,#se-event-root [type=button].accent:focus,#se-event-root [type=button].accent:active,
#book button.accent:hover,#book button.accent:focus,#book button.accent:active,
#book [type=button].accent:hover,#book [type=button].accent:focus,#book [type=button].accent:active,
#retreat-booking button.accent:hover,#retreat-booking button.accent:focus,#retreat-booking button.accent:active,
#retreat-booking [type=button].accent:hover,#retreat-booking [type=button].accent:focus,#retreat-booking [type=button].accent:active,
#donate-root button.accent:hover,#donate-root button.accent:focus,#donate-root button.accent:active,
#donate-root [type=button].accent:hover,#donate-root [type=button].accent:focus,#donate-root [type=button].accent:active,
#donate-course-root button.accent:hover,#donate-course-root button.accent:focus,#donate-course-root button.accent:active,
#donate-course-root [type=button].accent:hover,#donate-course-root [type=button].accent:focus,#donate-course-root [type=button].accent:active,
#donate-fundraiser-root button.accent:hover,#donate-fundraiser-root button.accent:focus,#donate-fundraiser-root button.accent:active,
#donate-fundraiser-root [type=button].accent:hover,#donate-fundraiser-root [type=button].accent:focus,#donate-fundraiser-root [type=button].accent:active,
#donate-nudge-root button.accent:hover,#donate-nudge-root button.accent:focus,#donate-nudge-root button.accent:active,
#donate-nudge-root [type=button].accent:hover,#donate-nudge-root [type=button].accent:focus,#donate-nudge-root [type=button].accent:active,
#supporter-root button.accent:hover,#supporter-root button.accent:focus,#supporter-root button.accent:active,
#supporter-root [type=button].accent:hover,#supporter-root [type=button].accent:focus,#supporter-root [type=button].accent:active,
#supporter-account-root button.accent:hover,#supporter-account-root button.accent:focus,#supporter-account-root button.accent:active,
#supporter-account-root [type=button].accent:hover,#supporter-account-root [type=button].accent:focus,#supporter-account-root [type=button].accent:active,
#samadhi-gift-voucher button.accent:hover,#samadhi-gift-voucher button.accent:focus,#samadhi-gift-voucher button.accent:active,
#samadhi-gift-voucher [type=button].accent:hover,#samadhi-gift-voucher [type=button].accent:focus,#samadhi-gift-voucher [type=button].accent:active,
#se-course-checkout-host button.accent:hover,#se-course-checkout-host button.accent:focus,#se-course-checkout-host button.accent:active,
#se-course-checkout-host [type=button].accent:hover,#se-course-checkout-host [type=button].accent:focus,#se-course-checkout-host [type=button].accent:active
{background-color:var(--orange-dark,#a2551d)}

.se-scope button.dark:hover,.se-scope button.dark:focus,.se-scope button.dark:active,
.se-scope [type=button].dark:hover,.se-scope [type=button].dark:focus,.se-scope [type=button].dark:active,
#se-library-root button.dark:hover,#se-library-root button.dark:focus,#se-library-root button.dark:active,
#se-library-root [type=button].dark:hover,#se-library-root [type=button].dark:focus,#se-library-root [type=button].dark:active,
#samadhi-account button.dark:hover,#samadhi-account button.dark:focus,#samadhi-account button.dark:active,
#samadhi-account [type=button].dark:hover,#samadhi-account [type=button].dark:focus,#samadhi-account [type=button].dark:active,
#se-event-root button.dark:hover,#se-event-root button.dark:focus,#se-event-root button.dark:active,
#se-event-root [type=button].dark:hover,#se-event-root [type=button].dark:focus,#se-event-root [type=button].dark:active,
#book button.dark:hover,#book button.dark:focus,#book button.dark:active,
#book [type=button].dark:hover,#book [type=button].dark:focus,#book [type=button].dark:active,
#retreat-booking button.dark:hover,#retreat-booking button.dark:focus,#retreat-booking button.dark:active,
#retreat-booking [type=button].dark:hover,#retreat-booking [type=button].dark:focus,#retreat-booking [type=button].dark:active,
#donate-root button.dark:hover,#donate-root button.dark:focus,#donate-root button.dark:active,
#donate-root [type=button].dark:hover,#donate-root [type=button].dark:focus,#donate-root [type=button].dark:active,
#donate-course-root button.dark:hover,#donate-course-root button.dark:focus,#donate-course-root button.dark:active,
#donate-course-root [type=button].dark:hover,#donate-course-root [type=button].dark:focus,#donate-course-root [type=button].dark:active,
#donate-fundraiser-root button.dark:hover,#donate-fundraiser-root button.dark:focus,#donate-fundraiser-root button.dark:active,
#donate-fundraiser-root [type=button].dark:hover,#donate-fundraiser-root [type=button].dark:focus,#donate-fundraiser-root [type=button].dark:active,
#donate-nudge-root button.dark:hover,#donate-nudge-root button.dark:focus,#donate-nudge-root button.dark:active,
#donate-nudge-root [type=button].dark:hover,#donate-nudge-root [type=button].dark:focus,#donate-nudge-root [type=button].dark:active,
#supporter-root button.dark:hover,#supporter-root button.dark:focus,#supporter-root button.dark:active,
#supporter-root [type=button].dark:hover,#supporter-root [type=button].dark:focus,#supporter-root [type=button].dark:active,
#supporter-account-root button.dark:hover,#supporter-account-root button.dark:focus,#supporter-account-root button.dark:active,
#supporter-account-root [type=button].dark:hover,#supporter-account-root [type=button].dark:focus,#supporter-account-root [type=button].dark:active,
#samadhi-gift-voucher button.dark:hover,#samadhi-gift-voucher button.dark:focus,#samadhi-gift-voucher button.dark:active,
#samadhi-gift-voucher [type=button].dark:hover,#samadhi-gift-voucher [type=button].dark:focus,#samadhi-gift-voucher [type=button].dark:active,
#se-course-checkout-host button.dark:hover,#se-course-checkout-host button.dark:focus,#se-course-checkout-host button.dark:active,
#se-course-checkout-host [type=button].dark:hover,#se-course-checkout-host [type=button].dark:focus,#se-course-checkout-host [type=button].dark:active
{background-color:#221f1c}


.se-scope button:focus-visible,.se-scope [type=button]:focus-visible,
#se-library-root button:focus-visible,#se-library-root [type=button]:focus-visible,
#samadhi-account button:focus-visible,#samadhi-account [type=button]:focus-visible,
#se-event-root button:focus-visible,#se-event-root [type=button]:focus-visible,
#book button:focus-visible,#book [type=button]:focus-visible,
#retreat-booking button:focus-visible,#retreat-booking [type=button]:focus-visible,
#donate-root button:focus-visible,#donate-root [type=button]:focus-visible,
#donate-course-root button:focus-visible,#donate-course-root [type=button]:focus-visible,
#donate-fundraiser-root button:focus-visible,#donate-fundraiser-root [type=button]:focus-visible,
#donate-nudge-root button:focus-visible,#donate-nudge-root [type=button]:focus-visible,
#supporter-root button:focus-visible,#supporter-root [type=button]:focus-visible,
#supporter-account-root button:focus-visible,#supporter-account-root [type=button]:focus-visible,
#samadhi-gift-voucher button:focus-visible,#samadhi-gift-voucher [type=button]:focus-visible,
#se-course-checkout-host button:focus-visible,#se-course-checkout-host [type=button]:focus-visible
{outline:2px solid var(--orange,#c46a26);outline-offset:3px;border-radius:4px}

.se-scope button:focus:not(:focus-visible),.se-scope [type=button]:focus:not(:focus-visible),
#se-library-root button:focus:not(:focus-visible),#se-library-root [type=button]:focus:not(:focus-visible),
#samadhi-account button:focus:not(:focus-visible),#samadhi-account [type=button]:focus:not(:focus-visible),
#se-event-root button:focus:not(:focus-visible),#se-event-root [type=button]:focus:not(:focus-visible),
#book button:focus:not(:focus-visible),#book [type=button]:focus:not(:focus-visible),
#retreat-booking button:focus:not(:focus-visible),#retreat-booking [type=button]:focus:not(:focus-visible),
#donate-root button:focus:not(:focus-visible),#donate-root [type=button]:focus:not(:focus-visible),
#donate-course-root button:focus:not(:focus-visible),#donate-course-root [type=button]:focus:not(:focus-visible),
#donate-fundraiser-root button:focus:not(:focus-visible),#donate-fundraiser-root [type=button]:focus:not(:focus-visible),
#donate-nudge-root button:focus:not(:focus-visible),#donate-nudge-root [type=button]:focus:not(:focus-visible),
#supporter-root button:focus:not(:focus-visible),#supporter-root [type=button]:focus:not(:focus-visible),
#supporter-account-root button:focus:not(:focus-visible),#supporter-account-root [type=button]:focus:not(:focus-visible),
#samadhi-gift-voucher button:focus:not(:focus-visible),#samadhi-gift-voucher [type=button]:focus:not(:focus-visible),
#se-course-checkout-host button:focus:not(:focus-visible),#se-course-checkout-host [type=button]:focus:not(:focus-visible)
{outline:none}