/* Visit page composition — a practical reference page. Scannable
   structure over visual flourish, built on the same primitives as the
   rest of the site (placeholder chip/block, section/surface utilities). */

/* Body copy on this page only, normal-weight and centered - paragraphs,
   list items, and the policy table's cells/headers. Scoped to #main (the
   <site-header> nav and h1/h2/h3 section headings live outside/aren't
   targeted here) so this doesn't touch the site-wide nav or this page's own
   heading hierarchy - confirmed scope, not a guess. Overrides style.css's
   site-wide "justify body copy at >=600px / left on mobile" default, which
   still applies to every other page. */
#main p,
#main li,
#main td,
#main th {
  font-weight: 400;
  text-align: center;
}

/* Every .visit-section is single-column prose/lists (no multi-column
   layout to preserve full width for) - narrowing and centering the wrap
   itself, rather than individual paragraphs inside it, keeps the heading and
   body copy aligned to the same column instead of the heading spanning the
   full .wrap while only the paragraphs beneath it narrow. */
.visit-section .wrap {
  max-width: var(--content-width-prose);
  margin-inline: auto;
}

.visit-section + .visit-section {
  border-top: 1px solid var(--rule);
}

.visit-section h2 {
  margin-bottom: var(--space-sm);
}
.visit-section h3 {
  margin-top: var(--space-lg);
}
/* Overrides the global p { max-width: var(--measure) } - .visit-section
   .wrap above already narrows the whole section to a readable column, so
   this doesn't also need its own separate, narrower cap stacked on top of
   that (the actual over-correction: two nested max-widths, leaving body
   copy noticeably narrower than the heading right above it). */
.visit-section p {
  max-width: none;
}

/* Draft flag — content exists but isn't final, distinct from the
   placeholder chip/block ("nothing here yet"). */
.draft-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: var(--space-xs);
  padding: 2px var(--space-xs);
  border: 1.5px dashed var(--moss);
  color: var(--moss);
  font-size: var(--text-xs);
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.draft-note {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--moss);
  margin-top: var(--space-sm);
}

/* Directions maps - .map-block groups one office's heading/coords/embed/
   view-larger-map link as one unit, repeated once per office (see
   #getting-here on visit.html). The h3's own margin-top (below) already
   separates one block from the next; map-block itself needs no spacing of
   its own. */
.map-block__coords {
  font-size: var(--text-sm);
  color: var(--moss);
}
.map-frame {
  position: relative;
  width: 100%;
  max-width: var(--content-width-prose);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-link {
  margin-top: var(--space-xs);
}

/* Cancellation & rescheduling table */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.policy-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  margin-block: var(--space-md);
}
.policy-table th,
.policy-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
}
.policy-table th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--moss);
  border-bottom: 2px solid var(--moss);
}

/* "Already booked? Find my booking" under the page intro */
.find-booking-line {
  margin-top: var(--space-sm);
}