/* === g-contact — consolidated contact (v3.38.0) === */
/* ONE section, two layouts gated by data-ssla-contact-layout. ONE set of field */
/* nodes reflowed via CSS grid-template-areas. Single-zone: root surface =       */
/* core --ssla-bg-color (§7.1). Tone = foreground. Tokens only.                  */

.ssla-g-contact {
  width: 100%;
  background-color: var(--ssla-bg-color, #ffffff);
  color: var(--g-contact-fg, #1a1a1a);
}
.ssla-g-contact-inner {
  max-width: var(--g-contact-content-max-width, 1120px);
  margin: 0 auto;
  padding: var(--g-contact-section-padding, 80px) 48px;
  display: grid;
  column-gap: var(--g-contact-column-gap, 56px);
  row-gap: 40px;
}
.alignfull .ssla-g-contact-inner { max-width: 100%; }

/* ── Layout: STANDARD ── header spans; form | details; map full-width below.
   The reason-cards row (items) spans above the columns when present. cta hidden. */
/* The form column is weighted, not equal. A symmetric 1fr 1fr gave a multi-step
   form the same width as four lines of address and opening hours -- on DTA that
   was an 887px quote wizard squeezed into 524px beside ~270px of contact detail.
   The form is the thing the visitor came to fill in, so it gets the larger share;
   the details column still has ample room for an address, hours and two links.
   Tokenised so a site with a one-field form can set them back to 1fr 1fr. */
.ssla-g-contact--layout-standard .ssla-g-contact-inner {
  grid-template-columns: var(--g-contact-form-col, 2fr) var(--g-contact-details-col, 1fr);
  grid-template-areas:
    "head    head"
    "items   items"
    "form    details"
    "map     map";
}
.ssla-g-contact--layout-standard .ssla-g-contact-cta { display: none; }

/* ── Layout: SIDEBAR ── form left; the reason cards and the contact details
   stack together as ONE right-hand rail. Standard puts the cards full-width
   above both columns, which reads as a banner rather than supporting material;
   this is the arrangement the DTA prototype specified (1.25fr/1fr, side column
   carrying "what to expect" above the contact card) and the one to reach for
   when the cards are commentary on the form rather than a headline. */
/* The trailing "form ." row is load-bearing. With only two rail rows the form
   spans both, so the browser splits its height between them — an 850px form
   against ~280px of cards pushed the contact panel ~150px down the rail, leaving
   a hole under the cards. The spare row absorbs the form's remaining height so
   rows 2 and 3 size to the rail's own content and the panel sits directly under
   the cards. */
.ssla-g-contact--layout-sidebar .ssla-g-contact-inner {
  grid-template-columns: var(--g-contact-form-col, 1.25fr) var(--g-contact-details-col, 1fr);
  grid-template-areas:
    "head  head"
    "form  items"
    "form  details"
    "form  .";
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
}
/* One per row in the rail — auto-fit would otherwise squeeze two 240px cards
   into a ~350px column. */
.ssla-g-contact--layout-sidebar .ssla-g-contact-grid { grid-template-columns: 1fr; }
.ssla-g-contact--layout-sidebar .ssla-g-contact-cta,
.ssla-g-contact--layout-sidebar .ssla-g-contact-map { display: none; }

/* Rail surfaces carry a tint. Flat white boxes on a flat background gave the
   section no depth at all -- the prototype's contact card sits on a warm
   surface, so the rail is tinted from the theme accent rather than left
   colourless. Tokenised: set --g-contact-panel-tint (or the -bg outright) to
   retune per site. */
.ssla-g-contact--layout-sidebar .ssla-g-contact-details {
  background: var(--g-contact-panel-bg,
    color-mix(in srgb, var(--g-contact-panel-tint, var(--shell-accent, currentColor)) 8%, transparent));
  border-color: color-mix(in srgb, var(--g-contact-panel-tint, var(--shell-accent, currentColor)) 22%, transparent);
}
.ssla-g-contact--layout-sidebar .ssla-g-contact-card {
  background: var(--shell-surface-light, #fff);
  border-inline-start: 3px solid
    color-mix(in srgb, var(--g-contact-panel-tint, var(--shell-accent, currentColor)) 55%, transparent);
}

/* ── Layout: CARDS ── info (head + reason cards + cta) beside the form.
   No details block, no map. */
.ssla-g-contact--layout-cards .ssla-g-contact-inner {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head    form"
    "items   form"
    "cta     form";
  align-items: start;
}
.ssla-g-contact--layout-cards .ssla-g-contact-details,
.ssla-g-contact--layout-cards .ssla-g-contact-map { display: none; }

/* ── Zone → grid-area ── */
.ssla-g-contact-head    { grid-area: head; max-width: 64ch; }
.ssla-g-contact-grid    { grid-area: items; }
.ssla-g-contact-form    { grid-area: form; }
.ssla-g-contact-details { grid-area: details; }
.ssla-g-contact-cta     { grid-area: cta; }
.ssla-g-contact-map     { grid-area: map; }

/* Empty zones collapse (no cards / no map set). */
.ssla-g-contact-grid:empty { display: none; }
.ssla-g-contact-map[src=""],
.ssla-g-contact-map:not([src]) { display: none; }

/* ── Header ── */
.ssla-g-contact-eyebrow {
  color: var(--g-contact-eyebrow, inherit);
  font-size: var(--g-contact-eyebrow-size, 13px);
  letter-spacing: var(--g-contact-eyebrow-letter, 0.12em);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.ssla-g-contact-eyebrow:empty { display: none; }
.ssla-g-contact-heading {
  font-family: var(--g-contact-heading-family, inherit);
  font-size: var(--g-contact-heading-size, clamp(28px, 4vw, 42px));
  font-weight: var(--g-contact-heading-weight, var(--paint-heading-weight, 700));
  margin: 0 0 16px;
}
.ssla-g-contact-body {
  font-family: var(--g-contact-body-family, inherit);
  font-size: var(--g-contact-body-size, 17px);
  line-height: var(--g-contact-body-line-height, 1.6);
  opacity: 0.9;
}
.ssla-g-contact-body:empty { display: none; }

/* ── Reason cards grid ── */
/* Reason cards: fit as many as the row allows rather than a fixed two.
   repeat(2, 1fr) orphaned the THIRD card onto its own row with a dead half-row
   beside it -- three "what to expect" cards is an ordinary authoring choice, not
   an edge case (hit live on DTA's contact page). auto-fit collapses the empty
   track so 3 cards sit 3-up and 4 sit 4-up, while 2 still read as 2-up. The min
   is tokenised so a site can retune the wrap point without out-specifying. */
.ssla-g-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--g-contact-card-min, 240px), 1fr));
  gap: var(--g-contact-card-gap, 20px);
}
.ssla-g-contact-card {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--g-contact-radius, 10px);
  padding: 18px 20px;
}
.ssla-g-contact-card-heading { font-size: 1.05em; font-weight: 700; margin: 0 0 6px; }
.ssla-g-contact-card-body { font-size: 0.95em; line-height: 1.5; opacity: 0.85; }

