/* =========================================================
   PotionStarter – site.css (refactored foundation)
   Goals:
   - Preserve section/layout scaffolding and behaviour
   - Single button system (token-driven via brand.css)
   - Single header/nav system (token-driven; no DP hard-lock)
   - Hero token-driven (no forced DP yellow)
   - Content grid hover uses button tokens (no accent hijack)
   - Keep component blocks, remove duplicates + “append-only patch”
   ========================================================= */

/* =========================================================
   Base / defaults
========================================================= */

.ps-main {
    display: block;
}

    .ps-main a {
        color: var(--ps-link, var(--bs-link-color));
    }

        .ps-main a:hover {
            color: var(--ps-link-hover, var(--bs-link-hover-color));
        }

    /* Optional: make long pages feel nicer */
    .ps-main > :first-child {
        margin-top: 0;
    }

    .ps-main > :last-child {
        margin-bottom: 0;
    }

/* Base typography */
body {
    font-family: var(--ps-font-body);
    font-weight: 400;
}

/* Headings & UI emphasis */
h1, h2, h3, h4, h5, h6,
.navbar,
.btn {
    font-family: var(--ps-font-heading);
}

/* ---------- Logo ---------- */
.site-logo {
    height: 80px;
    width: auto;
    display: block;
}

@media (max-width: 576px) {
    .site-logo {
        height: 32px;
    }
}

/* ---------- Bootstrap modal stacking fix ---------- */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog,
.modal-content,
.modal-body {
    pointer-events: auto !important;
}


/* =========================================================
   Buttons (token-driven; SINGLE source of truth)
   Depends on brand.css providing:
   --ps-btn-primary-bg/text/hover-bg/hover-text
   --ps-btn-secondary-bg/text/hover-bg/hover-text
   --ps-btn-accent-bg/text/hover-bg/hover-text
========================================================= */

.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.05rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: var(--ps-font-heading, inherit);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .05s ease;
}

    .ps-btn:hover {
        text-decoration: none;
    }

    .ps-btn:active {
        transform: translateY(1px);
    }

.ps-btn--primary {
    background: var(--ps-btn-primary-bg);
    color: var(--ps-btn-primary-text);
}

.ps-btn--secondary {
    background: var(--ps-btn-secondary-bg);
    color: var(--ps-btn-secondary-text);
}

.ps-btn--accent {
    background: var(--ps-btn-accent-bg);
    color: var(--ps-btn-accent-text);
}

.ps-btn--primary:hover,
.ps-btn--primary:focus-visible {
    background: var(--ps-btn-primary-hover-bg);
    color: var(--ps-btn-primary-hover-text);
}

.ps-btn--secondary:hover,
.ps-btn--secondary:focus-visible {
    background: var(--ps-btn-secondary-hover-bg);
    color: var(--ps-btn-secondary-hover-text);
}

.ps-btn--accent:hover,
.ps-btn--accent:focus-visible {
    background: var(--ps-btn-accent-hover-bg);
    color: var(--ps-btn-accent-hover-text);
}

/* Bootstrap compatibility (if any components still output btn btn-primary/secondary) */
.btn.btn-primary {
    background: var(--ps-btn-primary-bg) !important;
    border-color: var(--ps-btn-primary-bg) !important;
    color: var(--ps-btn-primary-text) !important;
}

    .btn.btn-primary:hover,
    .btn.btn-primary:focus-visible {
        background: var(--ps-btn-primary-hover-bg) !important;
        border-color: var(--ps-btn-primary-hover-bg) !important;
        color: var(--ps-btn-primary-hover-text) !important;
    }

.btn.btn-secondary {
    background: var(--ps-btn-secondary-bg) !important;
    border-color: var(--ps-btn-secondary-bg) !important;
    color: var(--ps-btn-secondary-text) !important;
}

    .btn.btn-secondary:hover,
    .btn.btn-secondary:focus-visible {
        background: var(--ps-btn-secondary-hover-bg) !important;
        border-color: var(--ps-btn-secondary-hover-bg) !important;
        color: var(--ps-btn-secondary-hover-text) !important;
    }

/* If markup includes text-white, don’t let it fight token colours */
.ps-btn.text-white,
.btn.text-white {
    color: inherit !important;
}


/* =========================================================
   HEADER + NAV (ONE SYSTEM, token-driven)
   Editors can choose: primary / secondary / accent / muted
========================================================= */

