/* Footer subscribe block.
   Theme CSS is also combined into themes/henna_boy/assets/cache/theme-*.css
   (PS_CSS_THEME_CACHE). That bundle is hashed from the file list, not
   contents, so layout rules here are loaded via the versioned <link> in
   hookDisplayHeader as well as registerStylesheet(). */

/* Beat `.hb-footer-band__row > * { flex: 1 1 320px; max-width: none; }`
   so a lone child is left-aligned and wide enough for one desktop row. */
.hb-footer-band__row > .nhnl-footer-subscribe {
  flex: 1 1 auto;
  max-width: 72rem;
  width: 100%;
  margin-right: auto;
  margin-left: 0;
}

.nhnl-footer-subscribe { padding: 0; }

.nhnl-footer-subscribe .nhnl-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heading heading"
    "fields button"
    "turnstile turnstile"
    "fineprint fineprint";
  column-gap: 0.6rem;
  row-gap: 0.55rem;
  align-items: center;
}

.nhnl-footer-heading {
  grid-area: heading;
  margin: 0;
  line-height: 1.25;
}

.nhnl-form-fields {
  grid-area: fields;
  min-width: 0;
}

/* Theme `.form-control { width: 100%; display: block }` is what we want
   inside this column so the input fills the remaining row space. */
.nhnl-footer-subscribe .nhnl-form-fields .form-control {
  width: 100%;
  min-height: 52px;
}

.nhnl-footer-subscribe .btn.btn-primary {
  grid-area: button;
  flex: 0 0 auto;
  white-space: nowrap;
}

.nhnl-ts-host { grid-area: turnstile; min-height: 0; }
/* Override the 65px min-height still present in a stale combined theme CSS bundle.
   interaction-only widgets must not leave a gap when no challenge is shown. */
.nhnl-ts-host .cf-turnstile { min-height: 0 !important; }
.nhnl-ts-host .cf-turnstile iframe { max-width: 100%; }

.nhnl-fineprint {
  grid-area: fineprint;
  font-size: 0.8rem;
  color: var(--hb-stone, #6B6358);
  margin: 0;
}

.nhnl-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Desktop: heading, email and Subscribe on one row; Turnstile under the input. */
@media (min-width: 900px) {
  .nhnl-footer-subscribe .nhnl-form {
    grid-template-columns: auto minmax(14rem, 1fr) auto;
    grid-template-areas:
      "heading fields button"
      ". turnstile ."
      "fineprint fineprint fineprint";
    column-gap: 0.85rem;
    row-gap: 0.5rem;
  }
}

/* Backup only: honeypot is also hidden with inline styles in the template. */
.nhnl-ts-hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}