/* ==========================================================================
   Components — buttons, cards, forms, dialogs and the repeated content blocks.
   ========================================================================== */

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.65rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease), border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.65;
  pointer-events: none;
  transform: none;
}

.btn--primary {
  background: var(--navy-700);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--navy-800);
  color: #fff;
}

.btn--accent {
  background: var(--rose-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  background: var(--rose-700);
  color: #fff;
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--navy-700);
}

.btn--ghost:hover {
  border-color: var(--navy-700);
  color: var(--navy-700);
}

.btn--light {
  background: #fff;
  color: var(--navy-700);
}

.btn--light:hover {
  background: var(--blue-100);
  color: var(--navy-700);
}

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn--block {
  width: 100%;
}

/* A row of buttons. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--space-6);
}

/* Inline text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--navy-700);
  text-decoration: none;
}

.link-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--duration) var(--ease);
}

.link-arrow:hover {
  color: var(--rose-600);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --- Cards ------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-300);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--blue-100);
  color: var(--navy-700);
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.card--interactive:hover .card__icon {
  background: var(--rose-600);
  color: #fff;
}

.card__title {
  font-size: var(--text-lg);
}

.card p {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.card--accent {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: rgba(255, 255, 255, 0.82);
}

.card--accent .card__title,
.card--accent h3 {
  color: #fff;
}

.card--accent p {
  color: rgba(255, 255, 255, 0.78);
}

.card--accent .card__icon {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* --- Quick-info strip --------------------------------------------------- */

.info-strip {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.info-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--rose-100);
  color: var(--rose-600);
}

.info-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.info-card__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy-700);
  text-decoration: none;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* For long values such as e-mail addresses. */
.info-card__value--compact {
  font-size: var(--text-base);
}

a.info-card__value {
  min-height: 1.75rem;
}

a.info-card__value:hover {
  color: var(--rose-600);
}

.info-card__note {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Checklist ---------------------------------------------------------- */

.check-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
}

/* The tick sits in a reserved gutter rather than as a flex item: flex would
   split an item containing inline markup (a leading `<strong>`, say) into two
   separate items and lay them out as columns, so the copy stays in normal
   inline flow and hangs off the padding instead. */
.check-list li {
  position: relative;
  padding-inline-start: 2.25rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--rose-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da2654' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 0.85rem no-repeat;
}

.section--navy .check-list li::before {
  background-color: rgba(255, 255, 255, 0.14);
}

/* --- Chips -------------------------------------------------------------- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--blue-100);
  color: var(--navy-700);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}

.chip--accent {
  background: var(--rose-100);
  color: var(--rose-700);
}

/* --- Doctor profile ------------------------------------------------------ */

.doctor-photo {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--blue-100);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}

/* <picture> is inline by default; make it fill the frame so the img's
   height:100% resolves against the aspect-ratio box rather than the line box. */
.doctor-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
}

/* The photo sits on a decorative outline that is offset down and to the right. */
.doctor-photo__frame {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  padding: 0 1rem 1rem 0;
}

.doctor-photo__frame::before {
  content: "";
  position: absolute;
  inset: 1rem 0 0 1rem;
  border: 2px solid var(--blue-300);
  border-radius: var(--radius-xl);
}

.doctor-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.25rem;
  margin-top: -3rem;
  margin-inline: auto;
  width: fit-content;
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

.doctor-badge svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--rose-600);
  flex: none;
}

.doctor-badge strong {
  display: block;
  font-family: var(--font-display);
  line-height: 1.2;
}

.doctor-badge span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Statistics ---------------------------------------------------------- */

.stat-grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.stat {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.stat__label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

/* --- Numbered steps ------------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: step;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--rose-600);
}

.step h3 {
  font-size: var(--text-lg);
}

.step p {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* --- Timeline ------------------------------------------------------------ */

.timeline {
  display: grid;
  gap: 1.75rem;
  list-style: none;
  padding-left: 1.75rem;
  border-left: 2px solid var(--border-strong);
}

.timeline li {
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 1px);
  top: 0.55rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--rose-600);
  box-shadow: 0 0 0 4px var(--rose-100);
  transform: translateX(-50%);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rose-600);
}

