/* =============================================
   PLUNGE, A PLUMBING CO. — City Pages Stylesheet
   Extends styles.css — load styles.css FIRST.
   ============================================= */


/* =============================================
   HEADER — left button group (city pages only)
   ============================================= */
.header-left-btns {
    position: absolute;
    left: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

/* The city intro's Show more control is a PHONE-ONLY affordance — the
   collapse rules live in the mobile block, and desktop shows the full
   copy beside the video, so there's nothing to reveal. Hidden here,
   unhidden there. */
.city-intro-toggle {
    display: none;
}

/* Remove absolute positioning from menu-btn when inside the group.
   The group now holds only the Service Areas button — the orange Home
   button that used to sit beside it was REMOVED site-wide July 28 2026
   (owner: "I don't think it fits anymore whatsoever"). The wrapper stays
   because it's what positions the menu button; don't collapse it back
   into a bare .menu-btn without restoring that positioning. Getting home
   is still one tap on the Plunge logo, which links home on every page. */
.header-left-btns .menu-btn {
    position: static;
    transform: none;
}


/* =============================================
   CITY HERO
   Background: dark grey (--bg-dark)
   ============================================= */
.city-hero {
    background: var(--bg-dark);
    color: var(--white);
    padding: var(--space-xl) 0 var(--space-lg);
}

.city-hero-content {
    position: relative;
    z-index: 1;
}

/* Breadcrumb nav trail */
.city-breadcrumb {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.city-breadcrumb a {
    color: rgba(255,255,255,0.75);
    transition: color 0.2s;
}

.city-breadcrumb a:hover { color: var(--orange); }

.city-breadcrumb span {
    opacity: 0.4;
    font-size: 0.9rem;
}

.city-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    color: var(--white);
}

.city-hero p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.82);
    max-width: 640px;
    margin-bottom: var(--space-md);
}

/* Two-column hero layout: intro text + Call Now/Book Online sit on the
   left, the video sits on the right — so every key element is visible
   without scrolling. Stacks to a single column (text above video) on
   tablet/mobile, matching the breakpoint used elsewhere on the site for
   similar two-column layouts. */
.city-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

/* Right column of the hero: the video with Dino's story card tucked
   beneath it (owner placement, July 22 2026). */
.city-hero-media {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;   /* let the column shrink inside the grid */
}

/* =============================================
   STORY CARD — "Stories from the Field" (owner request, July 2026)
   One compact, collapsed tech story per city page, under the hero
   video. Signature card accents; when collapsed, a gradient fades the
   text into the card color and the toggle invites the click. Ships
   EXPANDED in the HTML — script.js initStoryReveal() applies
   .is-collapsed only once JS is confirmed running (failsafe + the
   reason the collapsed text stays fully visible to Google).
   ============================================= */
.story-card {
    background: var(--blue-dark);
    border-top: 4px solid var(--orange);
    border-left: 4px solid var(--orange);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    color: rgba(255, 255, 255, 0.9);
}
/* Single heading: "The Dino Diaries - <City>" (owner wording, July 22
   2026 — replaced the placeholder title + byline pair). */
.story-title {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--white);
    margin: 0 0 0.6rem;
}
/* Wrapper exists so the fade can pin to the bottom of the VISIBLE
   (clipped) area, not the bottom of the full story text. */
.story-collapse {
    position: relative;
}
.story-body {
    overflow: hidden;
    /* 120rem ≈ "no limit" for any realistic story, while keeping
       max-height animatable for the expand/collapse transition */
    max-height: 120rem;
    transition: max-height 0.5s ease;
}
.story-body p {
    margin: 0 0 0.7rem;
    font-size: 0.88rem;
    line-height: 1.65;
}
.story-card.is-collapsed .story-body {
    max-height: 7.5rem;
}
.story-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.25rem;
    background: linear-gradient(to bottom, rgba(38, 72, 120, 0), var(--blue-dark));
    opacity: 0;
    pointer-events: none;   /* purely decorative — never blocks text selection */
    transition: var(--ease);
}
.story-card.is-collapsed .story-fade {
    opacity: 1;
}
/* Toggle + blog link sit side by side in one row, same size, pushed
   apart to "hug" the card's left and right edges (owner request,
   July 22 2026). */
