/*
 * public.css
 * ─────────────────────────────────────────────────────────────
 * Shared styles for all public-facing Headshot Queue pages.
 * Covers: CSS variables, reset, typography, header, footer,
 * page-hero, and responsive breakpoints.
 *
 * Page-specific styles (doc-wrap, pricing cards, sections etc.)
 * remain in each page's own <style> block.
 */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:         #1e2d40;
    --teal:         #0d9488;
    --teal-d:       #0a7c71;
    --teal-link:    #0a6b5e;
    --teal-on-dark: #14b8a6;
    --bg:           #f7f5f2;
    --white:        #ffffff;
    --border:       #e8e4df;
    --text:         #1c1917;
    --muted:        #595550;
    --muted-l:      #78716c;
    --radius:       10px;
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { text-decoration: none; }

/* ── Site header ── */
header.site-header {
    background: var(--navy);
    padding: 0 48px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-logo { font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.site-logo span { color: var(--teal-on-dark); }

.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a { font-size: .86rem; color: rgba(255,255,255,.80); transition: color .15s; }
.header-nav a:hover,
.header-nav a.active { color: #fff; }
.header-nav a.active { border-bottom: 2px solid var(--teal-on-dark); padding-bottom: 2px; }

.btn-login {
    padding: 7px 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    color: rgba(255,255,255,.8) !important;
    font-size: .86rem;
    transition: background .15s !important;
}
.btn-login:hover { background: rgba(255,255,255,.08) !important; }

.btn-cta {
    padding: 8px 18px;
    background: #0a7c71;
    border-radius: 8px;
    color: #fff !important;
    font-size: .86rem;
    font-weight: 500;
    transition: opacity .15s !important;
}
.btn-cta:hover { opacity: .88 !important; }

/* ── Page hero (used on legal, pricing, use-cases pages) ── */
.page-hero {
    background: var(--navy);
    padding: 56px 48px 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(13,148,136,.15) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 60px;
    background: var(--bg);
    clip-path: ellipse(56% 100% at 50% 100%);
}
.page-hero-label {
    display: inline-block;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--teal-on-dark);
    background: rgba(13,148,136,.12);
    border: 1px solid rgba(13,148,136,.25);
    padding: 4px 14px; border-radius: 20px;
    margin-bottom: 18px;
}
.page-hero h1 {
    font-size: 2.2rem; font-weight: 700;
    color: #fff; line-height: 1.2;
    letter-spacing: -.02em; margin-bottom: 12px;
}
.page-hero-sub { font-size: .92rem; color: rgba(255,255,255,.75); }

/* ── Footer ── */
footer {
    background: #111c29;
    padding: 32px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-logo { font-size: .96rem; font-weight: 700; color: rgba(255,255,255,.7); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: .78rem; color: rgba(255,255,255,.55); }
.footer-links a:hover { color: rgba(255,255,255,.80); }
.footer-copy { font-size: .74rem; color: rgba(255,255,255,.55); }
.footer-copy a { color: var(--teal-on-dark); text-decoration: underline; }
.footer-copy a:hover { opacity: .85; }

/* ── Responsive ── */
/* ── Hamburger button — hidden on desktop ── */
.pub-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    padding: 0;
    transition: background .12s;
    flex-shrink: 0;
}
.pub-hamburger:hover { background: rgba(255,255,255,.15); }

/* ── Mobile nav drawer — hidden by default, shown only on mobile ── */
.pub-mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 75vw;
    max-width: 300px;
    height: 100%;
    background: #141211;
    padding: 72px 0 32px;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    gap: 0;
}
.pub-mobile-nav.open { transform: translateX(0); display: flex; }
.pub-mobile-nav a {
    display: block;
    padding: 14px 28px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: color .12s, background .12s;
}
.pub-mobile-nav a:hover,
.pub-mobile-nav a.active { color: #fff; background: rgba(255,255,255,.06); }
.pub-mobile-nav a.active { color: var(--teal-on-dark, #2dd4bf); }
.pub-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 28px 0;
    margin-top: 8px;
}
.pub-mobile-actions .btn-login,
.pub-mobile-actions .btn-cta {
    display: block !important;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* ── Overlay behind mobile nav ── */
.pub-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 499;
}
.pub-nav-overlay.open { display: block; }

@media (max-width: 768px) {
    header.site-header { padding: 0 16px; }
    .header-nav .hide-mobile { display: none; }
    .pub-hamburger { display: flex; }

    .page-hero { padding: 48px 20px 64px; }
    .page-hero h1 { font-size: 1.7rem; }
    footer { padding: 24px 20px; flex-direction: column; align-items: center; text-align: center; }
    .footer-links { justify-content: center; }
}

/* pub-mobile-nav is display:none by default — no desktop override needed */
@media (min-width: 769px) {
    .pub-hamburger { display: none !important; }
}