/* =====================================================
   HeaderModern.css
   Shared base styles: body, focus, skip link,
   site header (courthouse), hero gradient, stat chips,
   page container.
   Linked by: details.aspx, Results.aspx, Disclaimer.aspx, AssessorParcelMap.aspx
   ===================================================== */

/* ===== PAGE BASE ===== */
html {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background: #f4f7fc !important;
    background-image: none !important;
    color: #1a2438;
    margin: 0;
    line-height: 1.5; /* WCAG 1.4.12 */
    /* Sticky footer: body fills the viewport height */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The <form> wraps site-header + hero + page-container + footer;
   make it a flex column so .page-container can grow */
body > form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ===== GLOBAL FOCUS STYLES (WCAG 2.4.7) ===== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1260cc;
    outline-offset: 3px;
    border-radius: 3px;
}

/* ===== SKIP LINK (WCAG 2.4.1) ===== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #1260cc;
    color: #fff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-link:focus { top: 0; }

/* =====================================================
   SITE HEADER  (courthouse background + logo + nav)
   ===================================================== */
.site-header {
    /* Courthouse photo fills the full header area */
    background: url('../Images/HeaderBackgroundCourthouse.jpg') center / cover no-repeat;
    position: relative;
}

/* Space below the bar so the background image is visible */
.site-header::after {
    content: '';
    display: block;
    height: 200px;
}

/* Top bar: opaque white strip spanning full width, not full height.
   Fixed height so the taller logo box overflows below without
   pushing the bar — and therefore the courthouse image — taller. */
.site-header-bar {
    display: flex;
    align-items: center;    /* nav links centred in the fixed-height bar */
    height: 74px;           /* fixed — only the nav strip height       */
    width: 100%;
    background: rgba(255, 255, 255, 0.97);
    position: relative;
    z-index: 2;
    overflow: visible;      /* let the logo box drop below the bar      */
}

/* Logo box: white background, ONLY the bottom-right corner rounded.
   align-self: flex-start so it starts at the top of the bar and
   naturally overflows downward into the courthouse image area.     */
.site-logo-box {
    align-self: flex-start;
    position: relative;
    z-index: 3;             /* above bar background and courthouse image */
    background: #ffffff;
    border-radius: 0 0 22px 0;
    padding: 14px 32px 14px 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.10);
}

.site-logo-img {
    height: 124px;          /* ~twice the original 62 px */
    width: auto;
    display: block;
}

/* Nav links area in the bar (to the right of the logo) */
.site-header-nav {
    display: flex;
    align-items: center;
    padding: 0 36px;
    flex: 1;
}

/* ── hero-nav-pills colour overrides for the white bar ── */
.site-header-nav .hero-nav-pills {
    margin: 0;
}

.site-header-nav .hero-nav-pills a {
    color: #0d1f47;
}

.site-header-nav .hero-nav-pills a:not(.pill-active):hover {
    color: #1260cc;
    text-decoration: underline;
}

.site-header-nav .hero-nav-pills li + li::before {
    color: rgba(13, 31, 71, 0.28);
}

