/**
 * Problem Gambling (EPGF) Toolkit landing page.
 *
 * Cloned from the MTSS Needs Assessment landing page's stylesheet and scoped to
 * the `.pg-landing` wrapper so the page's CSS reset and body-level rules don't
 * leak into the global Drupal header/footer. The two pages are deliberately
 * separate copies so either can change without regressing the other.
 */

:root {
  --edc-deep-blue: #023366;
  --edc-deep-blue-light: #0a3d73;
  --edc-ultrablue: #296BF7;
  --edc-ultrablue-soft: #e0f2ff;
  --edc-yellow: #FFDA02;
  --edc-orange: #FF9717;
  --edc-paper: #F3ECE3;
  --edc-black: #121212;
  --edc-grey: #3B3B3C;
  --edc-grey-light: #ababab;
  --edc-grey-bg: #fafaf7;
  --edc-white: #FFFFFF;
}

.pg-landing,
.pg-landing *,
.pg-landing *::before,
.pg-landing *::after { box-sizing: border-box; }

/*
 * Drop the default block bottom margin on this page so the last section's
 * background sits flush against the site footer (no white gap).
 */
.path-solutions-prevention-solutions-problem-gambling-toolkit #block-solutions-content,
.path-problem-gambling-toolkit #block-solutions-content {
  margin-bottom: 0;
}

.pg-landing {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--edc-black);
  line-height: 1.5;
  /*
   * Break out of the parent .container (Bootstrap max-width) so each section
   * background can reach the viewport edges. Symmetric negative margins are
   * used instead of width:100vw to avoid scrollbar-induced horizontal scroll.
   */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}

.pg-landing h1,
.pg-landing h2,
.pg-landing h3,
.pg-landing h4,
.pg-landing h5,
.pg-landing h6,
.pg-landing p,
.pg-landing ul,
.pg-landing ol,
.pg-landing li,
.pg-landing figure,
.pg-landing blockquote { margin: 0; padding: 0; }

/*
 * The wireframe's .wf-canvas / .wf-page / .wf-module wrappers were used to
 * mock up a "page on canvas" look — neutralized here so each .wf-module's
 * inner section can paint its own full-width background.
 */
.pg-landing .wf-canvas,
.pg-landing .wf-page,
.pg-landing .wf-module {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
}
.pg-landing .wf-module { position: relative; }

/* ===================== HERO ===================== */
.pg-landing .hero {
  background: var(--edc-deep-blue);
  color: var(--edc-white);
  padding: 80px 60px 80px;
  position: relative;
  overflow: hidden;
}
.pg-landing .hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 45%; height: 100%;
  background: radial-gradient(circle at 60% 40%, rgba(41,107,247,0.18), transparent 60%);
}
.pg-landing .hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: start;
}
.pg-landing .hero-copy { padding-top: 12px; }
.pg-landing .hero .eyebrow {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #bcd1e6;
  margin-bottom: 14px;
}
.pg-landing .hero h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  font-size: 44px;
  line-height: 1.12;
  margin-bottom: 22px;
}
.pg-landing .hero h1 strong { font-weight: bold; }
.pg-landing .hero .sub {
  font-size: 17px;
  color: #d8e3ee;
  margin-bottom: 28px;
}
.pg-landing .hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}
.pg-landing .hero-bullets li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 15px;
  color: #e8eef5;
  line-height: 1.5;
}
.pg-landing .hero-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  background: var(--edc-yellow);
  color: var(--edc-deep-blue);
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  line-height: 18px;
}

/* ===================== HERO FORM CARD ===================== */
.pg-landing .hero-form {
  background: var(--edc-white);
  color: var(--edc-black);
  padding: 32px 32px 28px;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  border-top: 4px solid var(--edc-yellow);
}
.pg-landing .hero-form h2 {
  font-family: Georgia, serif;
  font-size: 24px;
  color: var(--edc-deep-blue);
  margin-bottom: 4px;
  font-weight: normal;
}
.pg-landing .hero-form .form-intro {
  font-size: 13px;
  color: var(--edc-grey);
  margin-bottom: 18px;
}
.pg-landing .hero-form .required-note {
  font-size: 11px;
  color: var(--edc-grey);
  margin-bottom: 14px;
}
.pg-landing .hero-form .required-note::before {
  content: "*";
  color: var(--edc-orange);
  margin-right: 4px;
}
.pg-landing .hero-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.pg-landing .hero-form .form-field { margin-bottom: 10px; }
.pg-landing .hero-form .form-field label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: var(--edc-deep-blue);
  margin-bottom: 4px;
}
.pg-landing .hero-form .form-field label::after {
  content: " *";
  color: var(--edc-orange);
}
.pg-landing .hero-form .form-field input,
.pg-landing .hero-form .form-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  background: white;
}
.pg-landing .hero-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 16px;
  font-size: 12px;
  color: var(--edc-grey);
  line-height: 1.4;
}
.pg-landing .hero-form .checkbox-row input { margin-top: 2px; flex-shrink: 0; }

