/* The one site header (KAN-59, docs/site-header-design.md).

   Every studio page and every Report Hacker page now has the same pill: 1260px at
   most, 60px high, resting 22px from the top, flush to the top once the page has
   scrolled, with the Newsletter button closing the row. Report Hacker draws its own
   (brand.css and newsletter.css in pbi-background-designer); this file makes the
   studio's match it. It loads after all.css on every page and overrides it, so
   all.css itself is unchanged.

   The values are Report Hacker's brand tokens, written out: this site has no
   custom properties for them. */

/* ── Where the pill sits ──

   layouts/page.njk prints the pill as the first child of .site, the white
   GeneratePress page, ahead of the rest of the wrapper chain. The
   chain's top spacing used to sit above the pill, which is why it rested at 74px
   on the Hub, 106px on About and 122px on the blog: .site-content's 40px gutter
   (30px on phones), GeneratePress's 2em over .entry-content, and the top padding
   all.css gives every <main> on About (2rem) and on the blog (3rem). With the pill
   out of the chain that spacing would sit between the pill and the page instead,
   so it goes. Only the top: the content below the pill keeps the gap it had.

   main.site-main is GeneratePress's own <main>. A page's own <main> keeps its
   padding: on a post that is the space above the title. */
/* flow-root, so the pill's 22px top margin stays inside .site's white rather than
   collapsing through it and showing the body's background above the pill. */
.site {
  display: flow-root;
}

.site-content {
  padding-top: 0;
}

.entry-content {
  margin-top: 0;
}

body.page-about main.site-main,
body.page-portfolio main.site-main,
body.page-blog main.site-main {
  padding-top: 0 !important;
}

/* 22px and 32px either side, as Report Hacker's pages set them (front.css). The
   blog's pill was 1100px; every page's is 1260px now. */
body.page-about .nav-wrap,
body.page-portfolio .nav-wrap,
body.page-blog .nav-wrap {
  margin-top: 22px;
  padding: 0 32px;
}

body.page-blog .nav-wrap header {
  max-width: 1260px;
}

/* Once the page has scrolled the pill goes flush to the top, more opaque and with
   the heavier shadow, as useStuckNav does on Report Hacker's pages. The class is
   put on by assets/js/newsletter.js; without the script the pill simply stays
   floating 20px clear, which is what it did before. */
body.page-about .nav-wrap.is-stuck,
body.page-portfolio .nav-wrap.is-stuck,
body.page-blog .nav-wrap.is-stuck {
  top: 0;
}

body.page-about .nav-wrap.is-stuck header,
body.page-portfolio .nav-wrap.is-stuck header,
body.page-blog .nav-wrap.is-stuck header {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(15, 18, 30, 0.08), 0 32px 64px -24px rgba(15, 18, 30, 0.14);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-about .nav-wrap,
  body.page-portfolio .nav-wrap,
  body.page-blog .nav-wrap {
    transition: top 160ms ease;
  }
  body.page-about .nav-wrap header,
  body.page-portfolio .nav-wrap header,
  body.page-blog .nav-wrap header {
    transition: background 160ms ease, box-shadow 160ms ease;
  }
}

/* The links and the Newsletter button, side by side at the right of the pill. The
   button is outside the <nav>: on phones the nav scrolls sideways (all.css section
   4) and clips anything that overflows it, and the card hangs below the button. */
.nav-wrap .nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 620px) {
  /* all.css cancels the wrapper chain's 30px gutter with a negative margin. The
     pill is outside the chain now, so there is no gutter to cancel. */
  body.page-about .nav-wrap,
  body.page-portfolio .nav-wrap,
  body.page-blog .nav-wrap {
    margin-left: 0;
    margin-right: 0;
    padding: 0 0.5rem;
  }
  .nav-wrap .nav-end {
    gap: 6px;
  }
}

/* ── The Newsletter button and its card ──

   Report Hacker's newsletter.css, ported. The selectors start at .nav-wrap so the
   GeneratePress base layer's bare button, input, heading and link rules lose to
   them, and a few carry !important where all.css does (About's submit buttons). */
.nav-wrap .nl {
  position: relative;
  display: inline-flex;
  flex: none;
}

.nav-wrap .nl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  margin: 0;
  font: 600 0.88rem/1 'Manrope', system-ui, sans-serif;
  color: #4f46e5;
  background: #ffffff;
  border: 1.5px solid #4f46e5;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s, color 0.18s;
}

.nav-wrap .nl-btn:hover,
.nav-wrap .nl-btn:focus,
.nav-wrap .nl-btn[aria-expanded='true'] {
  background: #eef0ff;
  color: #4338ca;
}

.nav-wrap .nl-btn:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.nav-wrap .nl-btn svg {
  flex: none;
}

/* The teal dot: this browser remembers a sign-up. */
.nav-wrap .nl-btn-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #0fb5ae;
  border: 2px solid #ffffff;
}

/* An envelope alone on phones, at the width Report Hacker's turns. */
@media (max-width: 700px) {
  .nav-wrap .nl-btn-label {
    display: none;
  }
  .nav-wrap .nl-btn {
    padding: 0.5rem 0.6rem;
  }
}

