/* ==========================================================================
   Bergin Motion — site design layer
   --------------------------------------------------------------------------
   Loaded AFTER assets/css/styles.css + the button sheet
   (see includes/metatags-icons-css.php).

   Anything expressible as a Theme Setting lives in the admin
   (theme_colours / branding_settings / brand_font_urls). This file styles the
   bespoke classes assigned to widgets and custom fields in the CMS, plus the
   handful of framework behaviours the variables can't reach.

   NOTE: html{font-size:62.5%} → 1rem = 10px throughout.

   CMS classes styled here (assigned via widget css_class / field
   frontend_class — do not rename without updating this file):
     .eyebrow .btn-wrapper .ghost-btn .video-wrapper .rating .star-wrapper
     .embed-wrapper .responsive-embed
     .cf-title .cf-page_description .cf-page_content .cf-rte_content
     .cf-overview_content .cf-strip_introduction .cf-button .cf-ghost_button
     .cf-program_type .cf-session_status .cf-session_date
     .cf-start_time .cf-end_time .cf-job_title .cf-form_introduction
   ========================================================================== */

/* ==========================================================================
   1. Utility bar  (section.top-header — framework contact fallback)
   ========================================================================== */
.top-header {
    background: var(--color-bg-dark);
    padding-block: 0;
}
.top-header .content {
    max-width: var(--content-width-md);
    margin-inline: auto;
    min-height: 4.2rem;
    justify-content: space-between;
    gap: 1.6rem;
}
.top-header .content > ul {
    width: 100%;
    justify-content: space-between;
    gap: 1.6rem 2.4rem;
    flex-wrap: wrap;
}
.top-header .content > ul li,
.top-header .content > ul li a {
    color: hsla(0 0% 100% / .66);
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.top-header .content > ul li a:hover { color: #fff; }

/* The framework prints "Location:" / "Email:" / "Phone:" labels — swap them
   for icons. Same markup, no CMS change. */
.top-header .content > ul li strong {
    font-size: 0;
    font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 900;
    color: var(--color-main);
}
.top-header .content > ul li strong::before { font-size: 1.2rem; content: "\f3c5"; }
.top-header .content > ul li:nth-child(2) strong::before { content: "\f0e0"; }
.top-header .content > ul li:nth-child(3) strong::before { content: "\f095"; }
.top-header .content > ul li:nth-child(2) { margin-left: auto; }

@media (max-width: 1024px) { .top-header { display: none; } }

/* ==========================================================================
   2. Header + navigation
   ========================================================================== */
.full_header {
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.full_header.header-bg {
    border-bottom-color: var(--color-border);
    box-shadow: 0 6px 24px -18px hsla(210 33% 9% / .5);
}
.jqueryslidemenu { max-width: var(--content-width-md); min-height: 8.4rem; gap: 2rem; }
/* Framework fixes the nav to calc(100% - logo - 32px); let it take what's
   actually left so the CTA pill can't be squeezed into the last link. */
.jqueryslidemenu nav { width: auto; flex: 1 1 auto; min-width: 0; }
/* Spacing comes from a gap rather than the nav-padding theme var, so the menu
   stays legible whatever that var is set to. */
.jqueryslidemenu nav > ul {
    justify-content: flex-end;
    gap: .8rem;
    align-items: center;
    flex-wrap: nowrap;
}
.jqueryslidemenu nav > ul > li > a { white-space: nowrap; }

/* Underline sweeps in from the left rather than sitting static */
.jqueryslidemenu nav > ul > li > a::after {
    left: 0;
    right: 0;
    width: auto;
    bottom: -.2rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.jqueryslidemenu nav > ul > li:hover > a::after,
.jqueryslidemenu nav > ul > li.Selected > a::after { transform: scaleX(1); }

.jqueryslidemenu ul li ul {
    background: var(--header-dropdown-bg);
    border-radius: 0 1.4rem 1.4rem;
    overflow: hidden;
    padding: 0;
    min-width: 24rem;
    box-shadow: 0 24px 48px -20px hsla(210 33% 9% / .45);
}
.jqueryslidemenu ul li ul li a { font-size: 1.5rem; padding: 1.1rem 1.8rem; }

/* Nav CTA — any menu item flagged "Highlight" becomes the red pill */
.jqueryslidemenu nav > ul > li.highlight { margin-left: .8rem; flex: none; }
.jqueryslidemenu nav > ul > li.highlight > a,
.jqueryslidemenu nav > ul > li.highlight:hover > a,
.jqueryslidemenu nav > ul > li.highlight.Selected > a {
    background: var(--color-main);
    color: #fff;
    border-radius: 999px;
    padding: 1.2rem 2rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px hsla(357 100% 42% / .6);
    transition: var(--animate-fast);
}
.jqueryslidemenu nav > ul > li.highlight > a::after { display: none; }
.jqueryslidemenu nav > ul > li.highlight > a:hover {
    background: var(--color-border-main, #A80009);
    transform: translateY(-2px);
}

/* Mobile header — framework pins the burger left and centres the logo;
   the design is the reverse. */
.mobile_header { padding-inline: var(--section-inline); min-height: 7.4rem; }
.mobile_header .logo_area > a { margin: 0; }
.mobile_header a.menu-btn {
    left: 16px;
    width: 4.6rem;
    height: 4.6rem;
    display: grid;
    place-items: center;
    border-radius: 1.2rem;
    box-shadow: inset 0 0 0 1.5px var(--color-border);
    color: var(--color-heading);
}

/* Sticky-header offset for in-page #anchor targets */
.anchor { scroll-margin-top: 12rem; }

/* ==========================================================================
   3. Inner header (page banner)
   ========================================================================== */
.inner_header { position: relative; }
.inner_header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, hsla(210 33% 9% / .55), hsla(210 33% 9% / .1));
}

/* ==========================================================================
   4. Eyebrow label  (.h5.eyebrow / .h6.eyebrow)
   ========================================================================== */
.eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.4rem;
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--color-main);
    box-shadow: 0 0 0 .4rem hsla(357 100% 42% / .14);
}
.dark .eyebrow,
.main .eyebrow { color: hsla(0 0% 100% / .62); }

/* Defensive: an eyebrow should only ever wrap its own label. If a strip's
   content ends up nested inside it (RTE nesting slip), stack the children at
   full width and reset the inherited label styling rather than laying them
   out as flex items. */
.eyebrow { flex-wrap: wrap; }
.eyebrow > h1, .eyebrow > h2, .eyebrow > h3,
.eyebrow > h4, .eyebrow > p,  .eyebrow > ul,
.eyebrow > ol, .eyebrow > .btn-wrapper {
    width: 100%;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-heading);
}
.eyebrow > p, .eyebrow > ul, .eyebrow > ol { font-family: var(--font-body); }

