/* ============================================================
   site.css — shared design system for every NON-app page
   (about / advertise / parking / 404 / directory landing pages).
   ------------------------------------------------------------
   The single-page app (index.html) is styled by css/styles.css
   + Tailwind. This file gives every *other* page the same brand
   colours, typography, sticky header, and dark footer so the
   whole thing reads as one website. Link it right after the
   <meta> tags:  <link rel="stylesheet" href="css/site.css">
   (use ../css/site.css from the /directory/ folder).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --brand:#c2410f; --brand-dark:#9f2f0a; --brand-pale:#fff7ed;
    --ink:#0f172a; --muted:#64748b; --rule:#e2e8f0; --surface:#ffffff;
    --bg:#faf9f7; --radius:20px;
    --shadow:0 4px 32px rgba(0,0,0,.10); --shadow-lg:0 12px 56px rgba(0,0,0,.16);
    /* aliases so any older inline rules using --primary still resolve */
    --primary:#c2410f; --primary-dark:#9f2f0a;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; }
h1, h2, h3 { font-family:'Playfair Display', Georgia, serif; }
a { color:inherit; text-decoration:none; }

/* ── Shared sticky top bar ──────────────────────────────── */
.site-topbar {
    position:sticky; top:0; z-index:50;
    background:rgba(250,249,247,.92); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--rule);
    padding:13px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-brand {
    font-family:'Playfair Display', serif; font-size:18px; font-weight:700;
    letter-spacing:-.3px; color:var(--ink); white-space:nowrap;
}
.site-brand span { color:var(--brand); }
.site-nav { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.site-nav a { font-size:14px; font-weight:500; color:var(--muted); transition:color .2s; }
.site-nav a:hover, .site-nav a.active { color:var(--brand); }
@media (max-width:760px) {
    .site-topbar { padding:12px 16px; }
    .site-nav { display:none; }   /* on phones, keep just the brand */
    .site-back { display:inline-flex; }
}

/* ── Mobile back button (all standalone pages) ──────────── */
.site-back {
    display:none; /* shown only on mobile via media query above */
    align-items:center; gap:4px;
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    z-index:999;
    background:#fff; color:var(--brand); border:1.5px solid var(--rule);
    padding:10px 20px; border-radius:99px;
    font-size:14px; font-weight:600;
    box-shadow:0 4px 16px rgba(0,0,0,.12);
    text-decoration:none;
    transition:background .2s, transform .15s;
}
.site-back:hover { background:var(--brand-pale); }
.site-back:active { transform:translateX(-50%) scale(.96); }

/* ── Shared hero (brand gradient) ───────────────────────── */
.site-hero {
    background:linear-gradient(135deg, var(--brand) 0%, #7c1d06 100%);
    color:#fff; padding:68px 24px 76px; text-align:center;
    position:relative; overflow:hidden;
}
.site-hero h1 { font-size:clamp(34px,6vw,60px); font-weight:900; line-height:1.05; max-width:680px; margin:0 auto 16px; }
.site-hero p  { font-size:18px; opacity:.88; max-width:540px; margin:0 auto; line-height:1.6; font-weight:300; }
.site-eyebrow {
    display:inline-block; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
    padding:6px 18px; border-radius:99px; font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px;
}

/* ── Page container ─────────────────────────────────────── */
.site-page { max-width:1000px; margin:0 auto; padding:56px 24px 72px; }
.site-page-wide { max-width:1100px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    display:inline-block; padding:13px 28px; border-radius:99px;
    font-weight:600; font-size:15px; cursor:pointer; border:2px solid transparent;
    transition:background .2s, border-color .2s, color .2s, transform .15s; text-align:center;
}
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-outline { background:#fff; color:var(--ink); border-color:var(--rule); }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); }

/* ── Form fields (shared look with the app) ─────────────── */
.site-form input, .site-form textarea, .site-form select {
    width:100%; padding:12px 16px; border:1.5px solid var(--rule); border-radius:10px;
    font-size:15px; font-family:'Inter', sans-serif; color:var(--ink); background:#fff;
    outline:none; transition:border-color .2s, box-shadow .2s;
}
.site-form input:focus, .site-form textarea:focus, .site-form select:focus {
    border-color:var(--brand); box-shadow:0 0 0 3px rgba(194,65,15,.12);
}
.site-form label { font-size:13px; font-weight:600; color:var(--ink); }
.site-form textarea { resize:vertical; min-height:120px; }

/* ── Shared dark footer (matches the homepage footer) ───── */
.site-footer {
    background:#0f172a; color:#94a3b8;
    padding:40px 24px; text-align:center; font-size:14px;
}
.site-footer .links {
    display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:16px;
}
.site-footer a { color:#cbd5e1; transition:color .2s; }
.site-footer a:hover { color:#fff; }
.site-footer .copy { font-size:13px; color:#64748b; }