/*
 * wt-families.css — Website Templates family-composition + integration CSS.
 *
 * Complements templates-web.css (the base primitives + family layout
 * hooks .wt-container/.wt-section/.wt-grid-cards/.wt-layout-sidebar/.wt-aside/
 * .wt-showcase-row). This partial adds ONLY:
 *   - the family wrapper wtRenderFamily() emits (.wt-family, --wt-section-pad),
 *   - the sidebar aside panels ("Talk to us" card) it composes,
 *   - the components the integration loaders emit (coverage map, quote-form
 *     embed wrapper, enquiry/contact form).
 * Per-block visuals (hero/about/services/fleet/testimonials/showcase/cta) live
 * in the block partials (wt-blocks-home.css / wt-blocks-inner.css).
 *
 * 100% token-driven (--wt-*), no per-skin rules, responsive. No build step.
 */

/* ── Family wrapper ──────────────────────────────────────────────────────── */

.wt-family { display: block; }

/* Showcase family: give the alternating body bands a subtle alt background so
 * the zig-zag reads as banded — but never over the self-styled bands (the inner-page banner and hero have
 * its own hero bg, quote/cta their own coloured bands). */
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) {
  background: var(--wt-alt-bg);
  color: var(--wt-alt-text, inherit);
}

/* The rule above switches an alternating band's TEXT colour, but headings are
 * coloured by `h1..h4 { color: var(--wt-ink) }`, so on a dark band (slick, bold)
 * they stayed dark on dark. Component-specific: only these bands, only their
 * headings; ordinary light sections keep --wt-ink. */
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) h1,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) h2,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) h3,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) h4,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-showcase__h,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-about__col-h {
  color: var(--wt-alt-heading, var(--wt-ink));
}
/* ...and the copy under them, which uses --wt-body-text (dark) by default. */
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-showcase__body,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-prose,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-service__desc,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-fleet-card__desc,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-fleet-card__meta,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-bhead__intro,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) .wt-about__stat-label {
  color: var(--wt-alt-body, var(--wt-body-text));
}

/* A CARD inside such a band keeps its own light surface, so the text inside it must NOT take the band's
 * light colours (it was white on white: service descriptions, fleet card copy, blog card titles). The card
 * list is the one skins.php re-points the text tokens for. Same prefix + a card class out-specifies the band
 * rules above; --wt-body-text is already the card's own dark value there. */
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) h1,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) h2,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) h3,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) h4 {
  color: var(--wt-ink);
}
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) .wt-prose,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) .wt-service__desc,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) .wt-fleet-card__desc,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) .wt-fleet-card__meta,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) .wt-bhead__intro,
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]):not([data-wt-block="banner"]) :is(.wt-card,.wt-fleet-card,.wt-blog-card,.wt-testimonial-card,.wt-contact__form) .wt-about__stat-label {
  color: var(--wt-body-text);
}

/* ── Sidebar family composition (main column + sticky aside) ─────────────── */

/* A grid item defaults to min-width:auto and cannot shrink below its content;
   both tracks need min-width:0 to avoid horizontal overflow on a phone. */
.wt-sidebar-main, .wt-aside { min-width: 0; }
.wt-sidebar-main > * + * { margin-top: calc(var(--wt-section-pad, 44px) * 0.5); }

.wt-aside { display: flex; flex-direction: column; gap: 20px; padding: 22px; }
.wt-aside__panel + .wt-aside__panel { border-top: 1px solid var(--wt-rule); padding-top: 18px; }

.wt-talk__title {
  font: var(--wt-heading-weight, 700) 15px/1.2 var(--wt-font-head);
  color: var(--wt-ink);
  margin: 0 0 12px;
  letter-spacing: var(--wt-heading-tracking, 0);
}
.wt-talk__row {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wt-body-text);
  text-decoration: none;
  margin-bottom: 7px;
}
a.wt-talk__row:hover { color: var(--wt-primary); }
.wt-talk__addr { color: var(--wt-mute-text); }

/* Aside-placed quote embed reads as a compact card, not a full band. */
[data-wt-family="sidebar"] .wt-aside .wt-quote-embed { padding: 0; }
[data-wt-family="sidebar"] .wt-aside .wt-quote-band { padding: 0; background: none; color: inherit; }

/* ── Coverage map (wtIntgCoverageMap) ────────────────────────────────────── */

.wt-coverage { display: grid; gap: 18px; }
[data-wt-family="grid"] .wt-coverage,
[data-wt-family="sidebar"] .wt-coverage { grid-template-columns: 1fr; }

.wt-coverage__map {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: var(--wt-radius-lg);
  overflow: hidden;
  border: var(--wt-card-border);
  box-shadow: var(--wt-card-shadow);
}
.wt-coverage__map--placeholder {
  background:
    repeating-linear-gradient(0deg, var(--wt-rule) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--wt-rule) 0 1px, transparent 1px 44px),
    var(--wt-alt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-coverage__pin {
  width: 18px; height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--wt-primary);
  box-shadow: 0 0 0 6px var(--wt-primary-tint);
}
.wt-coverage__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }

/* ── Quote-form embed wrapper (wtIntgQuoteForm) ──────────────────────────── */

.wt-quote-embed { display: block; }
.wt-quote-embed--hero {
  margin-top: 18px;
  background: var(--wt-surface);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-card-shadow);
  border: var(--wt-card-border);
  padding: 18px;
}
.wt-quote-embed__cta { margin-top: 4px; }
/* Keep the legacy quote-form markup fluid inside the skinned wrapper. */
.wt-quote-embed table { width: 100%; border-collapse: collapse; }
.wt-quote-embed input,
.wt-quote-embed select,
.wt-quote-embed textarea { max-width: 100%; }

/* ── Enquiry / contact form (wtIntgContactForm) ──────────────────────────── */

.wt-contact-form { display: flex; flex-direction: column; gap: 14px; }
.wt-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wt-field { display: flex; flex-direction: column; gap: 6px; }
.wt-field__label {
  font: 700 12px/1 var(--wt-font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wt-mute-text);
}
.wt-field__input {
  font: 400 15px/1.4 var(--wt-font-body);
  color: var(--wt-ink);
  background: var(--wt-surface);
  border: 1px solid var(--wt-rule);
  border-radius: var(--wt-radius);
  padding: 11px 13px;
  width: 100%;
}
.wt-field__input:focus {
  outline: none;
  border-color: var(--wt-primary);
  box-shadow: 0 0 0 3px var(--wt-primary-tint);
}
.wt-field__input--area { resize: vertical; min-height: 96px; }
.wt-contact-form__submit { align-self: flex-start; margin-top: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .wt-contact-form__row { grid-template-columns: 1fr; }
  .wt-coverage__map { min-height: 220px; }
}

/* ---- Contact inside the sidebar aside (BUG-74) ----------------------------------
   The aside is already a padded card, but the Contact block brings its own section
   padding, container padding and form-card padding on top, which left ~140px for the
   fields in a 340px rail. Inside the aside the block gives its padding up, the form
   becomes a plain column, and paired fields stack. */
.wt-aside .wt-block.wt-section { padding: 0; background: none; }
.wt-aside .wt-container { max-width: none; padding-left: 0; padding-right: 0; }
.wt-aside .wt-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.wt-aside .wt-contact__form { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.wt-aside .wt-contact-grid-2,
.wt-aside .wt-contact-form__row { grid-template-columns: minmax(0, 1fr); }
.wt-aside .wt-contact-field, .wt-aside .wt-contact-input, .wt-aside .wt-contact-textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }