/* ============================================================
   Bullseye Prep — shared site shell (nav + footer)
   The homepage-v1 mockup's header + footer, used on EVERY page
   via the header/footer template parts. Enqueued globally.
   Everything is scoped under nav{} / footer{} so it never leaks
   into page content (which is styled by styles.css).
   ============================================================ */

:root{
  --navy:#2c3e50; --dusty:#7aa5c2; --off:#ecf0f1; --red:#e74c3c;
  --ink:#212529; --mut:#6b7684; --line:#d9e0e8; --panel:#e9eef3;
}

nav, nav *, footer, footer *{box-sizing:border-box}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(44,62,80,.08)}
/* Keep the sticky nav clear of the WP admin bar for logged-in users
   (otherwise the fixed admin bar covers the top of the nav on scroll). */
body.admin-bar nav{top:32px}
@media (max-width:782px){body.admin-bar nav{top:46px}}

nav .wrap{max-width:1440px;margin:0 auto;padding:0 80px;display:flex;align-items:center;justify-content:space-between;height:86px}
nav > .wrap > a{display:inline-flex;align-items:center}
nav img{width:200px;height:40px;object-fit:contain;display:block}
nav .links{display:flex;gap:40px;font:600 14px Montserrat;color:var(--navy)}
nav .links > a{color:var(--navy);text-decoration:none;cursor:pointer}

/* desktop dropdown mega-menus */
nav .links .hasdrop{position:relative;height:86px;display:flex;align-items:center}
nav .links .hasdrop > a{color:var(--navy);text-decoration:none;cursor:pointer}
nav .drop{display:none;position:absolute;top:100%;left:-14px;min-width:296px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 40px rgba(44,62,80,.16);border-radius:14px;padding:8px;flex-direction:column;gap:2px;z-index:60}
nav .links .hasdrop:hover .drop,
nav .links .hasdrop:focus-within .drop{display:flex}
nav .drop a{display:flex;flex-direction:column;gap:3px;padding:9px 14px;border-radius:9px;text-decoration:none}
nav .drop a:hover{background:var(--panel)}
nav .drop a b{font:700 14px Montserrat;color:var(--navy)}
nav .drop a span{font:500 12px/1.35 Inter;color:var(--mut)}

nav .right{display:flex;align-items:center;gap:16px}
nav .btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:8px;padding:14px 24px;font:700 15px Montserrat;cursor:pointer;text-decoration:none;transition:transform .15s ease-out, box-shadow .15s ease-out}
nav .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(44,62,80,.18)}
nav .btn-dusty{background:var(--dusty);color:var(--off)}
nav .btn-red{background:var(--red);color:var(--off)}
nav .login{font:600 14px Montserrat;color:var(--navy);cursor:pointer;text-decoration:none;margin-left:8px}
/* header CTA uses a shorter label on mobile so it never wraps */
nav .btn .lbl-sm{display:none}
nav .burger{display:none;font-size:24px;color:var(--navy);cursor:pointer;line-height:1;padding:4px}
nav .mnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 14px 28px rgba(44,62,80,.16);padding:14px 24px 20px;flex-direction:column;gap:11px;font:600 15px Montserrat;color:var(--navy);max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
nav .mnav a{color:var(--navy);text-decoration:none}
nav .mnav.on{display:flex}
nav .mnav .sep{border-top:1px solid var(--line);margin:2px 0}
/* grouped mobile menu: the group header links to the section index, children indent */
nav .mnav a.grp{font:800 12px Montserrat;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-top:6px}
nav .mnav a.grp:first-child{margin-top:0}
nav .mnav a.sub{padding-left:14px;font-weight:600}
@media (max-width:1000px){nav .links{display:none} nav .burger{display:block}}
@media (max-width:760px){
  /* the wrap's DESKTOP 80px side padding must shrink here too — keeping it
     squeezed the whole header into ~215px at phone width (tiny logo). */
  nav .wrap{height:64px;gap:10px;padding:0 16px}
  nav img{width:150px}
  nav .right{gap:8px}
  nav .right .btn-dusty{display:none}
  nav .login{display:none}
  nav .right .btn{padding:9px 13px;font-size:12.5px;white-space:nowrap}
  nav .btn .lbl-lg{display:none}
  nav .btn .lbl-sm{display:inline}
  nav .mnav{padding:14px 16px 20px}
}

/* ---------- FOOTER (4-column site footer, navy) ---------- */
footer{background:var(--navy);color:var(--off)}
footer .wrap{max-width:1440px;margin:0 auto;padding:64px 80px 40px}
footer .ft-top{display:grid;grid-template-columns:1.4fr 3fr;gap:56px}
footer .ft-brand > a{display:inline-flex}
footer .ft-brand img{width:184px;height:auto;object-fit:contain;display:block;margin-bottom:18px}
footer .ft-tag{font:600 16px/1.4 Montserrat;color:#fff;margin-bottom:12px}
footer .ft-tag b{color:var(--dusty)}
footer .ft-blurb{font:400 13px/1.65 Inter;color:rgba(236,240,241,.7);max-width:300px}
footer .ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
footer .ft-col h5{font:700 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--dusty);margin-bottom:16px}
footer .ft-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer .ft-col a{font:500 14px Montserrat;color:rgba(236,240,241,.85);text-decoration:none}
footer .ft-col a:hover{color:#fff}
footer .ft-bot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(236,240,241,.18);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font:500 11px/1.5 Inter;color:rgba(236,240,241,.6)}
footer .ft-bot .ft-tm{max-width:520px;text-align:right}
@media (max-width:900px){
  footer .wrap{padding:48px 24px 32px}
  footer .ft-top{grid-template-columns:1fr;gap:36px}
  footer .ft-cols{grid-template-columns:repeat(2,1fr);gap:28px}
  footer .ft-bot{flex-direction:column;gap:12px}
  footer .ft-bot .ft-tm{text-align:left;max-width:none}
}