/* ============================================================================
   mq-chrome.css — sitewide header, nav, mobile sidebar and footer
   Built: 2026-08-19 09:22 ET

   DESIGN RULE THAT MAKES THIS WORK ON EVERY TEMPLATE
     Every value below is namespaced --mqc-*. Nothing here reads --ink, --line,
     --jade or any other page token. Your templates define those names with
     DIFFERENT values (--ink is #0a0a0a on index.php and #0a1f3c on
     first-time-homebuyer.php), so a shared header built on them would render a
     different colour on every page style. Namespacing is what lets this file
     drop onto all of them unchanged.

     Likewise every selector is either .mqc-* or scoped inside .mqc-chrome, so
     nothing here can collide with a page's existing .nav / .util / .logo rules.

   Values are taken from index.php, which is the canonical look.
   ========================================================================== */

.mqc-chrome{
  --mqc-navy:#1c2832;
  --mqc-navy-deep:#0f1820;
  --mqc-jade:#00857c;
  --mqc-ink:#0a0a0a;
  --mqc-ink-mute:#6e6e6e;
  --mqc-line:#d8d4ca;
  --mqc-bg-soft:#f5f3ee;
  --mqc-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
}

.mqc-chrome,.mqc-chrome *{box-sizing:border-box}
.mqc-chrome a{text-decoration:none;color:inherit}
.mqc-chrome button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── SKIP LINK ── */
.mqc-skip{position:absolute;left:-9999px;top:0;z-index:1100;background:#1c2832;color:#fff;padding:11px 18px;font:600 .85rem/1.4 'Hanken Grotesk',sans-serif}
.mqc-skip:focus{left:0}

/* ── UTILITY BAR ── */
.mqc-util{background:var(--mqc-navy-deep);color:rgba(255,255,255,.85);font-family:var(--mqc-sans);font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.06)}
.mqc-util-in{max-width:1320px;margin:0 auto;padding:9px 32px;display:flex;justify-content:flex-end;gap:1.6rem}
.mqc-util a{color:rgba(255,255,255,.72);transition:color .15s;padding:2px 0}
.mqc-util a:hover{color:#fff}
.mqc-util-div{color:rgba(255,255,255,.2)}

/* ── MAIN NAV ── */
.mqc-nav{background:#fff;border-bottom:1px solid var(--mqc-line);position:sticky;top:0;z-index:100;font-family:var(--mqc-sans)}
.mqc-nav-in{max-width:1320px;margin:0 auto;padding:0 32px;height:74px;display:flex;align-items:center;gap:2.5rem}
.mqc-logo{display:flex;align-items:baseline;gap:.4rem;flex-shrink:0}
.mqc-logo-mark{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;color:var(--mqc-navy)}
.mqc-logo-mark em{font-style:normal;color:var(--mqc-jade);font-weight:700}
.mqc-logo-tag{font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mqc-ink-mute);border-left:1px solid var(--mqc-line);padding-left:.7rem;margin-left:.2rem}
.mqc-primary{display:flex;gap:.3rem;align-items:center}
.mqc-primary a{font-size:.92rem;font-weight:500;color:var(--mqc-ink);padding:.55rem .9rem;transition:color .15s;position:relative;white-space:nowrap}
.mqc-primary a:hover{color:var(--mqc-jade)}
.mqc-primary a::after{content:'';position:absolute;left:.9rem;right:.9rem;bottom:.3rem;height:1px;background:var(--mqc-jade);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.mqc-primary a:hover::after{transform:scaleX(1)}
.mqc-primary a[aria-current="page"]{color:var(--mqc-jade)}
.mqc-primary a[aria-current="page"]::after{transform:scaleX(1)}
.mqc-tools{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.mqc-search{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mqc-ink);transition:background .15s}
.mqc-chrome .mqc-cta,
.mqc-cta{display:inline-flex;align-items:center;background:var(--mqc-navy);color:#fff !important;padding:.65rem 1.4rem;font-size:.85rem;font-weight:600;letter-spacing:.02em;transition:background .15s,color .15s;white-space:nowrap}
.mqc-chrome .mqc-cta:hover,
.mqc-cta:hover{background:var(--mqc-jade);color:#fff !important}
.mqc-burger{display:none;width:36px;height:36px;align-items:center;justify-content:center;color:var(--mqc-ink)}

/* ── MOBILE SIDEBAR ── */
.mqc-sidebar{position:fixed;top:0;right:-320px;width:300px;max-width:85vw;height:100vh;background:var(--mqc-navy);color:#fff;z-index:1000;transition:right .25s ease;overflow-y:auto;padding:24px;font-family:var(--mqc-sans)}
.mqc-sidebar.open{right:0}
.mqc-chrome .mqc-sidebar a,
.mqc-sidebar a{display:block;color:#fff !important;padding:14px 0;font-size:1.05rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.1)}
.mqc-sb-close{cursor:pointer;font-size:24px;text-align:right;margin-bottom:18px;color:rgba(255,255,255,.7)}
.mqc-overlay{position:fixed;inset:0;background:rgba(6,12,18,.55);z-index:999;display:none}
.mqc-overlay.show{display:block}

/* ── FOOTER ── */
.mqc-footer{background:#fff;color:var(--mqc-ink);padding:64px 32px 32px;border-top:1px solid var(--mqc-line);font-family:var(--mqc-sans)}
.mqc-ft-in{max-width:1320px;margin:0 auto}
.mqc-ft-social{display:flex;justify-content:center;gap:24px;padding-bottom:32px;border-bottom:1px solid var(--mqc-line);margin-bottom:32px}
.mqc-ft-social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--mqc-ink-mute);transition:color .2s}
.mqc-ft-social a:hover{color:var(--mqc-jade)}
.mqc-ft-logos{display:flex;align-items:center;justify-content:center;gap:2.5rem;margin:2.5rem 0}
.mqc-ft-nav,.mqc-ft-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2.2rem;margin-bottom:18px}
.mqc-ft-nav a{font-size:.92rem;color:var(--mqc-ink);font-weight:500;transition:color .2s}
.mqc-ft-nav a:hover{color:var(--mqc-jade)}
.mqc-ft-legal{padding-top:18px;border-top:1px solid var(--mqc-line);margin-top:18px}
.mqc-ft-legal a{font-size:.8rem;color:var(--mqc-ink-mute);transition:color .2s}
.mqc-ft-legal a:hover{color:var(--mqc-ink)}
.mqc-ft-copy{text-align:left;margin-top:32px;padding-top:32px;border-top:1px solid var(--mqc-line);font-size:.78rem;color:var(--mqc-ink-mute);line-height:1.7;max-width:1100px;margin-left:auto;margin-right:auto}
.mqc-ft-copy strong{color:var(--mqc-ink);font-weight:600}
.mqc-ft-copy p{margin:0 0 14px;font-size:.74rem;line-height:1.7}
.mqc-ft-copy a{color:#3a3a3a;text-decoration:underline;text-decoration-color:var(--mqc-line);text-underline-offset:2px}
.mqc-ft-copy a:hover{color:var(--mqc-ink);text-decoration-color:currentColor}
.mqc-ft-eho{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;border:1px solid #e8e5dc;background:var(--mqc-bg-soft);margin-bottom:20px;border-radius:2px}
.mqc-ft-eho-symbol{flex-shrink:0;color:var(--mqc-navy);margin-top:2px}
.mqc-ft-eho p{margin:0;font-size:.78rem;line-height:1.6;color:#3a3a3a}
.mqc-ft-final{text-align:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--mqc-line);font-size:.72rem;color:var(--mqc-ink-mute)}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
  .mqc-primary{display:none}
  .mqc-burger{display:flex}
}
@media (max-width:640px){
  .mqc-util-in{padding:9px 20px;gap:1rem;font-size:.7rem}
  .mqc-nav-in{padding:0 20px;gap:1rem}
  .mqc-logo-tag{display:none}
  .mqc-cta{display:none}
  .mqc-footer{padding:48px 20px 28px}
  .mqc-ft-eho{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .mqc-chrome *{animation:none!important;transition:none!important}
}