/**
 * Soul 2 Path — soulpath-website.css
 *
 * The single stylesheet for all site chrome (header, footer, top strip,
 * country dropdown, mobile menu, buttons, accessibility utilities).
 *
 * Every color references a CSS variable from the Customizer palette
 * (see inc/soulpath-functions.php → s2p_output_palette_css).
 *
 * NO hardcoded hex codes. NO hardcoded rgba() with fixed white/black.
 *
 * Section-by-section page content lives in /assets/css/pages/ and is
 * conditionally enqueued — not in this file.
 *
 * Layout rule: backgrounds are full-bleed on outer elements,
 * content inside .bar-content gets the 10px L/R gutter.
 *
 * ┌──────────────────────────────────────────────────────────┐
 * │ TABLE OF CONTENTS                                        │
 * ├──────────────────────────────────────────────────────────┤
 * │ 1. SHARED PRIMITIVES                                     │
 * │    1a. .bar-content (the 10px gutter wrapper)            │
 * │    1b. .btn variants                                     │
 * │    1c. Accessibility utilities                           │
 * │                                                          │
 * │ 2. TOP STRIP                                             │
 * │                                                          │
 * │ 3. COUNTRY DROPDOWN                                      │
 * │                                                          │
 * │ 4. MAIN HEADER                                           │
 * │    4a. Logo / branding                                   │
 * │    4b. Primary navigation                                │
 * │    4c. Submenus                                          │
 * │    4d. Header action buttons                             │
 * │    4e. Mobile menu toggle                                │
 * │                                                          │
 * │ 5. HERO (front page only)                                │
 * │                                                          │
 * │ 6. FOOTER                                                │
 * │    6a. Top bar (logo + socials)                          │
 * │    6b. Columns                                           │
 * │    6c. Disclaimer column                                 │
 * │    6d. Contact column                                    │
 * │    6e. Footer bottom (copyright + policies)              │
 * │                                                          │
 * │ 7. RESPONSIVE                                            │
 * └──────────────────────────────────────────────────────────┘
 */

/* ============================================================
   1. SHARED PRIMITIVES
   ============================================================ */

/* ─── 1a. .bar-content ─────────────────────────────────────────
   The 10px-gutter wrapper used by every full-bleed bar
   (top strip, header, footer top bar, footer bottom strip).
   ─────────────────────────────────────────────────────────────── */
.bar-content {
    width: 100%;
    padding-left: var(--content-padding-x);
    padding-right: var(--content-padding-x);
    box-sizing: border-box;
}

/* ─── 1b. .btn — base + variants ───────────────────────────────
   Shared by header (Register/Login), CTAs, and anywhere else a
   button-styled link appears on a dark surface.
   ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    cursor: pointer;
    -webkit-transition: all var(--transition);
    transition: all var(--transition);
    /* iOS Safari: <button> elements default to system styling */
    -webkit-appearance: none;
    appearance: none;
    /* Edge/IE: prevent text spacing inconsistencies */
    text-rendering: optimizeLegibility;
    /* Safari: stop double-tap zoom on link buttons */
    touch-action: manipulation;
}

.btn--solid,
a.btn--solid,
a.btn--solid:link,
a.btn--solid:visited {
    background: var(--color-text-on-primary);
    color: var(--color-primary);
    border: 1px solid var(--color-text-on-primary);
}
.btn--solid:hover,
a.btn--solid:hover {
    background: transparent;
    color: var(--color-text-on-primary);
}

.btn--outline,
a.btn--outline,
a.btn--outline:link,
a.btn--outline:visited {
    background: transparent;
    color: var(--color-text-on-primary);
    border: 1px solid var(--color-text-on-primary);
}
.btn--outline:hover,
a.btn--outline:hover {
    background: var(--color-text-on-primary);
    color: var(--color-primary);
}

/* ─── 1c. Accessibility utilities ──────────────────────────────
   Standard _s patterns, kept here for consistency.
   ─────────────────────────────────────────────────────────────── */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.skip-link {
    background: var(--color-text-on-primary);
    color: var(--color-primary);
    padding: 8px 16px;
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-modal);
}
.skip-link:focus { left: 0; }


/* ============================================================
   2. TOP STRIP — full-bleed background, content 10px in
   ============================================================ */
.top-strip {
    background: #0d1b3e;
    color: var(--color-text-on-primary);
    padding: 16px 0;
    font-size: var(--fs-small);
    line-height: 1.4;
    position: relative;
}

