/**
 * Emergency Water Heater SLC - Main Stylesheet
 *
 * Color palette:
 * - Primary:    #1a5276 (deep blue - trust, reliability)
 * - Accent:     #e74c3c (red/orange - emergency, urgency)
 * - Success:    #27ae60 (green - checkmarks, positive)
 * - Background: #f8f9fa (light gray)
 * - Text:       #2c3e50 (dark charcoal)
 * - Muted:      #7f8c8d (gray for secondary text)
 *
 * @package EWH_Theme
 */

/* ─── Base ────────────────────────────────────────────────────────────────── */

html {
    /* Reserve scrollbar gutter to prevent layout shift when overflow toggles
       (e.g. body.ewh-modal-open removes scrollbar, shifting content ~17px) */
    scrollbar-gutter: stable;
}

/* ─── CSS Custom Properties ──────────────────────────────────────────────── */

:root {
    --ewh-primary: #1a5276;
    --ewh-primary-dark: #11344d;
    --ewh-accent: #e74c3c;
    --ewh-accent-dark: #c0392b;
    --ewh-success: #27ae60;
    --ewh-bg: #e8ecf0;
    --ewh-bg-light: #f4f6f8;
    --ewh-bg-white: #ffffff;
    --ewh-text: #2c3e50;
    --ewh-text-muted: #5a636e; /* darkened from #6c757d for WCAG AA contrast on light backgrounds */
    --ewh-border: #cbd5e0;
    --ewh-border-light: #e2e8f0;
    --ewh-star-color: #f39c12;
    --ewh-radius: 8px;
    --ewh-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --ewh-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.18);
    --ewh-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ewh-container: 1440px;

    /* WPForms Variables - Define missing form styling variables */
    --wpforms-field-background-color: #ffffff;
    --wpforms-field-text-color: #2c3e50;
    --wpforms-field-border-color: #cbd5e0;
    --wpforms-field-border-style: solid;
    --wpforms-field-border-size: 1px;
    --wpforms-field-border-radius: 4px;
    --wpforms-field-size-padding-h: 12px;
    --wpforms-field-size-font-size: 16px;
    --wpforms-label-color: #2c3e50;
    --wpforms-label-font-size: 14px;
    --wpforms-button-background-color: #1a5276;
    --wpforms-button-text-color: #ffffff;
}

/* ─── Astra Override: let our sections go full-width ────────────────────── */

/*
 * Astra uses .ast-container with display:flex (sidebar layout) and
 * .ast-separate-container with padding/boxing. We need to disable
 * these on pages that use our custom full-width templates.
 */

/* Force body to be full-width, not constrained */
body {
    max-width: none !important;
    margin: 0 !important;
}

/* ─── Floating Icons in Astra Header ────────────────────────────────────── */
/* Icons injected via astra_masthead_top hook, positioned inside the header */
.site-header {
    position: relative;
}

.site-header .ewh-hero-icons {
    z-index: 0;
    overflow: hidden;
}

.site-header .ewh-hero-icon {
    color: rgba(255, 255, 255, 0.07);
}

/* Keep nav content above the icons */
.site-header .ast-container,
.site-header .main-header-bar {
    position: relative;
    z-index: 1;
}

/* 1. Kill the flex sidebar layout — make it a simple block container */
.site-content .ast-container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 2. Make #primary fill full width (no sidebar space reserved) */
#primary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* 3. Remove Astra's separate-container boxing/padding */
.ast-separate-container #primary,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
    background: transparent !important;
    padding: 0 !important;
}

/* 4. Remove content-area constraints */
.site-content {
    padding: 0 !important;
    margin: 0 !important;
}

#content.site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 5. Hide Astra's default page title on our custom templates */
.home .entry-title,
.home .page-title,
.page .entry-title,
.page .page-title {
    display: none;
}

/* ─── Base / Container ───────────────────────────────────────────────────── */

.ewh-main {
    background-color: var(--ewh-bg);
    color: var(--ewh-text);
}

.ewh-container {
    max-width: var(--ewh-container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ─── Hero Section ───────────────────────────────────────────────────────── */

.ewh-hero {
    background: linear-gradient(135deg, var(--ewh-primary) 0%, var(--ewh-primary-dark) 100%);
    color: #fff;
    padding: 80px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Floating icons container */
.ewh-hero-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ewh-hero-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.07);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* Four floating paths — gentle, dreamy movement */
.ewh-hero-icon--float-1 {
    animation-name: ewh-float-1;
}
.ewh-hero-icon--float-2 {
    animation-name: ewh-float-2;
}
.ewh-hero-icon--float-3 {
    animation-name: ewh-float-3;
}
.ewh-hero-icon--float-4 {
    animation-name: ewh-float-4;
}

@keyframes ewh-float-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(10px, -20px) rotate(6deg); }
    50%      { transform: translate(-8px, -35px) rotate(-4deg); }
    75%      { transform: translate(14px, -15px) rotate(8deg); }
}

@keyframes ewh-float-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(-12px, -25px) rotate(-8deg); }
    66%      { transform: translate(10px, -15px) rotate(5deg); }
}

@keyframes ewh-float-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(15px, -12px) rotate(10deg); }
    40%      { transform: translate(5px, -30px) rotate(-6deg); }
    60%      { transform: translate(-12px, -22px) rotate(8deg); }
    80%      { transform: translate(-6px, -8px) rotate(-3deg); }
}

@keyframes ewh-float-4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30%      { transform: translate(-8px, -18px) rotate(-5deg); }
    70%      { transform: translate(12px, -28px) rotate(7deg); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ewh-hero-icon {
        animation: none !important;
    }
}

.ewh-hero .ewh-container {
    position: relative;
    z-index: 1;
}

.ewh-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
}