/* ── Details column (standard) ──
   Given the same card surface as the reason cards so the address/hours/email/
   phone stack reads as a deliberate panel beside the form instead of loose text
   floating in the right column. align-self:start stops it stretching to the
   form's full height, which is what produced the dead space under it when the
   form is tall (an 887px quote wizard against ~200px of contact detail). */
.ssla-g-contact-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--g-contact-radius, 10px);
  padding: 18px 20px;
}
.ssla-g-contact-details :where(.ssla-g-contact-address, .ssla-g-contact-hours) { line-height: 1.5; }
.ssla-g-contact-email { color: inherit; text-decoration: underline; font-weight: 600; }
.ssla-g-contact-phone { margin: 0; opacity: 0.9; }

/* ── Per-method icon rows (v3.44.52) ──
   Each detail method (address/hours/email/phone) is wrapped in a
   .ssla-g-contact-detail flex row: an optional leading icon + the method
   element. The icon keyword → flat SVG happens in the bridge; the wrapper is
   :empty-hidden when no icon. The svg is capped for BOTH the Hub (.ss-icon)
   and local (.ssla-icon) render seams to --g-contact-icon-size so the Hub
   glyph can't balloon (cf. the g-cards 318px fix in v3.44.51). Icon defaults
   to the section EYEBROW/accent color; icons use currentColor. When a method
   is suppressed (empty value) the row has only the icon span left and collapses
   via :has() — no phantom gap, so iconless/empty instances are unchanged. */