/* The hero banner's eyebrow field renders as a bare .h6 — give it the same
   treatment without needing a class change in the CMS. */
.banner-container-constrained .banner-content .h6 {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.4rem;
    color: var(--font-color-heading);
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    max-width: 56rem;
}
.banner-container-constrained .banner-content .h6::before {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--color-main);
    box-shadow: 0 0 0 .4rem hsla(357 100% 42% / .14);
}

/* ==========================================================================
   5. Buttons  (.btn-wrapper row, .ghost-btn secondary)
   ========================================================================== */
.btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 2.4rem;
}
.banner-container-constrained .btn-wrapper { margin-top: 0; }

/* Primary CTAs carry a trailing arrow, as in the demo. Scoped to button rows
   so it never lands on card links (which have their own) or text-links. */
.btn-wrapper > .button:not(.ghost-btn):not(.cf-ghost_button):not(.text-link)::after {
    font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 900;
    content: "\f061";
    font-size: 1.2rem;
    margin-left: .8rem;
    transition: transform .3s ease;
}
.btn-wrapper > .button:not(.ghost-btn):not(.cf-ghost_button):not(.text-link):hover::after {
    transform: translateX(3px);
}

/* Secondary / outline. button.css sets `border: none`, so the border must be
   declared in full here. */
.ghost-btn,
.cf-ghost_button {
    background: transparent;
    color: var(--color-heading);
    border: 2px solid hsla(210 33% 9% / .2);
}
.ghost-btn:hover,
.cf-ghost_button:hover {
    background: hsla(210 33% 9% / .04);
    border-color: var(--color-heading);
    color: var(--color-heading);
}
.dark .ghost-btn, .dark .cf-ghost_button,
.main .ghost-btn, .main .cf-ghost_button {
    background: transparent;
    color: #fff;
    border-color: hsla(0 0% 100% / .28);
}
.dark .ghost-btn:hover, .dark .cf-ghost_button:hover,
.main .ghost-btn:hover, .main .cf-ghost_button:hover {
    background: hsla(0 0% 100% / .1);
    border-color: hsla(0 0% 100% / .55);
    color: #fff;
}

/* ==========================================================================
   6. Hero banner — content left, 9:16 video right
   The banner widget stacks .video-wrapper behind an absolutely-positioned
   .banner-details overlay. This lifts the video into a right-hand panel and
   narrows the copy so the two sit side by side, with no CMS change.
   ========================================================================== */
.banner-container-constrained {
    background: var(--color-bg-light);
    overflow: hidden;
}
.banner-container-constrained .video-wrapper {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    overflow: visible;
}
.banner-container-constrained .video-wrapper::before,
.banner-container-constrained .video-wrapper::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: hsla(0 0% 100% / .24);
}
.banner-container-constrained .video-wrapper::after{
    background: linear-gradient(to right, hsla(0 0% 100% / .4) 0%, hsla(0 0% 100% / .4) 40%, transparent 100%);
}
.banner-container-constrained .video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Warm light wash behind the copy */
/*.banner-container-constrained::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-radial-gradient(circle at 64% 48%, transparent 0 141px, hsla(210 33% 9% / .055) 141px 142px),
        radial-gradient(46vw 46vw at 88% -8%, hsla(22 100% 60% / .20), transparent 62%),
        radial-gradient(34vw 34vw at -6% 108%, hsla(357 100% 42% / .10), transparent 66%);
    pointer-events: none;
}*/
.banner-container-constrained .banner-content {
    max-width: 56rem;
}
.banner-container-constrained .h0 { letter-spacing: -.035em; }
/* Accent phrase in the hero headline — wrap the words in <em> (or a .accent
   span) in the banner headline field and they pick up the red→orange gradient
   from the demo. Inert until that markup exists. */
.banner-container-constrained .h0 em,
.banner-container-constrained .h0 .accent {
    font-style: normal;
    background: linear-gradient(96deg, var(--color-main) 12%, var(--color-accent) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.banner-container-constrained p { max-width: 46rem;
    color: var(--font-color-heading); }

@media (max-width: 1024px) {
    .banner-container-constrained { display: flex; flex-direction: column; }
    .banner-container-constrained ul.ms-banner-constrained { order: 2; }
    .banner-container-constrained .video-wrapper {
        order: 1;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 0;
        width: 100%;
        max-height: none;
    }
    .banner-container-constrained .banner-content { padding-right: 0; max-width: 100%; align-items: flex-start; }
    .banner-container-constrained p { max-width: 100%; }
    /* Framework centres the hero copy on mobile; the design keeps it left. */
    .banner-container-constrained .banner-details,
    .banner-container-constrained .banner-left .banner-details {
        text-align: left;
        justify-content: flex-start;
    }
    .banner-container-constrained .video-wrapper::before, .banner-container-constrained .video-wrapper::after{
        display: none;
    }
}

/* ==========================================================================
   7. Split heading rows  (.grid > .col-6 + .col-6)
   ========================================================================== */
.grid > .col-6 > h1:last-child,
.grid > .col-6 > h2:last-child { margin-bottom: 0; }
.cf-overview_content > p:first-child,
.cf-strip_introduction > p:first-child { font-size: 1.8rem; line-height: 1.65; }

/* Consecutive grids inside one RTE block (e.g. a heading row followed by a
   card grid) need separating — the framework gives them no gap. */
.editable_content > .grid + .grid { margin-top: clamp(2.4rem, 4vw, 4rem); }

/* ==========================================================================
   7b. Four-up "process" strip  (.grid > .col-3 ×4 — Introduction / Our Approach)
   Matches the demo: hairline rules top and bottom, vertical dividers between
   columns, a small red step number and a compact title.
   Scoped with :has() so it only affects 4-up strips, never other grids.
   ========================================================================== */
.grid:has(> .col-3) {
    gap: 0;
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding-block: 3.2rem;
    border-block: 1px solid var(--color-border);
}
.grid:has(> .col-3) > .col-3 {
    padding-inline: clamp(1.6rem, 2.2vw, 2.8rem);
    border-left: 1px solid var(--color-border);
}
.grid:has(> .col-3) > .col-3:first-child { padding-left: 0; border-left: 0; }
.grid:has(> .col-3) > .col-3:last-child  { padding-right: 0; }

/* step number */
.grid:has(> .col-3) > .col-3 > .h6,
.grid:has(> .col-3) > .col-3 > .h5 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--color-main);
    margin: 0 0 1.6rem;
}
/* title — a section-scale heading is far too large in a quarter column */
.grid:has(> .col-3) > .col-3 > h2,
.grid:has(> .col-3) > .col-3 > h3,
.grid:has(> .col-3) > .col-3 > h4 {
    font-size: clamp(1.9rem, 1.8vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 .8rem;
}
.grid:has(> .col-3) > .col-3 > p {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-body);
    margin: 0;
}
.dark .grid:has(> .col-3),
.dark .grid:has(> .col-3) > .col-3 { border-color: var(--color-border-dark); }

