/* ── hero-site-footer ────────────────────────────────────────────────────────
   Attributes the widget stamps and this file answers:
     data-hero-layout   columns | service-list | centered | map-strip
     data-hero-columns  2 | 3 | 4 | 5      (menu tracks; columns and service-list, from 900)
     data-hero-bg       surface | muted | dark | primary | secondary | none  (core paints the band;
                        this file only re-tints hairlines, the phone and the titles on the dark ones)
     data-hero-pad      none | compact | standard | roomy  (moved from the wrapper to the body, see 1)
     data-hero-width    boxed | wide | full  (core, on the body and the legal bar)
     data-hero-align    left | center | right (core)

   Sections: 1 base, 2 layouts, 3 phone and hours, 4 band overrides,
   5 responsive at 640, 768, 900, 1025, 6 motion.
   Colour, radius, shadow, spacing and type come from --hero-* tokens only. */

/* ── 1. Base ─────────────────────────────────────────────────────────────── */
/* The band's padding moves from the wrapper to the body so the map strip and
   the legal bar sit flush with the footer's edges and their hairlines run edge
   to edge. The four scale values keep the core multipliers. */
.hero-site-footer[data-hero-pad] { padding-block: 0; }
.hero-site-footer[data-hero-pad="none"]     .hero-site-footer__inner { padding-block: 0; }
.hero-site-footer[data-hero-pad="compact"]  .hero-site-footer__inner { padding-block: calc(var(--hero-pad) * .5); }
.hero-site-footer[data-hero-pad="standard"] .hero-site-footer__inner { padding-block: var(--hero-pad); }
.hero-site-footer[data-hero-pad="roomy"]    .hero-site-footer__inner { padding-block: calc(var(--hero-pad) * 1.6); }

.hero-site-footer a { color: inherit; }
.hero-site-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hero-site-footer__inner { display: grid; gap: var(--hero-gap); align-items: start; }
.hero-site-footer__business,
.hero-site-footer__column { min-width: 0; }
.hero-site-footer__logo { display: block; max-height: 3.25rem; width: auto; margin-bottom: 1rem; }
.hero-site-footer__nap { font-style: normal; display: flex; flex-direction: column; gap: .25rem; }
.hero-site-footer__name {
  margin-bottom: .35rem;
  font-size: var(--hero-text-lead); font-weight: var(--hero-heading-weight); letter-spacing: var(--hero-heading-tracking);
}
.hero-site-footer__license { margin-top: .5rem; font-size: var(--hero-text-small); opacity: .7; }

/* Two menu tracks at every width; the count takes over from 900 (section 5). */
.hero-site-footer__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hero-gap); }
.hero-site-footer__column-title {
  margin: 0 0 .85rem;
  font-size: var(--hero-eyebrow-size); font-weight: var(--hero-eyebrow-weight);
  letter-spacing: var(--hero-eyebrow-tracking); text-transform: var(--hero-eyebrow-transform);
}
.hero-site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--hero-text-label); }
.hero-site-footer__menu a { display: inline-block; padding-block: .1rem; text-decoration: none; opacity: .85; }
.hero-site-footer__menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }

.hero-site-footer__legal { border-top: 1px solid var(--hero-hairline); font-size: var(--hero-text-small); }
.hero-site-footer__legal .hero-block__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; padding-block: 1.1rem;
}
.hero-site-footer__copyright { margin: 0; opacity: .75; }
.hero-site-footer__legal-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.hero-site-footer__legal-menu a { text-decoration: none; opacity: .75; }
.hero-site-footer__legal-menu a:hover { opacity: 1; text-decoration: underline; }

/* ── 2. Layouts ──────────────────────────────────────────────────────────── */
/* columns: the classic multi-column footer. Brand and NAP in a wider first
   column, each menu column headed by a small-cap title over a short brand
   rule, a legal bar beneath. */
.hero-site-footer[data-hero-layout="columns"] .hero-site-footer__column-title { position: relative; padding-bottom: .6rem; }
.hero-site-footer[data-hero-layout="columns"] .hero-site-footer__column-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; background: var(--hero-primary);
}

