/* ALX Reserve Specialists brand overrides. Loaded through the Fluent theme's AddFilePaths. */

:root {
    --alx-brand-ink: #323338;
    --alx-brand-slate: #555A5F;
    --alx-brand-orange: #FF701C;
    --alx-brand-orange-deep: #E64C05;
    --alx-brand-gradient-dark: linear-gradient(135deg, #323338 0%, #555A5F 100%);
    --alx-brand-heading-font: "Nexa Bold", "Nexa", Arial, sans-serif;

    /* Button rest = #E64C05, hover = #FF701C. */
    --dxds-primary-10: #FFF5EF;
    --dxds-primary-20: #FFE9DB;
    --dxds-primary-30: #FFD6BD;
    --dxds-primary-40: #FFC29C;
    --dxds-primary-50: #FFAA77;
    --dxds-primary-60: #FF9152;
    --dxds-primary-70: #FF8036;
    --dxds-primary-80: #FF701C;
    --dxds-primary-90: #F45E0E;
    --dxds-primary-100: #E64C05;
    --dxds-primary-110: #FF701C;
    --dxds-primary-120: #C24004;
    --dxds-primary-130: #A13503;
    --dxds-primary-140: #802A03;
    --dxds-primary-150: #601F02;
    --dxds-primary-160: #401501;
    --dxds-primary-170: #200A01;
}

/* Remap the marketing stylesheet's variables to the brand (html:root outranks its :root). */
html:root {
    --alx-primary: #E64C05;
    --alx-primary-hover: #FF701C;
    --alx-dark: #323338;
    --alx-dark-hover: #555A5F;
    --alx-gray-800: #323338;
    --alx-gray-700: #555A5F;
    --alx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --alx-font-heading: var(--alx-brand-heading-font);
}

body {
    color: var(--alx-brand-ink);
    background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--alx-brand-heading-font);
    font-weight: 700;
}

/* Links on light pages: ink text, orange underline. */
main a:not(.btn):not(.dxbl-btn) {
    color: var(--alx-brand-ink);
    text-decoration: underline;
    text-decoration-color: var(--alx-brand-orange-deep);
    text-underline-offset: 3px;
}

/* White on #E64C05 is 3.89:1, so labels are bold and at least 16px. */
.btn, .dxbl-btn {
    font-family: var(--alx-brand-heading-font);
    font-weight: 700;
    font-size: max(1rem, 16px);
}

:focus-visible {
    outline: 2px solid var(--alx-brand-orange-deep);
    outline-offset: 2px;
}

/* Page titles: uppercase with a rule beneath. */
.page-title {
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--alx-brand-orange-deep);
}

/* Header */
body .navbar {
    background: var(--alx-brand-gradient-dark);
    border-bottom: 3px solid var(--alx-brand-orange);
}

body .navbar__brand,
body .navbar__brand:hover {
    font-family: var(--alx-brand-heading-font);
    color: var(--alx-brand-orange);
    text-decoration: none;
}

body .navbar__brand img {
    display: block;
    height: 48px;
    width: auto;
}

body .navbar__links a {
    color: #FFFFFF;
    text-decoration: none;
}

body .navbar__links a:hover,
body .navbar__links a:focus-visible {
    color: var(--alx-brand-orange);
}

body .navbar__toggle {
    color: #FFFFFF;
}

/* Footer */
body .footer {
    background: var(--alx-brand-gradient-dark);
    color: #FFFFFF;
}

body .footer__brand {
    font-family: var(--alx-brand-heading-font);
    color: var(--alx-brand-orange);
}

body .footer__brand img {
    display: block;
    height: 72px;
    width: auto;
}

body .footer__heading {
    color: var(--alx-brand-orange);
}

body .footer__desc,
body .footer__bottom {
    color: #FFFFFF;
}

body .footer__links a {
    color: #FFFFFF;
    text-decoration: none;
}

body .footer__links a:hover,
body .footer__links a:focus-visible {
    color: var(--alx-brand-orange);
}

body .footer__bottom {
    border-top-color: var(--alx-brand-slate);
}

/* Intake landing */
.intake-hero {
    background: var(--alx-brand-gradient-dark);
    color: #FFFFFF;
    padding: 4rem 0 3.5rem;
}

.intake-hero__logo {
    display: block;
    height: 120px;
    width: auto;
    margin-bottom: 1.5rem;
}

.intake-hero__eyebrow {
    color: var(--alx-brand-orange);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    margin-bottom: .5rem;
}

.intake-hero h1 {
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.intake-hero p {
    color: #FFFFFF;
    max-width: 46rem;
    font-size: 1.125rem;
}

.intake-body {
    padding: 3rem 0 4rem;
}

.intake-body h2 {
    font-size: 1.5rem;
}

.intake-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 992px) {
    .intake-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.intake-list {
    padding-left: 1.25rem;
    line-height: 1.8;
}

.intake-list li::marker {
    color: var(--alx-brand-orange-deep);
}

.intake-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid #D9DADC;
}

.intake-start p {
    margin: 0;
    color: var(--alx-brand-slate);
}

/* Intake wizard */
.intake-wizard { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.intake-step-label { color: #555A5F; }
.intake-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem 1rem; }
.intake-table td, .intake-table th { vertical-align: middle; }
.intake-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.money-input { display: flex; align-items: center; gap: .75rem; }
.money-input > :first-child { flex: 1; }