/* =============================================================================
 * GLOBAL STYLES - CDPH Branding
 * =============================================================================
 *
 * DO NOT import this file into the PCF bundle (index.ts or anywhere in nseditor).
 *
 * This file is deployed as a Power Apps web resource and loaded on published
 * pages only. The PCF control loads it automatically via the web resource URL.
 *
 * Importing it into the bundle would inject brand/component CSS into the
 * Power Apps host page, causing style leaks outside the editor control.
 *
 * Similarly, any global scripts (Bootstrap JS, etc.) must be loaded via web
 * resource — do NOT import them into the PCF bundle.
 * ============================================================================= */

:root {
    /* Tertiary Colors */
    --cdph-clrs-tertiary-carbon: #151e28;
    --cdph-clrs-tertiary-graphite: #6a7073;
    --cdph-clrs-tertiary-black: #000000;
    --cdph-clrs-tertiary-white: #ffffff;
    --cdph-clrs-tertiary-transparent: transparent;

    /* Primary Colors */
    --cdph-clrs-primary-blue: #002595;
    --cdph-clrs-primary-purple: #902A92;
    --cdph-clrs-primary-orange: #AE5018;
    --cdph-clrs-primary-teal: #007888;
    --cdph-clrs-primary-sky: #0077CF;

    /* Secondary Colors */
    --cdph-clrs-secondary-navy: #141f68;
    --cdph-clrs-secondary-deep-purple: #421263;
    --cdph-clrs-secondary-mint: #a9d3ca;
    --cdph-clrs-secondary-tangerine: #e2742f;
    --cdph-clrs-secondary-sky-light: #71BEE3;
    --cdph-clrs-secondary-pink: #df76b8;
    --cdph-clrs-secondary-gold: #eaab33;
    --cdph-clrs-secondary-brown: #b56f2c;

    /* Tints (Refined Set) */
    --cdph-clrs-tint-blue: #ccd3ea;
    --cdph-clrs-tint-purple: #e9d4e9;
    --cdph-clrs-tint-orange: #efdcd1;
    --cdph-clrs-tint-teal: #cce4e7;
    --cdph-clrs-tint-sky: #cce4f5;
    --cdph-clrs-tint-deep-purple: #d9d0e0;
    --cdph-clrs-tint-mint: #eef6f4;
    --cdph-clrs-tint-pink: #f9e4f1;
    --cdph-clrs-tint-gold: #fbeed6;
    --cdph-clrs-tint-black: #cccccc;
    --cdph-clrs-tint-graphite: #e1e2e3;

    /* Formatting Tokens */
    --cdph-underline-thickness: 2.5px;
    --cdph-underline-offset: 3px;

    /* Typography Tokens */
    --cdph-font-family: "Source Sans Pro", sans-serif;
    --cdph-font-size-body: clamp(16px, 1.2vw + 0.8rem, 18px);
    --cdph-line-height-body: 1.6;
    --cdph-line-height-heading: 1.2;
    --cdph-color-body: var(--cdph-clrs-tertiary-black);
}

/* ---------------------------------------------------------------------------
 * Background Utility Classes
 * --------------------------------------------------------------------------- */

/* Primary */
.cdph-bg-primary-blue { background-color: var(--cdph-clrs-primary-blue) !important; }
.cdph-bg-primary-purple { background-color: var(--cdph-clrs-primary-purple) !important; }
.cdph-bg-primary-orange { background-color: var(--cdph-clrs-primary-orange) !important; }
.cdph-bg-primary-teal { background-color: var(--cdph-clrs-primary-teal) !important; }
.cdph-bg-primary-sky { background-color: var(--cdph-clrs-primary-sky) !important; }

/* Secondary */
.cdph-bg-secondary-navy { background-color: var(--cdph-clrs-secondary-navy) !important; }
.cdph-bg-secondary-deep-purple { background-color: var(--cdph-clrs-secondary-deep-purple) !important; }
.cdph-bg-secondary-mint { background-color: var(--cdph-clrs-secondary-mint) !important; }
.cdph-bg-secondary-tangerine { background-color: var(--cdph-clrs-secondary-tangerine) !important; }
.cdph-bg-secondary-sky-light { background-color: var(--cdph-clrs-secondary-sky-light) !important; }
.cdph-bg-secondary-pink { background-color: var(--cdph-clrs-secondary-pink) !important; }
.cdph-bg-secondary-gold { background-color: var(--cdph-clrs-secondary-gold) !important; }
.cdph-bg-secondary-brown { background-color: var(--cdph-clrs-secondary-brown) !important; }

/* Tertiary */
.cdph-bg-tertiary-carbon { background-color: var(--cdph-clrs-tertiary-carbon) !important; }
.cdph-bg-tertiary-graphite { background-color: var(--cdph-clrs-tertiary-graphite) !important; }
.cdph-bg-tertiary-black { background-color: var(--cdph-clrs-tertiary-black) !important; }
.cdph-bg-tertiary-white { background-color: var(--cdph-clrs-tertiary-white) !important; }
.cdph-bg-tertiary-transparent { background-color: transparent !important; }

/* Tints */
.cdph-bg-tint-blue { background-color: var(--cdph-clrs-tint-blue) !important; }
.cdph-bg-tint-purple { background-color: var(--cdph-clrs-tint-purple) !important; }
.cdph-bg-tint-orange { background-color: var(--cdph-clrs-tint-orange) !important; }
.cdph-bg-tint-teal { background-color: var(--cdph-clrs-tint-teal) !important; }
.cdph-bg-tint-sky { background-color: var(--cdph-clrs-tint-sky) !important; }
.cdph-bg-tint-deep-purple { background-color: var(--cdph-clrs-tint-deep-purple) !important; }
.cdph-bg-tint-mint { background-color: var(--cdph-clrs-tint-mint) !important; }
.cdph-bg-tint-pink { background-color: var(--cdph-clrs-tint-pink) !important; }
.cdph-bg-tint-gold { background-color: var(--cdph-clrs-tint-gold) !important; }
.cdph-bg-tint-black { background-color: var(--cdph-clrs-tint-black) !important; }
.cdph-bg-tint-graphite { background-color: var(--cdph-clrs-tint-graphite) !important; }

/* ---------------------------------------------------------------------------
 * Text Utility Classes
 * --------------------------------------------------------------------------- */
.cdph-text-primary-blue { color: var(--cdph-clrs-primary-blue) !important; }
.cdph-text-primary-purple { color: var(--cdph-clrs-primary-purple) !important; }
.cdph-text-primary-orange { color: var(--cdph-clrs-primary-orange) !important; }
.cdph-text-primary-teal { color: var(--cdph-clrs-primary-teal) !important; }
.cdph-text-primary-sky { color: var(--cdph-clrs-primary-sky) !important; }

/* Tertiary */
.cdph-text-tertiary-carbon { color: var(--cdph-clrs-tertiary-carbon) !important; }
.cdph-text-tertiary-graphite { color: var(--cdph-clrs-tertiary-graphite) !important; }
.cdph-text-tertiary-black { color: var(--cdph-clrs-tertiary-black) !important; }
.cdph-text-tertiary-white { color: var(--cdph-clrs-tertiary-white) !important; }

/* Secondary */
.cdph-text-secondary-navy { color: var(--cdph-clrs-secondary-navy) !important; }
.cdph-text-secondary-deep-purple { color: var(--cdph-clrs-secondary-deep-purple) !important; }
.cdph-text-secondary-mint { color: var(--cdph-clrs-secondary-mint) !important; }
.cdph-text-secondary-tangerine { color: var(--cdph-clrs-secondary-tangerine) !important; }
.cdph-text-secondary-sky-light { color: var(--cdph-clrs-secondary-sky-light) !important; }
.cdph-text-secondary-pink { color: var(--cdph-clrs-secondary-pink) !important; }
.cdph-text-secondary-gold { color: var(--cdph-clrs-secondary-gold) !important; }
.cdph-text-secondary-brown { color: var(--cdph-clrs-secondary-brown) !important; }

/* ---------------------------------------------------------------------------
 * Border Utility Classes
 * --------------------------------------------------------------------------- */
/* Primary */
.cdph-border-primary-blue { border-color: var(--cdph-clrs-primary-blue) !important; }
.cdph-border-primary-purple { border-color: var(--cdph-clrs-primary-purple) !important; }
.cdph-border-primary-orange { border-color: var(--cdph-clrs-primary-orange) !important; }
.cdph-border-primary-teal { border-color: var(--cdph-clrs-primary-teal) !important; }
.cdph-border-primary-sky { border-color: var(--cdph-clrs-primary-sky) !important; }

/* Secondary */
.cdph-border-secondary-navy { border-color: var(--cdph-clrs-secondary-navy) !important; }
.cdph-border-secondary-deep-purple { border-color: var(--cdph-clrs-secondary-deep-purple) !important; }
.cdph-border-secondary-mint { border-color: var(--cdph-clrs-secondary-mint) !important; }
.cdph-border-secondary-tangerine { border-color: var(--cdph-clrs-secondary-tangerine) !important; }
.cdph-border-secondary-sky-light { border-color: var(--cdph-clrs-secondary-sky-light) !important; }
.cdph-border-secondary-pink { border-color: var(--cdph-clrs-secondary-pink) !important; }
.cdph-border-secondary-gold { border-color: var(--cdph-clrs-secondary-gold) !important; }
.cdph-border-secondary-brown { border-color: var(--cdph-clrs-secondary-brown) !important; }