.top-strip::before,
.top-strip::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.top-strip::before {
    background-image:
        radial-gradient(1px 1px at 4%  20%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 9%  70%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 14% 40%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 19% 85%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 24% 15%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(1px 1px at 29% 55%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 34% 30%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 39% 75%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 44% 10%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 49% 50%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 54% 88%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 59% 25%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 64% 65%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(1px 1px at 69% 35%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 74% 80%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 79% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 89% 42%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 94% 72%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 98% 28%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(1px 1px at 7%  90%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 16% 60%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 27% 35%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 37% 95%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 45%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 57% 5%,  rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 50%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 77% 92%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 87% 22%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(1px 1px at 97% 62%, rgba(255,255,255,0.70) 0%, transparent 100%);
    animation: s2p-stars-a 7s ease-in-out infinite alternate;
}

.top-strip::after {
    background-image:
        radial-gradient(2px 2px at 6%  35%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(2px 2px at 18% 65%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(2px 2px at 32% 20%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(2px 2px at 46% 80%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(2px 2px at 61% 45%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(2px 2px at 75% 15%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(2px 2px at 88% 70%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(2px 2px at 23% 50%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(2px 2px at 53% 88%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(2px 2px at 82% 38%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(3px 3px at 12% 25%, rgba(255,255,255,1.00) 0%, transparent 100%),
        radial-gradient(3px 3px at 38% 60%, rgba(255,255,255,1.00) 0%, transparent 100%),
        radial-gradient(3px 3px at 65% 30%, rgba(255,255,255,1.00) 0%, transparent 100%),
        radial-gradient(3px 3px at 91% 55%, rgba(255,255,255,1.00) 0%, transparent 100%),
        radial-gradient(3px 3px at 50% 10%, rgba(255,255,255,1.00) 0%, transparent 100%);
    animation: s2p-stars-b 9s ease-in-out infinite alternate;
}

@keyframes s2p-stars-a {
    0%   { opacity: 0.55; }
    35%  { opacity: 1.00; }
    65%  { opacity: 0.65; }
    100% { opacity: 0.90; }
}

@keyframes s2p-stars-b {
    0%   { opacity: 0.90; }
    30%  { opacity: 0.50; }
    60%  { opacity: 1.00; }
    100% { opacity: 0.70; }
}

.top-strip .bar-content {
    /* Mobile-first: logo on the left, country selector on the right.
       Standard 2-element flex space-between. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--space-sm);
}

/* Desktop: switch to a 3-column grid so the logo can sit dead-centre
   without the country selector shifting it off-axis.
     [ 1fr ] [ logo: auto ] [ 1fr ]
   The country selector lives in the right track and justifies itself
   to the end so it stays flush right. The left track is empty — it
   counter-weights the right track so the logo's centre is the page
   centre. */
@media (min-width: 768px) {
    .top-strip .bar-content {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        justify-content: initial;
    }
    .top-strip .bar-content > .site-branding {
        grid-column: 2;
        justify-self: center;
    }
    .top-strip .bar-content > .s2p-country {
        grid-column: 3;
        justify-self: end;
    }
}

/* The CARD / TEXT info blocks were removed (phone numbers are shown elsewhere
   on the page). The .top-strip__items / __item / __icon / __detail / __label
   / __value / __sub rules below are kept (as inert dead code) only because
   nothing references them — they're harmless if any cached page somehow
   still renders the old markup, but safe to delete on next cleanup pass. */
.top-strip__items {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.top-strip__item {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
}

.top-strip__icon {
    background: var(--color-on-primary-18);
    color: var(--color-text-on-primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.top-strip__detail {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.top-strip__label {
    color: var(--color-on-primary-90);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-strip__value {
    color: var(--color-text-on-primary);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.top-strip__value:hover {
    color: var(--color-on-primary-90);
}

.top-strip__sub {
    color: var(--color-on-primary-75);
    font-size: 11px;
}


/* ============================================================
   3. COUNTRY DROPDOWN — custom dropdown, native <select> hidden underneath
      for accessibility + no-JS fallback. The visible UI is a button that
      opens a menu of options, styled to match the palette and the rest
      of the site rather than the browser's native chrome.
   ============================================================ */

.s2p-country {
    position: relative;
    display: inline-block;
    font-family: var(--font-body);
}

/* Hide the native <select> visually but keep it accessible to screen
   readers and as a no-JS fallback. We don't use display: none because
   that removes it from the accessibility tree; instead we clip it to
   1px and absolutely position it on top of the trigger so a click on
   the still-visible trigger area also lands on the native select for
   no-JS browsers. */
.s2p-country__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* When JS runs and sets [data-js-enhanced], we pointer-events:none
       the native select so clicks go to our custom button instead. */
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    /* Remove all browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
}

.s2p-country[data-js-enhanced] .s2p-country__native {
    pointer-events: none;
}

/* The visible button that mimics the look of a <select> but is fully
   stylable. It's behind the native select in z-index until JS upgrades
   the widget — at which point JS sets the pointer-events flag above. */
.s2p-country__trigger {
    /* Reset button defaults */
    margin: 0;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Visual styling — sits inside the top strip, palette-aware */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-on-primary-10);
    border: 1px solid var(--color-on-primary-25);
    color: var(--color-text-on-primary);
    padding: 6px 14px 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
    -webkit-transition: background var(--transition), border-color var(--transition);
    transition: background var(--transition), border-color var(--transition);

    /* Behind the native select by default; JS raises it once enhanced */
    position: relative;
    z-index: 2;
}

.s2p-country__trigger:hover {
    background: var(--color-on-primary-18);
    border-color: var(--color-on-primary-35);
}

.s2p-country__trigger:focus-visible {
    outline: 2px solid var(--color-on-primary-50);
    outline-offset: 1px;
}

/* Open state — trigger gets a slightly more pronounced bg, chevron rotates */
.s2p-country[data-open="true"] .s2p-country__trigger {
    background: var(--color-on-primary-25);
    border-color: var(--color-on-primary-50);
}

/* Flag emoji — needs proper line-height alignment so it doesn't float */
.s2p-country__flag,
.s2p-country__option-flag {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    /* Some fonts shift emoji baseline; nudge back */
    transform: translateY(0.5px);
}

/* The country name (Australia, New Zealand, etc.) */
.s2p-country__name {
    /* Truncate if absurdly long, but normal country names fit easily */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Chevron — rotates 180° when menu is open */
.s2p-country__chevron {
    color: currentColor;
    flex-shrink: 0;
    margin-left: 2px;
    -webkit-transition: transform var(--transition);
    transition: transform var(--transition);
}

.s2p-country[data-open="true"] .s2p-country__chevron {
    transform: rotate(180deg);
}

/* The dropdown menu — appears below the trigger.
   Uses a light background (the page colour, not the top-strip dark) so
   options are clearly readable. Subtle shadow lifts it off the strip. */
.s2p-country__menu {
    /* Reset list defaults */
    list-style: none;
    margin: 0;
    padding: 6px;

    /* Position below the trigger, right-aligned to it */
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;

    /* Surface styling */
    background: var(--color-bg);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px var(--color-shadow);
    z-index: var(--z-dropdown);

    /* Animation in — opacity + slight translate-down from trigger.
       Tied to [hidden] via JS for the show/hide toggle. */
    -webkit-transition: opacity var(--transition-fast), transform var(--transition-fast);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.s2p-country__menu[hidden] {
    display: none;
}

/* Individual options inside the menu */
.s2p-country__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--color-text-strong);
    -webkit-transition: background var(--transition-fast);
    transition: background var(--transition-fast);
}

.s2p-country__option:hover,
.s2p-country__option:focus-visible,
.s2p-country__option.is-focused {
    background: var(--color-bg-soft);
    outline: none;
}

/* The currently-selected country — primary tint + bold + a check icon */
.s2p-country__option.is-current {
    background: var(--color-accent-soft);
    color: var(--color-primary);
    font-weight: 600;
}

/* On dark/strong primary backgrounds the soft-accent bg would clash;
   the rule above prevents it from going too dim. */

.s2p-country__option-name {
    flex: 1;
}

.s2p-country__option-check {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Mobile — make the menu full-width-ish so options aren't squashed */
@media (max-width: 480px) {
    .s2p-country__menu {
        right: 0;
        min-width: 180px;
    }
}


/* ============================================================
   4. MAIN HEADER — full-bleed background, content 10px in
   ============================================================ */
.site-header {
    background: #0d1b3e;
    color: var(--color-text-on-primary);
    position: relative;
    padding: 0;
}

.site-header .bar-content {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    min-height: 60px;
}

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ─── 4a. Logo text fallback ───
   Only used when there's no custom logo image set in Customizer.
   .site-branding above stays display:flex so the logo image is
   vertically centered inside the 72px bar. */
.site-logo {
    display: inline-block;
    color: var(--color-text-on-primary);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.75rem;
    text-decoration: none;
    line-height: 1;
}

/* Logo image sizing.
   The top-strip bar height is driven by 16px top + 16px bottom padding
   around the logo. With max-height: 60px that gives a 92px total bar
   height, which is fine because the top strip is now the brand zone
   (the old separate header bar was removed in v2026.05).

   width: auto keeps the aspect ratio. The display: block stops
   inline-baseline whitespace.

   .custom-logo-link is WordPress's wrapper when the_custom_logo()
   outputs; .wholelife-logo is the legacy class kept for backward
   compatibility. */
.custom-logo-link img,
.wholelife-logo img,
.site-branding img {
    max-height: 60px;
    width: auto;
    display: block;
}

/* ─── 4b. Primary navigation — mega menu ───
   Renders TWO menus inside .main-navigation:
     #primary-menu      → AU visitors
     #primary-menu-int  → International visitors
   CSS toggles which one shows via .s2p-country-int on the nav element.
   Top-level items push to the right (logo on left, menu+buttons flush right).
   ─────────────────────────────────────────────────────────────── */
.main-navigation {
    /* Fill the remaining header space so we have room to lay out menu
       items and right-pinned button items. */
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

/* The menu UL is a flex row.

   The walker emits two visual groups inside the same <ul>:
     1. Regular menu items — direct <li> children of the <ul>
     2. Button items — wrapped in <div class="s2p-nav-buttons"> by the
        s2p_group_nav_button_items() filter

   We want regular items CENTRED and the buttons FLUSH RIGHT (in line
   with the country selector that sits above them).

   To pull this off in pure flex:
     - The button wrapper gets margin-left: auto → consumes all remaining
       slack, pushes itself to the right edge.
     - For the regular items to be visually centred (not left-packed),
       we use a ::before pseudo-element on the UL that mirrors the
       button wrapper's role — empty spacer with flex: 1.
     - Net effect: [ 1fr empty ] [ regular items, auto ] [ 1fr buttons-right ]

   By default show AU, hide INT. The .s2p-country-int class on
   .main-navigation flips this. */
.primary-menu,
#primary-menu,
#primary-menu-int {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

/* Empty spacer pseudo before the first regular item. Equal flex weight
   to the button wrapper on the right, so the regular items in between
   end up at the page's visual centre. */
#primary-menu::before,
#primary-menu-int::before {
    content: '';
    flex: 1;
}

/* The button group sits flush right with equal flex weight to the
   leading spacer. flex: 1 makes it claim the right-hand counterpart of
   the leading spacer. justify-content: flex-end inside it stacks the
   actual button items flush right. */
.s2p-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The button <li>s sit naturally inside the wrapper — no need for the
   old margin-left:auto trick. The wrapper handles alignment. */

#primary-menu-int {
    display: none;
}

.main-navigation.s2p-country-int #primary-menu {
    display: none;
}

.main-navigation.s2p-country-int #primary-menu-int {
    display: flex;
}

/* Top-level items — stretch full height of the bar so the panel opens flush */
#primary-menu > li,
#primary-menu-int > li {
    position: static;          /* mega panel spans full header width */
    display: flex;
    align-items: stretch;
}

/* Top-level link — uppercase, small, with hover background flash */
#primary-menu > li > a,
#primary-menu-int > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-on-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 13px;
    height: 72px;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: none;
    -webkit-transition: background var(--transition);
    transition: background var(--transition);
}

#primary-menu > li > a:hover,
#primary-menu > li.s2p-mega-open > a,
#primary-menu-int > li > a:hover,
#primary-menu-int > li.s2p-mega-open > a {
    background: var(--color-on-primary-10);
    color: var(--color-text-on-primary);
}

/* Caret on items that have a submenu */
#primary-menu > li.menu-item-has-children > a::after,
#primary-menu-int > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--color-on-primary-65);
    margin-left: 5px;
    vertical-align: middle;
    -webkit-transition: -webkit-transform var(--transition);
    transition: transform var(--transition);
}

#primary-menu > li.s2p-mega-open.menu-item-has-children > a::after,
#primary-menu-int > li.s2p-mega-open.menu-item-has-children > a::after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Hide all submenus by default — only s2p-mega-open shows its panel */
#primary-menu .sub-menu,
#primary-menu-int .sub-menu {
    display: none;
}

/* ─── 4c. Mega panel — depth-0 submenu, full-width drawer ───
   Sits flush under the header bar. Uses the palette's bg-soft surface
   so it works in any colour scheme. */
#primary-menu > li.s2p-mega-open > .sub-menu,
#primary-menu-int > li.s2p-mega-open > .sub-menu {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-bg-soft);
    box-shadow: 0 8px 32px var(--color-shadow);
    padding: 32px 40px 36px;
    z-index: var(--z-dropdown);
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ─── Column count driven by data-cols on the panel ─── */
#primary-menu > li.s2p-mega-open > .sub-menu[data-cols="1"],
#primary-menu-int > li.s2p-mega-open > .sub-menu[data-cols="1"] {
    grid-template-columns: 320px 1fr 1fr;
}
#primary-menu > li.s2p-mega-open > .sub-menu[data-cols="2"],
#primary-menu-int > li.s2p-mega-open > .sub-menu[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 1fr;
}
#primary-menu > li.s2p-mega-open > .sub-menu[data-cols="3"],
#primary-menu-int > li.s2p-mega-open > .sub-menu[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ─── Depth-2: column wrappers ("Column 1/2/3" items) ─── */
/* Their <a> is hidden — they're layout-only groupers. A 1px divider
   line sits between adjacent columns; 36px horizontal padding gives
   each column visual breathing room. */
#primary-menu > li > .sub-menu > li,
#primary-menu-int > li > .sub-menu > li {
    display: block;
    background: none;
    border: none;
    padding: 0 36px 0 0;
    margin: 0;
}

#primary-menu > li > .sub-menu > li + li,
#primary-menu-int > li > .sub-menu > li + li {
    border-left: 1px solid var(--color-border);
    padding-left: 36px;
}

#primary-menu > li > .sub-menu > li:last-child,
#primary-menu-int > li > .sub-menu > li:last-child {
    padding-right: 0;
}

#primary-menu > li > .sub-menu > li > a,
#primary-menu-int > li > .sub-menu > li > a {
    display: none;   /* "Column 1/2/3" wrapper links are invisible */
}

/* ─── Depth-3: section list inside each column ─── */
#primary-menu > li > .sub-menu > li > .sub-menu,
#primary-menu-int > li > .sub-menu > li > .sub-menu {
    display: block;
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    border: none;
}

#primary-menu > li > .sub-menu > li > .sub-menu > li,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li {
    display: block;
    background: none;
    border: none;
    margin: 0;
}

/* 28px gap between sections within a column */
#primary-menu > li > .sub-menu > li > .sub-menu > li + li,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li + li {
    padding-top: 28px;
}

/* Depth-3 anchor — non-clickable section heading (small uppercase navy label) */
#primary-menu > li > .sub-menu > li > .sub-menu > li > a,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li > a {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    background: none;
    padding: 0 0 8px 0;
    margin-bottom: 6px;
    border: none;
    cursor: default;
    pointer-events: none;
    height: auto;
    white-space: normal;
}

/* ─── Depth-4: actual page links ─── */
#primary-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li > .sub-menu {
    display: block;
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    border: none;
}

#primary-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li > .sub-menu > li {
    display: block;
    background: none;
    border: none;
    margin-bottom: 1px;
}

#primary-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: var(--color-primary);
    background: none;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 5px 0;
    height: auto;
    line-height: 1.45;
    border: none;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    transition: padding-left var(--transition);
}

