/* ============================================================
   NOVA ONLINE — online.css
   Extends style.css for the "Where You're @" pages
============================================================ */

/* ============================================================
   SITE HEADER — NOVA Online variant
============================================================ */
.site-header--online {
  background: var(--nova-white);
  border-bottom: 1px solid #e0e0e0;
}

/* ============================================================
   GET STARTED FORM — Online variant
============================================================ */
.online-hero .get-started-form {
  background: #183721;
}

.online-hero .btn-submit {
  background: #006937 !important;
  border-color: #006937 !important;
  border-radius: 20px;
  font-size: 1.35rem;
  font-weight: 700;
  font-style: italic;
}

.online-hero .get-started-form__title {
  text-align: center;
}

.online-hero .get-started-form__title,
.online-hero .form-field label,
.online-hero .sms-terms,
.online-hero .sms-terms a,
.online-hero .required-mark {
  color: var(--nova-white);
}

.site-header--online .site-header__logo img {
  max-height: 100px;
}


/* ============================================================
   ONLINE HERO
============================================================ */
.online-hero {
  background-color: var(--nova-white);
  background-image: var(--online-hero-bg);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: left top;
  padding: 3rem 1.25rem;
  color: var(--nova-black);
}

.online-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.online-hero__headline {
  align-self: end;
}

.online-hero__headline h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 1rem;
  color: var(--nova-black);
}

.online-hero__headline h1 em {
  font-style: italic; 
  display: block;
}

.online-hero__headline h1 span {
  font-size: 1.6rem;
  margin-top: 1rem;
  font-weight: normal;
  line-height:  1.4;
  display: block;
  max-width: 550px;
}

.online-hero__headline p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--nova-black);
  max-width: 500px;
}


.form-field label .required-mark {
  color: white;
}

/* SMS terms links on dark green bg */
.online-hero .get-started-form .sms-terms a {
  color: var(--nova-gold);
}

.online-hero .get-started-form .sms-terms a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.online-hero .get-started-form .sms-terms a:focus {
  outline: 2px solid var(--nova-gold);
  outline-offset: 2px;
  color: var(--nova-gold);
}

/* Focus visibility inside dark green form */
.online-hero .get-started-form .form-field input:focus,
.online-hero .get-started-form .form-field select:focus {
  outline: none;
  border-color: var(--nova-gold);
  box-shadow: 0 0 0 3px rgba(240, 180, 40, 0.7);
}

.online-hero .get-started-form .form-field--checkbox input[type="checkbox"]:focus {
  outline: 3px solid var(--nova-gold);
  outline-offset: 2px;
}

.online-hero .get-started-form .btn-submit:focus {
  outline: 3px solid var(--nova-gold);
  outline-offset: 3px;
}
/* ============================================================
   @ SECTIONS
============================================================ */
.at-section {
  padding: 4rem 1.25rem;
}

.at-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.at-section__label {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  margin-bottom: 1rem;
}

.at-section__label .at-symbol {
  color: var(--nova-gold);
}

.at-section__content h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.at-section__content p {
  font-size: 1.2rem;
  line-height: 1.75;
  max-width: 560px;
}

.at-section__content p + p {
  margin-top: 0.75rem;
}

/* Light sections */
.at-section--light {
  background: var(--nova-white);
}

.at-section--light .at-section__label,
.at-section--light .at-section__content h2 {
  color: var(--nova-green-dark);
}

.at-section--light.at-section--bleed-right .at-section__content h2,
.at-section--light.at-section--bleed-right .at-section__content p {
  color: var(--nova-black);
}

/* Dark sections */
.at-section--dark {
  background: var(--nova-green-dark);
  color: var(--nova-white);
}

.at-section--dark .at-section__label,
.at-section--dark .at-section__content h2 {
  color: var(--nova-white);
}

.at-section--dark .at-section__content p {
  color: var(--nova-white);
}

/* Black sections */
.at-section--black {
  background: var(--nova-black);
  color: var(--nova-white);
}

.at-section--black .at-section__label,
.at-section--black .at-section__content h2 {
  color: var(--nova-white);
}

.at-section--black .at-section__content p {
  color: rgba(255,255,255,0.9);
}

/* Gold accent */
.at-section--gold {
  background: var(--nova-gold);
}

.at-section--gold .at-section__label,
.at-section--gold .at-section__content h2 {
  color: var(--nova-green-darker);
}

.at-section--gold .at-section__label .at-symbol {
  color: var(--nova-green-darker);
}

/* ============================================================
   CHECKLIST BOX
============================================================ */

.at-section__checklist {
  background: var(--nova-white);
  border-radius: 4px;
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
}

.at-section__checklist .online-feature-list li {
  color: var(--nova-black) !important;
}

/* ============================================================
   FEATURE LIST — online variant
============================================================ */
.online-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}

.online-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.32rem;
  font-weight: 500;
}

.online-feature-list li .fa-check {
  color: var(--nova-gold);
  font-size: 2rem;
  flex-shrink: 0;
}

.at-section--dark .online-feature-list li,
.at-section--black .online-feature-list li {
  color: var(--nova-white);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .online-hero {
    background-position: top center;
    background-size: 100%;
    padding-top: 55vw;
  }

  .online-hero__inner {
    grid-template-columns: 1fr;
  }

  .online-hero .get-started-form {
    margin-top: 2rem;
  }

  .at-section__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Hide the large decorative @ label on mobile — content heading says it all */
  .at-section__label {
    display: none;
  }

  .at-section--black .at-section__label {
    display: block;
    font-size: 2rem;
  }

  .at-section--bleed-right {
    background-image: none !important;
  }


  .at-section {
    padding: 2rem 1.25rem;
  }

  .at-section__content h2 {
    font-size: 1.5rem;
  }

  .at-section__content p {
    font-size: 1rem;
  }

  .online-feature-list {
    gap: 0.75rem;
  }
}

.field-error {
  color: white
}