/* ── Shared: nav brand lockup ── */
/* Lives in shared.css so every page (index, pricing, privacy, terms, 404)
   gets the same nav-logo light/dark swap. main.css is index-only; adding
   this here was the missing piece that made sub-pages render BOTH variants
   side-by-side. */
.nav-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}
.nav-logo {
    height: 28px;
    width: auto;
    display: block;
}
.nav-logo--light { display: block; }
.nav-logo--dark  { display: none; }
html[data-theme="dark"] .nav-logo--light { display: none; }
html[data-theme="dark"] .nav-logo--dark  { display: block; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .nav-logo--light { display: none; }
    html:not([data-theme="light"]) .nav-logo--dark  { display: block; }
}

/* ── Shared: pre-launch dev ribbon ── */
/* Sits above the nav on every page. Fixed at viewport top with z-index above
   nav so it stays visible regardless of nav positioning (index uses fixed
   nav, pricing uses sticky). Body padding-top reserves the 40px so flow
   content doesn't render under it on first paint. Each page's nav sets
   `top: var(--ribbon-h)` so they sit directly under the ribbon. */
:root { --ribbon-h: 40px; }
.dev-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10005;
    height: var(--ribbon-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    background: rgba(17, 16, 9, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(200, 146, 42, 0.28);
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
html[data-theme="light"] .dev-ribbon { background: rgba(250, 248, 243, 0.85); }
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .dev-ribbon { background: rgba(250, 248, 243, 0.85); }
}
.dev-ribbon a {
    color: var(--accent);
    text-decoration: none;
    margin-left: 0.5rem;
    font-weight: 500;
}
.dev-ribbon a:hover { text-decoration: underline; }
body { padding-top: var(--ribbon-h); }

/* ── Shared: skip-to-main-content link (WCAG 2.1 bypass blocks) ── */
/* Visually hidden until focused. A keyboard user tabbing into the page
   gets this as their first stop and can jump past the nav in one press. */
.skip-link {
    position: absolute;
    top: 0; left: 0;
    padding: .75rem 1rem;
    background: var(--accent);
    color: var(--bg);
    font-family: 'Jost', sans-serif;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    z-index: 10100;
    transform: translateY(-120%);
    transition: transform .15s ease-out;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--bg); outline-offset: -4px; }

/* ── Shared: footer (unified across all pages) ── */
footer {
    padding: 2.5rem 4rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.footer-logo-img {
    height: 32px;
    width: auto;
}
.footer-logo-img--light { display: block; }
.footer-logo-img--dark  { display: none; }
html[data-theme="dark"] .footer-logo-img--light { display: none; }
html[data-theme="dark"] .footer-logo-img--dark  { display: block; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .footer-logo-img--light { display: none; }
    html:not([data-theme="light"]) .footer-logo-img--dark  { display: block; }
}
.footer-copy { font-size: 0.75rem; color: var(--text-muted); }
.footer-links {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent); }
/* Adds a fixed gap between the last text nav link and the first social
   icon, separating them visually. (Tried `margin-left: auto` — doesn't
   work here because .footer-links is content-sized inside the parent
   footer's space-between layout, so there's no extra horizontal space
   for `auto` to absorb.)
   Selector targets an <a class="social-link"> that's preceded by a
   non-social <a> — i.e., the first social link in the sequence. */
.footer-links a:not(.social-link) + a.social-link { margin-left: 1.5rem; }
.footer-links a.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.footer-links a.social-link svg {
    width: 16px;
    height: 16px;
    display: block;
}
@media (max-width: 700px) {
    footer { flex-direction: column; text-align: center; gap: 0.75rem; }
    .footer-links { justify-content: center; }
    .footer-links a:not(.social-link) + a.social-link { margin-left: 1.25rem; }
}

/* ── Shared: logo image swap for light/dark ── */
.ph-logo img,
.nav-logo img { height: 84px; display: block; }
.ph-logo .logo-light,
.nav-logo .logo-light { display: none; }
html[data-theme="light"] .ph-logo .logo-light,
html[data-theme="light"] .nav-logo .logo-light { display: block; }
html[data-theme="light"] .ph-logo .logo-dark,
html[data-theme="light"] .nav-logo .logo-dark { display: none; }
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .ph-logo .logo-light,
    html:not([data-theme="dark"]) .nav-logo .logo-light { display: block; }
    html:not([data-theme="dark"]) .ph-logo .logo-dark,
    html:not([data-theme="dark"]) .nav-logo .logo-dark  { display: none; }
}