#primary-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a::before,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a::before {
    content: '›';
    font-size: 16px;
    line-height: 1;
    color: var(--color-primary);
    flex-shrink: 0;
}

#primary-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a:hover,
#primary-menu-int > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a:hover {
    color: var(--color-primary);
    background: none;
    padding-left: 4px;
}


/* ─── 4d. Register / Login / Dashboard button-style menu items ───
   Applied to menu items via "CSS Classes" field in Appearance → Menus:
     .s2p-register-btn   → filled pill (text-on-primary background)
     .s2p-login-btn      → outline pill (transparent background)
     .custom-menu-class  → Dashboard pill (legacy class for logged-in users)

   These items are pulled out of the flat <ul> by s2p_group_nav_button_items()
   in inc/soulpath-mega-menu.php and re-parented into a <div class="s2p-nav-buttons">
   wrapper. The selectors below target the buttons inside that wrapper —
   the same classes won't match if they appear as direct children of the
   <ul> (they no longer do in our markup).

   Shared rules below lock both pill buttons to identical box dimensions
   regardless of text length, so they always look like a matched pair.
   Sizing comes ONLY from the shared block — Register/Login specific
   blocks only change colours (background, text, border). */

.s2p-nav-buttons > li.s2p-register-btn,
.s2p-nav-buttons > li.s2p-login-btn,
.s2p-nav-buttons > li.custom-menu-class {
    display: flex;
    align-items: center;
}