.ewh-hero__subtitle {
    font-size: 1.15rem;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* ─── Search Form ────────────────────────────────────────────────────────── */

.ewh-search-form {
    display: flex;
    max-width: 520px;
    margin: 0 auto;
    gap: 8px;
    align-items: center;
}

.ewh-search-form--hero {
    max-width: 560px;
}

/* Multi-selector for higher specificity to override Astra inline styles */
.ewh-search-form__input,
.ewh-search-form .ewh-search-form__input,
input.ewh-search-form__input {
    flex: 1;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 1rem !important;
    line-height: 52px !important;
    border: 2px solid var(--ewh-border) !important;
    border-width: 2px !important;
    border-radius: var(--ewh-radius) !important;
    outline: none;
    color: var(--ewh-text);
    background: var(--ewh-bg-white) !important;
    box-sizing: border-box !important;
    vertical-align: middle;
    margin: 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ewh-search-form__input:focus {
    border-color: var(--ewh-accent) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Placeholder styling */
.ewh-search-form__input::placeholder,
.ewh-search-form .ewh-search-form__input::placeholder,
input.ewh-search-form__input::placeholder {
    color: #95a5a6;
    opacity: 1;
}

/* Multi-selector for higher specificity to override Astra inline styles */
.ewh-search-form__button,
.ewh-search-form .ewh-search-form__button,
button.ewh-search-form__button {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 1rem !important;
    line-height: 52px !important;
    font-weight: 600;
    background-color: var(--ewh-accent-dark) !important; /* #c0392b — passes WCAG AA (5.1:1 with white) */
    color: #fff !important;
    border: 2px solid var(--ewh-accent-dark) !important;
    border-width: 2px !important;
    border-radius: var(--ewh-radius) !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
    box-sizing: border-box !important;
    vertical-align: middle;
    margin: 0 !important;
}

.ewh-search-form__button:hover {
    background-color: var(--ewh-accent-dark);
}

.ewh-search-form__button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.ewh-search-error {
    color: var(--ewh-accent);
    background: #fff3f3;
    padding: 10px 16px;
    border-radius: var(--ewh-radius);
    margin-top: 10px;
    font-size: 0.9rem;
    text-align: center;
}

.ewh-search-inline {
    margin-bottom: 24px;
}

/* ─── Hero Stats ─────────────────────────────────────────────────────────── */

.ewh-hero__stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 40px;
}

.ewh-stat {
    text-align: center;
}

.ewh-stat__number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.ewh-stat__label {
    font-size: 0.85rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── How It Works ───────────────────────────────────────────────────────── */

.ewh-how-it-works {
    padding: 60px 0;
    background: var(--ewh-bg-white);
}

.ewh-section-heading {
    text-align: center;
    font-size: 1.75rem;
    margin: 0 0 40px;
    color: var(--ewh-primary);
}

.ewh-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.ewh-step {
    text-align: center;
    padding: 24px;
}

.ewh-step__number {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: var(--ewh-primary);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 16px;
}

.ewh-step__title {
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--ewh-text);
}

.ewh-step__desc {
    color: var(--ewh-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ─── Browse Cities Grid ─────────────────────────────────────────────────── */

.ewh-browse-cities {
    padding: 60px 0;
}

.ewh-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.ewh-city-card {
    display: block;
    background: var(--ewh-bg-white);
    padding: 20px;
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow);
    text-decoration: none;
    color: var(--ewh-text);
    transition: box-shadow 0.2s, transform 0.2s;
}

.ewh-city-card:hover {
    box-shadow: var(--ewh-shadow-hover);
    transform: translateY(-2px);
    color: var(--ewh-primary);
}

.ewh-city-card__name {
    font-size: 1.05rem;
    margin: 0 0 4px;
}

.ewh-city-card__count {
    font-size: 0.85rem;
    color: var(--ewh-text-muted);
}

/* ─── CTA Section ────────────────────────────────────────────────────────── */

.ewh-cta {
    background: var(--ewh-primary);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}

.ewh-cta__title {
    font-size: 1.75rem;
    margin: 0 0 12px;
}

.ewh-cta__text {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0 0 24px;
}

/* ─── City Page Header ──────────────────────────────────────────────────── */

.ewh-city-header {
    padding: 40px 0 24px;
    text-align: center;
}

.ewh-city-header__title {
    font-size: 2rem;
    color: var(--ewh-primary);
    margin: 0 0 8px;
}

.ewh-city-header__subtitle {
    color: var(--ewh-text-muted);
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.5;
}

/* ─── City Intro Text ────────────────────────────────────────────────────── */

.ewh-city-intro {
    background: var(--ewh-bg-white);
    padding: 20px 24px;
    border-radius: var(--ewh-radius);
    border-left: 4px solid var(--ewh-primary);
    margin-bottom: 24px;
    line-height: 1.7;
    color: var(--ewh-text);
    font-size: 0.95rem;
}

.ewh-city-intro p {
    margin: 0;
}

/* ─── Filters ────────────────────────────────────────────────────────────── */

.ewh-filters {
    padding: 16px 0;
    margin-bottom: 16px;
}

.ewh-filters__label {
    font-weight: 600;
    color: var(--ewh-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
}

.ewh-filters__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ewh-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--ewh-border);
    border-radius: 20px;
    background: var(--ewh-bg-white);
    color: var(--ewh-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ewh-filter-btn:hover {
    border-color: var(--ewh-primary);
    color: var(--ewh-primary);
}

.ewh-filter-btn--active {
    background: var(--ewh-primary);
    color: #fff;
    border-color: var(--ewh-primary);
}

.ewh-results-count {
    font-size: 0.9rem;
    color: var(--ewh-text-muted);
    margin-bottom: 16px;
}

/* ─── Company Card Grid ──────────────────────────────────────────────────── */

.ewh-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for companies */
    gap: 20px;
    margin-bottom: 48px;
}

.ewh-card-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ─── Company Card ───────────────────────────────────────────────────────── */

.ewh-card {
    background: var(--ewh-bg-white);
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow-card);
    border: 1px solid var(--ewh-border-light);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    position: relative;
}

.ewh-card:hover {
    box-shadow: var(--ewh-shadow-hover);
    border-color: var(--ewh-border);
    transform: translateY(-2px);
}

.ewh-card__badge-featured {
    background: var(--ewh-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
}

.ewh-card {
    display: flex;
    flex-direction: column;
}

.ewh-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ewh-card__title {
    font-size: 1.15rem;
    margin: 0 0 8px;
}

.ewh-card__title a {
    color: var(--ewh-text);
    text-decoration: none;
}

.ewh-card__title a:hover {
    color: var(--ewh-primary);
}

/* ─── Star Rating ────────────────────────────────────────────────────────── */

.ewh-card__rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.2;
}

.ewh-card__stars {
    display: inline-flex;
    gap: 1px;
    align-items: center;
}

/* SVG Stars */
.ewh-star-svg {
    display: inline-block;
    vertical-align: middle;
    --ewh-star-empty: #d4d4d4;
}

.ewh-star-svg--sm {
    width: 16px;
    height: 16px;
}

.ewh-star-svg--lg {
    width: 22px;
    height: 22px;
}

.ewh-card__rating-number {
    font-weight: 600;
    color: var(--ewh-text);
}

/* Review Count Pills */
.ewh-card__review-count {
    display: inline-flex;
    align-items: center;
    background: var(--ewh-bg-light);
    color: var(--ewh-text-muted);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.3;
    border: 1px solid var(--ewh-border-light);
}

.ewh-card__review-count strong {
    font-weight: 600;
    color: var(--ewh-text);
    margin-right: 3px;
}

.ewh-company-detail__review-count {
    display: inline-flex;
    align-items: center;
    background: var(--ewh-bg-light);
    color: var(--ewh-text-muted);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.875rem;
    border: 1px solid var(--ewh-border-light);
}

/* ─── Card Details ───────────────────────────────────────────────────────── */

.ewh-card__location {
    color: var(--ewh-text-muted);
    font-size: 0.875rem;
    margin: 0 0 6px;
    line-height: 1.4;
}

.ewh-card__phone {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.ewh-card__phone a {
    color: var(--ewh-primary);
    text-decoration: none;
    font-weight: 600;
}

.ewh-card__phone a:hover {
    text-decoration: underline;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */

.ewh-card__services,
.ewh-card__equipment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ewh-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e8f4fd;
    color: var(--ewh-primary);
}

.ewh-badge--equipment {
    background: #eafaf1;
    color: #14532d; /* dark green — WCAG AA (8.1:1 on #eafaf1); #27ae60 was 2.65:1 */
}

.ewh-badge--emergency-lg {
    background: var(--ewh-accent);
    color: #fff;
    padding: 6px 16px;
    font-size: 0.85rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 16px;
}

/* BBB Trust Badges */
.ewh-bbb-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.75rem;
    vertical-align: middle;
}

.ewh-bbb-badge--sm {
    font-size: 0.75rem;
}

.ewh-bbb-badge--lg {
    font-size: 0.9rem;
}

.ewh-bbb-badge__label {
    background: #1a3a52;
    color: white;
    padding: 4px 8px;
}

.ewh-bbb-badge--lg .ewh-bbb-badge__label {
    padding: 6px 10px;
}

.ewh-bbb-badge__grade {
    padding: 4px 10px;
    color: white;
}

.ewh-bbb-badge--lg .ewh-bbb-badge__grade {
    padding: 6px 12px;
}

.ewh-bbb-badge__accredited {
    background: #1a7d45; /* darkened from #27ae60 for WCAG AA white text contrast */
    color: white;
    padding: 6px 10px;
    font-size: 0.75rem;
}

/* BBB Grade Colors */
.ewh-bbb-badge--green .ewh-bbb-badge__grade {
    background: #1a7d45; /* darkened from #27ae60 — WCAG AA (4.8:1 with white); #27ae60 was 2.87:1 */
}

.ewh-bbb-badge--amber .ewh-bbb-badge__grade {
    background: #e67e22;
}

.ewh-bbb-badge--red .ewh-bbb-badge__grade {
    background: #c0392b;
}

.ewh-bbb-badge--gray .ewh-bbb-badge__grade {
    background: #95a5a6;
}

/* Accredited ring on small badges */
.ewh-bbb-badge--sm.ewh-bbb-badge--accredited {
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.3);
}

/* ─── Card Meta ──────────────────────────────────────────────────────────── */

.ewh-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--ewh-text-muted);
    margin-bottom: 14px;
    line-height: 1.3;
}

