/* Why Matters, site wide, October 2026: the compact homepage header and the regrouped footer on every page.
   Loaded from the shared header on the static pages and from the blog theme. Scoped to #header and footer.wm2. */

/* Header: one compact row on wide screens (logo and slogan left, menu centre, contact right). Same rules as the homepage. */
@media (min-width:640px){
  #header.header{align-items:center;flex-wrap:nowrap;box-shadow:0 1px 0 #ebecf1}
  #header .logo-container{padding:12px 24px 12px 32px;min-width:0;display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
  #header .logo-container img.wm-logo,#header.full .logo-container img.wm-logo{margin:0;width:206px;max-width:206px;padding:0}
  #header .header-info,#header.full .header-info{visibility:visible;height:auto;padding:0;display:flex;align-items:center;flex-wrap:nowrap}
  #header .header-info img{width:22px !important;height:auto}
  #header .header-info .font-medium{display:block;font-size:11px;letter-spacing:.08em;line-height:1.2;color:#404155}
  #header .header-info p{font-size:10px !important;line-height:1.3;margin:0;color:#606060}
  #header .nav-container{flex:1 1 auto;display:flex;justify-content:center;min-width:0;padding:0 12px}
  #header .nav-container .nav{width:100%;justify-content:center}
  #header .nav-container .nav .nav-list,#header.full .nav-container .nav .nav-list{visibility:visible;opacity:1;margin:0;padding:0;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 18px;transition:none}
  #header .nav-container .nav .nav-list .nav-item a{font-size:.78em;white-space:nowrap;letter-spacing:.8px;line-height:1.6;padding:0}
  #header .nav-container .nav .nav-list .nav-item{margin:0}
  #header .nav-container .nav .nav-list .nav-item a:hover{color:#98a2d8}
  #header .buttons{flex:0 0 auto;margin-left:12px}
  #header .header-contact{padding-right:32px;text-align:right;font-size:12px;line-height:1.5}
  #header .header-contact-title{font-size:11px;letter-spacing:2px;margin-bottom:2px}
  #header .header-contact-email,#header .phone-number{font-size:12px;margin:0}
}
/* Narrower screens: the slogan goes, so the menu has room */
@media (min-width:640px) and (max-width:1199px){
  #header .header-info,#header.full .header-info{display:none}
  #header .logo-container{gap:0}
  #header .nav-container .nav .nav-list{gap:2px 14px}
  #header .nav-container .nav .nav-list .nav-item a{font-size:.72em;letter-spacing:.5px}
}
/* Page content sits under the compact header. The old header was 217px tall, this one is about 85px, so each offset moves up by 132px. */
@media (min-width:750px){
  .top-element{padding-top:168px}
  section.wmp-hero{padding-top:168px}
  #page-wrapper{padding-top:18px}
  aside.wmp-toc{top:110px}
}
/* Anchor links land below the fixed header */
h1[id],h2[id],h3[id],h4[id],section[id],div[id],span[id]{scroll-margin-top:104px}

/* Footer: the homepage footer, on every page. The page keeps its own <footer> tag; the columns sit in a .wm-foot wrapper. */
.wm-foot{padding:56px 0 32px;background:#f9fafc;border-top:1px solid #ebecf1}
footer:has(> .wm-foot){margin-top:0}
section.section:has(> footer > .wm-foot){padding:0}
.wm2{font-family:'Titillium Web',sans-serif;letter-spacing:0;color:#454545;font-size:16px;line-height:1.6;text-align:left;-webkit-font-smoothing:antialiased}
.wm2 *{box-sizing:border-box}
.wm2 p{margin:0;font-size:inherit;line-height:inherit;letter-spacing:0}
:where(.wm2) a{color:#404155;text-transform:none;letter-spacing:0;font-size:inherit;line-height:inherit;text-decoration:none}
:where(.wm2) a:hover{color:#98a2d8}
.wm-foot a:hover{text-decoration:none}
.wm2 ul,.wm2 ol{margin:0;padding:0;list-style:none}
.wm2 img{max-width:100%;height:auto}
.wm2 strong{color:#404155}
.wm2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:4px;font-family:'Titillium Web',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:2px solid #404155;transition:transform .2s,box-shadow .2s,background .2s,color .2s;line-height:1.2}
.wm2 .wm2-btn-mint{background:#b1f7e3;border-color:#b1f7e3;color:#1f3a33}
.wm2 .wm2-btn-mint:hover{background:#9ef0d8;border-color:#9ef0d8;color:#1f3a33 !important;transform:translateY(-2px)}
.wm2-foot-heading{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#98a2d8;font-weight:700;margin-bottom:8px}
.wm-foot li{margin-top:0}
.wm2-legal{font-size:12px !important}
@media (max-width:749px){.wm-foot .footer-right.text-left{text-align:center}}