.timeline h3 {
  font-size: var(--text-lg);
  margin-block: 0.15rem 0.35rem;
}

.timeline p {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* --- Tabs ---------------------------------------------------------------- */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.tab {
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--navy-700);
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.tab:hover {
  border-color: var(--navy-500);
}

.tab[aria-selected="true"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel .unordered-list {
  display: grid;
  gap: 1rem;
  list-style: none;
}

.tab-panel .unordered-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-muted);
}

.tab-panel .unordered-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  background: var(--rose-600);
  transform: rotate(45deg);
}

/* --- Testimonials -------------------------------------------------------- */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  height: 100%;
}

/* Verbatim patient review, given the full row so the longer text stays
   comfortable to read. */
.testimonial--featured {
  grid-column: 1 / -1;
  border-color: var(--border-strong);
  background: var(--surface-alt);
}

.testimonial__rating {
  margin: 0;
  color: var(--rose-600);
  letter-spacing: 0.15em;
  line-height: 1;
}

.testimonial__quote {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--rose-100);
}

.testimonial blockquote {
  margin: 0;
  color: var(--text-muted);
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.avatar-initials {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--navy-700);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.testimonial__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1.3;
}

.testimonial__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Call-to-action band -------------------------------------------------- */

.cta-band {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  color: #fff;
}

.cta-panel h2,
.cta-panel h3 {
  color: #fff;
  font-size: var(--text-xl);
}

.cta-panel p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-base);
  margin-top: 0.25rem;
}

.cta-panel--emergency {
  background: linear-gradient(135deg, var(--rose-600), var(--rose-700));
}

.cta-panel--appointment {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.form-grid > .field--full {
  grid-column: 1 / -1;
}

.fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.fieldset + .fieldset {
  margin-top: 2rem;
}

.fieldset__legend {
  display: block;
  width: 100%;
  padding: 0 0 0.85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--navy-700);
}

.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.field__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-700);
}

.field__label .req {
  color: var(--rose-600);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
}

/* Chrome on Android hides the native calendar button, so date fields look like
   plain text boxes. Draw our own icon and lay the (now transparent) native
   button over it, so the same tap opens the picker on every platform. Scoped
   to engines that expose the pseudo-element -- Firefox draws its own icon.
   `appearance: none` is what keeps that to one icon on Android: the mobile
   single-field UI renders date inputs as a menulist button, whose chevron
   would otherwise sit next to the calendar icon we draw. */
@supports selector(::-webkit-calendar-picker-indicator) {
  .field input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
  }

  .field input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 4px rgba(61, 98, 166, 0.15);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.field__error {
  display: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--danger);
}

.field.is-invalid .field__error {
  display: block;
}

.field.is-invalid input:not([type="checkbox"]),
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--danger);
  /* background-color, not the shorthand -- the shorthand would wipe out the
     select chevron and the date field's calendar icon. */
  background-color: var(--danger-soft);
}

/* --- Consent ------------------------------------------------------------- */

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  align-items: start;
  margin-top: 1.75rem;
  padding: 1rem 1.15rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* 1.5rem = 24px, the WCAG 2.5.8 minimum target size. */
.consent input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  padding: 0;
  flex: none;
  accent-color: var(--rose-600);
}

.consent__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
}

.consent__label a {
  font-weight: 600;
}

.consent .field__error {
  grid-column: 2;
}