.ewh-card__meta-item {
    white-space: nowrap;
}

.ewh-card__meta-item:not(:last-child)::after {
    content: "·";
    margin-left: 10px;
    color: var(--ewh-text-muted);
    opacity: 0.5;
}

.ewh-card__link {
    display: inline-block;
    padding: 8px 20px;
    background: var(--ewh-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--ewh-radius);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s;
    margin-top: auto;
    align-self: flex-start;
}

.ewh-card__link:hover {
    background: var(--ewh-primary-dark);
    color: #fff;
}

/* ─── Nearby Cities ──────────────────────────────────────────────────────── */

.ewh-nearby-cities {
    padding: 40px 0;
    border-top: 1px solid var(--ewh-border);
}

.ewh-nearby-cities__title {
    font-size: 1.5rem;
    color: var(--ewh-primary);
    margin: 0 0 24px;
}

.ewh-nearby-cities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ewh-nearby-cities__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--ewh-bg-white);
    border: 1px solid var(--ewh-border);
    border-radius: var(--ewh-radius);
    text-decoration: none;
    color: var(--ewh-text);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.2s, color 0.2s;
}

.ewh-nearby-cities__link:hover {
    border-color: var(--ewh-primary);
    color: var(--ewh-primary);
}

.ewh-nearby-cities__link:hover .ewh-nearby-cities__count {
    color: var(--ewh-primary);
}

.ewh-nearby-cities__count {
    display: block;
    color: var(--ewh-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    transition: color 0.2s;
}

/* ─── County Cities Section ──────────────────────────────────────────────── */

.ewh-county-cities {
    padding: 32px 0;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--ewh-border);
}

.ewh-county-cities__title {
    font-size: 1.5rem;
    color: var(--ewh-primary);
    margin: 0 0 24px;
}

.ewh-county-cities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ewh-county-cities__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--ewh-bg-white);
    border: 1px solid var(--ewh-border);
    border-radius: var(--ewh-radius);
    text-decoration: none;
    color: var(--ewh-text);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.2s, color 0.2s;
}

.ewh-county-cities__link:hover {
    border-color: var(--ewh-primary);
    color: var(--ewh-primary);
}

.ewh-county-cities__link:hover .ewh-county-cities__count {
    color: var(--ewh-primary);
}

.ewh-county-cities__count {
    display: block;
    color: var(--ewh-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    transition: color 0.2s;
}

/* ─── Company Detail Page ────────────────────────────────────────────────── */

.ewh-breadcrumb {
    padding: 16px 0;
    font-size: 0.85rem;
    color: var(--ewh-text-muted);
}

.ewh-breadcrumb a {
    color: var(--ewh-primary);
    text-decoration: none;
}

.ewh-breadcrumb a:hover {
    text-decoration: underline;
}

.ewh-breadcrumb__sep {
    margin: 0 8px;
    color: var(--ewh-border);
}

.ewh-company-detail__header {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--ewh-border);
    margin-bottom: 24px;
}

.ewh-company-detail__title {
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ewh-primary);
    margin: 0 0 12px;
}

.ewh-company-detail__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ewh-company-detail__review-count {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    color: var(--ewh-text-muted);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.875rem;
}

.ewh-company-detail__review-count strong {
    color: var(--ewh-text);
    margin-right: 4px;
}

.ewh-link-external {
    color: var(--ewh-primary);
    font-size: 0.875rem;
    text-decoration: none;
    font-weight: 600;
}

.ewh-link-external:hover {
    text-decoration: underline;
}

/* ─── Contact Bar ────────────────────────────────────────────────────────── */

.ewh-company-detail__contact-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, var(--ewh-bg-light) 0%, var(--ewh-bg-white) 100%);
    border-radius: var(--ewh-radius);
    border: 1px solid var(--ewh-border);
    box-shadow: var(--ewh-shadow-card);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.ewh-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--ewh-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    text-align: center;
    cursor: pointer;
    border: none;
}

.ewh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ewh-btn--phone {
    background: var(--ewh-accent);
    color: #fff;
    position: relative;
    font-size: 1rem;
}

.ewh-btn--phone::before {
    content: "☎";
    margin-right: 8px;
    color: var(--ewh-star-color);
    font-weight: bold;
}

.ewh-btn--phone:hover {
    background: var(--ewh-accent-dark);
    color: #fff;
}

.ewh-btn--website {
    background: var(--ewh-primary);
    color: #fff;
}

.ewh-btn--website::before {
    content: "🌐";
    margin-right: 8px;
}

.ewh-btn--website:hover {
    background: var(--ewh-primary-dark);
    color: #fff;
}

.ewh-btn--directions {
    background: var(--ewh-bg-white);
    color: var(--ewh-text);
    border: 2px solid var(--ewh-border);
}

.ewh-btn--directions::before {
    content: "📍";
    margin-right: 8px;
}

.ewh-btn--directions:hover {
    border-color: var(--ewh-primary);
    color: var(--ewh-primary);
    background: rgba(26, 82, 118, 0.05);
}

.ewh-btn--back {
    display: block;
    background: var(--ewh-bg);
    color: var(--ewh-primary);
    border: 1px solid var(--ewh-border);
}

.ewh-btn--cta {
    background: var(--ewh-accent);
    color: #fff;
    padding: 14px 36px;
    font-size: 1.1rem;
}

.ewh-btn--cta:hover {
    background: var(--ewh-accent-dark);
    color: #fff;
}

/* ─── Detail Page Grid ───────────────────────────────────────────────────── */

.ewh-company-detail__grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

.ewh-section {
    background: var(--ewh-bg-white);
    padding: 28px;
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow-card);
    margin-bottom: 24px;
    border: 1px solid var(--ewh-border-light);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ewh-section:hover {
    border-color: var(--ewh-border);
    box-shadow: var(--ewh-shadow);
}

.ewh-section__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ewh-primary);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--ewh-bg-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ewh-section__content {
    line-height: 1.8;
    color: var(--ewh-text);
    font-size: 0.9375rem;
}

.ewh-section__content p {
    margin: 0 0 16px;
}

.ewh-section__content p:last-child {
    margin-bottom: 0;
}

/* ─── Checklist ──────────────────────────────────────────────────────────── */

.ewh-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px;
}

.ewh-checklist__item {
    padding: 12px 12px 12px 36px;
    position: relative;
    background: var(--ewh-bg-light);
    border-radius: 4px;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: background 0.2s;
    border: 1px solid var(--ewh-border-light);
}

.ewh-checklist__item:hover {
    background: #e8f4fd;
    border-color: #b3d9f2;
}

.ewh-checklist__item--yes::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ewh-success);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}

/* ─── Sidebar Cards ──────────────────────────────────────────────────────── */

