/* =============================================
   PLUNGE, A PLUMBING CO. — Service Landing Pages
   For the generated pages in services/<city>/.
   Extends styles.css and city.css — load those FIRST.
   ============================================= */


/* Hero body text — keep the line length readable */
.svc-hero-text {
    max-width: 720px;
}


/* Shared section shell (dark background, consistent spacing) */
.svc-section {
    background: var(--bg-dark);
    padding: var(--space-lg) 0;
}

/* Section headings on the dark background */
.svc-h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--white);
    text-align: center;
    margin-bottom: var(--space-md);
}


/* =============================================
   LOCAL NOTE CARD — the per-city paragraph block
   (visual style comes from .service-card in city.css)
   Sits in the right column of .city-hero-grid alongside the hero text,
   so its width is set by the grid column, not a fixed max-width.
   ============================================= */
/* The right column itself: the city note with the Call Now / Book Online pair
   beneath it (owner request, 11 August 2026). Mirrors .city-hero-media on the
   city pages. The parent grid already sets `align-items: start`, so this hugs
   the top of the row without saying so again. */
.svc-hero-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;             /* let the column shrink inside the grid */
}

/* The gap above handles the spacing now — .hero-cta-group's own top margin
   (city.css) would sit on top of it and double the distance. */
.svc-hero-aside .hero-cta-group {
    margin-top: 0;
}

@media (max-width: 900px) {
    /* Phones stack to one column, so this wrapper lands AFTER the body text
       and the buttons would end up below the city note. Putting them back
       above it keeps the phone order exactly as it was before the buttons
       moved: heading, lead, body, buttons, then the note. That order is not
       cosmetic — the July 27 2026 collapse exists to keep these buttons near
       the top of a phone screen. */
    .svc-hero-aside .hero-cta-group {
        order: -1;
    }
}

.svc-local-card {
    /* ⚠️ NO `align-self: start` here. It was harmless when this card was a
       direct child of the grid, but inside .svc-hero-aside — a flex COLUMN —
       align-self works on the horizontal axis instead, and `start` would
       shrink the card to its content width rather than filling the column. */

    /* SNUGGER TOP AND BOTTOM (owner request, 11 August 2026). Two separate
       things were making this box taller than it looks:
       1. `.city-hero p` (city.css) gives every paragraph a 24px bottom margin,
          and the LAST paragraph's margin stacked on top of this card's own
          padding — 48px of space below the text against 24px above it. The
          box was visibly lopsided; the rule below removes just that trailing
          margin rather than compensating for it somewhere else.
       2. The padding itself comes down a little, evenly. */
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.svc-local-card p:last-child {
    margin-bottom: 0;
}
.svc-local-card:hover {
    transform: none;              /* it's not a link — don't lift on hover */
    box-shadow: var(--shadow-sm);
}
.svc-local-card h3 {
    font-size: 1.15rem;
}
.svc-local-card h3 .fa {
    color: var(--orange);
    margin-right: 0.4rem;
}
.svc-local-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
}
.svc-local-card p + p {
    margin-top: 0.6rem;
}


/* =============================================
   RELATED SERVICES — pill links to sibling pages
   ============================================= */
.related-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 800px;
    margin: 0 auto;
}

.related-chip {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--white);
    background: var(--blue-dark);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    transition: var(--ease);
}
.related-chip:hover {
    border-color: var(--orange);
    color: var(--orange);
}

/* "All <city> services" chip — dashed, like the drawer's View All pill */
.related-chip--all {
    border-style: dashed;
}
.related-chip--all .fa {
    font-size: 0.75rem;
    margin-left: 0.2rem;
}


/* =============================================
   SERVICE PAGES ON PHONES (mobile pass, July 27 2026)
   ============================================= */

/* The Show more control is a PHONE-ONLY affordance — desktop shows the
   full hero copy, so there's nothing to reveal. Hidden here, unhidden
   in the mobile block below. */
.svc-body-toggle {
    display: none;
}

@media (max-width: 620px) {

    /* HERO BODY COPY collapses behind a Show more toggle (owner request,
       July 27 2026). Before this, five paragraphs (~1,240px) pushed the
       Call Now / Book Online buttons to ~1,050px — past the bottom of the
       first screen — on every service page.

       The ORANGE LEAD above this block is deliberately NOT collapsed
       (owner request): it's the hook, so it stays fully visible and the
       fade begins with the body copy that follows it. script.js adds
       .is-collapsed, never the HTML (failsafe). */
    .svc-body-collapse {
        position: relative;
    }
    .svc-body {
        overflow: hidden;
        max-height: 120rem;          /* ≈ no limit; keeps the transition animatable */
        transition: max-height 0.5s ease;
    }
    /* Raised from 7rem (owner request, July 27 2026): more of the copy
       reads before the fade begins — a hedge on the SEO question, since
       this is the page's PRIMARY content rather than supplementary. The
       CTA buttons still land on the first screen. */
    .svc-body-collapse.is-collapsed .svc-body {
        max-height: 12rem;
    }
    .svc-body-fade {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4rem;
        background: linear-gradient(to bottom, rgba(58, 58, 58, 0), var(--bg-dark));
        opacity: 0;
        pointer-events: none;
        transition: var(--ease);
    }
    .svc-body-collapse.is-collapsed .svc-body-fade {
        opacity: 1;
    }
    .svc-body-toggle {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: fit-content;
        margin: 0.5rem 0 0 auto;     /* right-aligned, matching the other two */
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--orange);
        transition: var(--ease);
    }
    .svc-body-toggle .fa-chevron-down {
        transition: var(--ease);
    }
    .svc-body-collapse:not(.is-collapsed) + .svc-body-toggle .fa-chevron-down {
        transform: rotate(180deg);
    }

    /* Breadcrumb fits ONE line on phones (owner request, July 27 2026):
       four levels deep ("Home / Service Areas / Mesa / Water Heater
       Repair") wrapped to two lines. Slightly smaller type + tighter
       separators, and it scrolls sideways rather than wrapping if a
       service name is very long. */
    .city-breadcrumb {
        font-size: 0.72rem;
        gap: 0.28rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;       /* no visible scrollbar for a nav strip */
    }
    .city-breadcrumb::-webkit-scrollbar {
        display: none;
    }

}