/* Tertiary */
.cdph-border-tertiary-carbon { border-color: var(--cdph-clrs-tertiary-carbon) !important; }
.cdph-border-tertiary-graphite { border-color: var(--cdph-clrs-tertiary-graphite) !important; }
.cdph-border-tertiary-black { border-color: var(--cdph-clrs-tertiary-black) !important; }
.cdph-border-tertiary-white { border-color: var(--cdph-clrs-tertiary-white) !important; }
.cdph-border-tertiary-transparent { border-color: transparent !important; }
/* Bootstrap default border — matches Bootstrap's --bs-border-color (#dee2e6) */
.cdph-border-default { border-color: var(--bs-border-color, #dee2e6) !important; }

/* Tints */
.cdph-border-tint-blue { border-color: var(--cdph-clrs-tint-blue) !important; }
.cdph-border-tint-purple { border-color: var(--cdph-clrs-tint-purple) !important; }
.cdph-border-tint-orange { border-color: var(--cdph-clrs-tint-orange) !important; }
.cdph-border-tint-teal { border-color: var(--cdph-clrs-tint-teal) !important; }
.cdph-border-tint-sky { border-color: var(--cdph-clrs-tint-sky) !important; }
.cdph-border-tint-deep-purple { border-color: var(--cdph-clrs-tint-deep-purple) !important; }
.cdph-border-tint-mint { border-color: var(--cdph-clrs-tint-mint) !important; }
.cdph-border-tint-pink { border-color: var(--cdph-clrs-tint-pink) !important; }
.cdph-border-tint-gold { border-color: var(--cdph-clrs-tint-gold) !important; }
.cdph-border-tint-black { border-color: var(--cdph-clrs-tint-black) !important; }
.cdph-border-tint-graphite { border-color: var(--cdph-clrs-tint-graphite) !important; }

/* ---------------------------------------------------------------------------
 * Underline Utility Classes (Multi-color)
 * --------------------------------------------------------------------------- */
/* Base Underline Rule */
[class*="cdph-underline-"] {
    text-decoration: underline !important;
    text-decoration-thickness: var(--cdph-underline-thickness) !important;
    text-underline-offset: var(--cdph-underline-offset) !important;
}
.cdph-underline-primary-blue { text-decoration-color: var(--cdph-clrs-primary-blue) !important; }
.cdph-underline-primary-purple { text-decoration-color: var(--cdph-clrs-primary-purple) !important; }
.cdph-underline-primary-orange { text-decoration-color: var(--cdph-clrs-primary-orange) !important; }
.cdph-underline-primary-teal { text-decoration-color: var(--cdph-clrs-primary-teal) !important; }
.cdph-underline-primary-sky { text-decoration-color: var(--cdph-clrs-primary-sky) !important; }

/* Tertiary */
.cdph-underline-tertiary-carbon { text-decoration-color: var(--cdph-clrs-tertiary-carbon) !important; }
.cdph-underline-tertiary-graphite { text-decoration-color: var(--cdph-clrs-tertiary-graphite) !important; }
.cdph-underline-tertiary-black { text-decoration-color: var(--cdph-clrs-tertiary-black) !important; }
.cdph-underline-tertiary-white { text-decoration-color: var(--cdph-clrs-tertiary-white) !important; }

/* ---------------------------------------------------------------------------
 * Bullet & Ordered List Marker Utility Classes
 * Applied to <ul> and <ol> as:  cdph-marker-{category}-{id}
 * Controls ::marker pseudo-element color for all nested list items.
 * --------------------------------------------------------------------------- */

/* — Primary — */
ul.cdph-marker-primary-blue li::marker,   ul.cdph-marker-primary-blue ul li::marker,
ol.cdph-marker-primary-blue li::marker,   ol.cdph-marker-primary-blue ol li::marker   { color: var(--cdph-clrs-primary-blue)   !important; }
ul.cdph-marker-primary-purple li::marker, ul.cdph-marker-primary-purple ul li::marker,
ol.cdph-marker-primary-purple li::marker, ol.cdph-marker-primary-purple ol li::marker { color: var(--cdph-clrs-primary-purple) !important; }
ul.cdph-marker-primary-orange li::marker, ul.cdph-marker-primary-orange ul li::marker,
ol.cdph-marker-primary-orange li::marker, ol.cdph-marker-primary-orange ol li::marker { color: var(--cdph-clrs-primary-orange) !important; }
ul.cdph-marker-primary-teal li::marker,   ul.cdph-marker-primary-teal ul li::marker,
ol.cdph-marker-primary-teal li::marker,   ol.cdph-marker-primary-teal ol li::marker   { color: var(--cdph-clrs-primary-teal)   !important; }
ul.cdph-marker-primary-sky li::marker,    ul.cdph-marker-primary-sky ul li::marker,
ol.cdph-marker-primary-sky li::marker,    ol.cdph-marker-primary-sky ol li::marker    { color: var(--cdph-clrs-primary-sky)    !important; }

/* — Secondary — */
ul.cdph-marker-secondary-navy li::marker,        ul.cdph-marker-secondary-navy ul li::marker,
ol.cdph-marker-secondary-navy li::marker,        ol.cdph-marker-secondary-navy ol li::marker        { color: var(--cdph-clrs-secondary-navy)        !important; }
ul.cdph-marker-secondary-deep-purple li::marker, ul.cdph-marker-secondary-deep-purple ul li::marker,
ol.cdph-marker-secondary-deep-purple li::marker, ol.cdph-marker-secondary-deep-purple ol li::marker { color: var(--cdph-clrs-secondary-deep-purple)  !important; }
ul.cdph-marker-secondary-mint li::marker,        ul.cdph-marker-secondary-mint ul li::marker,
ol.cdph-marker-secondary-mint li::marker,        ol.cdph-marker-secondary-mint ol li::marker        { color: var(--cdph-clrs-secondary-mint)        !important; }
ul.cdph-marker-secondary-tangerine li::marker,   ul.cdph-marker-secondary-tangerine ul li::marker,
ol.cdph-marker-secondary-tangerine li::marker,   ol.cdph-marker-secondary-tangerine ol li::marker   { color: var(--cdph-clrs-secondary-tangerine)   !important; }
ul.cdph-marker-secondary-sky-light li::marker,   ul.cdph-marker-secondary-sky-light ul li::marker,
ol.cdph-marker-secondary-sky-light li::marker,   ol.cdph-marker-secondary-sky-light ol li::marker   { color: var(--cdph-clrs-secondary-sky-light)   !important; }
ul.cdph-marker-secondary-pink li::marker,        ul.cdph-marker-secondary-pink ul li::marker,
ol.cdph-marker-secondary-pink li::marker,        ol.cdph-marker-secondary-pink ol li::marker        { color: var(--cdph-clrs-secondary-pink)        !important; }
ul.cdph-marker-secondary-gold li::marker,        ul.cdph-marker-secondary-gold ul li::marker,
ol.cdph-marker-secondary-gold li::marker,        ol.cdph-marker-secondary-gold ol li::marker        { color: var(--cdph-clrs-secondary-gold)        !important; }
ul.cdph-marker-secondary-brown li::marker,       ul.cdph-marker-secondary-brown ul li::marker,
ol.cdph-marker-secondary-brown li::marker,       ol.cdph-marker-secondary-brown ol li::marker       { color: var(--cdph-clrs-secondary-brown)       !important; }

/* — Tertiary — */
ul.cdph-marker-tertiary-carbon li::marker,   ul.cdph-marker-tertiary-carbon ul li::marker,
ol.cdph-marker-tertiary-carbon li::marker,   ol.cdph-marker-tertiary-carbon ol li::marker   { color: var(--cdph-clrs-tertiary-carbon)   !important; }
ul.cdph-marker-tertiary-graphite li::marker, ul.cdph-marker-tertiary-graphite ul li::marker,
ol.cdph-marker-tertiary-graphite li::marker, ol.cdph-marker-tertiary-graphite ol li::marker { color: var(--cdph-clrs-tertiary-graphite) !important; }
ul.cdph-marker-tertiary-black li::marker,    ul.cdph-marker-tertiary-black ul li::marker,
ol.cdph-marker-tertiary-black li::marker,    ol.cdph-marker-tertiary-black ol li::marker    { color: var(--cdph-clrs-tertiary-black)   !important; }
ul.cdph-marker-tertiary-white li::marker,    ul.cdph-marker-tertiary-white ul li::marker,
ol.cdph-marker-tertiary-white li::marker,    ol.cdph-marker-tertiary-white ol li::marker    { color: var(--cdph-clrs-tertiary-white)   !important; }

/* — Tints — */
ul.cdph-marker-tint-blue li::marker,         ul.cdph-marker-tint-blue ul li::marker,
ol.cdph-marker-tint-blue li::marker,         ol.cdph-marker-tint-blue ol li::marker         { color: var(--cdph-clrs-tint-blue)         !important; }
ul.cdph-marker-tint-purple li::marker,       ul.cdph-marker-tint-purple ul li::marker,
ol.cdph-marker-tint-purple li::marker,       ol.cdph-marker-tint-purple ol li::marker       { color: var(--cdph-clrs-tint-purple)       !important; }
ul.cdph-marker-tint-orange li::marker,       ul.cdph-marker-tint-orange ul li::marker,
ol.cdph-marker-tint-orange li::marker,       ol.cdph-marker-tint-orange ol li::marker       { color: var(--cdph-clrs-tint-orange)       !important; }
ul.cdph-marker-tint-teal li::marker,         ul.cdph-marker-tint-teal ul li::marker,
ol.cdph-marker-tint-teal li::marker,         ol.cdph-marker-tint-teal ol li::marker         { color: var(--cdph-clrs-tint-teal)         !important; }
ul.cdph-marker-tint-sky li::marker,          ul.cdph-marker-tint-sky ul li::marker,
ol.cdph-marker-tint-sky li::marker,          ol.cdph-marker-tint-sky ol li::marker          { color: var(--cdph-clrs-tint-sky)          !important; }
ul.cdph-marker-tint-deep-purple li::marker,  ul.cdph-marker-tint-deep-purple ul li::marker,
ol.cdph-marker-tint-deep-purple li::marker,  ol.cdph-marker-tint-deep-purple ol li::marker  { color: var(--cdph-clrs-tint-deep-purple)  !important; }
ul.cdph-marker-tint-mint li::marker,         ul.cdph-marker-tint-mint ul li::marker,
ol.cdph-marker-tint-mint li::marker,         ol.cdph-marker-tint-mint ol li::marker         { color: var(--cdph-clrs-tint-mint)         !important; }
ul.cdph-marker-tint-pink li::marker,         ul.cdph-marker-tint-pink ul li::marker,
ol.cdph-marker-tint-pink li::marker,         ol.cdph-marker-tint-pink ol li::marker         { color: var(--cdph-clrs-tint-pink)         !important; }
ul.cdph-marker-tint-gold li::marker,         ul.cdph-marker-tint-gold ul li::marker,
ol.cdph-marker-tint-gold li::marker,         ol.cdph-marker-tint-gold ol li::marker         { color: var(--cdph-clrs-tint-gold)         !important; }
ul.cdph-marker-tint-black li::marker,        ul.cdph-marker-tint-black ul li::marker,
ol.cdph-marker-tint-black li::marker,        ol.cdph-marker-tint-black ol li::marker        { color: var(--cdph-clrs-tint-black)        !important; }
ul.cdph-marker-tint-graphite li::marker,     ul.cdph-marker-tint-graphite ul li::marker,
ol.cdph-marker-tint-graphite li::marker,     ol.cdph-marker-tint-graphite ol li::marker     { color: var(--cdph-clrs-tint-graphite)     !important; }

/* — ns-list wrapper — */
.gj-ns-list {
    display: block;
}


/* ---------------------------------------------------------------------------
 * Typography Utility Classes
 * --------------------------------------------------------------------------- */

/* Global brand font — scoped to editor shell only, never bleeds into CRM host.
*/
.gj-editor-shell,
.gj-editor-shell * {
    font-family: var(--cdph-font-family) !important;
}
 /* ---------------------------Components------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * 1. Basic Blocks - Text, Headings and Links
 * --------------------------------------------------------------------------- */

/* ── Text paragraph block ───────────────────────────────────────────────── */
.gj-basic-text {
    display: block;
    font-size: var(--cdph-font-size-body);
    line-height: var(--cdph-line-height-body);
    color: var(--cdph-clrs-tertiary-black);
    /* outer spacing is applied exclusively via class-based spacing traits. */
}

/* ── Heading block (h1–h6) ──────────────────────────────────────────────── */
/*
 * Base class intentionally has no color or margin-bottom.
 * Both are applied exclusively by trait defaults at drop time:
 *   • headingColor (default 'blue') → adds class cdph-text-primary-blue
 *   • spacing.marginBottom  (default 'mb-4') → adds Bootstrap mb-4
 * This keeps the output HTML self-describing and avoids CSS override fights.
 *
 * font-weight is intentionally absent — bold is applied exclusively via
 * <strong> in the heading content so TipTap recognises the Bold mark and
 * the user can un-bold text where needed.
 */
.gj-basic-headings {
    display: block;
    line-height: var(--cdph-line-height-heading);
}


/* ── Rich Text block (‹div› block-mode TipTap host) ───────────────────── */
/* Typography for inner block elements (p/ul/ol/h1-h6) is injected by      */
/* TipTapRte.ts TIPTAP_STYLES at runtime (canvas only). These rules apply   */
/* in the published page HTML where TIPTAP_STYLES is not present.           */
.gj-rich-text {
    display: block;
    font-size: var(--cdph-font-size-body);
    line-height: var(--cdph-line-height-body);
    color: var(--cdph-color-body);
    /* outer spacing is applied exclusively via class-based spacing traits. */
}
.gj-rich-text p   { margin: 0 0 1em; }
/* Collapse blank paragraphs — paste/edit artefacts (<p></p> or <p><br></p>).  */
.gj-rich-text p:empty,
.gj-rich-text p:has(> br:only-child) { margin: 0; line-height: 0; }
.gj-rich-text ul,
.gj-rich-text ol  { margin: 0 0 1em; padding-left: 1.5em; }
/* Industry standard: adjacent-sibling spacing, no bottom margin on each li.  */
.gj-rich-text li { margin: 0; }
.gj-rich-text li + li { margin-top: 0.5em; }
/* TipTap wraps list-item content in <p> in block mode — strip its margin.      */
.gj-rich-text li > p { margin: 0; }
/* Sub-list: visible gap between parent text and nested items.                  */
.gj-rich-text li > ul,
.gj-rich-text li > ol { margin: 0.5em 0 0; padding-left: 1.5em; }
/* Heading default: primary-blue (#002595) — same as gj-basic-headings default.  */
/* Font-sizes NOT overridden — Bootstrap defaults apply consistently.              */
/* margin-bottom only — page builder model: every component owns its own bottom   */
/* gap. margin-top creates unexpected space on drop and bypasses the spacing       */
/* trait (mb-* class) that is the single source of outer component spacing.       */
.gj-rich-text h1, .gj-rich-text h2, .gj-rich-text h3,
.gj-rich-text h4, .gj-rich-text h5, .gj-rich-text h6 {
    line-height: var(--cdph-line-height-heading, 1.2);
    margin: 0 0 1rem;
    color: var(--cdph-clrs-primary-blue);
}
/* ── Heading color overrides (richTextHeadingColor trait) ─────────────────── */
/* .gj-rte-h-{colorId} is added to .gj-rich-text by the trait; default is blue. */
.gj-rich-text.gj-rte-h-purple    :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-primary-purple)    !important; }
.gj-rich-text.gj-rte-h-orange    :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-primary-orange)    !important; }
.gj-rich-text.gj-rte-h-teal      :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-primary-teal)      !important; }
.gj-rich-text.gj-rte-h-primary-sky :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-primary-sky)    !important; }
.gj-rich-text.gj-rte-h-carbon    :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-tertiary-carbon)   !important; }
.gj-rich-text.gj-rte-h-graphite  :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-tertiary-graphite) !important; }
.gj-rich-text.gj-rte-h-black     :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-tertiary-black)    !important; }
.gj-rich-text.gj-rte-h-white     :is(h1,h2,h3,h4,h5,h6) { color: var(--cdph-clrs-tertiary-white)    !important; }