.ewh-sidebar-card {
    background: var(--ewh-bg-white);
    padding: 24px;
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow-card);
    margin-bottom: 24px;
    border: 1px solid var(--ewh-border-light);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ewh-sidebar-card:hover {
    border-color: var(--ewh-border);
    box-shadow: var(--ewh-shadow);
}

.ewh-sidebar-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ewh-primary);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--ewh-bg-light);
}

/* ─── Detail List (dt/dd) ────────────────────────────────────────────────── */

.ewh-detail-list {
    margin: 0;
}

.ewh-detail-list dt {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ewh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.75px;
    margin-top: 18px;
}

.ewh-detail-list dt:first-child {
    margin-top: 0;
}

.ewh-detail-list dd {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ewh-text);
}

.ewh-detail-list dd a {
    color: var(--ewh-primary);
    text-decoration: none;
    font-weight: 600;
}

.ewh-detail-list dd a:hover {
    text-decoration: underline;
}

/* ─── Hours ──────────────────────────────────────────────────────────────── */

.ewh-hours {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--ewh-text);
}

/* ─── Related Companies ──────────────────────────────────────────────────── */

.ewh-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ewh-border);
}

.ewh-related__title {
    font-size: 1.5rem;
    color: var(--ewh-primary);
    margin: 0 0 24px;
}

/* ─── No Results ─────────────────────────────────────────────────────────── */

.ewh-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--ewh-text-muted);
    font-size: 1.1rem;
}

/* ─── No Results (Filtered) ──────────────────────────────────────────────── */

.ewh-no-results-filtered {
    text-align: center;
    padding: 48px 24px;
    background: var(--ewh-bg-white);
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow);
    margin-bottom: 48px;
}

.ewh-no-results-filtered__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ewh-text);
    margin: 0 0 8px;
}

.ewh-no-results-filtered__text {
    color: var(--ewh-text-muted);
    margin: 0 0 20px;
    font-size: 0.95rem;
}

/* ─── FAQ Section ────────────────────────────────────────────────────────── */

.ewh-faq {
    padding: 40px 0;
    border-top: 1px solid var(--ewh-border);
}

.ewh-faq__title {
    font-size: 1.5rem;
    color: var(--ewh-primary);
    margin: 0 0 24px;
}

.ewh-faq__item {
    background: var(--ewh-bg-white);
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.ewh-faq__question {
    font-size: 1.05rem;
    color: var(--ewh-text);
    margin: 0 0 10px;
}

.ewh-faq__answer {
    color: var(--ewh-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* ─── 404 Page ──────────────────────────────────────────────────────────── */

.ewh-404 {
    text-align: center;
    padding: 60px 0 40px;
}

.ewh-404__title {
    font-size: 2.5rem;
    color: var(--ewh-primary);
    margin: 0 0 16px;
}

.ewh-404__text {
    font-size: 1.1rem;
    color: var(--ewh-text-muted);
    max-width: 500px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.ewh-404__search {
    max-width: 560px;
    margin: 0 auto 48px;
}

.ewh-404__cities {
    text-align: left;
}

.ewh-404__cities-title {
    font-size: 1.5rem;
    color: var(--ewh-primary);
    margin: 0 0 24px;
    text-align: center;
}

/* ─── Cities Index (Letter Navigation) ──────────────────────────────────── */

.ewh-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding: 16px;
    background: var(--ewh-bg-white);
    border-radius: var(--ewh-radius);
    box-shadow: var(--ewh-shadow);
}

.ewh-letter-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ewh-radius);
    background: var(--ewh-bg);
    color: var(--ewh-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.ewh-letter-nav__link:hover {
    background: var(--ewh-primary);
    color: #fff;
}

.ewh-letter-group {
    margin-bottom: 32px;
}

.ewh-letter-group__heading {
    font-size: 1.5rem;
    color: var(--ewh-primary);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ewh-border);
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.ewh-footer {
    background: var(--ewh-primary-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 40px 0 24px;
    font-size: 0.9rem;
    width: 100%;
    clear: both;
}

.ewh-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.ewh-footer__brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.ewh-footer__brand-desc {
    margin: 0;
    line-height: 1.6;
    max-width: 360px;
}

.ewh-footer__heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.ewh-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ewh-footer__links li {
    margin-bottom: 8px;
}

.ewh-footer__links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.ewh-footer__links a:hover {
    color: #fff;
}

.ewh-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.65); /* increased from 0.5 — WCAG AA (6.0:1 on #11344d); 0.5 was 4.45:1 */
    font-size: 0.8rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ewh-hero {
        padding: 80px 0 40px;
    }

    .ewh-hero__title {
        font-size: 1.75rem;
    }

    .ewh-hero__subtitle {
        font-size: 1rem;
    }

    .ewh-hero__stats {
        gap: 24px;
    }

    .ewh-stat__number {
        font-size: 1.5rem;
    }

    .ewh-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ewh-search-form {
        flex-direction: column;
        gap: 0;
    }

    .ewh-search-form__input,
    .ewh-search-form .ewh-search-form__input,
    input.ewh-search-form__input {
        width: 100% !important;
        border-radius: var(--ewh-radius) !important;
        margin-bottom: 8px !important;
    }

    .ewh-search-form__button,
    .ewh-search-form .ewh-search-form__button,
    button.ewh-search-form__button {
        width: 100% !important;
        border-radius: var(--ewh-radius) !important;
    }

    .ewh-card-grid {
        grid-template-columns: 1fr;
    }

    .ewh-company-detail__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ewh-company-detail__header {
        padding: 16px 0;
    }

    .ewh-company-detail__contact-bar {
        flex-direction: column;
        padding: 16px;
        gap: 10px;
    }

    .ewh-btn {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }

    .ewh-city-header__title,
    .ewh-company-detail__title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .ewh-company-detail__rating {
        font-size: 0.9375rem;
        gap: 8px;
    }

    .ewh-section {
        padding: 20px;
        margin-bottom: 16px;
    }

    .ewh-section__title {
        font-size: 1.125rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
    }

    .ewh-sidebar-card {
        padding: 20px;
        margin-bottom: 16px;
    }

    .ewh-detail-list dt {
        margin-top: 14px;
        font-size: 0.6875rem;
    }

    .ewh-detail-list dd {
        margin-top: 4px;
        font-size: 0.875rem;
    }

    .ewh-nearby-cities__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ewh-city-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ewh-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .ewh-hero__stats {
        flex-direction: column;
        gap: 16px;
    }

    .ewh-nearby-cities__grid,
    .ewh-city-grid {
        grid-template-columns: 1fr;
    }

    .ewh-nearby-cities__link {
        padding: 16px;
        font-size: 1rem;
    }

    .ewh-nearby-cities__count {
        font-size: 0.875rem;
        margin-top: 2px;
    }

    /* Improve card spacing on mobile */
    .ewh-card__body {
        padding: 18px;
    }

    .ewh-card__title {
        font-size: 1.0625rem;
        margin-bottom: 10px;
    }

    .ewh-card__rating {
        gap: 6px;
    }

    .ewh-card__review-count {
        font-size: 0.75rem;
        padding: 2px 8px;
    }

    .ewh-card__phone {
        font-size: 0.9rem;
    }

    .ewh-badge {
        font-size: 0.6875rem;
        padding: 2px 8px;
    }

    .ewh-card__link {
        font-size: 0.875rem;
        padding: 10px 18px;
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   GOOGLE MAPS
   ======================================== */

/* City Page: Map on right, cards wrap around left */
.ewh-city-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    margin-top: 24px;
}

.ewh-map-wrapper {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 24px;
    align-self: start;
}

.ewh-card-grid {
    grid-column: 1;
    grid-row: 1;
}

/* Map container styling */
.ewh-map {
    width: 100%;
    border-radius: var(--ewh-radius);
    border: 2px solid var(--ewh-border);
    overflow: hidden;
}

.ewh-map--city,
.ewh-map--county {
    height: 700px;
    min-height: 700px;
}

.ewh-map--single {
    height: 400px;
    min-height: 400px;
}

/* Google Maps InfoWindow container override - Complete reset */
/* Target the main container that Google wraps around content */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    overflow: visible !important;
    max-width: none !important;
    max-height: none !important;
}

/* Target the scrollable content wrapper - CRITICAL for height */
.gm-style .gm-style-iw-d {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    max-width: none !important;
}

/* Target ALL nested divs that Google generates - they all need max-height override */
.gm-style-iw-c > div,
.gm-style-iw-c > div > div,
.gm-style-iw-c > div > div > div,
.gm-style-iw-d > div,
.gm-style-iw-d > div > div {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
}

/* Target the tail/arrow container */
.gm-style-iw-t,
.gm-style-iw-tc {
    padding: 0 !important;
    margin: 0 !important;
}

/* Position the close button */
.gm-ui-hover-effect {
    top: 4px !important;
    right: 4px !important;
    width: 24px !important;
    height: 24px !important;
}

/* Custom Info Window Overlay - Full control, no Google Maps constraints */
.ewh-custom-info-window {
    position: absolute;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    transform: translate(-50%, -100%);
    min-width: 220px;
    max-width: 280px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    z-index: 1000;
}

.ewh-custom-info-window::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
}

.ewh-custom-info-window__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 10;
}

