/* ============================================================================
   Theme: paper-gold — warm paper pages, charcoal bands, gold accents, pill buttons. Light AND dark.

   Built from the Bobcat Bail Bonds sample design and meant for trust-first local services
   (bail bonds, law, insurance, home services). Light palette (Theme.Colors):
     Background #FAF7F0 paper     Surface #F0E9D8 (paler band)   Primary #C9962C gold
     Secondary  #1B1A17 charcoal  Accent  #8A5A0B deep gold      Text #16140F / muted #4A4435
   Dark palette (Theme.DarkColors) is emitted as html[data-scheme="dark"] variables; the header's Light / Dark / Auto
   button (Chrome.ThemeToggle) and the pre-paint script in App.razor pick which one is shown. Everything below styles
   through the --brand-* variables plus the few --pg-* tokens defined here, so a different palette still works and BOTH
   schemes stay readable. Headings use the condensed display face (Oswald) via Theme.Fonts; body is Inter.
   ========================================================================== */

:root {
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 8px 24px rgba(22, 20, 15, 0.12);
    --border-color: color-mix(in srgb, var(--brand-accent) 22%, #e7dec4);
    --section-pad: 4.5rem;

    /* Surfaces that sit ON the page: cards, form fields, the estimator */
    --pg-card: #ffffff;
    --pg-card-text: #16140f;
    --pg-card-muted: #4a4435;
    --pg-pale: color-mix(in srgb, var(--brand-primary) 26%, #fff);
    --pg-on-dark: color-mix(in srgb, #fff 68%, var(--brand-secondary));
}

html[data-scheme="dark"] {
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    --border-color: color-mix(in srgb, var(--brand-text) 16%, transparent);
    --pg-card: color-mix(in srgb, var(--brand-surface) 78%, #fff 6%);
    --pg-card-text: var(--brand-text);
    --pg-card-muted: var(--brand-text-muted);
    --pg-pale: color-mix(in srgb, var(--brand-primary) 24%, var(--brand-bg));
    --pg-on-dark: color-mix(in srgb, #fff 72%, var(--brand-secondary));
}

/* ---- Type ---- */
h1, h2, h3, h4 { text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.section-title { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.section-eyebrow { color: var(--brand-accent); font-weight: 700; letter-spacing: 0.1em; font-size: 0.8rem; }
.section-subtitle { color: var(--brand-text-muted); }
.hs-eyebrow { color: var(--brand-accent); }
.hs-dark .hs-eyebrow, .hs-hero .hs-eyebrow { color: var(--brand-primary); }
.hs-dark .section-eyebrow, .hs-dark .section-subtitle { color: var(--pg-on-dark); }
.phone-link, .hs-info a, .hs-form-note a, .post-body a { color: var(--brand-accent); }
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

/* ---- Buttons: pills with dark ink on gold ---- */
.btn {
    border-radius: 999px; font-weight: 700; padding: 0.8rem 1.6rem; border-width: 2px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn-sm { padding: 0.45rem 1rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--brand-primary-fill, var(--brand-primary)); color: var(--brand-text-on-primary); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--brand-text); border-color: var(--brand-primary); }
.btn-outline:hover { background: color-mix(in srgb, var(--brand-primary) 14%, transparent); color: var(--brand-text); border-color: var(--brand-primary); }

/* ---- Announcement bar + header ---- */
.announcement-bar {
    background: var(--brand-secondary); color: var(--pg-on-dark); font-size: 0.82rem; font-weight: 500;
    border-bottom: 0; letter-spacing: 0; padding: 0.45rem 0;
}
.announcement-split { padding-left: max(1.25rem, calc((100vw - 1160px) / 2 + 1.25rem)); padding-right: max(1.25rem, calc((100vw - 1160px) / 2 + 1.25rem)); }
.announcement-bar a { color: var(--brand-primary); font-weight: 700; }
.nav-cta { white-space: nowrap; }
.site-header { background: color-mix(in srgb, var(--brand-bg) 97%, transparent); border-bottom: 1px solid var(--border-color); }
.brand-text { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-text); }
/* A round badge: an emblem logo with its own dark square background (a typical upload) still looks designed on a light header. */
.brand-logo { height: 56px; width: 56px; max-width: none; border-radius: 50%; object-fit: cover; object-position: center; }
/* Image-only logo (Brand.LogoDisplay "image"): a wide lockup that already carries the wordmark keeps its own shape, never a round crop. */
.brand-logo.brand-logo-solo { height: 52px; width: auto; max-width: min(300px, 62vw); border-radius: 0; object-fit: contain; object-position: left center; }
.nav-link { font-weight: 600; font-size: 0.92rem; color: var(--brand-text); }
.nav-link:hover { color: var(--brand-accent); text-decoration: none; }
.nav-phone { color: var(--brand-text); }
.nav-phone:hover { color: var(--brand-accent); }
.theme-toggle { color: var(--brand-text); }

/* ---- Cards ---- */
.surface-card { background: var(--pg-card); color: var(--pg-card-text); border: 1px solid var(--border-color); box-shadow: var(--shadow); border-radius: var(--radius); }
.surface-card h3, .surface-card h4 { color: var(--pg-card-text); }
.section-alt { background: var(--brand-surface); }
/* Services.razor.css is scoped (an attribute selector), so these need the extra class to win at equal order. */
.svc-grid .svc-card { background: var(--pg-card); color: var(--pg-card-text); border-color: var(--border-color); box-shadow: var(--shadow); }
.svc-grid .svc-name { text-transform: uppercase; color: var(--pg-card-text); }
.svc-grid .svc-desc { color: var(--pg-card-muted); opacity: 1; }

/* ---- Hero: charcoal with a faint diagonal weave and a gold glow ---- */
.hs-hero {
    background:
        radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 60%),
        var(--brand-secondary);
    color: #f4eedc;
}
.hs-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px);
}
.hs-hero-lede { color: var(--pg-on-dark); }
.hs-hero-lede a, .hs-hero-lede .phone-link { color: var(--brand-primary); }
.hs-chip { color: #f4eedc; }

/* ---- Bands ---- */
.hs-dark { background: var(--brand-secondary); color: var(--pg-on-dark); }
html[data-scheme="dark"] .hs-dark { border-block: 1px solid var(--border-color); }
.hs-marquee-wrap { background: var(--brand-surface); }
.cta-band { background: var(--brand-primary-fill, var(--brand-primary)); color: var(--brand-text-on-primary); text-align: center; padding: 3.5rem 0; border: 0; }
.cta-band-title { color: var(--brand-text-on-primary); }
.cta-band-subtitle { color: var(--brand-text-on-primary); opacity: 0.85; font-size: 1.05rem; }
.hs-icon { background: var(--pg-pale); color: var(--brand-accent); }
.hs-service h3, .hs-option h3, .hs-member h4 { font-size: 1.05rem; }
.hs-area { background: var(--pg-card); color: var(--pg-card-text); }
.hs-finder-opt { background: var(--brand-bg); }
.hs-banner .btn-dark, .hs-cta .btn-dark { background: var(--brand-secondary); color: #fff; }

/* ---- Forms ---- */
.form-control, .hs-est-amount { border: 2px solid var(--border-color); border-radius: var(--radius-sm); background: var(--pg-card); color: var(--pg-card-text); }
.form-control:focus { border-color: var(--brand-primary); outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, transparent); outline-offset: 0; }
.form-field label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--brand-text-muted); }

/* ---- Blog ---- */
.post-card { border-radius: var(--radius); }
.post-card-body h3 { font-size: 1.05rem; text-transform: uppercase; }
.post-card-more { color: var(--brand-accent); }
.post-card-media { background: var(--brand-secondary); }
.post-card-body h3 a:hover { color: var(--brand-accent); }
.tag-chip.active { background: var(--brand-primary); color: var(--brand-text-on-primary); border-color: var(--brand-primary); }

/* ---- Footer: charcoal ---- */
.site-footer { background: var(--brand-secondary); color: var(--pg-on-dark); border-top: 0; }
.footer-col h4, .site-footer .brand-text { color: #fff; }
.footer-col a { color: var(--pg-on-dark); }
.footer-col a:hover { color: var(--brand-primary); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--pg-on-dark); }
.footer-bottom a { color: var(--pg-on-dark); }
.footer-tagline { opacity: 1; }
/* .footer-col a is display:block in app.css and outranks the base rule, so the flex row and its gap need the full chain. */
.site-footer .footer-col .footer-brand-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 1.1rem; margin: 0; text-align: left; }
.site-footer .footer-brand-link .brand-text { margin-left: 0.15rem; }
.site-footer .footer-brand-link .footer-brand-mark { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.site-footer .footer-phone { font-weight: 700; font-size: 1.05rem; color: #fff; }
.footer-hours-dot { background: #4ad07f; }

/* ---- Mobile nav panel ---- */
@media (max-width: 860px) {
    .site-nav { background: var(--brand-bg); }
    .site-nav .nav-phone { padding: 0.6rem 0; }
}