/* =================================================================
   NEW SITE SECTIONS (2026 round)
   Newsletter band + footer box, resource pop-up, Partnerships tab
   support, and footer bottom-bar changes.

   Loaded after style.css / responsive.css so it can override them.
   Colours and type come from the theme's own variables, not the
   design file's stand-ins.
   ================================================================= */

:root {
  /* Supporting tones used only by these sections */
  --nl-body: #D8D4C6;      /* paragraph text on dark */
  --nl-muted: #A3ADA7;     /* placeholders, fine print */
  --nl-field-border: #5B7A6C;
}

/* =================================================================
   1. NEWSLETTER — shared form
   ================================================================= */

.nl-label {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--nl-body);
  margin-bottom: 12px;
}

.nl-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--Green);
  border: 1px solid var(--nl-field-border);
  border-radius: 40px;
  padding: 5px 5px 5px 24px;
  transition: border-color 0.3s ease;
}
.nl-field:focus-within {
  border-color: var(--Gold);
}
.nl-field input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  color: var(--White);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
}
.nl-field input[type="email"]::placeholder {
  color: var(--nl-muted);
  opacity: 1;
}

.nl-submit {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--Gold);
  color: var(--Green);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  min-height: 52px;
  padding: 0 34px;
  border-radius: 40px;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.nl-submit:hover {
  background: var(--Light-Gold);
}
.nl-form.is-loading .nl-submit,
.nl-submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.nl-fineprint {
  margin: 14px 0 0;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.6;
  color: var(--nl-muted);
}

.nl-message {
  margin: 10px 0 0;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--Gold);
  min-height: 1px;
}
.nl-message:empty {
  margin: 0;
}
.nl-message.is-error {
  color: #F2B8A2;
}

.nl-form.is-success .nl-field,
.nl-form.is-success .nl-fineprint {
  display: none;
}

/* =================================================================
   2. NEWSLETTER — full-width band
   ================================================================= */

.newsletter-band {
  padding: 128px 0;
}
.newsletter-band--light {
  background: var(--Light-Green);
}
.newsletter-band--dark {
  background: var(--Green);
}

.newsletter-band .nl-band-wrp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.newsletter-band .nl-eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--Gold);
  margin-bottom: 20px;
}
.newsletter-band .nl-band-cnt h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.1;
  color: var(--Light-Gold);
  margin: 0 0 20px;
}
.newsletter-band .nl-band-cnt p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.75;
  color: var(--nl-body);
  margin: 0;
  max-width: 520px;
}

/* =================================================================
   3. NEWSLETTER — footer box
   ================================================================= */

footer .footer-newsletter {
  background: var(--Light-Green);
  border-radius: 12px;
  padding: 36px 40px;
  margin-bottom: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
footer .footer-newsletter .fnl-cnt h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--Light-Gold);
  margin: 0 0 8px;
}
footer .footer-newsletter .fnl-cnt p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--nl-body);
  margin: 0;
}
footer .footer-newsletter .nl-form-wrap--footer {
  flex: 0 0 auto;
  width: 520px;
  max-width: 100%;
}
footer .footer-newsletter .nl-form-wrap--footer .nl-field {
  padding: 4px 4px 4px 22px;
}
footer .footer-newsletter .nl-form-wrap--footer .nl-field input[type="email"] {
  height: 46px;
  font-size: 15px;
}
footer .footer-newsletter .nl-form-wrap--footer .nl-submit {
  min-height: 46px;
  padding: 0 28px;
  font-size: 15px;
}
footer .footer-newsletter .nl-fineprint {
  margin-top: 10px;
}

/* =================================================================
   4. FOOTER — bottom bar: socials + "Added by Notam"
   ================================================================= */

footer .copyright-wrp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}

footer .footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

/* The socials now live in the bottom bar, so drop the old offsets
   they needed when they sat under the footer menu. */
footer .copyright-wrp .socials {
  margin-top: 0;
  margin-left: 0;
  gap: 22px;
}

footer .footer-credit {
  margin: 0;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
footer .footer-credit a {
  color: inherit;
  text-decoration: none;
  transition: color 0.33s linear;
}
footer .footer-credit a:hover {
  color: var(--Gold);
}

/* =================================================================
   5. PARTNERSHIPS — 4-tab support
   ================================================================= */

/* Optional gold lead line for the opening sentence of a tab panel.
   Add class="tab-lead" to the first paragraph in the WYSIWYG. */
.tabs-section .tab-cnt .tab-lead {
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 1.6;
  color: var(--Gold);
  margin-bottom: 22px;
}

/* =================================================================
   6. POP-UP
   ================================================================= */

html.ahou-popup-open,
html.ahou-popup-open body {
  overflow: hidden;
}

.ahou-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ahou-popup[hidden] {
  display: none;
}

.ahou-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 28, 24, 0.72);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ahou-popup.is-open .ahou-popup__overlay {
  opacity: 1;
}

.ahou-popup__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 1000px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--Green);
  border-radius: 12px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2, .7, .2, 1), transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.ahou-popup.is-open .ahou-popup__dialog {
  opacity: 1;
  transform: translateY(0);
}

.ahou-popup__media {
  background: var(--Light-Green);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  border-radius: 12px 0 0 12px;
}
.ahou-popup__media img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.55);
}

.ahou-popup__cnt {
  padding: 56px 56px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ahou-popup__eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--Gold);
  margin-bottom: 18px;
}
.ahou-popup__cnt h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.12;
  color: var(--Light-Gold);
  margin: 0 0 18px;
}
.ahou-popup__cnt p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.75;
  color: var(--nl-body);
  margin: 0 0 32px;
}
.ahou-popup__cta {
  align-self: flex-start;
}

