/* ─────────────────────────────────────────────
   MySpace NYC — public.css
   Shared chrome for the PUBLIC-FACING pages
   (landing, search, building, apply, our-team,
   careers, list-with-us, login, signup).

   Load order on every public page:
     1. tokens.css   — design system (variables, fonts)
     2. public.css   — THIS file: shared nav/footer/buttons/cards/hero
     3. pages/<name>.css — page-specific leftovers only

   Built entirely on the EDITORIAL token set (Cormorant
   Garamond + Montserrat, cream, muted gold #a08830).
   The legacy navy/Poppins look is being retired from the
   public surface — do not reintroduce it here.

   Migration in progress (2026-06): shared chrome is being
   lifted out of each page's inline <style> into this file,
   one page at a time. Until a page is migrated its rules
   still live in pages/<name>.css; once common patterns
   repeat across pages they graduate up to here.
   ───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   Canonical site footer  —  <footer class="site-footer"> … </footer>
   ───────────────────────────────────────────────────────────
   The shared editorial footer, lifted from the careers page (the
   proven model). NEW class name (.site-footer) so adopting it is
   opt-in and collides with nothing today. Pages migrate their
   bespoke footers onto this markup in a follow-up pass:

     <footer class="site-footer">
       <div class="sf-inner">
         <div>
           <div class="sf-brand"><span class="sf-seal"></span>
             <span class="sf-wm">MYSPACE <span>NYC</span></span></div>
           <p class="sf-blurb">…</p>
           <div class="sf-contact"><a href="mailto:…">…</a></div>
         </div>
         <div class="sf-col"><h4>Rent</h4><a href="/search">…</a></div>
         …
       </div>
       <div class="sf-base"><span>© MySpace NYC</span><span>…</span></div>
     </footer>
   ═══════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--ed-ink, #1a1a1a);
    color: var(--ed-cream-dark, #c8b896);
    padding: 52px 32px 30px;
}
.site-footer .sf-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer .sf-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.site-footer .sf-seal {
    display: inline-block;
    width: 34px;
    height: 34px;
    background-color: var(--ed-gold, #a08830);
    -webkit-mask: url(/img/brand/MySpaceNYC-Logo-forest-512px.png) center / contain no-repeat;
    mask: url(/img/brand/MySpaceNYC-Logo-forest-512px.png) center / contain no-repeat;
}
.site-footer .sf-wm {
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-bg, #f5f0e8);
    font-weight: 600;
}
.site-footer .sf-wm span {
    color: var(--ed-gold, #a08830);
    letter-spacing: 0.16em;
}
.site-footer .sf-blurb {
    font-size: 0.78rem;
    color: var(--ed-cream-dark, #c8b896);
    line-height: 1.7;
    font-weight: 300;
    max-width: 280px;
    margin: 0;
}
.site-footer .sf-contact {
    font-size: 0.72rem;
    color: var(--ed-cream-dark, #c8b896);
    margin-top: 18px;
    line-height: 1.8;
}
.site-footer .sf-contact a {
    display: block;
    color: var(--ed-gold, #a08830);
}
.site-footer .sf-col h4 {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ed-gold, #a08830);
    font-weight: 600;
    margin: 0 0 14px;
}
.site-footer .sf-col a {
    display: block;
    font-size: 0.78rem;
    color: var(--ed-cream-dark, #c8b896);
    padding: 5px 0;
    font-weight: 300;
}
.site-footer .sf-col a:hover {
    color: var(--ed-gold, #a08830);
}
.site-footer .sf-base {
    max-width: 1500px;
    margin: 36px auto 0;
    padding-top: 22px;
    border-top: 0.5px solid rgba(232, 220, 192, 0.18);
    display: flex;
    justify-content: space-between;
    font-size: 0.64rem;
    color: var(--ed-cream-dark, #c8b896);
    letter-spacing: 0.1em;
}
@media (max-width: 960px) {
    .site-footer .sf-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}
@media (max-width: 760px) {
    .site-footer {
        padding: 36px 18px 20px;
    }
    .site-footer .sf-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .site-footer .sf-base {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   Canonical site nav  —  <nav class="site-nav"> … </nav>
   ───────────────────────────────────────────────────────────
   The shared editorial marketing nav, modelled on list-with-us
   (the most complete: brand + active links + optional CTA +
   mobile toggle). NEW class names (.site-nav/.sn-*), token vars
   carry hex fallbacks so it renders with OR without tokens.css.
   Mobile menu is self-contained (no external JS) — the toggle
   button flips .nav-open on the <nav>:

     <nav class="site-nav">
       <a href="/" class="sn-brand">
         <span class="sn-seal" aria-hidden="true"></span>
         <span class="sn-wm">MYSPACE <span>NYC</span></span></a>
       <button class="sn-toggle" aria-label="Menu"
         onclick="this.closest('.site-nav').classList.toggle('nav-open')">&#9776;</button>
       <div class="sn-links">
         <a href="/search" class="active">Browse</a> … </div>
       <div class="sn-cta">            (optional)
         <a href="/login" class="sn-signin">Sign in</a>
         <a href="#x" class="sn-btn">Get a rent comp &rarr;</a></div>
     </nav>

   Note: the auth-aware app topbars on /search + /building are a
   separate component (JS-hydrated login chip) — not this one.
   ═══════════════════════════════════════════════════════════ */