.ewh-custom-info-window__close:hover {
    color: #2c3e50;
}

/* Map info window content */
.ewh-map-info {
    padding: 16px;
    padding-right: 32px;
    margin: 0;
    background: white;
    box-sizing: border-box;
}

.ewh-map-info__title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding: 0;
    color: #2c3e50;
    line-height: 1.3;
    word-break: break-word;
}

.ewh-map-info__title a {
    color: #2c3e50;
    text-decoration: none;
}

.ewh-map-info__title a:hover {
    color: #1a5276;
}

.ewh-map-info__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1;
}

.ewh-map-info__rating-text {
    font-size: 0.8125rem;
    color: var(--ewh-text-muted);
    font-weight: 600;
}

.ewh-map-info__bbb {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Ensure stars and badges display correctly */
.ewh-map-info .ewh-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.ewh-map-info .ewh-star {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.ewh-map-info .ewh-bbb-badge {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

/* Responsive: Stack map below cards on tablet/mobile */
@media (max-width: 1024px) {
    .ewh-city-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ewh-map-wrapper {
        grid-column: 1;
        grid-row: 1;
        position: static;
    }

    .ewh-card-grid {
        grid-column: 1;
        grid-row: 2;
    }

    .ewh-map--city,
    .ewh-map--county {
        height: 500px;
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .ewh-map--city,
    .ewh-map--county {
        height: 400px;
        min-height: 400px;
    }

    .ewh-map--single {
        height: 300px;
        min-height: 300px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD PAGES (About, Contact, Privacy, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* About page — wider content frame (~50% wider than default 800px) */
.ewh-page-about .ewh-page-content {
    max-width: 1200px;
}

.ewh-page-header {
    text-align: center;
    margin-bottom: 32px;
    padding-top: 24px;
}

.ewh-page-header__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ewh-text);
    line-height: 1.2;
}

.ewh-page-content {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 48px;
    line-height: 1.8;
    font-size: 1.1rem;
}

.ewh-page-content h2,
.ewh-page-content h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    color: var(--ewh-text);
}

.ewh-page-content p {
    margin-bottom: 16px;
}

.ewh-page-content a {
    color: var(--ewh-accent);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .ewh-page-header__title {
        font-size: 1.8rem;
    }

    .ewh-page-content {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTAH COUNTY SVG MAP
   ═══════════════════════════════════════════════════════════════════════════ */

.ewh-county-map-wrap {
    position: relative;
    max-width: 380px;
    margin: 0 auto 2.5rem;
}

.ewh-county-map-wrap svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Base path styles */
.ewh-county-path {
    fill-rule: nonzero;
    stroke: #ffffff;
    stroke-width: 0.18;
    stroke-linejoin: round;
    transition: fill 0.15s ease;
}

/* Served counties: interactive */
.ewh-county-served {
    fill: #dbeafe;
    cursor: pointer;
}

/* Unserved counties: muted, no pointer */
.ewh-county-unserved {
    fill: #e5e7eb;
    cursor: default;
}

/* Hover state — set by JS .is-hovered on the <a>, or native :hover */
.ewh-county-link:hover .ewh-county-served,
.ewh-county-link.is-hovered .ewh-county-served {
    fill: #1d4ed8;
}

/* Remove default <a> outline on SVG links; restore on keyboard focus */
.ewh-county-link {
    outline: none;
}
.ewh-county-link:focus-visible .ewh-county-served {
    fill: #1d4ed8;
    stroke: #fbbf24;
    stroke-width: 0.4;
}

/* Tooltip */
#ewh-county-tooltip {
    position: fixed;
    display: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    white-space: nowrap;
    z-index: 200;
    color: #1e293b;
}

#ewh-county-tooltip strong {
    display: block;
    font-weight: 600;
    color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLES SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Article Archive Header ─────────────────────────────────────────────── */

.ewh-article-archive-header {
    text-align: center;
    margin-bottom: 48px;
}

.ewh-article-archive-header__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ewh-text);
    margin-bottom: 16px;
    line-height: 1.2;
}

.ewh-article-archive-header__subtitle {
    font-size: 1.125rem;
    color: var(--ewh-text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .ewh-article-archive-header__title {
        font-size: 2rem;
    }

    .ewh-article-archive-header__subtitle {
        font-size: 1rem;
    }
}

/* ─── Article Filter Buttons ─────────────────────────────────────────────── */

.ewh-article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 48px;
}

.ewh-filter-btn {
    padding: 10px 20px;
    background: var(--ewh-bg-white);
    border: 2px solid var(--ewh-border);
    border-radius: var(--ewh-radius);
    color: var(--ewh-text);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.ewh-filter-btn:hover {
    border-color: var(--ewh-primary);
    background: var(--ewh-primary);
    color: white;
}

.ewh-filter-btn.active {
    background: var(--ewh-primary);
    border-color: var(--ewh-primary);
    color: white;
}

/* ─── Article Grid Layout (3-Column Responsive) ──────────────────────────── */

.ewh-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
}

.ewh-article-grid__item {
    transition: opacity 0.3s ease;
}

.ewh-article-grid__item.hidden {
    display: none;
}

@media (max-width: 1024px) {
    .ewh-article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .ewh-article-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ─── Article Card Styles ────────────────────────────────────────────────── */

.ewh-article-card {
    background: var(--ewh-bg-white);
    border-radius: var(--ewh-radius);
    overflow: hidden;
    box-shadow: var(--ewh-shadow);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Square text-only fallback (no image) */
    aspect-ratio: 1 / 1;
    padding: 32px;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Cards with images: remove square constraint, image drives height */
.ewh-article-card--has-image {
    aspect-ratio: auto;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

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

.ewh-article-card__image-link {
    display: block;
    overflow: hidden;
    line-height: 0;
}

.ewh-article-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ewh-article-card:hover .ewh-article-card__image {
    transform: scale(1.05);
}

.ewh-article-card__content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ewh-article-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ewh-article-card__category-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--ewh-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ewh-article-card__category-badge:hover {
    background: var(--ewh-primary-dark);
}

.ewh-article-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.4;
    /* Ensure long titles don't break the square shape */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ewh-article-card__title a {
    color: var(--ewh-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ewh-article-card__title a:hover {
    color: var(--ewh-primary);
}

.ewh-article-card__excerpt {
    font-size: 0.938rem;
    color: var(--ewh-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
    flex-grow: 1;
}

.ewh-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--ewh-text-muted);
    margin: 0;
}

.ewh-article-card--has-image .ewh-article-card__meta {
    justify-content: flex-start;
}

.ewh-article-card__author {
    font-weight: 600;
}

.ewh-article-card__sep {
    color: var(--ewh-border);
}

.ewh-article-card__date,
.ewh-article-card__read-time {
    color: var(--ewh-text-muted);
}

/* ─── Single Article: Two-Column Grid Layout ─────────────────────────────── */

.ewh-article-detail__grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    margin-bottom: 64px;
}

/* Left Column: Article Content */
.ewh-article-detail__content {
    min-width: 0; /* Prevent grid blowout */
}

/* Right Column: Sticky Sidebar Ads */
.ewh-article-detail__sidebar {
    position: sticky;
    top: 32px;
    align-self: start;
}

.ewh-article-sidebar-ads {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Ad Slot Styling with min-height to prevent CLS */
.ewh-ad-slot {
    min-height: 250px;
    background: var(--ewh-bg);
    border: 1px solid var(--ewh-border);
    border-radius: var(--ewh-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ewh-ad-placeholder {
    text-align: center;
    color: var(--ewh-text-muted);
    padding: 16px;
}

.ewh-ad-placeholder p {
    margin: 4px 0;
}

/* ─── Single Article: Header ─────────────────────────────────────────────── */

.ewh-article-detail__header {
    margin-bottom: 32px;
}

.ewh-article-detail__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ewh-article-detail__category-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--ewh-primary);
    color: white;
    font-size: 0.813rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ewh-article-detail__category-badge:hover {
    background: var(--ewh-primary-dark);
}

.ewh-article-detail__title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--ewh-text);
    line-height: 1.2;
    margin-bottom: 16px;
}

.ewh-article-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.938rem;
    color: var(--ewh-text-muted);
}

.ewh-article-detail__author {
    font-weight: 600;
    color: var(--ewh-text);
}

.ewh-article-detail__sep {
    color: var(--ewh-border);
}

.ewh-article-detail__updated {
    font-style: italic;
}

/* ─── Single Article: Featured Image ─────────────────────────────────────── */

.ewh-article-detail__featured-image {
    float: right;
    margin: 0 0 24px 32px;
    border-radius: var(--ewh-radius);
    overflow: hidden;
    width: 300px;
}

.ewh-article-detail__featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ─── Single Article: Body Content ───────────────────────────────────────── */

.ewh-article-detail__body {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--ewh-text);
}

.ewh-article-detail__body h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 48px 0 24px 0;
    color: var(--ewh-text);
}

.ewh-article-detail__body h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 36px 0 18px 0;
    color: var(--ewh-text);
}

.ewh-article-detail__body p {
    margin-bottom: 24px;
}

.ewh-article-detail__body ul,
.ewh-article-detail__body ol {
    margin-bottom: 24px;
    padding-left: 28px;
}

.ewh-article-detail__body li {
    margin-bottom: 12px;
}

.ewh-article-detail__body a {
    color: var(--ewh-primary);
    text-decoration: underline;
}

.ewh-article-detail__body a:hover {
    color: var(--ewh-primary-dark);
}

.ewh-article-detail__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ewh-radius);
    margin: 32px 0;
}

