/* Sell & Tow 2026 look: highway guide-sign green, beacon amber, asphalt and concrete.
   Loaded LAST on every public page. Header + footer markup is shared (see any page). */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700;800&display=swap');

:root {
    --st-sign: #0b5d3b;        /* highway guide sign */
    --st-sign-deep: #074a2e;
    --st-amber: #f5b700;       /* tow beacon */
    --st-amber-deep: #dba300;
    --st-asphalt: #1e2427;
    --st-concrete: #eef0ed;
    --st-paper: #ffffff;
    --st-ink: #1e2427;
    --st-muted: #55605a;
    --st-line: #d4d9d4;
    --st-radius: 10px;
    --st-font: 'Overpass', 'Segoe UI', system-ui, sans-serif;
    /* old variables pointed at the new colors so older pages follow along */
    --primary-navy: var(--st-sign);
    --primary-navy-dark: var(--st-sign-deep);
    --accent-orange: var(--st-amber-deep);
    --accent-orange-hover: #c08f00;
    --text-dark: var(--st-ink);
    --text-muted: var(--st-muted);
    --bg-light: var(--st-concrete);
    --border-color: var(--st-line);
}

body {
    font-family: var(--st-font);
    color: var(--st-ink);
    background: var(--st-concrete);
    font-size: 17px;
    line-height: 1.6;
}
h1, h2, h3, h4, h5 { font-family: var(--st-font); letter-spacing: -0.01em; }
a { color: var(--st-sign); }

