/* =========================================================
   Renewal Landing — design tokens
   ========================================================= */
:root {
  --ink:        #1d2b24;
  --ink-soft:   #3c4d44;
  --green-deep: #2f4a3a;
  --green:      #5d8f5a;
  --green-bright: #6cc14c;
  --green-pale: #eaf1e6;
  --cream:      #fbfaf6;
  --white:      #ffffff;
  --line:       rgba(29, 43, 36, 0.12);
  --red:        #d32f2f;

  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius: 6px;
  --container: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: inherit; }

/* Landing page: navy behind everything, so when the page is shorter than
   the screen (e.g. phones before the form is opened) the space below the
   footer matches the hero and footer instead of showing white. :has() also
   covers iOS overscroll, which shows the <html> background. */
html:has(body.page--landing),
body.page--landing { background: #0b2041; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-block;
  text-align: center;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.btn--primary {
  background: var(--green-bright);
  color: var(--white);
}
.btn--primary:hover { background: var(--green-deep); }

.btn--outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn--outline:hover { background: rgba(255,255,255,0.15); }

.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; background: var(--green-bright); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  /* Dark navy match to the promo graphic's own background, so the
     letterboxed edges (see .hero__bg img, object-fit: contain) blend
     in instead of showing a seam. */
  background: #0b2041;
  overflow: hidden;
}
/* <picture> wrapper and its inner <img> both need to fill the hero */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  /* The promo graphic carries its own headline/CTA text, so it's shown
     in full (no cropping) rather than cover-cropped like a plain photo. */
  object-fit: contain;
  display: block;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  /* Only the quote form lives here now (the overlaid headline/scrim
     were dropped since the promo image already carries that copy) —
     push it to the side so it doesn't sit on top of the image. */
  justify-content: flex-end;
  gap: 2.5rem;
  padding: 3rem 1.5rem;
  flex-wrap: wrap;
}

.quote-card {
  background: rgba(255,255,255,0.93);
  border-radius: 10px;
  padding: 1.75rem 2.5rem 1.75rem 1.75rem;
  width: 100%;
  max-width: 420px;
  flex: 1 1 360px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.quote-card h2 {
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
}
.quote-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 0.75rem;
}
.field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 0.75rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  display: flex;
  align-items: flex-end;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.field input,
.field select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
}
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 1px;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.consent__checkbox {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--green-bright);
}
.consent__checkbox:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 1px;
}
.consent__label {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.form-status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--green-deep);
  min-height: 1.2em;
}

/* =========================================================
   Sweepstakes terms (scroll-to-enable entry box)
   ========================================================= */
.sweeps-terms {
  margin-bottom: 0.9rem;
}
.sweeps-terms__heading {
  font-size: 0.85rem;
  margin: 0.9rem 0 0.4rem;
}
.sweeps-terms__heading:first-child { margin-top: 0; }
.sweeps-terms__scroll {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  background: var(--white);
}
.sweeps-terms__scroll:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 1px;
}
.sweeps-terms__scroll .consent__label { margin-bottom: 0.9rem; }
.sweeps-terms__scroll .consent__label:last-child { margin-bottom: 0; }
.sweeps-terms__hint {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}
.sweeps-terms__hint.is-satisfied { display: none; }