/* ── Links inside rich-text ─────────────────────────────────────────── */
/* legacy portal.css: a { color: rgb(0,119,207) } = --cdph-clrs-primary-sky   */
/* Brand underline: 2.5px thickness, 3px offset (matches cdph-underline-* util) */
.gj-rich-text a {
    color: var(--cdph-clrs-primary-sky);
    text-decoration: none;
}
.gj-rich-text a u {
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-primary-sky);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
}
.gj-rich-text a:hover {
    color: var(--cdph-clrs-secondary-navy);
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-secondary-navy);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
}
.gj-rich-text a:hover u { text-decoration-color: var(--cdph-clrs-secondary-navy); }
.gj-rich-text a:focus-visible {
    color: var(--cdph-clrs-primary-sky);
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-primary-sky);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
    outline: 2px solid var(--cdph-clrs-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}
.gj-rich-text a:focus:not(:focus-visible) { outline: none; }

/* ══════════════════════════════════════════════════════════════════════════ */
/* LAYOUT — Production styles (saved to output)                              */
/* Editor-only visual guides (dashed borders, min-heights) live in           */
/* EngineStyles.ts and are injected into the canvas iframe only.             */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── Banner Section ──────────────────────────────────────────────────────── */
.gj-layout-banner {
    position: relative;
    /* flex column so content rows can stretch to fill the banner height */
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    /* Padding and vertical spacing applied via Bootstrap utility classes     */
    /* (container-fluid py-4 py-md-5 px-2 px-md-4) on the component element. */
    /* CSS variable for gradient tint stop — set per height class below */
    --gj-banner-h: 200px;
}

/* Inner container — fills banner when short, grows with content when tall */
.gj-layout-banner-inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Content rows: grow to fill banner height when short (flex-grow: 1),
   never shrink below content height (flex-shrink: 0) so tall content
   pushes the banner to expand rather than scrolling/clipping. */
.gj-layout-banner-inner > .gj-layout-row:not(.gj-section-layout-footer-row) {
    flex: 1 0 auto;
    min-height: 80px;
    align-items: stretch;
}

/* Columns inside banner stretch full row height */
.gj-layout-banner .gj-layout-col {
    align-self: stretch;
    min-height: 0;
}

/* Heights — --gj-banner-h drives the gradient tint hard-stop */
.gj-banner-h-md { min-height: 200px; --gj-banner-h: 200px; }

/* Responsive height scaling */
@media (max-width: 991px) {
    .gj-banner-h-md { min-height: 150px; --gj-banner-h: 150px; }
}
@media (max-width: 767px) {
    .gj-banner-h-md { min-height: 100px; --gj-banner-h: 100px; }
}

/* Background tints — hard-stop gradient so the tint covers only the top    */
/* var(--gj-banner-h) pixels (like the old ::before technique). The area    */
/* below the banner height is white, matching the reference design.         */
.gj-banner-bg-primary { background: linear-gradient(to bottom, var(--cdph-clrs-tint-blue, #ccd3ea) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-teal    { background: linear-gradient(to bottom, var(--cdph-clrs-tint-teal, #cce4e7) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-purple  { background: linear-gradient(to bottom, var(--cdph-clrs-tint-purple, #e9d4e9) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-orange  { background: linear-gradient(to bottom, var(--cdph-clrs-tint-orange, #efdcd1) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-sky { background: linear-gradient(to bottom, var(--cdph-clrs-tint-sky, #cce4f5) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-deep-purple { background: linear-gradient(to bottom, var(--cdph-clrs-tint-deep-purple, #d9d0e0) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-mint { background: linear-gradient(to bottom, var(--cdph-clrs-tint-mint, #eef6f4) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-pink { background: linear-gradient(to bottom, var(--cdph-clrs-tint-pink, #f9e4f1) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-gold { background: linear-gradient(to bottom, var(--cdph-clrs-tint-gold, #fbeed6) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-black { background: linear-gradient(to bottom, var(--cdph-clrs-tint-black, #cccccc) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-graphite { background: linear-gradient(to bottom, var(--cdph-clrs-tint-graphite, #e1e2e3) var(--gj-banner-h), #ffffff var(--gj-banner-h)); }
.gj-banner-bg-white   { background-color: #ffffff; }
.gj-banner-bg-transparent { background-color: transparent; }

/* ── Layout Section (grid wrapper) ──────────────────────────────────────── */
/* Reset Bootstrap container-fluid horizontal padding (--bs-gutter-x).       */
/* Content reaches column edges by default. Use paddingX trait to opt in.    */
.gj-layout-section {
    box-sizing: border-box;
    --bs-gutter-x: 0;
}

/* ── Layout Row — zero default gutters ───────────────────────────────────── */
/* Bootstrap .row sets --bs-gutter-x: 1.5rem by default which adds 12px      */
/* padding to every col-* child. Reset to 0 so columns are flush by default. */
/* The rowColGap trait sets gj-col-gap-* on the row which overrides this with */
/* the chosen pixel value, so gap control still works as expected.            */
.gj-layout-row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* ── Column Gap (rowColGap trait) ────────────────────────────────────────── */
/* Sets --bs-gutter-x on the row. Bootstrap applies this as padding on each   */
/* col-* (half each side) and negative margin on the row (half each side),    */
/* so the row stays flush with the section — gap only between columns.        */
.gj-col-gap-4  { --bs-gutter-x: 0.25rem; }  /*  4px */
.gj-col-gap-8  { --bs-gutter-x: 0.5rem;  }  /*  8px */
.gj-col-gap-16 { --bs-gutter-x: 1rem;    }  /* 16px */
.gj-col-gap-24 { --bs-gutter-x: 1.5rem;  }  /* 24px */
.gj-col-gap-32 { --bs-gutter-x: 2rem;    }  /* 32px */
.gj-col-gap-40 { --bs-gutter-x: 2.5rem;  }  /* 40px */
.gj-col-gap-48 { --bs-gutter-x: 3rem;    }  /* 48px */
.gj-col-gap-64 { --bs-gutter-x: 4rem;    }  /* 64px */
.gj-col-gap-96 { --bs-gutter-x: 6rem;    }  /* 96px */

/* ── Row Gap (rowRowGap trait) ────────────────────────────────────────────── */
/* Sets --bs-gutter-y on the row. Bootstrap applies margin-top on each col-*  */
/* and negative margin-top on the row to cancel the first row — gap only      */
/* between wrapped rows of columns.                                           */
.gj-row-gap-4  { --bs-gutter-y: 0.25rem; }  /*  4px */
.gj-row-gap-8  { --bs-gutter-y: 0.5rem;  }  /*  8px */
.gj-row-gap-16 { --bs-gutter-y: 1rem;    }  /* 16px */
.gj-row-gap-24 { --bs-gutter-y: 1.5rem;  }  /* 24px */
.gj-row-gap-32 { --bs-gutter-y: 2rem;    }  /* 32px */
.gj-row-gap-40 { --bs-gutter-y: 2.5rem;  }  /* 40px */
.gj-row-gap-48 { --bs-gutter-y: 3rem;    }  /* 48px */
.gj-row-gap-64 { --bs-gutter-y: 4rem;    }  /* 64px */
.gj-row-gap-96 { --bs-gutter-y: 6rem;    }  /* 96px */

/* ── Custom brand gutter steps (fills Bootstrap's 24px→48px gap) ─────────── */
.cdph-gx-32 { --bs-gutter-x: 2rem;  }   /* 32px */
.cdph-gx-40 { --bs-gutter-x: 2.5rem; }  /* 40px */
.cdph-gx-64 { --bs-gutter-x: 4rem;  }   /* 64px */
.cdph-gy-32 { --bs-gutter-y: 2rem;  }   /* 32px */
.cdph-gy-40 { --bs-gutter-y: 2.5rem; }  /* 40px */
.cdph-gy-64 { --bs-gutter-y: 4rem;  }   /* 64px */

/* Combined gutter: sets both column-gap and row-gap togther */
.cdph-g-32  { --bs-gutter-x: 2rem;   --bs-gutter-y: 2rem;   }   /* 32px both */
.cdph-g-40  { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2.5rem; }   /* 40px both */
.cdph-g-64  { --bs-gutter-x: 4rem;   --bs-gutter-y: 4rem;   }   /* 64px both */
.cdph-g-96  { --bs-gutter-x: 6rem;   --bs-gutter-y: 6rem;   }   /* 96px both */

/* ── Container Gap utilities (containerGap trait — flex/grid containers) ─── */
/* These use the CSS gap property (not Bootstrap gutters). Applied directly    */
/* to layout-container when display is flex or grid.                           */
.gj-gap-0  { gap: 0;       }  /*  0px  */
.gj-gap-4  { gap: 0.25rem; }  /*  4px  */
.gj-gap-8  { gap: 0.5rem;  }  /*  8px  */
.gj-gap-16 { gap: 1rem;    }  /* 16px  */
.gj-gap-24 { gap: 1.5rem;  }  /* 24px  */
.gj-gap-32 { gap: 2rem;    }  /* 32px  */
.gj-gap-40 { gap: 2.5rem;  }  /* 40px  */
.gj-gap-48 { gap: 3rem;    }  /* 48px  */

/* ── Container Min-Height utilities ─────────────────────────────────────── */
.cdph-min-h-sm   { min-height: 80px;  }
.cdph-min-h-md   { min-height: 200px; }
.cdph-min-h-lg   { min-height: 400px; }
.cdph-min-h-full { min-height: 100vh; }

/* ── Layout Column ───────────────────────────────────────────────────────── */
/* Flex column — children stack vertically. No padding override needed here  */
/* because .gj-layout-row resets --bs-gutter-x/y to 0 by default, so        */
/* Bootstrap's .row > * gutter padding resolves to 0 unless overridden by    */
/* a gj-col-gap-* class on the row (rowColGap trait).                        */
.gj-layout-col {
    display: flex;
    flex-direction: column;
    background: transparent;
    box-sizing: border-box;
}

/* ── Column horizontal alignment ─────────────────────────────────────────── */
/* text-align inherits into text children so block elements appear aligned.  */
/* max-width prevents wide children from overflowing a shrink-wrapped col.   */
.gj-layout-col.align-items-center { text-align: center; }
.gj-layout-col.align-items-end    { text-align: right; }

.gj-layout-col.align-items-start > *,
.gj-layout-col.align-items-center > *,
.gj-layout-col.align-items-end > * {
    max-width: 100%;
}

/* ── Row gap override ────────────────────────────────────────────────────── */
/* Bootstrap 5 vertical gutter:                                              */
/*   .row > * { margin-top: var(--bs-gutter-y) }                            */
/*   .row     { margin-top: calc(-1 * --bs-gutter-y) }  ← cancels 1st row  */
/*                                                                           */
/* This override ensures layout columns inherit the gutter even when other   */
/* specificity concerns might block Bootstrap's .row > * rule. We use        */
/* margin-top (NOT padding-top) so the row's negative margin-top correctly   */
/* cancels the first row — no unwanted top space.                            */
[class*="gy-"] > .gj-layout-col,
[class*="cdph-gy-"] > .gj-layout-col,
[class*="gj-row-gap-"] > .gj-layout-col {
    margin-top: var(--bs-gutter-y) !important;
}

/* ── Banner Footer Row ───────────────────────────────────────────── */
/* Compact row always at the bottom of both banner block types.              */
/* Intended for page metadata e.g. 'Page Last Updated' component.           */
.gj-section-layout-footer-row {
    padding-top:    0 !important;
    margin-top:     0 !important;
}
.gj-section-layout-footer-col {
    padding-top:    4px;
}

/* ── Link block ─────────────────────────────────────────────────────────── */
/*
 * No underline by default — plain sky-color text.
 * display:inline removes the vertical hit-area buffer that inline-block creates
 * from line-height, so hover only fires when the pointer is over actual glyphs.
 * Underline appears on hover/focus (navy, brand spec) and when the user
 * explicitly applies <u> via TipTap (sky, brand spec).
 */
.gj-basic-link {
    display: inline;
    font-size: var(--cdph-font-size-body);
    line-height: var(--cdph-line-height-body);
    color: var(--cdph-clrs-primary-sky);
    cursor: pointer;
    text-decoration: none;
    /* margin-bottom is applied exclusively via the spacing trait (mb-* class). */
}
/* <u> mark from TipTap — always visible, sky color at brand spec */
.gj-basic-link u {
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-primary-sky);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
}
.gj-basic-link:hover {
    color: var(--cdph-clrs-secondary-navy);
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-secondary-navy);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
}
/* Hover on <u> — inherit navy from parent */
.gj-basic-link:hover u {
    text-decoration-color: var(--cdph-clrs-secondary-navy);
}
.gj-basic-link:active {
    color: var(--cdph-clrs-secondary-navy);
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-secondary-navy);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
}
/* ADA: keyboard focus ring (WCAG 2.4.7) */
.gj-basic-link:focus-visible {
    color: var(--cdph-clrs-primary-sky);
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-primary-sky);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
    outline: 2px solid var(--cdph-clrs-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}
.gj-basic-link:focus:not(:focus-visible) { outline: none; }

/* ns-video */
.gj-video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    /* 16:9 aspect ratio — self-contained, no Bootstrap required */
    padding-top: 56.25%;
}

