/* ==========================================================================
   CoachCapacity — Brand system
   Visual language derived from Eagan Hockey Association (eaganhockey.com)
   and the EHA 4-color mark: navy field, silver ring, green accent, red detail.

   Loaded globally from App.razor, so it applies to the public site, the admin
   portal and the Identity/Account pages alike. Tokens here are the single
   source of truth; public.css and the per-component .razor.css files consume
   them rather than hard-coding hex values.
   ========================================================================== */

:root {
    /* --- Core palette (sampled from the EHA logo + live site) --- */
    --eha-navy: #1D3260; /* logo field, headings, sidebar, footer */
    --eha-navy-dark: #14244a;
    --eha-navy-light: #2E4C8A;
    --eha-navy-ink: #0E1A33; /* deepest, for body copy on white */

    --eha-green: #048752; /* CTA / action colour */
    --eha-green-dark: #036B41;
    --eha-green-mid: #138161;
    --eha-green-soft: #E6F4EE; /* tinted surfaces */

    --eha-silver: #D1D3D4; /* logo ring */
    --eha-silver-dark: #BDB8BC;
    --eha-silver-soft: #EDEFF2;

    --eha-red: #BE1E2D; /* sparingly: alerts, critical flags */

    /* --- Semantic tokens --- */
    --brand-primary: var(--eha-green); /* buttons, links, active states */
    --brand-primary-hover: var(--eha-green-dark);
    --brand-secondary: var(--eha-navy); /* structure: nav, sidebar, footer */
    --brand-ink: var(--eha-navy-ink);
    --brand-muted: #5D6B80;
    --brand-border: #DFE4EA;
    --brand-surface: #FFFFFF;
    --brand-surface-alt: #F4F7FA; /* "ice" — page backgrounds */

    --brand-success: var(--eha-green);
    --brand-warning: #D98B0A;
    --brand-danger: var(--eha-red);
    --brand-info: var(--eha-navy-light);

    /* --- Type --- */
    --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* --- Shape & depth (EHA uses generously rounded controls) --- */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 15px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(29, 50, 96, .06);
    --shadow: 0 4px 14px rgba(29, 50, 96, .08);
    --shadow-lg: 0 14px 38px rgba(29, 50, 96, .14);

    /* Consumed by AdminLayout; overridden per-organization at runtime. */
    --primary-color: var(--eha-green);
    --sidebar-bg: var(--eha-navy);
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, .10);

    /* Bootstrap bridge — recolours components we don't override by hand. */
    --bs-primary: #048752;
    --bs-primary-rgb: 4, 135, 82;
    --bs-link-color: #048752;
    --bs-link-color-rgb: 4, 135, 82;
    --bs-link-hover-color: #036B41;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: #0E1A33;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 15px;
    --bs-focus-ring-color: rgba(4, 135, 82, .25);
}

/* ==========================================================================
   Typography
   Bebas Neue is a condensed all-caps display face: it is used for headings
   and numeric callouts only. Roboto carries all body copy, tables and forms,
   which mirrors how eaganhockey.com uses the pair.
   ========================================================================== */

html, body {
    font-family: var(--font-body);
    color: var(--brand-ink);
    -webkit-font-smoothing: antialiased;
}

/* Bebas Neue has one weight. Pages often add Bootstrap's .fw-bold / .fw-semibold (which are
   !important) to h1-h3, and the browser then fakes a bold by smearing the glyphs, which
   reads as blurry. font-synthesis: none keeps the real face whatever weight is asked for. */
h1, h2, h3, .display-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: .02em;
    line-height: 1.05;
    color: var(--eha-navy);
    text-transform: uppercase;
}

/* h4-h6 sit inside dense UI (cards, tables, modals) where an all-caps
   condensed face hurts legibility — keep them in Roboto. So do h1-h3 sized down
   with .h4-.h6 for the outline's sake: Bebas at that size, with a synthesized bold
   (it has only one weight), renders blurry. */
h4, h5, h6,
:is(h1, h2, h3):is(.h4, .h5, .h6) {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--eha-navy);
    letter-spacing: 0;
    text-transform: none;
}

