/* ============================================================================
 * CiteLinks marketing chrome — promo bar + nav + footer skin & layout.
 * ----------------------------------------------------------------------------
 * PROVENANCE: folded 2026-07-21 out of the inline <style id="cae-skin"> block
 * that used to live in template-parts/cae-nav.php. Moving it here makes it a
 * single cached source instead of an 8KB blob re-shipped inline on every
 * marketing pageview. Loaded by header-static.php (get_header('static')).
 *
 * 2026-07-21 later: mobile breakpoint folded 880 -> 768 per Joe's global
 * ruling (768-and-below mobile, 769-and-up desktop, canonical everywhere).
 *
 * 2026-07-21 (landing strip): CHROME LAYOUT COMPLETED. The landing-rebuild
 * page's scoped block was quietly carrying three pieces of chrome LAYOUT this
 * file's own header already claimed: brand/nav type sizes, the hamburger
 * open-state animation, and the entire footer layout (.foot-grid columns,
 * column type, .foot-bottom flex). Graduated here so the scoped-block strip
 * (step-3 proof) leaves the chrome whole on every static-chrome page.
 *
 * The MOBILE rules keep !important on purpose — they are viewport-visibility
 * utilities (the sanctioned exception to the no-!important doctrine). A page's
 * own scoped design <style> (body.cae-landing .cae ...) is specificity 0-3-1
 * and would otherwise beat a plain 0-2-0 display rule, breaking the phone nav.
 * FLAGGED for Joe: the .wrap sizing !important in the mobile block is LAYOUT,
 * not visibility — outside the sanctioned exception; works, awaiting ruling.
 * ========================================================================== */
:root{--teal:#7c3aed;--tealb:#14c7e6;--panel:#eef8fd;--line:rgba(27,21,51,.1);--iml-ink:#1b1533;--iml-mut:#16495f;--iml-soft:#726d8c;--iml-grad:linear-gradient(100deg,#7c3aed 0%,#14c7e6 100%);--iml-shadow:rgba(9,58,84,.4)}
/* Promo bar: violet-to-teal gradient */
.cae .promo{background:var(--iml-grad);color:#fff;font-weight:600}
.cae .promo .tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff}
.cae .promo .mini{background:#fff;color:#7c3aed}
/* Nav band: white on every page */
.cae .sitehead{background:#fff;color:var(--iml-ink);box-shadow:0 10px 30px -18px var(--iml-shadow);position:relative;z-index:5}
.cae .brand{color:var(--iml-ink)}
.cae .brand b{background:var(--iml-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cae .nav-links{color:var(--iml-soft);font-weight:600}
.cae .nav-links a:hover{color:var(--iml-ink)}
.cae .nav-login{color:var(--iml-soft);font-weight:600}
.cae .nav-login:hover{color:var(--iml-ink)}
.cae .fcs-menu-toggle-bar{background:var(--iml-ink)}
/* Buttons: gradient primary everywhere .btn-teal is used */
.cae .btn-teal{background:var(--iml-grad);color:#fff;box-shadow:0 12px 28px -12px rgba(124,58,237,.6);border:1px solid transparent}
.cae .btn-teal:hover{filter:brightness(1.06)}
.cae .btn-ghost{background:#fff;color:var(--iml-ink);border:2px solid rgba(27,21,51,.14)}
.cae .btn-ghost:hover{border-color:#7c3aed;color:#7c3aed}
/* Footer: ink band with gradient wordmark */
.cae footer{background:var(--iml-ink);color:#b9b3d1;border-top:none}
.cae .foot-brand .brand{color:#fff}
.cae .foot-brand .brand b{background:var(--iml-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cae .foot-brand p{color:#b9b3d1}
.cae .foot-col h4{color:#8d86ab}
.cae .foot-col a{color:#b9b3d1}
.cae .foot-col a:hover{color:#fff}
.cae .foot-bottom{color:#8d86ab;border-top:1px solid rgba(255,255,255,.12)}
/* Mobile menu: white sheet, ink links (color-only; layout stays per-template) */
.cae #fcs-primary-nav{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 40px -24px var(--iml-shadow)}
.cae #fcs-primary-nav li{border-bottom:1px solid var(--line)}
.cae #fcs-primary-nav a{color:var(--iml-mut);font-weight:600}
.cae #fcs-primary-nav a:hover{color:var(--iml-ink);background:rgba(98,193,234,.12)}
/* ==== NAV LAYOUT ============================================================
 * Chrome layout for every page that renders this chrome. Mobile display rules
 * carry !important deliberately (viewport-visibility utility — see header). */
.cae nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0}
.cae .brand{font-size:21px;font-weight:800;letter-spacing:-.02em}
.cae .nav-links{display:flex;align-items:center;gap:28px;list-style:none;font-size:14.5px}
.cae .nav-right{display:flex;gap:18px;align-items:center}
.cae .nav-login{font-size:14.5px}
.cae .fcs-menu-toggle{display:none;background:transparent;border:0;padding:10px;cursor:pointer;width:44px;height:44px}
.cae .fcs-menu-toggle-bar{display:block;width:24px;height:3px;margin:5px auto;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.cae .fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.cae .fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(2){opacity:0}
.cae .fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.cae #fcs-primary-nav{display:none}
.cae #fcs-primary-nav ul{list-style:none;margin:0;padding:0}
.cae .promo{font-size:14px;text-align:center;padding:11px 20px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.cae .promo .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:3px 10px;border-radius:999px;font-weight:700}
.cae .promo .mini{padding:7px 16px;border-radius:999px;font-weight:700;font-size:13px}
/* ==== FOOTER LAYOUT =========================================================
 * Graduated 2026-07-21 from the landing-rebuild scoped block (values verbatim).
 * Skin (colors) lives above; this is geometry + type only. */
.cae footer{padding:56px 0 40px}
.cae .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.cae .foot-brand .brand{margin-bottom:12px;font-size:19px;font-weight:800}
.cae .foot-brand p{font-size:14px;max-width:260px}
.cae .foot-col h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
.cae .foot-col a{display:block;font-size:14.5px;padding:5px 0}
.cae .foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:42px;padding-top:24px;font-size:13px;flex-wrap:wrap;gap:10px}
@media(max-width:768px){
.cae .wrap{max-width:100% !important;padding:0 18px !important}
.cae .nav-links,.cae .nav-right{display:none !important}
.cae .fcs-menu-toggle{display:block !important}
.cae #fcs-primary-nav{display:block !important;position:absolute;top:100%;left:0;right:0;max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:60}
.cae #fcs-primary-nav.is-open{max-height:80vh;overflow-y:auto}
.cae #fcs-primary-nav li{border-bottom:1px solid var(--line)}
.cae #fcs-primary-nav li:last-child{border-bottom:0}
.cae #fcs-primary-nav a{display:block;padding:.9rem 1.25rem;font-size:1.05rem}
.cae .foot-grid{grid-template-columns:1fr}
body.fcs-menu-open{overflow:hidden}
}