/*
 * chrome.css
 * The site header and footer, taken from the client prototype
 * (igbegoogwuche-website.html, the NAV 2.0 block).
 *
 * This loads on every page, so it stays deliberately small and touches
 * nothing but the header template, the menu overlay and the footer.
 * The bare `nav {}` selector from the prototype is scoped to .site-nav
 * here, so it cannot style any other nav element on the site.
 */

:root{
  /* Colours come from tokens.css, which loads first. These two are layout
     and type values the prototype's header CSS needs. */
  --pad:clamp(20px, 4.5vw, 64px);
  --mono:'Space Mono','Courier New',monospace;
}

/* ============ NAV ============
   Three elements at every breakpoint: wordmark, gradient APPLY, menu.
   mix-blend-mode:difference is what makes the wordmark and the burger
   read dark on the ivory pages and Paper on the Noir ones, with no
   per-page class needed. The APPLY button sits outside this element on
   purpose, so the blend never touches its gradient. */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  /* flex-direction is stated because Bricks defaults .brxe-block to column. */
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:72px;
  mix-blend-mode:difference;color:#fff;
}
.site-nav a{color:inherit;text-decoration:none}
.wordmark{font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}

.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;color:inherit;
}
.menu-btn span{display:block;width:26px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
.menu-btn.open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn.open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav-apply{
  position:fixed;top:19px;right:calc(var(--pad) + 54px);z-index:101;
  background:linear-gradient(100deg,#C99A3B 0%,#B3282D 48%,#3A2238 100%);
  color:#fff;font-family:var(--mono);font-weight:700;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:13px 26px;border-radius:2px;text-decoration:none;
  transition:filter .3s,transform .25s;
}
.nav-apply:hover{filter:brightness(1.18);transform:translateY(-1px);color:#fff}

/* ============ FULL SCREEN MENU ============ */
.mobile-menu{
  position:fixed;inset:0;z-index:90;
  background:var(--noir);color:var(--paper);
  /* align-items is stated because Bricks defaults .brxe-block to flex-start,
     which would shrink each link and its hairline to the text width. */
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;
  padding:0 var(--pad);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{
  font-weight:600;font-size:clamp(28px,8vw,46px);letter-spacing:-.03em;
  padding:10px 0;border-bottom:1px solid var(--line-inv);
  color:var(--paper);text-decoration:none;
  transition:color .25s,padding-left .25s;
}
.mobile-menu a:hover{color:var(--champagne);padding-left:10px}

.menu-apply{
  display:inline-block;align-self:flex-start;margin-top:34px;
  background:linear-gradient(100deg,#C99A3B 0%,#B3282D 48%,#3A2238 100%);
  color:#fff !important;font-family:var(--mono);font-weight:700;
  font-size:11px !important;letter-spacing:.24em;text-transform:uppercase;
  padding:16px 30px;border-radius:2px;border-bottom:0 !important;
}
.menu-apply:hover{padding-left:30px !important}

/* ============ FOOTER ============ */
.site-footer{
  border-top:1px solid var(--line);
  padding:30px var(--pad);
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--paper);
}
.site-footer p{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin:0;
}

/* The Bloodline Breaker and Apply pages run on a Noir ground, so the
   footer has to follow them rather than sit on an ivory strip. */
body.proto-page-apply .site-footer,
body.page-noir .site-footer{background:var(--noir);border-top-color:var(--line-inv)}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,.menu-btn span,.nav-apply,.mobile-menu a{transition:none}
}

/* Anchor targets clear the fixed header instead of landing under it.
   Every in-page link on the site (the workbook, the industries, the
   disclaimer, the inquiries form) depends on this. */
.proto-view [id]{scroll-margin-top:92px}