/* ============================================================
   Inauguration Perfection — design system (brand v1.0)
   Single global stylesheet. No inline styles in markup.
   Layer 1: brand tokens · Layer 2: Bootstrap overrides
   Layer 3: component classes · Layer 4: reduced-motion
   ============================================================ */

/* ---------- Layer 1: :root brand tokens (single source of truth) ---------- */
:root {
    /* Brand colours — from marketing/brand-guidelines.html v1.0 */
    --ip-navy: #1b3a8f; /* Primary · text, anchors */
    --ip-blue: #1f8fcf; /* Secondary · highlights, kickers */
    --ip-teal: #1fd3c3; /* Accent · energy */

    /* Neutrals */
    --ip-ink: #1a2533; /* primary body text */
    --ip-slate: #5b6b7f; /* secondary text */
    --ip-mist: #cfd8e3; /* hairline borders */
    --ip-cloud: #f4f7fb; /* elevated / section surface */
    --ip-white: #ffffff; /* base surface */

    /* Signature gradient — 135°, navy → blue → teal */
    --ip-gradient: linear-gradient(135deg, #1b3a8f 0%, #1f8fcf 50%, #1fd3c3 100%);

    /* Spacing scale */
    --ip-s-1: .5rem;
    --ip-s-2: 1rem;
    --ip-s-3: 1.5rem;
    --ip-s-4: 2.5rem;
    --ip-s-5: 4rem;
    --ip-s-6: 6rem;

    /* Layered, low-opacity, navy-tinted shadows */
    --ip-shadow-sm: 0 1px 2px rgba(27,58,143,.06), 0 2px 8px -4px rgba(27,58,143,.12);
    --ip-shadow-md: 0 2px 4px rgba(27,58,143,.05), 0 18px 40px -24px rgba(27,58,143,.35);

    /* Type — Segoe UI system standard, Inter approved web alternative */
    --ip-font-body: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
    --ip-ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Layer 2: Bootstrap --bs-* overrides (rebrand utilities for free) ---------- */
:root {
    --bs-primary: var(--ip-navy);
    --bs-primary-rgb: 27,58,143; /* drives bg-primary / text-primary / alpha */
    --bs-body-color: var(--ip-ink);
    --bs-body-bg: var(--ip-white);
    --bs-secondary-color: var(--ip-slate);
    --bs-body-font-family: var(--ip-font-body);
    --bs-border-color: var(--ip-mist);
    --bs-border-radius: .75rem;
    --bs-link-color: var(--ip-blue);
    --bs-link-color-rgb: 31,143,207;
    --bs-link-hover-color: var(--ip-navy);
    --bs-link-hover-color-rgb: 27,58,143;
}

body {
    font-family: var(--ip-font-body);
    line-height: 1.55;
    color: var(--ip-ink);
    background-color: var(--ip-white);
}

/* Headings: navy, tight tracking. (The old placeholder forced uppercase h1..h4 — dropped.) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ip-navy);
    letter-spacing: -.01em;
    font-weight: 700;
    line-height: 1.15;
}

p {
    max-width: 68ch;
}

/* Blazor's FocusOnNavigate focuses the <h1> after routing — hide the default outline box */
h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

/* Buttons read from --bs-primary; set navy → darker-navy hover explicitly for AA */
.btn-primary {
    --bs-btn-bg: var(--ip-navy);
    --bs-btn-border-color: var(--ip-navy);
    --bs-btn-hover-bg: #16306f;
    --bs-btn-hover-border-color: #16306f;
    --bs-btn-active-bg: #16306f;
    --bs-btn-active-border-color: #16306f;
}

/* Teal accent CTA */
.btn-accent {
    --bs-btn-color: #06262b;
    --bs-btn-bg: var(--ip-teal);
    --bs-btn-border-color: var(--ip-teal);
    --bs-btn-hover-color: #06262b;
    --bs-btn-hover-bg: #19b8aa;
    --bs-btn-hover-border-color: #19b8aa;
    --bs-btn-active-bg: #19b8aa;
    --bs-btn-active-border-color: #19b8aa;
}

/* Navbar links adopt the brand */
.navbar-nav .nav-link {
    color: var(--ip-navy);
    font-weight: 600;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus-visible {
        color: var(--ip-blue);
    }

/* ---------- Layer 3: component classes (what Bootstrap can't express) ---------- */

/* The signature gradient panel — hero / banners / CTA. Text on it is white. */
.ip-gradient {
    background: var(--ip-gradient);
    color: #fff;
}

    .ip-gradient h1, .ip-gradient h2, .ip-gradient h3 {
        color: #fff;
    }

    /* Kicker on the gradient needs light, not Signal Blue (contrast) */
    .ip-gradient .ip-kicker {
        color: rgba(255,255,255,.9);
    }

/* Soft branded hero wash on Cloud */
.ip-hero {
    background: radial-gradient(60rem 30rem at 80% -10%, color-mix(in srgb, var(--ip-blue) 12%, transparent), transparent 70%), var(--ip-cloud);
    border-bottom: 1px solid var(--ip-mist);
}

/* Card surface with hover lift */
.ip-card {
    background: var(--ip-white);
    border: 1px solid var(--ip-mist);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--ip-shadow-sm);
    transition: transform .35s var(--ip-ease), box-shadow .35s var(--ip-ease);
}

    .ip-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ip-shadow-md);
    }

/* Service-card icon tile (gradient mono background, illustration on top) */
.ip-card-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Kicker / eyebrow — uppercase, wide-tracked, Signal Blue */
.ip-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ip-blue);
}

/* The 4px gradient rule used as a heading underline */
.ip-rule {
    height: 4px;
    width: 64px;
    background: var(--ip-gradient);
    border-radius: 4px;
}

/* Section rhythm */
.ip-section {
    padding-top: var(--ip-s-6);
    padding-bottom: var(--ip-s-6);
}

.ip-section-sm {
    padding-top: var(--ip-s-5);
    padding-bottom: var(--ip-s-5);
}

/* Lead-on-gradient stays readable */
.ip-gradient .lead {
    color: rgba(255,255,255,.92);
    max-width: 60ch;
}

/* Focus ring on interactive elements */
.btn:focus-visible,
.ip-card a:focus-visible,
a.nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ip-blue) 40%, transparent);
}

/* ---------- Layer 4: reduced-motion (required, also makes screenshots deterministic) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}