/* Footer (BNN footer redesign, 2026-10-24).
   The theme shows the footer ONLY on the home page (it is hidden on the other 68 pages).
   Order and content are unchanged: "See you at launch" + e-mail field + JOIN, then the e-mail and Instagram links.
   What changed: one clear primary action; the two links become a quiet second group set apart by space;
   the vertical gaps follow one rhythm; the footer is about a third shorter; every state keeps the same height. */

footer.footer {
  --ft-pad-top: 60px;      /* spacing steps from DESIGN-SYSTEM.md section 2.3 */
  --ft-pad-bottom: 48px;
  --ft-gap: 120px;         /* between the signup (button) and the links: the links are a quiet sign-off at the very end */
  --ft-error-room: 28px;   /* room kept for the one-line form error, so nothing moves when it appears */
  --ft-signup: 185px;      /* heading 48 + gap 32 + field 45 + gap 12 + JOIN row 48 on a phone */
  padding-top: var(--ft-pad-top);
  padding-bottom: calc(var(--ft-pad-bottom) + env(safe-area-inset-bottom, 0px));
  /* Above the fixed logo (z-index 1), below the sound switch (3) and the popup (9999): on a low window the footer
     slides over the logo, so the logo never covers the signup field or the links. */
  position: relative;
  z-index: 2;
}

/* Rows: signup, links. No automatic row gaps, every distance is set below. */
footer.footer .footer__content-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
footer.footer .footer-block--newsletter {
  grid-row: 1;
  margin-top: 0;           /* the theme adds 30 px here, on top of the footer padding */
  margin-bottom: calc(var(--ft-gap) - var(--ft-error-room));
}
footer.footer .footer-block__newsletter { display: block; }
/* the theme stacks the field and the button 30 px apart and gives the input a 1 px margin: JOIN sits 12 px under the field, same left edge */
footer.footer #newsletter-footerform .field { gap: 0; }
footer.footer #newsletter-footerform input.field__input { margin: 0; }
footer.footer .investor-container,
footer.footer .follow-us-container {
  margin-top: 0;
  max-width: none;
  justify-content: flex-start;
}
footer.footer .investor-container { grid-row: 2; }
footer.footer .follow-us-container { grid-row: 3; margin-top: 4px; }

/* Signup: the full width of the column, and one fixed height for form, error and confirmation,
   so the page does not jump when the state changes. */
footer.footer .footer-block__newsletter,
footer.footer .footer__newsletter,
footer.footer .newsletter-form__field-wrapper { width: 100%; max-width: none; }
footer.footer .footer-block__newsletter { min-height: calc(var(--ft-signup) + var(--ft-error-room)); }
footer.footer h2.footer-block__heading.inline-richtext { margin-top: 0; margin-bottom: 32px; }

/* JOIN (BNN-XXX join button, concept 2 "line row", 2026-10-24): a row 48 px high under the field, the whole row is the target.
   "JOIN" on the left, an arrow on the right, one 1 px line underneath (the same language as the field's underline).
   No box, no fill. Hover/pressed/focus/busy change only the line and the text colour: nothing moves except the arrow. */
footer.footer #newsletter-footerform button.newsletter-form__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  inset: auto;             /* the theme offsets the button by -1 px */
  width: 100%;
  height: 48px;
  min-height: 0;
  margin: 12px 0 0;
  padding: 0;
  background: transparent;
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0;
  box-shadow: none;
  font-family: "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
footer.footer #newsletter-footerform button.newsletter-form__button::before,
footer.footer #newsletter-footerform button.newsletter-form__button::after { content: none; display: none; }
footer.footer #newsletter-footerform button .email_btn { display: inline; font: inherit; letter-spacing: inherit; color: inherit; }
/* the arrow is decoration: it is added in CSS so the markup stays as it was (the button's own name is "Subscribe") */
footer.footer #newsletter-footerform button .email_btn::after {
  content: "\2192";
  content: "\2192" / "";
  display: inline-block;
  position: absolute;
  right: 6px;             /* rests 6 px in from the line's end and slides to the end on hover */
  transition: transform .2s ease;
}
footer.footer #newsletter-footerform button.newsletter-form__button:active {
  /* !important: the saved theme forces `color:#fff!important` and a black background on this button (its autofill fix) */
  color: rgba(255, 255, 255, .6) !important;
  border-bottom-color: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .6);
}
footer.footer #newsletter-footerform button.newsletter-form__button:disabled,
footer.footer #newsletter-footerform button.newsletter-form__button[aria-busy="true"] {
  color: rgba(255, 255, 255, .4) !important;
  border-bottom-color: rgba(255, 255, 255, .3);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
/* hover only where there is a pointer: on a phone a hover would stay "stuck" after a tap */
@media (hover: hover) {
  footer.footer #newsletter-footerform button:hover:not(:active):not(:disabled):not([aria-busy="true"]) {
    border-bottom-color: #fff;
    box-shadow: 0 1px 0 0 #fff;
  }
  footer.footer #newsletter-footerform button:hover:not(:active):not(:disabled):not([aria-busy="true"]) .email_btn::after { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  footer.footer #newsletter-footerform button,
  footer.footer #newsletter-footerform button .email_btn::after { transition: none; }
  footer.footer #newsletter-footerform button:hover .email_btn::after { transform: none; }
}

/* Links: secondary, so smaller than the signup heading. Still Bebas, still underlined. */
footer.footer p.investor-email,
footer.footer p.follow-us-email { margin: 0; }
footer.footer p.investor-email a,
footer.footer p.follow-us-email a {
  display: inline-block;
  padding-block: 7px;
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* Keyboard focus without boxes: the signal is on the element's own line. The field's underline turns white and
   thicker, the JOIN line turns white and thicker, the link underline gets thicker (the theme had none, gap G12). */
footer.footer a:focus-visible,
footer.footer input:focus-visible,
footer.footer button:focus-visible { outline: none; }
footer.footer input.field__input:focus-visible { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff; }
footer.footer #newsletter-footerform button.newsletter-form__button:focus-visible { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff; }
footer.footer p.investor-email a:focus-visible,
footer.footer p.follow-us-email a:focus-visible { text-decoration-thickness: 2px; }

/* Tablet and desktop: the two links sit side by side under the signup. */
@media (min-width: 768px) {
  footer.footer {
    --ft-pad-top: 90px;
    --ft-pad-bottom: 72px;
    --ft-gap: 150px;
    --ft-signup: 197px;    /* heading 60 + gap 32 + field 45 + gap 12 + JOIN row 48 */
  }
  footer.footer .footer__content-top {
    grid-template-columns: max-content max-content;
    column-gap: clamp(32px, 6vw, 72px);   /* 46 px at 768, 72 px from 1200: always fits the column */
    justify-content: start;
  }
  footer.footer .footer-block--newsletter { grid-column: 1 / -1; }
  footer.footer .investor-container { grid-column: 1; grid-row: 2; }
  footer.footer .follow-us-container { grid-column: 2; grid-row: 2; margin-top: 0; }
  footer.footer .footer-block__newsletter,
  footer.footer .footer__newsletter,
  footer.footer .newsletter-form__field-wrapper { max-width: 648px; }
}

/* Phone: the e-mail address must fit on one line at every width (about 15.2 x font-size wide in Bebas). */
@media (max-width: 767px) {
  footer.footer p.investor-email a,
  footer.footer p.follow-us-email a {
    font-size: min(24px, calc((100vw - 78px) / 15.2));
    line-height: 1.5;
  }
}