@media (max-width: 1024px) {
    .grid:has(> .col-3) > .col-3 { padding-inline: 0; border-left: 0; padding-block: 2rem; border-top: 1px solid var(--color-border); }
    .grid:has(> .col-3) > .col-3:first-child { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   8. Cards  (pages / featured blocks)
   ========================================================================== */
.flex > .card { display: flex; flex-direction: column; }
/* Cards carry a radius, so they must clip their media — the theme's
   --card-overflow currently resolves to `visible`, which leaves the image's
   square corners bleeding past the rounded card edge. */
.card { overflow: hidden; }
/* …except the icon-card layout, whose icon deliberately overhangs the top. */
.icon-card .card { overflow: visible; }
/* `shadow-card` is applied to listing grids in the CMS — make it mean what it
   says even if --card-shadow is ever cleared. */
.shadow-card > .card { box-shadow: var(--card-shadow, var(--shadow)); }
.card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.card:hover { transform: translateY(-6px); }
.card .img-wrapper { overflow: hidden; }
.card .img-wrapper img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.card:hover .img-wrapper img { transform: scale(1.045); }
/* The framework's horizontal `inline-card` layout sizes its image to the full
   card height — don't impose the grid card's 16:10 crop on it. */
.inline-card .card .img-wrapper img { aspect-ratio: auto; height: 100%; }
.card .content-wrapper { display: flex; flex-direction: column; flex: 1; }
.card .cf-title { margin-bottom: 1rem; }
.card .cf-title a { text-decoration: none; }
.card .cf-page_description { color: var(--color-body); margin-bottom: 1.6rem; }

/* Card CTA reads as an arrow link, not a filled pill, and pins to the bottom */
.card .button {
    margin-top: auto;
    align-self: flex-start;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--color-main);
    padding: 0;
    height: auto;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.card .button::after {
    font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 900;
    content: "\f061";
    font-size: 1.1rem;
    transition: transform .3s ease;
}
.card:hover .button::after { transform: translateX(4px); }

/* ==========================================================================
   9. Programme card meta  (Group Programs)
   ========================================================================== */
.cf-program_type,
.cf-session_status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.cf-program_type { color: var(--color-heading); background: hsla(22 100% 60% / .18); }
.cf-session_status { color: var(--color-main); background: hsla(357 100% 42% / .08); }

.cf-session_date,
.cf-start_time,
.cf-end_time {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: .5rem;
}
.cf-session_date::before,
.cf-start_time::before,
.cf-end_time::before {
    font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--color-main);
    width: 1.6rem;
}
.cf-session_date::before { content: "\f133"; }
.cf-start_time::before,
.cf-end_time::before { content: "\f017"; }

.card .cf-session_date {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   10. Rating block  (.rating > .h1 + .star-wrapper + p>small)
   ========================================================================== */
/* Right-align the rating card within its grid column */
.grid > .col-6:has(> .rating) {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.rating {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.4rem 3.2rem;
    background: var(--color-bg);
    border-radius: 2rem;
    box-shadow: var(--card-shadow, var(--shadow));
}
.rating .h1 { margin: 0; font-size: 4.4rem; line-height: 1; letter-spacing: -.03em; }
.star-wrapper { display: flex; gap: .3rem; margin-top: .8rem; color: var(--color-accent); }
.star-wrapper i { font-size: 1.6rem; }
.rating p { margin: .8rem 0 0; }
.rating small {
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-body);
}

/* ==========================================================================
   11. Embeds  (Elfsight reviews, maps, video)
   ========================================================================== */
.embed-wrapper { width: 100%; }
.responsive-embed {
    position: relative;
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
}
.responsive-embed iframe { width: 100%; border: 0; }

/* ==========================================================================
   11b. Shadow grid  (.grid.shadow-grid — e.g. the Resources pricing tables)
   Each direct column becomes a card; the nested 12-col grid inside it is a
   label / price row pair (col-8 + col-4).
   ========================================================================== */
.shadow-grid > [class*="col-"] {
    background: var(--color-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: clamp(2rem, 2.6vw, 3rem);
}
.light .shadow-grid > [class*="col-"] { background: var(--color-bg); }

.shadow-grid > [class*="col-"] > h3 {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: clamp(1.9rem, 2vw, 2.2rem);
    line-height: 1.2;
    margin: 0 0 1.6rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--color-border);
}
.shadow-grid > [class*="col-"] > h3 i {
    flex: none;
    font-size: 2rem;
    color: var(--color-main);
}

/* label / price rows */
.shadow-grid .grid { gap: 0; row-gap: 0; }
.shadow-grid .grid > [class*="col-"] {
    padding-block: 1.1rem;
    border-top: 1px dashed var(--color-border);
    font-size: 1.5rem;
}
.shadow-grid .grid > [class*="col-"]:nth-child(1),
.shadow-grid .grid > [class*="col-"]:nth-child(2) { border-top: 0; }
.shadow-grid .grid > .col-8 { color: var(--color-body); }
.shadow-grid .grid > .col-4 {
    text-align: right;
    font-family: var(--font-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-heading);
}
.shadow-grid > [class*="col-"] > p {
    margin: 1.6rem 0 0;
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--color-body);
}

@media (max-width: 768px) {
    .shadow-grid .grid > .col-4 { text-align: left; }
}

/* ==========================================================================
   12. Category filter bar
   ========================================================================== */
.widget-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 3.2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.widget-category-filter .filter-btn {
    padding: .9rem 1.6rem;
    border-radius: 999px;
    border: 0;
    background: none;
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 0 0 1.5px var(--color-border);
    transition: var(--animate-fast);
}
.widget-category-filter .filter-btn:hover {
    color: white;
    box-shadow: inset 0 0 0 1.5px hsla(210 33% 9% / .3);
}
.widget-category-filter .filter-btn.active {
    background: var(--color-bg-dark);
    color: #fff;
    box-shadow: none;
}

/* ==========================================================================
   13. Toggles  (FAQ accordion)
   Markup: .toggle-wrapper > .block > h3.toggle_faq > (span.icon>i,i) +
           span.question ;  + div.toggler (answer, slideToggled by main.js)
   ========================================================================== */
.toggle-wrapper { gap: 0; border-top: 1px solid var(--color-border); }
.toggle-wrapper .block { border-bottom: 1px solid var(--color-border); }
.toggle-wrapper .toggle_faq {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 2rem 0;
    padding-left: 0;
    margin: 0;
    font-size: inherit;
}
.toggle-wrapper .toggle_faq .question {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 1.6vw, 2rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--color-heading);
    transition: color .25s ease;
}
.toggle-wrapper .toggle_faq:hover .question { color: var(--color-main); }
.toggle-wrapper .toggle_faq .icon {
    position: relative;          /* anchors the framework's absolute <i> bars */
    order: 2;
    flex: none;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--color-border);
    transition: transform .38s cubic-bezier(.22,.61,.36,1), background-color .3s ease, box-shadow .3s ease;
}
.toggle-wrapper .toggle_faq .icon i { width: 1.3rem; background: var(--color-heading); }
.toggle-wrapper .toggle_faq.active .icon { background: var(--color-main); box-shadow: none; }
.toggle-wrapper .toggle_faq.active .icon i { background: #fff; }
.toggle-wrapper .toggler { padding: 0 0 2.2rem; max-width: 78ch; color: var(--color-body); }
.toggle-wrapper .toggler p:last-child { margin-bottom: 0; }

.dark .toggle-wrapper,
.dark .toggle-wrapper .block { border-color: var(--color-border-dark); }
.dark .toggle-wrapper .toggle_faq .question { color: #fff; }
.dark .toggle-wrapper .toggle_faq:hover .question { color: var(--color-accent); }
.dark .toggle-wrapper .toggle_faq .icon { box-shadow: inset 0 0 0 1.5px var(--color-border-dark); }
.dark .toggle-wrapper .toggle_faq .icon i { background: #fff; }
.dark .toggle-wrapper .toggler { color: var(--font-color-body-dark); }

/* ==========================================================================
   14. Reviews widget cards
   ========================================================================== */
.review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 3.2rem 2.8rem 2.8rem;
    background: var(--color-bg);
    border-radius: 2.8rem;
    box-shadow: var(--card-shadow, var(--shadow));
}
.dark .review-card { background: hsla(0 0% 100% / .05); box-shadow: inset 0 0 0 1px var(--color-border-dark); }
.review-quote-icon { font-size: 2.4rem; color: var(--color-main); margin-bottom: 1.2rem; }
.review-stars { display: flex; gap: .3rem; color: var(--color-accent); margin-bottom: 1.6rem; }
.review-stars .fa-star { font-size: 1.4rem; opacity: .25; }
.review-stars .fa-star.active { opacity: 1; }
.review-content { display: flex; flex-direction: column; flex: 1; }
.review-text { font-size: 1.6rem; line-height: 1.65; }
.review-name {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
}
.dark .review-name { border-top-color: var(--color-border-dark); }

/* ==========================================================================
   15. Team
   ========================================================================== */
.cf-job_title {
    color: var(--color-main);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: -.4rem;
}

/* ==========================================================================
   16. Forms
   ========================================================================== */
.cf-form_introduction { margin-bottom: 2.4rem; }
.cf-form_introduction > p:first-child { font-size: 1.8rem; line-height: 1.65; }

/* ==========================================================================
   16b. Contact details + forms
   Markup: ul.contact-list > li > i.fa-solid.fa-* + span
           .form_holder > form > (input | .half_width | .full_width | button)
   ========================================================================== */
ul.contact-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
ul.contact-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: start;
    margin: 0;
    padding: 1.6rem 0;
    border-top: 1px solid var(--color-border);
    font-size: 1.5rem;
    line-height: 1.55;
}
ul.contact-list li:first-child { border-top: 0; }
ul.contact-list li i {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1.2rem;
    font-size: 1.5rem;
    color: var(--color-main);
    background: hsla(357 100% 42% / .07);
}
ul.contact-list li strong,
ul.contact-list li b {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-body);
    margin-bottom: .2rem;
}
ul.contact-list li a:hover { color: var(--color-main); }
.dark ul.contact-list li { border-top-color: var(--color-border-dark); }

