/*
 * ============================================================================
 * Scouts NSW Member Portal — Global styles + design-token layer
 * ============================================================================
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * LWCs embedded in screen flows must never invent their own colours, spacing,
 * fonts, or radii. They consume ONLY tokens defined below. This file is
 * injected site-wide by LWR, and CSS custom properties inherit THROUGH
 * shadow-DOM boundaries, so every token declared on :root here is visible
 * inside every LWC's shadow root without any import.
 *
 * THREE LAYERS
 * ------------
 * 1. DESIGN SYSTEM tokens (--navy-600, --space-4, --radius-lg, --shadow-sm ...)
 *    Copied verbatim from the Scouts NSW design system:
 *      GL_ Scouts NSW Prototype/uploads/Scouts NSW Design System/tokens/
 *        colors.css, typography.css, spacing.css, effects.css
 *    Re-copy those files to resync; do not hand-edit values here.
 *    Fonts come from the ScoutsNSWFonts static resource (head markup), not
 *    tokens/fonts.css.
 *
 * 2. APP tokens (--app-*) — the semantic layer LWCs actually use.
 *    ALIASED app tokens -> `var(--dxp-<hook>, <fallback>)` track an Experience
 *    Builder branding control. The fallback mirrors the value persisted in
 *      sfdc_cms__brandingSet/Build_Your_Own_LWR/content.json
 *    so keep the two files in lockstep: when a branding value changes, update
 *    the matching fallback here in the SAME commit.
 *    DEV-OWNED app tokens point at design system tokens directly.
 *
 * 3. PLATFORM hook overrides (--slds-g-*) for base components that read SLDS
 *    global hooks rather than --dxp-*.
 *
 * WHY BUTTON RECIPES DO NOT LIVE IN THIS FILE
 * -------------------------------------------
 * This stylesheet is injected UNSCOPED, so a global `.app-btn` rule here would
 * score (0,1,0) and LOSE to the platform link rule in dxp-slds-extensions.min.css:
 *     a:link:not(.slds-button, .slds-dropdown__item > a) { color; background-color; }
 * which scores (0,2,2) because :not() inherits its heaviest argument's weight.
 * Component CSS can win, because LWC synthetic-shadow scoping appends an
 * attribute selector to every compound selector -- so a TWO-class button
 * selector inside an LWC scores (0,3,0). Button RECIPES therefore stay in the
 * component (or the shared c/portalFormStyles module); only the token VALUES
 * live here.
 *
 * All --dxp hook names below are confirmed against the Salesforce LWR docs:
 *   Color hooks: https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks_color.htm
 *   Theme-panel map: https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks_map.htm
 *   Text hooks: https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks_text.htm
 * ============================================================================
 */

/* ── 1. Design system tokens (verbatim) ─────────────────────────────────── */