/* Missing / invalid fields after a submit attempt */
.field input.is-invalid,
.field select.is-invalid,
.sweeps-terms__scroll.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
.consent__checkbox.is-invalid {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.consent:has(.is-invalid) .consent__label { color: var(--red); }

/* Red outline once the terms modal is dismissed. A box-shadow ring
   (rather than a border) follows the rounded corners and doesn't
   shift the layout. */
.quote-card.is-highlighted {
  box-shadow: 0 0 0 3px var(--red), 0 18px 40px rgba(0,0,0,0.25);
}

/* "Terms read" modal (native <dialog>) */
.terms-modal {
  width: calc(100% - 2rem);
  max-width: 420px;
  padding: 1.75rem;
  border: none;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
}
.terms-modal::backdrop { background: rgba(0,0,0,0.5); }
.terms-modal__title {
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
}
.placeholder {
  background: #fff3cd;
  color: #8a6400;
  padding: 0 0.2rem;
  border-radius: 2px;
}

@media (max-width: 560px) {
  .quote-card__row { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .quote-card { padding: 1.75rem; }
  .quote-card__row { gap: 0.75rem; }
}

/* =========================================================
   Mobile layout — promo image on top, form tucked behind a
   "Click to Win Kraken Tickets" button until it's tapped.
   ========================================================= */
.hero__cta { display: none; }
/* Button wording: "Enter Now" on phones, the longer text on the iPad overlay */
.hero__cta-text--tablet { display: none; }
@media (width: 1024px) {
  .hero__cta-text--phone { display: none; }
  .hero__cta-text--tablet { display: inline; }
}
.quote-card__close { display: none; }

/* Tablet and down (iPad Pro portrait is 1024px wide): the form must never
   sit on top of the promo image, so the image flows in the document at
   full width and the form goes underneath it, centered. */
@media (max-width: 1024px) {
  .hero {
    display: block;
    min-height: 0;
  }
  .hero__bg {
    position: static;
    height: auto;
  }
  .hero__bg img {
    height: auto;
  }
  .hero__inner {
    display: block;
    padding: 2rem 1.5rem 3rem;
  }
  .quote-card {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* Phones, and iPad Pro 12.9" portrait (1024 x 1366): additionally tuck
   the form behind the button. */
@media (max-width: 768px), (width: 1024px) {
  .hero__inner {
    padding: 1.25rem 1rem 2rem;
  }
  .hero__cta {
    display: block;
    width: 100%;
    font-size: 1.05rem;
    padding: 1rem 1.25rem;
  }
  .hero__cta[aria-expanded="true"] { display: none; }

  .quote-card {
    display: none;
    position: relative;
    max-width: none;
  }
  .quote-card.is-open { display: block; }
  .quote-card h2 { padding-right: 2.5rem; } /* keep the title clear of the X */

  .quote-card__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.75rem;   /* 44px tap target */
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
  }
  .quote-card__close:hover { background: var(--line); }
  .quote-card__close:focus-visible {
    outline: 2px solid var(--green-bright);
    outline-offset: 1px;
  }
}

/* iPad Pro 12.9" portrait only (1024 x 1366): the button sits on top of
   the promo image, centered in its right third, instead of below it. The
   image is a full-width square here, so its vertical middle is 50vw. */
@media (width: 1024px) {
  .hero__inner {
    position: static; /* let the button position against .hero, not this box */
    padding: 2rem 1.5rem 3rem;
  }
  .hero__cta {
    position: absolute;
    z-index: 2;
    top: calc(50vw + 100px);
    left: calc(100% * 2 / 3 + 1.5rem - 50px);
    right: calc(1.5rem + 50px);
    width: auto;
    transform: translateY(-50%);
    font-size: 1.25rem;
    padding: 1.25rem 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
  .hero__cta:hover { transform: translateY(calc(-50% - 1px)); }
  .quote-card {
    max-width: 560px;
    margin: 0 auto;
  }
  .quote-card.is-open { animation: quote-card-drop 0.35s ease-out; }
}
@keyframes quote-card-drop {
  from { opacity: 0; transform: translateY(-1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Official Rules page
   ========================================================= */
.rules {
  background: var(--cream);
  padding: 2.5rem 1rem 4rem;
}
.rules__card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
}
.rules__back {
  display: inline-block;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: none;
}
.rules__back:hover { text-decoration: underline; }
.rules__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.rules__title { margin-bottom: 0.4rem; }
.rules__tag {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.rules__notice {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--green-bright);
  background: var(--green-pale);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}
.rules__sections {
  margin: 2rem 0 0;
  padding-left: 1.5rem;
}
.rules__sections > li { margin-bottom: 2rem; }
.rules__sections > li::marker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}
.rules__sections h2 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.rules__sections p { font-size: 0.95rem; }
.rules__sections a { color: var(--green-deep); }
.rules__sub {
  margin: 0 0 1em;
  padding-left: 1.5rem;
}
.rules__sub > li { margin-bottom: 0.75rem; }
.rules__caps {
  font-weight: 700;
  color: var(--ink);
}
.rules__copyright {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 600px) {
  .rules { padding: 0 0 2.5rem; }
  .rules__card {
    border: none;
    border-radius: 0;
    padding: 1.75rem 1rem;
  }
  .rules__sections { padding-left: 1.25rem; }
}

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta {
  position: relative;
  background: #0b2641;
  color: var(--white);
  padding: 5rem 1.5rem;
  text-align: center;
}
.final-cta__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.06), transparent 55%);
}
.final-cta__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.final-cta h2 { color: var(--white); }
.final-cta p { color: rgba(255,255,255,0.82); }
.final-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.phone-number--cta::before {
  content: "Call Now ";
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--cream);
}
.site-footer p { margin: 0; color: inherit; }
.site-footer__links { margin-bottom: 0.5rem; }
.site-footer__links a {
  font-size: 0.9rem;
  font-weight: 600;
  text-underline-offset: 3px;
}
/* Landing page: navy to match the hero, instead of cream */
.site-footer--dark {
  background: #0b2041;
  color: rgba(255, 255, 255, 0.75);
}
.site-footer--dark .site-footer__links a { color: var(--white); }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .quote-card.is-open { animation: none; }
}