/* ---- Map ---- */
.map-widget .map-wrapper {
    border-radius: 2.4rem;
    overflow: hidden;
    box-shadow: var(--card-shadow, var(--shadow));
}
.map-widget .map-wrapper iframe { display: block; width: 100%; border: 0; }

/* ---- Form ---- */
.form_holder form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.form_holder form > .half_width { grid-column: span 1; }
.form_holder form > .full_width,
.form_holder form > .h-captcha,
.form_holder form > button,
.form_holder form > .form-terms { grid-column: 1 / -1; }

.form_holder input[type="text"],
.form_holder input[type="email"],
.form_holder input[type="tel"],
.form_holder input[type="date"],
.form_holder input[type="time"],
.form_holder input[type="number"],
.form_holder select,
.form_holder textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: var(--color-heading);
    padding: 2.8rem .8rem .8rem;
    border: 0;
    border-radius: 1.2rem;
    background: var(--color-bg-light);
    box-shadow: inset 0 0 0 1.5px transparent;
    transition: box-shadow .25s ease, background-color .25s ease;
}
.form_holder textarea { min-height: 14rem; resize: vertical; line-height: 1.6; }
.form_holder input::placeholder,
.form_holder textarea::placeholder { color: hsla(210 33% 9% / .42); }
.form_holder input:focus,
.form_holder select:focus,
.form_holder textarea:focus {
    outline: none;
    background: var(--color-bg);
    box-shadow: inset 0 0 0 1.5px var(--color-heading);
}
.form_holder label { font-size: 1.3rem; font-weight: 600; }
.form_holder button.button { justify-self: start; }
.form_holder .form-terms { font-size: 1.2rem; line-height: 1.6; color: var(--color-body); }

