/* chq-shell.css — the CatenaHQ nav and footer, and nothing else.
   ────────────────────────────────────────────────────────────────────────────
   5 September 2026.

   WHY THIS EXISTS AND IS NOT JUST catenahq-site.css

   Eighteen pages were built on the old site template — the four free tools, the
   eight Raise Playbook modules, the five ECF pages, and Raise Room. They each
   carry their own layout, in their own <style> block or in chq-tools.css, and
   they work.

   catenahq-site.css opens with `*{margin:0;padding:0;box-sizing:border-box}`
   and sets `section{padding:64px 2rem}`, `body{...}`, `img{max-width:100%}`.
   Dropping that onto eighteen pages that already have their own layout would
   rearrange every one of them, and I would be fixing the fallout for a week.

   So this file carries the nav and footer rules only, copied from
   catenahq-site.css so the chrome is pixel-identical, with every global
   selector removed and every reset scoped inside .chq-nav / .chq-footer. It
   cannot touch a page body. Add it to a page and the only thing that changes
   is the bar at the top and the bar at the bottom.

   The tokens below are declared on :root, which only ever ADDS variables — it
   cannot restyle anything that does not ask for them by name.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
--purple:#401588;--purple-dark:#2D1058;--purple-light:#6B3FA0;
--white:#FFFFFF;--gray-100:#F5F5F5;--gray-200:#EEEEEE;--gray-800:#424242;
--aubergine:#2E1A47;--lavender:#B9A5E0;
--font:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* Scoped resets. These replace the global ones the shared stylesheet applies,
   and reach nothing outside the two bars. */
.chq-nav,.chq-nav *,.chq-mobile-menu,.chq-mobile-menu *,
.chq-footer,.chq-footer *{box-sizing:border-box}
.chq-nav a,.chq-mobile-menu a,.chq-footer a{text-decoration:none}
.chq-nav ul,.chq-footer ul{list-style:none;margin:0;padding:0}
.chq-nav p,.chq-footer p,.chq-nav div,.chq-footer div{margin:0}
.chq-nav img{max-width:100%}

/* ═══ NAV ═══ */
.chq-nav{position:sticky;top:0;left:0;right:0;z-index:100;background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 1.5rem;height:64px;display:flex;align-items:center;justify-content:space-between;font-family:var(--font)}
.chq-nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.15rem;color:var(--purple);flex-shrink:0}
.chq-nav-logo img{height:30px}
.chq-nav-links{display:flex;gap:1.25rem;align-items:center;list-style:none}
.chq-nav-links a{font-size:0.85rem;color:var(--gray-800);font-weight:500;transition:color 0.2s;white-space:nowrap}
.chq-nav-links a:hover,.chq-nav-links a.active{color:var(--purple)}
.chq-nav-login{color:var(--purple)!important;font-weight:600!important}
.chq-nav-cta{background:var(--purple)!important;color:var(--white)!important;padding:9px 20px!important;border-radius:6px;font-weight:700!important;transition:background 0.2s}
.chq-nav-cta:hover{background:var(--purple-dark)!important}
.chq-nav a:focus-visible,.chq-mobile-menu a:focus-visible,.chq-mobile-btn:focus-visible,
.chq-footer a:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.chq-mobile-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray-800);line-height:1}
.chq-mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--white);padding:1.5rem 2rem;flex-direction:column;gap:0.25rem;z-index:99;overflow-y:auto;font-family:var(--font)}
.chq-mobile-menu a{display:block;padding:12px 0;font-size:1.05rem;color:var(--gray-800);border-bottom:1px solid var(--gray-100)}
.chq-mobile-menu a:last-child{border:none}
.chq-mobile-menu .chq-nav-cta{display:block;text-align:center;margin-top:1rem;border:none;padding:14px!important;border-radius:8px}

/* ═══ FOOTER ═══
   Same aubergine as the shared stylesheet, and !important for the same reason:
   three of these pages carry an inline background:#1A1A2E on the footer tag. */
.chq-footer{background:var(--aubergine)!important;color:#CFC6DE!important;padding:40px 2rem;text-align:center;font-size:0.85rem;font-family:var(--font);line-height:1.6}
.chq-footer a{color:#EBE5F7}
.chq-footer a:hover{text-decoration:underline}
.chq-footer-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem!important;flex-wrap:wrap}
.chq-footer-bottom{margin-top:0.75rem!important;font-size:0.8rem;color:#A99DBF}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
.chq-nav-links{display:none}
.chq-mobile-btn{display:block}
}