/* ============================================================
   Matches the rest of the site: PaCE palette variables from the
   "00_global_root_colors_and_classes" Asset Injector CSS (with
   fallbacks), the site's gold .ucsb-button look, square corners, no
   shadows.

   COLORS (WCAG 2.2 contrast, checked)
   - Band --pace-navy #15385e: white text/icon 11.94:1 (AAA);
     gold button against it 7.98:1 (non-text 3:1).
   - Button black on gold #ffcd34: 14.03:1 (AAA).
   - Focus rings: white on the band 11.94:1; black in the popup 21:1.
   - Popup input borders #6b7785 on white: 4.56:1 (non-text 3:1).
   ============================================================ */

/* ============================================================
   "SUBSCRIBE NOW" BAND
   ============================================================ */
.zoho-subscribe {
  /* The blades around it (hero included) are floated Bootstrap
     .col-sm-12 columns; without clearing, this block slides up underneath
     the hero and the full-bleed background below paints over it. */
  clear: both;
  margin: 0 0 40px;
  /* Full-bleed background even when the paragraph sits inside a
     .container, without making the page scroll sideways. The content
     itself stays aligned with the container. */
  background: var(--pace-navy, #15385e);
  box-shadow: 0 0 0 100vmax var(--pace-navy, #15385e);
  clip-path: inset(0 -100vmax);
}
.zoho-subscribe__band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  max-width: 1170px;
  margin: 0 auto;
  padding: 28px 15px;
  font-family: "Nunito Sans", sans-serif;
}
.zoho-subscribe__intro {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
/* The theme colors paragraphs and SVGs inside content; force white so the
   icon and message always match. */
.zoho-subscribe .zoho-subscribe__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: #fff !important;
}
.zoho-subscribe .zoho-subscribe__message {
  margin: 0 !important;
  max-width: 60ch;
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

/* Same look as the site's gold a.ucsb-button.btn. */
.zoho-subscribe__open {
  flex: 0 0 auto;
  min-height: 48px;
  margin: 0;
  padding: 12px 32px;
  background: #ffcd34;
  color: #000;
  /* Transparent border so the button still has an outline in Windows
     High Contrast / forced-colors mode. */
  border: 2px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.zoho-subscribe__open:hover {
  background: #fff;
  color: #000;
}
.zoho-subscribe__open:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Phones: icon + message on top, full-width button underneath. */
@media (max-width: 768px) {
  .zoho-subscribe {
    margin-bottom: 30px;
  }
  .zoho-subscribe__band {
    justify-content: flex-start;
    padding: 24px 15px;
  }
  .zoho-subscribe__intro {
    align-items: flex-start;
  }
  .zoho-subscribe .zoho-subscribe__icon {
    width: 32px;
    height: 32px;
  }
  .zoho-subscribe .zoho-subscribe__message {
    font-size: 16px;
  }
  .zoho-subscribe__open {
    width: 100%;
  }
}

/* ============================================================
   POPUP
   The dialog itself has no padding, so a click on it (rather than on
   .zoho-subscribe__body) is always a click on the backdrop — the JS
   closes the popup on that.
   ============================================================ */
.zoho-subscribe__dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: none;
  /* border-top: 6px solid var(--pace-navy, #15385e); */
  border-radius: 0;
  color: var(--pace-navy, #15385e);
  font-family: "Nunito Sans", sans-serif;
}
.zoho-subscribe__dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
/* Keep the page behind the popup from scrolling. */
html:has(.zoho-subscribe__dialog[open]) {
  overflow: hidden;
}

.zoho-subscribe__body {
  padding: 24px 32px 32px;
}
.zoho-subscribe__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
}
.zoho-subscribe .zoho-subscribe__title {
  margin: 10px 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pace-navy, #15385e);
  text-transform: none;
}
.zoho-subscribe .zoho-subscribe__required-note {
  margin: 0 0 24px;
  font-size: 14px;
  color: #4a5866;
}
.zoho-subscribe__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0 -12px 0 0;
  padding: 10px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  color: var(--pace-navy, #15385e);
  cursor: pointer;
}
.zoho-subscribe__close:hover {
  background: var(--pace-cta-gray, #ededed);
}
.zoho-subscribe__close svg {
  display: block;
  width: 100%;
  height: 100%;
}
.zoho-subscribe__close:focus-visible {
  outline: 3px solid #000;
  outline-offset: 0;
}
.zoho-subscribe__body iframe {
  display: block;
  width: 100%;
  min-height: 500px;
  border: 0;
}

/* ============================================================
   ZOHO FORM INSIDE THE POPUP
   The JS embed writes Zoho's own markup and <style> into the page; these
   rules restyle it to match the site. (An iFrame form is cross-origin and
   can only be styled from Zoho's form builder.) Scoped to the dialog so
   they can't leak onto other Zoho forms pasted elsewhere on the site.
   ============================================================ */
.zoho-subscribe__dialog .crmWebToEntityForm {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  background: none !important;
}
/* Zoho's own form title duplicates the popup heading. */
.zoho-subscribe__dialog .zcwf_title {
  display: none !important;
}
/* Lead Source is set by the JS (the form's own default, or "Web"), not by
   visitors. Hidden here too so it never flashes up before the JS runs. */
.zoho-subscribe__dialog .zcwf_row:has([name="Lead Source"]) {
  display: none !important;
}
.zoho-subscribe__dialog .zcwf_row {
  margin: 0 0 20px !important;
}
.zoho-subscribe__dialog .zcwf_col_lab,
.zoho-subscribe__dialog .zcwf_col_fld {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.zoho-subscribe__dialog .zcwf_col_lab {
  margin-bottom: 6px !important;
}
.zoho-subscribe__dialog .zcwf_col_lab label {
  font-size: 16px;
  font-weight: 700;
  color: var(--pace-navy, #15385e);
}
.zoho-subscribe__dialog .zcwf_col_fld input[type=text],
.zoho-subscribe__dialog .zcwf_col_fld input[type=email],
.zoho-subscribe__dialog .zcwf_col_fld select,
.zoho-subscribe__dialog .zcwf_col_fld textarea {
  float: none !important;
  width: 100% !important;
  min-height: 48px;
  padding: 0 12px !important;
  background: #fff !important;
  border: 1px solid #6b7785 !important;
  border-radius: 0 !important;
  /* 16px stops iOS zooming in when a field is focused. */
  font-size: 16px !important;
  color: #000 !important;
}
.zoho-subscribe__dialog .zcwf_col_fld input:focus-visible,
.zoho-subscribe__dialog .zcwf_col_fld select:focus-visible,
.zoho-subscribe__dialog .zcwf_col_fld textarea:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 0;
  border-color: #000 !important;
}
.zoho-subscribe__dialog .zcwf_button {
  min-height: 48px;
  max-width: none !important;
  padding: 12px 32px !important;
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700;
  cursor: pointer;
}
.zoho-subscribe__dialog .formsubmit.zcwf_button {
  width: 100%;
  margin: 8px 0 0 !important;
  background: #ffcd34 !important;
  color: #000 !important;
}
.zoho-subscribe__dialog .formsubmit.zcwf_button:hover {
  background: var(--pace-navy, #15385e) !important;
  color: #fff !important;
}
.zoho-subscribe__dialog .zcwf_button:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px;
}
/* A Reset button next to Submit mostly gets clicked by accident and wipes
   what was typed, so it's hidden. */
.zoho-subscribe__dialog .zcwf_button:not(.formsubmit) {
  display: none !important;
}

@media (max-width: 480px) {
  .zoho-subscribe__body {
    padding: 16px 20px 24px;
  }
  .zoho-subscribe .zoho-subscribe__title {
    font-size: 20px;
  }
}

/* Editor-only notice for a paragraph with no Zoho form pasted in. */
.zoho-subscribe--missing {
  background: none;
  box-shadow: none;
  clip-path: none;
  padding: 12px 16px;
  border: 2px dashed #c0392b;
  color: #c0392b;
}