/* =========================================================
   WLJ — Global Newsletter Modal
   One file for all pages/series.
   UPDATED (STRUCTURE LOCK + LAYOUT FIXES):
   - Neutral/glass panel (background reflects the page underneath)
   - Moves everything UP (tighter top spacing)
   - Removes ML "Newsletter / Signup..." header block
   - Submit button uses PNG (newsletter-submit.png)
   - Forces ML embed into: input -> button (centered) -> fineprint
   - OPTIONAL TWEAK applied: slimmer form plate padding
   - NUCLEAR STACK OVERRIDE for WEBFORMS (your current #mlb2-35031411)
   - SEAM ASSASSIN (kills the unclickable vertical line)
========================================================= */

/* ---------- Defaults (override per theme if you want) ---------- */
:root{
  --nl-backdrop: rgba(0,0,0,0.62);

  /* Subtle glows (won't fight page background) */
  --nl-glow-left: rgba(70,240,255,0.18);
  --nl-glow-right: rgba(255,154,46,0.16);

  /* ROOT PATH so it works everywhere */
  --nl-submit-img: url("/assets/img/global/buttons/newsletter-submit.png");
  --nl-glyph-img: url("/assets/img/about/glyph-texture.png");

  --nl-dialog-w: min(920px, 92vw);
  --nl-inner-w: min(760px, 92%);
  --nl-form-w: min(720px, 100%);

  --nl-field-h: 58px;
  --nl-btn-h: 64px;

  --nl-radius: 18px;
  --nl-shadow: 0 24px 90px rgba(0,0,0,0.65);

  /* Soft frame */
  --nl-border: rgba(255,255,255,0.18);
  --nl-border-soft: rgba(255,255,255,0.10);
}

/* =========================================================
   Modal Shell
========================================================= */
.wlj-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483647;
}
.wlj-modal.is-open{ display:block; }

/* Backdrop */
.wlj-modal__backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 680px at 50% 35%, rgba(255,255,255,0.05), transparent 72%),
    var(--nl-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   Dialog plate — neutral glass
========================================================= */
.wlj-modal__dialog{
  position: relative;
  width: var(--nl-dialog-w);

  margin: clamp(2.5vh, 4vh, 6vh) auto 0;

  padding: clamp(22px, 3.2vw, 36px);
  padding-top: clamp(44px, 4.6vw, 56px);

  border-radius: calc(var(--nl-radius) + 6px);
  border: 1px solid var(--nl-border);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: var(--nl-shadow);

  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);

  overflow: hidden;
  text-align: center;
  outline: none;
  isolation: isolate;

  /* GPU stability (helps avoid glass seams in some browsers) */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  background-clip: padding-box;
}

/* subtle edge glow */
.wlj-modal__dialog::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(900px 520px at 15% 35%, var(--nl-glow-left), transparent 58%),
    radial-gradient(900px 520px at 85% 35%, var(--nl-glow-right), transparent 60%),
    radial-gradient(820px 560px at 50% 40%, rgba(255,255,255,0.04), transparent 70%);
  opacity: .60;
  filter: blur(10px);
  z-index: 0;
}

/* inner line frame */
.wlj-modal__dialog::after{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: calc(var(--nl-radius) + 0px);
  border: 1px solid var(--nl-border-soft);
  pointer-events:none;
  opacity: .95;
  z-index: 0;
}

/* Close button */
.wlj-modal__close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;

  width: 42px;
  height: 42px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: rgba(231,246,248,0.92);

  font-size: 28px;
  line-height: 1;
  cursor: pointer;

  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.wlj-modal__close:hover{
  background: rgba(0,0,0,0.50);
  color: rgba(255,255,255,0.98);
}

/* =========================================================
   Inner content wrapper
========================================================= */
.wlj-nl{
  width: var(--nl-inner-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Optional glyph overlay */
.wlj-nl__glyph{
  position:absolute;
  inset:-18px;
  pointer-events:none;
  z-index:0;
  background: var(--nl-glyph-img) center / cover no-repeat;
  opacity: 0.10;
  mix-blend-mode: screen;
  filter: blur(0.2px) saturate(1.04) contrast(1.02);
}
.wlj-nl__glyph::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 44%, rgba(70,240,255,0.10), transparent 64%),
    radial-gradient(900px 520px at 82% 44%, rgba(255,154,46,0.09), transparent 64%),
    radial-gradient(820px 560px at 50% 44%, rgba(255,255,255,0.04), transparent 70%);
  opacity: 0.9;
}

.wlj-nl > *{ position: relative; z-index: 1; }

/* =========================================================
   Typography
========================================================= */
.wlj-nl__title{
  font-family: "Cinzel Decorative", var(--serif, "Cinzel", ui-serif, Georgia, "Times New Roman", Times, serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px);
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.55),
    0 18px 38px rgba(0,0,0,0.65);
}

.wlj-nl__sub,
.wlj-nl__desc{
  margin: 0 auto 12px;
  width: var(--nl-inner-w);
  color: rgba(233,245,247,0.86);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
}
.wlj-nl__sub em{
  font-family: var(--serif, "Cinzel", ui-serif, Georgia, "Times New Roman", Times, serif);
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}