/* Headings take the container's colour on a coloured band (a red Danger Zone header,
   a navy brand header), where the navy above would sit on red or vanish on navy. */
.text-white :is(h1, h2, h3, h4, h5, h6),
.text-bg-danger :is(h1, h2, h3, h4, h5, h6),
.card-header-brand :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* Bebas has no lowercase and renders small; nudge display sizes up. */
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.625rem; }

/* Identity/Account screens use h2 and h3 for full sentences of instruction
   ("Use a local account to log in."). Condensed all-caps is wrong for running
   prose, so only the h1 page title keeps the display face there. */
.auth-layout h2,
.auth-layout h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

/* Opt-out for headings that carry data or proper nouns that must stay mixed-case. */
.heading-plain {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

a {
    color: var(--brand-primary);
    text-decoration: none;
}

a:hover {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Buttons — pill-ish, uppercase, semibold, matching the EHA registration CTA
   ========================================================================== */

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: var(--radius-lg);
    padding: .375rem .85rem;
    font-size: .85rem;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn-sm {
    border-radius: var(--radius);
    padding: .2rem .5rem;
    font-size: .775rem;
}

.btn-lg {
    padding: .55rem 1.4rem;
    font-size: .9rem;
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(4, 135, 82, .28);
}

.btn-outline-primary {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:first-child:active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-secondary {
    background-color: var(--eha-navy);
    border-color: var(--eha-navy);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:first-child:active {
    background-color: var(--eha-navy-dark);
    border-color: var(--eha-navy-dark);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--eha-navy);
    color: var(--eha-navy);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:first-child:active {
    background-color: var(--eha-navy);
    border-color: var(--eha-navy);
    color: #fff;
}

.btn-danger {
    background-color: var(--eha-red);
    border-color: var(--eha-red);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:first-child:active {
    background-color: #9C1824;
    border-color: #9C1824;
}

.btn-link {
    color: var(--brand-primary);
    font-weight: 500;
    letter-spacing: 0;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(4, 135, 82, .25);
    border-color: var(--brand-primary);
    outline: none;
}

/* ==========================================================================
   Surfaces: cards, tables, forms
   ========================================================================== */

.card {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--brand-border);
    font-weight: 600;
    color: var(--eha-navy);
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
    padding: 1rem 1.25rem;
}

/* A navy header band for cards that lead a section. */
.card-header.card-header-brand {
    background-color: var(--eha-navy);
    color: #fff;
    border-bottom-color: var(--eha-navy);
}

.table {
    --bs-table-hover-bg: var(--eha-green-soft);
    color: var(--brand-ink);
}

.table > thead {
    background-color: var(--brand-surface-alt);
}

.table > thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand-muted);
    border-bottom: 2px solid var(--brand-border);
    padding: .75rem;
    white-space: nowrap;
}

.table > tbody td {
    padding: .75rem;
    vertical-align: middle;
    border-color: var(--brand-border);
}

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--eha-navy);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-color: var(--brand-border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
}

.form-control::placeholder {
    color: #9AA5B4;
}

/* ==========================================================================
   Badges, alerts, navs
   ========================================================================== */

.badge {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--radius-pill);
    padding: .35em .7em;
}