/* tokens/colors.css */
:root {
    /* Brand ink */
    --black: #000000;
    --white: #ffffff;
    --paper: #fffefc;

    /* Adventure blues (illustration) */
    --navy-700: #164a6a;
    --navy-600: #1e638c;
    --blue-500: #008ebc;
    --teal-500: #01a9b6;
    --sky-300: #a0d4ec;
    --sky-100: #e3f2f9;

    /* Accessible text greens (derived — logo greens fail AA as small text on white) */
    --green-ink: #1f7a3c;

    /* Neutrals (illustration greys + derived) */
    --grey-900: #1a1c1e;
    --grey-700: #45484b;
    --grey-600: #5f6266;
    --grey-400: #9a9899;
    --grey-300: #dbd9da;
    --grey-200: #e8e7e5;
    --grey-100: #f4f3f1;

    /* Logo petals — paired light (outer) / solid (inner) */
    --petal-red-light: #ec6952;
    --petal-red: #ed1c24;
    --petal-red-deep: #d9282d;
    --petal-yellow-light: #fec52d;
    --petal-yellow: #fba919;
    --petal-green-light: #7dbd42;
    --petal-green: #289e49;
    --petal-green-deep: #008e53;
    --petal-maroon-light: #a42036;
    --petal-maroon: #7a232f;
    --petal-orange-light: #de8d28;
    --petal-orange: #bd6428;

    /* Age sections (Scouts Australia section colours, as encoded in the logo petals) */
    --section-joeys: var(--petal-orange);
    --section-joeys-tint: #f6e6d6;
    --section-cubs: var(--petal-yellow-light);
    --section-cubs-tint: #fff3d1;
    --section-scouts: var(--petal-green);
    --section-scouts-tint: #e2f1dc;
    --section-venturers: var(--petal-maroon);
    --section-venturers-tint: #f3dde0;
    --section-rovers: var(--petal-red);
    --section-rovers-tint: #fde0dc;

    /* Semantic aliases */
    --brand-primary: var(--navy-600);
    --brand-primary-hover: var(--navy-700);
    --brand-accent: var(--petal-yellow-light);
    --brand-accent-hover: var(--petal-yellow);
    --brand-donate: var(--petal-red-deep);
    --brand-donate-hover: #b81f24;

    --text-strong: var(--black);
    --text-body: var(--grey-900);
    --text-muted: var(--grey-600);
    --text-inverse: var(--white);
    --text-link: var(--navy-600);
    --text-link-hover: var(--blue-500);

    --surface-page: var(--white);
    --surface-warm: var(--paper);
    --surface-subtle: var(--grey-100);
    --surface-card: var(--white);
    --surface-sky: var(--sky-100);
    --surface-inverse: var(--navy-600);
    --surface-ink: var(--black);

    --border-subtle: var(--grey-200);
    --border-default: var(--grey-300);
    --border-strong: var(--grey-600);
    --focus-ring: var(--blue-500);

    --status-success: var(--green-ink);
    --status-success-tint: var(--section-scouts-tint);
    --status-warning: var(--petal-orange);
    --status-warning-tint: var(--section-cubs-tint);
    --status-error: var(--petal-red-deep);
    --status-error-tint: var(--section-rovers-tint);
    --status-info: var(--navy-600);
    --status-info-tint: var(--sky-100);
}

/* tokens/typography.css */
:root {
    --font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: var(--font-sans);

    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* Fluid display scale (mobile → desktop) */
    --text-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); /* 44 → 80 */
    --text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* 36 → 56 */
    --text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* 28 → 40 */
    --text-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); /* 22 → 28 */
    --text-h4: 1.25rem; /* 20 */
    --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 → 22 */
    --text-body-lg: 1.125rem; /* 18 */
    --text-body-size: 1rem; /* 16 */
    --text-small: 0.875rem; /* 14 */
    --text-caption: 0.8125rem; /* 13 */
    --text-eyebrow: 0.8125rem; /* 13, uppercase */

    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-display: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-eyebrow: 0.12em;
}

/* tokens/spacing.css */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    --section-pad-y: clamp(56px, 6vw + 24px, 112px);
    --gutter: clamp(20px, 4vw, 40px);
    --container-max: 1240px;
    --container-narrow: 760px;
    --header-height: 76px;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --tap-min: 44px;
}

/* tokens/effects.css */
:root {
    --shadow-sm: 0 1px 2px rgba(22, 74, 106, 0.08), 0 1px 3px rgba(22, 74, 106, 0.06);
    --shadow-md: 0 4px 12px rgba(22, 74, 106, 0.1), 0 2px 4px rgba(22, 74, 106, 0.06);
    --shadow-lg: 0 16px 40px rgba(22, 74, 106, 0.16), 0 4px 10px rgba(22, 74, 106, 0.08);
    --shadow-focus: 0 0 0 3px var(--white), 0 0 0 6px var(--focus-ring);

    --overlay-scrim: rgba(0, 0, 0, 0.55);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}

/* ── 2. App tokens (what LWCs consume) ──────────────────────────────────── */