.story-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;      /* long labels on narrow phones wrap, never clip */
    gap: 0.3rem 1.2rem;
    margin-top: 0.4rem;
}
.story-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--orange);
    transition: var(--ease);
}
.story-toggle:hover {
    color: var(--white);
}
.story-toggle .fa-chevron-down {
    transition: var(--ease);
}
/* Chevron points up while the story is open */
.story-card:not(.is-collapsed) .story-toggle .fa-chevron-down {
    transform: rotate(180deg);
}
.story-blog-link {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--orange);
    transition: var(--ease);
}
.story-blog-link:hover {
    color: var(--white);
}

@media (max-width: 900px) {
    .city-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Call Now + Book Online button pair under the hero text. Flex + gap keeps
   an even space between them whether they sit side by side (desktop) or
   stack full-width (mobile, where .btn becomes width:100%). Without this the
   stacked buttons touch edge to edge. */
.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-md);
}

/* In the centered bottom call-to-action, center the button pair. The flex
   default (flex-start) would otherwise pin them left, ignoring the section's
   text-align: center. The hero version above stays left-aligned to match its
   left-aligned text. */
.city-cta .hero-cta-group {
    justify-content: center;
}

/* Intro paragraphs; the lead line reads a bit larger + orange */
.city-intro-lead {
    color: var(--orange) !important;
    font-weight: 700;
    font-size: 1.15rem !important;
}

/* Video placeholder — swap in a real embed later. Fills its grid column;
   the max-width just caps it on very wide screens. */
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 16 / 9;
    max-width: 720px;
    width: 100%;
    background: var(--blue-dark);
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: var(--radius-lg);
    color: rgba(255,255,255,0.6);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.video-placeholder .fa {
    font-size: 2.6rem;
    color: rgba(255,255,255,0.45);
}

/* Real YouTube embed — the framework the placeholder becomes once a video is
   added (a "youtubeId" in cities.json). It occupies the EXACT same 16:9 box
   as .video-placeholder above (same aspect ratio, max-width, corners, spacing),
   so switching a placeholder to a live video causes zero layout shift and no
   design change. The iframe fills the box responsively. Nothing here renders
   until a video is actually supplied. */
.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 720px;
    width: 100%;
    margin-bottom: var(--space-md);
    background: var(--blue-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* =============================================
   SERVICES GRID — cards per city service page
   Background section: grey (60%)
   ============================================= */
.city-services {
    background: var(--bg-dark);
    /* Top padding deliberately smaller than the bottom: the hero above ends
       with its own breathing room, so this keeps the services checklist
       tucked close to the content above it (owner request, July 2026). */
    padding: var(--space-md) 0 var(--space-xl);
}

/* Label above the checklist (owner request, July 28 2026): "Our Services:
   Tap to Learn More" / "…Click to Learn More". Same treatment as the service
   pages' dark-background section headings (.svc-h2), which don't load on city
   pages. Margin stays small so the list is still tucked close to the hero —
   the label joins that block, it doesn't push it down. */
.services-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--white);
    /* Left-justified on every screen (owner request, July 28 2026). No
       max-width needed here — the checklist below fills the container, so
       the title's first letter already lines up with the first service. */
    text-align: left;
    margin: 0 0 var(--space-sm);
}