/* service-list: the service-led footer. A brand rule along the top edge, the
   phone at stat scale, the first menu (Services) the widest column with its
   links in two columns, each link on its own hairline row. */
.hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__phone {
  margin-block: .5rem .25rem;
  font-size: var(--hero-stat-medium); font-weight: 800; line-height: 1.05; letter-spacing: var(--hero-heading-tracking);
}
.hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__column:first-child { grid-column: 1 / -1; }
.hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__column:first-child .hero-site-footer__column-title {
  margin-bottom: .5rem;
  font-size: var(--hero-h3); font-weight: var(--hero-heading-weight);
  letter-spacing: var(--hero-heading-tracking); text-transform: var(--hero-heading-transform);
}
.hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__column:first-child .hero-site-footer__menu {
  grid-template-columns: repeat(2, 1fr); gap: 0 var(--hero-gap); font-size: var(--hero-body);
}
.hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__column:first-child .hero-site-footer__menu > li { border-top: 1px solid var(--hero-hairline); }
.hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__column:first-child .hero-site-footer__menu a { display: block; padding-block: .55rem; opacity: .92; }

/* centered: a centred NAP. Mark, name, the address on one line with a middle
   dot, the phone at the large stat scale, hours, then one centred row of links
   over a hairline, and the legal bar centred beneath. */
