/* ==========================================================================
   Alderstrom site styles
   Loaded after the DevExpress theme (which bundles Bootstrap 5), so class names
   here deliberately avoid Bootstrap's (.container, .card, .btn, .lead ...).
   ========================================================================== */

:root {
    --navy: #161b74;          /* brand colour, from the Alderstrom wordmark */
    --navy-deep: #002060;
    --navy-ink: #0f172a;
    --cyan: #40e0ff;
    --purple: #9333ea;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --accent-gradient: linear-gradient(45deg, var(--cyan), var(--purple));
    --radius: 16px;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-lift: 0 20px 40px rgba(15, 23, 42, 0.14);
    --header-height: 72px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--navy-ink);
    line-height: 1.2;
    margin: 0 0 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

h1:focus { outline: none; }

p { margin: 0 0 1rem; }

a { color: var(--navy); }
a:hover { color: var(--purple); }

img { max-width: 100%; height: auto; }

.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.narrow { max-width: 820px; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 2000;
    border-radius: 0 0 8px 0;
}

.skip-link:focus { left: 0; color: #fff; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 0.75rem;
}

/* ---------- Buttons ---------- */

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-accent { background: var(--accent-gradient); color: #fff; }
.button-accent:hover { color: #fff; box-shadow: 0 10px 25px rgba(64, 224, 255, 0.35); }

.button-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.button-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.button-primary { background: var(--navy); color: #fff; }
.button-primary:hover { color: #fff; box-shadow: 0 10px 25px rgba(22, 27, 116, 0.3); }

.button-outline { color: var(--navy); border-color: var(--navy); }
.button-outline:hover { color: #fff; background: var(--navy); }

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    text-decoration: none;
}

.more-link .icon { transition: transform 0.2s ease; }
.more-link:hover .icon { transform: translateX(4px); }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
}

.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 182px; }

.site-nav { display: flex; align-items: center; gap: 0.5rem; }

.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav a:hover { color: var(--navy); background: var(--surface-muted); }
.site-nav a.active { color: var(--navy); background: rgba(22, 27, 116, 0.08); }

.site-nav a.nav-cta { background: var(--navy); color: #fff; margin-left: 0.5rem; }
.site-nav a.nav-cta:hover, .site-nav a.nav-cta.active { background: var(--navy-deep); color: #fff; }

.nav-toggle, .nav-toggle-button { display: none; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-deep), var(--navy) 55%, #0b3a80);
    padding: clamp(5rem, 12vw, 9rem) 0;
}

.hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(64, 224, 255, 0.22) 0%, transparent 45%),
                radial-gradient(circle at 80% 15%, rgba(147, 51, 234, 0.28) 0%, transparent 45%);
    animation: pulse 5s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.65; }
    to { opacity: 1; }
}

.hero-inner { position: relative; max-width: 900px; text-align: center; }

.hero h1 {
    background: linear-gradient(45deg, #fff, var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
}

.hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--cyan); }

.intro { font-size: clamp(1.1rem, 2vw, 1.3rem); opacity: 0.92; }