.ssla-g-contact-detail { display: flex; gap: 12px; align-items: flex-start; }
.ssla-g-contact-detail:not(:has(> :nth-child(2))) { display: none; }
.ssla-g-contact-method-icon:empty { display: none; }
.ssla-g-contact-method-icon {
  flex: 0 0 auto;
  color: var(--g-contact-eyebrow, currentColor);
  line-height: 1;
}
.ssla-g-contact-method-icon .ssla-icon,
.ssla-g-contact-method-icon .ss-icon {
  width: var(--g-contact-icon-size, 20px);
  height: var(--g-contact-icon-size, 20px);
  display: block;
}

/* Icon size — v3.44.52. Section-level affordance (icon_size variant): the
 * author picks Small/Medium/Large; each sets the --g-contact-icon-size token
 * consumed by the method-icon svg cap above. Medium mirrors the default. */
.ssla-g-contact--icon-size-small  { --g-contact-icon-size: 16px; }
.ssla-g-contact--icon-size-medium { --g-contact-icon-size: 20px; }
.ssla-g-contact--icon-size-large  { --g-contact-icon-size: 24px; }

/* ── CTA (cards) ── */
.ssla-g-contact-cta {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
  align-self: start;
}

/* ── Map (standard) ── */
.ssla-g-contact-map {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--g-contact-radius, 10px);
}

/* ── Tone: dark ── readable floor (same precedent as the source sections). */
.ssla-g-contact--tone-dark {
  --g-contact-fg:      var(--shell-text-light, #ffffff);
  --g-contact-eyebrow: var(--shell-text-light, #ffffff);
}

/* ── Responsive ── single column; areas stack in source order. */
@media (max-width: 860px) {
  .ssla-g-contact--layout-standard .ssla-g-contact-inner,
  .ssla-g-contact--layout-cards .ssla-g-contact-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "items" "form" "details" "cta" "map";
  }
  /* SIDEBAR was missing from this collapse, so the only variant with a rail
     was also the only one that never dropped to a single column: it held
     1.25fr/1fr all the way down to 0px. Measured on the DTA contact page at a
     570px viewport, that left the quote wizard in a 218px column with 184px
     fields — the form is the thing the visitor came to fill in, and on a phone
     it was the narrowest thing on the page.

     It needs its own rule rather than joining the list above: sidebar's areas
     are "form items / form details" and it has no cta/map area at all (both
     are display:none in the variant), so naming them here would be dead
     template text. The rail stacks UNDER the form — the cards and contact
     panel are supporting material, and pushing the form below ~300px of them
     would bury it. grid-template-rows is reset because the 4-row
     `auto auto auto 1fr` spacer only makes sense in two columns; left in
     place it would hand the last stacked item all the leftover height. */
  .ssla-g-contact--layout-sidebar .ssla-g-contact-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "form" "items" "details";
    grid-template-rows: auto;
  }
  .ssla-g-contact-grid { grid-template-columns: 1fr; }

  /* The side gutter is a flat 48px at every width, which is a quarter of a
     375px phone spent on empty margin (96px of 375) before any content starts.
     Halved below the collapse point — the section is single-column here, so
     the gutter is the only thing standing between the content and the edge,
     and 24px is enough to keep it off the bezel. Vertical padding is left on
     its token; it is rhythm between sections, not width pressure. */
  .ssla-g-contact-inner {
    padding-inline: 24px;
  }
}