@media (max-width: 640px) {
    .form_holder form { grid-template-columns: 1fr; }
    .form_holder form > .half_width { grid-column: 1 / -1; }
}

/* ==========================================================================
   17. Footer
   The framework's rules are element-qualified (footer …),
   so these overrides must be too in order to win on specificity.
   ========================================================================== */
footer .content {
    max-width: var(--content-width-md);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 4rem 3.2rem;
    align-items: start;
    text-align: left;
}
footer .sitemap,
footer .footer-contact,
footer .footer-social {
    width: auto;
    padding-top: 0;
    border-top: 0;
    text-align: left;
}
footer .sitemap ul { justify-content: flex-start; }
footer .sitemap ul li,
footer .footer-contact li { width: auto; text-align: left; }
footer .footer-contact ul {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    gap: 1.2rem;
}
footer .h4 { text-align: left; }
footer .social_media ul { justify-content: flex-start; gap: .8rem; }
footer .social_media ul li a {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: hsla(0 0% 100% / .08);
    box-shadow: inset 0 0 0 1.5px hsla(0 0% 100% / .16);
    transition: var(--animate-fast);
}
footer .social_media ul li a i { font-size: 1.5rem; }
footer .social_media ul li a:hover {
    color: var(--color-bg-dark);
    background: #fff;
    box-shadow: none;
}

