/* ============================================================
   AutoPPC — shared site chrome (nav + footer)
   Single source of truth for the marketing/legal page header,
   mobile menu, and footer. Loaded by every page via
   <link rel="stylesheet" href="/styles/site.css">.
   Colour/type tokens (--paper, --ink, --blue, --mono …) stay
   defined in each page's inline :root; this file only consumes
   them, so it inherits each page's palette automatically.
   Page-specific styles remain inline in each page.
   ============================================================ */

/* ---------- wordmark / logo glyph (nav + footer) ---------- */
.logo{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:17px;letter-spacing:.14em}
.logo-glyph{width:22px;height:22px;background:var(--rule);position:relative;flex:none}
.logo-glyph::after{content:"";position:absolute;inset:0;background:var(--blue);clip-path:polygon(58% 14%,30% 56%,47% 56%,42% 88%,72% 46%,54% 46%)}

/* ---------- marketing nav (landing + comparison) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.scrolled{background:rgba(244,241,232,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--rule)}
.nav-in{display:flex;align-items:center;gap:40px;width:100%}
.nav-links{display:flex;gap:36px;margin-left:auto}
.nav-links a{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);padding:4px 0;background:linear-gradient(var(--blue),var(--blue)) left bottom / 0 1px no-repeat;transition:color .2s,background-size .3s var(--ease)}
.nav-links a:hover{color:var(--ink);background-size:100% 1px}
.nav-actions{display:flex;gap:20px;align-items:center}
.nav-signin{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--ink2)}
.nav-signin:hover{color:var(--blue)}
.burger{display:none;width:46px;height:46px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:27px}
html.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
html.menu-open .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
html.menu-open .nav{z-index:220}

/* ---------- mobile overlay menu ---------- */
.mmenu{position:fixed;inset:0;z-index:205;background:var(--paper);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:0 clamp(28px,9vw,90px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
html.menu-open .mmenu{opacity:1;visibility:visible}
html.menu-open{overflow:hidden}
.mmenu a{font-family:var(--serif);font-style:italic;font-size:clamp(2.3rem,9vw,3.6rem);line-height:1.2;color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .45s var(--ease),color .2s}
html.menu-open .mmenu a{opacity:1;transform:none}
.mmenu a:hover{color:var(--blue)}
.mmenu a:nth-child(2){transition-delay:.05s}.mmenu a:nth-child(3){transition-delay:.1s}.mmenu a:nth-child(4){transition-delay:.15s}
.mmenu .btn{margin-top:28px;opacity:0;transition:opacity .4s .2s}
html.menu-open .mmenu .btn{opacity:1}
.mmenu .btn+.btn{margin-top:12px}

/* ---------- minimal nav (document / legal pages) ---------- */
.lp-header{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:rgba(244,241,232,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.lp-header-in{display:flex;align-items:center;gap:24px;width:100%}
.lp-back{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);display:inline-flex;align-items:center;gap:9px;padding:6px 2px;transition:color .2s}
.lp-back .ar{transition:transform .25s var(--ease)}
.lp-back:hover{color:var(--blue)}
.lp-back:hover .ar{transform:translateX(-4px)}

/* ---------- dark zone (footer wrapper; also wraps page CTA) ---------- */
.dark-zone{background:var(--dk);color:var(--dktxt);border-top:1px solid var(--rule);position:relative;overflow:clip}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--dkline);padding:0 0 34px;position:relative}
.foot-mark{font-family:var(--serif);font-size:clamp(4.2rem,14vw,12.5rem);line-height:.94;color:transparent;-webkit-text-stroke:1px rgba(242,245,249,.28);text-align:center;padding:clamp(20px,3.6vw,42px) 0 clamp(14px,2vw,26px);border-bottom:1px solid var(--dkline);user-select:none}
.foot-mark em{font-style:italic;color:var(--grn);-webkit-text-stroke:0;text-shadow:0 0 30px rgba(0,230,138,.35)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:34px;padding:46px 0;margin-bottom:8px}
.foot-brand p{font-family:var(--mono);font-size:14px;letter-spacing:.03em;color:var(--dktxt3);margin-top:14px;max-width:28ch;line-height:1.7}
.footer .logo-glyph{background:var(--grn)}
.footer .logo-glyph::after{background:var(--dk)}
.foot-beta{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--orange);border:1px solid rgba(240,74,0,.5);padding:3px 8px;margin-left:12px;vertical-align:3px}
.foot-col h5{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dktxt3);margin-bottom:16px}
.foot-col ul{display:grid;gap:11px}
.foot-col a{font-size:15.5px;color:var(--dktxt2);transition:color .2s}
.foot-col a:hover{color:var(--grn)}
.foot-bottom{border-top:1px solid var(--dkline);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:14px;letter-spacing:.05em;color:var(--dktxt3)}

/* current page marked active in the footer (Compare + Legal columns) */
body[data-page="agency"]   .foot-col [data-foot="agency"],
body[data-page="perpetua"] .foot-col [data-foot="perpetua"],
body[data-page="quartile"] .foot-col [data-foot="quartile"],
body[data-page="adtomic"]  .foot-col [data-foot="adtomic"],
body[data-page="diy"]      .foot-col [data-foot="diy"],
body[data-page="terms"]    .foot-col [data-foot="terms"],
body[data-page="privacy"]  .foot-col [data-foot="privacy"]{color:var(--dktxt);font-weight:600;cursor:default;pointer-events:none}

/* ---------- chrome responsive ---------- */
@media (max-width:980px){
  /* .nav-actions .nav-code is specificity 0,0,2,0 so it beats the inline .btn
     display, which still lives in each page's stylesheet loaded after this one */
  .nav-links,.nav-actions .nav-code{display:none}
  .burger{display:block}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}