.wlj-nl__fineprint{
  margin: 12px auto 2px;
  width: var(--nl-inner-w);
  text-align: center;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  color: rgba(233,245,247,0.70);
}

/* =========================================================
   Form plate
========================================================= */
.wlj-nl__form{
  margin: 12px auto 10px;
  width: var(--nl-form-w);
  padding: 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
}

/* =========================================================
   MailerLite inside modal — supports BOTH embed styles:
   A) universal embed: .ml-embedded[data-form]
   B) webforms embed: #mlb2-35031411 (your current)
========================================================= */

/* Shared box sizing */
#newsletterModal .ml-embedded,
#newsletterModal .ml-embedded *{
  box-sizing: border-box !important;
}
#newsletterModal #mlb2-35031411,
#newsletterModal #mlb2-35031411 *{
  box-sizing: border-box !important;
}

/* Universal embed sizing */
#newsletterModal .wlj-nl__form .ml-embedded{
  width: 100% !important;
  max-width: none !important;
}

/* Strip ML chrome (universal embed) */
#newsletterModal .ml-embedded .ml-form-embedWrapper,
#newsletterModal .ml-embedded .ml-form-embedContainer,
#newsletterModal .ml-embedded .ml-form-embedBody,
#newsletterModal .ml-embedded .ml-form-embedBodyHorizontal,
#newsletterModal .ml-embedded .ml-form-embedContent,
#newsletterModal .ml-embedded .ml-form-formContent{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Hide loaders/dupes */
#newsletterModal .ml-embedded .ml-form-embedSubmitLoad,
#newsletterModal .ml-embedded .ml-mobileButton-horizontal,
#newsletterModal .ml-embedded .loading,
#newsletterModal .ml-embedded button.loading{
  display: none !important;
}

/* Universal input styling */
#newsletterModal .ml-embedded input[type="email"],
#newsletterModal .ml-embedded input[type="text"],
#newsletterModal .ml-embedded input.form-control{
  width: 100% !important;
  min-width: 0 !important;
  height: var(--nl-field-h) !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(0,0,0,0.45) !important;
  color: rgba(255,255,255,0.92) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
  outline: none !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 18px !important;
}
#newsletterModal .ml-embedded input::placeholder{
  color: rgba(233,245,247,0.55) !important;
}
#newsletterModal .ml-embedded input:focus{
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    0 0 0 3px rgba(70,240,255,0.10),
    0 0 0 1px rgba(255,154,46,0.08) inset !important;
}

/* Remove ML header block (universal) */
#newsletterModal .ml-embedded .ml-form-embedContent{
  display: none !important;
}

/* =========================================================
   WEBFORMS embed (#mlb2-35031411)
========================================================= */

/* Remove ML header block (“Newsletter / Signup…”) */
#newsletterModal #mlb2-35031411 .ml-form-embedContent{
  display: none !important;
}

/* Strip ML chrome (webforms) */
#newsletterModal #mlb2-35031411 .ml-form-embedWrapper,
#newsletterModal #mlb2-35031411 .ml-form-embedBody,
#newsletterModal #mlb2-35031411 .ml-form-embedBodyHorizontal{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Hide duplicate mobile button (webforms) */
#newsletterModal #mlb2-35031411 .ml-mobileButton-horizontal{
  display: none !important;
}

/* =========================================================
   FINAL HARDENING
========================================================= */
#newsletterModal form,
#newsletterModal input,
#newsletterModal button{
  max-width: none !important;
}

#newsletterModal input[type="email"]{
  margin: 0 !important;
}

/* Keep ML internals sane if global centering exists */
#newsletterModal .ml-embedded *{
  text-align: initial;
}
#newsletterModal #mlb2-35031411 *{
  text-align: initial !important;
}

/* =========================================================
   NUCLEAR STACK OVERRIDE (WEBFORMS)
   Goal: input full width, submit centered UNDER input
========================================================= */

/* Scope to your modal + exact ML container */
#newsletterModal .wlj-nl__form #mlb2-35031411{
  width: 100% !important;
  max-width: none !important;
}

/* Kill wrapper sizing constraints */
#newsletterModal .wlj-nl__form #mlb2-35031411 .ml-form-align-center,
#newsletterModal .wlj-nl__form #mlb2-35031411 .ml-form-embedWrapper,
#newsletterModal .wlj-nl__form #mlb2-35031411 .ml-form-embedBody{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove the common embedForm max-width */
#newsletterModal .wlj-nl__form #mlb2-35031411 .ml-form-embedWrapper.embedForm{
  max-width: none !important;
  width: 100% !important;
}

/* Make the <form> full width */
#newsletterModal .wlj-nl__form #mlb2-35031411 form.ml-block-form{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Horizontal form container must not float */
#newsletterModal .wlj-nl__form #mlb2-35031411 .ml-form-formContent.horozintalForm{
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force the row to STACK */
#newsletterModal .wlj-nl__form #mlb2-35031411
.ml-form-formContent.horozintalForm .ml-form-horizontalRow{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 16px !important;
}