/* Spacing between buttons */
.s2p-nav-buttons > li.s2p-register-btn {
    margin-left: var(--space-sm);
    margin-right: 8px;
}
.s2p-nav-buttons > li.s2p-login-btn {
    margin-left: 8px;
}

/* SHARED pill box — identical width, height, padding, font, border thickness.
   Only the colour properties differ between Register and Login below. */
.s2p-nav-buttons > li.s2p-register-btn > a,
.s2p-nav-buttons > li.s2p-login-btn > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 110px;
    height: 40px;
    padding: 0 22px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
    -webkit-transition: background var(--transition), color var(--transition), border-color var(--transition);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Register — filled pill */
.s2p-nav-buttons > li.s2p-register-btn > a {
    background: var(--color-text-on-primary);
    color: var(--color-primary) !important;
    border-color: var(--color-text-on-primary);
}
.s2p-nav-buttons > li.s2p-register-btn > a:hover {
    background: transparent;
    color: var(--color-text-on-primary) !important;
    border-color: var(--color-text-on-primary);
}

/* Login — outline pill */
.s2p-nav-buttons > li.s2p-login-btn > a {
    background: transparent;
    color: var(--color-text-on-primary);
    border-color: var(--color-on-primary-65);
}
.s2p-nav-buttons > li.s2p-login-btn > a:hover {
    background: var(--color-text-on-primary);
    color: var(--color-primary);
    border-color: var(--color-text-on-primary);
}

/* Dashboard pill — separate menu class for logged-in users */
.s2p-nav-buttons > li.custom-menu-class > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-on-primary-65);
    border-radius: 20px;
    padding: 6px 16px;
    height: auto;
    line-height: 1;
    align-self: center;
    color: var(--color-text-on-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    background: transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.s2p-nav-buttons > li.custom-menu-class > a:hover {
    background: var(--color-on-primary-15);
    color: var(--color-text-on-primary);
}

/* ─── 4e. Cloudflare "secured by" badge inside the mega menu ─── */
.s2p-secured-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
    height: 100%;
    color: var(--color-primary);
}
.s2p-secured-badge__label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-primary);
    margin: 0 0 10px;
    font-weight: 400;
}

/* ─── 4f. Mobile breakpoint ───
   Below 993px the mega panels are killed; the hamburger menu takes over.
   The full-screen mobile menu rendering itself is handled in
   header.php (#s2p-mobile-menu-container) and toggled by soulpath-mega-menu.js. */
@media (max-width: 992px) {
    .main-navigation {
        /* Bar-content uses flex with justify-content; let nav fill the
           right side and push the toggle to the rightmost edge. */
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    /* Both desktop menus are hidden on mobile — the hamburger drives a
       separate mobile menu container. */
    #primary-menu,
    #primary-menu-int {
        display: none;
    }
    .main-navigation.s2p-country-int #primary-menu-int {
        display: none;
    }

    /* Show the hamburger toggle button on mobile, pinned to the right of
       the header bar. The .bar-content padding (10px) provides the right-edge
       gutter; the button itself is 8px padded so total gap from screen edge
       is ~18px which matches the rest of the site. */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
    }
}

/* ─── Mobile top strip ───
   Top strip is now just logo + country dropdown at all viewport sizes
   (the CARD/TEXT info blocks were removed). Same layout on mobile as
   desktop — logo flush left, country flush right, space-between. */
@media (max-width: 768px) {
    .top-strip {
        padding: 12px 0;
    }
    .top-strip .bar-content {
        /* Keep space-between; just ensure neither side wraps under the other */
        flex-wrap: nowrap;
    }
}

/* ─── 4f. Latest Post card — promo card inside the mega menu ───
   Rendered by the s2p_latest_post_filter() walker_nav_menu_start_el
   filter in inc/soulpath-mega-menu.php. The PHP replaces any menu
   item tagged with the CSS class "s2p-latest-post" with a dynamic
   card showing the most recent published post (thumbnail, category
   bar, "Latest" badge, title), cached for an hour via a transient.

   The card lives at depth 3 inside the mega panel — the same level
   as ordinary page links — but its rendered <a> uses the
   .s2p-latest-post-card class so the rules below can target it
   without inheriting the depth-3 link styling (the › glyph, the
   navy text, the hover padding-shift).

   Copied 1:1 from the legacy header.css spec — !important throughout
   because the rules need to defeat every inherited mega-menu link
   style and parent-theme link reset. */

/* Nuke every inherited arrow, caret and pseudo on the card and all children */
#primary-menu li.s2p-latest-post a.s2p-latest-post-card::before,
#primary-menu li.s2p-latest-post a.s2p-latest-post-card::after,
#primary-menu-int li.s2p-latest-post a.s2p-latest-post-card::before,
#primary-menu-int li.s2p-latest-post a.s2p-latest-post-card::after {
    content: none !important;
    display: none !important;
    border: none !important;
    width: 0 !important; height: 0 !important; margin: 0 !important;
}

/* The card itself */
#primary-menu a.s2p-latest-post-card,
#primary-menu-int a.s2p-latest-post-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    padding: 0 !important; margin: 0 !important;
    background: none !important; border: none !important;
    height: auto !important;
    cursor: pointer !important;
    gap: 0 !important;
    position: relative !important;
    max-width: 280px !important;
    white-space: normal !important;
    font-size: inherit !important;
    text-transform: none !important; letter-spacing: normal !important;
    color: inherit !important;
    overflow: visible !important;
}
#primary-menu a.s2p-latest-post-card:hover,
#primary-menu-int a.s2p-latest-post-card:hover {
    text-decoration: none !important;
    background: none !important;
    padding-left: 0 !important;
    color: inherit !important;
}

/* Badge overlaps top-left of image */
#primary-menu a.s2p-latest-post-card .s2p-latest-badge,
#primary-menu-int a.s2p-latest-post-card .s2p-latest-badge {
    position: absolute !important;
    top: 12px !important; left: 12px !important;
    z-index: 3 !important;
    display: inline-flex !important; align-items: center !important;
    gap: 6px !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important; font-weight: 800 !important;
    color: #27ae60 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    margin: 0 !important; border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    line-height: 1 !important;
    height: auto !important; width: auto !important;
    pointer-events: none !important;
}
#primary-menu a.s2p-latest-post-card .s2p-latest-dot,
#primary-menu-int a.s2p-latest-post-card .s2p-latest-dot {
    width: 9px !important; height: 9px !important;
    border-radius: 50% !important;
    background: #27ae60 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Image wrapper — holds image + category bar */
#primary-menu a.s2p-latest-post-card .s2p-latest-img-wrap,
#primary-menu-int a.s2p-latest-post-card .s2p-latest-img-wrap {
    display: block !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    padding: 0 !important; border: none !important; background: none !important;
    position: relative !important;
    height: auto !important;
}
#primary-menu a.s2p-latest-post-card .s2p-latest-img-wrap img,
#primary-menu-int a.s2p-latest-post-card .s2p-latest-img-wrap img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* Category bar — full width across bottom of image */
#primary-menu a.s2p-latest-post-card .s2p-latest-cat,
#primary-menu-int a.s2p-latest-post-card .s2p-latest-cat {
    display: block !important;
    width: 100% !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #fff !important;
    background: rgba(44, 85, 148, 0.88) !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    margin: 0 !important; border: none !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important;
    z-index: 2 !important;
    height: auto !important; line-height: 1 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Left-aligned title below image */
