/* ═══════════════════════════════════════════════════════
   TETHER STUDIO — Site Normalize
   Author: John Sargent Barnard
   Date: 2026-04-05
   Fixes mobile header inconsistency across pages and adds
   the brutalist modern frame treatment site-wide.
   Loaded last so !important overrides win.
   ═══════════════════════════════════════════════════════ */

/* ── NAV COMPONENT FALLBACKS ──────────────────────────
   These rules are a safety net for pages (like /answers/*)
   that don't carry a full nav stylesheet of their own.
   No !important — existing pages with their own styles
   continue to win the cascade; this only fills gaps. */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 48px;
    /* background/backdrop-filter intentionally omitted so existing pages
       (e.g. index.html with its transparent→scrolled transition) keep
       their own treatment. Answer pages have a black body, so a
       transparent nav still reads correctly. */
}

/* Default nav-brand + nav-icon styles (in case a page's own
   stylesheet is missing them — answer pages had no .nav-icon) */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
}
.nav-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
}
.nav-brand .sub {
    font-weight: 300;
    color: #aaa;
    margin-left: -2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-links a {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }

.nav-trial {
    /* no special treatment — reads as a link */
}

.nav-cta {
    padding: 9px 22px;
    background: #ff3b3b;
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: all 0.15s;
}
.nav-cta:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Hamburger — hidden on desktop by default */
.nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.nav-hamburger:hover { border-color: rgba(255, 255, 255, 0.4); }

/* Mobile overlay — hidden by default, shown when .active */
.nav-mobile {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
.nav-mobile.active { display: flex; }
.nav-mobile a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}
.nav-mobile a:hover { color: #ff3b3b; }
.nav-mobile .mobile-cta {
    margin-top: 16px;
    padding: 16px 40px;
    background: #ff3b3b;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.nav-mobile-close {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: none;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}
.nav-mobile-close:hover {
    border-color: #ff3b3b;
    color: #ff3b3b;
}

body:has(.nav-mobile.active) .nav-hamburger { display: none !important; }

/* ── MOBILE HEADER NORMALIZE ──────────────────────────
   Forces every page to match index.html's mobile nav
   footprint. Some pages use 768px or 600px breakpoints
   with desktop padding still applied — this corrects it. */

@media (max-width: 640px) {
    .nav {
        padding: 14px 20px !important;
    }
    .nav.scrolled {
        padding: 12px 20px !important;
    }
    .nav-links {
        display: none !important;
    }
    /* Some legacy pages show nav-links via .active class — keep hidden,
       new .nav-mobile overlay is what opens on hamburger tap */
    .nav-links.active {
        display: none !important;
    }
    .nav-hamburger {
        display: flex !important;
    }
    /* Brand stays crisp, no shrinkage on small viewports */
    .nav-brand {
        font-size: 15px !important;
        letter-spacing: 0.08em !important;
    }
    .nav-icon {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ── HAMBURGER / CLOSE-X ALIGNMENT ────────────────────
   Both buttons must sit at identical coordinates so
   there is zero movement when toggling the menu.
   Hamburger lives inside .nav with padding 14px 20px,
   so its visual top is 14px. The close X was at top:20px
   (absolute on .nav-mobile) — 6px lower, causing a jump.
   Force both to matching box/position/border. */

.nav-hamburger {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: none !important;
    color: #fff !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

.nav-mobile-close {
    position: fixed !important;
    top: 14px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: none !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer;
    z-index: 1001;
}

/* Desktop: match hamburger to nav's desktop padding so it sits
   at the same spot there too (if it ever shows) */
@media (min-width: 641px) {
    .nav-mobile-close {
        top: 18px !important;
        right: 48px !important;
    }
}

/* ── BRUTALIST FRAME ──────────────────────────────────
   A single hairline inset border that frames the
   viewport. Breaks the flat black void without
   competing with content. pointer-events:none keeps
   it purely decorative. Sits below fixed nav (z:1000)
   so it never overlays UI chrome. */

body::after {
    content: '';
    position: fixed;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 640px) {
    body::after {
        inset: 8px;
    }
}

/* Print: hide the frame */
@media print {
    body::after { display: none; }
}

/* ── FOOTER COMPONENT FALLBACKS ───────────────────────
   Unified footer shape. Pages that already have their
   own .footer rules (index, cameras, buy, blog) keep
   them via the cascade; these fill gaps for pages that
   don't (terms, privacy, vs/, answers/). */

.footer {
    position: relative;
    z-index: 2;
    padding: 32px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    flex-wrap: wrap;
    gap: 16px;
    font-family: 'Space Mono', monospace;
}
.footer-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
}
.footer-brand .sub {
    font-weight: 300;
    color: #aaa;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.footer-links a {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: #fff; }
.footer-copy {
    font-size: 10px;
    color: #555;
    letter-spacing: 0.06em;
}
@media (max-width: 640px) {
    .footer {
        flex-direction: column;
        text-align: center;
        padding: 32px 20px;
        gap: 20px;
    }
    .footer-links { justify-content: center; }
}

/* Answer-page-specific aesthetic (.tldr, .cta, .cta-title, .cta-sub,
   .cta-btn, .crumbs) is handled in each answer page's own inline
   <style> block. Originally overridden here but that broke vs/ pages
   and blog posts which use .cta and .cta-sub for their own CTAs with
   already-correct brutalist styling. */