/* =============================================================
   /schedule-appointment — book a free consultation
   Builds on guia.css (hero, form card, form fields, BBB band); the process
   and FAQ sections use the shared component styles. This file only covers
   the booking card's own pieces: day/time pickers, steps, confirmation.
   Tap targets stay ≥ 44px — many visitors are seniors on phones.
   ============================================================= */

/* The card's height changes between steps — anchor both hero columns to
   the top so the headline doesn't jump when it does. */
.sched-hero__inner { align-items: start; }
@media (min-width: 900px) {
  .sched-hero__inner .guia-hero__cta { padding-top: var(--space-2xl); }
}

/* Clears the sticky header when #book links / step changes scroll here. */
.sched-card { scroll-margin-top: 7.5rem; }

/* Steps share the form's rhythm; `hidden` must beat the display rule. */
.sched-step { display: grid; gap: var(--space-s); }
.sched-step[hidden] { display: none; }
.sched-step:focus { outline: none; }

.sched-inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.sched-help {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.sched-notice {
  margin: 0;
  padding: var(--space-s);
  border-radius: var(--radius-s);
  background: var(--color-primary-tint);
  line-height: 1.5;
}

/* Text-style button (Change, Request a callback, Google Calendar link). */
.sched-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sched-link--on-dark { color: #fff; }
.sched-link:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------- Day picker: every bookable day visible at once ------- */
.sched-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.sched-day {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.1rem;
  min-height: 3.75rem;
  padding: 0.5rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--color-primary-dark);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.sched-day:hover { border-color: var(--color-primary); }
.sched-day__name { font-weight: 700; }
.sched-day__date { font-size: 0.9rem; }
.sched-day[aria-pressed="true"] {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #fff;
}

/* ------- Times ------- */
.sched-times {
  display: grid;
  gap: var(--space-s);
  min-height: 3rem;
}
.sched-times[aria-busy="true"] { opacity: 0.6; }
.sched-times__group { display: grid; gap: 0.4rem; }
.sched-times__label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.sched-times__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 520px) {
  .sched-times__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sched-time {
  min-height: 2.75rem;
  padding: 0.4rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.sched-time:hover {
  background: var(--color-primary);
  color: #fff;
}
.sched-day:focus-visible,
.sched-time:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* ------- Details step ------- */
.sched-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--color-primary-tint);
}
.sched-summary__when {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.35;
}

/* ------- Confirmation ------- */
.sched-done {
  justify-items: center;
  text-align: center;
  line-height: 1.6;
}
.sched-done p { margin: 0; }
.sched-done__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #dcfce7;
  color: var(--color-success);
}
.sched-done__when {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.sched-done__actions {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-block: var(--space-xs);
}
.sched-done__actions[hidden] { display: none; }

/* Phone numbers in body copy: tap-to-call, never split across lines. */
.sched-tel,
.sched-nowrap,
.faq__answer a[href^="tel:"] { white-space: nowrap; }
.sched-tel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------- FAQ: links inside answers ------- */
.faq__answer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}