.badge.bg-primary { background-color: var(--brand-primary) !important; }
.badge.bg-secondary { background-color: var(--eha-navy) !important; }
.badge.bg-success { background-color: var(--eha-green) !important; }
.badge.bg-danger { background-color: var(--eha-red) !important; }
.badge.bg-warning { background-color: var(--brand-warning) !important; color: #fff !important; }
.badge.bg-info { background-color: var(--eha-navy-light) !important; color: #fff !important; }
.badge.bg-light { background-color: var(--eha-silver-soft) !important; color: var(--eha-navy) !important; }

.alert {
    border-radius: var(--radius);
    border-width: 0;
    border-left-width: 4px;
    border-left-style: solid;
}

.alert-success { background-color: var(--eha-green-soft); border-left-color: var(--eha-green); color: var(--eha-green-dark); }
.alert-danger { background-color: #FBEAEC; border-left-color: var(--eha-red); color: #8C1520; }
.alert-warning { background-color: #FDF3E2; border-left-color: var(--brand-warning); color: #7A4E05; }
.alert-info { background-color: #EAF0FA; border-left-color: var(--eha-navy-light); color: var(--eha-navy-dark); }

.nav-tabs .nav-link {
    color: var(--brand-muted);
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--eha-navy);
    border-bottom-color: var(--eha-silver);
}

.nav-tabs .nav-link.active {
    color: var(--eha-navy);
    background: transparent;
    border-bottom-color: var(--brand-primary);
}

.pagination {
    --bs-pagination-color: var(--eha-navy);
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-hover-color: var(--brand-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(4, 135, 82, .25);
}

.dropdown-menu {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-primary);
}

.progress-bar { background-color: var(--brand-primary); }

.spinner-border { color: var(--brand-primary); }

/* ==========================================================================
   Shared brand utilities
   ========================================================================== */

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}

.brand-lockup:hover { text-decoration: none; }

.brand-mark {
    height: 44px;
    width: 44px;
    flex: 0 0 auto;
    object-fit: contain;
}

.brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--eha-navy);
}

.brand-wordmark .accent { color: var(--brand-primary); }

.bg-navy { background-color: var(--eha-navy) !important; }
.bg-ice { background-color: var(--brand-surface-alt) !important; }
.text-navy { color: var(--eha-navy) !important; }
.text-brand { color: var(--brand-primary) !important; }

/* The silver/green rule under section headings, echoing the logo ring. */
.brand-rule {
    display: block;
    width: 72px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--eha-green) 0%, var(--eha-navy) 100%);
    margin: 1rem 0 0;
}

.section-heading .brand-rule { margin: 1rem auto 0; }

/* Validation — keep the outline treatment, restate in brand colours. */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--eha-green); }
.invalid { outline: 1px solid var(--eha-red); }
.validation-message { color: var(--eha-red); font-size: .875rem; }

@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.85rem; }
    h3 { font-size: 1.4rem; }
}

/* Clamp card blurbs to three lines so a long description doesn't stretch one card
   in a row of equal-height cards. */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Blazor error UI

   The template ships these styles in MainLayout.razor.css, but that is a
   *scoped* stylesheet: the rule only matches elements carrying MainLayout's
   scope attribute. AdminLayout, AuthLayout, CoachLayout and PublicLayout each
   render their own #blazor-error-ui div, so the "display: none" never reached
   them and every page in those layouts showed a permanent "An unhandled error
   has occurred" bar at the bottom of the document.

   Defined here (global, unscoped) so it applies in every layout. Blazor makes
   the element visible by setting an inline style when a circuit actually fails,
   which still overrides this.
   ========================================================================== */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ==========================================================================
   Readability pass
   ========================================================================== */

/* Body copy down a notch from Bootstrap's 16px. Set on :root rather than body
   so every rem-based size in the app scales with it, instead of only the text
   that inherits directly. Headings keep their own rem sizes and shrink in
   proportion, which is the intent. */
:root {
    font-size: 15px;
}

/* Anything on a green or navy fill gets white text. Bootstrap's .bg-success and
   .bg-primary leave the colour to inherit, which produced dark-on-green. This
   covers the utility classes, buttons and badges in one place, including the
   links and icons nested inside them. */
.bg-success,
.bg-primary,
.bg-navy,
.btn-primary,
.btn-secondary,
.badge.bg-success,
.badge.bg-primary,
.badge.bg-secondary,
.card-header.card-header-brand {
    color: #fff !important;
}

.bg-success a,
.bg-primary a,
.bg-navy a,
.card-header.card-header-brand a {
    color: #fff;
    text-decoration: underline;
}

/* Bootstrap's .bg-info is a pale cyan that fails against white text, and the
   navy we mapped it to is hard to read as body copy. Use the brand's tinted
   surface with dark text instead, and keep the strong navy for badges only. */
