/* ============================================================
   NNA — Engagement pop-ups (client update, 28 July 2026)

     1. #nna-regwall — registration wall, 7s after landing
     2. #nna-trust   — E-News / Morning Report / app card
     3. #nna-next    — "Next on NNA" suggested article, bottom-right

   Same language as the rest of the site: Inter, gold #c19114 with a
   blue #2f506f second accent on dark glass, 12–20px radii, hairline
   borders, uppercase micro-labels. Loaded on every public page from
   includes/popups.php.
   ============================================================ */

/* ── Shared ─────────────────────────────────────────────────── */
.nna-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#nna-popups [hidden] {
  display: none !important;
}

/* Modal shell — used by the wall and the subscribe card */
#nna-popups .nna-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  opacity: 0;
  transition: opacity .35s ease;
}
#nna-popups .nna-modal.is-open {
  opacity: 1;
}

#nna-popups .nna-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

#nna-popups .nna-modal-card {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 40px 40px 32px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background:
    radial-gradient(760px 300px at 88% -50%, rgba(193, 145, 20, 0.16), transparent 62%),
    radial-gradient(640px 320px at -5% 150%, rgba(47, 80, 111, 0.34), transparent 62%),
    linear-gradient(160deg, #1a1c22 0%, #101117 100%);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.96);
  color: #fff;
  transform: translateY(18px) scale(0.985);
  transition: transform .4s cubic-bezier(.2, .8, .25, 1);
}
#nna-popups .nna-modal.is-open .nna-modal-card {
  transform: none;
}

/* gold/blue hairline along the card top — the site's card signature */
#nna-popups .nna-modal-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193, 145, 20, .65), rgba(47, 80, 111, .65), transparent);
  pointer-events: none;
}

#nna-popups .nna-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #cfcfcf;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#nna-popups .nna-modal-x svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
#nna-popups .nna-modal-x:hover {
  background: rgba(193, 145, 20, 0.18);
  border-color: #c19114;
  color: #dbbc6c;
}

#nna-popups .nna-modal-title {
  position: relative;
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 2.1em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
}
#nna-popups .nna-modal-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #c19114 0%, #2f506f 100%);
}

#nna-popups .nna-modal-hook {
  margin: 0 0 24px;
  padding-left: 18px;
  max-width: 620px;
  font-size: 1.08em;
  font-weight: 300;
  line-height: 1.65;
  color: #b9b9b9;
}

#nna-popups .nna-modal-secondary {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.92em;
  color: #8f8f8f;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
#nna-popups .nna-modal-secondary:hover {
  color: #dbbc6c;
  border-bottom-color: rgba(219, 188, 108, 0.5);
}

#nna-popups .nna-modal-legal {
  margin: 16px 0 0;
  font-size: 0.8em;
  letter-spacing: 0.3px;
  color: #6e6e6e;
}

/* Email capture — same control sizing as the newsletter banner */
#nna-popups .nna-join-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#nna-popups .nna-join-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #333;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.98em;
  transition: border-color .2s ease, background .2s ease;
}
#nna-popups .nna-join-form input[type="email"]::placeholder {
  color: #7d7d7d;
}
#nna-popups .nna-join-form input[type="email"]:focus {
  border-color: #c19114;
  background: rgba(255, 255, 255, 0.08);
}

#nna-popups .nna-btn-primary {
  min-width: 0;
  padding: 14px 26px;
  border: none;
  border-radius: 8px;
  background: #c19114;
  color: #000;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .2s ease, background .2s ease;
}
#nna-popups .nna-btn-primary:hover {
  background: #d9a521;
  opacity: 1;
}
#nna-popups .nna-btn-primary:disabled {
  opacity: .5;
  cursor: default;
}

#nna-popups .nna-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 11px 18px;
  border: 1px solid rgba(193, 145, 20, 0.55);
  border-radius: 8px;
  background: rgba(193, 145, 20, 0.08);
  color: #dbbc6c;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#nna-popups .nna-btn-outline svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}
#nna-popups .nna-btn-outline:hover {
  background: #c19114;
  border-color: #c19114;
  color: #000;
}

#nna-popups .nna-form-msg {
  margin: 12px 0 0;
  font-size: 0.9em;
  font-weight: 600;
}
#nna-popups .nna-form-msg.is-success { color: #4caf50; }
#nna-popups .nna-form-msg.is-error   { color: #f44336; }

/* ── 1 · Registration wall ──────────────────────────────────── */
#nna-popups .nna-regwall-card {
  max-width: 620px;
}
#nna-popups .nna-regwall-brand {
  margin-bottom: 22px;
}
/* The roundel on its own, with no wordmark beside it, needs a little more
   height than the old lockup did to carry the same weight. */