.gj-video-wrapper > iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Inline links inside text/headings/rich-text via TipTap ─────────────── */
/*
 * Same standard as gj-basic-link: no underline by default, underline on hover.
 * <u> marks get underline via TipTap's StyledUnderline extension (inline style).
 * sky color matches the standalone link component for one consistent standard.
 */
.gj-editor-shell a:not(.gj-lmenu-link):not(.btn):not(.gj-basic-link) {
    font-size: inherit;
    color: var(--cdph-clrs-primary-sky);
    text-decoration: none;
    cursor: pointer;
}
.gj-editor-shell a:not(.gj-lmenu-link):not(.btn):not(.gj-basic-link):hover {
    color: var(--cdph-clrs-secondary-navy);
    text-decoration: underline;
    text-decoration-color: var(--cdph-clrs-secondary-navy);
    text-decoration-thickness: var(--cdph-underline-thickness);
    text-underline-offset: var(--cdph-underline-offset);
}
.gj-editor-shell a:not(.gj-lmenu-link):not(.btn):not(.gj-basic-link):active {
    color: var(--cdph-clrs-secondary-navy);
}
.gj-editor-shell a:not(.gj-lmenu-link):not(.btn):not(.gj-basic-link):focus-visible {
    color: var(--cdph-clrs-primary-sky);
    outline: 2px solid var(--cdph-clrs-primary-blue);
    outline-offset: 2px;
    border-radius: 2px;
}
.gj-editor-shell a:not(.gj-lmenu-link):not(.btn):not(.gj-basic-link):focus:not(:focus-visible) {
    outline: none;
}


/* Extra Large Icon / Type Sizes */
.cdph-fs-48 { font-size: 3em !important; }
.cdph-fs-64 { font-size: 4em !important; }

/* ns-image placeholder state — single global rule covers standalone, carousel, callout, etc. */
.gj-ns-image[data-gj-image-placeholder="true"] {
    object-fit: contain !important;
    background: linear-gradient(135deg, #e8f0fa 0%, #f0f6ff 50%, #e8f0fa 100%);
    border: 1px dashed rgba(0, 37, 149, 0.28);
    padding: 1rem;
    cursor: pointer;
}

/* ns-icon */
.gj-ns-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.gj-ns-icon.gj-ns-icon--bg {
    /* Perfect circle sized relative to the icon's font-size so it scales at
       every icon size automatically. 2.5em = circle is 2.5× the icon glyph,
       matching the reference design (icon occupies ~40% of the circle area). */
    width: 2.5em;
    height: 2.5em;
    min-width: 2.5em;
    min-height: 2.5em;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Icon tint background colors — one class per brand color */
.gj-ns-icon--bg-blue          { background-color: var(--cdph-clrs-tint-blue); }
.gj-ns-icon--bg-primary-sky   { background-color: var(--cdph-clrs-tint-sky); }
.gj-ns-icon--bg-teal          { background-color: var(--cdph-clrs-tint-teal); }
.gj-ns-icon--bg-purple        { background-color: var(--cdph-clrs-tint-purple); }
.gj-ns-icon--bg-orange        { background-color: var(--cdph-clrs-tint-orange); }
.gj-ns-icon--bg-navy          { background-color: var(--cdph-clrs-tint-blue); }
.gj-ns-icon--bg-deep-purple   { background-color: var(--cdph-clrs-tint-deep-purple); }
.gj-ns-icon--bg-mint          { background-color: var(--cdph-clrs-tint-mint); }
.gj-ns-icon--bg-tangerine     { background-color: var(--cdph-clrs-tint-orange); }
.gj-ns-icon--bg-sky-light     { background-color: var(--cdph-clrs-tint-sky); }
.gj-ns-icon--bg-pink          { background-color: var(--cdph-clrs-tint-pink); }
.gj-ns-icon--bg-gold          { background-color: var(--cdph-clrs-tint-gold); }
.gj-ns-icon--bg-brown         { background-color: var(--cdph-clrs-tint-gold); }
.gj-ns-icon--bg-graphite      { background-color: var(--cdph-clrs-tint-graphite); }
.gj-ns-icon--bg-black         { background-color: var(--cdph-clrs-tint-black); }
.gj-ns-icon--bg-carbon        { background-color: var(--cdph-clrs-tint-black); }
.gj-ns-icon--bg-white         { background-color: var(--cdph-clrs-tint-graphite); }


/* ═══════════════════════════════════════════════════════════════════════
   ns-button — V2 Button component
   ═══════════════════════════════════════════════════════════════════════ */

.gj-ns-button {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    padding: 0.5rem 1.25rem;
    width: fit-content;
}

/* ── Solid variants ────────────────────────────────────────────────── */
/* Border fallback: dark-bg buttons → white border; light-bg buttons → dark border */
.gj-btn-blue         { background-color: var(--cdph-clrs-primary-blue)        !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-primary-sky  { background-color: var(--cdph-clrs-primary-sky)         !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-teal         { background-color: var(--cdph-clrs-primary-teal)        !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-purple       { background-color: var(--cdph-clrs-primary-purple)      !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-orange       { background-color: var(--cdph-clrs-primary-orange)      !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-navy         { background-color: var(--cdph-clrs-secondary-navy)      !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-deep-purple  { background-color: var(--cdph-clrs-secondary-deep-purple) !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-mint         { background-color: var(--cdph-clrs-secondary-mint)      !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }
.gj-btn-tangerine    { background-color: var(--cdph-clrs-secondary-tangerine) !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }
.gj-btn-sky-light    { background-color: var(--cdph-clrs-secondary-sky-light) !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }
.gj-btn-pink         { background-color: var(--cdph-clrs-secondary-pink)      !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }
.gj-btn-gold         { background-color: var(--cdph-clrs-secondary-gold)      !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }
.gj-btn-brown        { background-color: var(--cdph-clrs-secondary-brown)     !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }
.gj-btn-carbon       { background-color: var(--cdph-clrs-tertiary-carbon)     !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-black        { background-color: var(--cdph-clrs-tertiary-black)      !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-graphite     { background-color: var(--cdph-clrs-tertiary-graphite)   !important; color: var(--gj-btn-text-color, #fff) !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-white))      !important; }
.gj-btn-white        { background-color: var(--cdph-clrs-tertiary-white)      !important; color: var(--gj-btn-text-color, #000) !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))                !important; }

/* ── Solid hover ───────────────────────────────────────────────────── */
.gj-ns-button[class*="gj-btn-"]:hover,
.gj-ns-button[class*="gj-btn-"]:focus {
    filter: brightness(0.82);
}

/* ── Outline variants ─────────────────────────────────────────────── */
.gj-btn-outline-blue         { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-primary-blue))         !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-primary-blue))         !important; }
.gj-btn-outline-primary-sky  { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-primary-sky))          !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-primary-sky))          !important; }
.gj-btn-outline-teal         { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-primary-teal))         !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-primary-teal))         !important; }
.gj-btn-outline-purple       { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-primary-purple))       !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-primary-purple))       !important; }
.gj-btn-outline-orange       { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-primary-orange))       !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-primary-orange))       !important; }
.gj-btn-outline-navy         { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-secondary-navy))       !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-navy))       !important; }
.gj-btn-outline-deep-purple  { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-secondary-deep-purple))!important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-deep-purple))!important; }
.gj-btn-outline-mint         { background-color: transparent !important; color: var(--gj-btn-text-color, #000)                                  !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-mint))      !important; }
.gj-btn-outline-tangerine    { background-color: transparent !important; color: var(--gj-btn-text-color, #000)                                  !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-tangerine)) !important; }
.gj-btn-outline-sky-light    { background-color: transparent !important; color: var(--gj-btn-text-color, #000)                                  !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-sky-light)) !important; }
.gj-btn-outline-pink         { background-color: transparent !important; color: var(--gj-btn-text-color, #000)                                  !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-pink))      !important; }
.gj-btn-outline-gold         { background-color: transparent !important; color: var(--gj-btn-text-color, #000)                                  !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-gold))      !important; }
.gj-btn-outline-brown        { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-secondary-brown))      !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-secondary-brown))     !important; }
.gj-btn-outline-carbon       { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-tertiary-carbon))      !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-carbon))     !important; }
.gj-btn-outline-black        { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-tertiary-black))       !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-black))       !important; }
.gj-btn-outline-graphite     { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-tertiary-graphite))    !important; border: 2px solid var(--gj-btn-border-color, var(--cdph-clrs-tertiary-graphite))    !important; }
.gj-btn-outline-white        { background-color: transparent !important; color: var(--gj-btn-text-color, var(--cdph-clrs-tertiary-black))       !important; border: 2px solid var(--gj-btn-border-color, rgba(0, 0, 0, 0.18))              !important; }

