/* ============================================================
   HINTRON NEWSLETTER (v37, 19 Oct 2026)
   B   .hx-nlband        band above the footer (_theme.face)
   (a) .hx-quote-optin   opt-in box on the quote basket (cart-view.face)
   Logic: js/hintron-newsletter.js. Design: canvas "Hintron Newsletter
   Signup Options", boards Prefooter (B) and Rfq (E).

   The --hx-* tokens in hintron-core.css are declared on .hx-page only
   (content pages), so both blocks re-declare the ones they use with the
   same values and fallbacks. hintron-core.css itself is not edited.
   ============================================================ */

.hintron-site .hx-nlband,
.hintron-site .hx-quote-optin {
  --hx-navy: var(--hintron-primary, #003E7E);
  --hx-navy-dk: var(--hintron-primary-dark, #002B58);
  --hx-red: var(--hintron-accent, #E63946);
  --hx-g300: var(--gray-300, #C2CCD8);
  --hx-g600: var(--gray-600, #4A5666);
  --hx-g700: var(--gray-700, #303B49);
  --hx-g900: var(--gray-900, #0E141C);
  --hx-serif: var(--font-display, 'Source Serif 4', Georgia, serif);
  --hx-sans: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif);
  --hx-cond: var(--font-condensed, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  --hx-focus: var(--shadow-focus, 0 0 0 3px rgba(0, 62, 126, .22));
  font-family: var(--hx-sans);
  box-sizing: border-box;
}

.hintron-site .hx-nlband *,
.hintron-site .hx-quote-optin * {
  box-sizing: border-box;
}

/* ---------- B. Band above the footer ---------- */

/* The footer keeps a 64px top margin (48px on phones) as room for the
   half of its quote card that lifts above the navy (56px on desktop,
   48px on phones, section 25). The band pulls itself down over that
   margin so its light background runs to the navy edge, and its bottom
   padding is the card's lift + 40px, so the card sits on the band and
   covers none of its text. */
.hintron-site .hx-nlband {
  display: block;
  margin: 0 0 calc(-1 * var(--space-16, 64px));
  padding: 44px 0 96px;
  background: #EAF2FA;
  border-top: 1px solid #DDE3EC;
}

.hintron-site .hx-nlband[hidden] {
  display: none;
}

/* Same width and gutters as .hintron-footer-inner. */
.hintron-site .hx-nlband-inner {
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-6, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.hintron-site .hx-nlband-eyebrow {
  display: block;
  margin: 0 0 8px;
  font-family: var(--hx-cond);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hx-red);
}

/* The site's global heading rules use !important. */
.hintron-site .hx-nlband h2.hx-nlband-title {
  margin: 0 0 8px !important;
  font-family: var(--hx-serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hx-navy) !important;
}

.hintron-site .hx-nlband p.hx-nlband-line {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--hx-g600) !important;
}

.hintron-site .hx-nlband-form {
  margin: 0;
  min-width: 0;
}

.hintron-site .hx-nlband-label,
.hintron-site .hx-quote-optin-fields label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--hx-g700);
}

.hintron-site .hx-nlband-row {
  display: flex;
  gap: 8px;
}

.hintron-site .hx-nlband-row input[type=email],
.hintron-site .hx-quote-optin-fields input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  font: 400 15px/1.2 var(--hx-sans);
  color: var(--hx-g900);
  background: #FFFFFF;
  border: 1px solid var(--hx-g300);
  border-radius: 4px;
  box-shadow: none;
}

.hintron-site .hx-nlband-row input[type=email]:focus,
.hintron-site .hx-quote-optin-fields input:focus {
  outline: none;
  border-color: var(--hx-navy);
  box-shadow: var(--hx-focus);
}

.hintron-site .hx-nlband-row input[aria-invalid=true],
.hintron-site .hx-quote-optin-fields input[aria-invalid=true] {
  border-color: var(--hx-red);
}

.hintron-site .hx-nlband-btn {
  flex: 0 0 auto;
  height: 44px;
  margin: 0;
  padding: 0 22px;
  font: 600 14px/1 var(--hx-sans);
  color: #FFFFFF;
  background: var(--hx-navy);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* A global theme rule makes buttons display:flex; centre the label. */
.hx-nlband .hx-nlband-btn { align-items: center; justify-content: center; text-align: center; }

.hintron-site .hx-nlband-btn:hover {
  background: var(--hx-navy-dk);
}

.hintron-site .hx-nlband-btn:focus-visible {
  outline: none;
  box-shadow: var(--hx-focus);
}

.hintron-site .hx-nlband-btn:disabled {
  opacity: .65;
  cursor: progress;
}

.hintron-site .hx-nlband p.hx-nlband-note {
  margin: 8px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--hx-g600) !important;
}

.hintron-site .hx-nlband-note a,
.hintron-site .hx-quote-optin-row a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Status line, shared by both blocks. */
.hintron-site .hx-nlband p.hx-nlband-msg,
.hintron-site .hx-quote-optin p.hx-quote-optin-msg {
  margin: 10px 0 0 !important;
  padding: 8px 12px;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--hx-navy) !important;
  background: #E5EEFA;
  border: 1px solid #B8CDEC;
  border-radius: 4px;
}

.hintron-site .hx-nlband p.hx-nlband-msg.is-error,
.hintron-site .hx-quote-optin p.hx-quote-optin-msg.is-error {
  color: #9B1C26 !important;
  background: #FDECEE;
  border-color: var(--hx-red);
}

.hintron-site .hx-nlband-msg a,
.hintron-site .hx-quote-optin-msg a {
  color: inherit;
  text-decoration: underline;
}

.hintron-site .hx-nlband [hidden],
.hintron-site .hx-quote-optin [hidden] {
  display: none !important;
}

@media (min-width: 1024px) {
  .hintron-site .hx-nlband-inner {
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 48px;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .hintron-site .hx-nlband {
    margin-bottom: calc(-1 * var(--space-12, 48px));
    padding-bottom: 88px;
  }

  .hintron-site .hx-nlband-inner {
    padding-inline: var(--space-4, 16px);
  }

  .hintron-site .hx-nlband h2.hx-nlband-title {
    font-size: 24px !important;
  }
}

@media (max-width: 479px) {
  .hintron-site .hx-nlband-row {
    flex-direction: column;
  }

  /* In a column, flex:1 would size the height, not the width. */
  .hintron-site .hx-nlband-row input[type=email] {
    flex: 0 0 auto;
  }

  .hintron-site .hx-nlband-btn {
    width: 100%;
  }
}

/* Don't repeat the band where the page already offers a signup. */
.hintron-site:has(.hx-page.hx-nl) .hx-nlband,
.hintron-site:has([data-hx-quote-optin]) .hx-nlband {
  display: none;
}

/* ---------- (a) Opt-in on the quote basket ---------- */

.hintron-site .hx-quote-optin {
  margin: 16px 0;
  padding: 14px 16px;
  background: #E5EEFA;
  border: 1px solid #B8CDEC;
  border-radius: 4px;
}

.hintron-site .hx-quote-optin-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hintron-site .hx-quote-optin-row input[type=checkbox] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--hx-navy);
  cursor: pointer;
}

.hintron-site .hx-quote-optin-row label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #0A3F7A;
  cursor: pointer;
}

.hintron-site .hx-quote-optin-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 599px) {
  .hintron-site .hx-quote-optin-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}