/* ═══════════════════════════════════════════════════════════════════
   Meridian Window Systems — shared site stylesheet
   Loaded on every page AFTER the page's own styles. Site-wide rules live here:
   change them once, every page follows.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Colour tokens ───────────────────────────────────────────────
   Brand gold (#C9A227) stays the colour of buttons, rules and badges.
   As TEXT it is too light to read on white or cream, so text that used the
   brand gold now uses --gold-ink, which is a deeper gold on light sections
   and the bright brand gold on navy and photo sections (.on-dark).        */
:root{
  --gold:#C9A227;
  --gold-ink:#8a6d12;      /* small gold text on white / cream  (4.9 : 1 on white) */
  --gold-ink-lg:#a68420;   /* large gold headings on white / cream (3.5 : 1, large-text rule) */
  --muted:#5b6779;         /* grey body text, was #64748b (4.4 : 1 on cream, now 5.3) */
  --focus:#0f2747;
}
.on-dark,nav.main-nav,.main-nav,.util,footer{
  --gold-ink:#C9A227;
  --gold-ink-lg:#C9A227;
  --focus:#C9A227;
}

/* Gold buttons: navy lettering instead of white, so the label is readable (6.2 : 1) */
.btn-primary,a.btn-primary,button.btn-primary,.nav-links li a.cta,.terr-badge.open,.terr-badge.open .state,
.feat-badge,.search-form button{color:var(--navy,#0f2747)!important}
.btn-primary:hover,.nav-links li a.cta:hover,.search-form button:hover{background:var(--navy,#0f2747)!important;color:#fff!important}
.on-dark .btn-primary:hover{background:#fff!important;color:var(--navy,#0f2747)!important}

/* Small fixed-colour text that was too faint */
.foot-bottom,.foot-bottom span{color:#9aa5b5}
.brand-num{color:#5f7699!important}
.pm-stage.pending .pm-name{color:rgba(255,255,255,0.62)!important}
.pm-name{color:rgba(255,255,255,0.9)}

/* ─── 2. Keyboard focus ──────────────────────────────────────────────
   A clear ring for anyone moving through the site with the Tab key.
   Mouse clicks do not show it (that is what :focus-visible means).        */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;background:var(--navy,#0f2747);color:#fff;
  padding:12px 18px;font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:top .15s}
.skip-link:focus{top:12px}

/* Dropdown menus also open from the keyboard, and close with Esc */
.nav-links li.has-sub.closed .subnav{opacity:0!important;visibility:hidden!important}

/* ─── 3. Phone and tablet menu (960 px and narrower) ─────────────────── */
.nav-toggle{display:none}
@media (max-width:960px){
  nav.main-nav .nav-inner{flex-wrap:nowrap!important;justify-content:space-between;align-items:center;gap:12px}
  nav.main-nav .brand img{height:48px!important;width:auto}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
    background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:2px;
    padding:10px 14px;font:600 11.5px/1 Inter,-apple-system,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
  .nav-toggle .bars{position:relative;width:18px;height:12px;display:inline-block}
  .nav-toggle .bars i{position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s,opacity .2s,top .2s}
  .nav-toggle .bars i:nth-child(1){top:0}.nav-toggle .bars i:nth-child(2){top:5px}.nav-toggle .bars i:nth-child(3){top:10px}
  .nav-open .nav-toggle .bars i:nth-child(1){top:5px;transform:rotate(45deg)}
  .nav-open .nav-toggle .bars i:nth-child(2){opacity:0}
  .nav-open .nav-toggle .bars i:nth-child(3){top:5px;transform:rotate(-45deg)}

  nav.main-nav .nav-links{display:none!important}
  nav.main-nav.nav-open .nav-links{
    display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;flex-wrap:nowrap!important;
    position:absolute;left:0;right:0;top:100%;background:#0b1830;border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.35);padding:8px var(--pad-x,20px) 22px;max-height:calc(100vh - 80px);overflow-y:auto;margin:0}
  nav.main-nav{position:sticky}
  nav.main-nav .nav-links>li{border-bottom:1px solid rgba(255,255,255,.07)}
  nav.main-nav .nav-links>li>a{display:block;padding:16px 2px!important;font-size:13px!important;letter-spacing:.16em!important;border-bottom:0!important}
  nav.main-nav .nav-links li.has-sub>a::after{display:none}
  nav.main-nav .nav-links .subnav{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;
    min-width:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 0 12px 14px!important;margin:-6px 0 0!important}
  nav.main-nav .nav-links .subnav::before{display:none!important}
  nav.main-nav .nav-links .subnav li a{padding:9px 0!important}
  nav.main-nav .nav-links li:last-child{border-bottom:0}
  nav.main-nav .nav-links li a.cta{display:block;text-align:center;margin-top:16px;padding:16px!important}
  body.menu-locked{overflow:hidden}
}

/* ─── 4. Individual readability fixes found by the accessibility check ── */
.care em{color:var(--gold-ink)!important}                 /* small bold label, not a heading */
.proj-tag,.proj-tags span{color:#75600f!important}         /* tags on the pale pink chips */
.res-icon,.hub .ic,.ic,.cc-icon,.arch-card .icon{--gold-ink:#C9A227;--gold-ink-lg:#C9A227}  /* navy icon squares */
.tools a:not(.dl){color:#fff!important;border-color:rgba(255,255,255,.75)!important}        /* data sheet toolbar on grey */