#nna-popups .nna-regwall-logo {
  height: 56px;
  width: auto;
  display: block;
}
#nna-popups #nna-regwall-form {
  margin-top: 4px;
}

/* ── 2 · Subscribe / trust card ─────────────────────────────── */
#nna-popups .nna-trust-card {
  max-width: 1020px;
  padding-bottom: 26px;
}
#nna-popups .nna-trust-title {
  font-size: 1.8em;
}
#nna-popups .nna-trust-hook {
  margin-bottom: 26px;
}

#nna-popups .nna-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
#nna-popups .nna-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 20px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
#nna-popups .nna-carousel-track::-webkit-scrollbar {
  display: none;
}

#nna-popups .nna-carousel-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #cfcfcf;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#nna-popups .nna-carousel-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
#nna-popups .nna-carousel-arrow:hover {
  background: rgba(193, 145, 20, 0.18);
  border-color: #c19114;
  color: #dbbc6c;
}

#nna-popups .nna-sub-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: center;
  padding: 14px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color .3s ease, transform .3s ease;
}
#nna-popups .nna-sub-card:hover {
  border-color: rgba(193, 145, 20, 0.45);
  transform: translateY(-4px);
}

/* Card artwork — a photograph from the site's own library under a gradient
   wash, so the wordmark stays legible on any crop. To change a card's
   picture, swap the url() in the matching .nna-art-* rule below.
   The images only download once the pop-up is shown: until then the modal
   is [hidden] → display:none, and browsers skip backgrounds on those. */
#nna-popups .nna-sub-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  aspect-ratio: 16 / 10;
  padding: 18px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
#nna-popups .nna-art-kicker {
  font-size: 0.76em;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
#nna-popups .nna-art-word {
  font-size: 1.9em;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.6px;
  color: #fff;
}
/* Each card keeps a distinct temperature on top of its photograph:
   E-News blue, Morning Report gold, the app deep navy. */
/* Every card gets the same two-part scrim: darker down the page and darker
   into the bottom-left corner, which is where the wordmark sits. Whatever
   photograph goes behind it, the type stays readable. */
#nna-popups .nna-art-enews {
  background-image:
    linear-gradient(105deg, rgba(10, 12, 16, .82) 0%, rgba(10, 12, 16, .1) 66%),
    linear-gradient(180deg, rgba(10, 12, 16, .22) 0%, rgba(10, 12, 16, .84) 100%),
    radial-gradient(380px 240px at 82% 8%, rgba(72, 132, 190, .5), transparent 64%),
    url(../images/magnific__talk__56261.jpg);
  background-position: center, center, center, center;
}
#nna-popups .nna-art-morning {
  background-image:
    linear-gradient(105deg, rgba(12, 10, 6, .84) 0%, rgba(12, 10, 6, .1) 66%),
    linear-gradient(180deg, rgba(12, 10, 6, .22) 0%, rgba(12, 10, 6, .86) 100%),
    radial-gradient(400px 240px at 15% 0%, rgba(217, 165, 33, .38), transparent 60%),
    url(../images/home/card2.jpg);
  /* the speaker sits right of the wordmark rather than under it */
  background-position: center, center, center, 76% 12%;
}
#nna-popups .nna-art-app {
  background-image:
    linear-gradient(105deg, rgba(8, 10, 14, .8) 0%, rgba(8, 10, 14, .08) 66%),
    linear-gradient(180deg, rgba(8, 10, 14, .22) 0%, rgba(8, 10, 14, .86) 100%),
    radial-gradient(420px 240px at 80% 100%, rgba(47, 80, 111, .55), transparent 62%),
    url(../images/ultra_stream/login-bg2.jpg);
  background-position: center, center, center, center;
}

#nna-popups .nna-sub-name {
  margin: 16px 0 6px;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
#nna-popups .nna-sub-note {
  margin: 0 0 16px;
  font-size: 0.92em;
  font-weight: 300;
  line-height: 1.55;
  color: #9d9d9d;
  flex: 1;
}
#nna-popups .nna-sub-form {
  margin-top: 2px;
}
#nna-popups .nna-sub-form input[type="email"] {
  flex: 1 1 100%;
}
#nna-popups .nna-sub-form .nna-btn-primary {
  width: 100%;
}
#nna-popups .nna-store-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#nna-popups .nna-carousel-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
#nna-popups .nna-carousel-dots button {
  width: 7px;
  height: 7px;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background .2s ease, transform .2s ease;
}
#nna-popups .nna-carousel-dots button.is-active {
  background: #c19114;
  transform: scale(1.25);
}