/* THE VERB: "Click" needs BOTH a pointer that can hover AND a screen wider
   than the phone breakpoint. "Tap" is the default and wins otherwise.
   Why both conditions rather than just one:
     - hover alone was the first attempt (July 28 2026) and is the more
       truthful test — a tablet is wide but tapped, a landscape phone is
       wide-ish but tapped — BUT any desktop-class browser at phone width
       still reported "Click", including the preview pane the owner reviews
       the site in. A label that reads wrong in the tool used to approve it
       is a bad label, however defensible the logic.
     - width alone would call an iPad a mouse device.
   Requiring both keeps every real case right (phone → Tap, tablet → Tap,
   desktop → Click) and makes a narrow window agree with the phones it's
   standing in for. The one case it "gets wrong" — a mouse user who has
   deliberately narrowed their window past 620px — reads "Tap" while holding
   a mouse, which is a far cheaper miss.
   Both words ship in the HTML; `display: none` keeps the hidden one out of
   the accessibility tree too, so a screen reader announces exactly one. */
.services-title-verb--click {
    display: none;
}
@media (hover: hover) and (min-width: 621px) {
    .services-title-verb--tap {
        display: none;
    }
    .services-title-verb--click {
        display: inline;
    }
}

/* Three-column checklist of services (one column on phones).
   No top margin — the section's own (small) top padding is the only gap
   above the list, keeping it close to the hero (owner request, July 2026). */
.services-checklist {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.15rem 1.5rem;
    margin: 0 0 var(--space-lg);
}
.services-checklist li {
    display: flex;
    /* center (owner request, July 23 2026): the grid stretches every cell
       in a visual row to the tallest neighbor's height, so single-line
       names used to sit high with empty space below. Centering puts ✓,
       name, and hover arrow on one shared midline instead. */
    align-items: center;
    /* No gap: the ✓ is no longer a flex item sitting next to the link, it
       lives inside it (see below), so the li has a single child and the
       spacing between ✓ and name is --check-gap instead. */
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
}
/* THE ✓ RIDES THE FIRST LINE OF THE NAME (owner request, July 28 2026).
   It used to be a flex item on the li, sitting beside the whole link, so
   a name that wrapped to two lines got its ✓ floated to the midpoint
   between them — level with nothing. It now lives INSIDE the link as a
   hanging indent, which is what actually ties it to the text: the link
   reserves --check-gap of left padding and pulls its first line back out
   by the same amount, so the ✓ sits in that reserved strip on line one and
   any wrapped line lands under the TEXT, not under the ✓.

   Note this is deliberately NOT `align-items: flex-start` on the li. That
   was the obvious fix and it's wrong here: the grid stretches every cell to
   its row's tallest neighbour, so top-aligning would drop a one-line name
   to the top of a cell sized by a two-line one, leaving it hanging with
   space beneath — exactly the complaint that put `align-items: center`
   there on July 23 2026. Centering stays; only the ✓ moved. */
.services-checklist {
    --check-gap: 1.25rem;
}

/* Checklist items link to the per-service landing pages in
   services/<city>/. Links inherit the checklist's normal text style;
   on hover they turn orange and slide RIGHT — the same 0.5rem travel
   as the sidebar city links (styles.css .city-nav-list a:hover) — and
   an arrow fades in at the row's end, vertically centered like the
   blog lists' (owner request July 23 2026; it was inline with the
   text before).

   NO-REWRAP RULE (owner request, July 23 2026): the idle state
   reserves 0.5rem of padding on the RIGHT; hover moves that same
   0.5rem to the LEFT. The text's available width is therefore
   IDENTICAL in both states, so a service name wraps exactly the same
   way hovered or not — the wrap is decided once at page load, never
   by the mouse. Don't "simplify" the padding swap away. */
.services-checklist a {
    color: inherit;
    display: inline-block;
    /* Hanging indent for the ✓ (see the note above the ✓ rules): the left
       padding reserves its strip on every line, the matching negative
       text-indent pulls line ONE back over that strip so the ✓ can sit
       there beside the first word. */
    padding-left: var(--check-gap);
    text-indent: calc(var(--check-gap) * -1);
    padding-right: 0.5rem;
    transition: var(--ease);
}
/* The hover slide ADDS to the hanging indent rather than replacing it —
   padding-left goes 1.25rem → 1.75rem, so the ✓ and the name travel the
   same 0.5rem together and the indent survives. Setting padding-left to a
   bare 0.5rem here (as this rule once did, before the ✓ moved in) would
   drag the first line outside the link's own box. */
