/* Service Areas | ACF module | Prefix: uq-service-areas
 *
 * LAYOUT comes from the Service Areas reference: centred header, one nav row of
 * three controls, a lead heading, then one large bordered directory that shows
 * either the cities or the neighbourhoods -- never both at once.
 *
 * VISUAL LANGUAGE is copied from existing Roofer On Demand components, not
 * invented here:
 *   - eyebrow  -> .uq-filterable-cards__eyebrow (Warranty)
 *   - title    -> .uq-filterable-cards__title + the shared --uq-module-title-size ramp
 *   - controls -> .uq-filterable-cards__filters / .uq-filterable-cards__filter (Warranty)
 */
.uq-service-areas,
.uq-service-areas *,
.uq-service-areas *::before,
.uq-service-areas *::after { box-sizing: border-box; }

.uq-service-areas {
    --uq-sa-primary: var(--uq-theme-primary, #104e8b);
    --uq-sa-accent: var(--uq-theme-accent, #fdbb2f);
    --uq-sa-text: var(--uq-theme-text, #3f4b58);
    --uq-sa-ink: #111827;
    --uq-sa-border: var(--uq-theme-border, #e5e5e5);
    /* Directory card colours. Defaults are the values the two rules below have
       always used, so a row that sets neither ACF field renders unchanged; the
       template writes these two properties inline on the section when the
       editor picks a colour. Separate from --uq-sa-border on purpose -- that one
       also draws the three nav controls, which are not part of the card. */
    --uq-sa-card-bg: #fff;
    --uq-sa-card-border: var(--uq-sa-border);
    width: 100%;
    padding: var(--uq-sa-space-top, 64px) 20px var(--uq-sa-space-bottom, 64px);
    background: #fff;
    color: var(--uq-sa-text);
    font-family: var(--uq-site-font-body, Arial, sans-serif);
}

.uq-service-areas__container { width: 100%; max-width: 1200px; margin-inline: auto; }

/* ---------- Header ---------- */
.uq-service-areas__header { max-width: 760px; margin: 0 auto 30px; text-align: center; }

/* Structure copied from .uq-filterable-cards__eyebrow; the TYPE is the site's.

   Those two were the only eyebrows on the site at 14px. Measured on the live
   pages, nine modules -- How It Works, Service Comparison, Split Content +
   Cards, Feature Showcase, The Process, Reviews, Pricing, FAQ and
   Manufacturers -- all render their eyebrow at 16px / 600 / 1.3 / -0.01em, and
   this one came out at 14px / 600 / 1.4 / normal, which is what the client
   spotted. So the three type values that were out of step now match that set
   exactly; the weight was already 600.

   Only the type moves. The pill itself -- its 5px 13px padding, the 7px gap,
   the pill radius, the accent fill and the 16px margin below -- is untouched,
   and so is the icon rule beneath. */
.uq-service-areas__eyebrow {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
    padding: 5px 13px; border-radius: 999px; background: var(--uq-sa-accent);
    color: #111; font-size: 16px; font-weight: 600; line-height: 1.3;
    letter-spacing: -0.01em;
}
/* The icon colour is the site's shared eyebrow-icon treatment, not a new value:
   `filter: brightness(0) saturate(100%)` is what all eight <img> eyebrow icons
   in style.css use -- .uq-faq__eyebrow-icon, .uq-pricing__eyebrow-icon,
   .uq-reviews__eyebrow-icon, .uq-manufacturers__eyebrow-icon,
   .uq-process__eyebrow-icon, .uq-how-it-works__eyebrow-icon,
   .uq-feature-showcase__eyebrow-icon and .uq-project-split/service-feature. It
   flattens whatever the editor uploaded to solid black so the icon reads as part
   of the eyebrow's own near-black label on the accent pill, instead of keeping
   the source file's colours. (The two modules that ship an inline SVG rather
   than an <img> -- Filterable Cards and Service Comparison -- reach the same
   place through `stroke: currentColor` and a currentColor mask.) This module was
   the only eyebrow icon on the site with no colour treatment at all. */
.uq-service-areas__eyebrow-icon { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) saturate(100%); }

/* Copied from .uq-filterable-cards__title. The size ramp mirrors the shared
   --uq-module-title-size rules in style.css; it is repeated here only because
   this module's class is not in that shared whitelist, and editing style.css
   would touch the 16 other modules that share it. */
.uq-service-areas__title {
    margin: 0 auto 14px; color: var(--uq-sa-primary) !important;
    font-family: var(--uq-site-font-heading, var(--uq-site-font-body, Arial, sans-serif));
    font-weight: 500; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
}
.uq-service-areas__title:not([class*="uq-heading-"]) {
    font-size: var(--uq-module-title-size, clamp(40px, 3.4vw, 48px));
}

/* Copied from .uq-filterable-cards__intro -- but the 18px / 1.55 that class
   DECLARES is not what it RENDERS. .uq-filterable-cards__intro is one of the
   fifteen selectors in the shared description rule in style.css
   (`.uq-flex-page :is(... .uq-filterable-cards__intro ...)`), which at (0,2,0)
   beats the module's own (0,1,0) declaration and resolves every section
   description on the site to --uq-module-description-* -- 16px / 400 / 1.4, and
   15px under 767px.

   This module's class is NOT in that whitelist, so the copied 18px was the only
   thing setting the size and this description read a step larger than every
   other one on the site. The shared tokens are now pointed at directly, which is
   exactly what .uq-service-areas__title above does with --uq-module-title-size
   and for the same reason: the shared rule cannot reach this class, and adding
   it to the whitelist would mean editing style.css. */
.uq-service-areas__intro {
    margin: 0; color: var(--uq-sa-text);
    font-size: var(--uq-module-description-size, 16px);
    font-weight: var(--uq-module-description-weight, 400);
    line-height: var(--uq-module-description-line-height, 1.4);
}
.uq-service-areas__intro > :first-child { margin-top: 0; }
.uq-service-areas__intro > :last-child { margin-bottom: 0; }

/* ---------- Nav: Nearby Cities / Neighbourhoods / View All Locations ----------
   Copied verbatim from .uq-filterable-cards__filters + .uq-filterable-cards__filter
   (the Warranty controls, identical to .uq-reviews__platform-tab): centred flex
   row, 8px gap, 32px below; 42px min-height, 9px/17px padding, 7px radius,
   14px/600 type, white inactive, primary-blue filled active, accent hover border
   with the -1px lift, 3px accent focus ring. Nothing here is new. */
.uq-service-areas__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.uq-service-areas__filter {
    min-height: 42px; padding: 9px 17px; border: 1px solid var(--uq-sa-border);
    border-radius: 7px; background: #fff; color: var(--uq-sa-ink); font: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.uq-service-areas__filter:hover { border-color: var(--uq-sa-accent); transform: translateY(-1px); }
.uq-service-areas__filter.is-active { border-color: var(--uq-sa-primary); background: var(--uq-sa-primary); color: #fff; }
.uq-service-areas__filter.is-active:hover { border-color: var(--uq-sa-accent); background: var(--uq-sa-accent); color: #111; }
.uq-service-areas__filter:focus-visible,
.uq-service-areas__city-link:focus-visible,
.uq-service-areas__hood-link:focus-visible { outline: 3px solid var(--uq-sa-accent); outline-offset: 3px; }

/* "View All Locations" is a link, not a toggle. Only the properties an <a> needs in order to
   sit in the same box as the two buttons are set here -- size, colour, border,
   radius and every state still come from the shared rules above. */
.uq-service-areas__filter--link {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--uq-sa-ink) !important; text-decoration: none;
}
.uq-service-areas__filter--link:hover,
.uq-service-areas__filter--link:focus,
.uq-service-areas__filter--link:visited { color: var(--uq-sa-ink) !important; text-decoration: none; }

/* ---------- Panels ----------
   One shared content area. Exactly one panel is ever visible: Nearby Cities shows
   the cities list, Neighbourhoods replaces it. */
.uq-service-areas__panel[hidden] { display: none; }

/* ---------- Lead ----------
   Title and helper sit outside the directory, as in the reference. */
.uq-service-areas__lead { margin-bottom: 16px; }
.uq-service-areas__lead-title {
    margin: 0 0 5px; color: var(--uq-sa-ink) !important;
    font-family: var(--uq-site-font-heading, var(--uq-site-font-body, Arial, sans-serif));
    font-size: 22px; font-weight: 700; line-height: 1.3;
}
/* Client feedback (#5): this read heavier and looser than the module
   description above it. Nothing here was WRONG -- two declarations were
   MISSING. `font-weight` was never set, so the paragraph inherited body's
   `font: 500 16px/1.4` and rendered at 500 while .uq-service-areas__intro
   renders at 400; and the 1.5 line-height was a literal rather than the shared
   1.4. It now carries THE SAME THREE TYPE LINES as .uq-service-areas__intro
   above, plus that class's 767 step below, so the two descriptions read
   identically at every width.

   Note this class serves BOTH panels -- "Nearby Cities We Serve" and
   "Neighbourhoods We Serve" swap one content area -- which is why one rule is
   the whole fix and why the two helper lines cannot drift apart again.

   Margin and colour are untouched: `margin: 0` and --uq-sa-text are the values
   they already had, and .uq-service-areas__lead still owns the 16px gap down to
   the directory. */
.uq-service-areas__lead-note {
    margin: 0; color: var(--uq-sa-text);
    font-size: var(--uq-module-description-size, 16px);
    font-weight: var(--uq-module-description-weight, 400);
    line-height: var(--uq-module-description-line-height, 1.4);
}

/* ---------- Directory ----------
   The strongest element on the module, and the shared home of both lists. One
   wide bordered white container, no shadow. Multi-column so names read
   top-to-bottom down each column exactly as the reference does. column-rule
   supplies the vertical separators. FOUR columns on desktop -- it was five, and
   the client asked for four. */
.uq-service-areas__grid {
    width: 100%; padding: 26px 12px;
    border: 1px solid var(--uq-sa-card-border); border-radius: 12px;
    background: var(--uq-sa-card-bg);
}
.uq-service-areas__cities,
.uq-service-areas__hoods-list {
    margin: 0; padding: 0; list-style: none;
    column-count: 4; column-gap: 0;
    /* The card's internal dividers, so they follow the border colour with it. */
    column-rule: 1px solid var(--uq-sa-card-border);
}
.uq-service-areas__city,
.uq-service-areas__hood { margin: 0; break-inside: avoid; -webkit-column-break-inside: avoid; }
/* Client feedback (#7): the city names read as a different typeface from the
   rest of the site. They were 15px / 600 in the BODY face, and 600 in the body
   face is the one weight this design system does not use for copy. The audit
   written into the button-token block in style.css states the system outright:

       h1-h6, card titles, category tabs   Roobert  500
       body copy, descriptions             Inter    400
       BUTTONS                             Inter    600 / 700  <- the outlier

   Measured on the live homepage, Inter 15px/600 appears in exactly three
   places: .uq-reviews__author-name, .uq-reviews__more and this list. Both of
   those are labels on a control; this is the module's actual content, and it
   was the only run of plain body copy on the site carried at 600. That is the
   same defect, one component along, as the Project Location pass ("the font for
   Project Location is different"), where the face was right and the weight was
   the outlier.

   The three type lines now point at --uq-module-description-*, which is what
   .uq-service-areas__intro and .uq-service-areas__lead-note in this same file
   already do -- 16px / 400 / 1.4, stepping to 15px under 767px. line-height was
   already 1.4, so it is the same number said through the token.

   NOTHING ELSE MOVES. The 10px/22px padding, the block display, the colours,
   the hover, the focus ring, the column rules and the card are untouched, and
   the 767 step below lands the phone back on the 15px it renders today, so no
   row height changes at mobile at all. */
.uq-service-areas__city-link,
.uq-service-areas__hood-link,
.uq-service-areas__hood-text {
    display: block; padding: 10px 22px;
    font-size: var(--uq-module-description-size, 16px);
    font-weight: var(--uq-module-description-weight, 400);
    line-height: var(--uq-module-description-line-height, 1.4);
    text-decoration: none; overflow-wrap: anywhere;
    transition: color .2s;
}
.uq-service-areas__city-link,
.uq-service-areas__hood-link { color: var(--uq-sa-ink) !important; }
.uq-service-areas__city-link:hover,
.uq-service-areas__city-link:focus,
.uq-service-areas__hood-link:hover,
.uq-service-areas__hood-link:focus { color: var(--uq-sa-primary) !important; }
.uq-service-areas__hood-text { color: var(--uq-sa-text); }
.uq-service-areas__status {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Responsive column ladder ----------
   Desktop is 4; tablet and mobile step down from there.

   The 1200px step is gone rather than left in place: it set column-count to 4,
   which is now the base, so it was a rule that could only ever restate its own
   inherited value. 4 columns in the 1200px container is ~300px each, which
   holds the longest city name on one line, so nothing is needed there. */
@media (max-width: 1024px) { .uq-service-areas__cities, .uq-service-areas__hoods-list { column-count: 3; } }

@media screen and (max-width: 991px) {
    .uq-service-areas__title:not([class*="uq-heading-"]) { font-size: var(--uq-module-title-size-lg, 40px); }
}

@media screen and (max-width: 767px) {
    .uq-service-areas { padding-top: min(var(--uq-sa-space-top, 64px), 52px); padding-bottom: min(var(--uq-sa-space-bottom, 64px), 52px); }
    .uq-service-areas__title:not([class*="uq-heading-"]) { font-size: var(--uq-module-title-size-md, 36px); }
    .uq-service-areas__header { margin-bottom: 24px; }
    .uq-service-areas__intro { font-size: var(--uq-module-description-size-mobile, 15px); }
    .uq-service-areas__lead-note { font-size: var(--uq-module-description-size-mobile, 15px); }
    .uq-service-areas__city-link,
    .uq-service-areas__hood-link,
    .uq-service-areas__hood-text { font-size: var(--uq-module-description-size-mobile, 15px); }
    .uq-service-areas__cities, .uq-service-areas__hoods-list { column-count: 2; }
    .uq-service-areas__lead-title { font-size: 20px; }
}

@media (max-width: 560px) {
    .uq-service-areas { padding-right: 16px; padding-left: 16px; }
    .uq-service-areas__grid { padding: 18px 8px; }
    .uq-service-areas__city-link,
    .uq-service-areas__hood-link,
    .uq-service-areas__hood-text { padding-right: 14px; padding-left: 14px; }
}

@media screen and (max-width: 479px) {
    .uq-service-areas__title:not([class*="uq-heading-"]) { font-size: var(--uq-module-title-size-sm, 32px); }
}

@media (max-width: 400px) {
    .uq-service-areas__cities, .uq-service-areas__hoods-list { column-count: 1; column-rule: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .uq-service-areas *, .uq-service-areas *::before, .uq-service-areas *::after { transition-duration: .01ms !important; }
}