.ewh-article-detail__body blockquote {
    border-left: 4px solid var(--ewh-primary);
    padding-left: 24px;
    margin: 32px 0;
    font-style: italic;
    color: var(--ewh-text-muted);
}

/* ─── Related Articles Section ───────────────────────────────────────────── */

.ewh-related-articles {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 2px solid var(--ewh-border);
}

.ewh-related-articles__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ewh-text);
    margin-bottom: 32px;
    text-align: center;
}

.ewh-related-articles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 1024px) {
    .ewh-related-articles__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .ewh-related-articles__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ─── Related Categories Section ─────────────────────────────────────────── */

.ewh-related-categories {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 2px solid var(--ewh-border);
}

.ewh-related-categories__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ewh-text);
    margin-bottom: 32px;
    text-align: center;
}

.ewh-related-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ewh-related-categories__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: #fff;
    border: 2px solid var(--ewh-border);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ewh-related-categories__card:hover {
    border-color: var(--ewh-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ewh-related-categories__name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ewh-text);
    margin-bottom: 8px;
}

.ewh-related-categories__count {
    font-size: 0.875rem;
    color: var(--ewh-text-muted);
}

@media (max-width: 1024px) {
    .ewh-related-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ewh-related-categories__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ewh-related-categories__title {
        font-size: 1.5rem;
    }
}

/* ─── No Results Message ─────────────────────────────────────────────────── */

.ewh-no-results {
    text-align: center;
    padding: 64px 20px;
    color: var(--ewh-text-muted);
    font-size: 1.125rem;
}

/* ─── Responsive Breakpoints: Tablet (768px) ─────────────────────────────── */

@media (max-width: 768px) {
    /* Single Article: Stack sidebar below content */
    .ewh-article-detail__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ewh-article-detail__sidebar {
        position: static;
    }

    .ewh-article-sidebar-ads {
        flex-direction: row;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 16px;
    }

    .ewh-ad-slot {
        min-width: 250px;
        flex-shrink: 0;
    }

    .ewh-article-detail__title {
        font-size: 2rem;
    }

    .ewh-article-detail__body {
        font-size: 1rem;
    }

    .ewh-article-detail__body h2 {
        font-size: 1.5rem;
    }

    .ewh-article-detail__body h3 {
        font-size: 1.25rem;
    }
}

/* ─── Responsive Breakpoints: Mobile (480px) ─────────────────────────────── */

