/* NEWSLETTERS
   The Newsletters page (custom-newsletters.hbs), its signup dialog and page notice, and the shared
   newsletter email form used there, on the homepage and in the footer (partials/newsletters/).
   The page is assembled from existing theme pieces (tag archive header, .snippets-title, .snippet,
   the homepage newsletter block, the FAQ accordion), so this file only adds what they lack.
   Buttons follow the site accent like every other .btn, and invert in dark mode. */


/* Shared email form. Type follows the client's signup spec (at the 16px root of a 1440px screen):
   field Inter 17px, button Inter 600 16px, fine print Inter 14px, "Explore" Inter 600 13px caps. */

.nl-form {
  gap: 0.75rem;
}

.nl-form-row {
  display: flex;
  gap: 0.75rem;
}

.nl-form-row .nl-form-input {
  flex: 1 1 auto;
  font-size: 0.8rem;
  min-width: 0;
  padding-bottom: 0.875rem;
  padding-top: 0.875rem;
}

/* The field gives way, never the button */
.nl-form .nl-form-submit {
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* The arrow nudges right on hover, and only a little */
.nl-form-submit svg,
.nl-form-explore svg {
  transition: transform 0.2s ease-out;
}

.nl-form-submit:hover svg,
.nl-form-submit:focus-visible svg,
.nl-form-explore a:hover svg,
.nl-form-explore a:focus-visible svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .nl-form-submit svg,
  .nl-form-explore svg {
    transition: none;
  }
}

/* Fine print: smaller and quieter than the "Explore" link under it, with room above */
.nl-form .nl-form-note {
  font-size: 12px;
  font-weight: 400;
}

.nl-form-fallback {
  font-family: var(--font-accent);
  font-size: 0.875rem;
  margin: 0;
}

.nl-form-fallback-link {
  color: inherit;
  text-decoration: underline;
}

/* Homepage block and footer: field and button side by side, stacked on phones */
@media (max-width: 479.98px) {
  .nl-form--inline .nl-form-row,
  .nl-form--footer .nl-form-row {
    flex-direction: column;
  }
}

/* Dialog: stacked, full-width button */
.nl-form--dialog .nl-form-row {
  flex-direction: column;
}

.nl-form--dialog .nl-form-submit {
  width: 100%;
}

/* Footer heading and description above the form (default.hbs): Merriweather 700 at 30px over
   Georgia at 20px, so the heading leads */