footer .logo { grid-column: 1; justify-self: start; margin: 0; }
footer .logo img { width: var(--footer-logo-width); height: auto; }
footer .h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--footer-heading-color);
    margin-bottom: 1.6rem;
}
/* Beat the framework's `footer .sitemap ul` (1 class) — stack the links. */
footer .sitemap nav ul,
footer .sitemap ul {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    gap: .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
footer .sitemap ul li { width: auto; }
footer .footer-contact li { line-height: 1.55; }
footer .footer-contact li strong {
    display: block;
    font-weight: 600;
    color: hsla(0 0% 100% / .4);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .2rem;
}
footer .signature {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 2.4rem;
    border-top: 1px solid hsla(0 0% 100% / .14);
    font-size: var(--footer-signature-size);
    text-align: left;
}

@media (max-width: 1024px) {
    footer .content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    footer .content { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. Session schedule  (Group Programs)
   --------------------------------------------------------------------------
   Markup comes from includes/templates/blocks/custom/schedule-block.php, which
   renders in two modes:
     .schedule-rollup — upcoming-session CARDS (homepage + Group Programs page)
     .schedule-list   — the per-program session ROWS on a program detail page
   Section 9 above styles the older .cf-session_* / .cf-program_type card meta;
   those fields have been superseded by real session records and their rules are
   now inert — kept only so any legacy content still renders.
   ========================================================================== */

/* --- Shared: the status pill ------------------------------------------- */
.session-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.session-status.is-available { color: #1c6b3a; background: hsla(145 59% 26% / .1); }
.session-status.is-full      { color: var(--color-heading); background: hsla(22 100% 60% / .18); }
.session-status.is-cancelled { color: var(--color-main); background: hsla(357 100% 42% / .08); }

/* --- Rollup cards ------------------------------------------------------ */
.schedule-rollup .session-card { position: relative; padding-top: 0; }
.schedule-rollup .session-card .content-wrapper { padding: 2.4rem; }

/* Calendar chip pinned to the card's top-left */
.session-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    padding: .9rem 0 1.1rem;
    background: var(--color-bg-dark);
    color: #fff;
    border-bottom-right-radius: var(--card-radius, 1.2rem);
}
.session-date__month {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.session-date__day {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.05;
}

.schedule-rollup .session-type { margin-bottom: .6rem; color: var(--color-main); }
.schedule-rollup .session-title { margin-bottom: 1rem; }
.schedule-rollup .session-when {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1.4rem;
}
.schedule-rollup .session-when > span {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.5rem;
    font-weight: 500;
}
.schedule-rollup .session-when > span::before {
    font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--color-main);
}
.schedule-rollup .session-full-date::before { content: "\f133"; }
.schedule-rollup .session-time::before { content: "\f017"; }
.schedule-rollup .session-description {
    color: var(--color-body);
    margin-bottom: 1.6rem;
}
.schedule-rollup .session-status { margin-bottom: 1.6rem; }
/* .card .button already renders the arrow-link CTA (section 8). */

/* --- Per-program rows --------------------------------------------------- */
.schedule-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border-light);
}
.schedule-row {
    display: grid;
    grid-template-columns: 18rem 1fr auto auto;
    align-items: center;
    gap: 1.6rem 2.4rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--color-border-light);
}
.schedule-row__date time {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-heading);
}
.schedule-row__title {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
}
.schedule-row__description {
    display: block;
    margin-top: .3rem;
    font-size: 1.4rem;
    color: var(--color-body);
}
.schedule-row__time {
    font-size: 1.5rem;
    color: var(--color-body);
    white-space: nowrap;
}
/* A cancelled session stays listed but reads as struck-through. */
.schedule-row.is-cancelled .schedule-row__date time,
.schedule-row.is-cancelled .schedule-row__title,
.schedule-row.is-cancelled .schedule-row__time { text-decoration: line-through; opacity: .6; }

