/* public/css/newsletter.css
 *
 * Article newsletter signup card. Markup lives in
 * _includes/newsletter-form.html. Loaded only on /subscribe/ by the
 * conditional block in _includes/head.html, matching how sponsor.css and
 * merch.css are loaded.
 *
 * The card copies the .post-cta look in main.css on purpose, so the site has
 * one CTA card appearance rather than two. It is a separate file, not more
 * rules in main.css, because main.css is already 3,600 lines and is loaded on
 * every page including the ones that never show a form.
 *
 * NOTE: nothing here can be checked on localhost. The stylesheet hrefs in
 * head.html use absolute_url, so a local preview pulls PRODUCTION css. Verify
 * this file after deploying, never before.
 */

.newsletter-card {
  margin: 2.5rem auto;
  max-width: 38rem;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(214, 171, 113, 0.08),
    rgba(217, 119, 87, 0.08)
  );
  border: 1px solid rgba(214, 171, 113, 0.3);
  border-radius: 14px;
  text-align: center;
}

.newsletter-eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Muted, not orange. --amodei-orange on this tinted card measures 2.78:1 in
     light mode and fails WCAG AA at this size. Same reason as
     .post-cta-eyebrow in main.css. */
  color: var(--secondary-text);
}

/* The global `h2` rule in the theme block of main.css sets
   `color: var(--amodei-gold) !important`, so a plain class rule loses and the
   title renders gold. !important here matches that file's existing convention
   for headings rather than introducing a new one. */
.newsletter-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--heading-color) !important;
  margin: 0 0 0.5rem;
  border: 0;
  padding: 0;
}

.newsletter-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--secondary-text);
  margin: 0 auto 1.25rem;
  max-width: 32rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
  text-align: left;
  max-width: 26rem;
  margin: 0 auto;
}

.newsletter-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.newsletter-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--secondary-text);
}

/* main.css carries no form rules at all, so every property an input needs is
   set here. Without an explicit background and color the field inherits the
   user agent white, which is unreadable in dark mode. */
.newsletter-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  font-family: var(--font-body);
  /* 16px minimum. Anything smaller makes iOS Safari zoom the page on focus,
     which throws the reader out of the layout mid-signup. */
  font-size: 1rem;
  color: var(--text-color);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.newsletter-input::placeholder {
  color: var(--amodei-cloud-dark);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--amodei-orange);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.2);
}

/* Honeypot. Hidden from sight, from screen readers, and from the tab order,
   but still a real text input in the DOM so a form-filling bot completes it.
   `display: none` would make most bots skip it, which defeats the trap. */
.newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--secondary-text);
}

.newsletter-consent input[type="checkbox"] {
  /* 1.05rem, not 1rem, so the box lines up with the cap height of the first
     line of label text rather than sitting slightly high. */
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--amodei-orange);
  cursor: pointer;
}

.newsletter-consent label {
  cursor: pointer;
}

.newsletter-consent a {
  color: var(--text-color);
  text-decoration: underline;
}

/* Matches .post-cta-primary. Not built on the global .btn/.btn-primary,
   which set background-color: var(--text-color), near black. */
.newsletter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.25rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--amodei-orange);
  border: 1px solid var(--amodei-orange);
  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.newsletter-btn:hover:not(:disabled),
.newsletter-btn:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  background: #c56545;
  border-color: #c56545;
}

.newsletter-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Empty until the script writes to it. Zero margin so the card does not shift
   the moment a message appears. */
.newsletter-status {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  min-height: 1.1em;
  color: var(--secondary-text);
}

/* #b3402a, not --amodei-orange, which measures 2.78:1 on this card and fails
   WCAG AA. This darker red reaches 4.6:1 in light mode. */
.newsletter-status.is-error {
  color: #b3402a;
}

body.dark-mode .newsletter-status.is-error {
  /* The dark card needs the opposite direction: #b3402a on the dark slate
     background measures 3.1:1. Lightening it reaches 5.2:1. */
  color: #f0a08c;
}

/* Replaces the whole form after a successful submit. */
.newsletter-done {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-color);
}

/* Body copy on /subscribe/. The page layout gives no wrapper of its own, and
   without a max-width the paragraphs run the full column and read as a wall.
   Matched to .newsletter-card so the text block and the form share one edge. */
.subscribe-intro {
  max-width: 38rem;
  margin: 0 auto 1.5rem;
}

.subscribe-intro p {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--text-color);
}

/* Same !important note as .newsletter-title: the global h2 rule in main.css
   sets the gold colour with !important, so a class rule alone loses. */