:root {
    /* --------------------------------------------------------------------
     * COLOUR — aliased to branding (Builder-controllable)
     * ------------------------------------------------------------------ */

    /* Branding: PrimaryAccentColor / _PrimaryAccentColor1 | hooks: --dxp-g-brand, -1
     * Navy-600 / navy-700. Links, accents, active states. */
    --app-color-brand: var(--dxp-g-brand, #1e638c);
    --app-color-brand-hover: var(--dxp-g-brand-1, #164a6a);
    /* Text/icon on a brand fill. */
    --app-color-on-brand: var(--dxp-g-brand-contrast, #ffffff);

    /* Heading text. Design system: headings are --text-strong (black).
     * No longer aliases --dxp-g-brand-contrast, which is now white (text on
     * brand fills) and so cannot double as a heading colour. */
    --app-color-heading: var(--text-strong);

    /* Primary button: navy fill, white label.
     * Branding: ButtonColor / _ButtonColor1 / ButtonTextColor / _ButtonTextColor1.
     * Contrast: white on #1e638c = 6.4:1, white on #164a6a = 9.4:1 (AA). */
    --app-color-button: var(--dxp-s-button-color, #1e638c);
    --app-color-button-hover: var(--dxp-s-button-color-hover, #164a6a);
    --app-color-on-button: var(--dxp-s-button-color-contrast, #ffffff);
    --app-color-on-button-hover: var(--dxp-s-button-color-hover-contrast, #ffffff);

    /* Main call to action: yellow with black text (design system "accent").
     * Dev-owned: there is no branding control for a second button colour.
     * Contrast: black on #fec52d = 13.5:1. */
    --app-color-accent: var(--brand-accent);
    --app-color-accent-hover: var(--brand-accent-hover);
    --app-color-on-accent: var(--black);

    /* Branding: BackgroundColor / _BackgroundColor1 | hooks: --dxp-g-root, -1 */
    --app-color-surface: var(--dxp-g-root, #ffffff);
    /* Subtle raised step (grey-100): hover washes, info tiles, table headers. */
    --app-color-surface-alt: var(--dxp-g-root-1, #f4f3f1);
    /* Selected / active wash (sky-100), e.g. a selected option card. */
    --app-color-surface-selected: var(--surface-sky);
    /* Table header band. Design system table pattern uses grey-100. */
    --app-color-table-header: var(--surface-subtle);

    /* Branding: TextColor | hook: --dxp-g-root-contrast. Grey-900 body text. */
    --app-color-text: var(--dxp-g-root-contrast, #1a1c1e);

    /* Branding: _NeutralColor | hook: --dxp-g-neutral. Grey-200: muted fill
     * and hairline borders (card borders are grey-200 in the design system). */
    --app-color-neutral: var(--dxp-g-neutral, #e8e7e5);
    --app-color-border: var(--dxp-g-neutral, #e8e7e5);
    /* Form control border (inputs, selects, textareas, radios, checkboxes).
     * Not the design system's grey-300: that is 1.4:1 against white, and a
     * field's boundary needs 3:1 (WCAG 2.2 1.4.11). #858384 sits between
     * grey-400 and grey-600: 3.8:1 on white, 3.4:1 on grey-100. Mirrors
     * FormElementBorderColor / FormElementCheckboxBorderColor in the branding set. */
    --app-color-border-input: #858384;
    /* Muted/secondary TEXT. Branding: _NeutralColor3 | hook: --dxp-g-neutral-3.
     * Grey-600: 6.0:1 on white (AA). */
    --app-color-text-muted: var(--dxp-g-neutral-3, #5f6266);
    /* Branding: _NeutralForegroundColor | hook: --dxp-g-neutral-contrast */
    --app-color-on-neutral: var(--dxp-g-neutral-contrast, #000000);

    /* Status colours. Branding: _Destructive/_Success/_Warning/_InfoColor. */
    --app-color-error: var(--dxp-g-destructive, #d9282d);
    --app-color-on-error: var(--dxp-g-destructive-contrast, #ffffff);
    --app-color-success: var(--dxp-g-success, #1f7a3c);
    --app-color-warning: var(--dxp-g-warning, #bd6428);
    --app-color-info: var(--dxp-g-info, #1e638c);
    /* Status tints for badges, alerts and notices (dev-owned). */
    --app-color-error-tint: var(--status-error-tint);
    /* Error text on its tint: the design system's red is 3.9:1 on the red tint,
     * short of 4.5:1 for small text (1.4.3). Donate-hover red gives 5.2:1. */
    --app-color-error-ink: var(--brand-donate-hover);
    --app-color-success-tint: var(--status-success-tint);
    --app-color-warning-tint: var(--status-warning-tint);
    --app-color-info-tint: var(--status-info-tint);
    /* Warning text on its tint: design system Badge uses #8a4a1c (7.1:1). */
    --app-color-warning-ink: #8a4a1c;

    /* Focus ring: 3px blue-500 outline, 3px offset (design system base.css). */
    --app-focus-ring-color: var(--focus-ring);
    --app-focus-ring-width: 3px;
    --app-focus-ring-offset: 3px;

    /* --------------------------------------------------------------------
     * TYPOGRAPHY
     * ------------------------------------------------------------------ */

    /* Branding: BaseFont (= Nunito Sans) | hook: --dxp-s-html-font-family.
     * BaseFont accepts a single family name only, so the fallback stack is
     * appended here. */
    --app-font-family: var(--dxp-s-html-font-family, 'Nunito Sans'), system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Branding: BaseFontSize | hook: --dxp-s-html-font-size. */
    --app-font-size-base: var(--dxp-s-html-font-size, 1rem);

    /* --------------------------------------------------------------------
     * DEV-OWNED — mapped onto the design system scale
     * ------------------------------------------------------------------ */

    /* Spacing — 4px base unit, same steps as before. */
    --app-space-3xs: 0.125rem; /* 2px  */
    --app-space-2xs: var(--space-1); /* 4px  */
    --app-space-xs: var(--space-2); /* 8px  */
    --app-space-sm: var(--space-3); /* 12px */
    --app-space-md: var(--space-4); /* 16px */
    --app-space-lg: var(--space-5); /* 24px */
    --app-space-xl: var(--space-6); /* 32px */
    --app-space-2xl: var(--space-7); /* 48px */

    /* Radii. sm = inputs and input-adjacent controls (12px, matches the
     * FormElementBorderRadius branding value); md = cards (20px); lg = panels
     * (32px); xs = checkboxes and small chips. */
    --app-radius-xs: var(--radius-xs);
    --app-radius-sm: var(--radius-md);
    --app-radius-md: var(--radius-lg);
    --app-radius-lg: var(--radius-xl);
    --app-radius-pill: var(--radius-pill);

    /* Type scale. */
    --app-font-size-xs: var(--text-caption); /* 13px */
    --app-font-size-sm: var(--text-small); /* 14px */
    --app-font-size-md: var(--text-body-size); /* 16px */
    --app-font-size-lg: var(--text-h4); /* 20px */
    --app-font-size-xl: var(--text-h3); /* 22 → 28px */
    --app-font-size-2xl: var(--text-h2); /* 28 → 40px */

    /* Font weights. Brand rule: buttons, labels and subheads 800, headlines 900.
     * --app-font-weight-bold is the "emphasis" weight used for labels, titles
     * and table heads across the LWCs, so it carries 800. */
    --app-font-weight-light: var(--weight-regular);
    --app-font-weight-regular: var(--weight-regular);
    --app-font-weight-semibold: var(--weight-semibold);
    --app-font-weight-bold: var(--weight-extrabold);
    --app-font-weight-black: var(--weight-black);

    /* Line heights. */
    --app-line-height-tight: var(--leading-snug);
    --app-line-height-base: var(--leading-normal);

    /* Elevation — navy-tinted (design system effects.css). */
    --app-shadow-sm: var(--shadow-sm);
    --app-shadow-md: var(--shadow-md);
    --app-shadow-lg: var(--shadow-lg);

    /* Minimum tap target. */
    --app-tap-min: var(--tap-min);
}

/* ── 3. Platform hook overrides ─────────────────────────────────────────── */

/* Base components (lightning-button, flow runtime chrome) read the SLDS global
 * font hook, which LWR defaults to the system stack. */
:root {
    --slds-g-font-family: var(--app-font-family);
    --slds-g-font-family-base: var(--app-font-family);
}

/*
 * Your global styles here
 */
html,
body {
    height: 100%;
}

html {
    background: var(--app-color-surface);
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--brand-accent);
    color: var(--black);
}

/* ── Header chrome ───────────────────────────────────────────────────────
 * The "Scoped Header and Footer" theme-layout regions are not editable in
 * Experience Builder (no Style/Background controls), so header styling is
 * owned here. Target the STABLE BEM class only — never the volatile
 * .lwc-<hash> scoping class the platform pairs with it, which changes on
 * every publish. The platform's own rule carries both classes (specificity
 * 0,2,0); matching just the stable class therefore needs !important to win
 * the cascade tier without depending on the hash. */

/* Header background: white, plus a grey-200 divider at the bottom of the
 * header-content band. */
.community_byo-scoped-header-and-footer__header-content {
    background-color: var(--app-color-surface) !important;
    border-bottom: 1px solid var(--app-color-border) !important;
}

/* ── Flow navigation bar (Next / Previous / Finish) ──────────────────────
 * Platform chrome we cannot reach from a component, so it is owned here --
 * the same carve-out as the header rules above.
 *
 * THE BUG WE ARE PATCHING. The flow runtime ships:
 *     .navigationBar[lwc-<hash>] {
 *         margin: var(--lwc-spacingNone);
 *         padding-top: var(--lwc-spacingSmall);
 *         border-top: var(--slds-g-sizing-border-1, 1px) solid
 *                     var(--slds-g-color-border-1, var(--lwc-colorBorder));
 *     }
 * The --lwc-* family is Aura-era Lightning Experience tokens; LWR defines NONE
 * of them. `padding-top` has no fallback, so it is invalid at computed-value
 * time and collapses to 0. The border-top survives because its tokens are
 * --slds-g-*, which LWR DOES define. Net effect on every LWR flow screen: a
 * 1px line flush against the buttons.
 *
 * WHY !important AND WHY ONLY THE BARE CLASS. The platform rule pairs the
 * stable `.navigationBar` class with a volatile `[lwc-<hash>]` scoping
 * attribute that changes on every platform build -- never target the hash.
 * Matching the stable class alone is (0,1,0) against the platform's (0,2,0),
 * so !important is required to win the cascade tier without depending on the
 * hash. That ban on !important applies to COMPONENT css, where LWC scoping
 * supplies specificity headroom. This file is injected unscoped and has none,
 * so the header/flow-chrome carve-outs are the documented exception. */
.navigationBar {
    padding-top: var(--app-space-sm) !important;
    border-top-color: var(--app-color-border) !important;
}

/* Divider under the top section (logo / search row), above the nav. The header
 * has several community_layout-section elements — all sharing the stable
 * .comm-section-container class — so we pin THIS one via its data-component-id
 * "section-8ce5", derived from the section's stable layout UUID
 * (cbb20f33-…-947ca09e8ce5 in the scopedHeaderAndFooter theme layout), NOT the
 * volatile .lwc-<hash> class beside it. */
community_layout-section[data-component-id='section-8ce5'] {
    border-bottom: 1px solid var(--app-color-border) !important;
}

/* ── Header: logo, search, navigation ────────────────────────────────────
 * Platform chrome again, so the same carve-out applies: stable selectors only,
 * !important where the platform pairs them with a hashed class. Colours and
 * weights come from the component attributes in the theme layout; only what
 * the attributes cannot express lives here. */

/* Logo: the CMS image is drawn object-fit:contain inside a fixed 75px box
 * (25px on phones), so size the image itself. The image carries generous
 * transparent padding, so 64px tall draws the mark at roughly the prototype's
 * 134px-wide horizontal lockup. */
dxp_content_layout-site-logo img {
    --app-logo-height: 52px;
    height: var(--app-logo-height) !important;
    max-height: none !important;
    width: auto !important;
    /* The image has a transparent border 15% of its height on the left; pull
     * it back so the visible mark lines up with the page gutter. */
    margin-left: calc(var(--app-logo-height) * -0.15) !important;
}

/* Search: 44px navy pill (prototype header search is a 2px navy pill). The
 * radius and colours come from the component attributes. The border sits on
 * .input-wrapper, which has a fixed 32px height, so the wrapper chain is sized
 * and the input fills it. */
dxp_search-search-input .suggestions-combobox-container,
dxp_search-search-input .input-container,
dxp_search-search-input .input-wrapper,
dxp_search-search-input .input-search-button {
    height: var(--app-tap-min) !important;
}
dxp_search-search-input .input-wrapper,
dxp_search-search-input .input-search-button {
    border-width: 2px !important;
}
dxp_search-search-input .search-input-with-button {
    height: 100% !important;
    padding-left: 18px !important;
}
dxp_search-search-input .input-search-button {
    padding-inline: 18px 20px !important;
}

/* Navigation items: pills, matching the prototype's hover/active pill nav. */
.comm-customizable-navigation-bar a {
    border-radius: var(--app-radius-pill) !important;
    padding-inline: 14px !important;
    color: var(--text-strong) !important;
}

/* Mobile menu trigger: 24px by default; bring it up to the 44px tap target. */
.comm-customizable-navigation-trigger {
    min-width: var(--app-tap-min) !important;
    min-height: var(--app-tap-min) !important;
}

/* Focus ring on header controls (design system: 3px blue-500, 3px offset). */
.comm-customizable-navigation-bar a:focus-visible,
.comm-customizable-navigation-trigger:focus-visible,
.input-search-button:focus-visible,
dxp_content_layout-site-logo a:focus-visible {
    outline: var(--app-focus-ring-width) solid var(--app-focus-ring-color) !important;
    outline-offset: var(--app-focus-ring-offset) !important;
}

@media (min-width: 768px) {
    dxp_content_layout-site-logo img {
        --app-logo-height: 64px;
    }
}

/* Phone header: the platform stacks logo / search / profile menu below 768px,
 * which leaves the avatar alone on a third row. Reflow to logo + avatar on one
 * row, search full width below (prototype phone header keeps the logo and
 * actions on one row).
 *
 * DECISION: the one max-width query in the portal. These rules correct the
 * platform's own phone-only stacking, so they must stop where it stops. Written
 * mobile-first they would need a min-width block restating the platform's
 * desktop column layout (widths, spacers, flex values) with !important, which
 * we don't own and which would silently drift on a platform release. */
@media (max-width: 767px) {
    community_layout-section[data-component-id='section-8ce5'] .columns-content {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    community_layout-section[data-component-id='section-8ce5'] .columns-content > community_layout-column {
        width: auto !important;
    }
    /* Columns are separated by zero-width spacer elements, so pick each column
     * by what it contains rather than by position. */
    community_layout-section[data-component-id='section-8ce5'] .columns-content > community_layout-column-spacer {
        display: none !important;
    }
    community_layout-section[data-component-id='section-8ce5'] .columns-content > community_layout-column:has(dxp_content_layout-site-logo) {
        flex: 1 1 auto !important;
        order: 1;
    }
    community_layout-section[data-component-id='section-8ce5'] .columns-content > community_layout-column:has(dxp_flow-flow) {
        flex: 0 0 auto !important;
        order: 2;
    }
    community_layout-section[data-component-id='section-8ce5'] .columns-content > community_layout-column:has(dxp_search-search-input) {
        flex: 1 1 100% !important;
        order: 3;
    }
}

/* ── Footer ──────────────────────────────────────────────────────────────
 * Navy-700 band (prototype SiteFooter). The content is a single HTML block in
 * the theme layout's footer region, marked up with the .snsw-footer classes
 * below. The region wrapper is platform chrome (stable BEM class + hash). */
.community_byo-scoped-header-and-footer__footer-content {
    background-color: var(--navy-700) !important;
}

.snsw-footer {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-7) var(--space-6);
    color: var(--white);
    font-family: var(--app-font-family);
}

.snsw-footer__top {
    display: grid;
    gap: 18px;
    justify-items: start;
}

.snsw-footer__logo {
    display: block;
    height: 52px;
    width: auto;
}

.snsw-footer__blurb {
    margin: 0;
    max-width: 300px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sky-100);
}

/* (0,3,1) beats the platform's a:link:not(...) rule at (0,2,2). */
.snsw-footer a.snsw-footer__link:link,
.snsw-footer a.snsw-footer__link:visited {
    color: var(--white);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* White ring: blue-500 is too close to navy-700 to read as a focus indicator. */
.snsw-footer a.snsw-footer__link:focus-visible {
    outline: var(--app-focus-ring-width) solid var(--white);
    outline-offset: var(--app-focus-ring-offset);
    border-radius: var(--radius-xs);
}

.snsw-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3) 28px;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 14px;
    color: var(--sky-100);
}


/* ── Form controls (lightning-input, -combobox, -textarea, -radio-group) ──
 * Design system Input/Select/Radio specs. Colours, radius, inner spacing and
 * focus shadow go through the SLDS component hooks the platform reads; height
 * and radio size have no hook (min-height is a literal in
 * dxp-styling-hooks.min.css), so those are plain rules on the stable SLDS
 * classes. Synthetic shadow lets these reach inside base components. */
:root {
    --slds-c-input-radius-border: var(--app-radius-sm);
    --slds-c-input-color-border: var(--app-color-border-input);
    --slds-c-input-color-border-focus: var(--app-color-brand);
    --slds-c-input-shadow-focus: 0 0 0 4px var(--sky-100);
    --slds-c-input-spacing-inline-start: var(--space-4);
    --slds-c-input-spacing-inline-end: var(--space-4);
    --slds-c-input-text-color: var(--app-color-text);

    --slds-c-textarea-radius-border: var(--app-radius-sm);
    --slds-c-textarea-color-border: var(--app-color-border-input);
    --slds-c-textarea-shadow-focus: 0 0 0 4px var(--sky-100);

    --slds-c-select-radius-border: var(--app-radius-sm);
    --slds-c-select-color-border: var(--app-color-border-input);
    --slds-c-select-shadow-focus: 0 0 0 4px var(--sky-100);

    --slds-c-radio-color-border: var(--app-color-border-input);
    --slds-c-radio-mark-color-foreground: var(--app-color-brand);
    --slds-c-radio-color-background-checked: var(--white);
    --slds-c-radio-shadow-focus: 0 0 0 3px var(--white), 0 0 0 6px var(--focus-ring);
}

/* Field height: design system Input min-height 48px. */
.slds-input,
.slds-combobox__input,
.slds-select {
    min-height: 48px;
    line-height: 44px;
    font-size: var(--text-body-size);
}
/* iOS Safari draws date and time inputs as a native control with its own
 * minimum width, ignoring width: 100%, so in a narrow card (Meeting Times edit
 * on a phone) they ran past the card edge. Dropping the native appearance
 * lets them size like any other input; tapping still opens the iOS picker.
 * -webkit-touch-callout is supported only on iOS, so desktop and Android
 * pickers are untouched. */
@supports (-webkit-touch-callout: none) {
    input.slds-input[type='time'],
    input.slds-input[type='date'],
    input.slds-input[type='datetime-local'] {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        -webkit-appearance: none;
        appearance: none;
    }

    input.slds-input::-webkit-date-and-time-value {
        margin: 0;
        text-align: left;
    }
}
/* Combobox trigger is a button: centre its placeholder/value vertically. */
.slds-combobox__input {
    display: flex;
    align-items: center;
}
.slds-textarea {
    min-height: 96px;
    padding: var(--space-3) var(--space-4);
    line-height: var(--leading-normal);
}

/* Field-level help icon (lightning-helptext beside a label): centre it on the
 * label's line. By default it sits inline on the text baseline, with SLDS top
 * padding on its wrapper, so against the 15px / 800 label it dropped below the
 * label text. One label line = label font size x 1.5 line height. */
.slds-form-element lightning-helptext {
    display: inline-flex;
    align-items: center;
    height: calc(var(--dxp-s-form-element-label-font-size, 0.9375rem) * 1.5);
    vertical-align: top;
}
.slds-form-element lightning-helptext .slds-form-element__icon {
    padding-top: 0;
    line-height: 1;
}

/* Required marker in the error colour, inline with the label. */
.slds-required {
    color: var(--app-color-error);
}

/* Radios: 24px circle with a 12px navy dot, on a 44px tap row. */
.slds-radio .slds-radio__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--app-tap-min);
}
.slds-radio .slds-radio_faux {
    width: 24px;
    height: 24px;
    margin-right: 0;
    border-width: 2px;
}
.slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux {
    border-color: var(--app-color-brand);
}
.slds-radio [type='radio']:checked + .slds-radio__label .slds-radio_faux::after {
    width: 12px;
    height: 12px;
}
.slds-radio .slds-form-element__label {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-size);
}

/* Field-level error text: design system 14px / 700 in the error colour. */
.slds-form-element__help {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
}

/* ── Form pages: white panel on grey ─────────────────────────────────────
 * A flow that shows the Next/Previous bar is a multi-step form (registration,
 * activation, withdrawal). Prototype Trial Registration: grey-100 page, white
 * 32px panel with shadow-md, nav row under a grey-200 rule. Single-screen page
 * flows (My Children, Compliance) have no navigation bar and are left alone. */
community_layout-section:has(dxp_flow-flow .navigationBar) {
    background-color: var(--surface-subtle);
}
dxp_flow-flow:has(.navigationBar) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    margin: clamp(16px, 3vw, 40px) auto clamp(32px, 6vw, 96px);
    padding: clamp(16px, 4vw, 40px);
    background: var(--surface-card);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--shadow-md);
}
dxp_flow-flow:has(.navigationBar) .navigationBar {
    margin-top: var(--space-6) !important;
    padding-top: 22px !important;
}


/* ── One side gutter for every component ─────────────────────────────────
 * The page section provides the side gutter (HorizontalRowPadding in the
 * branding set: 40px desktop, 16px mobile). The flow runtime added another
 * 16px each side (an SLDS spacing utility, which is itself !important), so any
 * component inside a flow sat 16px in from components that are not (the tabs).
 * Components therefore add no outer side padding of their own either. */
.flowruntimeBody.slds-p-horizontal_small {
    padding-left: 0 !important;
    padding-right: 0 !important;
}