/* ── Outline hover ────────────────────────────────────────────────── */
.gj-ns-button[class*="gj-btn-outline-"]:hover,
.gj-ns-button[class*="gj-btn-outline-"]:focus {
    filter: brightness(0.82);
}


/* ═══════════════════════════════════════════════════════════════════════
   ns-callout — Callout component family
   ═══════════════════════════════════════════════════════════════════════ */

.gj-callout {
    --gj-callout-accent: var(--cdph-clrs-primary-blue);
    --gj-callout-surface: var(--cdph-clrs-tint-blue);
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px; /* default = lg — overridden by gj-callout-radius-* trait classes */
    background: #ffffff;
    color: var(--cdph-color-body);
}

/* ── Callout border-radius modifiers (calloutBorderRadius trait) ─────────── */
.gj-callout-radius-none { border-radius: 0 !important; }
.gj-callout-radius-sm   { border-radius: 8px !important; }
.gj-callout-radius-md   { border-radius: 12px !important; }
/* gj-callout-radius-lg = 18px (CSS default — no class needed) */
.gj-callout-radius-xl   { border-radius: 24px !important; }

.gj-callout-theme-blue {
    --gj-callout-accent: var(--cdph-clrs-primary-blue);
    --gj-callout-surface: var(--cdph-clrs-tint-blue);
}

.gj-callout-theme-primary-sky {
    --gj-callout-accent: var(--cdph-clrs-primary-sky);
    --gj-callout-surface: var(--cdph-clrs-tint-sky);
}

.gj-callout-theme-teal {
    --gj-callout-accent: var(--cdph-clrs-primary-teal);
    --gj-callout-surface: var(--cdph-clrs-tint-teal);
}

.gj-callout-theme-purple {
    --gj-callout-accent: var(--cdph-clrs-primary-purple);
    --gj-callout-surface: var(--cdph-clrs-tint-purple);
}

.gj-callout-theme-orange {
    --gj-callout-accent: var(--cdph-clrs-primary-orange);
    --gj-callout-surface: var(--cdph-clrs-tint-orange);
}

.gj-callout__media,
.gj-callout__header,
.gj-callout__body,
.gj-callout__content {
    min-width: 0;
    box-sizing: border-box;
}

.gj-callout__header,
.gj-callout__body,
.gj-callout__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.gj-callout__media {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    background: #edf2f7;
}

.gj-callout__media > .gj-ns-image {
    display: block;
    width: 100% !important;
    height: 100%;
    min-height: 100%;
    margin: 0 !important;
    object-fit: cover;
    align-self: stretch !important;
    border-radius: 0 !important;
}


.gj-callout--stack {
    height: 100%;
    background: var(--gj-callout-surface);
}

.gj-callout--stack .gj-callout__body {
    flex: 1 1 auto;
    /* Base padding — Bootstrap pt-3 pe-3 pb-4 ps-3 utility classes override this */
    padding: 1rem 1rem 1.5rem;
    background: var(--gj-callout-surface);
}

.gj-callout--stack .gj-callout__body :is(h1, h2, h3, h4, h5, h6),
.gj-callout--band .gj-callout__header :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gj-callout-accent) !important;
}

.gj-callout--stack .gj-callout__body a:not(.gj-ns-button),
.gj-callout--band .gj-callout__body a:not(.gj-ns-button) {
    color: var(--gj-callout-accent) !important;
    text-decoration-color: var(--gj-callout-accent) !important;
}

.gj-callout--split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
}

.gj-callout--split .gj-callout__content {
    justify-content: center;
    gap: 0;
    /* Base padding — Bootstrap p-4 utility class overrides this */
    padding: 1.5rem;
    background: var(--gj-callout-accent);
    color: #ffffff;
}

.gj-callout--split .gj-callout__content :is(.gj-rich-text, .gj-basic-text, .gj-basic-headings, .gj-basic-link) {
    color: inherit;
}

.gj-callout--split .gj-callout__content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li) {
    color: inherit !important;
}

.gj-callout--split .gj-callout__content a:not(.gj-ns-button) {
    text-decoration-color: currentColor !important;
}

.gj-callout--split .gj-callout__content .gj-ns-button {
    width: auto !important;
    max-width: 100%;
}

/* White button CTA needs a visible border — white-on-white is invisible.    */
/* Light surfaces (stack/band body) use subtle dark border; the accent-      */
/* colored split content uses a semi-transparent white border instead.       */
.gj-callout .gj-btn-white {
    border-color: rgba(0, 0, 0, 0.2) !important;
}
.gj-callout .gj-btn-outline-white {
    border-color: rgba(0, 0, 0, 0.2) !important;
}
.gj-callout--split .gj-callout__content .gj-btn-white {
    border-color: rgba(255, 255, 255, 0.4) !important;
}
.gj-callout--split .gj-callout__content .gj-btn-outline-white {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.gj-callout .gj-ns-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
}

.gj-callout .gj-ns-button.rounded-pill {
    border-radius: 999px !important;
}

.gj-callout--split .gj-callout__media {
    min-height: 280px;
}

.gj-callout--band {
    background: #ffffff;
}

