/* ============================================================
   RxStore — Contact page
   Page header, the form itself, and the support aside beside it.
   Everything here pulls from tokens.css; the accordion at the
   bottom of the page is the FAQ block already defined in
   sections.css and is not restyled.
   ============================================================ */

/* ============================================================
   1. Page header
   The hero on the home page is a photograph. Repeating that here
   would put a 70vh image above a form nobody can see — so this is
   the same idea at a quarter of the height: one accent bloom, one
   hairline grid, and type. Nothing that has to be downloaded.
   ============================================================ */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}

/* Grid lines at 6% rather than a visible rule — at full strength this
   reads as graph paper; this faint it only stops the panel from looking
   like flat grey. Masked so it never reaches the edges. */
.pagehead__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--a-500) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--a-500) 6%, transparent) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

.pagehead__glow {
  position: absolute;
  z-index: -1;
  top: -14rem;
  left: 50%;
  width: min(58rem, 130%);
  height: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    color-mix(in oklab, var(--e-200) 34%, transparent),
    transparent 68%
  );
  filter: blur(60px);
  pointer-events: none;
}

.pagehead__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 44rem;
}

.pagehead h1 {
  margin-top: var(--s-5);
  /* The h1 step tops out at 76px, which is hero scale. A page header
     carrying one line of copy does not need to compete with that. */
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
}

.pagehead__lead {
  margin-top: var(--s-5);
  max-width: 36rem;
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ---------- Breadcrumb ---------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: var(--t-sm);
  color: var(--text-subtle);
}

.crumbs a {
  color: var(--text-muted);
  transition: color var(--d-base) var(--ease);
}

.crumbs a:hover {
  color: var(--detail);
}

.crumbs svg {
  opacity: 0.55;
}

.crumbs [aria-current] {
  color: var(--text);
  font-weight: 500;
}

/* ============================================================
   2. Layout
   Form left, support aside right. The aside is sticky because the
   message field grows as you type — at 300 words the email address
   would otherwise be a screen and a half above you.
   ============================================================ */

.contact {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--section-y);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

/* ============================================================
   3. Form card
   Same construction as the buttons in base.css: a near-flat
   gradient, an inset top highlight, a hairline ring, and a
   blue-tinted shadow stack. It has to look like it came from the
   same place as the "Shop Now" button or the page falls apart.
   ============================================================ */

.form-card {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: linear-gradient(180deg, var(--n-0) 0%, var(--n-25) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow:
    inset 0 1px 0 var(--n-0),
    var(--sh-lg);
}

/* A 2px accent seam across the top edge, fading at both ends. It is the
   only colour on an otherwise white card and it ties the card to the
   teal detail used everywhere else on the site. */
.form-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklab, var(--e-400) 55%, transparent) 22%,
    color-mix(in oklab, var(--a-400) 55%, transparent) 78%,
    transparent
  );
  pointer-events: none;
}

.form-card__head {
  margin-bottom: var(--s-8);
}

.form-card__head h2 {
  font-size: var(--t-h3);
}

.form-card__head p {
  margin-top: var(--s-3);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ============================================================
   4. Fields
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* An author-level `display: flex` beats the UA stylesheet's
   `[hidden] { display: none }`, so the attribute has to be re-asserted
   here or the form stays on screen underneath the success panel. Same
   reason .mobile-menu[hidden] exists in header.css. */
.form[hidden] {
  display: none;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--text);
}

/* "Optional" rather than an asterisk on everything else: four red stars
   in a six-field form read as a warning, not as guidance. */
.field__note {
  font-size: var(--t-xs);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.8125rem var(--s-4);
  background: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  box-shadow: inset 0 1px 2px color-mix(in oklab, var(--n-900) 4%, transparent);
  transition:
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    background-color var(--d-base) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--n-400);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--border-strong);
}

/* The focus ring is the detail teal at 18%, not the browser default and
   not the navy — navy on this border is nearly invisible. outline is
   suppressed because the ring already does that job, and only here:
   every other focusable thing on the site keeps the global outline. */
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--detail);
  box-shadow:
    inset 0 1px 2px color-mix(in oklab, var(--n-900) 3%, transparent),
    0 0 0 3px color-mix(in oklab, var(--e-400) 18%, transparent);
}

.textarea {
  min-height: 9.5rem;
  resize: vertical;
  line-height: var(--lh-body);
}

/* ---------- Select ---------- */

/* The chevron is inlined as a data URI rather than pulled from the sprite
   because a native <select> cannot contain markup. Stroke is --n-500. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-10);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 5.5 6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 1.125rem;
}

/* Before a choice is made the prompt should read as a placeholder, not
   as a selected value. Driven by the required + empty-value option. */
.select:invalid {
  color: var(--n-400);
}

/* ---------- Error state ---------- */

.field--error .input,
.field--error .textarea,
.field--error .select {
  border-color: var(--bad-500);
  background: var(--bad-50);
}

.field--error .input:focus,
.field--error .textarea:focus,
.field--error .select:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad-500) 16%, transparent);
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--bad-600);
}

.field--error .field__error {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .field--error .field__error {
    animation: field-in 260ms var(--ease);
  }
}

@keyframes field-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* ---------- Honeypot ---------- */

/* Positioned off-screen rather than display:none — bots skip anything the
   CSSOM reports as hidden and cheerfully fill in everything else. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   5. Consent row
   ============================================================ */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
}