.consent.is-invalid {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* --- Captcha -------------------------------------------------------------- */

.captcha-field {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* hCaptcha renders a fixed-width iframe (302px normal, 164px compact) that no
   amount of parent sizing can shrink. site.js requests the compact widget
   below 386px, which is exactly the width at which the normal one stops
   fitting the card (gutter + form-card padding leave it 302px there).

   Nothing here constrains the widget itself. It is hCaptcha's element, and
   giving it `overflow` makes it a scroll container in both axes — `overflow-x`
   computes `overflow-y` from visible to auto — which clips whatever the widget
   draws inside its own box, the challenge UI included. */
.captcha-field .h-captcha {
  min-height: 78px;
}

/* Backstop for the one case the size swap cannot cover: with site.js blocked,
   the 302px widget renders below 386px and would push the page sideways.
   Scrolling it inside our own wrapper — not inside hCaptcha's — keeps the
   layout intact, and `overflow-x` zeroes this field's automatic minimum size
   so it can never widen the form. */
@media (max-width: 24.125em) {
  .captcha-field {
    overflow-x: auto;
  }
}

/* This error sits outside a .field wrapper, so it shows whenever it has text. */
.captcha-field .field__error {
  display: block;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
}

/* A content-width submit button looks stranded against a column of full-width
   inputs on a phone, so it fills the row there and the note wraps underneath.
   From 48em up there is room for both on one line, so it goes back to its
   natural width. */
.form-actions .btn {
  width: 100%;
}

@media (min-width: 48em) {
  .form-actions .btn {
    width: auto;
  }
}

/* On the narrowest phones the pill's 1.65rem side padding leaves the label too
   little room, so it wraps to a second line and the button grows by a row —
   most visibly when the label swaps to its pending text mid-submit. Trimming
   the padding here buys back the width both labels need to stay on one line. */
@media (max-width: 24.125em) {
  .form-actions .btn {
    padding-inline: 1rem;
  }
}

.form-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Honeypot — hidden from people (and from the a11y tree), visible to bots. */
.hp-field {
  display: none !important;
}

.form-status {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Aside contact panel --------------------------------------------------- */

.contact-aside {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.contact-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.contact-item__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--navy-700);
}

.contact-item__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.contact-item h3 {
  font-size: var(--text-base);
  margin-bottom: 0.15rem;
}

.contact-item p,
.contact-item a {
  font-size: var(--text-base);
  color: var(--text-muted);
  text-decoration: none;
}

.contact-item a:hover {
  color: var(--rose-600);
}

.hours-list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  font-size: var(--text-base);
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

.hours-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hours-list strong {
  font-weight: 600;
}

/* ==========================================================================
   Dialogs
   ========================================================================== */

/* Centring a modal dialog takes two declarations from the browser's own
   stylesheet, and the `* { margin: 0 }` reset in base.css cancels one of them.
   `margin: auto` is what centres the box; `height: fit-content` is what stops
   it stretching, because a box with both `top` and `bottom` at zero fills the
   viewport instead of centring when its height is `auto`. Both are restored
   here rather than carving an exception into the reset.

   `max-height` is declared twice on purpose. The `dvh` pass tracks the visible
   area on phones, where showing or hiding the address bar changes the viewport
   height; browsers without `dvh` fall back to the percentage above it. */
.dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100% - 2rem, 26rem);
  height: fit-content;
  max-height: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.dialog::backdrop {
  background: rgba(15, 31, 60, 0.6);
  backdrop-filter: blur(2px);
}

/* Reduced-motion preferences are handled by the global rule in base.css. */
.dialog[open] {
  animation: dialog-in 0.2s ease-out;
}

.dialog[open]::backdrop {
  animation: dialog-backdrop-in 0.2s ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
  }
}

@keyframes dialog-backdrop-in {
  from {
    opacity: 0;
  }
}

.dialog__body {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.dialog__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
}

.dialog__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.dialog__icon--success {
  background: var(--success-soft);
  color: var(--success);
}

.dialog__icon--error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* The panel is capped at 26rem on every screen, so its type is fixed rather
   than fluid. The page-level scale is tied to the viewport, which grew the
   heading to 26px on a desktop inside a box that had not changed size, and
   the body scale left the message looser than a short notice wants. */
.dialog h2 {
  font-size: 1.375rem;
  line-height: var(--leading-tight);
}

.dialog p {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The panel is narrow enough that the phone number would otherwise split
   across two lines, as the footer e-mail address once did. */
.dialog a {
  white-space: nowrap;
}

.dialog .btn {
  margin-top: var(--space-3);
}

/* On the narrowest phones the panel is only 18rem wide, so it gives some of
   its padding back to the message rather than to the gutter. */
@media (max-width: 24rem) {
  .dialog__body {
    padding: var(--space-5) var(--space-4);
  }
}

/* A phone held sideways leaves barely 390px of height. Tightening the panel
   keeps the whole notice, and its Close button, on screen without scrolling. */
@media (max-height: 30rem) {
  .dialog__body {
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .dialog__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .dialog__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .dialog .btn {
    margin-top: var(--space-2);
  }
}