/* Input column full width */
#newsletterModal .wlj-nl__form #mlb2-35031411
.ml-form-horizontalRow .ml-input-horizontal{
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* inner wrapper padding-right:0 */
#newsletterModal .wlj-nl__form #mlb2-35031411
.ml-form-horizontalRow .horizontal-fields{
  width: 100% !important;
  float: none !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Email input spans */
#newsletterModal .wlj-nl__form #mlb2-35031411 .ml-field-group,
#newsletterModal .wlj-nl__form #mlb2-35031411 input[type="email"],
#newsletterModal .wlj-nl__form #mlb2-35031411 input.form-control{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  height: var(--nl-field-h) !important;
}

/* Button column centers button */
#newsletterModal .wlj-nl__form #mlb2-35031411
.ml-form-horizontalRow .ml-button-horizontal{
  width: 100% !important;
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Submit button — SHOW text centered */
#newsletterModal .wlj-nl__form #mlb2-35031411 button[type="submit"].primary{
  width: min(520px, 92%) !important;
  height: var(--nl-btn-h) !important;

  background-image: var(--nl-submit-img) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  border: 0 !important;
  border-radius: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;

  background-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;

  text-indent: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;

  color: #ffffff !important;
  font-family: "Cinzel", ui-serif, Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75) !important;

  line-height: 1 !important;
  cursor: pointer !important;
}

/* Prevent button pseudos */
#newsletterModal .wlj-nl__form #mlb2-35031411 button[type="submit"].primary::before,
#newsletterModal .wlj-nl__form #mlb2-35031411 button[type="submit"].primary::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   SEAM ASSASSIN (WEBFORMS VARIANT)
   Kills the vertical center line showing through input + button.
   Put here at bottom so it wins.
========================================================= */

/* Nuke pseudo-element dividers on webforms wrappers */
#newsletterModal #mlb2-35031411 .ml-form-embedBody::before,
#newsletterModal #mlb2-35031411 .ml-form-embedBody::after,
#newsletterModal #mlb2-35031411 .ml-form-embedBodyHorizontal::before,
#newsletterModal #mlb2-35031411 .ml-form-embedBodyHorizontal::after,
#newsletterModal #mlb2-35031411 .ml-form-formContent::before,
#newsletterModal #mlb2-35031411 .ml-form-formContent::after,
#newsletterModal #mlb2-35031411 .ml-form-formContent.horozintalForm::before,
#newsletterModal #mlb2-35031411 .ml-form-formContent.horozintalForm::after,
#newsletterModal #mlb2-35031411 .ml-form-horizontalRow::before,
#newsletterModal #mlb2-35031411 .ml-form-horizontalRow::after,
#newsletterModal #mlb2-35031411 .ml-input-horizontal::before,
#newsletterModal #mlb2-35031411 .ml-input-horizontal::after,
#newsletterModal #mlb2-35031411 .horizontal-fields::before,
#newsletterModal #mlb2-35031411 .horizontal-fields::after,
#newsletterModal #mlb2-35031411 .ml-button-horizontal::before,
#newsletterModal #mlb2-35031411 .ml-button-horizontal::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Remove divider borders/shadows on the webforms layout wrappers */
#newsletterModal #mlb2-35031411 .ml-form-embedBody,
#newsletterModal #mlb2-35031411 .ml-form-embedBodyHorizontal,
#newsletterModal #mlb2-35031411 .ml-form-formContent,
#newsletterModal #mlb2-35031411 .ml-form-formContent.horozintalForm,
#newsletterModal #mlb2-35031411 .ml-form-horizontalRow,
#newsletterModal #mlb2-35031411 .ml-input-horizontal,
#newsletterModal #mlb2-35031411 .horizontal-fields,
#newsletterModal #mlb2-35031411 .ml-button-horizontal{
  background-image: none !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Keep your input looking correct */
#newsletterModal #mlb2-35031411 input[type="email"],
#newsletterModal #mlb2-35031411 input.form-control{
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* Re-assert button art (safety) */
#newsletterModal #mlb2-35031411 button[type="submit"].primary{
  background-image: var(--nl-submit-img) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}

/* =========================================================
   Mobile adjustments
========================================================= */
@media (max-width: 720px){
  .wlj-modal__dialog{
    width: min(980px, 94vw);
    margin-top: 6vh;
    padding: 18px;
    padding-top: 58px;
  }
  .wlj-nl{ width: min(760px, 94%); }
  .wlj-nl__form{ padding: 14px; }
}

/* Modal: disable the split “lightning seam” from base.css */
#newsletterModal #mlb2-35031411.ml-form-embedContainer .ml-form-embedWrapper::after,
#newsletterModal #mlb2-35031411 button.primary::after{
  content: none !important;
  display: none !important;
}

#newsletterModal #mlb2-35031411.ml-form-embedContainer .ml-form-embedWrapper{
  background: transparent !important;
}