.site-nav {
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--ed-border, rgba(0, 0, 0, 0.1));
    background: var(--ed-bg, #f5f0e8);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-nav .sn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ed-ink, #1a1a1a);
    text-decoration: none;
}
.site-nav .sn-seal {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: var(--ed-gold, #a08830);
    -webkit-mask: url(/img/brand/MySpaceNYC-Logo-forest-512px.png) center / contain no-repeat;
    mask: url(/img/brand/MySpaceNYC-Logo-forest-512px.png) center / contain no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    flex: 0 0 auto;
}
.site-nav .sn-wm span {
    color: var(--ed-gold-deep, #8a7628);
    font-weight: 500;
    letter-spacing: 0.18em;
}
.site-nav .sn-links {
    display: flex;
    gap: 30px;
    font-size: 0.78rem;
}
.site-nav .sn-links a {
    color: var(--ed-ink, #1a1a1a);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}
.site-nav .sn-links a:hover {
    border-bottom-color: var(--ed-gold, #a08830);
}
.site-nav .sn-links a.active {
    font-weight: 600;
    border-bottom-color: var(--ed-gold, #a08830);
}
.site-nav .sn-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}
.site-nav .sn-signin {
    font-size: 0.76rem;
    color: var(--ed-muted-2, #888888);
    text-decoration: none;
}
.site-nav .sn-btn {
    display: inline-block;
    padding: 10px 18px;
    background: var(--ed-ink, #1a1a1a);
    color: var(--ed-bg, #f5f0e8);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}
.site-nav .sn-btn:hover {
    background: #000;
}
.site-nav .sn-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ed-ink, #1a1a1a);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}
/* 920px: the busiest marketing nav (list-with-us — 5 links + CTA) needs the
   hamburger before its links crowd. Lighter navs get it a touch early, harmless. */
@media (max-width: 920px) {
    .site-nav .sn-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--ed-bg, #f5f0e8);
        border-bottom: 0.5px solid var(--ed-border, rgba(0, 0, 0, 0.1));
        padding: 0 32px 12px;
        z-index: 50;
    }
    .site-nav.nav-open .sn-links {
        display: flex;
    }
    .site-nav .sn-links a {
        padding: 12px 0;
        border-bottom: 0.5px solid var(--ed-border-soft, rgba(0, 0, 0, 0.04));
    }
    .site-nav .sn-toggle {
        display: block;
    }
    .site-nav .sn-cta .sn-signin {
        display: none;
    }
}