.hero .intro { max-width: 720px; margin: 0 auto 2rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.narrow .hero-actions { justify-content: flex-start; }

.page-hero {
    color: #fff;
    background: linear-gradient(135deg, var(--navy-deep), var(--navy));
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}

.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .intro { max-width: 720px; margin-bottom: 0; }

/* ---------- Sections ---------- */

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-muted { background: linear-gradient(135deg, var(--surface-muted), var(--line)); }

.section-heading { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-heading p:last-child { color: var(--muted); margin-bottom: 0; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    box-sizing: border-box;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.pillar { display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(64, 224, 255, 0.6); }
.pillar p { color: var(--muted); flex: 1; }

.icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex: none;
}

.icon-badge .icon { width: 28px; height: 28px; }
.icon-badge-sm { width: 46px; height: 46px; margin-bottom: 0; }
.icon-badge-sm .icon { width: 22px; height: 22px; }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.audience-cards { display: grid; gap: 1.25rem; }
.audience { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; }
.audience h3 { margin-bottom: 0.35rem; }
.audience p { color: var(--muted); margin: 0; }

.location-card .icon-badge { margin-bottom: 1rem; }
.location-card p:last-child { margin-bottom: 0; }

/* ---------- Services page ---------- */

.service-list { display: grid; gap: clamp(3rem, 6vw, 5rem); }

.service {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.service:nth-child(even) .service-intro { order: 2; }

.service-summary { font-size: 1.2rem; font-weight: 600; color: var(--navy); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.check-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.check-list .icon { color: var(--purple); margin-top: 0.2em; }

.steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.steps li {
    counter-increment: step;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--shadow);
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.steps p { color: var(--muted); margin: 0; }

/* ---------- Products (direct to consumer) ---------- */

.product-list { display: grid; gap: 2rem; }

.product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3rem);
}

.product h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.product-tagline { color: var(--purple); font-weight: 600; margin-bottom: 0.35rem; }
.product-intro .button { margin-top: 0.5rem; }
.product-intro .button .icon { width: 1.1em; height: 1.1em; }

/* ---------- CTA band ---------- */

.cta-band { background: linear-gradient(135deg, var(--ink), var(--navy-ink)); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-band p { margin: 0; opacity: 0.85; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Contact page ---------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.contact-form-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.contact-form-card h2 { font-size: 1.6rem; }

.contact-details { display: grid; gap: 1.25rem; }
.contact-detail { display: flex; gap: 1.25rem; align-items: center; padding: 1.5rem; }
.contact-detail h3 { font-size: 1rem; margin-bottom: 0.15rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.contact-detail p { margin: 0; font-weight: 600; }
.contact-detail a { text-decoration: none; }

.contact-form .validation-message { color: #c81e1e; font-size: 0.875rem; margin-top: 0.35rem; }

.contact-submit.dxbl-btn {
    --dxbl-btn-bg: var(--navy);
    --dxbl-btn-border-color: var(--navy);
    --dxbl-btn-hover-bg: var(--navy-deep);
    --dxbl-btn-hover-border-color: var(--navy-deep);
    --dxbl-btn-active-bg: var(--navy-deep);
    --dxbl-btn-active-border-color: var(--navy-deep);
    --dxbl-btn-focus-bg: var(--navy-deep);
    --dxbl-btn-focus-border-color: var(--navy-deep);
    --dxbl-btn-focus-outline-color: var(--cyan);
    --dxbl-btn-focus-shadow-color: rgba(64, 224, 255, 0.5);
    --dxbl-btn-border-radius: 999px;
    border-radius: 999px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 600;
}

.form-error { color: #c81e1e; font-weight: 600; }

.form-success { text-align: center; padding: 2rem 0; }
.form-success .icon-badge { margin: 0 auto 1.25rem; }

/* ---------- Long-form text ---------- */

.prose h2 { font-size: 1.35rem; margin-top: 2.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.5rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.5rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-ink); color: rgba(255, 255, 255, 0.78); font-size: 0.975rem; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1.3fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-top: 4rem;
    padding-bottom: 3rem;
}

.footer-brand img { display: block; width: 182px; margin-bottom: 1rem; }
.footer-tagline { color: var(--cyan); font-weight: 600; margin-bottom: 0.5rem; }

.site-footer h2 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.footer-bottom p { margin: 0; font-size: 0.875rem; }

/* ---------- Blazor framework UI ---------- */

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .split, .service, .product, .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .service:nth-child(even) .service-intro { order: 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    /* Visually hidden but still keyboard-focusable; the label is the visible control. */
    .nav-toggle { display: block; position: absolute; opacity: 0; pointer-events: none; }

    .nav-toggle-button {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 10px;
    }

    .nav-toggle-button span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }

    .nav-toggle:focus-visible + .nav-toggle-button { outline: 2px solid var(--navy); }
    .nav-toggle:checked + .nav-toggle-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked + .nav-toggle-button span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked + .nav-toggle-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 1rem 1.5rem 1.5rem;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .nav-toggle:checked ~ .site-nav { display: flex; }
    .site-nav a.nav-cta { margin-left: 0; text-align: center; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cta-band-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-glow { animation: none; }
    .button, .pillar, .more-link .icon { transition: none; }
}