/* ==========================================================================
   GEO Template NEW -- styling for the full-width service-area page template.

   Only loaded on pages using geo-page-template.php (see
   tcp_maybe_enqueue_geo_template_css() in includes/setup.php), so nothing
   here needs to be scoped defensively against other pages -- these classes
   (.geo-fullwidth-content, .geo-badge, .inner-banner-area, etc.) only ever
   appear on pages rendered by that template.
   ========================================================================== */

/* -- Full-width section wrapper & content max-width ---------------------- */

/* A gb-columns section's background (color/image) is meant to bleed full
   width, but its actual content should stay capped at the site's normal
   wrap width like everywhere else -- Genesis Blocks normally bakes this in
   per-block via a columnMaxWidth inline style, which isn't set here. */
.geo-fullwidth-content > .wp-block-genesis-blocks-gb-columns > .gb-layout-column-wrap {
    max-width: var(--theme-wrap-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (max-width: 650px) {
    .geo-fullwidth-content > .wp-block-genesis-blocks-gb-columns > .gb-layout-column-wrap {
        padding-left: var(--theme-wrap-padding-mobile);
        padding-right: var(--theme-wrap-padding-mobile);
    }

    /* Safety net: the wrap's own side padding wasn't reliably reaching
       every section's content once columns stack on mobile (confirmed on
       the trust/commercial/donate image columns) -- apply it directly to
       each top-level column's inner wrapper too. Scoped to the outer
       wrap's direct column children only, so nested rows (e.g. the hero's
       button pair) don't get doubled-up padding. */
    .geo-fullwidth-content > .wp-block-genesis-blocks-gb-columns > .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner {
        padding-left: var(--theme-wrap-padding-mobile);
        padding-right: var(--theme-wrap-padding-mobile);
    }
}

/* This template's full-width sections were inheriting gap: 0 from the base
   theme's geo-page-template responsive rule, meant for the original simple
   city-page layout -- give stacked columns here real breathing room
   instead. Higher specificity (adds .geo-fullwidth-content) so it wins over
   that base rule regardless of source order. */
@media only screen and (max-width: 895px) {
    .page-template-geo-page-template-php .geo-fullwidth-content .gb-layout-columns-2>.gb-layout-column-wrap.gb-is-responsive-column {
        gap: 3rem 0;
    }
}

/* Every section here is the only child of its own .geo-fullwidth-content
   wrapper (the template wraps each top-level block individually), so all of
   them hit the global "*:first-child { padding-top: 0 }" / "*:last-child
   { padding-bottom: 0 }" reset at tied specificity -- scope padding to win
   reliably. */
.geo-fullwidth-content .geo-coverage-section,
.geo-fullwidth-content .geo-neighborhoods-section,
.geo-fullwidth-content .geo-trust-section,
.geo-fullwidth-content .geo-commercial-section,
.geo-fullwidth-content .geo-donate-section,
.geo-fullwidth-content .geo-faq-map-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.geo-fullwidth-content .geo-final-cta {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

@media (max-width: 650px) {
    .geo-fullwidth-content .geo-coverage-section,
    .geo-fullwidth-content .geo-neighborhoods-section,
    .geo-fullwidth-content .geo-trust-section,
    .geo-fullwidth-content .geo-commercial-section,
    .geo-fullwidth-content .geo-donate-section,
    .geo-fullwidth-content .geo-faq-map-section,
    .geo-fullwidth-content .geo-final-cta {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* The theme's global h2 (style.css) has a 6rem top / 3rem bottom margin
   meant for full-width page sections -- way too much inside this compact
   2-column template, especially once columns stack on mobile and it stacks
   on top of the section's own padding too. */
.geo-fullwidth-content h2 {
    margin: 0 0 1.5rem;
}

@media (max-width: 650px) {
    .geo-fullwidth-content h2 {
        font-size: 2.6rem;
    }
}

/* -- Hero section ---------------------------------------------------------*/

/* The theme's global h1 (style.css) is sized/padded for a full-width
   centered hero title and doesn't fit a two-column layout -- it makes the
   text oversized and awkwardly padded/wrapped here. */
.inner-banner-area h1 {
    font-size: 3.2rem;
    max-width: none;
    margin: 0 0 1.5rem;
    padding: 0;
    text-align: left;
}

@media (max-width: 650px) {
    .inner-banner-area h1 {
        font-size: 2.4rem;
    }
}

/* Simple fixed-ratio rounded image, starting at the same top line as the
   text column, rather than trying to force-match the text's exact height. */
.inner-banner-area > .gb-layout-column-wrap {
    display: flex;
    align-items: flex-start;
}

.inner-banner-area > .gb-layout-column-wrap > .gb-block-layout-column {
    flex: 1 1 0;
    width: auto;
}

@media (max-width: 600px) {
    .inner-banner-area > .gb-layout-column-wrap {
        flex-direction: column;
    }
}

.hero-right--junk .gb-block-layout-column-inner {
    position: relative;
}

.hero-right--junk .wp-block-image {
    margin: 0;
}

.hero-right--junk .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* .inner-banner-area is the only/first+last child of .geo-fullwidth-content,
   so the global "*:first-child { padding-top: 0 }" / "*:last-child
   { padding-bottom: 0 }" reset ties in specificity and strips this padding
   on load order -- scope it to win reliably. */
.geo-fullwidth-content .inner-banner-area {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 650px) {
    .geo-fullwidth-content .inner-banner-area {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Last element in its column, so it hits the global "*:last-child
   { margin-bottom: 0 }" reset -- scope to win. */
.hero-left--junk .hero-cta-row {
    margin-bottom: 2rem;
}

/* Keep the hero's Schedule Service / phone buttons side by side on mobile
   instead of the plugin's default single-column collapse (.gb-layout-
   columns-2 > .gb-layout-column-wrap.gb-is-responsive-column is 3 classes,
   so !important is the reliable way to beat it here). */
@media (max-width: 600px) {
    .hero-cta-row.gb-layout-columns-2 > .gb-layout-column-wrap {
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 0 10px !important;
    }

    .hero-cta-row .custom-button {
        width: 100%;
    }

    .hero-cta-row .button {
        width: 100%;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 13px;
    }
}

/* -- geo-badge (eyebrow pill / image-overlay card) ------------------------*/

.geo-badge--pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 16px;
    margin-bottom: 16px;
    background: #eaf0fb;
    color: #184687;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
}

.geo-badge--pill i {
    font-size: 13px;
}

.geo-badge--card {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    left: 24px;
    bottom: -20px;
    max-width: 240px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px -10px rgba(20, 30, 50, 0.35);
}

.geo-badge--icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf0fb;
    color: #184687;
    font-size: 16px;
}

.geo-badge--text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.geo-badge--text strong {
    font-size: 13px;
    color: #1b2433;
}

.geo-badge--text span {
    font-size: 12px;
    color: #5b6472;
}

@media (max-width: 650px) {
    .geo-badge--card {
        position: static;
        margin-top: 16px;
        max-width: none;
    }
}

/* -- Vertically-centered 2-col sections (trust / septic / water / faq-map) */

/* .gb-is-vertically-aligned-center sets align-self per column, but the grid
   row itself has no align-items set, so belt-and-suspenders this on the
   container too for the sections in this template that use it. */
.geo-trust-section > .gb-layout-column-wrap,
.geo-commercial-section > .gb-layout-column-wrap,
.geo-donate-section > .gb-layout-column-wrap,
.geo-faq-map-section > .gb-layout-column-wrap {
    align-items: center;
}

.geo-trust-section .wp-block-image img,
.geo-commercial-section .wp-block-image img,
.geo-donate-section .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* -- Neighborhoods grid (feature-cards-grid override) ----------------------*/

/* This section shows 4 area cards in a single row rather than the block's
   default 2-column grid. */
.geo-neighborhoods-section .feature-cards-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .geo-neighborhoods-section .feature-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .geo-neighborhoods-section .feature-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* -- geo-quick-links-card & geo-review-card --------------------------------*/

.geo-quick-links-card,
.geo-review-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 16px -8px rgba(20, 30, 50, 0.12);
    margin-bottom: 24px;
}

.geo-quick-links-card--heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef0f4;
}

.geo-quick-links-card--heading i {
    font-size: 20px;
    color: #184687;
}

.geo-quick-links-card--heading h3 {
    margin: 0;
    font-size: 18px;
}

.geo-quick-links-card--list,
.geo-quick-links-card--list li {
    list-style: none;
    list-style-type: none;
    list-style-image: none;
}

.geo-quick-links-card--list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.geo-quick-links-card--list li {
    margin: 0;
    padding: 0;
}

@media (max-width: 500px) {
    .geo-quick-links-card--list {
        grid-template-columns: 1fr;
    }
}

.geo-quick-links-card--list a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f4;
    color: #55575c;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.geo-quick-links-card--list li:nth-last-child(-n+2) a {
    border-bottom: none;
}

.geo-quick-links-card--arrow {
    font-size: 12px;
    color: #e8505b;
    transition: 0.2s ease-in-out transform;
}

.geo-quick-links-card--list a:hover .geo-quick-links-card--arrow {
    transform: translateX(3px);
}

.geo-review-card--stars {
    color: #f5a623;
    margin-bottom: 12px;
    font-size: 14px;
}

.geo-review-card--quote {
    margin: 0 0 14px;
    color: #33353a;
    font-size: 15px;
    line-height: 1.6;
}

.geo-review-card--footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.geo-review-card--author {
    display: block;
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    color: #1b2433;
    text-decoration: none;
}

a.geo-review-card--author:hover {
    text-decoration: underline;
}

.geo-review-card--author span {
    font-weight: 400;
    color: #5b6472;
}

.geo-review-card--gbp-logo {
    display: block;
    width: 90px;
    height: auto;
    flex-shrink: 0;
}

/* -- content-heading (overline + heading + text) ---------------------------*/

.content-heading {
    margin-bottom: 24px;
}

.content-heading.has-text-align-center {
    text-align: center;
}

.content-heading--overline {
    margin-bottom: 8px;
}

.content-heading--overline span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #184687;
}

.content-heading--heading h2 {
    margin: 0 0 12px;
}

.content-heading--text p {
    margin: 0;
    color: #55575c;
    max-width: 65ch;
}

.content-heading.has-text-align-center .content-heading--text p {
    margin-left: auto;
    margin-right: auto;
}

.content-heading.text-white .content-heading--overline span,
.content-heading.text-white .content-heading--heading h2,
.content-heading.text-white .content-heading--text p {
    color: #fff;
}

/* -- Final CTA --------------------------------------------------------------*/

.geo-final-cta .phone-number-block {
    margin: 20px 0;
}

/* .button.white (style.css) sets color: var(--mfe-green), a leftover custom
   property from a different client theme this file was copied from -- it's
   never defined here, so the text falls through to inherit this section's
   white text, making the button look empty. */
.geo-final-cta .button.white {
    color: #184687;
}

/* -- geo-faq-highlights (static, non-accordion Q&A) -------------------------*/

.geo-faq-highlights--list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.geo-faq-highlights--item {
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e9f0;
}

.geo-faq-highlights--item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.geo-faq-highlights--question {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 16px;
    color: #1b2433;
}

.geo-faq-highlights--answer {
    margin: 0;
    color: #55575c;
    font-size: 15px;
}

/* -- circle-list (checkmark list used in the septic-highlight section) -----*/

/* Compound selector (vs plain .circle-list) to reliably beat a same-
   specificity ".wp-block-list" rule regardless of stylesheet load order --
   this list also carries that class alongside .circle-list. */
ul.circle-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circle-list li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #33353a;
    font-weight: 700;
}

/* Font Awesome is loaded here via the Kit's JS SVG loader, not the webfont
   + CSS-content approach -- icons need a real <i class="fa-..."> element in
   the markup (added in the list content), not a ::before content codepoint,
   which the Kit's JS won't pick up and replace. */
.circle-list li i {
    color: #e8505b;
    font-size: 20px;
    flex-shrink: 0;
}

/* -- *:first-child / *:last-child reset workarounds ------------------------
   Several components above land on *:last-child inside their column (the
   theme's global "*:first-child { padding-top: 0 }" / "*:last-child
   { margin-bottom: 0; padding-bottom: 0 }" reset ties in specificity with
   these single-class rules and can win on load order). Re-assert here with
   a scoped, higher-specificity selector. */

.geo-fullwidth-content .geo-badge--card {
    padding: 14px 18px;
    margin-bottom: 0;
}

.geo-fullwidth-content .geo-quick-links-card,
.geo-fullwidth-content .geo-review-card {
    padding: 28px;
    margin-bottom: 24px;
}

.geo-fullwidth-content .content-heading {
    margin-bottom: 24px;
    padding-bottom: 0;
}

.geo-fullwidth-content .circle-list {
    margin-bottom: 20px;
    padding-bottom: 0;
}