/**
 * Age verification gate.
 *
 * The overlay is OPAQUE, which is a deliberate departure. Production uses a
 * Bootstrap backdrop at 50% black, so the gallery images stay half-visible
 * behind the very dialog asking whether you want to see them. Since the stated
 * reason for the gate is graphic content, a translucent backdrop defeats it.
 *
 * Bootstrap 3 class names from the old theme are not reproduced — the brief
 * drops Bootstrap. This matches the behaviour, not the markup.
 *
 * `#meps-age-gate { display:none }` and the armed override live INLINE in the
 * head (inc/age-gate.php) so they apply on first paint. Everything here is
 * appearance only; nothing in this file decides whether the gate shows.
 */

.age-gate {
  position: fixed;
  inset: 0;
  /* One above the sticky header (9999, navigation.css) — at a tie the gate
     only won by DOM order, which is not a guarantee worth keeping. */
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-2);
  overflow-y: auto;
}

.age-gate__panel {
  max-width: 560px;
  width: 100%;
  margin: auto;
  padding: 48px 40px 40px;
  background: var(--color-3);
  text-align: center;
}

.age-gate__badge {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
}

.age-gate__title {
  margin: 0 0 16px;
  font-family: var(--font-family-2);
  font-size: var(--font5);
  line-height: 1.25;
  color: var(--color-2);
}

.age-gate__copy {
  margin: 0 0 32px;
  font-size: var(--font2);
  line-height: 1.6;
}

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

.age-gate__actions .button {
  min-width: 180px;
  cursor: pointer;
}

/* CONTINUE is the default action and takes the primary treatment. */
.age-gate__accept {
  background: var(--color-1);
  color: var(--color-3);
  border: 1px solid var(--color-1);
}

.age-gate__decline {
  background: transparent;
  color: var(--color-2);
  border: 1px solid var(--color-2);
}

.age-gate__accept:hover { background: var(--color-hover-10); border-color: var(--color-hover-10); }
.age-gate__decline:hover { background: var(--color-2); color: var(--color-3); }

/* The dialog cannot be escaped, so the focus ring must never be suppressed. */
.age-gate__actions .button:focus-visible {
  outline: 3px solid var(--color-1);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .age-gate__panel { padding: 32px 20px 28px; }
  .age-gate__badge { width: 110px; height: 110px; margin-bottom: 18px; }
  .age-gate__title { font-size: var(--font3); }
  .age-gate__actions .button { min-width: 0; width: 100%; }
}