/* ═══ Skeleton state ═══ */
.ssla-section.ssla-g-contact {
  --g-contact-fg:                var(--brand-fg);
  --g-contact-eyebrow:           var(--brand-accent, var(--brand-fg));
  --g-contact-heading-family:    var(--brand-heading-family);
  --g-contact-heading-size:      var(--brand-h2-size-clamp);
  --g-contact-body-family:       var(--brand-body-family);
  --g-contact-section-padding:   var(--paint-section-padding, var(--brand-section-padding, 80px));
  --g-contact-content-max-width: var(--brand-content-max-width, 1120px);
  --g-contact-card-gap:          var(--brand-card-gap, 20px);
  --g-contact-radius:            var(--brand-card-radius, 10px);
  /* v3.55.02 — `--g-contact-icon-size: 20px` used to sit here and it made the
     Icon Size variant DEAD. This block is `.ssla-section.ssla-g-contact`
     (0,2,0); the variant rules above are `.ssla-g-contact--icon-size-*`
     (0,1,0) on the SAME element, so the skeleton won on specificity and on
     source order both — Small and Large never reached a glyph (measured on
     DTA's contact page: token still resolved 20px with the small class
     present). It was a literal, not a brand token, so deleting it loses
     nothing: Medium still resolves 20px through the variant, and an instance
     with no icon_size class falls back to the `var(--g-contact-icon-size,
     20px)` default on the svg cap. g-cards / g-columns / g-list were never
     affected — their skeletons are bare `.ssla-g-cards` (0,1,0) and their
     variant rules come later in the file, so the variant already won. */
}

/* ─── v3.55.04 — self-serve links (`support_links`) ────────────────────────
   A block in the details column for the "can I answer this myself?" links.
   EVERY rule here is gated on content existing: the list is a repeater that
   defaults to empty, and an empty <ul> plus its heading are :empty-hidden, so
   an instance that never opts in renders byte-identically to pre-v3.55.04.
   The heading hides off the LIST being empty, not itself — a heading with no
   links under it is worse than no block at all.
   Icon cap mirrors .ssla-g-contact-method-icon: both the Hub (.ss-icon) and
   local (.ssla-icon) seams are capped so a Hub glyph can't balloon (the
   g-cards 318px fix, v3.44.51). */
.ssla-g-contact-support-list:empty { display: none; }
.ssla-g-contact-support:not(:has(.ssla-g-contact-support-item)) { display: none; }
.ssla-g-contact-support {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--g-contact-hairline, rgba(0, 0, 0, 0.12));
}
.ssla-g-contact-support-heading {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-contact-eyebrow, currentColor);
}
.ssla-g-contact-support-heading:empty { display: none; }
.ssla-g-contact-support-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.ssla-g-contact-support-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
}
.ssla-g-contact-support-icon {
  grid-row: 1 / span 2;
  flex: 0 0 auto;
  color: var(--g-contact-eyebrow, currentColor);
}
.ssla-g-contact-support-icon:empty { display: none; }
/* No icon → the link and its description take the full width rather than
   leaving an empty first column. */
.ssla-g-contact-support-item:not(:has(.ssla-g-contact-support-icon:not(:empty))) {
  grid-template-columns: 1fr;
}
.ssla-g-contact-support-icon .ss-icon,
.ssla-g-contact-support-icon .ssla-icon,
.ssla-g-contact-support-icon svg {
  width: var(--g-contact-icon-size, 20px);
  height: var(--g-contact-icon-size, 20px);
}
.ssla-g-contact-support-link {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.ssla-g-contact-support-link:hover,
.ssla-g-contact-support-link:focus-visible { text-decoration: underline; }
.ssla-g-contact-support-desc {
  grid-column: 2;
  font-size: 0.875rem;
  opacity: 0.75;
}
.ssla-g-contact-support-desc:empty { display: none; }
.ssla-g-contact-support-item:not(:has(.ssla-g-contact-support-icon:not(:empty))) .ssla-g-contact-support-desc {
  grid-column: 1;
}