.gj-callout--band .gj-callout__header {
    /* Base padding — Bootstrap pt-3 pe-3 pb-3 ps-3 utility classes override this */
    padding: 1rem;
    background: var(--gj-callout-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gj-callout--band .gj-callout__header :is(h1, h2, h3, h4, h5, h6, p, span, a, div) {
    color: var(--gj-callout-accent) !important;
}

.gj-callout--band .gj-callout__body {
    /* Base padding — Bootstrap pt-3 pe-3 pb-4 ps-3 utility classes override this */
    padding: 1rem 1rem 1.5rem;
    background: #ffffff;
}

.gj-callout--band .gj-callout__title {
    margin: 0 !important;
}

@media (max-width: 767px) {
    .gj-callout__media {
        min-height: 200px;
    }

    .gj-callout--split {
        grid-template-columns: 1fr;
    }

    .gj-callout--split .gj-callout__content,
    .gj-callout--stack .gj-callout__body,
    .gj-callout--band .gj-callout__header,
    .gj-callout--band .gj-callout__body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ==========================================================================
   ns-carousel - Carousel component
   ========================================================================== */

.gj-carousel {
    --gj-carousel-accent: var(--cdph-clrs-primary-purple);
    --gj-carousel-surface: var(--cdph-clrs-tint-purple);
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    position: relative;
}

.gj-carousel-theme-blue {
    --gj-carousel-accent: var(--cdph-clrs-primary-blue);
    --gj-carousel-surface: var(--cdph-clrs-tint-blue);
}

.gj-carousel-theme-primary-sky {
    --gj-carousel-accent: var(--cdph-clrs-primary-sky);
    --gj-carousel-surface: var(--cdph-clrs-tint-sky);
}

.gj-carousel-theme-teal {
    --gj-carousel-accent: var(--cdph-clrs-primary-teal);
    --gj-carousel-surface: var(--cdph-clrs-tint-teal);
}

.gj-carousel-theme-purple {
    --gj-carousel-accent: var(--cdph-clrs-primary-purple);
    --gj-carousel-surface: var(--cdph-clrs-tint-purple);
}

.gj-carousel-theme-orange {
    --gj-carousel-accent: var(--cdph-clrs-primary-orange);
    --gj-carousel-surface: var(--cdph-clrs-tint-orange);
}

.gj-carousel__viewport {
    position: relative;
    overflow: hidden;
}

.gj-carousel__track {
    width: 100%;
    display: flex;
    /* transition is set by the runtime script (carouselRuntime.ts)
       at initialisation time, NOT here in the stylesheet.
       This prevents unwanted animated sliding in the editor
       where the runtime script never runs. */
}

.gj-carousel__slide {
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    min-height: 360px;
    background: #ffffff;
}

.gj-carousel__content,
.gj-carousel__media {
    min-width: 0;
    box-sizing: border-box;
}

.gj-carousel__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    /* 5.5rem (88px) left clears the 64px prev-arrow at left:12px (right edge 76px) + 12px breathing room.
       4rem right mirrors symmetric breathing against the media pane.
       Bottom 3.75rem (60px) clears the controls bar. */
    padding: clamp(1.5rem, 2.5vw, 2.5rem) 4rem 3.75rem 5.5rem;
    background: var(--gj-carousel-accent);
    color: #ffffff;
}

.gj-carousel__content :is(.gj-rich-text, .gj-basic-text, .gj-basic-headings, .gj-basic-link) {
    color: inherit;
}

.gj-carousel__content :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li) {
    color: inherit !important;
}

.gj-carousel__content a:not(.gj-ns-button) {
    color: inherit !important;
    text-decoration-color: currentColor !important;
}

.gj-carousel__content .gj-ns-button {
    align-self: flex-start;
    width: auto !important;
    max-width: 100%;
}

.gj-carousel__media {
    min-height: 320px;
    background: #edf2f7;
}

.gj-carousel__media > .gj-ns-image {
    display: block;
    width: 100% !important;
    height: 100%;
    min-height: 100%;
    margin: 0 !important;
    object-fit: cover;
    align-self: stretch !important;
    border-radius: 0 !important;
}


.gj-carousel__nav-btn {
    /* Full circle sitting just inside the viewport edge */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--cdph-clrs-tertiary-carbon, #151e28);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Full circles sitting just inside the viewport edges */
.gj-carousel__nav-btn--prev { left: 12px; }
.gj-carousel__nav-btn--next { right: 12px; }

.gj-carousel__nav-btn:hover,
.gj-carousel__nav-btn:focus-visible {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.gj-carousel__controls {
    /* Pinned to bottom-right of the content pane (content is 60% = 3fr of 5fr) */
    position: absolute;
    right: calc(40% + 1rem);
    bottom: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    z-index: 4;
}

.gj-carousel__play {
    /* Visual size */
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: var(--cdph-clrs-tertiary-carbon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    /* WCAG 2.5.5: minimum 44×44px touch target via padding */
    position: relative;
}

/* Expand tap target without changing visual size (pseudo-element trick) */
.gj-carousel__play::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 999px;
}

.gj-carousel__play:hover,
.gj-carousel__play:focus-visible {
    background: rgba(0, 0, 0, 0.04);
}

.gj-carousel__pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gj-carousel__dot {
    /* Visual size: 12×12px dot */
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: transparent;
    padding: 0;
    cursor: pointer;
    /* WCAG 2.5.5: expand tap target to 44×44px via pseudo-element */
    position: relative;
}

.gj-carousel__dot::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 999px;
}

.gj-carousel__dot.is-active {
    background: #ffffff;
}

.gj-carousel__dot:focus-visible,
.gj-carousel__play:focus-visible,
.gj-carousel__nav-btn:focus-visible {
    outline: 2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: 2px;
}

/* prefers-reduced-motion: handled by carouselRuntime.ts
   which checks matchMedia and sets track.style.transition = 'none' */

@media (max-width: 991px) {
    .gj-carousel__slide {
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    .gj-carousel {
        border-radius: 14px;
    }

    .gj-carousel__slide {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .gj-carousel__content {
        order: 2;
        /* Mobile: 5.5rem (88px) left clears the 48px arrow at left:8px (right edge 56px) + 32px breathing.
           4rem right mirrors it. Bottom 3.75rem clears the abs-positioned controls at bottom:0.65rem. */
        padding: 1rem 4rem 3.75rem 5.5rem;
    }

    .gj-carousel__media {
        order: 1;
        min-height: 220px;
    }

    .gj-carousel__nav-btn--prev { left: 8px; }
    .gj-carousel__nav-btn--next { right: 8px; }

    .gj-carousel__controls {
        /* Centered at the bottom on mobile — sits at the bottom of the stacked slide
           (content is order:2, so viewport bottom = content bottom).
           Dots and play button are white and read well on the colored accent background. */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 0.65rem;
        align-items: center;
        background: transparent;
        padding: 0;
    }
}

/* ==========================================================================
   ns-tabs - Tabs component
   ========================================================================== */

.gj-tabs {
    --gj-tabs-accent: var(--cdph-clrs-primary-blue);
    --gj-tabs-surface: var(--cdph-clrs-tint-blue);
    --gj-tabs-frame: var(--gj-tabs-accent);
    width: 100%;
    min-width: 0;
    border: 2px solid var(--gj-tabs-frame);
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
}

.gj-tabs-theme-blue {
    --gj-tabs-accent: var(--cdph-clrs-primary-blue);
    --gj-tabs-surface: var(--cdph-clrs-tint-blue);
}

.gj-tabs-theme-primary-sky {
    --gj-tabs-accent: var(--cdph-clrs-primary-sky);
    --gj-tabs-surface: var(--cdph-clrs-tint-sky);
}

.gj-tabs-theme-teal {
    --gj-tabs-accent: var(--cdph-clrs-primary-teal);
    --gj-tabs-surface: var(--cdph-clrs-tint-teal);
}

.gj-tabs-theme-purple {
    --gj-tabs-accent: var(--cdph-clrs-primary-purple);
    --gj-tabs-surface: var(--cdph-clrs-tint-purple);
}

.gj-tabs-theme-orange {
    --gj-tabs-accent: var(--cdph-clrs-primary-orange);
    --gj-tabs-surface: var(--cdph-clrs-tint-orange);
}

.gj-tabs__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    margin: 0;
    background: #f2f4f7;
    border-bottom: 0;
}

.gj-tabs__tab {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    border-right: 2px solid var(--gj-tabs-frame);
    border-bottom: 0;
    margin: 0;
    background: #f2f4f7;
    color: var(--cdph-clrs-tertiary-carbon, #151e28);
    padding: 0.85rem 0.5rem;
    border-radius: 0;
    line-height: 1.3;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gj-tabs__tab:last-child {
    border-right: 0;
}

.gj-tabs__tab:hover {
    background: #e8edf3;
}

.gj-tabs__tab:focus-visible {
    outline: 2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: -2px;
    z-index: 1;
}

.gj-tabs__tab.is-active {
    color: #ffffff;
    background: color-mix(in srgb, var(--gj-tabs-accent) 88%, #000 12%);
    box-shadow: none;
}

.gj-tabs__panels {
    background: #ffffff;
    padding: 0;
    border-top: 2px solid var(--gj-tabs-frame);
}

.gj-tabs__panel {
    min-width: 0;
    min-height: 120px;
    padding: 0;
}

/* Class-based hide/show — works even when CMS sanitizers strip the hidden attribute */
.gj-tabs__panel:not(.is-active) {
    display: none;
}

.gj-tabs__panel.is-active {
    display: block;
}

/* Keep [hidden] rule for semantic correctness and backward compat */
.gj-tabs__panel[hidden] {
    display: none !important;
}

.gj-tabs__panel:empty {
    min-height: 120px;
    border: 2px dashed color-mix(in srgb, var(--gj-tabs-accent) 40%, #ffffff 60%);
    background: color-mix(in srgb, var(--gj-tabs-surface) 55%, #ffffff 45%);
}

.gj-tabs__panel > :last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .gj-tabs__nav {
        flex-wrap: wrap;
    }

    .gj-tabs__tab {
        flex: 1 1 50%;
        min-width: 0;
        padding: 0.7rem 0.75rem;
        font-size: 0.95rem;
        border-bottom: 0;
    }

    .gj-tabs__tab:nth-child(2n) {
        border-right: 0;
    }

    .gj-tabs__tab:last-child {
        border-bottom: 0;
    }

    .gj-tabs__panels {
        padding: 0;
    }

    .gj-tabs__panel {
        padding: 0;
    }
}

/* ==========================================================================
   ns-topnav - Top navigation with dropdowns
   ========================================================================== */

.gj-topnav {
    --gj-topnav-accent: var(--cdph-clrs-primary-blue);
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    position: relative;
}

.gj-topnav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    background: #fff;
    color: var(--cdph-clrs-tertiary-carbon, #151e28);
    cursor: pointer;
}

.gj-topnav-list,
.gj-topnav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gj-topnav-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.gj-topnav-item {
    position: relative;
}

/* Round first/last item links to match nav border-radius */
.gj-topnav-list > .gj-topnav-item:first-child > .gj-topnav-link-main {
    border-radius: 0.375rem 0 0 0.375rem;
}

.gj-topnav-list > .gj-topnav-item:last-child > .gj-topnav-link-main {
    border-radius: 0 0.375rem 0.375rem 0;
}

.gj-topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--cdph-clrs-tertiary-carbon, #151e28);
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gj-topnav-link-main {
    padding: 0.875rem 1rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
}

.gj-topnav-link-main.active {
    color: #ffffff;
    background: var(--gj-topnav-accent);
}

.gj-topnav-link-main:hover {
    color: var(--gj-topnav-accent);
    background: color-mix(in srgb, var(--cdph-clrs-tint-blue) 70%, #fff 30%);
}

/* Open dropdown parent: accent bg + white text (matches active state) */
.gj-topnav-item.open > .gj-topnav-link-main {
    color: #ffffff;
    background: var(--gj-topnav-accent);
}

.gj-topnav-link-main[aria-haspopup="true"]::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transform: translateY(1px);
}

.gj-topnav-submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    z-index: 20;
    display: none;
    background: var(--gj-topnav-accent);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Click-only: submenu opens only via .open class set by JS, not on hover */
.gj-topnav-item.open > .gj-topnav-submenu {
    display: block;
}

.gj-topnav-sublink {
    display: block;
    width: 100%;
    padding: 0.65rem 0.875rem;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #ffffff;
}

.gj-topnav-sublink:hover,
.gj-topnav-sublink:focus-visible {
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
}

.gj-topnav-link:focus-visible {
    outline: 2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: -2px;
}

@media (max-width: 767px) {
    .gj-topnav-toggle {
        display: inline-flex;
    }

    .gj-topnav-list {
        display: none;
        flex-direction: column;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .gj-topnav-list.show {
        display: flex;
    }

    .gj-topnav-link-main {
        width: 100%;
        padding: 0.75rem 0.9rem;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .gj-topnav-submenu {
        position: static;
        min-width: 0;
        box-shadow: none;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        background: var(--gj-topnav-accent);
    }

    .gj-topnav-item:hover > .gj-topnav-submenu {
        display: none;
    }

    .gj-topnav-item.open > .gj-topnav-submenu {
        display: block;
    }

    .gj-topnav-sublink {
        padding-left: 1.4rem;
    }
}

/* TopNav theme color classes — override --gj-topnav-accent per brand colour */
.gj-topnav-theme-blue         { --gj-topnav-accent: var(--cdph-clrs-primary-blue); }
.gj-topnav-theme-primary-sky  { --gj-topnav-accent: var(--cdph-clrs-primary-sky); }
.gj-topnav-theme-teal         { --gj-topnav-accent: var(--cdph-clrs-primary-teal); }
.gj-topnav-theme-purple       { --gj-topnav-accent: var(--cdph-clrs-primary-purple); }
.gj-topnav-theme-orange       { --gj-topnav-accent: var(--cdph-clrs-primary-orange); }
.gj-topnav-theme-navy         { --gj-topnav-accent: var(--cdph-clrs-secondary-navy); }
.gj-topnav-theme-deep-purple  { --gj-topnav-accent: var(--cdph-clrs-secondary-deep-purple); }


/* ═══════════════════════════════════════════════════════════════════════
   ns-table — V2 Table component
   ═══════════════════════════════════════════════════════════════════════ */

.gj-table-wrapper { overflow-x: auto; }
.gj-table-inner   { border-collapse: collapse; width: 100%; }

/* ── Header colour themes ──────────────────────────────────────────── */
/*
 * Bootstrap 5 sets background-color on individual <th>/<td> cells via
 * --bs-table-bg / --bs-table-accent-bg, so targeting the <thead> element
 * alone is not enough — we must override the <th> cells directly with
 * !important to beat Bootstrap's specificity.
 * The border color uses --bs-table-border-color which Bootstrap reads when
 * rendering table-bordered.
 */

/* Blue (default) */
.gj-table-wrapper.gj-table-color-blue {
    --gj-tbl-header-bg:    var(--cdph-clrs-primary-blue);
    --gj-tbl-border-color: var(--cdph-clrs-primary-blue);
}
/* Sky */
.gj-table-wrapper.gj-table-color-primary-sky {
    --gj-tbl-header-bg:    var(--cdph-clrs-primary-sky);
    --gj-tbl-border-color: var(--cdph-clrs-primary-sky);
}
/* Teal */
.gj-table-wrapper.gj-table-color-teal {
    --gj-tbl-header-bg:    var(--cdph-clrs-primary-teal);
    --gj-tbl-border-color: var(--cdph-clrs-primary-teal);
}
/* Purple */
.gj-table-wrapper.gj-table-color-purple {
    --gj-tbl-header-bg:    var(--cdph-clrs-primary-purple);
    --gj-tbl-border-color: var(--cdph-clrs-primary-purple);
}
/* Orange */
.gj-table-wrapper.gj-table-color-orange {
    --gj-tbl-header-bg:    var(--cdph-clrs-primary-orange);
    --gj-tbl-border-color: var(--cdph-clrs-primary-orange);
}
/* Navy */
.gj-table-wrapper.gj-table-color-navy {
    --gj-tbl-header-bg:    var(--cdph-clrs-secondary-navy);
    --gj-tbl-border-color: var(--cdph-clrs-secondary-navy);
}

/* Apply header bg to the th cells (Bootstrap 5 needs this explicitly) */
.gj-table-wrapper[class*="gj-table-color-"] .gj-table-head,
.gj-table-wrapper[class*="gj-table-color-"] .gj-table-head th {
    background-color: var(--gj-tbl-header-bg) !important;
    color: #fff !important;
    font-weight: 600;
}
.gj-table-wrapper[class*="gj-table-color-"] .gj-table-head th * {
    color: #fff !important;
}

/* Wire Bootstrap's border-color token to our theme color */
.gj-table-wrapper[class*="gj-table-color-"] .gj-table-inner {
    --bs-table-border-color: var(--gj-tbl-border-color);
    border-color: var(--gj-tbl-border-color) !important;
}

/* All td/th borders follow the theme color */
.gj-table-wrapper[class*="gj-table-color-"] .gj-table-inner th,
.gj-table-wrapper[class*="gj-table-color-"] .gj-table-inner td {
    border-color: var(--gj-tbl-border-color) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* Cell spacing presets */
.gj-table-wrapper.gj-table-cell-spacing-0 .gj-table-inner th,
.gj-table-wrapper.gj-table-cell-spacing-0 .gj-table-inner td {
    padding: 0.375rem 0.5rem;
}

.gj-table-wrapper.gj-table-cell-spacing-1 .gj-table-inner th,
.gj-table-wrapper.gj-table-cell-spacing-1 .gj-table-inner td {
    padding: 0.5rem 0.75rem;
}

.gj-table-wrapper.gj-table-cell-spacing-2 .gj-table-inner th,
.gj-table-wrapper.gj-table-cell-spacing-2 .gj-table-inner td {
    padding: 0.75rem 1rem;
}

.gj-table-wrapper.gj-table-cell-spacing-3 .gj-table-inner th,
.gj-table-wrapper.gj-table-cell-spacing-3 .gj-table-inner td {
    padding: 1rem 1.25rem;
}

/* ── Border style overrides ───────────────────────────────────────── */
/* Default = all borders (outer + horizontal + vertical) */
.gj-table-wrapper.gj-table-borders-default .gj-table-inner {
    border: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
}
.gj-table-wrapper.gj-table-borders-default .gj-table-inner th,
.gj-table-wrapper.gj-table-borders-default .gj-table-inner td {
    border: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
}

/* No borders */
.gj-table-wrapper.gj-table-borders-borderless .gj-table-inner,
.gj-table-wrapper.gj-table-borders-borderless .gj-table-inner th,
.gj-table-wrapper.gj-table-borders-borderless .gj-table-inner td {
    border: none !important;
}

/* Outline only (outer table border only) */
.gj-table-wrapper.gj-table-borders-outline .gj-table-inner {
    border: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
}
.gj-table-wrapper.gj-table-borders-outline .gj-table-inner th,
.gj-table-wrapper.gj-table-borders-outline .gj-table-inner td {
    border: none !important;
}

/* Horizontal only (row dividers + outer frame) */
.gj-table-wrapper.gj-table-borders-horizontal .gj-table-inner {
    border: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
}
.gj-table-wrapper.gj-table-borders-horizontal .gj-table-inner th,
.gj-table-wrapper.gj-table-borders-horizontal .gj-table-inner td {
    border-top: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
    border-bottom: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Vertical only (column dividers + outer frame) */
.gj-table-wrapper.gj-table-borders-vertical .gj-table-inner {
    border: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
}
.gj-table-wrapper.gj-table-borders-vertical .gj-table-inner th,
.gj-table-wrapper.gj-table-borders-vertical .gj-table-inner td {
    border-top: none !important;
    border-bottom: none !important;
    border-left: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
    border-right: 1px solid var(--gj-tbl-border-color, #dee2e6) !important;
}

/* Table-level min cell width presets */
.gj-table-wrapper.gj-table-min-cell-auto .gj-table-inner th,
.gj-table-wrapper.gj-table-min-cell-auto .gj-table-inner td { min-width: 0 !important; }

.gj-table-wrapper.gj-table-min-cell-96 .gj-table-inner th,
.gj-table-wrapper.gj-table-min-cell-96 .gj-table-inner td { min-width: 96px !important; }

.gj-table-wrapper.gj-table-min-cell-104 .gj-table-inner th,
.gj-table-wrapper.gj-table-min-cell-104 .gj-table-inner td { min-width: 104px !important; }

.gj-table-wrapper.gj-table-min-cell-112 .gj-table-inner th,
.gj-table-wrapper.gj-table-min-cell-112 .gj-table-inner td { min-width: 112px !important; }

.gj-table-wrapper.gj-table-min-cell-120 .gj-table-inner th,
.gj-table-wrapper.gj-table-min-cell-120 .gj-table-inner td { min-width: 120px !important; }

.gj-table-wrapper.gj-table-min-cell-152 .gj-table-inner th,
.gj-table-wrapper.gj-table-min-cell-152 .gj-table-inner td { min-width: 152px !important; }

/* Caption — always below the table.
 * Bootstrap 5 resets caption-side to top, so !important is required here. */
.gj-table-caption,
.gj-table-inner > caption.gj-table-caption,
.gj-table-wrapper.gj-table-has-caption .gj-table-inner > caption.gj-table-caption {
    display: table-caption !important;
    caption-side: bottom !important;
    text-align: left;
    color: var(--cdph-clrs-tertiary-black, #000000);
    font-style: italic;
    font-size: 0.8125rem;
    padding: 0.5rem 0 0 1rem;
    margin: 0;
}

/* Hide header row when trait disables it */
.gj-table-wrapper.gj-table-no-header .gj-table-head,
.gj-table-wrapper.gj-table-no-header thead {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   ns-lmenu — V2 Left Menu component
   ═══════════════════════════════════════════════════════════════════════ */

/* Placeholder — hidden immediately after block drop */
.gj-ns-lmenu-ph {
    display: none !important;
}

/* Root card — border and radius */
.gj-lmenu.card {
    border:        1px solid rgba(0, 0, 0, 0.175) !important;
    border-radius: 0.375rem !important;
}

/* Root nav element */
.gj-lmenu li,
.gj-lmenu a,
.gj-lmenu button {
    font-size: var(--cdph-font-size-body) !important;
}

/* Nav list strip Bootstrap defaults */
.gj-lmenu-nav {
    border:     0 !important;
    margin-top: 0 !important;
    padding:    0 !important;
}

/* Every link in the menu */
.gj-lmenu-link {
    color:           var(--cdph-clrs-tertiary-black, #000000);
    font-weight:     400;
    font-size:       18px;
    line-height:     1.5;
    transition:      color 0.2s ease, background-color 0.15s ease;
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    min-width:       0;
    white-space:     normal;
    overflow-wrap:   anywhere;
    word-break:      break-word;
    text-decoration: none !important;
}

.gj-lmenu-link:hover,
.gj-lmenu-link:focus {
    text-decoration: none !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.gj-lmenu-link:active {
    color: var(--cdph-clrs-tertiary-black, #000000) !important;
}

.gj-lmenu-link:visited {
    /* Keep the same colour as unvisited — prevents browser default purple
       from appearing on all links sharing the same href (e.g. "#") after
       any one of them is clicked. Active state (sky blue + left bar) is
       the correct visual indicator, not :visited colour. */
    color: var(--cdph-clrs-tertiary-black, #000000) !important;
}

/* Active/focus state — sky blue left bar indicator */
.gj-lmenu-link.active,
.gj-lmenu-link:focus-visible {
    color:            var(--cdph-clrs-primary-sky, #0077CF) !important;
    background-color: transparent !important;
    position:         relative;
    border-color:     transparent;
    font-weight:      400;
}

.gj-lmenu-link.active::before,
.gj-lmenu-link:focus-visible::before {
    content:          "";
    position:         absolute;
    left:             0;
    top:              50%;
    transform:        translateY(-50%);
    width:            3px;
    height:           1.5rem;
    background-color: var(--cdph-clrs-primary-sky, #0077CF);
    border-radius:    0;
}

/* Item and sub-item wrappers */
.gj-lmenu-item,
.gj-lmenu-subitem {
    margin:  0 0 0.25rem 0;
    padding: 0 !important;
}

/* Sub-item links */
.gj-lmenu-subitem .gj-lmenu-link {
    font-size:   18px;
    font-weight: 400;
    padding:     0.25rem 1rem;
}

/* Chevron caret */
.gj-lmenu-caret {
    cursor:     pointer;
    transition: transform 0.2s ease;
    font-size:  1.1em;
    color:      var(--cdph-clrs-tertiary-graphite, #6a7073);
}

/* Rotate caret when submenu is open */
.gj-lmenu-item.open .gj-lmenu-caret,
.gj-lmenu-caret[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* Caret keyboard focus ring */
.gj-lmenu-caret:focus-visible {
    outline:        2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: 2px;
    border-radius:  3px;
}

/* ── Accordion trigger button — parent items that have sub-items ────────────
   Rendered as <button> (not <a>), so the full row is clickable.
   Visually identical to .gj-lmenu-link so the menu looks consistent.
   ─────────────────────────────────────────────────────────────────────────── */
.gj-lmenu-trigger {
    /* Reset button defaults */
    background:      none;
    border:          none;
    width:           100%;
    text-align:      left;
    cursor:          pointer;
    /* Same look as .gj-lmenu-link */
    color:           var(--cdph-clrs-tertiary-black, #000000);
    font-weight:     400;
    font-size:       18px;
    line-height:     1.5;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       nowrap;
    min-width:       0;
    white-space:     normal;
    overflow-wrap:   anywhere;
    word-break:      break-word;
    text-decoration: none;
    transition:      color 0.2s ease, background-color 0.15s ease;
    font-family:     inherit;
    position:        relative;
}

.gj-lmenu-trigger:hover,
.gj-lmenu-trigger:focus {
    background-color: rgba(0, 0, 0, 0.04) !important;
    text-decoration:  none;
}

/* Open state — sky-blue text + left bar, caret rotated (shared with .open) */
.gj-lmenu-item.open > .gj-lmenu-trigger,
.gj-lmenu-trigger[aria-expanded="true"] {
    color: var(--cdph-clrs-primary-sky, #0077CF) !important;
}

.gj-lmenu-item.open > .gj-lmenu-trigger::before,
.gj-lmenu-trigger[aria-expanded="true"]::before {
    content:          "";
    position:         absolute;
    left:             0;
    top:              50%;
    transform:        translateY(-50%);
    width:            3px;
    height:           1.5rem;
    background-color: var(--cdph-clrs-primary-sky, #0077CF);
    border-radius:    0;
}

.gj-lmenu-trigger:focus-visible {
    outline:        2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: 2px;
    border-radius:  3px;
}

/* Items with children — mark as interactive */
.gj-lmenu-item--has-children { position: relative; }


.gj-lmenu-submenu {
    display:  none !important;
    height:   auto !important;
    overflow: visible !important;
}

.gj-lmenu-submenu.show {
    display: block !important;
}

/* Cursor helper */
.cursor-pointer { cursor: pointer !important; }

/* ── Hamburger toggle button ─────────────────────────────────────────
   Hidden on desktop (md+), shown on mobile (<768px).
   JS handler in gjs-global-scripts.js toggles d-none / d-block on
   .gj-lmenu-nav when this button is clicked.
   ─────────────────────────────────────────────────────────────────── */
.gj-lmenu-toggle {
    display:         none;           /* hidden by default (desktop) */
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    padding:         0;
    margin-bottom:   0.5rem;
    border:          1px solid rgba(0, 0, 0, 0.12);
    border-radius:   6px;
    background:      #ffffff;
    cursor:          pointer;
    color:           var(--cdph-clrs-tertiary-carbon, #151e28);
    font-size:       1.25rem;
    line-height:     1;
    transition:      background-color 0.15s ease, border-color 0.15s ease;
}

.gj-lmenu-toggle:hover,
.gj-lmenu-toggle:focus {
    background-color: rgba(0, 0, 0, 0.06);
    outline: none;
}

.gj-lmenu-toggle:focus-visible {
    outline:        2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: 2px;
}

/* Mobile: reveal toggle, collapse nav */
@media (max-width: 767px) {
    .gj-lmenu-toggle               { display: flex !important; }
    .gj-lmenu-nav                  { display: none; }
    .gj-lmenu-nav.d-block          { display: block !important; }
}

/* Desktop: always show nav, hide toggle */
@media (min-width: 768px) {
    .gj-lmenu-toggle               { display: none !important; }
    .gj-lmenu-nav                  { display: block !important; }
}

/* ── High-Contrast / Forced-Colors mode ────────────────────────────────────
   The left-bar pseudo-element uses background-color which is suppressed in
   forced-colors mode.  Force it to the system Highlight colour so it remains
   visible for users who need high-contrast display settings.
   Also support aria-current="page" as a styling hook so the active state
   is communicated to screen readers through the attribute, not just CSS.
   ─────────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
    .gj-lmenu-link.active::before,
    .gj-lmenu-link:focus-visible::before,
    .gj-lmenu-link[aria-current="page"]::before,
    .gj-lmenu-item.open > .gj-lmenu-trigger::before {
        background-color: Highlight;
        forced-color-adjust: none;
    }

    .gj-lmenu-link.active,
    .gj-lmenu-link[aria-current="page"] {
        color: Highlight;
        forced-color-adjust: none;
    }

    .gj-lmenu-toggle:focus-visible {
        outline: 2px solid ButtonText;
        forced-color-adjust: none;
    }
}

/* ── aria-current="page" — semantic hook for the active link ────────────────
   Screen readers announce aria-current="page" as "current page" or similar.
   This mirrors the .active class visual so the attribute and CSS stay in sync.
   ─────────────────────────────────────────────────────────────────────────── */
.gj-lmenu-link[aria-current="page"] {
    color:            var(--cdph-clrs-primary-sky, #0077CF) !important;
    background-color: transparent !important;
    position:         relative;
    font-weight:      400;
}

.gj-lmenu-link[aria-current="page"]::before {
    content:          "";
    position:         absolute;
    left:             0;
    top:              50%;
    transform:        translateY(-50%);
    width:            3px;
    height:           1.5rem;
    background-color: var(--cdph-clrs-primary-sky, #0077CF);
    border-radius:    0;
}


/* ── Page Title Banner ─────────────────────────────────────────────────────────
   Full-width heading strip. Background color is set by a cdph-bg-* utility
   class (e.g. cdph-bg-primary-blue). Text color is always white
   (cdph-text-tertiary-white). border-radius: 0 — never rounded, edge-to-edge.
   Padding follows the 8pt grid: 16px (1rem) top/bottom, 24px (1.5rem) left/right.
   Bootstrap spacing utilities (pt-3 pb-3 ps-4 pe-4) are applied as defaults by
   the spacing trait and will take precedence (they use !important).
   ─────────────────────────────────────────────────────────────────────────── */
.gj-page-title {
    border-radius:  0 !important;
    display:        block !important;
    width:          100%;
    padding:        1rem 1.5rem;  /* 8pt grid: 2×8pt top/bottom, 3×8pt sides — fallback only */
    margin-bottom:  0;
    min-height:     3rem;         /* prevent collapse to blue line during RTE activation */
    box-sizing:     border-box;
    writing-mode:   horizontal-tb !important;
    direction:      ltr !important;
    text-align:     left;
}


/* ═══════════════════════════════════════════════════════════════
   ns-accordion — V2 Accordion component
   ═══════════════════════════════════════════════════════════════
   ADA (WAI-ARIA 1.2 accordion pattern) — each item carries:
     <h2 id="gj-acc-h-{uid}">
       <button aria-expanded aria-controls="gj-acc-c-{uid}">
     <div id="gj-acc-c-{uid}" role="region" aria-labelledby="gj-acc-h-{uid}">
   Keyboard: Enter/Space toggle, Arrow Up/Down/Home/End between headers
   → handled by gjs-global-scripts.js.
   HTML output carries only structural Bootstrap classes + gj-accrd.
   All visual overrides (bg, padding, borders) live here via BS tokens.
   ═══════════════════════════════════════════════════════════════ */

.gj-accrd {
    width:       100%;                 /* replaces w-100 utility on root */

    /* ── Bootstrap CSS-variable overrides ──────────────────────────────── */
    --bs-accordion-bg:                   transparent;
    --bs-accordion-color:                var(--cdph-clrs-tertiary-black, #000);
    --bs-accordion-border-color:         var(--cdph-clrs-tertiary-black, #000);
    --bs-accordion-border-width:         0 0 1px 0;
    --bs-accordion-border-radius:        0;
    --bs-accordion-inner-border-radius:  0;
    --bs-accordion-btn-color:            var(--cdph-clrs-tertiary-black, #000);
    /* White bg — replaces bg-white utility; token now wins cleanly */
    --bs-accordion-btn-bg:               #fff;
    --bs-accordion-active-color:         var(--cdph-clrs-tertiary-black, #000);
    --bs-accordion-active-bg:            #fff;
    /* CDPH focus ring — replaces shadow-none utility that suppressed the default */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 37, 149, 0.25);
    /* Vertical padding — replaces py-3 (0.75rem) that was overriding this token */
    --bs-accordion-btn-padding-y:        1rem;
}

/* Section title above accordion */
.gj-accrd-title { padding-left: 12px; }

/* ── Item border lines ─────────────────────────────────────────────────────
   Replaces border-0 + border-bottom utilities.  No !important needed now
   that the HTML carries no conflicting utility classes.
   ─────────────────────────────────────────────────────────────────────── */
.gj-accrd .accordion-item {
    border-bottom: 1px solid var(--bs-accordion-border-color);
}
.gj-accrd .accordion-item:first-of-type {
    border-top: 1px solid var(--bs-accordion-border-color);
}

/* ── Toggle button ─────────────────────────────────────────────────────────
   Bootstrap .accordion-button already provides: width:100%, text-align:left,
   border:0, background via --bs-accordion-btn-bg.  We only add brand styles.
   ─────────────────────────────────────────────────────────────────────── */
.gj-accrd .accordion-button {
    position:     relative;
    padding-left: 60px;
    font-weight:  700;
    line-height:  1.4;
    font-size:    var(--cdph-font-size-body);
}

.gj-accrd .accordion-button:focus {
    border-color: transparent;
    outline:        2px solid var(--cdph-clrs-primary-blue, #002595);
    outline-offset: -2px;
}

/* Kill Bootstrap’s default SVG chevron */
.gj-accrd .accordion-button::after { display: none; }

/* ── + / − circle icon (pure CSS, no Unicode, no images) ──────────────────
 *  Collapsed state  → circle with + (two gradients = cross)
 *  Expanded state   → circle with − (single gradient = horizontal bar)
 * ──────────────────────────────────────────────────────────────────── */
.gj-accrd .accordion-button::before {
    content:  "";
    position: absolute;
    left:     12px;
    top:      50%;
    transform: translateY(-50%);
    width:    24px;
    height:   24px;
    border:        2px solid currentColor;
    border-radius: 50%;
    color:         var(--cdph-clrs-tertiary-black, #000);
    /* + icon: horizontal bar + vertical bar */
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-size:     10px 2px, 2px 10px;
    background-position: center;
    background-repeat:   no-repeat;
    transition: background-image 0.15s ease, transform 0.15s ease;
}

/* Expanded state: replace cross with single horizontal bar ( − ) */
.gj-accrd .accordion-button:not(.collapsed)::before {
    background-image: linear-gradient(currentColor, currentColor);
    background-size:  10px 2px;
}

/* ── Accordion body (content area) ─────────────────────────────────────────
   Base padding — Bootstrap paddingBoxSpacing utilities override via !important.
   Default equivalent: py-3 (0.75rem) + px-4 (1.5rem).
   ─────────────────────────────────────────────────────────────────────── */
.gj-accrd .accordion-body {
    padding:     0.75rem 1.5rem; /* Base — Bootstrap pt-3 pe-4 pb-3 ps-4 overrides */
    font-size:   var(--cdph-font-size-body);
    line-height: var(--cdph-line-height-body);
    color:       var(--cdph-color-body);
}

/* ── Collapse show/hide (no Bootstrap JS — handled by gjs-global-scripts.js) */
.gj-accrd .accordion-collapse.collapse:not(.show) { display: none; }
.gj-accrd .accordion-collapse.collapse.show       { display: block; }

/* ── Responsive adjustments ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .gj-accrd { --bs-accordion-btn-padding-y: 0.875rem; }
    .gj-accrd .accordion-button { padding-left: 50px; font-size: 1.125rem; }
    .gj-accrd .accordion-button::before { width: 22px; height: 22px; left: 10px; }
}
@media (max-width: 767px) {
    .gj-accrd { --bs-accordion-btn-padding-y: 0.75rem; }
    .gj-accrd .accordion-button { padding-left: 45px; font-size: 1rem; }
    .gj-accrd .accordion-button::before { width: 20px; height: 20px; left: 8px; }
    .gj-accrd-title { font-size: 1.25rem; }
}