/* Shared site chrome: the header, mobile menu and footer (UI/UX pass, Step 4, Oct 28, 2026).
   Extracted from the page styles (the header selector narrowed to body>nav, so breadcrumb and jump-link navs are not styled as the header), so the header and footer look the same on every page during the migration,
   then adjusted at the end of this file to meet the site system targets (_checks/check_system.py).
   Pages in the system load it after /css/site.css. Behavior: /js/site-chrome.js (mobile menu) and /js/nav-menu.js (Resources menu). */
body>nav,.mobile-menu,footer{--pad:clamp(20px,5vw,80px);--max:1140px}
body>nav{position:fixed;top:0;left:0;right:0;z-index:200;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:rgba(13,31,20,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav-wordmark{font-size:1.1rem;font-weight:700;color:var(--white);text-decoration:none;letter-spacing:-.01em}
.nav-wordmark span{color:rgba(255,255,255,.32);font-weight:400}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;list-style:none;gap:24px}
.nav-links a{font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.48);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--amber)}
.nav-btn{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--amber);padding:9px 20px;border-radius:3px;text-decoration:none;transition:background .2s,transform .15s}
.nav-btn:hover{background:#c88820;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.7);border-radius:2px;transition:transform .25s,opacity .25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:66px;left:0;right:0;background:rgba(13,31,20,.98);backdrop-filter:blur(16px);z-index:199;padding:24px var(--pad) 32px;flex-direction:column;gap:4px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:.88rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.62);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s}
.mobile-menu a:hover{color:var(--white)}
.mobile-menu .mobile-menu-cta{margin-top:16px;display:inline-block;background:var(--amber);color:var(--ink);padding:13px 24px;border-radius:3px;text-align:center;font-size:.78rem;font-weight:800;letter-spacing:.06em;border-bottom:none}
@media(max-width:768px){.nav-links,.nav-btn{display:none}.hamburger{display:flex}}
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.06);padding:72px var(--pad) 40px}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
.footer-mark{font-size:1.15rem;font-weight:700;color:var(--white);letter-spacing:-.01em;margin-bottom:14px}
.footer-mark span{color:rgba(255,255,255,0.6);font-weight:400}
.footer-brand p{font-size:.84rem;line-height:1.72;color:rgba(255,255,255,0.6);margin-bottom:18px;max-width:280px}
.footer-contacts{display:flex;flex-direction:column;gap:4px}
.footer-contacts a{font-size:.8rem;color:rgba(255,255,255,0.6);text-decoration:none;transition:color .2s}
.footer-contacts a:hover{color:rgba(255,255,255,.72)}
.footer-col h4{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:16px}
.footer-col{display:flex;flex-direction:column;gap:2px}
.footer-col a{font-size:.84rem;color:rgba(255,255,255,0.6);text-decoration:none;padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:28px;display:flex;flex-direction:column;gap:8px}
.footer-bottom p{font-size:.76rem;color:rgba(255,255,255,0.6);line-height:1.65}
@media(max-width:800px){.footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{grid-column:1/-1}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}}
.nav-wordmark, .nav-links a, .nav-btn{white-space: nowrap;}
.nav-right{margin-left: auto;}
.nav-right + .hamburger{margin-left: 20px;}
@media (max-width: 1199px){.nav-links{ display: none; }.hamburger{ display: flex; }}
@media (max-width: 640px){.nav-btn{ display: none; }}
.nav-dd{position: relative;}
.nav-links .nav-dd-btn{display: inline-flex; align-items: center; gap: 5px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
      font-family: inherit; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; line-height: inherit;
      color: rgba(255,255,255,0.48); white-space: nowrap; transition: color 0.2s;}
.nav-links .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn, .nav-links .nav-dd-btn.active{color: #fff;}
.nav-dd-btn svg{width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s;}
.nav-dd.open .nav-dd-btn svg{transform: rotate(180deg);}
.nav-dd-menu{display: none; position: absolute; top: 100%; left: -16px; margin: 0; padding: 18px 0 0; list-style: none; z-index: 210;}
.nav-dd-menu::before{content: ""; position: absolute; inset: 10px 0 0; background: #0D1F14; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; box-shadow: 0 14px 34px rgba(0,0,0,0.35);}
.nav-dd.open .nav-dd-menu{display: block;}
@media (hover: hover){html:not(.nav-js) .nav-dd:hover .nav-dd-menu{ display: block; }}
.nav-dd-menu li{position: relative;}
.nav-dd-menu li:first-child{padding-top: 8px;}
.nav-dd-menu li:last-child{padding-bottom: 8px;}
.nav-links .nav-dd-menu a{display: block; width: 300px; padding: 10px 18px; color: rgba(255,255,255,0.88); text-transform: none; letter-spacing: 0; font-size: 0.84rem; font-weight: 700; white-space: normal;}
.nav-links .nav-dd-menu a span{display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 500; color: rgba(255,255,255,0.62);}
.nav-links .nav-dd-menu a:hover, .nav-links .nav-dd-menu a:focus-visible{color: #fff; background: rgba(255,255,255,0.06);}
.nav-links .nav-dd-menu a.nav-dd-all{margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); color: #F5C66A; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase;}
.nav-links .nav-dd-btn:focus-visible{outline: 2px solid #E09B2D; outline-offset: 4px; border-radius: 2px;}
.mobile-menu .mobile-menu-sub{padding-left: 16px; font-size: 0.76rem; color: rgba(255,255,255,0.5);}
@media (min-width: 1025px){.footer-top{ grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; }}
@media (max-width: 1279px){.nav-links{ display: none; }.hamburger{ display: flex; }}
@media (min-width: 1280px) and (max-width: 1359px){.nav-links{ gap: 14px; }.nav-right{ gap: 18px; }}   /* tightened Oct 29, 2026 when ITC joined the menu */
@media (min-width: 1360px) and (max-width: 1439px){.nav-links{ gap: 20px; }}

/* ── Adjustments for the site system targets ── */
body>nav{position:sticky}                                   /* in the page flow, so content needs no top padding */
.nav-wordmark{display:inline-block;padding:10px 0}
.nav-wordmark span{color:rgba(255,255,255,.62)}        /* 4.5:1 on the header */
.nav-links a,.nav-links .nav-dd-btn{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.72)}
.nav-btn{font-size:.8125rem;min-height:44px;display:inline-flex;align-items:center}
.hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.mobile-menu a{min-height:44px;display:flex;align-items:center}
.mobile-menu .mobile-menu-sub{font-size:.875rem;color:rgba(255,255,255,.72)}
.mobile-menu .mobile-menu-cta{justify-content:center;font-size:.875rem}
.footer-col h4{font-size:.75rem;color:rgba(255,255,255,.72)}
.footer-col a,.footer-contacts a{display:flex;align-items:center;min-height:32px;color:rgba(255,255,255,.72)}
.footer-brand p,.footer-bottom p{color:rgba(255,255,255,.72);font-size:.9375rem}
@media (max-width:768px){body>nav{position:relative}.mobile-menu{position:absolute}.nav-links,.nav-btn{display:none}.hamburger{display:flex}}   /* phones: the bottom bar is the one sticky layer */