/*
  BREAKPOINTS (width)
  Max (monitor): ?
  Large (monitor): 991px+
  Medium (tablet): 768-991px
  Small (phone): 0-767px
*/


/* # Variable declarations, fonts, CSS reset */

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

:root {
  --max-page-width: 1320px;
  --font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --font-size: 18px;
  --line-height: 1.7rem;
  --color-wnmu-orange: hsl(19deg 89% 54%);
  --color-wnmu-blue: hsl(176deg 81% 36%);
  --color-wnmu-yellow: hsl(41deg 97% 59%);
  --color-wnmu-purple: hsl(269deg 63% 27%);

  /* Section colors */
  --section--feature--color: var(--color-wnmu-purple);
  --section--content--color: var(--color-wnmu-yellow);
}



/* # Typography, default rules */
html, body { font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height); }


/* # Layout & inline styles */
.css--hide { display: none; }
.css--text-center { text-align: center; }
.css--relative { position: relative; }
.layout--max-page-width { max-width: var(--max-page-width); }
.layout--center-content { margin-left: auto; margin-right: auto; }
.layout--grid-cols-2 { /* 2 column grid layout. */ display: grid; grid-template-columns: repeat(2, 1fr); }


/* Default styles */
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
h2 { font-size: 1.8rem; }
button, input { font-family: var(--font-family); border-radius: 3px; }
input[type="text"], input[type="email"], input[type="tel"] { width: 100%; height: 6ex; padding: 0 0.7rem; border: none; border-radius: 2px; }
input[type="submit"] { width: 100%; height: 6ex; border: none; border-radius: 2px; background: var(--color-wnmu-yellow); }


/* # Reusable custom components */
.com--background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: 50% 50%; }
.com--background--overlay:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--color-wnmu-purple); opacity: 0.76; }
@media (min-width: 768px) {
  .com--margin--small-only { display: none; }
}
@media (max-width: 767px) {
  .com--margin--medium-or-large { display: none; }
}


/* # Page-specific styles */
/* ## Page section: Fold */
.section--fold { position: relative; height: 100vh; min-height: 100vh; background: var(--color-wnmu-purple); }
.section--fold--grid--vertical { position: relative; display: grid; grid-template-rows: 100px 1fr 60px; height: 100%; }
.section--fold img { max-width: 100%; }
.section--fold .com--background { background-repeat: no-repeat; }
.section--fold .logo-container { position: relative; display: flex; align-items: center; padding: 0 12px; }
.section--fold .logo-container img { max-width: 220px; }
.section--fold .layout--grid--horizontal { display: grid; grid-template-columns: 5% 1fr 1fr; }
.section--fold .layout--grid--horizontal--col { position: relative; display: flex; justify-content: center; align-items: center; }
.section--fold .layout--grid--horizontal--col .com--background { display: none; }
.section--fold .layout--grid--horizontal--col--img-container img { display: block; max-width: 60%; }
.section--fold--ready-to-apply { position: relative; padding: 0 20%; text-align: center; }
.section--fold .layout--grid--btn-container { padding: 0 8%; }
.section--fold .layout--grid--btn-container button { cursor: pointer; display: inline-block; width: 100%; padding: 16px 0; border: none; background-color: var(--color-wnmu-yellow); }
.section--fold .scroller { display: flex; justify-content: center; align-items: center; text-transform: uppercase; font-weight: bold; font-size: 12px; letter-spacing: 1px; color: hsl(0 0% 100%); }
@media (max-width: 767px) {
  .section--fold .logo-container { padding-top: 18px; padding-left: 10px; }
  .section--fold .logo-container img { height: 52px; }
  .section--fold .layout--grid-cols-2 { grid-template-columns: 1fr; }
  .section--fold .layout--grid-col:first-of-type { min-height: 600px; }
  .section--fold .layout--grid-col .com--background { display: block; background-size: cover; }
  .section--fold--logo--1 { display: none !important; }
  .section--fold--logo--2 { display: block !important; }
  .section--fold .scroller { display: none; }
  .section--fold .layout--grid--btn-container { margin-top: 4px; }
  .section--fold .layout--grid--btn-container button { padding: 20px 0; }
  .section--fold .layout--grid--horizontal { display: block; }
  .section--fold { position: relative; height: auto; min-height: 100vh; }
  .section--fold--grid--vertical { display: block; }
  .layout--grid--horizontal--col--img-container { min-height: 50vh; }
  .layout--grid--horizontal--col--img-container img { filter: drop-shadow(2px 4px 4px hsl(0 0 10%)); }
  /* .layout--grid--horizontal--col--form-container {} */
}