/* MOUSE-ONLY (July 28 2026) — the same fence the blog's archive rows got
   the same day, applied here because this list is where that hover
   pattern was copied FROM. Two problems, one cause: a touch browser holds
   :hover after a tap, so coming back from a service page left a row stuck
   shifted and orange as though a pointer were on it; and the arrow's
   always-reserved strip can wrap to a line of its own, wasting a blank
   line under a name. (That second one doesn't bite at 375px today — the
   names are short enough — but it's one longer service name away, and the
   blog page proved it.) Touch gets :active instead, which lights the name
   up while the finger is down and lets go when the finger does. */
@media (hover: hover) {
    .services-checklist a:hover {
        color: var(--orange);
        padding-left: calc(var(--check-gap) + 0.5rem);
        padding-right: 0;
    }
}
.services-checklist a:active {
    color: var(--orange);
}
/* No hover means no arrow to slide in, so the strip reserved for it on
   the right is pure waste — give that width back to the name. The
   hanging-indent padding on the LEFT stays: that one holds the ✓. */
@media (hover: none) {
    .services-checklist a {
        padding-right: 0;
    }
}
.services-checklist a::before {
    content: "\2713";               /* ✓ check mark */
    display: inline-block;
    width: var(--check-gap);        /* fills the indent; text starts after it */
    text-indent: 0;                 /* don't inherit the negative indent */
    color: var(--orange);
    font-weight: 700;
}
/* Arrow rides INLINE at the end of the name's last line — snug against
   the final word whether the name is one line or two (owner preference,
   July 23 2026, after seeing both this and a row-end placement). Its
   space is always reserved (opacity 0 when idle), so appearing never
   reflows the text. */
@media (hover: hover) {
    .services-checklist a::after {
        content: "\f061";                     /* fa-arrow-right */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.8em;
        display: inline-block;
        margin-left: 0.45em;
        /* ⚠️ text-indent: 0 is LOAD-BEARING (bug fixed 26 Aug 2026): the link
           carries a NEGATIVE text-indent for the ✓ hanging indent, and
           text-indent INHERITS into inline-block pseudo-elements. The ✓
           (::before) always had this reset; the arrow did not — so on hover
           the glyph painted 1.25rem LEFT of its reserved slot, on top of the
           name's last letters (owner caught it on "Faucet Replacement"). */
        text-indent: 0;
        color: var(--orange);
        opacity: 0;
        transform: translateX(-0.3em);
        transition: var(--ease);
    }
    .services-checklist a:hover::after {
        opacity: 1;
        transform: translateX(0);
    }
}

/* "Call Plunge now" block below the checklist */
.services-cta {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.services-cta h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.5rem;
}
.services-cta p {
    color: rgba(255,255,255,0.82);
    margin-bottom: var(--space-md);
}

/* Six-card grid of service offerings */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
}

.service-card {
    background: var(--blue-dark);   /* matches the Google review cards */
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--orange);   /* orange accent bars — top + left, matches homepage cards */
    border-left: 4px solid var(--orange);
    transition: var(--ease);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Icon circle — orange (10% accent) */
.service-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.service-icon .fa {
    color: var(--white);
    font-size: 1.25rem;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.35rem;
}

.service-card p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
}


/* =============================================
   WHY CHOOSE US — trust signals
   Background: slightly darker grey (60% zone)
   ============================================= */
.city-why {
    background: var(--bg-dark);
    padding: var(--space-xl) 0;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-top: var(--space-md);
}

.why-item {
    background: var(--blue-dark);   /* matches the Google review cards */
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--orange);   /* orange accent bars — top + left, matches homepage cards */
    border-left: 4px solid var(--orange);
    transition: var(--ease);
}