/*
 * ===================== ZOHO INTEGRATION =====================
 * The block below is purely functional: it carries the Zoho field wrappers,
 * captcha, inline error/success messaging, and the iframe response overlay.
 * Nothing here changes the design of the visible form fields.
 */

/* Zoho wraps each input in a .zcinputbox; flatten it so our .form-field rules
 * keep ownership of layout. */
.pg-landing .hero-form .zcinputbox {
  display: block;
  width: 100%;
}

/* Inline error banner (#errorMsgDiv), shown when validation fails. */
.pg-landing .hero-form .form-error-msg {
  background: #ffebe8;
  border: 1px solid #ffd9d3;
  color: #d20000;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 12px;
  border-radius: 3px;
}

/* optin.min.js writes its own inline borderColor on invalid inputs (from
 * #fieldBorder); we add a matching outline so the error state is visible
 * even when the field's border is themed. */
.pg-landing .hero-form .form-field input[style*="rgb(208, 2, 27)"],
.pg-landing .hero-form .form-field input[style*="#d0021b"],
.pg-landing .hero-form .form-field input.zoho-invalid {
  border-color: #d20000 !important;
  outline: 1px solid #d20000;
}

/* Captcha field — wrapped in the same .form-field skin as the rest. */
.pg-landing .hero-form .captcha-field { margin-bottom: 14px; }
.pg-landing .hero-form .captcha-field .captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pg-landing .hero-form .captcha-field #captchaDiv {
  flex: 1 1 auto;
  background: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 3px;
  min-height: 44px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pg-landing .hero-form .captcha-field #captchaDiv img { max-height: 36px; }
