/* =============================================================================
   AGE GATE — measured from the source panel (#av-overlay-form) at 1440.
   ⚠ MEASUREMENT GAP: the source's age-gate captures at 1024 and 390 came back
   EMPTY (age-gate-1024.json / age-gate-390.json are 20-byte stubs). Everything
   below 992px here is therefore a REASONABLE RESPONSIVE CHOICE, NOT a measured
   source value. Re-capture the gate at 390 and correct these before sign-off —
   and fix this comment when you do. A token commented "from source" that was
   actually guessed is worse than a wrong value.

   Measured at 1440:
     position fixed · z-index 2147483647 · width 576px (= max-width 40%)
     height 211.9px (content-driven) · padding 24px · background #000 solid
     box-shadow rgba(0,0,0,.35) 0 0 30px 0 · border-radius 0 · text-align center
     font Roboto 16px/22.4px
     buttons 180 x 42.39px · YES #FE4D01 · No #A0A0A0 · both #fff Roboto 700 16px
             padding 10px 0 · radius 0
   ============================================================================= */

.th-age-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;      /* measured — the app sits above everything */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ⚠ UNVERIFIED: the source capture recorded a `div#overlay.animation` 900px
   tall and a body scroll lock, but did not measure the scrim's own colour.
   This value is a sensible default, not a measurement. Verify on re-capture. */
.th-age-gate__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.th-age-gate__panel {
  position: relative;
  width: 576px;
  max-width: 40%;
  padding: 24px;
  background: #000;
  color: #fff;
  border-radius: 0;                       /* square — measured */
  box-shadow: rgba(0, 0, 0, .35) 0 0 30px 0;
  text-align: center;
  font-family: var(--th-font);
  font-size: 16px;
  line-height: 22.4px;
}

.th-age-gate__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* The source sets `.logo-image img { max-width: unset; width: auto }` so the
   wordmark renders at its natural size rather than being squeezed. */
.th-age-gate__logo img {
  max-width: unset;
  width: auto;
  height: auto;
  max-height: 60px;
}

/* NOTE: the source deliberately hides its headline
   (`.headline_text { display: none !important }`), so there is no <h*> here
   by design. Do not "helpfully" add one back. */

.th-age-gate__text {
  margin: 0 0 20px;
  color: #fff;
  font-size: 16px;
  line-height: 22.4px;
}

.th-age-gate__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.th-age-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  padding: 10px 0;
  border-radius: 0;
  color: #fff;
  font-family: var(--th-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  text-decoration: none;
  transition: opacity var(--th-speed-fast);
}
.th-age-gate__btn:hover { opacity: .9; text-decoration: none; }

.th-age-gate__btn--yes { background: var(--th-age-accent); }   /* #fe4d01 */
.th-age-gate__btn--no  { background: var(--th-age-decline); }  /* #a0a0a0 */

/* Scroll lock. The source sets body { overflow: hidden } while open. */
body.th-age-locked { overflow: hidden; }

/* --- Below 992px: NOT MEASURED. See the warning at the top of this file. --- */
@media (max-width: 991px) {
  .th-age-gate__panel { max-width: 70%; }
}

@media (max-width: 600px) {
  .th-age-gate__panel { max-width: calc(100% - 32px); width: auto; }
  .th-age-gate__actions { gap: 12px; }
  .th-age-gate__btn { width: auto; flex: 1 1 0; }
}

/* A gate that animates in will photograph as a blank box. Honour the user's
   motion preference AND keep captures deterministic. */
@media (prefers-reduced-motion: reduce) {
  .th-age-gate__btn { transition: none; }
}