#primary-menu a.s2p-latest-post-card .s2p-latest-title,
#primary-menu-int a.s2p-latest-post-card .s2p-latest-title {
    font-family: Georgia, serif !important;
    font-size: 18px !important; font-weight: 700 !important;
    color: #1E3F7A !important;
    line-height: 1.3 !important;
    text-transform: none !important; letter-spacing: normal !important;
    padding: 0 !important; margin: 0 !important;
    border: none !important; background: none !important;
    text-align: left !important;
    height: auto !important;
    width: 100% !important;
    max-width: 280px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    display: block !important;
    pointer-events: none !important;
}
#primary-menu a.s2p-latest-post-card:hover .s2p-latest-title,
#primary-menu-int a.s2p-latest-post-card:hover .s2p-latest-title {
    color: #4169A8 !important;
}

/* ─── Latest Post card — mobile (≤ 992px) ───
   The mobile drawer renders the card without the #primary-menu
   scoping (the card lives inside .mobile-menu-container, not the
   desktop nav). Mobile gets its own padding, and the badge offsets
   inward to account for the card's own 12px/16px padding. */
@media screen and (max-width: 992px) {

    a.s2p-latest-post-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-decoration: none !important;
        padding: 12px 16px !important;
        position: relative !important;
        max-width: 100% !important;
        background: none !important;
        overflow: visible !important;
    }
    a.s2p-latest-post-card::before,
    a.s2p-latest-post-card::after {
        content: none !important;
        display: none !important;
    }
    a.s2p-latest-post-card:hover { text-decoration: none !important; }

    .s2p-latest-badge {
        position: absolute !important;
        top: 24px !important; left: 28px !important;
        z-index: 3 !important;
        display: inline-flex !important; align-items: center !important;
        gap: 6px !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important; font-weight: 800 !important;
        color: #27ae60 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        padding: 5px 12px !important;
        border-radius: 6px !important;
        margin: 0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .s2p-latest-dot {
        width: 9px !important; height: 9px !important;
        border-radius: 50% !important;
        background: #27ae60 !important;
        display: inline-block !important;
    }

    .s2p-latest-img-wrap {
        display: block !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
        position: relative !important;
    }
    .s2p-latest-img-wrap img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }

    .s2p-latest-cat {
        display: block !important;
        width: 100% !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important; font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: #fff !important;
        background: rgba(44, 85, 148, 0.88) !important;
        padding: 10px 16px !important;
        border-radius: 0 !important;
        position: absolute !important;
        bottom: 0 !important; left: 0 !important;
        margin: 0 !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
    }

    .s2p-latest-title {
        font-family: Georgia, serif !important;
        font-size: 18px !important; font-weight: 700 !important;
        color: #1E3F7A !important;
        line-height: 1.3 !important;
        text-align: left !important;
        margin: 0 !important; padding: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        max-width: 100% !important;
        display: block !important;
    }
}

/* ─── 4e. Mobile menu toggle ─── */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text-on-primary);
    padding: 8px;
    cursor: pointer;
    /* iOS Safari: strip system button rendering */
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-on-primary);
    position: relative;
}
.menu-toggle__bar::before { content: ''; position: absolute; top: -7px; left: 0; right: 0; }
.menu-toggle__bar::after  { content: ''; position: absolute; top:  7px; left: 0; right: 0; }


/* ============================================================
   4g. MOBILE MENU DRAWER — full-screen overlay panel.
   Triggered by .menu-toggle button. Visible only at ≤992px (hidden
   completely on desktop via the [@media (min-width: 993px)] block below).

   Design language matches the original Soul 2 Path mobile menu:
   white surface with palette-blue text (so navigation reads as
   "branded content area", not "dark sidebar").
   ============================================================ */

.s2p-mobile-menu {
    /* Default closed — JS sets [data-open="true"] to reveal */
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    /* The panel is full-screen, so no separate backdrop element is needed —
       the panel itself fades+slides in over the entire viewport. */
}

.s2p-mobile-menu[data-open="true"] {
    pointer-events: auto;
}

/* The panel — full-screen white surface, slides in from the right */
.s2p-mobile-menu__panel {
    position: absolute;
    inset: 0;
    background: var(--color-bg);
    color: var(--color-text-strong);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    -webkit-transition: transform var(--transition-slow), opacity var(--transition);
    transition: transform var(--transition-slow), opacity var(--transition);
}

.s2p-mobile-menu[data-open="true"] .s2p-mobile-menu__panel {
    transform: translateX(0);
    opacity: 1;
}

/* ─── Panel header — mirrors the site header ─── */
.s2p-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    flex-shrink: 0;
    min-height: 72px;
}

.s2p-mobile-menu__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-on-primary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

.s2p-mobile-menu__brand img,
.s2p-mobile-menu__brand .custom-logo {
    max-height: 40px;
    width: auto;
    display: block;
}

.s2p-mobile-menu__close {
    background: none;
    border: none;
    color: var(--color-text-on-primary);
    padding: 10px;
    margin: -10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
    -webkit-transition: background var(--transition);
    transition: background var(--transition);
}

.s2p-mobile-menu__close:hover,
.s2p-mobile-menu__close:focus-visible {
    background: var(--color-on-primary-15);
    outline: none;
}

.s2p-mobile-menu__close svg {
    display: block;
}

/* ─── Dashboard button (logged-in only) ─── */
.s2p-mobile-menu__dashboard-wrap {
    padding: 20px;
    background: var(--color-bg-soft);
    flex-shrink: 0;
}

.s2p-mobile-menu__dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    padding: 0 22px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    -webkit-transition: background var(--transition);
    transition: background var(--transition);
}

.s2p-mobile-menu__dashboard:hover,
.s2p-mobile-menu__dashboard:focus-visible {
    background: var(--color-primary-dark);
    outline: none;
}

/* ─── Register + Login buttons (logged-out state) ─── */
.s2p-mobile-menu__auth-wrap {
    display: flex;
    gap: 10px;
    background: var(--color-primary);
}

.s2p-mobile-menu__register {
    background: var(--color-text-on-primary);
    color: var(--color-primary);
    border: 2px solid var(--color-text-on-primary);
    flex: 1;
}

.s2p-mobile-menu__register:hover,
.s2p-mobile-menu__register:focus-visible {
    background: var(--color-on-primary-15);
    color: var(--color-text-on-primary);
    border-color: var(--color-text-on-primary);
    outline: none;
}

.s2p-mobile-menu__login {
    background: transparent;
    color: var(--color-text-on-primary);
    border: 2px solid var(--color-on-primary-50);
    flex: 1;
}

.s2p-mobile-menu__login:hover,
.s2p-mobile-menu__login:focus-visible {
    background: var(--color-on-primary-15);
    border-color: var(--color-text-on-primary);
    outline: none;
}

/* ─── Scrollable nav body ─── */
.s2p-mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg);
}