@media (max-width: 480px) {
    /* Hide sidebar ads completely on mobile */
    .ewh-article-detail__sidebar {
        display: none;
    }

    .ewh-article-detail__featured-image {
        float: none;
        width: 100%;
        margin: 0 0 24px 0;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .ewh-article-detail__title {
        font-size: 1.75rem;
    }

    .ewh-article-card:not(.ewh-article-card--has-image) {
        padding: 24px 20px;
    }

    .ewh-article-card__title {
        font-size: 1.125rem;
        -webkit-line-clamp: 5;
    }

    .ewh-article-card__meta {
        font-size: 0.813rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* GOOGLE ADSENSE AD CONTAINERS                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

/**
 * Ad Container Styles
 *
 * Provides clean, responsive styling for Google AdSense ad units
 * Includes placeholder mode for development/testing before AdSense is configured
 */

/* Standard ad container */
.ewh-ad-container {
    width: 100%;
    margin: 32px 0;
    display: flex;
    justify-content: center;
    min-height: 90px; /* Prevent layout shift */
}

.ewh-ad-container ins.adsbygoogle {
    display: block;
    width: 100%;
}

/* Ad placeholder (shown when AdSense not configured) */
.ewh-ad-placeholder {
    width: 100%;
    margin: 32px 0;
    padding: 48px 24px;
    background: linear-gradient(135deg, var(--ewh-bg-light) 0%, var(--ewh-bg) 100%);
    border: 2px dashed var(--ewh-border);
    border-radius: var(--ewh-radius);
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ewh-ad-placeholder__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ewh-text-muted);
    margin-bottom: 12px;
    font-weight: 600;
}

.ewh-ad-placeholder__text {
    font-size: 0.875rem;
    color: var(--ewh-text-muted);
    line-height: 1.5;
}

/* Ad in card grid (city pages) */
.ewh-card-grid__ad {
    /* Full-width ad banner spanning all 3 columns */
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    margin: 16px 0;
}

.ewh-card-grid__ad .ewh-ad-container,
.ewh-card-grid__ad .ewh-ad-placeholder {
    margin: 0;
    width: 100%;
}

/* Sidebar ad card */
.ewh-sidebar-card--ad {
    padding: 0;
    overflow: hidden;
    min-height: 250px;
}

.ewh-sidebar-card--ad .ewh-ad-container,
.ewh-sidebar-card--ad .ewh-ad-placeholder {
    margin: 0;
    min-height: 250px;
}

.ewh-sidebar-card--ad .ewh-ad-placeholder {
    border: none;
    border-radius: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ewh-ad-container,
    .ewh-ad-placeholder {
        margin: 24px 0;
    }

    .ewh-ad-placeholder {
        padding: 32px 16px;
        min-height: 150px;
    }

    /* Hide sidebar ads on mobile */
    .ewh-sidebar-card--ad {
        display: none;
    }

    /* Reduce frequency of inline ads on mobile */
    .ewh-card-grid__ad:nth-of-type(n+2) {
        display: none;
    }
}

@media (max-width: 480px) {
    .ewh-ad-container,
    .ewh-ad-placeholder {
        margin: 16px 0;
    }

    .ewh-ad-placeholder {
        padding: 24px 12px;
        min-height: 120px;
    }

    .ewh-ad-placeholder__label {
        font-size: 0.688rem;
    }

    .ewh-ad-placeholder__text {
        font-size: 0.813rem;
    }
}

/* ==================================
   Phone Modal Styles
   ================================== */

.ewh-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.ewh-modal--visible {
    display: flex;
}

.ewh-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.ewh-modal__content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 32px;
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.ewh-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.ewh-modal__close:hover {
    color: #000;
}

.ewh-modal__company-name {
    margin: 0 0 16px;
    font-size: 1.5rem;
    color: var(--ewh-text);
    line-height: 1.3;
    text-align: center;
}

.ewh-modal__call-link {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.ewh-modal__divider {
    text-align: center;
    font-size: 0.875rem;
    color: #999;
    margin: 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
}

.ewh-modal__divider::before,
.ewh-modal__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #ddd;
}

.ewh-modal__divider::before {
    left: 0;
}

.ewh-modal__divider::after {
    right: 0;
}

#ewh-callback-form-placeholder {
    padding: 0;
    background: transparent;
}

/* WPForms in modal - minimal overrides */
#ewh-callback-form-placeholder .wpforms-container,
#ewh-callback-form-placeholder .wpforms-form {
    padding: 0 !important;
    margin: 0 !important;
}

/* Force WPForms field visibility - override any dark backgrounds */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field textarea,
.wpforms-field select {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    border: 1px solid #cbd5e0 !important;
}

.wpforms-field-label,
.wpforms-field-label label {
    color: #2c3e50 !important;
    background: transparent !important;
}

/* Fix radio buttons and checkboxes */
.wpforms-field input[type="radio"],
.wpforms-field input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #cbd5e0 !important;
    background-color: #ffffff !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

.wpforms-field input[type="radio"]:checked,
.wpforms-field input[type="checkbox"]:checked {
    background-color: #1a5276 !important;
    border-color: #1a5276 !important;
}

/* Hide ghost field #7 (Message to Urgency) */
#wpforms-1393-field_7-container {
    display: none !important;
}

/* Prevent body scroll when modal is open */
body.ewh-modal-open {
    overflow: hidden;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .ewh-modal__content {
        padding: 24px;
        width: 95%;
    }

    .ewh-modal__phone-number {
        font-size: 1.5rem;
    }

    .ewh-modal__company-name {
        font-size: 1.25rem;
    }
}

/* ==================================
   Premium Listing Badge
   ================================== */

.ewh-card__premium-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.688rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Detail page variant (larger) */
.ewh-company-detail__premium-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #000;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 12px;
    vertical-align: middle;
    box-shadow: 0 3px 6px rgba(255, 215, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
    .ewh-card__premium-badge {
        font-size: 0.625rem;
        padding: 3px 8px;
        margin-left: 6px;
    }

    .ewh-company-detail__premium-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
        margin-left: 8px;
    }
}

/* ─── Search Results Page ───────────────────────────────────────────────── */

.ewh-search-results-header {
    text-align: center;
    padding: 60px 0 40px;
}

.ewh-search-results-header__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ewh-dark);
    margin: 0 0 16px;
    line-height: 1.2;
}

.ewh-search-results-header__subtitle {
    font-size: 1.125rem;
    color: var(--ewh-gray);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.ewh-search-again {
    max-width: 560px;
    margin: 0 auto 50px;
    padding: 0 20px;
}

.ewh-search-form--inline {
    max-width: 100%;
}

.ewh-search-results {
    margin: 0 0 60px;
}

.ewh-search-results__heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ewh-dark);
    margin: 0 0 12px;
    text-align: center;
}

.ewh-search-results__intro {
    font-size: 1.125rem;
    color: var(--ewh-gray);
    text-align: center;
    margin: 0 0 40px;
}

.ewh-search-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin: 0 0 40px;
}

.ewh-search-result-card {
    background: #fff;
    border: 2px solid #e1e8ed;
    border-radius: var(--ewh-radius);
    padding: 28px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: block;
}