/* ── 3 · "Next on NNA" suggested article ────────────────────── */
#nna-popups .nna-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  width: 380px;
  max-width: calc(100vw - 44px);
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid #c19114;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(28, 30, 37, 0.97) 0%, rgba(15, 16, 21, 0.97) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.95);
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .25, 1);
}
#nna-popups .nna-toast.is-open {
  opacity: 1;
  transform: none;
}
/* the swap between one suggestion and the next */
#nna-popups .nna-toast.is-swapping .nna-toast-body {
  opacity: 0;
  transform: translateY(6px);
}

#nna-popups .nna-toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
#nna-popups .nna-toast-label {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #dbbc6c;
}
#nna-popups .nna-toast-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #8a8a8a;
  transition: color .2s ease, background .2s ease;
}
#nna-popups .nna-toast-x svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
#nna-popups .nna-toast-x:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

#nna-popups .nna-toast-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: opacity .25s ease, transform .25s ease;
}
#nna-popups .nna-toast-text {
  flex: 1;
  min-width: 0;
}
#nna-popups .nna-toast-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  transition: color .2s ease;
}
#nna-popups .nna-toast-body:hover .nna-toast-title {
  color: #dbbc6c;
}
#nna-popups .nna-toast-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.82em;
  color: #8a8a8a;
}
#nna-popups .nna-toast-meta svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
#nna-popups .nna-toast-thumb {
  flex-shrink: 0;
  width: 84px;
  height: 62px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #222;
  background-size: cover;
  background-position: center;
}

#nna-popups .nna-toast-arrow {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #b3b3b3;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#nna-popups .nna-toast-arrow svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
#nna-popups .nna-toast-arrow:hover {
  background: rgba(193, 145, 20, 0.18);
  border-color: #c19114;
  color: #dbbc6c;
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media screen and (max-width: 1000px) {
  #nna-popups .nna-carousel-arrow {
    display: inline-flex;
  }
  #nna-popups .nna-carousel-dots {
    display: flex;
  }
  #nna-popups .nna-carousel-track {
    grid-auto-columns: 100%;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  #nna-popups .nna-modal {
    padding: 16px 10px;
  }
  #nna-popups .nna-modal-card {
    padding: 32px 16px 22px;
    border-radius: 16px;
    max-height: calc(100dvh - 32px);
  }
  #nna-popups .nna-modal-title {
    font-size: 1.65em;
    padding-left: 14px;
  }
  #nna-popups .nna-trust-title {
    font-size: 1.5em;
  }
  #nna-popups .nna-modal-hook {
    padding-left: 14px;
    font-size: 1em;
    margin-bottom: 20px;
  }
  #nna-popups .nna-modal-title::before {
    width: 3px;
  }
  #nna-popups .nna-regwall-logo {
    height: 46px;
  }
  #nna-popups .nna-join-form {
    flex-direction: column;
    gap: 10px;
  }
  #nna-popups .nna-join-form input[type="email"],
  #nna-popups .nna-btn-primary {
    width: 100%;
    flex: 0 0 auto;
  }
  #nna-popups .nna-art-word {
    font-size: 1.7em;
  }

  /* The carousel's arrows sat either side of the card, so on a phone they took
     a third of the screen between them and left the card itself too narrow to
     read — the wording wrapped every two or three words. On mobile the card
     therefore gets the full width of the modal and the arrows drop underneath
     it, side by side, where they also become a proper thumb-sized target. */
  #nna-popups .nna-carousel {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    gap: 14px 18px;
  }
  #nna-popups .nna-carousel-track {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
  }
  /* The two columns split the full width the card sets, so the arrows are
     pushed to the inside edge of each half — which lands them as a centred
     pair with the grid gap between them. */
  #nna-popups .nna-carousel .nna-prev {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
  }
  #nna-popups .nna-carousel .nna-next {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
  }
  #nna-popups .nna-carousel-arrow {
    width: 46px;
    height: 46px;
  }
  #nna-popups .nna-carousel-arrow svg {
    width: 20px;
    height: 20px;
  }
  /* The dots stay — they are the only thing saying which of the three cards
     this is — but they tuck up under the arrows rather than standing off. */
  #nna-popups .nna-carousel-dots {
    margin-top: 12px;
  }
  #nna-popups .nna-sub-card {
    padding: 14px 16px 18px;
  }
  #nna-popups .nna-sub-note {
    font-size: 0.95em;
  }

  #nna-popups .nna-toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 12px 14px 14px;
  }
  #nna-popups .nna-toast-title {
    font-size: 1em;
    -webkit-line-clamp: 2;
  }
  #nna-popups .nna-toast-thumb {
    width: 72px;
    height: 54px;
  }
  #nna-popups .nna-toast-arrow {
    right: 8px;
    bottom: 8px;
    width: 24px;
    height: 24px;
  }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #nna-popups .nna-modal,
  #nna-popups .nna-modal-card,
  #nna-popups .nna-toast,
  #nna-popups .nna-toast-body {
    transition: none;
  }
}