.pg-landing .hero-form .captcha-field .captcha-refresh {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: var(--edc-white);
  color: var(--edc-deep-blue);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pg-landing .hero-form .captcha-field .captcha-refresh:hover { background: #f0f0f0; }
/* Captcha label has no required asterisk. */
.pg-landing .hero-form .form-field label.no-required::after { content: ""; }

/* Suppress Zoho's stock fixed-position overlays; we use our own. */
.pg-landing #zcOptinOverLay,
.pg-landing #zcOptinSuccessPopup { display: none !important; }

/*
 * Iframe response overlay — unscoped because position:fixed elements render
 * relative to the viewport, not our .pg-landing wrapper. The JS toggles
 * `display` between `none` and `flex`; this CSS only defines the look.
 */
.zc-response-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 18, 18, 0.55);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.zc-response-overlay__panel {
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zc-response-overlay__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #121212;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 1;
}
.zc-response-overlay__close:hover,
.zc-response-overlay__close:focus { background: #f0f0f0; outline: none; }
.zc-response-overlay__frame {
  /*
   * Kept in DOM (and named "_zcSignup") so the form has somewhere to POST,
   * but hidden visually because its cross-origin response contains a plain-text
   * download URL we can't make clickable. The .zc-response-overlay__success
   * block below is shown to the user instead.
   */
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.zc-response-overlay__success {
  padding: 40px 32px 32px;
  text-align: center;
}
.zc-response-overlay__title {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--edc-deep-blue);
  margin: 0 0 12px;
  font-weight: normal;
}
.zc-response-overlay__body {
  font-size: 15px;
  color: var(--edc-grey);
  margin: 0 0 24px;
  line-height: 1.5;
}
.zc-response-overlay__download {
  display: inline-block;
  background: var(--edc-ultrablue);
  color: var(--edc-white);
  padding: 14px 32px;
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}
.zc-response-overlay__download:hover,
.zc-response-overlay__download:focus { background: #1c5fd9; color: var(--edc-white); text-decoration: none; }
.zc-response-overlay__url {
  font-size: 12px;
  color: var(--edc-grey-light);
  margin: 20px 0 0;
  word-break: break-all;
}
.zc-response-overlay__url a { color: var(--edc-ultrablue); }
.zc-response-overlay__spinner {
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: zc-response-spin 0.8s linear infinite;
}
.zc-response-overlay--loading .zc-response-overlay__panel { display: none; }
.zc-response-overlay--loading .zc-response-overlay__spinner { display: block; }
@keyframes zc-response-spin { to { transform: rotate(360deg); } }
.pg-landing .hero-form .privacy {
  font-size: 10px;
  color: var(--edc-grey-light);
  margin-top: 14px;
  line-height: 1.5;
}
.pg-landing .hero-form .privacy a { color: var(--edc-ultrablue); }
.pg-landing .btn-primary {
  display: inline-block;
  background: var(--edc-ultrablue);
  color: var(--edc-white);
  padding: 14px 36px;
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.pg-landing .btn-primary:hover { background: #1c5fd9; }
.pg-landing .btn-secondary {
  display: inline-block;
  background: var(--edc-white);
  color: var(--edc-deep-blue);
  padding: 14px 36px;
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid var(--edc-deep-blue);
}

/* ===================== INTRO / VALUE PROP ===================== */
.pg-landing .intro {
  padding: 80px 60px;
  background: var(--edc-white);
}
.pg-landing .intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pg-landing .intro h2 {
  font-family: Georgia, serif;
  font-size: 40px;
  color: var(--edc-deep-blue);
  margin-bottom: 24px;
  font-weight: normal;
  max-width: 780px;
}
.pg-landing .intro .lead {
  font-size: 18px;
  color: var(--edc-grey);
  max-width: 780px;
  margin-bottom: 32px;
}
.pg-landing .intro .lead a {
  color: var(--edc-ultrablue);
  font-weight: bold;
}

/* ===================== PROCESS / 4-STEP ===================== */
.pg-landing .process {
  background: var(--edc-grey-bg);
  padding: 80px 60px;
}
.pg-landing .process-inner { max-width: 1100px; margin: 0 auto; }
.pg-landing .process h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  color: var(--edc-deep-blue);
  margin-bottom: 12px;
  text-align: center;
  font-weight: normal;
}
.pg-landing .process .process-sub {
  text-align: center;
  color: var(--edc-grey);
  font-size: 16px;
  margin-bottom: 48px;
}
.pg-landing .step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pg-landing .step {
  background: var(--edc-white);
  border-top: 4px solid var(--edc-ultrablue);
  padding: 28px 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pg-landing .step-num {
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--edc-ultrablue);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.pg-landing .step h4 {
  font-size: 18px;
  color: var(--edc-deep-blue);
  margin-bottom: 12px;
  font-weight: bold;
}
.pg-landing .step p {
  font-size: 14px;
  color: var(--edc-grey);
  line-height: 1.55;
}

/* ===================== SOCIAL PROOF ===================== */
.pg-landing .proof {
  padding: 60px 60px;
  background: var(--edc-deep-blue);
  color: var(--edc-white);
  text-align: center;
}
.pg-landing .proof-quote {
  font-family: Georgia, serif;
  font-size: 28px;
  font-style: italic;
  max-width: 880px;
  margin: 0 auto 24px;
  line-height: 1.4;
}
.pg-landing .proof-attr {
  font-size: 14px;
  color: #bcd1e6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pg-landing .proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 48px auto 0;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.pg-landing .stat-num {
  font-family: Georgia, serif;
  font-size: 48px;
  color: var(--edc-yellow);
  margin-bottom: 8px;
}
.pg-landing .stat-label { font-size: 13px; color: #d8e3ee; }

/* ===================== CROSS-SELL ===================== */
.pg-landing .crosssell {
  padding: 80px 60px;
  background: var(--edc-paper);
}
.pg-landing .crosssell-inner { max-width: 1100px; margin: 0 auto; }
.pg-landing .crosssell h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  color: var(--edc-deep-blue);
  margin-bottom: 16px;
  font-weight: normal;
}
.pg-landing .crosssell .intro-copy {
  font-size: 16px;
  color: var(--edc-grey);
  margin-bottom: 40px;
  max-width: 780px;
}
.pg-landing .crosssell-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.pg-landing .crosssell-card {
  background: var(--edc-white);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.pg-landing .crosssell-card .icon-placeholder {
  width: 80px; height: 80px;
  background: var(--edc-ultrablue-soft);
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--edc-ultrablue);
  font-size: 32px;
}
.pg-landing .crosssell-card h3 {
  font-family: Georgia, serif;
  font-size: 24px;
  color: var(--edc-deep-blue);
  margin-bottom: 12px;
  font-weight: normal;
}
.pg-landing .crosssell-card p {
  font-size: 15px;
  color: var(--edc-grey);
  margin-bottom: 20px;
  min-height: 90px;
}
.pg-landing .crosssell-card a {
  color: var(--edc-ultrablue);
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pg-landing .crosssell-card a::after { content: " →"; }