.s2p-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* AU vs International menu — only one visible, controlled by parent class */
.s2p-mobile-menu .s2p-mobile-menu__list--int       { display: none; }
.s2p-mobile-menu.s2p-country-int .s2p-mobile-menu__list--au  { display: none; }
.s2p-mobile-menu.s2p-country-int .s2p-mobile-menu__list--int { display: block; }

/* ─── Top-level items (HOME, OUR PSYCHICS, etc.) ─── */
.s2p-mobile-menu__list > li {
    border-bottom: 1px solid var(--color-border);
}

.s2p-mobile-menu__list > li > a {
    display: block;
    padding: 18px 24px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    -webkit-transition: background var(--transition), color var(--transition);
    transition: background var(--transition), color var(--transition);
}

.s2p-mobile-menu__list > li > a:hover,
.s2p-mobile-menu__list > li > a:focus-visible {
    background: var(--color-bg-soft);
    outline: none;
}

/* ─── Submenu — eyebrow label + indented list of children with chevron ─── */
.s2p-mobile-menu__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0 12px;
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
}

.s2p-mobile-menu__list .sub-menu li {
    border: none;
}

.s2p-mobile-menu__list .sub-menu li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px 10px 36px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    -webkit-transition: background var(--transition), padding-left var(--transition);
    transition: background var(--transition), padding-left var(--transition);
}

/* Chevron arrow before each submenu link, like in the original */
.s2p-mobile-menu__list .sub-menu li > a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 0.6;
}

.s2p-mobile-menu__list .sub-menu li > a:hover,
.s2p-mobile-menu__list .sub-menu li > a:focus-visible {
    background: var(--color-accent-soft);
    padding-left: 40px;
    outline: none;
}

/* ─── Register and Login (when present as menu items with CSS classes) ───
   Render as full-width pill buttons at the bottom of the list. */
.s2p-mobile-menu__list > li.s2p-register-btn,
.s2p-mobile-menu__list > li.s2p-login-btn {
    border-bottom: none;
    padding: 8px 20px;
}

.s2p-mobile-menu__list > li.s2p-register-btn > a,
.s2p-mobile-menu__list > li.s2p-login-btn > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid transparent;
}

.s2p-mobile-menu__list > li.s2p-register-btn > a {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

.s2p-mobile-menu__list > li.s2p-login-btn > a {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.s2p-mobile-menu__list > li.s2p-register-btn > a:hover,
.s2p-mobile-menu__list > li.s2p-register-btn > a:focus-visible,
.s2p-mobile-menu__list > li.s2p-login-btn > a:hover,
.s2p-mobile-menu__list > li.s2p-login-btn > a:focus-visible {
    background: var(--color-primary-dark);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary-dark);
    outline: none;
}

/* Desktop hides the drawer completely — saves a paint pass and prevents
   accidental tab-focus into hidden content. */
@media (min-width: 993px) {
    .s2p-mobile-menu {
        display: none !important;
    }
}

/* Body lock when drawer open — prevents background scroll on iOS where
   position:fixed alone isn't enough. Applied by JS. */
body.s2p-mobile-menu-open {
    overflow: hidden;
}


/* ============================================================
   5. HERO CAROUSEL — front page only.
   Slides come from FB001_BRANWELL_HEROTEXT via s2p_get_hero_slides().
   Each slide has its own bg_image; content sits 10px in via .bar-content.

   Heights match the original site:
     desktop ≥ 769px   → 400px fixed
     tablet  ≤ 768px   → 320px min-height (auto)
     small   ≤ 576px   → 300px min-height
     mobile  ≤ 480px   → 280px min-height
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-dark);  /* fallback before slide bgs load */
    color: var(--color-text-on-primary);
    height: 400px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* ─── Individual slide ───
   Photo anchored LEFT (so the subject in the bg image stays on the
   left side of the viewport and the text column sits on the right
   half over a darker zone of the photo).
   Content alignment: end (right) on desktop. Mobile flips to center.  */
.hero__slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: var(--color-primary-dark);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* When only one slide exists, position: absolute would collapse the .hero
   height to 0 because there's nothing in normal flow. The first slide must
   contribute height so the section renders. */
.hero[data-slide-count="1"] .hero__slide {
    position: relative;
}

/* ─── Overlay — HIDDEN on desktop (photo is dark enough on the right
   side because of left-anchoring + dark gradient backgrounds).
   ENABLED on mobile (where the photo fills the whole frame and the
   text needs separation).  Mobile media query toggles display: block. */
.hero__overlay {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    background-image: -webkit-linear-gradient(
        var(--color-primary-dark),
        var(--color-primary-dark)
    );
    background-image: linear-gradient(
        var(--color-primary-dark),
        var(--color-primary-dark)
    );
    opacity: 0.80;
    pointer-events: none;
}

/* ─── Inner content wrapper (10px gutter respected) ─── */
.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.hero__content {
    /* Right-anchored column on desktop. Mobile resets via the @media block. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: right;
    max-width: 580px;
    margin-left: auto;
    padding: 44px 56px;
    box-sizing: border-box;
}

/* ─── Pill / badge ─── */
.hero__badge {
    display: inline-block;
    border: 1px solid var(--color-on-primary-50);
    background: var(--color-on-primary-12);
    border-radius: var(--radius-pill);
    padding: 5px 16px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-on-primary-90);
    margin-bottom: 20px;
}

/* ─── Headings ─── */
.hero__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    color: var(--color-text-on-primary);
    font-size: 42px;
    line-height: 1.15;
    margin: 0 0 16px 0;
}
.hero__title-line1 { display: block; }
.hero__title-line2 {
    display: block;
    /* True italic Poppins — emphasizes the second line of the hero
       headline and matches the "Free Reading" style of the original. */
    font-style: italic;
    font-weight: 700;
    color: var(--color-text-on-primary);
}

/* ─── Body lead ─── */
.hero__lead {
    color: var(--color-text-on-primary);
    margin: 0 0 28px 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    max-width: 420px;
}

/* ─── CTA button (.hero__cta — also accepts plugin classes like bw-locgeo-btn) ─── */
.hero__cta {
    display: inline-block;
    background: var(--color-text-on-primary);
    color: var(--color-primary);
    padding: 14px 34px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    -webkit-transition: opacity var(--transition);
    transition: opacity var(--transition);
    touch-action: manipulation;
}
.hero__cta:hover {
    opacity: 0.9;
    color: var(--color-primary);
}

/* ─── Fine print ─── */
.hero__fine {
    display: block;
    margin-top: 12px;
    color: var(--color-on-primary-50);
    font-family: var(--font-body);
    font-size: 11px;
}

/* ─── Dot navigation ─── */
.hero__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}

.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--color-on-primary-35);
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-transition: background var(--transition-slow), -webkit-transform var(--transition-slow);
    transition: background var(--transition-slow), transform var(--transition-slow);
    touch-action: manipulation;
}

.hero__dot:hover {
    background: var(--color-on-primary-65);
}

.hero__dot.is-active {
    background: var(--color-on-primary-90);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
}

.hero__dot:focus,
.hero__dot:focus-visible {
    outline: 2px solid var(--color-on-primary-50);
    outline-offset: 2px;
}

/* ─── Prev / next arrows ───
   Hidden by default; fade in when the hero is hovered or any element
   inside it has keyboard focus. SVG icons centered via flexbox.
   On touch devices (which can't hover), arrows are hidden on small
   screens via the responsive block below. */