.alert-info {
    background-color: #EAF0FA;
    border-left-color: var(--eha-navy-light);
    color: var(--eha-navy-dark);
}

.bg-info:not(.badge) {
    background-color: var(--eha-silver-soft) !important;
    color: var(--eha-navy-ink) !important;
}

/* The one remaining blue: links and .text-info on white. The navy-light used
   for both sits at roughly 4.0:1 on white, under the 4.5:1 minimum, so darken
   it for text while leaving the badge fill alone. */
.text-info {
    color: var(--eha-navy) !important;
}

/* Table header text was --brand-muted at .75rem, which is thin after the base
   size drop. */
.table > thead th {
    color: var(--eha-navy);
}

/* Bootstrap's .text-warning (#FFC107) is 1.6:1 on white — effectively unreadable,
   and it was being used for the Risk Flags count. Amber has to go this dark to clear
   4.5:1 against white (this is 4.7:1); the brighter --brand-warning stays for fills and
   borders, where contrast is carried by the text on top of it instead. */
:root {
    --brand-warning-text: #A06800;
}

.text-warning {
    color: var(--brand-warning-text) !important;
}

/* Outline warning buttons: Bootstrap's yellow (#FFC107) outline and label are as
   unreadable as its text. Use the darker amber that passes on white, and fill with it
   on hover so white text still reads (4.7:1). */
.btn-outline-warning {
    --bs-btn-color: var(--brand-warning-text);
    --bs-btn-border-color: var(--brand-warning-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-warning-text);
    --bs-btn-hover-border-color: var(--brand-warning-text);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7A4E05;
    --bs-btn-active-border-color: #7A4E05;
    --bs-btn-disabled-color: var(--brand-warning-text);
    --bs-btn-disabled-border-color: var(--brand-warning-text);
    --bs-btn-focus-shadow-rgb: 160, 104, 0;
}

/* --- Contrast on tinted surfaces -----------------------------------------
   Amber is bright enough that white text on it never reaches 4.5:1 (the
   "Action Needed" / "Tight" badges measured 2.75). Amber fills take dark text;
   only the darker greens, navy and red carry white. */
.badge.bg-warning,
.btn-warning,
.alert-warning .badge {
    color: var(--eha-navy-ink) !important;
}

/* Bootstrap's tinted table rows (.table-warning #FFF3CD, .table-danger #F8D7DA)
   are light enough to read dark text on, but our mid-tone green and Bootstrap's
   red both fall just under 4.5:1 against them. Darken both for text; the fills
   are unchanged. */
.text-success,
.table-warning a,
.table-warning .text-success {
    color: var(--eha-green-dark) !important;
}

.text-danger,
.table-danger .text-danger {
    color: #9C1824 !important;
}

/* ==========================================================================
   Table density

   These lists run to hundreds of rows, so the default .75rem cell padding cost
   a lot of scrolling for little gain. Tighter padding and a slightly smaller
   cell font fit noticeably more on screen; the 44px touch target is preserved
   on coarse pointers further down.
   ========================================================================== */

.table > thead th {
    padding: .45rem .6rem;
    font-size: .6875rem;
}

.table > tbody td {
    padding: .4rem .6rem;
    font-size: .875rem;
    line-height: 1.35;
}

/* Small print inside a cell (secondary guardian, birthdate under a name) was
   already .875rem, which now matches the cell. Step it down so the hierarchy
   inside a row still reads. */
.table > tbody td small,
.table > tbody td .small {
    font-size: .78rem;
}

/* Buttons inside table rows shouldn't re-inflate the row height. Targets any .btn,
   not just .btn-sm: the row action buttons are plain .btn and were 39px tall, which
   set the row height regardless of how tight the cell padding was. */
.table > tbody td .btn {
    padding: .175rem .45rem;
    font-size: .775rem;
    line-height: 1.4;
}

/* Touch devices get the original roomier hit areas back — a 32px row is fine
   with a mouse and awkward with a thumb. */
