/* Newsletter band, shown above the footer on every page.

   Self-contained for the same reason as footer.css / faq.css: the legacy
   `default` layout does not load the Touria stylesheet, so the variables and
   every rule this section needs are declared here and both layouts link it.

   Colours come from the Touria palette rather than the old navy mock: the card
   uses the theme's dark tone, the CTA the theme orange. Typography is pinned
   because the legacy base CSS would otherwise impose its own font and metrics. */

:root {
  --theme-color: #f98225;
  --body-font: "Roboto", sans-serif;
  --color-white: #ffffff;
  --color-dark: #2a4456;
  --transition: all 0.5s ease-in-out;
}

.newsletter-band {
  padding: 60px 0;
  background: transparent;
}
.newsletter-band .newsletter-card {
  background: var(--color-dark);
  border-radius: 24px;
  padding: 45px 50px;
  position: relative;
  overflow: hidden;
}
.newsletter-band .newsletter-title,
.newsletter-band .newsletter-text,
.newsletter-band .newsletter-input,
.newsletter-band .newsletter-btn,
.newsletter-band .newsletter-note {
  font-family: var(--body-font);
}
.newsletter-band .newsletter-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  color: var(--color-white);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}
.newsletter-band .newsletter-title i {
  color: var(--theme-color);
  font-size: 26px;
  flex-shrink: 0;
}
.newsletter-band .newsletter-text {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.6;
}
.newsletter-band .newsletter-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.newsletter-band .newsletter-input {
  flex: 1 1 320px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: var(--transition);
}
.newsletter-band .newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.newsletter-band .newsletter-input:focus {
  border-color: var(--theme-color);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.newsletter-band .newsletter-btn {
  flex: 0 0 auto;
  background: var(--theme-color);
  color: var(--color-white);
  border: none;
  border-radius: 12px;
  padding: 16px 38px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: var(--transition);
}
.newsletter-band .newsletter-btn:hover,
.newsletter-band .newsletter-btn:focus {
  background: var(--color-white);
  color: var(--color-dark);
}
.newsletter-band .newsletter-note {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.newsletter-band .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media all and (max-width: 767px) {
  .newsletter-band {
    padding: 40px 0;
  }
  .newsletter-band .newsletter-card {
    padding: 32px 24px;
    border-radius: 18px;
  }
  .newsletter-band .newsletter-title {
    font-size: 24px;
  }
  .newsletter-band .newsletter-text {
    font-size: 16px;
  }
  .newsletter-band .newsletter-btn {
    width: 100%;
  }
}

/* Legacy-layout compatibility.
   The old stylesheet forces `button{background-color:inherit!important}`, which
   wiped out the CTA background and left an invisible button on those pages.
   It also leaves the card on its own base font. Scoped to .newsletter-band. */
.newsletter-band .newsletter-card {
  font-family: var(--body-font);
  color: var(--color-white);
}
.newsletter-band .newsletter-btn {
  background-color: var(--theme-color) !important;
  color: var(--color-white) !important;
  border: none !important;
}
.newsletter-band .newsletter-btn:hover,
.newsletter-band .newsletter-btn:focus {
  background-color: var(--color-white) !important;
  color: var(--color-dark) !important;
}

/* In-footer variant: the card sits in the footer's narrow right column, under
   the contacts/social, instead of a full-width band above the footer. */
.newsletter-band.newsletter-band--footer {
  padding: 0;
  margin-top: 25px;
}
.newsletter-band--footer .newsletter-card {
  padding: 24px 22px;
  border-radius: 18px;
}
.newsletter-band--footer .newsletter-title {
  font-size: 18px;
  gap: 10px;
  align-items: flex-start;
}
.newsletter-band--footer .newsletter-title i {
  font-size: 18px;
  margin-top: 2px;
}
.newsletter-band--footer .newsletter-text {
  font-size: 14px;
  margin-bottom: 16px;
}
.newsletter-band--footer .newsletter-form-row {
  gap: 10px;
}
.newsletter-band--footer .newsletter-input {
  flex: 1 1 140px;
  padding: 12px 14px;
  font-size: 14px;
}
.newsletter-band--footer .newsletter-btn {
  padding: 12px 18px;
  font-size: 14px;
}