/* ═══════════════════════════════════════════════════════════════════════════════════════════
   alStyles.css — Activate Learning brand FALLBACK values. GENERATED FILE, do not edit by hand.

   Regenerate after changing scripts/data/theme/al/journey-theme-items.json:
     pwsh scripts/dev-tools/seed-journey-theme.ps1 -Theme al -EmitCss <every copy of this file>

   What this is: the --xflow-* design tokens on :root, one line per Journey Theme row, so a page
   the theme layout does not wrap (login, register, forgot password) still gets the brand. On
   every page with a theme layout the Journey_Theme__c record wins: c/xflowTheme sets the same
   tokens inline on the layout host, which beats anything declared here. Change a font or colour
   on the record, then refresh this file from the seed; never edit a value here alone.

   What this is not: a stylesheet. The rules that draw the forms live in c/xflowBase, imported by
   each component, and read these tokens. Load it from the site head markup with ?{ versionKey }.
   Any @font-face the brand needs belongs beside it in the same static resource, not in here.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --xflow-title-font-family: 'Futura Round Demi', Arial, sans-serif;
    --xflow-title-font-weight: 100;
    --xflow-title-font-size: 2.5rem;
    --xflow-subtitle-font-family: 'Futura Round Medium', Arial, sans-serif;
    --xflow-subtitle-font-weight: 100;
    --xflow-subtitle-font-size: 1.5rem;
    --xflow-heading-font-family: 'Futura Round Medium', Arial, sans-serif;
    --xflow-heading-font-weight: 100;
    --xflow-heading-font-size: 1.5rem;
    --xflow-label-font-family: 'Arial Bold', Arial, sans-serif;
    --xflow-label-font-weight: 700;
    --xflow-label-font-size: 1rem;
    --xflow-body-font-family: Arial, sans-serif;
    --xflow-body-font-size: 1rem;
    --xflow-body-line-height: 1.5;
    --xflow-button-font-family: 'Futura Round Medium', Arial, sans-serif;
    --xflow-button-font-weight: 100;
    --xflow-button-font-size: 1rem;
    --xflow-intro-title-font-size: 1.125rem;
    --xflow-color-primary: #007175;
    --xflow-color-accent: #00a79e;
    --xflow-color-danger: #d62b1d;
    --xflow-color-warning: #ffc107;
    --xflow-color-text: #13213e;
    --xflow-color-border: #e5e5e5;
    --xflow-color-background: #ffffff;
    --xflow-color-background-inverse: #231f20;
    --xflow-form-max-width: 75%;
    --xflow-form-padding-inline: 1rem;
    --xflow-intro-margin: 0.75rem auto 1.25rem;
    --xflow-nav-color: #00a79e;
    --xflow-nav-color-accent: #e8820c;
    --xflow-nav-color-background: #ffffff;
    --xflow-nav-button-color-second: #ffffff;
    --xflow-nav-button-color-second-hover: #e6f1f1;
    --xflow-nav-button-text-color-second: #007175;
}

/* ─── The one rule that has to stay ───────────────────────────────────────────────────────────
   Yes/No toggle (lightning-radio-group type="button", class custom-radio-btn / xflow-toggle). The
   SLDS build LWR sites ship draws its checked state in a literal #0176d3 with no styling hook, and
   a component stylesheet cannot reach inside the base component, so a document-level rule is the
   only way to paint it in the primary colour. Reads tokens like everything else. Drop it the day
   SLDS exposes --slds-c-radio-button-* (c/xflowBase already sets those on .xflow-root). */

.custom-radio-btn .slds-radio_button [type=radio]:checked+.slds-radio_button__label,
.xflow-toggle .slds-radio_button [type=radio]:checked+.slds-radio_button__label {
    background-color: var(--xflow-color-primary);
    border-color: var(--xflow-color-primary);
    color: var(--xflow-color-background);
}

/* Hover is on the label, not the input: the label overlays it. Unanswered buttons take a pale
   wash to read as clickable; the answered one shifts to the accent rather than losing its fill. */
.custom-radio-btn .slds-radio_button [type=radio]:not(:checked)+.slds-radio_button__label:hover,
.xflow-toggle .slds-radio_button [type=radio]:not(:checked)+.slds-radio_button__label:hover {
    background-color: color-mix(in srgb, var(--xflow-color-primary) 10%, white);
    border-color: var(--xflow-color-primary);
    color: var(--xflow-color-primary);
}

.custom-radio-btn .slds-radio_button [type=radio]:checked+.slds-radio_button__label:hover,
.xflow-toggle .slds-radio_button [type=radio]:checked+.slds-radio_button__label:hover {
    background-color: var(--xflow-color-accent);
    border-color: var(--xflow-color-accent);
}