/*
 * Popup Notice - inc/popup.php + js/popup.js.
 *
 * Only enqueued on pages that print the popup. Type and button copy the contact
 * section (.page-contact__heading / __copy / __cta in style.css) so the popup
 * reads as part of the site.
 *
 * Three layouts, set on .seg-popup by PHP:
 *   --split  image left, copy right (stacked on phones)
 *   --full   image fills the popup, copy over it
 *   --text   no image uploaded
 */

/*
 * Scroll lock on <html> only: the viewport takes its overflow from it. Adding
 * body here as well made body (height: 100% in style.css) its own clipped box,
 * which re-laid out the whole page - Lighthouse scored it CLS 1.00 on the home
 * page. scrollbar-gutter keeps the space of the hidden desktop scrollbar so
 * the page does not jump sideways.
 */
html.seg-popup-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.seg-popup {
  position: fixed;
  inset: 0;
  z-index: 100050; /* above the sticky header (highest theme z-index is 100000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: 0.25s opacity ease;
}
.seg-popup[hidden] {
  display: none;
}
.seg-popup.is-open {
  opacity: 1;
}

.seg-popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(54, 50, 50, 0.6);
  cursor: pointer;
}

.seg-popup__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background-color: white;
  box-shadow: 0 20px 60px rgba(54, 50, 50, 0.25);
  transform: translateY(12px);
  transition: 0.25s transform ease;
}
.seg-popup.is-open .seg-popup__dialog {
  transform: none;
}
.seg-popup__dialog:focus {
  outline: none;
}

/* ---------- Close ---------- */

.seg-popup__close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  color: #58585B;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: 0.25s color ease;
}
.seg-popup__close:hover {
  color: #363232;
}
.seg-popup__close:focus-visible {
  outline: 2px solid #A6B2B0;
  outline-offset: -4px;
}

/* ---------- Image ---------- */

.seg-popup__media {
  flex: 0 0 auto;
  overflow: hidden;
  background-color: #F7F7F7;
}
.seg-popup__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Copy ---------- */

.seg-popup__content {
  position: relative;
  padding: 40px 28px 36px;
}

.seg-popup__kicker {
  margin: 0 0 12px;
  color: #58585B;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.seg-popup__title {
  margin: 0 0 20px;
  padding-right: 24px;
  color: #363232;
  font-family: "essonnes-display", serif;
  font-size: 28px;
  font-weight: normal;
  line-height: 1.2em;
  text-transform: uppercase;
}

.seg-popup__copy p {
  margin: 0 0 1em;
  color: #363232;
  font-size: 14px;
  line-height: 21px;
}
.seg-popup__copy p:last-of-type {
  margin-bottom: 0;
}
.seg-popup__copy a {
  color: inherit;
  text-decoration: underline;
}

/* Same as .page-contact__cta a */
.seg-popup__cta {
  margin-top: 28px;
}
.seg-popup__cta a {
  display: inline-block;
  padding: 12px 26px;
  text-align: center;
  border: 1px #A6B2B0 solid;
  background-color: #A6B2B0;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  height: auto;
  transition: 0.25s background-color ease;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.2em;
}
.seg-popup__cta a:hover, .seg-popup__cta a:focus {
  background-color: #909f9d;
  border-color: #909f9d;
  color: white;
}

/* ---------- Signup form ("Include signup" on) ---------- */

/* js/popup.js swaps the form for the thank-you state with the hidden attribute;
   the display rules below would otherwise override it. */
.seg-popup [hidden] {
  display: none !important;
}

/* Fields copy the contact form (page-contact.php): no box, one underline, and
   the label shown as a small spaced-capitals placeholder. The real <label> is
   kept for screen readers (.screen-reader-text). */
