/*
 * HCP attestation gate — full-screen blocking overlay shown on HCP pages
 * until the "whenToShowDialog" cookie is set (see assets/js/hcp-gate.js).
 *
 * Recreates the prior site's gate (navy subtitle band, accent-blue title
 * and buttons, thick pale-blue dialog border) using this site's own design
 * tokens rather than the old build's literal hex values — the old palette
 * (#00306c, #5DA8DA, #E5F5FF) already matches --color-brand-primary,
 * --color-accent and --color-brand-tertiary almost exactly.
 */

html.hcp-gate-open {
  overflow: hidden;
}

.hcp-gate {
  position: fixed;
  inset: 0;
  z-index: 100; /* above .consent-banner (60), .site-header (30), .isi (20/21) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-l);
  background-color: rgb(0 0 0 / 60%);
}

.hcp-gate__dialog {
  max-inline-size: 40rem;
  border: 1.875rem solid var(--color-brand-tertiary);
  background-color: var(--color-white);
}

.hcp-gate__title {
  margin: 0;
  padding: var(--space-l) var(--space-l) var(--space-m);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-align: center;
}

.hcp-gate__subtitle {
  margin: 0;
  padding: var(--space-s) var(--space-l);
  background-color: var(--color-brand-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  text-align: center;
}

.hcp-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  padding: var(--space-l);
}

.hcp-gate__option {
  flex: 1 1 12rem;
  border: var(--border-width) solid var(--color-accent);
  padding: var(--space-m) var(--space-l);
  background: none;
  color: var(--color-accent);
  font-family: var(--font-heading);
  text-align: center;
  cursor: pointer;
}

.hcp-gate__option-lead {
  display: block;
  margin-block-end: var(--space-xs);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
}

.hcp-gate__option-sub {
  display: block;
  font-size: var(--font-size-ui);
}

@media (width < 30rem) {
  .hcp-gate__dialog {
    border-width: var(--space-m);
  }

  .hcp-gate__title {
    font-size: var(--font-size-body-lg);
  }

  .hcp-gate__actions {
    flex-direction: column;
  }
}