.subscribe-intro h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--heading-color) !important;
  margin: 2rem 0 0.6rem;
  border: 0;
  padding: 0;
}

/* ── Compact variant ───────────────────────────────────────────────────────
   Used by the inline form at the end of every article, inside the sponsor
   card in _includes/post-cta.html. Deliberately quieter than the full card:
   no tinted background, no border, no eyebrow. The sponsor button above it
   keeps the only filled-pill treatment, because the measured history of that
   card is that a free action at equal visual weight takes the clicks. */
.newsletter-compact {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: 0;
  border-radius: 0;
}

.newsletter-compact .newsletter-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}

.newsletter-compact .newsletter-form {
  gap: 0.6rem;
  max-width: 28rem;
}

/* Field and button on one row on desktop, stacked on a phone. */
.newsletter-compact .newsletter-row {
  flex-direction: row;
  gap: 0.5rem;
  align-items: stretch;
}

.newsletter-compact .newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
}

.newsletter-compact .newsletter-btn {
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  /* No lift and no drop shadow here. Both belong to .post-cta-primary above
     it, and repeating them puts two equally prominent buttons in one card. */
  box-shadow: none;
}

.newsletter-compact .newsletter-btn:hover:not(:disabled),
.newsletter-compact .newsletter-btn:focus-visible:not(:disabled) {
  transform: none;
}

.newsletter-compact .newsletter-consent {
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Separates the sponsor ask from the newsletter ask, so the card reads as two
   things rather than one list of four options. */
.post-cta-divider {
  height: 1px;
  margin: 1.5rem auto 1.25rem;
  max-width: 28rem;
  background: rgba(214, 171, 113, 0.35);
}

/* The compact variant hides the field label rather than dropping it, so the
   input keeps a programmatic name for screen readers. The placeholder is not
   a label and disappears on typing.

   Named for this component rather than as a generic .visually-hidden utility:
   this stylesheet loads only on /subscribe/ and on articles, so a global
   sounding class defined here would silently do nothing anywhere else. */
.newsletter-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reserves the widget's height only once it has actually rendered, so the
   lazily loaded iframe does not shove the consent line down under the
   reader's cursor. Empty until public/js/newsletter.js renders into it. */
.newsletter-turnstile:not(:empty) {
  margin: 0.15rem 0;
}


/* ── Footer variant ────────────────────────────────────────────────────────
   The footer is #202020 with white text (public/css/footer.css), and it does
   NOT swap the theme variables. So .newsletter-title resolves to
   --heading-color, a dark slate, which is invisible there, and the consent
   line at --secondary-text (#5e5d59) measures about 1.9:1 on #202020.
   Every colour inside the footer is therefore set explicitly below.

   The double !important on the title is not decoration. main.css sets
   `h2 { color: var(--amodei-gold) !important }` globally and
   .newsletter-title already answers it with !important, so only a more
   specific selector that is also !important wins here. */
.footer-newsletter {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
}

.footer-newsletter .newsletter-card {
  text-align: left;
  max-width: 26rem;
  margin: 0;
}

.footer-newsletter .newsletter-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem;
}

.footer-newsletter .newsletter-consent,
.footer-newsletter .newsletter-status,
.footer-newsletter .newsletter-label {
  /* 0.75 white on #202020 is about 9.2:1. The 0.6 the footer uses for body
     text is fine for a copyright line but too low for a consent statement
     someone is being asked to read and agree to. */
  color: rgba(255, 255, 255, 0.75);
}

.footer-newsletter .newsletter-consent a,
.footer-newsletter .newsletter-done {
  color: rgba(255, 255, 255, 0.9);
}

.footer-newsletter .newsletter-input {
  color: #1f1e1d;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.footer-newsletter .newsletter-input::placeholder {
  color: #87867f;
}

.footer-newsletter .newsletter-status.is-error {
  /* #b3402a on #202020 is 2.4:1. Lightened to clear AA on the dark ground. */
  color: #f0a08c;
}

@media (max-width: 480px) {
  .newsletter-card {
    padding: 1.35rem 1.1rem;
  }

  .newsletter-compact {
    padding: 0;
  }

  .newsletter-title {
    font-size: 1.2rem;
  }

  .newsletter-compact .newsletter-title {
    font-size: 0.95rem;
  }

  /* A field and a button side by side leave about 150px for the address on a
     375px screen, which is too narrow to see what was typed. */
  .newsletter-compact .newsletter-row {
    flex-direction: column;
  }

  .newsletter-compact .newsletter-btn {
    width: 100%;
  }
}