/* ==========================================================================
   contact.css — Contact page styles
   --------------------------------------------------------------------------
   Milestone 14 · Contact Page

   Page-scoped styles only. Every section composes existing components
   (content splits, contact cards, forms, tables, buttons, section/layout
   primitives, header, footer) — no component styling lives here. These rules
   style page content that has no reusable component yet: the quick-contact
   method grid (4 → 2×2, Phase 2 §6.8), the office + map placeholder
   (Phase 2 §6.4.2), the form context rail "What happens next" (§6.4.3), the
   business-hours table (§6.4.4) and the FAQ accordion (§6.4.5). The FAQ uses
   native <details>/<summary> so it works without JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   65/35 form + rail split (Phase 2 §6.4.3 / §6.8). The shared content-split
   grid offers 60/40 and 70/30; the documented ratio is 65/35.
   -------------------------------------------------------------------------- */
.contact-split--65-35 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .contact-split--65-35 {
    grid-template-columns: 13fr 7fr;
  }
}

@media (min-width: 1024px) {
  .contact-split--65-35 {
    gap: var(--space-32);
  }
}

/* --------------------------------------------------------------------------
   Quick contact methods (Phase 2 §6.4.1) — 4-icon action row. The shared
   feature-grid collapses to a single column on mobile; the documented
   behaviour is 2×2 on tablet AND mobile (§6.8), so the grid is page-scoped.
   -------------------------------------------------------------------------- */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

@media (min-width: 1024px) {
  .contact-methods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

/* --------------------------------------------------------------------------
   Office + map (Phase 2 §6.4.2 · Phase R8.5) — Google Maps embed iframe,
   width 100%, 450px tall on tablet/desktop, 320px on mobile. The card
   border/radius mirror the shared token surface treatment.
   -------------------------------------------------------------------------- */
.contact-map {
  margin: 0;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .contact-map iframe {
    height: 450px;
  }
}

.contact-office address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Form context rail (Phase 2 §6.4.3) — "What happens next?" numbered steps
   (mono counters echoing the engineering-document motif) + AMC note. The
   highlight tint is applied to the label only, never the whole block
   (§6.4.4 convention).
   -------------------------------------------------------------------------- */
.contact-rail__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-8);
}

.contact-rail__step {
  position: relative;
  padding-inline-start: var(--space-40);
  counter-increment: step;
}

.contact-rail__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-primary);
}

.contact-rail__step p {
  margin: 0;
}

.contact-rail__note {
  margin: var(--space-24) 0 0;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-body);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
}

.contact-rail__label {
  font-weight: var(--weight-semibold);
  color: var(--color-highlight);
}

.contact-rail__phone {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  text-decoration: none;
}

.contact-rail__phone:hover,
.contact-rail__phone:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Business hours (Phase 2 §6.4.4) — Design System §9 table styling: no
   vertical rules, horizontal rules only, mono values. Wrapped so it scrolls
   horizontally on mobile. Emergency line keeps the highlight on the label.
   -------------------------------------------------------------------------- */
.contact-table-wrap {
  overflow-x: auto;
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
}

.contact-table th,
.contact-table td {
  padding: var(--space-8) var(--space-16);
  text-align: left;
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
  vertical-align: top;
}

.contact-table th:first-child,
.contact-table td:first-child {
  padding-inline-start: 0;
}

.contact-table th:last-child,
.contact-table td:last-child {
  padding-inline-end: 0;
}

.contact-table thead th {
  border-bottom: 2px solid var(--color-border);
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-heading);
}

.contact-table tbody td {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-body);
}

.contact-table tbody tr:last-child td {
  border-bottom: 0;
}

.contact-table__label {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.contact-table__label--highlight {
  color: var(--color-highlight);
}

.contact-table__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   FAQ accordion (Phase 2 §6.4.5) — native <details>/<summary>: keyboard and
   assistive behaviour come from the platform, no JavaScript. Two columns
   from tablet up (desktop/laptop/tablet), single column mobile (§6.8).
   -------------------------------------------------------------------------- */
.contact-faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .contact-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

.contact-faq__item {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hairline);
}

.contact-faq__question {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  list-style: none;
  cursor: pointer;
  color: var(--color-heading);
  font-size: var(--text-body-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  transition: color var(--transition-fast);
}

.contact-faq__question::-webkit-details-marker {
  display: none;
}

.contact-faq__question::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.contact-faq__question:hover,
.contact-faq__question:focus-visible {
  color: var(--color-primary);
}

.contact-faq__question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.contact-faq__item[open] .contact-faq__question::after {
  transform: rotate(225deg);
}

.contact-faq__answer {
  padding: 0 var(--space-16) var(--space-16);
}

.contact-faq__answer p {
  margin: 0;
  color: var(--color-body);
}

@media (min-width: 768px) {
  .contact-faq__question {
    padding: var(--space-24);
  }

  .contact-faq__answer {
    padding: 0 var(--space-24) var(--space-24);
  }
}

/* --------------------------------------------------------------------------
   Visual Polish Pass 2 — intro section background texture (office /
   engineering consultation motif). Supplies the image for the shared
   `.section-bg` layer defined in pages.css.
   -------------------------------------------------------------------------- */
.page-intro--contact {
  --section-bg-image: url("../images/backgrounds/bg-office-consult.webp");
}