@media (pointer: coarse) {
    .table > tbody td {
        padding: .65rem .6rem;
    }

    .table > tbody td .btn {
        padding: .35rem .7rem;
    }
}

/* --- Contrast on the tinted page surface ---------------------------------
   The Identity pages sit on --brand-surface-alt (#F4F7FA) rather than white.
   The brand green clears 4.5:1 on white but drops to 4.25:1 there, and
   Bootstrap's .text-muted to 4.36:1. Both are fixed by using the darker
   tokens the brand already defines. */
.auth-layout a:not(.btn),
.auth-layout .btn-link {
    color: var(--brand-primary-hover);
}

/* .text-secondary as well as .text-muted: the Identity pages use both, and
   Bootstrap gives them the same #6C757D. */
.text-muted,
.text-secondary {
    color: var(--brand-muted) !important;
}

/* .nav-pills' active background is compiled into Bootstrap from its own $primary,
   so overriding --bs-primary doesn't reach it — the account sub-nav was still
   rendering the stock blue. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand-primary);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link {
    color: var(--eha-navy);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--eha-silver-soft);
}

/* Note: the "Username" and "Email" floating labels on the account pages measure
   4.36:1, but those inputs are disabled and Bootstrap styles a disabled label with
   its own higher-specificity rule. WCAG 1.4.3 exempts inactive controls, so this is
   left alone rather than fought with a specificity override. */

/* ---------------------------------------------------------------------------
   Admin sidebar width, and the collapsed "rail" state.

   This lives in the global sheet rather than in either component's scoped file
   because the switch reads one component's class to size another's element:
   `.admin-nav-menu` is scoped to AdminNavMenu.razor.css and `.admin-sidebar` to
   AdminLayout.razor.css, and a selector in either file gets an attribute suffix
   that the other's elements do not carry. A custom property set here cascades
   into both, so the widths stay in one place.

   The collapse state is held in AdminNavMenu, not AdminLayout: the nav declares
   its own render mode and is interactive on every page, while several admin
   pages are statically rendered and only host interactive islands. A toggle in
   the layout would be dead on those pages.
   --------------------------------------------------------------------------- */

:root {
    --sidebar-width: 260px;
    --sidebar-width-rail: 76px;
}

.admin-layout:has(.admin-nav-menu.is-collapsed) {
    --sidebar-width: var(--sidebar-width-rail);
}

/* The brand lockup has to collapse with the nav, or the wordmark overflows the rail and
   gets clipped mid-word. Same cross-scope reason as the width rule above: .sidebar-brand
   belongs to AdminLayout.razor.css and .admin-nav-menu to AdminNavMenu.razor.css. */

.admin-layout:has(.admin-nav-menu.is-collapsed) .sidebar-header {
    padding: 1rem .5rem;
}

.admin-layout:has(.admin-nav-menu.is-collapsed) .sidebar-brand {
    justify-content: center;
    margin-bottom: 0;
    gap: 0;
}

.admin-layout:has(.admin-nav-menu.is-collapsed) .sidebar-brand-text {
    display: none;
}

/* Cards / List layout switch on the resource lists. Bootstrap Icons sit a little below
   the text baseline (vertical-align: -.125em), which shows as an off-centre glyph in an
   icon-only button, so centre the glyph itself. */
.view-toggle .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-toggle .bi {
    font-size: 1.25rem;
    line-height: 1;
}

.view-toggle .bi::before {
    display: block;
    vertical-align: 0;
}

/* Error and not-found pages: one centred column inside the page container, rather than
   the template's headings flush against the window edge. */
.status-page {
    max-width: 40rem;
    padding-block: 4rem 5rem;
    text-align: center;
}

.status-page-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1rem;
    color: var(--eha-navy);
}

.status-page-icon.text-danger {
    color: var(--eha-red);
}

.status-page h1 {
    margin-bottom: .75rem;
}

.status-page .lead {
    color: var(--bs-secondary-color);
    margin-bottom: 1.75rem;
}

.status-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.status-page-reference {
    margin: 2.5rem 0 0;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}