/* Form fields: the typography stays the same in EVERY state (BNN, 2026-10-24).
   Problem seen in Chrome/Safari: when an autofill suggestion is hovered the e-mail text is drawn about 1 px smaller than
   after it is chosen. The theme sets the size in two places (`.field__input` 13px and `input[type=email]` 14px) and the
   e-mail fields had `font-family: HelveticaNeue` with no fallback, so the browser's autofill states could end up on a
   different rule or font. Here every field gets one explicit set of values, and the autofill states get the same values
   with !important, so no state can change size, spacing or font.
   The values are the ones the fields already had (nothing changes in the normal state):
     A: footer, pop-up and contact e-mail  14 / 24, tracking .4px
     B: "Join the list" e-mail               14 / 24, normal tracking
     C: contact name and phone              16 / 24, tracking .4px */

:root { --bnn-field-font: "Helvetica Neue", HelveticaNeue, Arial, sans-serif; }

/* normal, hover, focus */
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email) {
  font-family: var(--bnn-field-font);
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: .4px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#dataForm #email {
  font-family: var(--bnn-field-font);
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:is(#ContactForm-name, #ContactForm-phone, #ContactForm-body) {
  font-family: var(--bnn-field-font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: .4px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* autofill states: same values, !important. The prefixed and the standard pseudo-class are in separate rules,
   because one unknown selector would make a browser drop the whole rule. */
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email):-webkit-autofill,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email):-webkit-autofill:hover,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email):-webkit-autofill:focus,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email):-webkit-autofill:active {
  font-family: var(--bnn-field-font) !important;
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  letter-spacing: .4px !important;
}
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email):autofill {
  font-family: var(--bnn-field-font) !important;
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  letter-spacing: .4px !important;
}
#dataForm #email:-webkit-autofill,
#dataForm #email:-webkit-autofill:hover,
#dataForm #email:-webkit-autofill:focus,
#dataForm #email:-webkit-autofill:active {
  font-family: var(--bnn-field-font) !important;
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
}
#dataForm #email:autofill {
  font-family: var(--bnn-field-font) !important;
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
}
:is(#ContactForm-name, #ContactForm-phone):-webkit-autofill,
:is(#ContactForm-name, #ContactForm-phone):-webkit-autofill:hover,
:is(#ContactForm-name, #ContactForm-phone):-webkit-autofill:focus,
:is(#ContactForm-name, #ContactForm-phone):-webkit-autofill:active {
  font-family: var(--bnn-field-font) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  letter-spacing: .4px !important;
}
:is(#ContactForm-name, #ContactForm-phone):autofill {
  font-family: var(--bnn-field-font) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  letter-spacing: .4px !important;
}

/* The text the browser shows for a placeholder (and, in some browsers, for the autofill preview) gets the same
   typography as the field itself, so it can never fall back to the browser's own form font (13px system font, weight 400:
   narrower and heavier, which is what the autofill preview looked like). */
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #ContactForm-email)::placeholder {
  font-family: var(--bnn-field-font); font-size: 14px; line-height: 24px; font-weight: 300; letter-spacing: .4px;
}
#dataForm #email::placeholder { font-family: var(--bnn-field-font); font-size: 14px; line-height: 24px; font-weight: 300; letter-spacing: normal; }
:is(#ContactForm-name, #ContactForm-phone, #ContactForm-body)::placeholder {
  font-family: var(--bnn-field-font); font-size: 16px; line-height: 24px; font-weight: 300; letter-spacing: .4px;
}

/* Autofilled text takes the colour of the field. The theme forces `-webkit-text-fill-color: white !important` on every
   autofilled input: fine on the black scenes, but white text on white on the contact page (autofilled values were invisible). */
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email, #ContactForm-email, #ContactForm-name, #ContactForm-phone):-webkit-autofill,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email, #ContactForm-email, #ContactForm-name, #ContactForm-phone):-webkit-autofill:hover,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email, #ContactForm-email, #ContactForm-name, #ContactForm-phone):-webkit-autofill:focus {
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Chrome paints an autofilled field with its own black text, so `currentColor` above turns black on the black scenes
   (footer, pop-up, "Join the list": invisible text). On those the text is written out in white; the contact page stays dark. */
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email):-webkit-autofill,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email):-webkit-autofill:hover,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email):-webkit-autofill:focus,
:is(footer.footer input.field__input, #newsletter-popupform input.field__input, #dataForm #email):-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  caret-color: #fff;
  /* Safari paints its own light background and dark text on an autofilled field; a black inner shadow covers it */
  box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* "Join the list" e-mail on phones: 16 px in every state (BNN, 2026-10-24). iOS Safari zooms the page into any field under
   16 px and does not zoom back. The other fields keep their sizes; this one is the only e-mail field that sits mid-page,
   where the zoom pushes the product out of view. Same pins as above, one size up. */
@media (max-width: 767px) {
  #dataForm #email,
  #dataForm #email::placeholder { font-size: 16px; }
  #dataForm #email:-webkit-autofill,
  #dataForm #email:-webkit-autofill:hover,
  #dataForm #email:-webkit-autofill:focus,
  #dataForm #email:-webkit-autofill:active { font-size: 16px !important; }
}
@media (max-width: 767px) {
  #dataForm #email:autofill { font-size: 16px !important; }
}