/*
    IRM_Lib_Theme base stylesheet.
    Served at /_content/IRM_Lib_Theme/irm-theme.css.

    Framework-neutral on purpose: it styles only .irm-* classes and never touches a Bootstrap
    selector, so applications still loading the legacy bundle are unaffected. Every value comes from
    a custom property emitted by the _ThemeHead partial, so this file is static and cacheable.
*/

.irm-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--irm-content-width, 820px);
    margin: 0 auto;
    padding: 1.5rem 1rem;
    color: var(--irm-text, #212529);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

.irm-surface {
    background: var(--irm-surface, #FFFFFF);
    border: 1px solid var(--irm-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--irm-radius, 4px);
    padding: 1.5rem;
}

.irm-page h1,
.irm-page h2,
.irm-page h3 {
    color: var(--irm-heading, #212529);
    margin-top: 0;
    text-wrap: balance;
}

.irm-muted {
    color: var(--irm-muted, rgba(0, 0, 0, 0.65));
}

.irm-page a {
    color: var(--irm-link, #D80D28);
}

.irm-page a:hover {
    color: var(--irm-primary-hover, #D80D28);
}

/* Header */

/*
    A header image is always full width, so the header itself is always a column and
    Logo_Layout__c governs the one thing it can meaningfully govern: how the primary and secondary
    logos sit relative to each other. Setting the direction on .irm-header instead made the two
    layouts render identically, because a 100%-wide banner consumes the row either way.
*/
.irm-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.irm-header__logos {
    display: flex;
    inline-size: 100%;
    gap: 1rem;
    flex-wrap: wrap;
}

.irm-header--inline .irm-header__logos {
    flex-direction: row;
    align-items: center;
}

.irm-header--stacked .irm-header__logos {
    flex-direction: column;
    align-items: flex-start;
}

.irm-header--inline.irm-header--align-left .irm-header__logos {
    justify-content: flex-start;
}

.irm-header--inline.irm-header--align-centre .irm-header__logos {
    justify-content: center;
}

.irm-header--inline.irm-header--align-right .irm-header__logos {
    justify-content: flex-end;
}

.irm-header--stacked.irm-header--align-left .irm-header__logos {
    align-items: flex-start;
}

.irm-header--stacked.irm-header--align-centre .irm-header__logos {
    align-items: center;
}

.irm-header--stacked.irm-header--align-right .irm-header__logos {
    align-items: flex-end;
}

.irm-header__logo {
    height: var(--irm-logo-height, 64px);
    width: auto;
    max-width: 100%;
}

/*
    --irm-banner-aspect is opt-in and has no default on purpose. Salesforce does not tell us a
    header image's dimensions, so there is nothing to reserve space with, and the banner is the
    topmost element on the page — it grows from zero height on load and pushes the whole journey
    down. An application that knows the shape of its banners can set the variable and remove that
    shift; leaving it unset keeps the previous behaviour and never crops anyone's artwork.
*/
.irm-header__banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--irm-banner-aspect);
    object-fit: cover;
    border-radius: var(--irm-radius, 4px);
}

/* Buttons */

/*
    inline-flex rather than inline-block so min-block-size can centre the label. 44px is above the
    24px WCAG 2.2 AA 2.5.8 floor on purpose: these journeys are mostly completed one-handed on a
    phone, and 24px is a minimum rather than a target.
*/
.irm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: 0.5rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--irm-action-radius, var(--irm-radius, 4px));
    background: var(--irm-primary, #D80D28);
    color: var(--irm-on-primary, #FFFFFF);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.irm-button:hover {
    background: var(--irm-primary-hover, #D80D28);
    color: var(--irm-on-primary, #FFFFFF);
}

.irm-button:active {
    background: var(--irm-primary-active, #D80D28);
}

.irm-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/*
    The secondary variant exists so that a screen with two submit buttons can say which one ends
    the journey. Reads as a button at rest, but never competes with the primary for the eye.
*/
.irm-button--secondary {
    background: transparent;
    border-color: var(--irm-border, rgba(0, 0, 0, 0.15));
    color: var(--irm-text, #212529);
}

.irm-button--secondary:hover {
    background: color-mix(in srgb, var(--irm-text, #212529) 6%, transparent);
    border-color: var(--irm-muted, rgba(0, 0, 0, 0.65));
    color: var(--irm-text, #212529);
}

.irm-button--secondary:active {
    background: color-mix(in srgb, var(--irm-text, #212529) 12%, transparent);
}

/*
    Actions row. The gap is the point: two adjacent 44px targets 4px apart is a mis-tap waiting to
    happen, and one of these two is irreversible.
*/
.irm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin-block-start: 2rem;
}

/* Legal */

.irm-legal {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--irm-muted, rgba(0, 0, 0, 0.65));
}

.irm-legal__text {
    margin: 0 0 0.5rem;
    white-space: pre-line;
}

.irm-legal__text > :first-child {
    margin-block-start: 0;
}

.irm-legal__text > :last-child {
    margin-block-end: 0;
}

.irm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus — never remove this without replacing it. */

.irm-page :focus-visible,
.irm-button:focus-visible {
    outline: 3px solid var(--irm-primary, #D80D28);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .irm-page *,
    .irm-page *::before,
    .irm-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}