:focus-visible { outline: 3px solid var(--st-amber); outline-offset: 3px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
body .btn { font-family: var(--st-font); font-weight: 800; letter-spacing: 0; text-transform: none; border-radius: 8px; }
body .btn-primary, body .estimator-actions .btn-primary {
    background: var(--st-amber); color: var(--st-asphalt); border: 2px solid var(--st-amber);
    box-shadow: none;
}
body .btn-primary:hover { background: var(--st-amber-deep); border-color: var(--st-amber-deep); color: var(--st-asphalt); transform: none; }
body .btn-secondary, body .btn-outline {
    background: transparent; color: var(--st-sign); border: 2px solid var(--st-sign);
}
body .btn-secondary:hover, body .btn-outline:hover { background: var(--st-sign); color: #fff; }

/* ── Header (fixed, 108px tall like before so page offsets still line up) ── */
body .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
body .navbar { background: var(--st-paper); }
body .nav-container { margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
body .nav-menu { display: flex; list-style: none; align-items: center; margin: 0; padding: 0; }
body .nav-link { text-decoration: none; border-radius: 6px; white-space: nowrap; display: inline-block; }
body .nap-bar-inner { display: flex; align-items: center; }
body .hamburger { display: none; flex-direction: column; cursor: pointer; background: none; border: 0; }
body .bar { width: 24px; height: 3px; margin: 3px 0; border-radius: 2px; transition: .2s; }
body .user-dropdown { position: relative; display: inline-block; }
body .user-name { cursor: pointer; padding: 8px 12px; border-radius: 6px; }
body .dropdown-content { display: none; position: absolute; right: 0; top: 100%; min-width: 190px; background: #fff; border: 1px solid var(--st-line); border-radius: 8px; box-shadow: 0 12px 24px rgba(30,36,39,.12); z-index: 1001; }
body .dropdown-content a { display: block; padding: 11px 14px; color: var(--st-ink); text-decoration: none; }
body .dropdown-content a:hover { background: var(--st-concrete); }
body .user-dropdown:hover .dropdown-content, body .user-dropdown:focus-within .dropdown-content { display: block; }
body .back-to-top { background: var(--st-sign); box-shadow: none; }
body .header { background: var(--st-paper); box-shadow: 0 1px 0 var(--st-line); }
body .nap-bar { background: var(--st-sign-deep); color: #e3efe8; font-weight: 600; font-size: 14px; }
body .nap-bar-inner { justify-content: flex-end; max-width: 1200px; margin: 0 auto; height: 34px; padding: 0 20px; gap: 18px; }
body .nap-bar a { color: #fff; }
body .nap-bar .nap-sep { display: none; }
body .nav-container { height: 74px; max-width: 1200px; }
body .nav-logo a { text-decoration: none; display: flex; align-items: center; gap: 10px; }
body .nav-logo h2 { margin: 0; }
.st-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--st-ink); }
.st-logo-mark {
    width: 40px; height: 40px; border-radius: 8px; background: var(--st-sign);
    box-shadow: inset 0 0 0 2px var(--st-sign), inset 0 0 0 4px #fff;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -0.03em;
}
.st-logo-word { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.st-logo-word small { display: block; font-weight: 600; font-size: 12px; color: var(--st-muted); letter-spacing: 0; margin-top: 3px; }
body .nav-menu { gap: 4px; }
body .nav-link { color: var(--st-ink); font-weight: 600; font-size: 15px; padding: 8px 11px; }
body .nav-link:hover, body .nav-link.active { color: var(--st-sign); background: var(--st-concrete); }
body .nav-menu .nav-link.btn-primary { padding: 9px 16px; font-size: 15px; color: var(--st-asphalt); background: var(--st-amber); }
body .login-btn { background: none; color: var(--st-ink) !important; }
body .register-btn { background: none; color: var(--st-sign) !important; border: 2px solid var(--st-line); }
body .bar { background: var(--st-ink); }
body .user-name { font-weight: 700; }
@media (max-width: 1100px) {
    body .nav-link { padding: 8px 7px; font-size: 14px; }
    .st-logo-word small { display: none; }
}
@media (max-width: 900px) {
    body .hamburger { display: flex; padding: 10px; }
    body .nav-menu {
        position: fixed; left: -100%; top: 108px; flex-direction: column; align-items: stretch;
        background: var(--st-paper); width: 100%; padding: 12px 20px 24px; gap: 2px;
        box-shadow: 0 12px 24px rgba(30, 36, 39, .12); transition: left .25s ease; text-align: left;
        max-height: calc(100vh - 108px); overflow-y: auto;
    }
    body .nav-menu.active { left: 0; }
    body .nav-menu li { margin: 0; }
    body .nav-link { display: block; padding: 12px 10px; font-size: 17px; }
    body .nav-menu .nav-link.btn-primary { text-align: center; margin-top: 8px; }
}
@media (max-width: 640px) {
    body .nap-bar-inner { justify-content: center; }
    body .nap-hide-sm { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.st-footer { background: var(--st-asphalt); color: #c9d0cc; padding: 56px 0 28px; font-size: 15px; }
.st-footer a { color: #fff; text-decoration: none; }
.st-footer a:hover { text-decoration: underline; }
.st-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.st-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.st-footer h3 { color: #fff; font-size: 16px; margin: 0 0 12px; }
.st-footer ul { list-style: none; margin: 0; padding: 0; }
.st-footer li { margin: 0 0 8px; }
.st-footer .st-logo { color: #fff; margin-bottom: 14px; }
.st-footer .st-logo-word small { color: #9aa59f; display: block; }
.st-footer-bottom { border-top: 1px solid #343c40; margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #9aa59f; font-size: 14px; }
@media (max-width: 800px) { .st-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .st-footer-grid { grid-template-columns: 1fr; } }

/* Old page banners: one look everywhere (guide-sign green, white type) */
body .hero-banner, body .page-header, body .about-hero, body .services-header, body .provider-header,
body .browse-header, body .services-hero, body .browse-hero, body section.quote-estimator, body .location-hero {
    background: var(--st-sign) !important; color: #fff;
}
body .page-header h1, body .about-hero h1, body .services-header h1, body .provider-header h1, body .browse-header h1,
body .hero-banner h1, body .location-hero h1, body section.quote-estimator h2 { color: #fff !important; -webkit-text-fill-color: #fff; background: none; }
body .page-header p, body .about-hero p, body .services-header p, body .provider-header p, body .browse-header p { color: #d9eae0 !important; }
body .page-header, body .location-hero { margin-top: 108px; }
body .auth-section { background: var(--st-concrete) !important; }
body .form-group input:invalid { border-color: var(--st-line); box-shadow: none; }
body .form-group input:focus { border-color: var(--st-sign); }
body .location-section h2, body .location-card h2, body .location-card h3 { color: var(--st-ink); }
body section.quote-estimator .estimator-shell { background: rgba(255,255,255,.06); border: 3px solid #fff; border-radius: 10px; }
body .estimator-progress span.is-done, body .estimator-progress span.is-current { background: var(--st-amber); }
body .estimator-step-label { color: var(--st-amber); text-transform: none; letter-spacing: 0; }

/* Sample (not real) listings */
.sample-banner { background: #fff7d6; border: 2px solid var(--st-amber); color: var(--st-ink); padding: 12px 16px; border-radius: 8px; margin: 12px 0 16px; }
.listing-card { position: relative; }
.sample-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--st-asphalt); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Quote page: the form + 300px sidebar grid overflowed sideways between 769px and ~1000px wide. */
.quote-form-section .container > * { min-width: 0; }
@media (max-width: 1024px) {
    .quote-form-section .container { grid-template-columns: 1fr; }
    .quote-info-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ═══ Steel & Safety Amber look (Oct 9, 2026) ═══════════════════════════════
   Charcoal steel, safety amber, hazard stripe, condensed heavy-duty headings.
   Overrides the green tokens above; to go back, restore _backup_before_steel_2026-10-09. */
:root {
    --st-sign: #2a3135;        /* steel panel */
    --st-sign-deep: #1c2023;   /* deep charcoal */
    --st-amber: #f5b400;       /* safety amber */
    --st-amber-deep: #dc9f00;
    --st-asphalt: #1c2023;
    --st-concrete: #eef0f1;
    --st-ink: #1c2023;
    --st-muted: #4f585e;
    --st-line: #d3d8db;
    --st-font: 'Barlow', 'Segoe UI', system-ui, sans-serif;
    --st-head: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
    --st-hazard: repeating-linear-gradient(135deg, #f5b400 0 14px, #1c2023 14px 28px);
    --accent-orange-hover: #c48d00;
}
h1, h2, h3, h4, h5 { font-family: var(--st-head); letter-spacing: .01em; }
h1, h2 { text-transform: uppercase; font-weight: 800; }
a { color: var(--st-ink); text-decoration-color: var(--st-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Buttons: squared, condensed, uppercase */
body .btn { font-family: var(--st-head); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; }
body .btn-secondary, body .btn-outline { color: var(--st-ink); border-color: var(--st-ink); }
body .btn-secondary:hover, body .btn-outline:hover { background: var(--st-ink); color: var(--st-amber); }

/* Header: dark steel with a hazard stripe under the top bar (heights unchanged) */
body .header, body .navbar { background: var(--st-sign-deep); box-shadow: 0 1px 0 #343b40; }
body .nap-bar { background-color: #15181a; background-image: var(--st-hazard); background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; color: #c3c9cd; }
body .nap-bar a { color: var(--st-amber); }
.st-logo { color: #eef0f1; }
.st-logo-mark { background: var(--st-amber); color: var(--st-sign-deep); box-shadow: none; border-radius: 4px; font-family: var(--st-head); font-size: 17px; }
.st-logo-word { font-family: var(--st-head); text-transform: uppercase; letter-spacing: .03em; font-size: 25px; }
.st-logo-word small { color: #a9b1b6; font-family: var(--st-font); text-transform: none; letter-spacing: 0; }
body .nav-link { color: #eef0f1; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; }
body .nav-link:hover, body .nav-link.active { color: var(--st-amber); background: #262c30; }
body .nav-menu .nav-link.btn-primary { color: var(--st-sign-deep); background: var(--st-amber); border-radius: 4px; }
body .login-btn { color: #eef0f1 !important; }
body .register-btn { color: var(--st-amber) !important; border-color: #4a5257; }
body .bar { background: #eef0f1; }
body .user-name { color: #eef0f1; }
@media (max-width: 900px) {
    body .nav-menu { background: var(--st-sign-deep); }
}

/* Footer */
.st-footer { background: #15181a; border-top: 6px solid var(--st-amber); }
.st-footer h3 { font-family: var(--st-head); text-transform: uppercase; letter-spacing: .05em; color: var(--st-amber); }
.st-footer .st-logo-word small, .st-footer-bottom { color: #9aa3a8; }

/* Page banners: steel with an amber hazard edge */
body .hero-banner, body .page-header, body .about-hero, body .services-header, body .provider-header,
body .browse-header, body .services-hero, body .browse-hero, body section.quote-estimator, body .location-hero {
    background: var(--st-sign) !important; border-bottom: 6px solid var(--st-amber);
}
body .page-header p, body .about-hero p, body .services-header p, body .provider-header p, body .browse-header p { color: #c3c9cd !important; }
body section.quote-estimator .estimator-shell { border: 1px solid #3a4247; border-top: 6px solid var(--st-amber); border-radius: 6px; }
body .form-group input:focus, body .form-group select:focus, body .form-group textarea:focus { border-color: var(--st-amber); box-shadow: 0 0 0 3px rgba(245,180,0,.3); }
.sample-badge { background: var(--st-amber); color: var(--st-sign-deep); }
body .info-card { border-top-color: var(--st-amber) !important; border-radius: 6px; }
body .h-sign .estimator-shell h2 { line-height: 1.05; }
.h-exit-list a { flex-wrap: wrap; }