/* The native box is kept in the layer but made invisible, so it still
   receives focus, clicks, and the label association. */
.check input {
  position: absolute;
  opacity: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  margin: 0;
}

.check__box {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  margin-top: 0.1875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--n-0);
  color: transparent;
  box-shadow: inset 0 1px 2px color-mix(in oklab, var(--n-900) 5%, transparent);
  transition:
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}

.check:hover .check__box {
  border-color: var(--detail);
}

.check input:checked + .check__box {
  background: var(--detail);
  border-color: var(--detail);
  color: var(--n-0);
  box-shadow: none;
}

.check input:focus-visible + .check__box {
  outline: 2px solid var(--detail);
  outline-offset: 2px;
}

.check__text {
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--text-muted);
}

.field--error .check__box {
  border-color: var(--bad-500);
  background: var(--bad-50);
}

/* ============================================================
   6. Submit row
   ============================================================ */

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-subtle);
}

.form__submit {
  min-width: 12rem;
}

.form__privacy {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--text-subtle);
}

.form__privacy svg {
  color: var(--detail);
}

/* ---------- Sending state ---------- */

.form--sending {
  pointer-events: none;
}

.form--sending .form__submit {
  opacity: 0.75;
}

/* The arrow is swapped for this and the label for "Sending…", so the
   button changes state without changing height. */
.spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.8px solid color-mix(in oklab, var(--n-0) 35%, transparent);
  border-top-color: var(--n-0);
  border-radius: 50%;
  animation: spin 620ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   7. Success panel
   Replaces the form in place rather than routing to a thank-you
   page — the aside beside it stays put, so the address you might
   want to follow up on does not vanish with the confirmation.
   ============================================================ */

.sent {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-8) var(--s-4) var(--s-6);
}

.sent[data-open='true'] {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .sent[data-open='true'] {
    animation: sent-in var(--d-slow) var(--ease) backwards;
  }
}

@keyframes sent-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.sent__mark {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  color: var(--n-0);
  background: linear-gradient(180deg, var(--e-400) 0%, var(--e-600) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--n-0) 40%, transparent),
    0 6px 18px color-mix(in oklab, var(--e-600) 32%, transparent);
}

/* The tick draws itself rather than appearing. 34 is the rounded-up path
   length of the check glyph in the sprite. */
@media (prefers-reduced-motion: no-preference) {
  .sent[data-open='true'] .sent__mark svg path {
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: tick 520ms var(--ease) 180ms forwards;
  }
}

@keyframes tick {
  to {
    stroke-dashoffset: 0;
  }
}

.sent h2 {
  margin-top: var(--s-6);
  font-size: var(--t-h3);
}

.sent p {
  margin-top: var(--s-3);
  max-width: 28rem;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.sent strong {
  color: var(--text);
  font-weight: 600;
}

.sent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* ============================================================
   8. Support aside
   ============================================================ */

.aside {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-6));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- Email card ---------- */

.mail-card {
  display: block;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  transition:
    border-color var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    transform var(--d-base) var(--ease);
}

.mail-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.mail-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.mail-card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  color: var(--detail);
  background: var(--detail-soft);
  border: 1px solid color-mix(in oklab, var(--e-300) 40%, transparent);
}

.mail-card__go {
  color: var(--text-subtle);
  transition:
    transform var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

.mail-card:hover .mail-card__go {
  color: var(--detail);
  transform: translate(2px, -2px);
}

.mail-card__label {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Wraps rather than overflowing once the aside drops to a single column
   on narrow screens. */
.mail-card__value {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 550;
  letter-spacing: -0.018em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.mail-card__meta {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Helper panel ---------- */

.panel {
  padding: var(--s-6);
  background: var(--surface-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
}

.panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.panel__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text-muted);
}

.panel__list svg {
  margin-top: 0.3125rem;
  color: var(--detail);
}

/* ---------- Emergency notice ---------- */

/* Dark, so it separates from the two light cards above it without using
   red. A red panel on a telehealth page reads as an error in the page
   rather than as a safety note. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--surface-invert);
  color: color-mix(in oklab, var(--n-0) 76%, transparent);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.notice strong {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--n-0);
}

.notice svg {
  margin-top: 0.1875rem;
  color: var(--e-300);
}

/* ============================================================
   9. Contact-page FAQ
   The accordion itself is the one in sections.css. Only the two
   things that differ on this page are set here: the aside is not
   sticky (it sits above the list, not beside it) and the block is
   centred and narrower than the home-page version.
   ============================================================ */

.faq--contact .faq__inner {
  display: block;
  max-width: 48rem;
  margin-inline: auto;
}

.faq--contact .faq__aside-sticky {
  position: static;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-10);
}

.faq--contact .faq__aside-body {
  max-width: 32rem;
}

/* ============================================================
   10. Responsive
   ============================================================ */

@media (max-width: 64rem) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
  /* Sticky is pointless once the aside is under the form, and the three
     cards read better as a row than as a tall stack. */
  .aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-items: start;
  }
}

@media (max-width: 40rem) {
  .form__row {
    grid-template-columns: 1fr;
  }
  .form__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .form__submit {
    width: 100%;
  }
  .form__privacy {
    justify-content: center;
  }
  .aside {
    grid-template-columns: 1fr;
  }
}