.hero__arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-on-primary-35);
    background: var(--color-on-primary-15);
    color: var(--color-text-on-primary);
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 250ms ease, visibility 250ms ease, background var(--transition);
    transition: opacity 250ms ease, visibility 250ms ease, background var(--transition);
    touch-action: manipulation;
}

.hero__arrow svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero:hover .hero__arrow,
.hero:focus-within .hero__arrow {
    opacity: 1;
    visibility: visible;
}

.hero__arrow:hover {
    background: var(--color-on-primary-25);
}

.hero__arrow:focus,
.hero__arrow:focus-visible {
    outline: 2px solid var(--color-on-primary-50);
    outline-offset: 2px;
    opacity: 1;
    visibility: visible;
}

.hero__arrow--prev { left: var(--content-padding-x); }
.hero__arrow--next { right: var(--content-padding-x); }

/* ─── Responsive — heights and content alignment match the original site ─── */

/* Tablet: height auto / min 320px, content centers, overlay enables,
   heading scales down to 28px */
@media (max-width: 768px) {
    .hero {
        height: auto;
        /* Taller min-height so content doesn't feel cramped — matches the
           original site's generous mobile hero presence (was 320px). */
        min-height: 520px;
    }
    .hero__slide {
        min-height: 520px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .hero__overlay {
        display: block;
    }
    .hero__inner {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .hero__content {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        /* Generous vertical breathing room, comfortable horizontal padding.
           48px top/bottom matches the original's spaciousness; 20px sides
           keeps copy off the screen edge without crushing line lengths. */
        padding: 48px 20px;
    }
    .hero__title {
        /* Bigger heading on mobile to match the original — was 28px. The
           italic display weight needs more presence to read as a hero. */
        font-size: 32px;
        line-height: 1.2;
    }
    .hero__lead {
        font-size: 16px;
        line-height: 1.6;
        /* Desktop set max-width:420px; release it on mobile so the lead
           fills its centered container naturally without the 420px clamp
           creating awkward narrow line lengths inside an already-narrow
           viewport. */
        max-width: 100%;
    }
    /* Arrows off on mobile — dots are enough */
    .hero__arrow {
        display: none;
    }
}

/* Small phones: 480px min, keep generous heading scale */
@media (max-width: 576px) {
    .hero {
        min-height: 480px;
    }
    .hero__slide {
        min-height: 480px;
    }
}

/* Tiny phones — heading scales down to fit narrower viewports without
   forcing line breaks mid-word. */
@media (max-width: 480px) {
    .hero {
        min-height: 460px;
    }
    .hero__slide {
        min-height: 460px;
    }
    .hero__title {
        font-size: 28px;
    }
    .hero__content {
        /* Slightly tighter horizontal padding on the smallest screens to
           give the copy more breathing space. */
        padding: 40px 16px;
    }
}


/* ============================================================
   6. FOOTER — full-bleed dark band
   Backgrounds run wall-to-wall; content sits in .bar-content (10px L/R).
   Two parallel structures:
     .desktop-footer → visible >768px
     .mobile-footer  → visible ≤768px (accordion-collapsed)
   ============================================================ */
.site-footer {
    background: var(--color-primary-dark);
    color: var(--color-text-on-primary);
    font-family: var(--font-body);
    border-top: none;
    position: relative;
    flex: 0 0 auto;
}

/* No padding on the footer's .bar-content wrapper — each inner section
   (.footer-top-bar, .footer-columns, .footer-bottom) controls its own
   vertical rhythm, matching the original site. */
.site-footer > .bar-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* Desktop footer hidden on small screens (mobile footer takes over) */
@media (max-width: 768px) {
    .desktop-footer { display: none; }
}

/* Mobile footer hidden on large screens. !important defeats any
   parent-theme rule that might override this. */
.mobile-footer,
.mobile-footer-bottom,
.mobile-footer-container { display: none !important; }
@media (max-width: 768px) {
    .mobile-footer { display: block !important; }
    .mobile-footer-container { display: block !important; }
    .mobile-footer-bottom { display: block !important; }
}

/* ─── 6a. Top bar: logo left, socials right ───
   Padding matches the original site: 32px above, 28px below. */
.footer-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0 28px;
    border-bottom: 1px solid var(--color-on-primary-12);
    margin-bottom: 36px;
    gap: var(--space-md);
}

.footer-logo a {
    display: inline-block;
    color: var(--color-text-on-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.75rem;
}

.footer-logo img {
    max-width: 160px;
    height: auto;
    display: block;
}

.social-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Round social-icon button — 32px circle, 18px SVG inside, currentColor fill */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-on-primary-12);
    color: var(--color-text-on-primary);
    text-decoration: none;
    -webkit-transition: background var(--transition);
    transition: background var(--transition);
    touch-action: manipulation;
}

.social-icon:hover,
.social-icon:focus {
    background: var(--color-on-primary-25);
    color: var(--color-text-on-primary);
}

.social-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* ─── 6b. Columns ───
   Padding-bottom and gap match the original site (36px / 40px). */
.footer-columns {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 36px;
}

.footer-column h3,
.footer-contact-col h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-on-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu a {
    color: var(--color-on-primary-65);
    text-decoration: none;
    font-size: 14px;
    -webkit-transition: color var(--transition);
    transition: color var(--transition);
}

.footer-menu a:hover {
    color: var(--color-text-on-primary);
}

/* ─── 6c. Disclaimer column ─── */
.footer-disclaimer-col {
    display: flex;
    flex-direction: column;
}

.footer-disclaimer-col .taglines {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-on-primary-65);
    margin: 0;
}

.footer-disclaimer-col .taglines p {
    margin: 0 0 12px 0;
}

.footer-disclaimer-col .abn {
    font-size: 12px;
    color: var(--color-on-primary-35);
    margin-top: auto;
}

/* ─── 6d. Contact column — circle outline + 16×16 SVG (map pin / phone / mail) ─── */
.footer-contact-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.footer-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--color-on-primary-35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-on-primary);
}

.footer-contact-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.footer-contact-text {
    font-size: 13px;
    color: var(--color-on-primary-75);
    line-height: 1.6;
    padding-top: 6px;
}

.footer-contact-text a {
    color: var(--color-on-primary-75);
    text-decoration: none;
    -webkit-transition: color var(--transition);
    transition: color var(--transition);
}

.footer-contact-text a:hover {
    color: var(--color-text-on-primary);
}

/* ─── 6e. Footer bottom — separate full-bleed darker band, compact 14px 20px ───
   Override the .bar-content default top/bottom padding so the bottom strip
   is thin, matching the original site. */
.footer-bottom {
    background: var(--color-shadow);
    border-top: 1px solid var(--color-on-primary-10);
}

.footer-bottom .bar-content,
.footer-bottom .footer-bottom__inner {
    padding-top: 14px;
    padding-bottom: 14px;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--color-on-primary-50);
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.copyright {
    margin: 0;
    color: var(--color-on-primary-50);
    font-size: 12px;
}