.why-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Large icon above each trust signal — white, so it stays visible on the dark blue card */
.why-item > .fa {
    font-size: 2.2rem;
    color: var(--white);
    margin-bottom: 0.75rem;
    display: block;
}

.why-item h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.why-item p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}


/* =============================================
   CITY CALL-TO-ACTION SECTION
   Background: blue (30%)
   ============================================= */
.city-cta {
    background: var(--blue-dark);   /* matches the site's dark-blue blocks: header, footer, Get In Touch, review cards */
    color: var(--white);
    padding: var(--space-xl) 0;
    text-align: center;
}

.city-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.city-cta p {
    color: rgba(255,255,255,0.82);
    font-size: 1rem;
    margin-bottom: var(--space-md);
}


/* =============================================
   RESPONSIVE ADJUSTMENTS FOR CITY PAGES
   ============================================= */
@media (max-width: 620px) {

    .city-hero {
        padding: var(--space-lg) 0 var(--space-md);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    /* "Our Services: Tap to Learn More" doesn't fit one phone line at the
       shared heading size, and the owner wants it on ONE line (a two-line
       version broke at the colon, which read fine but took the room a
       service row could use). So the size steps down here instead — this is
       the one place the heading scale is overridden, and only on phones.
       It scales with the viewport rather than sitting at one fixed size,
       because the margin here is thin: at 375px the line has 311px to live
       in and wants 313px at the shared size. A fixed size tuned to 375px
       would still wrap on a 360px Android. The vw middle value keeps the
       line proportional to whatever width it lands on (~287px of 311px at
       375, ~244px of 256 at a 320px screen), and the cap stops it growing
       back into a wrap as it nears the 620px breakpoint. If the wording ever
       gets longer than "Our Services: Click to Learn More", re-check these
       numbers — they're sized to that string. */
    .services-title {
        font-size: clamp(0.95rem, 4.1vw, 1.25rem);
    }

    /* Checklist runs tighter on phones (owner request, July 24 2026):
       42 services in one column is the tallest thing on the page, so
       slimmer rows and a smaller gap before the "Call Plunge now" block
       below trim it without touching the type size or the hover
       behavior. */
    /* ONE column on purpose: a two-column version was tried July 24 2026
       and measured TALLER (1,364px vs 1,352px) — at ~150px per column
       every one of the (then 37) service names wrapped to two or three lines,
       so halving the row count bought nothing and cost legibility.
       Don't retry without shortening the service names. */
    .services-checklist {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: var(--space-md);
    }
    .services-checklist li {
        padding: 0.38rem 0;
    }

    .why-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* (A phone-only hero REORDER — video above the intro copy — was
       tried and reverted on July 24 2026 at the owner's request. The
       hero keeps its natural order: headline → copy + buttons → video
       → story card.) */

    /* Intro copy collapses behind a Show more toggle (owner request,
       July 24 2026) so the CTA buttons ride near the top. The fade
       blends into the hero's own background — no card, no box, the
       copy just softens out. script.js adds .is-collapsed, never the
       HTML (failsafe). */
    .city-intro-collapse {
        position: relative;
    }
    .city-intro {
        overflow: hidden;
        max-height: 120rem;          /* ≈ no limit; keeps the transition animatable */
        transition: max-height 0.5s ease;
    }
    .city-intro-collapse.is-collapsed .city-intro {
        max-height: 8.5rem;
    }
    .city-intro-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);
    }
    .city-intro-collapse.is-collapsed .city-intro-fade {
        opacity: 1;
    }
    .city-intro-toggle {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: fit-content;
        margin: 0.5rem 0 0 auto;     /* right-aligned, like the homepage's */
        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);
    }
    .city-intro-toggle .fa-chevron-down {
        transition: var(--ease);
    }
    .city-intro-collapse:not(.is-collapsed) + .city-intro-toggle .fa-chevron-down {
        transform: rotate(180deg);
    }

}

@media (max-width: 400px) {

    .why-grid {
        grid-template-columns: 1fr;
    }

}