.ahou-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 233, 0.3);
  background: rgba(18, 28, 24, 0.6);
  color: var(--Light-Gold);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.ahou-popup__close:hover {
  border-color: var(--Gold);
  color: var(--Gold);
}

/* =================================================================
   7. RESPONSIVE
   ================================================================= */

@media screen and (max-width: 1199px) {
  .newsletter-band {
    padding: 96px 0;
  }
  .newsletter-band .nl-band-wrp {
    gap: 56px;
  }
  .newsletter-band .nl-band-cnt h2 {
    font-size: 44px;
  }
  footer .footer-newsletter .nl-form-wrap--footer {
    width: 420px;
  }
}

@media screen and (max-width: 991px) {
  .newsletter-band .nl-band-wrp {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  footer .footer-newsletter {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  footer .footer-newsletter .nl-form-wrap--footer {
    width: 100%;
  }

  /* Pop-up stacks below the two-column layout */
  .ahou-popup {
    padding: 16px;
  }
  .ahou-popup__dialog {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 32px);
  }
  .ahou-popup__media {
    height: 230px;
    padding: 24px;
    border-radius: 12px 12px 0 0;
  }
  .ahou-popup__media img {
    max-width: none;
    width: auto;
    height: 100%;
  }
  .ahou-popup__cnt {
    padding: 32px 24px 36px;
  }
  .ahou-popup__cnt h2 {
    font-size: 30px;
  }
  .ahou-popup__cta {
    align-self: stretch;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .newsletter-band {
    padding: 72px 0;
  }
  .newsletter-band .nl-band-cnt h2 {
    font-size: 36px;
  }

  /* Input and button become separate full-width pills */
  .nl-field {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .nl-field input[type="email"] {
    width: 100%;
    height: 54px;
    background: var(--Green);
    border: 1px solid var(--nl-field-border);
    border-radius: 40px;
    padding: 0 24px;
    transition: border-color 0.3s ease;
  }
  .nl-field input[type="email"]:focus {
    border-color: var(--Gold);
  }
  .nl-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 12px;
  }

  footer .footer-newsletter {
    padding: 28px 24px;
    margin-bottom: 50px;
  }
  footer .footer-newsletter .fnl-cnt h3 {
    font-size: 26px;
  }

  /* Bottom bar stacks; socials sit above the credit line */
  footer .copyright-wrp {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  footer .footer-bottom-right {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
  }

  /* Four tabs no longer fit in a row — 2x2 pill grid */
  .tabs-section .tabs-nav:has(.tab-link:nth-of-type(4)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  .tabs-section .tabs-nav:has(.tab-link:nth-of-type(4)) .tab-indicator {
    display: none;
  }
  .tabs-section .tabs-nav:has(.tab-link:nth-of-type(4)) .tab-link {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 40px;
    border: 1px solid rgba(244, 241, 233, 0.25);
    font-size: 15px;
  }
  .tabs-section .tabs-nav:has(.tab-link:nth-of-type(4)) .tab-link.active {
    background: var(--Gold);
    border-color: var(--Gold);
    color: var(--Green);
  }

  /* Fallback for browsers without :has() — keep 4 tabs from overflowing */
  .tabs-section .tabs-nav {
    flex-wrap: wrap;
  }
}

/* =================================================================
   8. REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ahou-popup__overlay,
  .ahou-popup__dialog {
    transition: none;
  }
  .ahou-popup__dialog {
    transform: none;
  }
}

/* =================================================================
   9. UTILITIES
   The theme markup uses .screen-reader-text (search form, newsletter
   footer label) but never defined it, so it rendered visibly.
   ================================================================= */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =================================================================
   10. TABS — nav on its own row
   The theme absolutely-positions .tabs-nav above 992px and pushes
   .tab-left down 87px to clear it, so the nav sits in the same
   horizontal band as the content. With four tabs that runs out of
   room, so the nav goes back into normal flow as a row of its own.
   The panel itself is unchanged: content left, image right.
   ================================================================= */

@media screen and (min-width: 992px) {

  .tabs-section .tabs-nav {
    position: static;
    margin-bottom: 56px;
  }

  /* The 87px offset only existed to clear the absolute nav. */
  .tabs-section .tab-left {
    margin-top: 0;
  }
}

/* =================================================================
   11. MEDIA HIGHLIGHTS — fully clickable cards
   Previously only the arrow icon was a link (and only the arrow
   had a hover state). The whole card is now one stretched link.
   ================================================================= */

.media-highlights .media-wrp .media-in {
  position: relative;
  transition: transform 0.33s ease, background 0.33s ease, box-shadow 0.33s ease;
}

/* The stretch rule in section 1 is scoped to .blog-media-page, so the
   card link needs its own here. */
.media-highlights a.card-stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.media-highlights .media-wrp .media-in:hover {
  transform: translateY(-4px);
  background: #35564A;
  box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.55);
}

.media-highlights .media-in h5 {
  transition: color 0.33s linear;
}
.media-highlights .media-wrp .media-in:hover h5 {
  color: var(--Gold);
}

/* Arrow now nudges on card hover, not just its own */
.media-highlights .media-in:hover a img {
  transform: translateX(6px);
}

/* Keyboard focus — the link fills the card, so ring the card itself */
.media-highlights .media-in:focus-within {
  transform: translateY(-4px);
  background: #35564A;
  outline: 2px solid var(--Gold);
  outline-offset: 3px;
}
.media-highlights .media-in a.card-stretch-link:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .media-highlights .media-wrp .media-in,
  .media-highlights .media-in img {
    transition: none;
  }
  .media-highlights .media-wrp .media-in:hover {
    transform: none;
  }
}