/* The site header, in one place.
 *
 * Every page loads this file and uses the same markup, so the header and its
 * menu cannot drift between the home page, the Situation Room and the
 * assessments. It used to: the home page had a different structure with no
 * hamburger at all, which meant no navigation whatsoever on a phone.
 *
 * The pages own only their own colors. This file expects --pine, --chalk and
 * --mint to exist, which every page stylesheet already defines.
 */

.site-header { position:relative; z-index:30; flex:none; color:var(--chalk); background:var(--pine); }
.site-nav { width:min(1480px,100%); height:78px; margin:0 auto; padding:0 clamp(18px,4vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }

.wordmark { width:146px; display:inline-flex; flex-direction:column; gap:6px; color:var(--chalk);
  font-family:'Schibsted Grotesk',sans-serif; line-height:1; text-decoration:none; }
.wordmark .word { display:inline-flex; letter-spacing:-.045em; line-height:1; white-space:nowrap;
  font-size:20px; font-weight:600; }
.wordmark .gap { width:.3em; }
.wordmark-bar { width:100%; height:6px; background:var(--mint); }

.site-menu { display:flex; align-items:center; gap:30px; }
.site-menu a { color:#b9cfc6; font-family:'Schibsted Grotesk',sans-serif; font-size:14.5px;
  font-weight:500; line-height:1; text-decoration:none; }
.site-menu a:hover,.site-menu a:focus-visible { color:var(--chalk); outline:none; }
.site-menu .site-cta { padding:11px 20px; color:var(--pine); background:var(--mint);
  border-radius:6px; font-weight:700; }
.site-menu .site-cta:hover,.site-menu .site-cta:focus-visible { color:var(--pine); background:#9be0bc; }

/* Hidden on a wide screen, where the links sit inline. */
.menu-button { display:none; align-items:center; gap:9px; padding:9px 11px; color:var(--chalk);
  background:transparent; border:1px solid rgba(244,244,241,.36); border-radius:6px;
  font-family:'Schibsted Grotesk',sans-serif; font-size:12px; font-weight:600; cursor:pointer; }
.menu-button i,.menu-button i::before { display:block; width:15px; height:1px;
  background:currentColor; content:''; }
.menu-button i::before { transform:translateY(-4px); }
.menu-button:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.site-menu a:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }

@media (max-width:900px) {
  .menu-button { display:inline-flex; }
  .site-menu { position:absolute; top:78px; right:0; left:0; z-index:10; display:none;
    flex-direction:column; align-items:stretch; gap:0; padding:0 clamp(18px,4vw,64px) 18px;
    background:var(--pine); box-shadow:0 12px 22px rgba(7,32,26,.22); }
  .site-header.menu-open .site-menu { display:flex; }
  .site-menu a { padding:15px 0; font-size:16px; border-top:1px solid rgba(244,244,241,.14); }
  .site-menu .site-cta { margin-top:12px; text-align:center; }
}

@media (max-width:600px) {
  .site-nav { height:62px; padding:0 15px; }
  .wordmark { width:124px; }
  .wordmark .word { font-size:17px; }
  .wordmark-bar { height:5px; }
  .site-menu { top:62px; padding-right:15px; padding-left:15px; }
}