/* ==========================================================================
   Site footer — interaction layer for the Elementor-native template
   (figma-templates/redesign/build-footer.mjs; Figma 1:1553 desktop, 11:1395 mobile).

   Layout, typography, colours and spacing are Elementor settings — edit them in
   Elementor. This file only restyles the Klaviyo embed (the one HTML widget) and adds
   link hovers inside the legal line. Back-to-top lives in js/app.js.
   ========================================================================== */

/* Content-sized row items. Elementor's default container --width:100% would make each as
   wide as the footer column and push the rest off-screen. Two classes beat that default; a
   width set in Elementor (element rule, three classes — e.g. the columns' tablet/phone
   widths) still wins. */
.e-con.nw-footer__col,
.e-con.nw-payments,
.e-con.nw-footer__top { --width: auto; }

/* Buttons without a fill of their own ("Back to top"): Elementor's default colour scheme
   would paint them in the kit's accent green. A colour set in Elementor still wins. */
.nw-footer .elementor-widget-button .elementor-button { background-color: transparent; }

/* Brand block sits flush left (Figma), not centred like Elementor's image / social defaults. */
.nw-footer .nw-footer__logo { text-align: left; }
.nw-footer .nw-social { --justify-content: flex-start; }
.nw-footer .nw-social .elementor-widget-container,
.nw-footer .nw-social .elementor-social-icons-wrapper.elementor-grid { text-align: left; justify-content: start; justify-items: start; }

/* The email address never breaks mid-word. */
.nw-footer .nw-footer__col--contact .elementor-icon-list-text { overflow-wrap: normal; word-break: normal; }

.nw-footer .nw-footer__legal a { text-decoration: none; transition: color 0.2s ease; }
.nw-footer .nw-footer__legal a:hover,
.nw-footer .nw-footer__legal a:focus-visible { color: var(--nw-white); }

/* Tablet: the link columns wrap onto two rows, and as flex items the second row's widths
   never matched the first ("Visit & contact" sat under neither Pavilions nor Shop). Three
   equal tracks instead: brand | Pavilions | Shop, then Company | Visit & contact, which
   starts on the Pavilions line. */
@media (min-width: 768px) and (max-width: 1200px) {
  .nw-footer .e-con.nw-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
  .nw-footer .e-con.nw-footer__cols > .e-con { width: auto; max-width: none; }
  .nw-footer .e-con.nw-footer__cols > .nw-footer__col--contact { grid-column: span 2; }
  .nw-footer .nw-footer__brand .elementor-widget-text-editor { max-width: 100%; }
}
/* Tablet: the newsletter stacks, so the form and its note sit flush left under the
   heading instead of centred below it. */
@media (min-width: 768px) and (max-width: 1024px) {
  .nw-footer .e-con.nw-footer__signup { align-items: flex-start; }
  .nw-footer .nw-footer__signup .elementor-widget-text-editor { text-align: left; }
  .nw-footer .klaviyo-form form { margin-left: 0 !important; margin-right: 0 !important; } /* Klaviyo: 600px, auto margins */
}

/* Line breaks that only exist for the desktop layout. */
@media (max-width: 767px) {
  .nw-footer .nw-br-d br { display: none; }
}
/* Small phones: one link column, so long items like the email don't run out of room. */
@media (max-width: 359px) {
  .nw-footer .e-con.nw-footer__col { --width: 100%; }
}

/* Reserves the pill's height while Klaviyo loads, so the band doesn't jump. */
.nw-footer .elementor-element.nw-footer__form { min-height: 64px; }

/* Klaviyo embed (form TnNZ65) restyled to the Figma pill: inputs + button on one row.
   Klaviyo writes inline styles, hence the !importants. If the form gains or loses fields
   in Klaviyo, the row just re-flows — every input shares the pill equally. */
.nw-footer .klaviyo-form form { padding: 0 !important; }
.nw-footer .klaviyo-form form > div:first-of-type {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 8px 8px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.nw-footer .klaviyo-form [data-testid="form-row"] { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
.nw-footer .klaviyo-form [data-testid="form-row"]:last-child { flex: none !important; }
.nw-footer .klaviyo-form [data-testid="form-component"] { padding: 0 !important; }
.nw-footer .klaviyo-form label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.nw-footer .klaviyo-form input[type="text"],
.nw-footer .klaviyo-form input[type="email"] {
  width: 100% !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--nw-white) !important;
  font-family: var(--nw-font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
}
.nw-footer .klaviyo-form input::placeholder { color: rgba(255, 255, 255, 0.5) !important; font-family: var(--nw-font-body) !important; opacity: 1 !important; }
.nw-footer .klaviyo-form [data-testid="form-row"] + [data-testid="form-row"] input { padding-left: 16px !important; border-left: 1px solid rgba(255, 255, 255, 0.2) !important; }
.nw-footer .klaviyo-form .klaviyo-form-button {
  width: auto !important;
  height: auto !important;
  padding: 16px 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--nw-white) !important;
  color: var(--nw-navy) !important;
  font-family: var(--nw-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  cursor: pointer;
}
.nw-footer .klaviyo-form .klaviyo-form-button:hover { background: var(--nw-tint) !important; }

@media (max-width: 767px) {
  /* Email-only form (Figma) stays one pill row; while the Klaviyo form still has its
     required First Name field (3 rows incl. the button) it stacks instead. */
  .nw-footer .klaviyo-form form > div:first-of-type:has(> [data-testid="form-row"]:nth-child(3)) { flex-wrap: wrap !important; padding: 8px !important; border-radius: 24px !important; }
  .nw-footer .klaviyo-form form > div:first-of-type:has(> [data-testid="form-row"]:nth-child(3)) > [data-testid="form-row"] { flex: 1 1 100% !important; padding: 0 12px !important; }
  .nw-footer .klaviyo-form form > div:first-of-type:has(> [data-testid="form-row"]:nth-child(3)) > [data-testid="form-row"] + [data-testid="form-row"] input { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; }
  .nw-footer .klaviyo-form form > div:first-of-type:has(> [data-testid="form-row"]:nth-child(3)) > [data-testid="form-row"]:last-child { padding: 0 !important; }
  .nw-footer .klaviyo-form form > div:first-of-type:has(> [data-testid="form-row"]:nth-child(3)) .klaviyo-form-button { width: 100% !important; }
}