/* Shared content bands. Opt in at the section, never at an inner card/form.
   Counting only opted-in siblings handles optional sections and template loops
   without JavaScript, hard-coded parity, or changes to document order. */
:root {
    --sw-section-white: #ffffff;
    --sw-section-smoke: #f7f8fa;
    --sw-section-ink: #111820;
    --sw-section-muted: #515b66;
    --sw-section-border: #dfe3e7;
}

#main-content [data-sw-section] {
    --sw-section-surface: var(--sw-section-white);
    background: var(--sw-section-surface);
    color: var(--sw-section-ink);
}

#main-content [data-sw-section]:nth-child(even of [data-sw-section]) {
    --sw-section-surface: var(--sw-section-smoke);
}

/* Continue after a white introductory band outside the content wrapper. */
#main-content [data-sw-section-start="smoke"] > [data-sw-section]:nth-child(odd of [data-sw-section]) {
    --sw-section-surface: var(--sw-section-smoke);
}
#main-content [data-sw-section-start="smoke"] > [data-sw-section]:nth-child(even of [data-sw-section]) {
    --sw-section-surface: var(--sw-section-white);
}

/* Formerly dark content bands use dark copy. Image heroes and their overlays
   are not opted in, and retain their original light-on-dark typography. */
#main-content [data-sw-section="inverted"] :is(h1, h2, h3, h4, .accordion-button) {
    color: var(--sw-section-ink);
}

#main-content [data-sw-section="inverted"] :is(p, .accordion-body) {
    color: var(--sw-section-muted);
}

#main-content [data-sw-section="inverted"] :is(.sw-listing-header__intro, .sw-listing-header__count strong) {
    color: var(--sw-section-ink);
}

#main-content [data-sw-section="inverted"] :is(.sw-eyebrow, .sw-about-eyebrow) {
    color: var(--sw-color-primary-dark);
    opacity: 1;
}

#main-content .sw-home-why article + article,
#main-content .sw-home-faq .accordion-item {
    border-color: var(--sw-section-border);
}

#main-content .sw-home-why article i {
    color: var(--sw-color-primary-dark);
}

#main-content .sw-home-faq .accordion-button::after { filter: none; }

#main-content [data-sw-section="inverted"] :is(.sw-btn-outline-light, .sw-about-btn-outline-light, .sw-brand-outline-light) {
    border-color: var(--sw-color-primary-dark);
    background: transparent;
    color: var(--sw-color-primary-dark);
}

#main-content [data-sw-section="inverted"] :is(.sw-btn-outline-light, .sw-about-btn-outline-light, .sw-brand-outline-light):hover {
    background: var(--sw-color-primary-dark);
    color: #fff;
}

#main-content [data-sw-section="inverted"] :is(.sw-btn-light, .sw-about-btn-light) {
    border: 1px solid var(--sw-section-border);
}

/* These were dark inner panels belonging to dark content bands, not image
   overlays. Keep them distinct on either section surface. */
#main-content :is(.sw-about-process__grid article, .sw-wheel-brand-grid a, .sw-brand-directory-hero__summary, .sw-service-process .sw-services-info__list article, .sw-blog-cta .sw-container) {
    background: #fff;
    border-color: var(--sw-section-border);
    color: var(--sw-section-ink);
}

#main-content :is(.sw-wheel-brand-grid a small, .sw-brand-directory-hero__summary span) {
    color: var(--sw-section-muted);
}

#main-content .sw-brand-directory-hero__summary strong { color: var(--sw-section-ink); }
#main-content .sw-brand-directory-hero__summary { border: 1px solid var(--sw-section-border); border-top: 3px solid var(--sw-color-primary); }
#main-content .sw-wheel-brand-grid a:hover { border-color: var(--sw-color-primary); background: var(--sw-section-smoke); }
#main-content .sw-brand-directory-tabs a { color: var(--sw-section-ink); border-color: var(--sw-section-border); }
#main-content .sw-brand-directory-tabs a:hover { background: var(--sw-section-smoke); border-color: var(--sw-color-primary); }
#main-content .sw-brand-directory-tabs a span { color: #fff; }
#main-content .sw-service-process :is(.sw-arrow-link, .sw-services-info__list article > i) { color: var(--sw-color-primary-dark); }
#main-content .sw-blog-cta .sw-container { border: 1px solid var(--sw-section-border); }

#main-content [data-sw-section] :is(.sw-eyebrow, .sw-hub-eyebrow) { color: var(--sw-color-primary-dark); }
#main-content [data-sw-section] :is(.sw-location-card__details dt, .sw-services-info__number, .sw-about-specialty-grid article > span, .sw-about-process__grid article span, .sw-blog-popular li > span) { color: var(--sw-section-muted); }
#main-content .sw-gallery-hero .sw-btn-outline { color: var(--sw-color-primary-dark); border-color: var(--sw-color-primary-dark); }
#main-content .sw-gallery-hero .sw-btn-outline:is(:hover, :focus-visible) { color: #fff; background: var(--sw-color-primary-dark); }

/* Hub sections live inside one shared container. Extend their bands through
   the gutters without changing card widths or adding horizontal scrolling. */
#main-content .sw-location-hub .container.sw-section { padding-top: 0; padding-bottom: 0; }
#main-content .sw-location-hub .container.sw-section > [data-sw-section] {
    box-shadow: 0 0 0 100vmax var(--sw-section-surface);
    clip-path: inset(0 -100vmax);
    border-radius: 0;
}
#main-content .sw-location-hub .sw-catalogue-preview--compact { padding-inline: 0; margin-inline: 0; }

/* Give the search band its own rhythm instead of overlapping its neighbour. */
#main-content .sw-home-search[data-sw-section] { margin-top: 0; padding-block: 28px; }

/* Article utility sections are inset in the reading column, not full-width
   bands. Padding keeps their copy off the edge of the smoke surface. */
#main-content :is(.sw-article-products, .sw-article-faq, .sw-article-sources, .sw-article-share, .sw-article-author, .sw-article-reviewer)[data-sw-section] {
    padding: clamp(16px, 3vw, 24px);
    border-radius: var(--sw-radius-medium);
}

@media print {
    #main-content [data-sw-section] { background: #fff; box-shadow: none; }
}