.site-header-nav .hero-nav-pills .pill-active {
    color: #1260cc;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

/* =====================================================
   HERO GRADIENT  (blue band below site-header)
   ===================================================== */
.hero {
    background: linear-gradient(135deg, #0a3f94 0%, #1260cc 60%, #0d9989 100%);
    padding: 32px 48px 28px;
    position: relative;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.hero::before { width: 420px; height: 420px; top: -120px; right: 100px; }
.hero::after  { width: 220px; height: 220px; bottom: -60px; right: 280px; }

/* ===== HERO NAV LINKS ===== */
/* Default colours are for use on the dark hero gradient.
   When placed inside .site-header-nav (white bar) the overrides
   above apply instead.                                           */
.hero-nav-pills {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0 0 16px 0;
}

.hero-nav-pills li {
    display: flex;
    align-items: center;
}

/* Separator dot between items */
.hero-nav-pills li + li::before {
    content: '·';
    color: rgba(255,255,255,0.40);
    font-size: 16px;
    padding: 0 10px;
}

/* Base text style */
.hero-nav-pills a,
.hero-nav-pills .pill-active {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s;
}

/* Inactive link — WCAG 1.4.3: 0.92 opacity ≈ 6.3:1 on hero gradient ✓ */
.hero-nav-pills a {
    color: rgba(255,255,255,0.92);
}

.hero-nav-pills a:not(.pill-active):hover {
    color: #fff;
    text-decoration: underline;
}

/* Active / current section — full white, bold */
.hero-nav-pills .pill-active {
    color: #fff;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

/* ===== HERO TITLE ===== */
.hero h1 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px 0; /* default: chips follow directly */
    padding: 0;
}

/* ===== HERO ADDRESS ===== */
/* Used on details.aspx between the h1 and stat chips.
   DetailsModern.css overrides hero h1 margin to 6px
   so address sits tight below the title. */
.hero-address {
    font-size: 17px;
    color: rgba(255,255,255,0.92); /* WCAG 1.4.3: ~5.4:1 on gradient */
    margin: 0 0 20px 0;
}

/* ===== STAT CHIPS ===== */
.stat-chips {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.chip {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 10px;
    padding: 10px 18px;
    min-width: 150px;
}

.chip-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.92); /* WCAG 1.4.3: ~4.9:1 on gradient */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.chip-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.chip-value.green  { color: #6ee7b7; }
.chip-value.blue   { color: #93c5fd; }
.chip-value.teal   { color: #5eead4; }
.chip-value.orange { color: #fcd34d; }

/* ===== PAGE CONTAINER ===== */
.page-container {
    flex: 1;                /* grows to push footer to bottom */
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .site-header::after {
        height: 130px;
    }

    .site-header-nav {
        padding: 0 20px;
    }

    .hero {
        padding: 24px 20px;
    }

    .hero h1 {
        font-size: 24px;
    }

    .stat-chips {
        gap: 10px;
    }

    .chip {
        min-width: 130px;
        padding: 8px 14px;
    }

    .chip-value {
        font-size: 18px;
    }

    .page-container {
        padding: 16px 12px;
    }
}

/* ── Narrow screens: collapse chips into one unified summary card ──
   Kicks in at 700px — before chips begin wrapping to 3+1 or 2+2      */
@media (max-width: 700px) {
    /* Container becomes the single glass card */
    .stat-chips {
        flex-direction: column;
        gap: 0;
        width: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 10px;
        padding: 4px 0;
    }

    /* Each chip becomes one horizontal label → value row */
    .chip {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;           /* prevent flex blowout */
        width: 100%;
        box-sizing: border-box; /* padding stays inside the card */
        background: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,0.10);
        padding: 10px 16px;
    }

    .chip:last-child {
        border-bottom: none;
    }

    /* Label: left side, won't grow */
    .chip-label {
        margin-bottom: 0;
        font-size: 12px;
        flex: 0 0 auto;         /* fixed width — doesn't grow or shrink */
    }

    /* Value: right side, takes remaining space, right-aligned */
    .chip-value {
        font-size: 16px;
        flex: 1 1 auto;         /* fills leftover space */
        text-align: right;
        min-width: 0;           /* allows text to wrap if needed */
        overflow-wrap: break-word;
    }
}

/* ── Narrow: background image + logo disappear; only 3 nav links shown ── */
@media (max-width: 560px) {
    /* Strip the courthouse photo — plain white background only */
    .site-header {
        background: rgba(255, 255, 255, 0.97);
    }

    /* Remove the image-reveal space below the bar */
    .site-header::after {
        display: none;
    }

    /* Hide the logo to save space */
    .site-logo-box {
        display: none;
    }

    /* Show the 3 nav links in the now-plain bar */
    .site-header-nav {
        display: flex;
        padding: 0 16px;
    }

    .hero {
        padding: 20px 16px;
    }

    .hero h1 {
        font-size: 20px;
    }
}