.schedule-empty {
    color: var(--color-body);
    padding: 1.6rem 0;
    margin: 0;
}

@media (max-width: 768px) {
    .schedule-row {
        grid-template-columns: 1fr auto;
        gap: .6rem 1.6rem;
    }
    .schedule-row__date { grid-column: 1 / -1; }
    .schedule-row__detail { grid-column: 1 / -1; }
}

/* ==========================================================================
   19. Category section headings  (Our Team, grouped by position)
   --------------------------------------------------------------------------
   Emitted by the framework when a Pages widget has Category Limit = 1:
   <div class="category-header" data-category-id="N"><h3 class="category-title">…
   It lands as a direct child of .flex, and `.flex.flex-3 > *` sizes EVERY child
   to a third, so without this the heading would sit inline as a card-width cell.
   Styled in the site's eyebrow language (red dot + uppercase label) with a rule
   carrying to the right edge, so it reads as a divider rather than a card.
   ========================================================================== */
.flex > .category-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2.4rem;
}
/* The grid gap already spaces the first heading off whatever precedes it. */
.flex > .category-header:first-child { margin-top: 0; }

.category-header .category-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    flex: none;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-heading);
}
.category-header .category-title::before {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--color-main);
    box-shadow: 0 0 0 .4rem hsla(357 100% 42% / .14);
}
/* Rule that runs from the label to the right edge of the grid. */
.category-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border-light);
}

.dark .category-header .category-title,
.main .category-header .category-title { color: #fff; }
.dark .category-header::after,
.main .category-header::after { background: hsla(0 0% 100% / .18); }

@media (max-width: 640px) {
    .category-header .category-title { font-size: 1.3rem; }
}

/* ==========================================================================
   20. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .card:hover,
    .jqueryslidemenu nav > ul > li.highlight > a:hover { transform: none; }
    .card:hover .img-wrapper img { transform: none; }
}