.nl-footer-title {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.nl-footer-text {
  font-family: var(--gh-font-body, var(--font-body));
  font-size: 0.85rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

/* Footer: field and button in a white box on every footer background, 3rem (48px) tall from 480px
   up. The box carries the focus ring in the footer's own text colour, so it shows on dark, light
   and accent footers alike. */
.nl-form--footer {
  margin-bottom: 0.5rem;
}

.nl-form--footer .nl-form-row {
  background-color: #fff;
  gap: 0.5rem;
  padding: 0.5rem;
}

footer.footer-Light .nl-form--footer .nl-form-row,
[data-contrast="#000000" i] .nl-form--footer .nl-form-row {
  box-shadow: inset 0 0 0 1px var(--color-lightest);
}

.nl-form--footer .nl-form-row:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.nl-form--footer .nl-form-input {
  background-color: transparent;
  border: 0;
  color: #1a1817;
  padding: 0.5rem;
}

.nl-form--footer .nl-form-input::placeholder {
  color: #6e6e6e;
}

/* The row's ring replaces the field's own (a dark-mode ring would vanish on the white box) */
.nl-form--footer .nl-form-input:focus-visible {
  outline: 0;
}

.nl-form--footer .nl-form-submit {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Side by side: a fixed height, and the field and button stretch to fill it (stacked on phones) */
@media (min-width: 480px) {
  .nl-form--footer .nl-form-row {
    height: 3rem;
    padding: 0.25rem;
  }

  .nl-form--footer .nl-form-input,
  .nl-form--footer .nl-form-submit {
    padding-bottom: 0;
    padding-top: 0;
  }
}

.nl-form--footer .form-status {
  font-size: 0.8125rem;
}

/* Dark and Accent footers force white text and links (.text-white / data-contrast, with !important),
   so the note is muted with opacity rather than colour (still 7:1 on the dark footer) */
footer[data-theme] .nl-form-note {
  opacity: 0.65;
}

/* "Explore all newsletters" under the fine print, in the style of the "View all" links */
.nl-form-explore {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  margin: 0.25rem 0 0;
}

.nl-form-explore a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.375rem;
  text-decoration: underline;
}

.nl-form-explore a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.nl-form-explore a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.nl-form-explore svg {
  height: 0.875rem;
  width: 0.875rem;
}

/* No link to the page you are already on */
.custom-newsletters .nl-form-explore {
  display: none;
}

/* Homepage block: field, button and fine print a size down, in the proportions of unhyd.com's
   block (the field stays at 16px or more, below which iOS zooms in on focus) */
.subscribe-cta .nl-form-row .nl-form-input {
  font-size: 14px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.subscribe-cta .nl-form .nl-form-submit {
  font-size: 14px;
}

.subscribe-cta .nl-form .nl-form-note {
  font-size: 12px;
  margin-top: 0.25rem;
}

/* A slightly larger arrow on "Explore all newsletters" in the homepage block */
.newsletter-cta .nl-form-explore svg {
  height: 1rem;
  width: 1rem;
}


/* Newsletter cards: post snippets (.snippet) with a description and a button */

.nl-cards {
  display: grid;
  gap: 3rem 2rem;
}

.nl-card {
  display: flex;
  flex-direction: column;
}

/* Descriptions in the article face (Georgia) */
.nl-card-text {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

/* Accent like the Load More button; --nl-accent-contrast is set on the page (custom-newsletters.hbs) */
.nl-card-cta,
.nl-manage-button {
  background-color: var(--ghost-accent-color);
  color: var(--nl-accent-contrast, #fff);
}

.nl-card-cta {
  align-self: flex-start;
  margin-top: auto;
}

.nl-card-cta[data-state="loading"] {
  cursor: progress;
}

/* A plus before "Subscribe"; once subscribed, the theme's text-only button (.btn.simple) with a check */
.nl-cta-icon {
  display: inline-block;
  margin-right: 0.375rem;
  vertical-align: -0.125em;
}

.nl-cta-icon svg {
  display: block;
  height: 0.75rem;
  width: 0.75rem;
}

.nl-card-cta .nl-cta-icon--check,
.nl-card-cta.simple .nl-cta-icon--plus {
  display: none;
}

.nl-card-cta.simple .nl-cta-icon--check {
  display: inline-block;
}

/* Same height as the filled buttons, so labels line up across the cards */
.nl-card-cta.simple {
  padding-bottom: 0.7rem;
  padding-top: 0.8rem;
}

.nl-card-cta:focus-visible,
.nl-manage-button:focus-visible {
  outline: 2px solid var(--color-titles);
  outline-offset: 2px;
}


/* Reader benefits under the cards (newsletters/benefits.hbs): the Product cards of the
   "newsletters-benefits" page, as one row of columns between rules (stacked under 720px), divided
   like the homepage feature grid. Ghost's card CSS loads after the theme's and the post styles in
   mews-article.css use .mews, so these rules carry the extra classes they need to win. */

.nl-benefits {
  border-bottom: 1px solid var(--color-lightest);
  border-top: 1px solid var(--color-lightest);
  display: grid;
  margin-top: 3.5rem;
}

.nl-benefits .kg-product-card {
  display: block;
  margin: 0;
  padding: 2rem 0;
}

.nl-benefits .kg-product-card + .kg-product-card {
  border-top: 1px solid var(--color-lightest);
}

/* Icon on the left, beside the title and description */
.nl-benefits .kg-product-card .kg-product-card-container {
  align-items: start;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  column-gap: 1.25rem;
  display: grid;
  font-family: var(--font-accent);
  grid-template-columns: auto minmax(0, 1fr);
  max-width: none;
  padding: 0;
  row-gap: 0.25rem;
}

.nl-benefits .kg-product-card .kg-product-card-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 2rem;
  justify-self: start;
  margin: 0;
  object-fit: contain;
  width: 2rem;
}

/* Icons are uploaded black on transparent, so dark mode turns them white */
html.theme-dark .nl-benefits .kg-product-card-image {
  filter: invert(1);
}

.nl-benefits .kg-product-card .kg-product-card-title-container,
.nl-benefits .kg-product-card .kg-product-card-description {
  grid-column: 2;
  margin: 0;
  width: auto;
}

/* A card without an icon takes the full width */
.nl-benefits .kg-product-card-container:not(:has(.kg-product-card-image)) {
  grid-template-columns: minmax(0, 1fr);
}

.nl-benefits .kg-product-card-container:not(:has(.kg-product-card-image)) > * {
  grid-column: 1;
}

.nl-benefits .kg-product-card h4.kg-product-card-title {
  color: var(--color-titles);
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  text-wrap: pretty;
}

.nl-benefits .kg-product-card .kg-product-card-container .kg-product-card-description :is(p, ul, ol) {
  color: var(--color-lighter);
  font-family: var(--font-accent);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  opacity: 1;
}

.nl-benefits .kg-product-card .kg-product-card-container .kg-product-card-description :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 0.5em;
}

.nl-benefits .kg-product-card-description a {
  color: inherit;
  text-decoration: underline;
}

/* Star ratings and buttons are not part of this design */
.nl-benefits .kg-product-card .kg-product-card-rating,
.nl-benefits .kg-product-card a.kg-product-card-button {
  display: none;
}


/* "Already subscribed?": the homepage newsletter block (mews-blocks.css) with a button, narrowed to
   a centred 58rem box with a hairline between the copy and the button. From 960px the hairline
   runs the full height and the button's column is only as wide as the button; below, they stack
   with the hairline between. */

.nl-manage .newsletter-cta-inner {
  align-items: stretch;
  margin-inline: auto;
  max-width: 58rem;
}

.nl-manage-action {
  border-top: 1px solid var(--color-lightest);
  justify-items: start;
  padding-top: 2rem;
}


/* FAQ: section title and questions in the post content column (.mews-article-content, 44rem) */

.nl-faq-column {
  margin: 0 auto;
  max-width: 44rem;
}

.nl-faq .kg-toggle-card:not(.kg-toggle-card + .kg-toggle-card) {
  margin-top: 0;
}


/* Signup dialog (native <dialog>, so it sits in the top layer) */

html.nl-dialog-open {
  overflow: hidden;
}

.nl-dialog {
  background-color: var(--color-body-bg);
  border: 0;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
  color: var(--color-body-text);
  max-height: calc(100dvh - 2rem);
  max-width: min(36rem, calc(100vw - 2rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  width: 100%;
}

/* Literal colours: older Safari does not pass custom properties into ::backdrop */
.nl-dialog::backdrop {
  background-color: rgba(26, 24, 23, 0.55);
}

html.theme-dark .nl-dialog {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
}

html.theme-dark .nl-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

.nl-dialog-inner {
  padding: 2.5rem;
  position: relative;
}

.nl-dialog-close {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-titles);
  cursor: pointer;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: 2.75rem;
}

.nl-dialog-close svg {
  height: 1.25rem;
  width: 1.25rem;
}

.nl-dialog-close:focus-visible {
  outline: 2px solid var(--color-titles);
  outline-offset: -2px;
}

.nl-dialog-eyebrow {
  color: var(--color-lighter);
  margin-bottom: 0.75rem;
  padding-right: 3rem;
}

.nl-dialog-title {
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  padding-right: 2rem;
}

.nl-dialog-lede {
  color: var(--color-lighter);
  font-family: var(--gh-font-body, var(--font-body));
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.nl-dialog-view > * + * {
  margin-top: 1rem;
}

.nl-dialog-account,
.nl-dialog-message,
.nl-dialog-paused {
  font-family: var(--font-accent);
  line-height: 1.6;
  margin-bottom: 0;
}

.nl-dialog-account {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.nl-dialog-message {
  color: var(--color-titles);
  font-size: 1rem;
}

.nl-dialog-message:focus {
  outline: none;
}

.nl-dialog-message--done svg {
  height: 1.25rem;
  margin-right: 0.5rem;
  vertical-align: -0.25em;
  width: 1.25rem;
}

.nl-dialog-email {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.nl-dialog-paused {
  border-left: 2px solid var(--color-titles);
  color: var(--color-body-text);
  font-size: 0.875rem;
  padding-left: 1rem;
}

.nl-dialog-paused a {
  color: inherit;
  text-decoration: underline;
}

.nl-dialog-confirm {
  width: 100%;
}

/* !important: the vendor .btn rule pins opacity to 1 with !important */
.nl-dialog-confirm[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7!important;
}

@media (prefers-reduced-motion: no-preference) {
  .nl-dialog[open] {
    animation: nl-dialog-in 0.2s ease-out;
  }

  @keyframes nl-dialog-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
}


/* Page notice (results after a sign-in link). The live region stays in the page while hidden. */

.nl-notice {
  align-items: center;
  background-color: var(--color-titles);
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
  color: var(--color-body-bg);
  display: flex;
  font-family: var(--font-accent);
  font-size: 0.9375rem;
  gap: 1rem;
  left: 50%;
  line-height: 1.5;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  position: fixed;
  transform: translateX(-50%);
  width: min(36rem, calc(100vw - 2rem));
  z-index: 999;
}

.nl-notice:not(.is-visible) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  width: 1px;
}

.nl-notice-text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.5rem 0;
}

.nl-notice-action {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.nl-notice-close {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.nl-notice-close svg {
  height: 1rem;
  width: 1rem;
}

.nl-notice :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* Media Queries */

/* 960px */
@media (min-width: 960px) {
  .nl-manage .newsletter-cta-inner {gap: 0; grid-template-columns: minmax(0, 1fr) auto;}
  .nl-manage .newsletter-cta-copy {padding-right: 2.5rem;}
  .nl-manage .nl-manage-action {align-content: center; border-left: 1px solid var(--color-lightest); border-top: 0; display: grid; padding: 0 0 0 2.5rem;}
}

/* 720px */
@media (min-width: 720px) {
  .nl-manage .newsletter-cta-inner {padding: 2.75rem 2.5rem;}
  .nl-cards {grid-template-columns: repeat(3, minmax(0, 1fr));}
  /* However many cards the page has, in one row */
  .nl-benefits {grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;}
  .nl-benefits .kg-product-card {padding: 2rem clamp(1rem, 2.5vw, 2.5rem);}
  .nl-benefits .kg-product-card + .kg-product-card {border-left: 1px solid var(--color-lightest); border-top: 0;}
  .nl-benefits .kg-product-card:first-child {padding-left: 0;}
  .nl-benefits .kg-product-card:last-child {padding-right: 0;}
}

@media (max-width: 719.98px) {
  /* 16px or more: iOS zooms into smaller fields on focus, and the root is 14px here */
  .nl-form .nl-form-input {font-size: max(1.0625rem, 16px);}
  .nl-dialog {margin-bottom: auto; margin-top: 1rem;}
  .nl-dialog-inner {padding: 2rem 1.25rem 1.5rem;}
  .nl-dialog-title {font-size: 1.75rem;}
}

/* 480px */
@media (max-width: 479.98px) {
  .nl-card h3.text-xxl {font-size: 1.25rem;}
}