.ps-header {
    background: var(--ps-header-bg);
    color: #fff;
}

    .ps-header .ps-navbar {
        background: transparent;
        padding-top: .85rem;
        padding-bottom: .85rem;
    }

        /* Base nav link */
        .ps-header .ps-navbar .ps-nav-link {
            font-weight: 600;
            letter-spacing: .02em;
            text-decoration: none;
            transition: color .15s ease, background-color .15s ease, border-color .15s ease;
        }

            /* ---- Non-button links (variant mapping) ---- */
            .ps-header .ps-navbar .ps-nav-link:not(.ps-nav-btn) {
                color: var(--ps-header-link-default, var(--ps-header-link-secondary, #fff));
            }

        .ps-header .ps-navbar .ps-nav-link--primary:not(.ps-nav-btn) {
            color: var(--ps-header-link-primary);
        }

        .ps-header .ps-navbar .ps-nav-link--secondary:not(.ps-nav-btn) {
            color: var(--ps-header-link-secondary);
        }

        .ps-header .ps-navbar .ps-nav-link--accent:not(.ps-nav-btn) {
            color: var(--ps-header-link-accent);
        }

        .ps-header .ps-navbar .ps-nav-link--muted:not(.ps-nav-btn) {
            color: var(--ps-header-link-muted);
        }

        /* Hover/active: ALWAYS hover token for non-button links */
        .ps-header .ps-navbar .ps-nav-link:not(.ps-nav-btn):hover,
        .ps-header .ps-navbar .ps-nav-link:not(.ps-nav-btn):focus-visible,
        .ps-header .ps-navbar .ps-nav-link.active:not(.ps-nav-btn),
        .ps-header .ps-navbar .ps-nav-item.is-active .ps-nav-link:not(.ps-nav-btn) {
            color: var(--ps-header-link-hover, #fff);
            text-decoration: none;
        }

        /* ---- Nav “button links” ---- */
        .ps-header .ps-navbar .ps-nav-link.ps-nav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .55rem 1.05rem;
            border-radius: 999px;
            border: 2px solid transparent;
            line-height: 1;
            text-decoration: none !important;
        }

            /* If Razor adds Bootstrap utilities, don’t let them stomp tokens */
            .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.btn,
            .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.text-white {
                color: inherit !important;
            }

            /* Apply token-driven button looks */
            .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--primary {
                background: var(--ps-btn-primary-bg);
                border-color: var(--ps-btn-primary-bg);
                color: var(--ps-btn-primary-text);
            }

                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--primary:hover,
                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--primary:focus-visible {
                    background: var(--ps-btn-primary-hover-bg);
                    border-color: var(--ps-btn-primary-hover-bg);
                    color: var(--ps-btn-primary-hover-text);
                }

            /* Secondary nav button: readable at rest + stronger on hover */
            .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--secondary {
                background: rgba(255,255,255,.18);
                border-color: rgba(255,255,255,.35);
                color: #ffffff;
            }

                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--secondary:hover,
                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--secondary:focus-visible {
                    background: rgba(255,255,255,.30);
                    border-color: rgba(255,255,255,.45);
                    color: #ffffff;
                }

            .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--accent {
                background: var(--ps-btn-accent-bg);
                border-color: var(--ps-btn-accent-bg);
                color: var(--ps-btn-accent-text);
            }

                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--accent:hover,
                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--accent:focus-visible {
                    background: var(--ps-btn-accent-hover-bg);
                    border-color: var(--ps-btn-accent-hover-bg);
                    color: var(--ps-btn-accent-hover-text);
                }

            /* Muted button (nav-only) */
            .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--muted {
                background: rgba(255,255,255,.12);
                border-color: rgba(255,255,255,.28);
                color: #fff;
            }

                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--muted:hover,
                .ps-header .ps-navbar .ps-nav-link.ps-nav-btn.ps-btn--muted:focus-visible {
                    background: rgba(255,255,255,.22);
                    border-color: rgba(255,255,255,.38);
                    color: #fff;
                }

        /* Focus ring */
        .ps-header .ps-navbar .ps-nav-link:focus-visible {
            outline: 3px solid rgba(255,255,255,.6);
            outline-offset: 2px;
        }

    /* Mobile toggler on dark header */
    .ps-header .navbar-toggler {
        border-color: rgba(255,255,255,.25);
    }

    .ps-header .navbar-toggler-icon {
        filter: invert(1);
    }

    /* Offcanvas matches header */
    .ps-header .ps-offcanvas {
        background: var(--ps-header-bg);
        color: #fff;
    }







/* =========================================================
   FOOTER
========================================================= */


/* =========================================================
   Footer (token-driven + navMenu overrides)
========================================================= */

.ps-footer {
    background: var(--ps-footer-bg);
    color: #fff;
}

    /* Default footer link colour */
    .ps-footer a,
    .ps-footer .ps-footer-link {
        color: var(--ps-footer-link, rgba(255,255,255,.75));
        text-decoration: none;
    }

        .ps-footer a:hover,
        .ps-footer a:focus-visible,
        .ps-footer .ps-footer-link:hover,
        .ps-footer .ps-footer-link:focus-visible {
            color: var(--ps-footer-link-hover, #ffffff);
            text-decoration: underline;
            text-underline-offset: .18em;
        }

    /* Muted helper text */
    .ps-footer .ps-footer-muted {
        color: var(--ps-footer-muted, rgba(255,255,255,.55));
    }

    /* Variant overrides coming from navMenu items */
    .ps-footer .ps-footer-link--primary {
        color: var(--ps-primary);
    }

    .ps-footer .ps-footer-link--secondary {
        color: var(--ps-secondary);
    }

    .ps-footer .ps-footer-link--accent {
        color: var(--ps-accent);
    }

    .ps-footer .ps-footer-link--muted {
        color: var(--ps-footer-muted, rgba(255,255,255,.55));
    }

    /* Variant hover behaviour */
    .ps-footer .ps-footer-link--primary:hover,
    .ps-footer .ps-footer-link--primary:focus-visible,
    .ps-footer .ps-footer-link--secondary:hover,
    .ps-footer .ps-footer-link--secondary:focus-visible,
    .ps-footer .ps-footer-link--accent:hover,
    .ps-footer .ps-footer-link--accent:focus-visible {
        color: #ffffff;
    }

    /* Footer “button links” from navMenu */
    .ps-footer .ps-footer-btn.ps-btn {
        text-decoration: none;
    }



    .ps-footer .ps-footer-link--external::after {
        content: "↗";
        font-size: .75em;
        margin-left: .35em;
        opacity: .75;
    }



/* =========================================================
   FOOTER
========================================================= */




/* =========================================================
   Section contract (PRESERVED behaviour)
========================================================= */

.ps-section {
    position: relative;
    isolation: isolate; /* ensures z-index layers behave inside the section */
}

/* Inner wrapper always sits above background layers */
.ps-section__inner {
    position: relative;
    z-index: 3;
}

/* Background image layer */
.ps-section__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: var(--ps-bg-image);
    background-repeat: no-repeat;
    background-position: var(--ps-bg-pos, center);
    background-size: var(--ps-bg-size, cover);
    background-attachment: var(--ps-bg-attach, scroll);
    opacity: var(--ps-bg-image-opacity, .3);
}

@supports (-webkit-touch-callout: none) {
    /* iOS Safari: background-attachment: fixed is unreliable */
    .ps-section__bg {
        background-attachment: scroll;
    }
}

/* Overlay tint layer */
.ps-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--ps-overlay-opacity, .3);
}