.hero-site-footer[data-hero-layout="centered"] { text-align: center; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__inner { justify-items: center; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__logo { margin-inline: auto; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__nap {
  flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem .5rem; max-width: var(--hero-measure);
}
/* The street and city are the only unclassed spans; everything classed takes its own line. */
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__nap > [class] { flex-basis: 100%; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__nap > span:not([class]) + span:not([class])::before { content: "\00B7"; margin-right: .5rem; opacity: .5; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__name { font-size: var(--hero-h3); }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__phone {
  justify-content: center; margin-block: .75rem .25rem;
  font-size: var(--hero-stat-large); font-weight: 800; line-height: 1.05; letter-spacing: var(--hero-heading-tracking);
}
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__columns,
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__column,
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__columns { width: 100%; padding-top: var(--hero-gap); }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__column-title { display: none; }
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__legal .hero-block__inner { flex-direction: column; justify-content: center; gap: .5rem; }

/* map-strip: the map is a full-width strip above the body, desaturated so any
   embed reads as designed (colour returns on hover, an extra, not the path);
   below it the NAP beside a short menu, divided by a vertical hairline. */
.hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__map { height: 260px; }
.hero-site-footer__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.hero-site-footer__map:hover iframe { filter: none; }
.hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__name { font-size: var(--hero-h3); }
.hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__menu { gap: .3rem; }

/* ── 3. Phone and hours ──────────────────────────────────────────────────── */
/* The phone is a tel: link at every width, in the brand colour on a light band. */
.hero-site-footer__phone {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-top: .35rem;
  font-size: var(--hero-text-lead); font-weight: 700; text-decoration: none; color: var(--hero-primary);
}
.hero-site-footer[data-hero-layout="centered"] .hero-site-footer__phone { align-self: auto; }
.hero-site-footer__phone:hover { text-decoration: underline; text-underline-offset: .15em; }
.hero-site-footer__hours { font-size: var(--hero-text-small); opacity: .85; }
/* A clock glyph before the hours, drawn in the current colour. */
.hero-site-footer__hours::before {
  content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .4em; vertical-align: -.12em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 3h2v5.4l3.6 2.1-1 1.7L11 13.2V7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 3h2v5.4l3.6 2.1-1 1.7L11 13.2V7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 4. Band overrides ───────────────────────────────────────────────────── */
/* Dark, primary and secondary bands: every hairline goes light, the phone and
   the titles take the band's heading colour, and the map strip goes dark. */
.hero-site-footer[data-hero-bg="dark"] .hero-site-footer__phone,
.hero-site-footer[data-hero-bg="dark"] .hero-site-footer__name,
.hero-site-footer[data-hero-bg="dark"] .hero-site-footer__column-title { color: var(--hero-dark-heading); }
.hero-site-footer[data-hero-bg="primary"] .hero-site-footer__phone,
.hero-site-footer[data-hero-bg="secondary"] .hero-site-footer__phone { color: inherit; }
.hero-site-footer[data-hero-bg="primary"] .hero-site-footer__column-title::after,
.hero-site-footer[data-hero-bg="secondary"] .hero-site-footer__column-title::after { background: currentColor; }
.hero-site-footer[data-hero-bg="primary"][data-hero-layout="service-list"],
.hero-site-footer:is([data-hero-bg="dark"], [data-hero-bg="primary"], [data-hero-bg="secondary"]) :is(
  .hero-site-footer__legal,
  .hero-site-footer__map,
  .hero-site-footer__columns,
  .hero-site-footer__column:first-child .hero-site-footer__menu > li
) { border-color: var(--hero-hairline-dark); }
.hero-site-footer:is([data-hero-bg="dark"], [data-hero-bg="primary"], [data-hero-bg="secondary"]) .hero-site-footer__map iframe { filter: grayscale(1) invert(.88); }

/* ── 5. Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__map { height: 200px; }
  /* A thumb-sized tap target for the number. */
  .hero-site-footer__phone { min-height: 2.75rem; }
  .hero-site-footer__legal .hero-block__inner { flex-direction: column; align-items: flex-start; }
  .hero-site-footer[data-hero-layout="centered"] .hero-site-footer__legal .hero-block__inner { align-items: center; }
}
@media (min-width: 768px) {
  .hero-site-footer[data-hero-layout="columns"] .hero-site-footer__inner,
  .hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__inner { grid-template-columns: minmax(14rem, 1fr) 2fr; }
  .hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__inner { grid-template-columns: minmax(16rem, 2fr) 3fr; }
  .hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__columns { padding-left: var(--hero-gap); border-left: 1px solid var(--hero-hairline); }
}
@media (min-width: 900px) {
  /* The menu track count, for the two layouts that carry it. */
  .hero-site-footer:is([data-hero-layout="columns"], [data-hero-layout="service-list"])[data-hero-columns="2"] .hero-site-footer__columns { grid-template-columns: repeat(2, 1fr); }
  .hero-site-footer:is([data-hero-layout="columns"], [data-hero-layout="service-list"])[data-hero-columns="3"] .hero-site-footer__columns { grid-template-columns: repeat(3, 1fr); }
  .hero-site-footer:is([data-hero-layout="columns"], [data-hero-layout="service-list"])[data-hero-columns="4"] .hero-site-footer__columns { grid-template-columns: repeat(4, 1fr); }
  .hero-site-footer:is([data-hero-layout="columns"], [data-hero-layout="service-list"])[data-hero-columns="5"] .hero-site-footer__columns { grid-template-columns: repeat(5, 1fr); }
  /* Services takes two tracks of three or more; of two it takes one. */
  .hero-site-footer[data-hero-layout="service-list"] .hero-site-footer__column:first-child { grid-column: span 2; }
  .hero-site-footer[data-hero-layout="service-list"][data-hero-columns="2"] .hero-site-footer__column:first-child { grid-column: span 1; }
  .hero-site-footer[data-hero-layout="columns"] .hero-site-footer__inner { grid-template-columns: minmax(18rem, 1fr) 3fr; }
}
@media (min-width: 1025px) {
  .hero-site-footer__inner { column-gap: calc(var(--hero-gap) * 1.5); }
  .hero-site-footer[data-hero-layout="map-strip"] .hero-site-footer__columns { padding-left: calc(var(--hero-gap) * 1.5); }
}

/* ── 6. Motion ───────────────────────────────────────────────────────────── */
.hero-site-footer a { transition: opacity .15s ease, color .15s ease; }
.hero-site-footer__map iframe { transition: filter .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .hero-site-footer *, .hero-site-footer *::before, .hero-site-footer *::after { transition: none !important; }
}