.policies {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.policies a {
    color: var(--color-on-primary-50);
    text-decoration: none;
    font-size: 12px;
    -webkit-transition: color var(--transition);
    transition: color var(--transition);
}

.policies a:hover {
    color: var(--color-text-on-primary);
}

/* Mobile bottom strip — center everything on narrow screens */
@media (max-width: 768px) {
    .footer-bottom__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* ─── 6f. Mobile footer (≤768px only) ─── */
.mobile-footer {
    background: var(--color-primary-dark);
    color: var(--color-text-on-primary);
    padding: 24px 10px 0;
}

.mobile-footer-container {
    max-width: 100%;
}

.mobile-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-on-primary-12);
    margin-bottom: 18px;
    gap: 12px;
}

.mobile-logo a,
.mobile-logo .footer-logo__text {
    color: var(--color-text-on-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.4rem;
}

.mobile-logo img {
    max-width: 120px;
    height: auto;
    display: block;
}

.mobile-tagline {
    text-align: right;
}

.mobile-tagline__primary {
    margin: 0;
    color: var(--color-on-primary-90);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.mobile-tagline__secondary {
    margin: 0;
    color: var(--color-on-primary-65);
    font-size: 0.85rem;
    line-height: 1.2;
}

.mobile-social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

/* Accordion sections */
.mobile-accordion {
    border-top: 1px solid var(--color-on-primary-12);
}

.accordion-item {
    border-bottom: 1px solid var(--color-on-primary-12);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    background: none;
    border: none;
    color: var(--color-text-on-primary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.accordion-toggle {
    font-size: 18px;
    color: var(--color-on-primary-65);
    line-height: 1;
}

.accordion-content {
    display: none;          /* toggled by JS in footer.php */
    padding: 0 0 14px 0;
}

.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-content a {
    color: var(--color-on-primary-65);
    text-decoration: none;
    font-size: 14px;
    -webkit-transition: color var(--transition);
    transition: color var(--transition);
}

.accordion-content a:hover {
    color: var(--color-text-on-primary);
}

.accordion-content li {
    color: var(--color-on-primary-65);
    font-size: 14px;
}

/* Mobile bottom area (inside .mobile-footer, separate from .footer-bottom).
   No top border — the last .accordion-item's bottom border already provides
   the separator. A second border here would create a visible double line. */
.mobile-footer-bottom {
    padding: 18px 0;
    text-align: center;
    margin-top: 8px;
}

.mobile-copyright,
.mobile-address {
    color: var(--color-on-primary-50);
    font-size: 11px;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.mobile-policies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 10px;
}

.mobile-policies a {
    color: var(--color-on-primary-50);
    text-decoration: none;
    font-size: 11px;
    -webkit-transition: color var(--transition);
    transition: color var(--transition);
}

.mobile-policies a:hover {
    color: var(--color-text-on-primary);
}




/* ============================================================
   6d. BREADCRUMBS — removed (schema-only mode).
   The site now emits Schema.org BreadcrumbList JSON-LD via the
   wp_head hook in inc/soulpath-breadcrumbs.php. No visible markup
   is rendered, so no CSS is needed. The previous .s2p-breadcrumbs
   rules were removed in May 2026. Section number reserved in case
   visible breadcrumbs are re-introduced later.
   ============================================================ */




/* ============================================================
   6e. SHARED SECTION HEADER — palette-driven, Option C layout.
   Used by plugins and theme templates that need an introductory
   header block (eyebrow + title + italic emphasis + tagline).
   Markup partial lives at template-parts/section-header.php;
   plugins call get_template_part() rather than duplicating
   header HTML or CSS.

   Layout: left-aligned with a vertical accent rule on the left
   edge. The rule uses --color-primary so the component re-themes
   automatically when the customizer palette changes.
   ============================================================ */
.s2p-section-header {
    display: grid;
    grid-template-columns: 4px 1fr;
    gap: 24px;
    align-items: start;
    /* Top margin gives every section that uses this header generous
       breathing room from whatever came before (steps strip, reader
       grid, cta, reviews, etc.). The bottom margin is the gap to the
       section's own body content. */
    margin: 4rem 0 2rem;
}
/* Vertical rule — palette-primary, fills the header height */
.s2p-section-header__rule {
    align-self: stretch;
    min-height: 96px;
    background: var(--color-primary);
    border-radius: 2px;
}
.s2p-section-header__body {
    min-width: 0;     /* allow content to shrink in narrow containers */
}
.s2p-section-header__eyebrow {
    font-size: 0.75rem;
    color: var(--color-primary);
    margin: 0 0 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
}
.s2p-section-header__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.1rem;
    letter-spacing: -0.02em;
    color: var(--color-text-strong, var(--color-primary));
}
/* Italic emphasis flows INLINE with the title so the header reads as
   one line: "Find your reader, find your path." */
.s2p-section-header__em {
    display: inline;
    font-style: italic;
    font-weight: 700;
    font-size: inherit;
    color: inherit;
}
.s2p-section-header__tagline {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    color: var(--color-text, inherit);
    opacity: 0.8;
}

/* Mobile: rule shrinks to a horizontal cap at the top so the
   layout doesn't get cramped at narrow widths */
@media (max-width: 600px) {
    .s2p-section-header {
        grid-template-columns: 1fr;
        gap: 16px;
        /* Smaller top spacing on mobile - sections are stacked closer
           anyway and 4rem feels excessive on narrow screens */
        margin-top: 2.5rem;
    }
    .s2p-section-header__rule {
        width: 48px;
        height: 4px;
        min-height: 4px;
        align-self: start;
    }
    .s2p-section-header__title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}



/* ============================================================
   6g. SHARED SECTION FOOTER — palette-driven closing CTA block.

   Markup partial lives at template-parts/section-footer.php;
   args: title, em, tagline, cta_url, cta_label.
   ============================================================ */

.s2p-section-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 4rem 0 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.s2p-section-footer__text {
    flex: 1;
    min-width: 0;
}

.s2p-section-footer__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.s2p-section-footer__em {
    font-style: italic;
    color: var(--color-primary);
    font-family: Georgia, serif;
    font-weight: 700;
}

.s2p-section-footer__tagline {
    font-size: var(--fs-body);
    color: var(--color-text);
    opacity: 0.8;
    margin: 0;
    line-height: 1.6;
}

.s2p-section-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid var(--color-text-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text-strong);
    background: transparent;
    font-size: var(--fs-body);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}

.s2p-section-footer__btn:hover {
    background: var(--color-text-strong);
    color: var(--color-text-on-primary);
}

.s2p-section-footer__btn:hover .s2p-section-footer__arrow {
    transform: translateX(3px);
}

.s2p-section-footer__arrow {
    display: inline-block;
    transition: transform 0.15s;
}

@media (max-width: 600px) {
    .s2p-section-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        margin: 3rem 0 1rem;
    }

    .s2p-section-footer__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    /* Top strip stays horizontal at this breakpoint (logo left, country right).
       The 768px rule below will tighten padding for true mobile widths. */

    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-disclaimer-col {
        grid-column: 1 / -1;
    }
    .footer-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .footer-bottom__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; order: 2; }

    .primary-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-primary-dark);
        flex-direction: column;
        padding: var(--space-sm) var(--content-padding-x);
        gap: 0;
        align-items: stretch;
        z-index: var(--z-sticky);
    }
    .primary-menu li {
        padding: 8px 0;
    }

    .main-navigation.is-open .primary-menu {
        display: flex;
    }

    .header-actions {
        margin-left: auto;
        order: 1;
    }
    .header-actions .btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    .footer-columns {
        grid-template-columns: 1fr;
    }
    .site-footer .bar-content {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}