/* ---------- Width system ---------- */

/* Outer width modes */
.ps-w-contained {
}

.ps-w-fullbleed {
    width: 100%;
}

    /* Inner wrapper defaults (gutters + centering) */
    .ps-w-contained .ps-section__inner,
    .ps-w-fullbleed .ps-section__inner {
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

/* Inner width sizes */
.ps-inner-narrow .ps-section__inner {
    max-width: 720px;
}

.ps-inner-standard .ps-section__inner {
    max-width: 1140px;
}

.ps-inner-wide .ps-section__inner {
    max-width: 1320px;
}

/* NEW: Full-bleed inner (true edge-to-edge content) */
.ps-w-fullbleed.ps-inner-fullbleed .ps-section__inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Ensure section X padding doesn't re-introduce gutters */
.ps-w-fullbleed.ps-inner-fullbleed.ps-px-0,
.ps-w-fullbleed.ps-inner-fullbleed.ps-px-sm,
.ps-w-fullbleed.ps-inner-fullbleed.ps-px-md,
.ps-w-fullbleed.ps-inner-fullbleed.ps-px-lg {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- Padding system (applies to the section itself) ---------- */

/* Y padding */
.ps-py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.ps-py-sm {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.ps-py-md {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.ps-py-lg {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* X padding */
.ps-px-0 {
    padding-left: 0;
    padding-right: 0;
}

.ps-px-sm {
    padding-left: 1rem;
    padding-right: 1rem;
}

.ps-px-md {
    padding-left: 2rem;
    padding-right: 2rem;
}

.ps-px-lg {
    padding-left: 3rem;
    padding-right: 3rem;
}

/* ---------- Semantic background mappings (Pattern A) ---------- */
.ps-bg-surface {
    background: var(--ps-surface);
}

.ps-bg-muted {
    background: var(--ps-muted);
}

.ps-bg-primary {
    background: var(--ps-primary);
}

.ps-bg-secondary {
    background: var(--ps-secondary);
}

.ps-bg-accent {
    background: var(--ps-accent);
}

.ps-bg-ink {
    background: var(--ps-ink);
    color: var(--ps-ink-contrast);
}

.ps-bg-inverse {
    background: var(--ps-inverse-bg);
    color: var(--ps-inverse-text);
}

/* Overlay tint classes applied to .ps-section__overlay */
.ps-overlay-surface {
    background: var(--ps-surface);
}

.ps-overlay-muted {
    background: var(--ps-muted);
}

.ps-overlay-primary {
    background: var(--ps-primary);
}

.ps-overlay-secondary {
    background: var(--ps-secondary);
}

.ps-overlay-accent {
    background: var(--ps-accent);
}

.ps-overlay-ink {
    background: var(--ps-ink);
}

.ps-overlay-inverse {
    background: var(--ps-inverse-bg);
}

/* Optional: improve link contrast automatically on dark sections */
.ps-bg-ink a,
.ps-bg-inverse a {
    color: var(--ps-inverse-link, var(--ps-link, #fff));
}

    .ps-bg-ink a:hover,
    .ps-bg-inverse a:hover {
        color: var(--ps-link-hover, #fff);
    }

/* ---------- Columns / content helpers ---------- */
.ps-columns {
}

/* RTE base styling — keep light-touch so Bootstrap typography still works */
.ps-rte > :first-child {
    margin-top: 0;
}

.ps-rte > :last-child {
    margin-bottom: 0;
}

.ps-rte p {
    margin-bottom: 1rem;
}

.ps-rte h1, .ps-rte h2, .ps-rte h3, .ps-rte h4, .ps-rte h5, .ps-rte h6 {
    margin-top: 1.75rem;
}

    .ps-rte h1:first-child, .ps-rte h2:first-child, .ps-rte h3:first-child,
    .ps-rte h4:first-child, .ps-rte h5:first-child, .ps-rte h6:first-child {
        margin-top: 0;
    }

.ps-rte blockquote {
    padding-left: 1rem;
    border-left: 4px solid currentColor;
    opacity: .9;
}



/* =========================================================
   Typography – RTE foundation (scoped to .ps-rte only)
========================================================= */

/* Inner width controls text measure */
.ps-inner-narrow .ps-rte {
    max-width: 60ch;
}

.ps-inner-standard .ps-rte {
    max-width: 72ch;
}

.ps-inner-wide .ps-rte {
    max-width: 80ch;
}

.ps-columns .ps-rte {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Paragraphs */
.ps-rte p {
    margin: 0 0 1.25rem;
}

/* Headings */
.ps-rte h1,
.ps-rte h2,
.ps-rte h3,
.ps-rte h4,
.ps-rte h5,
.ps-rte h6 {
    font-family: var(--ps-font-heading);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}

.ps-rte h1 {
    font-size: 2.25rem;
}

.ps-rte h2 {
    font-size: 1.9rem;
}

.ps-rte h3 {
    font-size: 1.55rem;
}

.ps-rte h4 {
    font-size: 1.25rem;
}

.ps-rte h5 {
    font-size: 1.05rem;
}

.ps-rte h6 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em; /* override tighter tracking */
}

/* Lists */
.ps-rte ul,
.ps-rte ol {
    margin: 0 0 1.25rem 1.25rem;
    padding: 0;
}

.ps-rte li {
    margin-bottom: 0.5rem;
}

/* Blockquotes */
.ps-rte blockquote {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 4px solid var(--ps-accent);
    font-style: italic;
    opacity: 0.9;
}

/* Links (baseline — colours are set by the auto-contrast section below) */
.ps-rte a {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}


/* =========================================================
   RTE text styles (TipTap style menu classes)
========================================================= */

/* Inline emphasis */
.ps-rte .rte-intro {
    font-size: clamp(1.125rem, 1.1vw, 1.35rem);
    line-height: 1.45;
}

.ps-rte .rte-text-lg {
    font-size: 1.25rem;
    line-height: 1.4;
}

.ps-rte .rte-text-xl {
    font-size: 1.5rem;
    line-height: 1.35;
}

.ps-rte .rte-emphasis {
    font-weight: 500;
    font-size: 1.15em;
}

/* Display styles (block-level) */
.ps-rte .rte-display-1 {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 0.65rem;
}

.ps-rte .rte-display-2 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}

.ps-rte .rte-lead {
    font-size: clamp(1.125rem, 1.1vw, 1.35rem);
    line-height: 1.5;
    font-weight: 500;
}

.ps-rte .rte-small {
    font-size: 0.95rem;
    line-height: 1.45;
}


/* =========================================================
   RTE auto-contrast by section background
========================================================= */

/* 1) Defaults (light sections) */
.ps-section {
    --ps-on-bg-text: var(--ps-ink);
    --ps-on-bg-link: var(--ps-link);
    --ps-on-bg-link-hover: var(--ps-link-hover);
}

    /* Make RTE consume the local tokens */
    .ps-section .ps-rte,
    .ps-section .ps-rte :where(p, li, blockquote, h1, h2, h3, h4, h5, h6) {
        color: var(--ps-on-bg-text);
    }

        .ps-section .ps-rte a {
            color: var(--ps-on-bg-link);
        }

            .ps-section .ps-rte a:hover,
            .ps-section .ps-rte a:focus {
                color: var(--ps-on-bg-link-hover);
            }

        /* Make <mark> readable everywhere */
        .ps-section .ps-rte mark {
            background: color-mix(in srgb, var(--ps-accent) 70%, transparent);
            color: var(--ps-ink);
            padding: 0 0.15em;
        }

    /* 2) Primary background (dark slate) */
    .ps-section.ps-bg-primary {
        --ps-on-bg-text: var(--ps-ink-contrast, #fff);
        --ps-on-bg-link: var(--ps-accent);
        --ps-on-bg-link-hover: #ffffff;
    }

    /* 3) Ink + inverse */
    .ps-section.ps-bg-ink,
    .ps-section.ps-bg-inverse {
        --ps-on-bg-text: var(--ps-ink-contrast, #fff);
        --ps-on-bg-link: var(--ps-accent);
        --ps-on-bg-link-hover: #ffffff;
    }

    /* 4) Accent background (yellow): links must NOT be yellow */
    .ps-section.ps-bg-accent {
        --ps-on-bg-text: var(--ps-ink);
        --ps-on-bg-link: var(--ps-primary);
        --ps-on-bg-link-hover: color-mix(in srgb, var(--ps-primary) 80%, #000);
    }

    /* 5) Secondary/muted/surface (light) */
    .ps-section.ps-bg-secondary,
    .ps-section.ps-bg-muted,
    .ps-section.ps-bg-surface {
        --ps-on-bg-text: var(--ps-ink);
        --ps-on-bg-link: var(--ps-primary);
        --ps-on-bg-link-hover: var(--ps-accent);
    }

        /* Make link styling per background unambiguous */
        .ps-section.ps-bg-secondary .ps-rte a,
        .ps-section.ps-bg-muted .ps-rte a,
        .ps-section.ps-bg-accent .ps-rte a {
            color: var(--ps-primary);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 0.15em;
            text-decoration-color: color-mix(in srgb, var(--ps-primary) 35%, transparent);
        }

            .ps-section.ps-bg-secondary .ps-rte a:hover,
            .ps-section.ps-bg-muted .ps-rte a:hover,
            .ps-section.ps-bg-accent .ps-rte a:hover {
                text-decoration-color: currentColor;
            }

            .ps-section.ps-bg-secondary .ps-rte a:focus,
            .ps-section.ps-bg-muted .ps-rte a:focus {
                outline: none;
                background: color-mix(in srgb, var(--ps-accent) 18%, transparent);
                border-radius: 3px;
            }

            .ps-section.ps-bg-accent .ps-rte a:focus {
                outline: none;
                background: color-mix(in srgb, #fff 22%, transparent);
                border-radius: 3px;
            }


    /* Make blockquote border auto-contrast*/
    .ps-section.ps-bg-primary .ps-rte blockquote,
    .ps-section.ps-bg-ink .ps-rte blockquote,
    .ps-section.ps-bg-inverse .ps-rte blockquote {
        border-left-color: var(--ps-on-bg-link);
    }

    /* Force RTE to inherit section-contrast text colour */
    .ps-section .ps-rte {
        color: var(--ps-on-bg-text);
    }

        .ps-section .ps-rte p,
        .ps-section .ps-rte li,
        .ps-section .ps-rte blockquote,
        .ps-section .ps-rte h1,
        .ps-section .ps-rte h2,
        .ps-section .ps-rte h3,
        .ps-section .ps-rte h4,
        .ps-section .ps-rte h5,
        .ps-section .ps-rte h6 {
            color: inherit;
        }



/* =========================================================
   RTE list spacing override (tight, elegant)
   TipTap wraps <li> content in <p>
========================================================= */
.ps-rte li > p {
    margin: 0; /* remove paragraph spacing inside bullets */
}

.ps-rte ul li,
.ps-rte ol li {
    margin-bottom: 0.35rem; /* control bullet rhythm here */
}


/* =========================================================
   Typography – RTE foundation
========================================================= */



/* =========================================================
   BlockGrid Components
========================================================= */

/* Image Block */
.ps-image {
    display: block;
    width: 100%;
    height: 100%;
}

.ps-image--cover {
    object-fit: cover;
}

.ps-image--contain {
    object-fit: contain;
}


/* =========================================================
   Promo Carousel (Bootstrap-based)
========================================================= */

/* Root wrapper */
.ps-promo-carousel .carousel {
    position: relative;
}

    /* Reserve space left/right for controls so they don't overlay imagery */
    .ps-promo-carousel .carousel.ps-promo-carousel__carousel {
        padding-left: var(--ps-carousel-control-gutter, 3.25rem);
        padding-right: var(--ps-carousel-control-gutter, 3.25rem);
    }

@media (max-width: 575.98px) {
    .ps-promo-carousel .carousel.ps-promo-carousel__carousel {
        padding-left: var(--ps-carousel-control-gutter-sm, 2.5rem);
        padding-right: var(--ps-carousel-control-gutter-sm, 2.5rem);
    }
}

/* Controls: use the reserved gutter */
.ps-promo-carousel .ps-promo-carousel__control {
    width: var(--ps-carousel-control-gutter, 3.25rem);
    opacity: 1;
    top: 0;
    bottom: 0;
}

.ps-promo-carousel .ps-promo-carousel__control--prev {
    left: 0;
}

.ps-promo-carousel .ps-promo-carousel__control--next {
    right: 0;
}

/* Replace Bootstrap's icon sprite with a branded pill + masked arrow */
.ps-promo-carousel .ps-promo-carousel__control .carousel-control-prev-icon,
.ps-promo-carousel .ps-promo-carousel__control .carousel-control-next-icon {
    background-image: none;
    width: var(--ps-carousel-control-size, 2.5rem);
    height: var(--ps-carousel-control-size, 2.5rem);
    border-radius: 999px;
    background: var(--ps-carousel-control-bg, var(--ps-primary));
    border: 1px solid var(--ps-carousel-control-border, rgba(0,0,0,.15));
    box-shadow: var(--ps-carousel-control-shadow, 0 6px 16px rgba(0,0,0,.15));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ps-promo-carousel .ps-promo-carousel__control .carousel-control-prev-icon::before,
    .ps-promo-carousel .ps-promo-carousel__control .carousel-control-next-icon::before {
        content: "";
        width: 0.9rem;
        height: 0.9rem;
        background: var(--ps-carousel-control-icon, #fff);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

.ps-promo-carousel {
    --ps-carousel-control-hover-bg: var(--ps-accent);
    --ps-carousel-control-hover-icon: var(--ps-ink);
}

    .ps-promo-carousel .ps-promo-carousel__control:hover .carousel-control-prev-icon,
    .ps-promo-carousel .ps-promo-carousel__control:hover .carousel-control-next-icon,
    .ps-promo-carousel .ps-promo-carousel__control:active .carousel-control-prev-icon,
    .ps-promo-carousel .ps-promo-carousel__control:active .carousel-control-next-icon,
    .ps-promo-carousel .ps-promo-carousel__control:focus-visible .carousel-control-prev-icon,
    .ps-promo-carousel .ps-promo-carousel__control:focus-visible .carousel-control-next-icon {
        background: var(--ps-carousel-control-hover-bg);
        border-color: color-mix(in srgb, var(--ps-carousel-control-hover-bg) 75%, #000);
    }

        .ps-promo-carousel .ps-promo-carousel__control:hover .carousel-control-prev-icon::before,
        .ps-promo-carousel .ps-promo-carousel__control:hover .carousel-control-next-icon::before,
        .ps-promo-carousel .ps-promo-carousel__control:active .carousel-control-prev-icon::before,
        .ps-promo-carousel .ps-promo-carousel__control:active .carousel-control-next-icon::before,
        .ps-promo-carousel .ps-promo-carousel__control:focus-visible .carousel-control-prev-icon::before,
        .ps-promo-carousel .ps-promo-carousel__control:focus-visible .carousel-control-next-icon::before {
            background: var(--ps-carousel-control-hover-icon);
        }

    .ps-promo-carousel .ps-promo-carousel__control .carousel-control-next-icon::before {
        transform: rotate(180deg);
    }

    /* Focus */
    .ps-promo-carousel .ps-promo-carousel__control:focus-visible .carousel-control-prev-icon,
    .ps-promo-carousel .ps-promo-carousel__control:focus-visible .carousel-control-next-icon {
        outline: 3px solid var(--ps-carousel-control-focus, rgba(255,255,255,.6));
        outline-offset: 2px;
    }

    /* Multi-item slide row/col */
    .ps-promo-carousel .ps-promo-carousel__row {
        display: flex;
        align-items: stretch;
    }

    .ps-promo-carousel .ps-promo-carousel__col {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
        display: flex;
    }

/* Ensure wrapper + card fill column */
.ps-promo-carousel__col > .ps-promo-carousel__card {
    display: flex;
    width: 100%;
}

    .ps-promo-carousel__col > .ps-promo-carousel__card > .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }

/* Fixed image height */
.ps-promo-carousel .card-img-top {
    width: 100%;
    height: 220px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Card body stretches to match tallest card */
.ps-promo-carousel .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Indicators below carousel */
.ps-promo-carousel {
    position: relative;
}

    .ps-promo-carousel .carousel-indicators {
        position: static;
        margin: 0.75rem auto 0;
        padding: 0;
        justify-content: center;
    }

.ps-section .ps-promo-carousel .carousel-indicators {
    margin-top: 1rem;
}

/* Pagers use accent colours */
.ps-promo-carousel {
    --ps-pager: var(--ps-accent);
    --ps-pager-muted: rgba(0, 0, 0, 0.25);
    --ps-pager-active: var(--ps-pager);
}

    .ps-promo-carousel.is-on-dark,
    .bg-dark .ps-promo-carousel,
    .bg-secondary .ps-promo-carousel {
        --ps-pager-muted: rgba(255, 255, 255, 0.35);
    }

    .ps-promo-carousel .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background-color: var(--ps-pager-muted);
        opacity: 1;
        border: 0;
        margin: 0 6px;
        transition: transform 120ms ease, background-color 120ms ease;
    }

    .ps-promo-carousel .carousel-indicators .active {
        background-color: var(--ps-pager-active);
        transform: scale(1.15);
    }

    .ps-promo-carousel .carousel-indicators [data-bs-target]:hover,
    .ps-promo-carousel .carousel-indicators [data-bs-target]:focus-visible {
        background-color: var(--ps-pager-active);
        transform: scale(1.15);
        outline: none;
    }


/* =========================================================
   Hero Block (token-driven)
========================================================= */

.ps-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--ps-primary);
    min-height: 420px;
}

/* media fills the hero frame */
.ps-hero__media {
    position: absolute;
    inset: 0;
}

.ps-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* overlay sits above image */
.ps-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.70));
    pointer-events: none;
    z-index: 1;
}

/* content sits above overlay */
.ps-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    z-index: 2;
}

.ps-hero__inner {
    width: min(960px, 100%);
    margin: 0 auto;
}

/* Title/desc from theme tokens */
.ps-hero .ps-hero__title {
    color: var(--ps-hero-title, var(--ps-accent)) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ps-hero .ps-hero__desc,
.ps-hero .ps-hero__desc * {
    color: var(--ps-hero-text, var(--ps-ink-contrast, #fff)) !important;
}

/* Hero carousel UI */
.ps-hero-carousel .carousel-indicators {
    gap: .5rem;
    margin-bottom: 1.25rem;
}

    .ps-hero-carousel .carousel-indicators button {
        width: 28px;
        height: 4px;
        border-radius: 2px;
        background-color: var(--ps-primary);
        border: 0;
        opacity: 1;
    }

    .ps-hero-carousel .carousel-indicators .active {
        background-color: var(--ps-accent);
    }

.ps-hero-carousel .carousel-control-prev,
.ps-hero-carousel .carousel-control-next {
    width: 12%;
    opacity: 1;
}

.ps-hero-carousel .carousel-control-prev-icon,
.ps-hero-carousel .carousel-control-next-icon {
    background-image: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    border: 2px solid rgba(255,255,255,.30);
    display: grid;
    place-items: center;
}

    .ps-hero-carousel .carousel-control-prev-icon::before,
    .ps-hero-carousel .carousel-control-next-icon::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--ps-secondary);
        border-right: 2px solid var(--ps-secondary);
    }

    .ps-hero-carousel .carousel-control-prev-icon::before {
        transform: rotate(-135deg);
    }

    .ps-hero-carousel .carousel-control-next-icon::before {
        transform: rotate(45deg);
    }

.ps-hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.ps-hero-carousel .carousel-control-next:hover .carousel-control-next-icon {
    background: var(--ps-accent);
}

    .ps-hero-carousel .carousel-control-prev:hover .carousel-control-prev-icon::before,
    .ps-hero-carousel .carousel-control-next:hover .carousel-control-next-icon::before {
        border-color: var(--ps-primary);
    }

/* Ensure hero controls are clickable */
.ps-hero__overlay {
    pointer-events: none;
}

.ps-hero__content {
    pointer-events: none;
}

    .ps-hero__content a,
    .ps-hero__content button {
        pointer-events: auto;
    }

.ps-hero-carousel .carousel-control-prev,
.ps-hero-carousel .carousel-control-next,
.ps-hero-carousel .carousel-indicators {
    z-index: 10;
}

/* Hero CTA: do NOT force colours here — let button tokens win (keep selector for specificity safety) */
.ps-hero .ps-hero__cta .ps-btn.ps-btn--primary {
    background: var(--ps-btn-primary-bg);
    color: var(--ps-btn-primary-text);
    border-color: var(--ps-btn-primary-bg);
}

    .ps-hero .ps-hero__cta .ps-btn.ps-btn--primary:hover,
    .ps-hero .ps-hero__cta .ps-btn.ps-btn--primary:focus-visible {
        background: var(--ps-btn-primary-hover-bg);
        color: var(--ps-btn-primary-hover-text);
        border-color: var(--ps-btn-primary-hover-bg);
    }

/* Full-bleed hero: square edges */
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero,
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero__media,
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero__img,
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero__overlay,
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero-carousel,
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero-carousel .carousel-inner,
.ps-w-fullbleed.ps-inner-fullbleed .ps-hero-carousel .carousel-item {
    border-radius: 0 !important;
}

    .ps-w-fullbleed.ps-inner-fullbleed .ps-hero,
    .ps-w-fullbleed.ps-inner-fullbleed .ps-hero__media,
    .ps-w-fullbleed.ps-inner-fullbleed .ps-hero-carousel .carousel-inner {
        overflow: hidden;
    }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ps-hero-carousel .carousel-item {
        transition: none;
    }
}


/* =========================================================
   Block Video Player
========================================================= */

.ps-video-player {
    width: 100%;
}

/* Frame defines the visible box */
.ps-video-player__frame,
.ps-video-player__modalFrame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
}

/* Poster button covers the entire frame and must be clickable */
.ps-video-player__posterBtn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
}

/* Poster image fills the frame */
.ps-video-player__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Background poster for modal state */
.ps-video-player__poster--bg {
    z-index: 1;
    pointer-events: none;
}

/* Overlay sits above poster but must not block clicks */
.ps-video-player__posterOverlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;
    pointer-events: none;
}

/* Overlay CTA text should never steal clicks */
.ps-video-player__cta {
    pointer-events: none;
}

/* Modal CTA must be clickable and stay on top */
.ps-video-player__ctaBtn {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 140px;
    min-height: 44px;
}

    .ps-video-player__ctaBtn:focus,
    .ps-video-player__ctaBtn:focus-visible,
    .ps-video-player__ctaBtn:active {
        transform: translate(-50%, -50%);
        outline: none;
        box-shadow: none;
    }

    .ps-video-player__ctaBtn:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 4px;
    }

/* Player container fills frame (INLINE only) */
.ps-video-player__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* iframe/video fills container */
.ps-video-player__iframe,
.ps-video-player__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Basic spacing for title/description */
.ps-video-player__title {
    margin: 0 0 0.75rem 0;
}

.ps-video-player__description {
    margin-top: 0.75rem;
}

/* Title/description overlay on poster */
.ps-video-player__metaOverlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    pointer-events: none;
}

.ps-video-player__metaOverlayInner {
    max-width: min(720px, 100%);
    pointer-events: none;
    background: rgba(0,0,0,.35);
    padding: .75rem 1rem;
    border-radius: .5rem;
    color: #fff;
}

.ps-video-player__overlayTitle {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.ps-video-player__overlayDesc {
    margin-top: 0.5rem;
}


/* =========================================================
   Content Grid – card behaviour (Bootstrap card + stretched-link)
========================================================= */

/* Card title: remove default underline */
.cg-grid .card .card-title a,
.cg-grid .card .card-title a.stretched-link {
    text-decoration: none !important;
    color: inherit;
}

    .cg-grid .card .card-title a:hover,
    .cg-grid .card .card-title a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

/* CTA follows card hover (token-driven; avoids “accent hijack”) */
.cg-grid .card:hover .ps-btn,
.cg-grid .card:focus-within .ps-btn {
    background: var(--ps-btn-primary-hover-bg);
    border-color: var(--ps-btn-primary-hover-bg);
    color: var(--ps-btn-primary-hover-text);
}

/* Slight lift helps communicate interactivity */
.cg-grid .card {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .cg-grid .card:hover {
        transform: translateY(-2px);
    }


/* =========================================================
  Testimonial Block
========================================================= */

.ps-testimonial {
    text-align: center;
    border: 1px solid var(--ps-ink-20, rgba(0,0,0,.2));
    border-radius: 0;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--ps-surface, #fff);
    margin: 0;
}

/* Quote body */
.ps-testimonial__body {
    text-align: center;
    position: relative;
    color: var(--ps-primary);
    line-height: 1.55;
    padding: 2.25rem 2.5rem;
    margin: 0;
}

    .ps-testimonial__body p:last-child {
        margin-bottom: 0;
    }

    /* Big decorative quote marks */
    .ps-testimonial__body::before {
        content: "“";
        position: absolute;
        top: -0.75rem;
        left: -0.25rem;
        font-size: clamp(3.5rem, 8vw, 6rem);
        line-height: 1;
        opacity: 0.18;
        color: var(--ps-ink, currentColor);
        pointer-events: none;
    }

    .ps-testimonial__body::after {
        content: "”";
        position: absolute;
        bottom: -1.75rem;
        right: -0.25rem;
        font-size: clamp(3.5rem, 8vw, 6rem);
        line-height: 1;
        opacity: 0.18;
        color: var(--ps-ink, currentColor);
        pointer-events: none;
    }

/* Author */
.ps-testimonial__author {
    text-align: center;
    margin-top: .75rem;
    color: var(--ps-secondary);
    font-style: italic;
}

    /* Author link: token-driven (avoid dp-* hard refs) */
    .ps-testimonial__author a,
    .ps-testimonial__authorLink {
        color: var(--ps-link);
        text-decoration: none;
        font-style: italic;
    }

        .ps-testimonial__author a:hover,
        .ps-testimonial__author a:focus-visible,
        .ps-testimonial__authorLink:hover,
        .ps-testimonial__authorLink:focus-visible {
            color: var(--ps-link-hover), var(--ps-accent));
            text-decoration: underline;
            text-underline-offset: .18em;
        }