.nav-wrap .nl-pop {
  position: absolute;
  top: calc(100% + 16px);
  right: -10px;
  z-index: 30;
  width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.15rem 1.15rem 1rem;
  text-align: left;
  font-family: 'Manrope', system-ui, sans-serif;
  white-space: normal;
  color: #2a2f3a;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 18, 30, 0.08), 0 32px 64px -24px rgba(15, 18, 30, 0.14);
}

.nav-wrap .nl-pop:focus {
  outline: none;
}

.nav-wrap .nl-pop::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 32px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #e7e9ee;
  border-top: 1px solid #e7e9ee;
  transform: rotate(45deg);
}

@media (max-width: 700px) {
  .nav-wrap .nl-pop {
    right: 0;
    width: min(360px, calc(100vw - 48px));
  }
  .nav-wrap .nl-pop::before {
    right: 13px;
  }
}

.nav-wrap .nl-head,
.nav-wrap .nl-say {
  display: grid;
  gap: 0.3rem;
}

.nav-wrap .nl-h {
  margin: 0;
  padding: 0;
  font: 800 1.02rem/1.25 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0c0e14 !important;
  text-wrap: balance;
}

.nav-wrap .nl-p,
.nav-wrap .nl-fine,
.nav-wrap .nl-err p {
  margin: 0;
  padding: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.5;
  color: #565d6e;
}

.nav-wrap .nl-fine {
  font-size: 0.76rem;
}

.nav-wrap .nl-fine a,
.nav-wrap .nl-err a {
  color: #4f46e5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-wrap .nl-fine a:hover,
.nav-wrap .nl-fine a:focus,
.nav-wrap .nl-err a:hover,
.nav-wrap .nl-err a:focus {
  color: #4338ca;
}

.nav-wrap .nl-row {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

/* all.css styles every email field and submit button on the site with
   !important (its "Form inputs" and "Buttons" blocks, from the WordPress theme),
   so the card's field and Subscribe button answer in kind. */
.nav-wrap .nl-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  font: 500 0.92rem 'Manrope', system-ui, sans-serif !important;
  color: #0c0e14 !important;
  background: #ffffff !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 12px !important;
  padding: 0.7rem 0.9rem !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}

.nav-wrap .nl-input:focus,
.nav-wrap .nl-input:focus-visible {
  outline: none !important;
  color: #0c0e14 !important;
  background: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

body .nav-wrap .nl-go {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
  font: 700 0.9rem/1 'Manrope', system-ui, sans-serif !important;
  color: #ffffff;
  background: linear-gradient(135deg, #4338ca 0%, #6d5ce7 100%) !important;
  border: none;
  border-radius: 999px !important;
  padding: 0.75rem 1.15rem !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  -webkit-appearance: none;
  appearance: none;
}

body .nav-wrap .nl-go:hover,
body .nav-wrap .nl-go:focus {
  color: #ffffff;
  background: #4338ca !important;
  transform: none !important;
}

.nav-wrap .nl-go:focus-visible,
.nav-wrap .nl-ghost:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.nav-wrap .nl-go:disabled {
  cursor: progress;
  opacity: 0.8;
}

/* The button's three faces, stacked in one cell, so it is as wide as the widest
   from the start and never grows mid sign-up. */
.nav-wrap .nl-go-face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  visibility: hidden;
}

.nav-wrap .nl-go-face[data-on='true'] {
  visibility: visible;
}

.nav-wrap .nl-spin {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  animation: nl-spin 0.8s linear infinite;
}

@keyframes nl-spin {
  to {
    transform: rotate(360deg);
  }
}

.nav-wrap .nl-ghost {
  margin: 0;
  font: 600 0.85rem 'Manrope', system-ui, sans-serif;
  color: #4f46e5;
  background: none;
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-appearance: none;
  appearance: none;
}

.nav-wrap .nl-ghost:hover,
.nav-wrap .nl-ghost:focus {
  color: #4338ca;
  background: none;
}

.nav-wrap .nl-err {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: #fdf0f0;
  border: 1px solid #f6d4d4;
}

.nav-wrap .nl-err > svg {
  flex: none;
  margin-top: 2px;
  color: #9b1c1c;
}

.nav-wrap .nl-err p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #9b1c1c;
}

.nav-wrap .nl-err a {
  color: #9b1c1c;
}

.nav-wrap .nl-status {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.35rem 0.8rem;
  align-items: start;
}

.nav-wrap .nl-status-ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.nav-wrap .nl-status-ic.is-ok {
  color: #087f79;
  background: rgba(15, 181, 174, 0.12);
}

.nav-wrap .nl-status-ic.is-info {
  color: #4f46e5;
  background: #eef0ff;
}

.nav-wrap .nl-acts {
  grid-column: 2;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

body .nav-wrap .nl-acts .nl-go {
  padding: 0.6rem 1rem !important;
}

@media (max-width: 480px) {
  .nav-wrap .nl-row {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrap .nl-spin {
    animation-duration: 2.4s;
  }
}