/* ## Page section: Feature */
.section--feature { position: relative; background: var(--section--feature--color); }
.section--feature--content { position: relative; max-width: none; margin: 0 auto; padding: 0; line-height: 3.2rem; color: hsl(0 0% 100%); }
.section--feature--content h2 { font-weight: normal; }
.section--feature--video-container { width: 100%; height: 560px; margin: 0 auto; border-top: 1px solid hsl(0 0% 0%); border-bottom: 1px solid hsl(0 0% 0%); box-shadow: 0 0 50px hsl(0 0% 0% / 60%); }
.section--feature--video-container iframe { width: 100%; height: 100%; }
.section--feature--cast { border-top: 1px solid hsl(0 0% 0%); border-bottom: 2px solid hsl(0 0% 0%); box-shadow: 0 0 50px hsl(0 0% 0% / 60%); overflow: hidden; }
.section--feature--cast--container { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.com--cast-bubble--img--container { overflow: hidden; cursor: pointer; }
.com--cast-bubble--img { display: block; max-width: 100%; filter: brightness(0.4) contrast(0.7); transition: all ease-out 1s; }
.com--cast-bubble--active .com--cast-bubble--img--container { position: relative; z-index: 1; border: 1px solid hsl(0 0% 0%); box-shadow: 0 0 20px hsl(0 0% -10% / 1); cursor: default; }
.com--cast-bubble--active .com--cast-bubble--img { filter: brightness(1); }
.com--cast-bubble--header { padding: 11px 0 14px; font-size: 15px; line-height: 1.1rem; text-align: center; color: hsl(0 0% 100%); }
.com--cast-bubble--tag {}
.com--cast-bubble--major { font-size: 13px; }
@media (max-width: 767px) {
  .section--feature--cast--container { grid-template-columns: repeat(5, 1fr); }
  .com--cast-bubble--header { display: none; }
}

/* ## Page section: Content */
.section--content { display: none !important; }
.section--content { padding: 120px 0; background: var(--section--content--color); }
.points { display: grid;  grid-template-columns: 1fr 1fr; }
.point { padding: 100px 0; border-bottom: 1px solid hsl(0 0% 0% / 24%); }
.point:nth-of-type(2n + 1) { border-right: 1px solid hsl(0 0% 0% / 24%); }
.point:nth-of-type(3), .point:nth-of-type(4) { border-bottom: none; }
.point .img-container { height: 100px; text-align: center; }
.point img { max-width: 100%; height: 100%; }
.point-content { height: 100%; padding: 0 60px; }
.point-content h3 { margin: 0.8rem 0 0.7rem; text-align: center; font-size: 1.6rem; color: hsl(0 0% 12%); }
.point-content p { text-align: center; }
.point--featured { padding-top: 0; border-left: none !important; border-right: none !important; }
@media (max-width: 767px) {
  .section--content { padding: 40px 0; }
  .points { grid-template-columns: 1fr; }
  .point { border: none; }
  .points .point { border-bottom: 1px solid hsl(0 0% 0% / 24%); }
  .points .point:last-of-type { border-bottom: none; }
  .point-content { padding: 0 10%; }
  .point-content p { text-align: left; }
  .point .img-container { height: 50px; }
  .point--featured { padding-top: 60px; border-bottom: 1px solid hsl(0 0% 0% / 24%); }
}


/* ## Page section: Footer */
.section--footer { display: flex; justify-content: center; align-items: center; position: relative; height: 480px; color: hsl(0 0% 100%); }
.section--footer .com--background { background-position: 50% 84%; opacity: 0.8; }
.section--footer--content { position: relative; top: -32px; text-align: center; }


/* # Signup form */
.signup--content { width: 90%; max-width: 680px; margin: 0 auto; padding: 60px 48px 40px; background: hsl(225  90% 15% / 0.3); border-radius: 8px; backdrop-filter: blur(7px) brightness(0.46); }
.signup--content h2 { margin-bottom: 28px; font-family: helvetica, arial, sans-serif; font-size: 2rem; font-weight: bold; line-height: 2.1rem; color: hsl(0 0% 100%); }
.signup--content fieldset { border: none; }
.signup--content .form-field { margin-bottom: 20px; }
.signup--content .form-field:last-of-type { margin-bottom: 0; }
.signup--content .frm_submit { margin-top: 24px; }
/* .signup--content .frm_submit input { box-shadow: 0 0 12px 1px hsl(281deg 31% 68% / 70%); } */
.signup--content .frm_description,
.signup--content .consent-info,
.signup--content .text-info,
.signup--content .frm_error { text-transform: uppercase; font-size: 0.7rem; line-height: 1rem; color: hsl(0 0% 100%); }
.signup--content .text-info { margin-top: 24px; }
.signup--content .frm_description,
.signup--content .frm_error { margin-top: 6px; }
.signup--content .frm_error { color: hsl(0deg 100% 70%); }
.signup--content .consent-info { margin-top: -10px; }
.signup--content select { min-width: 50%; height: 6ex; padding-left: 0.7rem; padding-right: 0.7rem; border-radius: 2px; }
@media (max-width: 767px) {
  .signup--content { width: 100%; max-width: none; padding: 100px 6% 68px; border-bottom-color: hsl(0 0% 10%); border-radius: 0; }
  .signup--content select { width: 100%; }
}

/* ## Embedded 451.io form: white button label (all breakpoints)
   The form renders in light DOM inside <lum-root>, so this scoped descendant
   rule reaches its submit control; !important overrides the embed's own button
   text color. Scoped to the button/submit input only — nothing about the card's
   layout is touched. */
.signup--form button,
.signup--form input[type="submit"],
.signup--form input[type="button"] { color: #fff !important; }

/* ## Fit the embedded 451.io form inside the fold (desktop only)
   The .fold is a fixed 100vh hero, but the Lumavate embed (formId
   wnmu.forms.29820) is a long multi-field form (address block) that would push
   past the viewport. On desktop we make .signup--content a flex column: the
   "Learn more now." heading stays pinned, and the .signup--form wrapper takes
   the remaining height and scrolls internally so the whole box stays within the
   fold. We only ever size the WRAPPER, never <lum-root>, so the form's own card
   styling is left intact. On phones (<768px) the fold is auto-height and the
   page scrolls normally, so none of this applies. */
@media (min-width: 768px) {
  .signup--content {
    display: flex;
    flex-direction: column;
    /* Stay inside the 100vh fold: 100px logo row + 60px scroller row + slack. */
    max-height: calc(100vh - 200px);
    /* Trim vertical padding to hand more of the fold to the form itself. */
    padding-top: 36px;
    padding-bottom: 28px;
  }
  .signup--content h2 { flex: 0 0 auto; }         /* heading never shrinks/scrolls */
  .signup--form {
    flex: 1 1 auto;    /* fill the space left under the heading */
    min-height: 0;     /* allow this flex child to shrink so overflow can engage */
    overflow-y: auto;  /* scroll the tall form inside the fold */
    scrollbar-width: thin;
  }
  /* Keyboard focus ring for the scrollable region (it's tabindex=0). */
  .signup--form:focus-visible { outline: 2px solid var(--color-wnmu-yellow); outline-offset: 2px; }
}


/* # Debug */
.section--fold--ready-to-apply { display: none; }
/* .signup { opacity: 0.9; } */
/* .signup { display: none; } */