.ewh-search-result-card:hover {
    border-color: var(--ewh-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.ewh-search-result-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.ewh-search-result-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ewh-dark);
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.ewh-search-result-card__badge {
    background: var(--ewh-accent);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.ewh-search-result-card__description {
    color: var(--ewh-gray);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.ewh-search-result-card__cta {
    color: var(--ewh-accent);
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ewh-search-result-card:hover .ewh-search-result-card__cta {
    text-decoration: underline;
}

.ewh-search-error-box {
    background: #fee;
    border: 1px solid #e74c3c;
    border-radius: var(--ewh-radius);
    padding: 20px;
    text-align: center;
    color: #c0392b;
    margin: 40px 0;
}

.ewh-search-error-box p {
    margin: 0;
    font-size: 1.125rem;
}

.ewh-search-loading {
    text-align: center;
    padding: 60px 20px;
}

.ewh-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--ewh-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .ewh-search-results-header__title {
        font-size: 2rem;
    }

    .ewh-search-results-header__subtitle {
        font-size: 1rem;
    }

    .ewh-search-results__heading {
        font-size: 1.5rem;
    }

    .ewh-search-results__intro {
        font-size: 1rem;
    }

    .ewh-search-results__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ewh-search-result-card {
        padding: 20px;
    }

    .ewh-search-result-card__title {
        font-size: 1.25rem;
    }

    .ewh-search-result-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ewh-search-result-card__badge {
        align-self: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIXES - Added 2026-02-16
   Fixes for search results display, menu issues, and scrolling freeze
   ═══════════════════════════════════════════════════════════════════════════ */


/* Mobile-Specific Fixes - Minimal, non-aggressive approach */
@media (max-width: 768px) {
    /* Search Form Mobile Optimizations */
    .ewh-search-form__input {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Modal Mobile Fix */
    .ewh-modal__content {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure search error displays properly */
    .ewh-search-error {
        display: block;
        width: 100%;
        margin: 12px 0;
        padding: 12px 16px;
        background: #fee;
        border: 1px solid #fcc;
        border-radius: 4px;
        color: #c00;
        font-size: 14px;
        text-align: center;
    }

    /* Fix Astra mobile menu - ensure text is visible */
    .ast-mobile-menu-buttons,
    .ast-mobile-header-wrap,
    .main-header-bar-navigation,
    .ast-mobile-menu-buttons .menu-item a,
    .main-header-menu .menu-item a,
    .ast-header-break-point .main-header-menu .menu-item a {
        color: #2c3e50 !important;
        background-color: #ffffff !important;
    }

    .ast-mobile-menu-buttons .menu-item a:hover,
    .main-header-menu .menu-item a:hover {
        color: #1a5276 !important;
        background-color: #f8f9fa !important;
    }

    /* Fix contact form header/description text on mobile */
    .wpforms-container .wpforms-head-container,
    .wpforms-container .wpforms-title,
    .wpforms-container .wpforms-description,
    .wpforms-form .wpforms-head-container,
    .wpforms-form .wpforms-title,
    .wpforms-form .wpforms-description {
        color: #2c3e50 !important;
        background: transparent !important;
    }
}

/* ── Homepage mobile: header blends into blue hero ─────────────────────── */
/* Makes the white Astra header bar transparent/blue on the homepage so it   */
/* merges seamlessly with the hero gradient instead of appearing as a        */
/* separate white band at the top of the screen.                             */
@media (max-width: 768px) {
    /* Header bar and mobile wrap → match hero gradient start color */
    .home #masthead,
    .home .main-header-bar,
    .home .ast-mobile-header-wrap {
        background-color: #1a5276 !important;
    }

    /* Hamburger icon button → white on blue background */
    .home .ast-mobile-header-wrap button,
    .home .ast-mobile-header-wrap .menu-toggle,
    .home #masthead .ast-button-wrap button {
        color: #ffffff !important;
    }

    /* Hamburger icon lines (span-based) → white */
    .home .ast-mobile-header-wrap button span,
    .home .ast-mobile-header-wrap .menu-toggle span {
        background: #ffffff !important;
    }

    /* Site name / logo text → white on blue */
    .home .site-header .site-title a,
    .home .site-header .site-branding a {
        color: #ffffff !important;
    }

    /* Navigation dropdown (when menu opens) → keep white for readability */
    .home .main-header-bar-navigation {
        background-color: #ffffff !important;
    }

    .home .main-header-bar-navigation .menu-item a,
    .home .ast-header-break-point .main-header-menu .menu-item a {
        background-color: #ffffff !important;
        color: #2c3e50 !important;
    }
}

/* ── "FREE DOWNLOAD" nav menu item ───────────────────────────────────────── */
.menu-free-download > a,
.main-header-menu .menu-free-download > a,
.ast-mobile-menu-buttons .menu-free-download > a {
    color: var(--ewh-accent) !important;
    font-weight: 700 !important;
}

.menu-free-download > a:hover,
.main-header-menu .menu-free-download > a:hover,
.ast-mobile-menu-buttons .menu-free-download > a:hover {
    color: var(--ewh-accent-dark) !important;
}

/* Homepage mobile: header is #1a5276 — red on dark blue fails (2.18:1). Use white. */
@media (max-width: 768px) {
    .home .ast-mobile-menu-buttons .menu-free-download > a {
        color: #ffffff !important; /* WCAG AA: white on #1a5276 = 10.5:1 */
    }
}

/* ── City & County Stats Dashboard ───────────────────────────────────────── */

.ewh-city-stats {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.ewh-city-stats__heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1rem 0;
    padding: 0;
    border: none;
}

/* ── Stat cards grid ── */

.ewh-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .ewh-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ewh-stat-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 0.875rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease;
}

.ewh-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ewh-stat-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.ewh-stat-card__icon svg {
    width: 18px;
    height: 18px;
}

.ewh-stat-card__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.ewh-stat-card__label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.3;
}

.ewh-stat-card__sub {
    display: block;
    font-size: 0.72rem;
    color: #64748b; /* darkened from #94a3b8 — WCAG AA (5.3:1 on white); #94a3b8 was 2.56:1 */
    margin-top: 0.15rem;
}

/* ── Per-stat accent colors ── */

.ewh-stat-card--population .ewh-stat-card__icon {
    background: #eff6ff;
    color: #3b82f6;
}

.ewh-stat-card--homes .ewh-stat-card__icon {
    background: #fffbeb;
    color: #f59e0b;
}

.ewh-stat-card--age .ewh-stat-card__icon {
    background: #f5f3ff;
    color: #8b5cf6;
}

.ewh-stat-card--climate .ewh-stat-card__icon {
    background: #f0f9ff;
    color: #0ea5e9;
}

.ewh-stat-card--tankless .ewh-stat-card__icon {
    background: #eef2ff;
    color: #6366f1;
}

.ewh-stat-card--replacement .ewh-stat-card__icon {
    background: #fff1f2;
    color: #f43f5e;
}

/* ── Water hardness enhanced card ── */

.ewh-stat-card--hardness-enhanced {
    grid-column: span 2;
    align-items: flex-start;
    text-align: left;
    padding: 1rem;
}

@media (max-width: 768px) {
    .ewh-stat-card--hardness-enhanced {
        grid-column: span 2;
    }
}

.ewh-stat-card--hardness .ewh-stat-card__icon {
    background: #f0fdf4;
    color: #22c55e;
}

.ewh-stat-card--hardness.ewh-hardness--moderate .ewh-stat-card__icon {
    background: #fefce8;
    color: #eab308;
}

.ewh-stat-card--hardness.ewh-hardness--hard .ewh-stat-card__icon {
    background: #fff7ed;
    color: #f97316;
}

.ewh-stat-card--hardness.ewh-hardness--very-hard .ewh-stat-card__icon {
    background: #fff1f2;
    color: #ef4444;
}

.ewh-stat-card--hardness.ewh-hardness--soft .ewh-stat-card__value { color: #16a34a; }
.ewh-stat-card--hardness.ewh-hardness--moderate .ewh-stat-card__value { color: #ca8a04; }
.ewh-stat-card--hardness.ewh-hardness--hard .ewh-stat-card__value { color: #ea580c; }
.ewh-stat-card--hardness.ewh-hardness--very-hard .ewh-stat-card__value { color: #dc2626; }

/* ── Hardness meter ── */

.ewh-hardness-meter {
    width: 100%;
    margin: 0.75rem 0 0.5rem;
}

.ewh-hardness-meter__track {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    gap: 2px;
}

.ewh-hardness-meter__segment {
    flex: 1;
    border-radius: 5px;
}

.ewh-hardness-meter__segment--soft     { background: #22c55e; }
.ewh-hardness-meter__segment--moderate { background: #eab308; }
.ewh-hardness-meter__segment--hard     { background: #f97316; }
.ewh-hardness-meter__segment--very-hard { background: #ef4444; }

.ewh-hardness-meter__indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 3px solid #1e293b;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    z-index: 1;
}

.ewh-hardness-meter__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #64748b; /* darkened from #94a3b8 — WCAG AA (5.3:1 on white); #94a3b8 was 2.56:1 */
    margin-top: 0.35rem;
}

.ewh-stat-card__microcopy {
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* ── Utilities row ── */

.ewh-stats-utilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ewh-utility-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
}

.ewh-utility-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ewh-utility-badge--gas     { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ewh-utility-badge--electric { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }

/* ── County summary row ── */

.ewh-stats-county-summary {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.ewh-stats-county-summary span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Fun fact callout ── */

.ewh-stats-funfact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-left: 4px solid var(--ewh-accent, #e85d26);
    border-radius: 0 8px 8px 0;
    margin-top: 0.5rem;
}

.ewh-stats-funfact__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ewh-stats-funfact p {
    margin: 0;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.6;
}