.seg-popup__form {
  margin-top: 28px;
  display: grid;
  gap: 18px;
  max-width: 460px;
}
.seg-popup__fields {
  display: grid;
  gap: 18px 28px;
}
@media only screen and (min-width : 600px) {
  .seg-popup__fields--two {
    grid-template-columns: 1fr 1fr;
  }
}
.seg-popup__field {
  display: block;
  margin: 0;
}
.seg-popup .seg-popup__field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 0 9px;
  border: 0;
  border-bottom: 1px solid #58585B;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: #363232;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  line-height: 1.3;
  transition: 0.25s border-color ease, 0.25s box-shadow ease;
}
.seg-popup .seg-popup__field input::placeholder {
  color: #58585B;
  opacity: 1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.seg-popup .seg-popup__field input:focus {
  outline: none;
  border-bottom-color: #A6B2B0;
  box-shadow: 0 1px 0 #A6B2B0;
}
.seg-popup .seg-popup__field input:focus::placeholder {
  color: #A6B2B0;
}
/* Browser autofill paints a pale yellow/blue box; keep the underline look. */
.seg-popup .seg-popup__field input:-webkit-autofill {
  -webkit-text-fill-color: #363232;
  transition: background-color 9999s ease 0s;
}
.seg-popup--full .seg-popup__field input:-webkit-autofill {
  -webkit-text-fill-color: white;
}
/* Honeypot: off-screen, not display:none, so simple bots still see it. */
.seg-popup__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.seg-popup__error {
  margin: 0;
  color: #A33B32;
  font-size: 14px;
}
.seg-popup__form .seg-popup__cta {
  margin-top: 10px;
}
.seg-popup__cta button {
  display: inline-block;
  border-radius: 0;
  font-family: inherit;
  padding: 14px 26px;
  border: 1px #A6B2B0 solid;
  background-color: #A6B2B0;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: 0.25s background-color ease;
}
.seg-popup__cta button:hover, .seg-popup__cta button:focus {
  background-color: #909f9d;
  border-color: #909f9d;
}
/* The signup button spans the form, under the fields. With "Require Email for
   Download" off the download sits beneath it at the same width, outlined
   (secondary) so signing up stays the main ask. */
.seg-popup__cta--pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.seg-popup__cta--pair button,
.seg-popup__cta--pair a {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 26px;
  border-radius: 0;
  text-align: center;
}
.seg-popup__cta a.seg-popup__download {
  background-color: transparent;
  color: #58585B;
}
.seg-popup__cta a.seg-popup__download:hover,
.seg-popup__cta a.seg-popup__download:focus {
  background-color: #A6B2B0;
  color: white;
}
.seg-popup--full .seg-popup__cta a.seg-popup__download {
  color: white;
  border-color: white;
}
.seg-popup--full .seg-popup__cta a.seg-popup__download:hover,
.seg-popup--full .seg-popup__cta a.seg-popup__download:focus {
  background-color: white;
  color: #363232;
}
.seg-popup__cta button[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.seg-popup__fineprint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #58585B;
}
.seg-popup__thanks {
  margin-top: 24px;
  outline: none;
}
.seg-popup__thanks-title {
  font-family: "essonnes-display", serif;
  font-size: 26px;
  margin: 0 0 8px;
}
.seg-popup__thanks-text {
  margin: 0;
}
.seg-popup--full .seg-popup__fineprint,
.seg-popup--full .seg-popup__thanks-title,
.seg-popup--full .seg-popup__thanks-text {
  color: white;
}
.seg-popup--full .seg-popup__field input {
  border-bottom-color: rgba(255, 255, 255, 0.75);
  color: white;
}
.seg-popup--full .seg-popup__field input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}
.seg-popup--full .seg-popup__field input:focus {
  border-bottom-color: white;
  box-shadow: 0 1px 0 white;
}
.seg-popup--full .seg-popup__field input:focus::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.seg-popup--full .seg-popup__error {
  color: #FFD2CC;
}

/* ---------- Split: image left, copy right ---------- */

.seg-popup--split .seg-popup__dialog {
  max-width: 880px;
}
.seg-popup--split .seg-popup__media,
.seg-popup--split .seg-popup__image {
  max-height: 38vh;
}

/* ---------- Full: image behind the copy ---------- */

.seg-popup--full .seg-popup__dialog {
  max-width: 880px;
  justify-content: flex-end;
  min-height: min(520px, calc(100vh - 32px));
  background-color: #363232;
}
.seg-popup--full .seg-popup__media {
  position: absolute;
  inset: 0;
}
/* Darkens from the top down so the copy at the bottom always reads, whatever
   the photo. Warm charcoal (#363232), not black, to match the site. */
.seg-popup--full .seg-popup__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(54, 50, 50, 0.1) 0%, rgba(54, 50, 50, 0.55) 45%, rgba(54, 50, 50, 0.9) 100%);
}
.seg-popup--full .seg-popup__content {
  padding-top: 120px;
}
.seg-popup--full .seg-popup__kicker,
.seg-popup--full .seg-popup__title,
.seg-popup--full .seg-popup__copy p {
  color: white;
}
.seg-popup--full .seg-popup__copy {
  max-width: 520px;
}

@media only screen and (min-width : 768px) {
  .seg-popup__content {
    padding: 56px 48px 48px;
  }
  .seg-popup__title {
    font-size: 34px;
  }

  .seg-popup--split .seg-popup__dialog {
    flex-direction: row;
  }
  .seg-popup--split .seg-popup__media {
    position: relative;
    flex: 0 0 45%;
    min-height: 440px;
    max-height: none;
  }
  .seg-popup--split .seg-popup__image {
    position: absolute;
    inset: 0;
    max-height: none;
  }
  .seg-popup--split .seg-popup__content {
    flex: 1 1 auto;
    align-self: center;
  }

  .seg-popup--full .seg-popup__content {
    padding: 160px 56px 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seg-popup,
  .seg-popup__dialog,
  .seg-popup__close,
  .seg-popup__cta a,
  .seg-popup__cta button {
    transition: none !important;
  }
}