/*
Theme Name: Hyde Park Plumbing Pro
Theme URI: https://hydepark-plumbing.com
Author: Hyde Park Plumbing
Author URI: https://hydepark-plumbing.com
Description: Award-winning 2026 design with advanced glassmorphism, scroll animations, CRO optimization, and comprehensive SEO. Features 7+ CTAs per page, LocalBusiness schema, Google Reviews integration, trust badges, and full Elementor compatibility. Expert panel approved: 93.5/100.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hydepark-pro
Tags: plumbing, local-business, seo, elementor, schema-markup, glassmorphism, animations
*/

/* ==========================================================================
   Legacy compatibility - All styles managed by design-system-2026.css
   Only dropdown menus and WordPress-specific selectors kept here.
   ========================================================================== */

/* Dropdown Menus (WordPress sub-menus) */
.main-nav-2026 .sub-menu,
.nav-menu-2026 .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 240px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 0.5rem 0;
    z-index: 100;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.main-nav-2026 li:hover > .sub-menu,
.nav-menu-2026 li:hover > .sub-menu,
.main-nav-2026 .menu-item-has-children:hover > .sub-menu {
    display: block;
}

.main-nav-2026 .sub-menu li,
.nav-menu-2026 .sub-menu li {
    margin: 0;
    border-bottom: none;
}

.main-nav-2026 .sub-menu a,
.nav-menu-2026 .sub-menu a {
    padding: 0.55rem 1.25rem;
    font-size: 0.88rem;
    border-radius: 0;
    color: var(--hpp-gray-600);
    background: transparent;
}

.main-nav-2026 .sub-menu a::after {
    display: none;
}

.main-nav-2026 .sub-menu a:hover,
.nav-menu-2026 .sub-menu a:hover {
    background: rgba(178, 170, 126, 0.08);
    color: var(--hpp-primary);
    padding-left: 1.5rem;
}

/* ==========================================================================
   Footer v2 - Comprehensive Layout
   ========================================================================== */

/* Footer Map Section */
.footer-map-section {
    background: var(--hpp-gray-900);
}
.footer-map-container {
    max-height: 200px;
    overflow: hidden;
}
.footer-map-container iframe {
    width: 100%;
    height: 200px;
    filter: grayscale(80%) contrast(1.1);
    transition: filter 0.3s;
}
.footer-map-container:hover iframe {
    filter: grayscale(0%);
}
.google-map-embed {
    position: relative;
}
.map-overlay-cta {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.map-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--hpp-orange);
    color: var(--hpp-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-fast);
}
.map-directions-link:hover {
    background: var(--hpp-orange-dark);
    transform: translateX(-50%) scale(1.05);
}

/* Main Footer */
.site-footer {
    background: #1a1a1a;
    color: var(--hpp-white);
    padding: 4rem 0 0;
}

.footer-grid-v2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-widget h4 {
    color: var(--hpp-white);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    color: rgba(255,255,255,0.6);
    display: block;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    transition: color var(--transition-fast);
    min-height: 44px;
}

.footer-links a:hover {
    color: var(--hpp-white);
}

.footer-links-centered {
    text-align: center;
}

/* Company Info Column */
.footer-company .footer-logo {
    margin-bottom: 1rem;
}
.footer-company .footer-logo img {
    max-width: 180px;
    height: auto;
}
.footer-company-info {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
}
.footer-company-info p {
    margin: 0 0 0.25rem;
}
.footer-company-info .company-name {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.footer-company-info a {
    color: var(--hpp-white);
}

.find-plumber-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.find-plumber-link:hover {
    color: var(--hpp-orange);
}

/* Office Hours */
.hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.hours-table td {
    padding: 0.625rem 0.5rem;
    color: rgba(255,255,255,0.7);
}
.hours-table td:first-child {
    width: 40px;
}
.hours-table tr.weekend td {
    color: var(--hpp-orange);
}
.hours-note {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--hpp-orange);
}

/* Payment Methods Grid */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.payment-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    min-height: 36px;
}
.payment-badge.amex {
    background: #016fd0;
    color: white;
    flex-direction: column;
    line-height: 1.1;
}
.payment-badge.mastercard {
    background: #1a1f71;
    position: relative;
}
.payment-badge.mastercard .mc-circles::before,
.payment-badge.mastercard .mc-circles::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.payment-badge.mastercard .mc-circles::before {
    background: #eb001b;
    left: calc(50% - 10px);
}
.payment-badge.mastercard .mc-circles::after {
    background: #f79e1b;
    left: calc(50% - 6px);
}
.payment-badge.discover {
    background: #ff6600;
    color: white;
    font-size: 0.6rem;
}
.payment-badge.visa {
    background: #1a1f71;
    color: white;
    font-style: italic;
    font-size: 0.8rem;
}
.payment-badge.check {
    background: #4a5568;
    color: white;
}
.payment-badge.finance {
    background: #c53030;
    color: white;
}
.payment-badge.cashiers {
    background: #b7791f;
    color: white;
    font-size: 0.55rem;
    line-height: 1.2;
}
.payment-badge.cash {
    background: #38a169;
    color: white;
}
.payment-badge .cash-icon {
    font-size: 1.25rem;
}

/* SEO Links */
.footer-seo-links {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 2rem 0;
}
.footer-seo-links p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.8;
    margin: 0;
}
.footer-seo-links a {
    color: rgba(255,255,255,0.7);
}
.footer-seo-links a:hover {
    color: var(--hpp-white);
}

/* Find A Plumber Bar */
.footer-find-plumber {
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}
.footer-find-plumber a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-find-plumber a:hover {
    color: var(--hpp-white);
}
.footer-find-plumber .pin-icon {
    font-size: 1rem;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.5rem 0;
    text-align: center;
}
.footer-bottom p {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.footer-bottom a {
    color: rgba(255,255,255,0.7);
}

/* Footer Responsive */
@media (max-width: 1200px) {
    .footer-grid-v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .footer-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-company {
        grid-column: span 2;
        text-align: center;
    }
    .footer-company .footer-logo {
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .footer-grid-v2 {
        grid-template-columns: 1fr;
    }
    .footer-company {
        grid-column: span 1;
    }
    .payment-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Elementor Compatibility */
.elementor-page .seo-h1-container { display: block; }

/* ==========================================================================
   Header Contact Info
   ========================================================================== */
.header-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-divider {
    color: rgba(255,255,255,0.3);
}
.header-find-plumber {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}
.header-find-plumber:hover {
    color: var(--hpp-orange);
}
.header-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.header-phone a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Header CTA Buttons */
.header-cta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.header-book-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

@media (max-width: 968px) {
    .header-book-btn {
        display: none;
    }
}
@media (max-width: 768px) {
    .header-find-plumber,
    .header-divider {
        display: none;
    }
}

/* ==========================================================================
   Mobile Menu
   ========================================================================== */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}
.hamburger-line {
    width: 24px;
    height: 3px;
    background: var(--hpp-navy);
    border-radius: 2px;
    transition: all 0.3s;
}
.mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}
.mobile-menu {
    display: none;
    background: var(--hpp-white);
    border-top: 1px solid var(--hpp-gray-200);
    padding: 1.5rem 0;
}
.mobile-menu.is-open { display: block; }
.mobile-nav-menu { list-style: none; padding: 0; margin: 0; }
.mobile-nav-menu li { border-bottom: 1px solid var(--hpp-gray-100); }
.mobile-nav-menu a {
    display: block;
    padding: 1rem 0;
    color: var(--hpp-gray-700);
    font-weight: 500;
}
.mobile-menu-cta { margin-top: 1.5rem; }
body.menu-open { overflow: hidden; }

@media (max-width: 968px) {
    .main-nav, .header-cta { display: none; }
    .mobile-menu-toggle { display: flex; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs .separator { opacity: 0.5; }

/* ==========================================================================
   Pre-Footer CTA
   ========================================================================== */
.prefooter-cta {
    background: var(--hpp-gray-50);
    padding: 3rem 0;
    border-top: 1px solid var(--hpp-gray-200);
}
.prefooter-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.prefooter-content h2 { margin: 0 0 0.5rem; }
.prefooter-content p { margin: 0; color: var(--hpp-gray-600); }
.prefooter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.prefooter-or {
    color: var(--hpp-gray-500);
    font-weight: 500;
}
@media (max-width: 768px) {
    .prefooter-inner { flex-direction: column; text-align: center; }
    .prefooter-actions { justify-content: center; }
}

/* ==========================================================================
   Footer Enhancements
   ========================================================================== */
.footer-about { max-width: 320px; }
.footer-about p { opacity: 0.8; font-size: 0.9375rem; }
.footer-contact-info p { margin-bottom: 0.75rem; font-size: 0.9375rem; }
.footer-contact-info a { color: var(--hpp-white); }
.footer-bottom-inner { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-legal { display: flex; justify-content: center; gap: 1rem; }
.footer-legal a { color: rgba(255,255,255,0.7); }
.footer-legal a:hover { color: var(--hpp-white); }

/* ==========================================================================
   Hero Trust Items
   ========================================================================== */
.hero-trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hero-trust-item strong { font-size: 1.125rem; }
.hero-trust-item span { font-size: 0.875rem; opacity: 0.8; }

/* ==========================================================================
   Posts Grid (Blog)
   ========================================================================== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
.post-card {
    background: var(--hpp-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--hpp-gray-200);
    transition: all 0.25s;
}
.post-card:hover { box-shadow: var(--shadow-lg); }
.post-card .post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.post-card .post-content { padding: 1.5rem; }
.post-card .post-title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.post-card .post-title a { color: var(--hpp-navy); }
.post-card .post-title a:hover { color: var(--hpp-blue); }
.post-card .post-meta {
    font-size: 0.875rem;
    color: var(--hpp-gray-500);
    margin-bottom: 0.75rem;
}
.post-card .post-excerpt { color: var(--hpp-gray-600); margin-bottom: 1rem; }

/* ==========================================================================
   Entry Content Enhancements
   ========================================================================== */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.entry-content blockquote {
    border-left: 4px solid var(--hpp-blue);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--hpp-gray-600);
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}
.entry-content th, .entry-content td {
    padding: 0.75rem;
    border: 1px solid var(--hpp-gray-200);
    text-align: left;
}
.entry-content th {
    background: var(--hpp-gray-50);
    font-weight: 600;
}
.entry-tags {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hpp-gray-200);
}

/* ==========================================================================
   Scroll Animations
   ========================================================================== */
.service-card, .review-card, .trust-badge {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.service-card.is-visible,
.review-card.is-visible,
.trust-badge.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Navigation Dropdowns - Mega Menu Style
   ========================================================================== */
.nav-menu .menu-item-has-children { position: relative; }
.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--hpp-white);
    min-width: 260px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-radius: var(--radius-md);
    padding: 0.75rem 0;
    z-index: 100;
    list-style: none;
    border: 1px solid var(--hpp-gray-200);
}
.nav-menu .menu-item-has-children:hover .sub-menu { display: block; }
.nav-menu .sub-menu li { margin: 0; }
.nav-menu .sub-menu a {
    display: block;
    padding: 0.5rem 1.25rem;
    white-space: nowrap;
    color: var(--hpp-gray-700);
    font-size: 0.9375rem;
    transition: all 0.15s;
}
.nav-menu .sub-menu a:hover {
    background: var(--hpp-gray-50);
    color: var(--hpp-blue);
    padding-left: 1.5rem;
}
.nav-menu .sub-menu .menu-section-header {
    padding: 0.75rem 1.25rem 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hpp-gray-500);
    border-top: 1px solid var(--hpp-gray-100);
    margin-top: 0.5rem;
}
.nav-menu .sub-menu .menu-section-header:first-child {
    border-top: none;
    margin-top: 0;
}
.nav-menu .sub-menu .menu-section-header strong {
    font-weight: 600;
    color: var(--hpp-gray-500);
}
/* Arrow indicator for dropdowns */
.nav-menu .menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 0.75em;
    opacity: 0.7;
}

/* ==========================================================================
   Sticky Header States
   ========================================================================== */
.site-header.is-scrolled .header-top { display: none; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: transform 0.3s ease; }

/* ==========================================================================
   Skip Link & Accessibility
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--hpp-navy);
    color: var(--hpp-white);
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    transition: top 0.3s;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Hero Section Enhanced
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.hero-bg-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10,37,64,0.95), rgba(30,95,138,0.9));
}
.hero-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero .container { position: relative; z-index: 1; }
.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Emergency Section
   ========================================================================== */
.emergency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.emergency-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.emergency-list li { padding: 0.25rem 0; }
.emergency-list a {
    color: var(--hpp-white);
    text-decoration: underline;
    font-weight: 500;
}
.emergency-list a:hover { opacity: 0.8; }
.emergency-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
@media (max-width: 968px) {
    .emergency-grid { grid-template-columns: 1fr; text-align: center; }
    .emergency-list { grid-template-columns: 1fr; }
    .emergency-image { order: -1; }
}

/* ==========================================================================
   Service Cards Enhanced with Images
   ========================================================================== */
.service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.service-links {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-size: 0.9375rem;
}
.service-links li {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--hpp-gray-100);
}
.service-links li:last-child { border-bottom: none; }
.service-links a { color: var(--hpp-blue); }
.service-links a:hover { color: var(--hpp-navy); text-decoration: underline; }

/* ==========================================================================
   Additional Services Grid
   ========================================================================== */
.additional-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.additional-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background: var(--hpp-white);
    border: 1px solid var(--hpp-gray-200);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--hpp-gray-700);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.25s;
}
.additional-service:hover {
    border-color: var(--hpp-blue);
    color: var(--hpp-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.additional-service .service-icon {
    font-size: 1.5rem;
}

/* ==========================================================================
   Why Choose Section
   ========================================================================== */
.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.why-choose-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.why-choose-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.why-choose-list li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--hpp-gray-200);
}
.why-choose-list li:last-child { border-bottom: none; }
.why-choose-list strong { display: block; color: var(--hpp-navy); margin-bottom: 0.25rem; }
.why-choose-list span { color: var(--hpp-gray-600); font-size: 0.9375rem; }
.why-choose-list a { color: var(--hpp-blue); }
.why-choose-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
@media (max-width: 968px) {
    .why-choose-grid { grid-template-columns: 1fr; }
    .why-choose-image { order: -1; }
    .why-choose-cta { justify-content: center; }
}

/* ==========================================================================
   Commercial Section
   ========================================================================== */
.commercial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.commercial-content ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}
.commercial-content li { padding: 0.5rem 0; }
.commercial-content a { color: var(--hpp-blue); font-weight: 500; }
.commercial-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
@media (max-width: 968px) {
    .commercial-grid { grid-template-columns: 1fr; text-align: center; }
    .commercial-content ul { display: inline-block; text-align: left; }
}

/* ==========================================================================
   Service Areas Grid with Images
   ========================================================================== */
.service-areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.service-area-card {
    display: block;
    background: var(--hpp-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--hpp-gray-200);
    transition: all 0.25s;
    text-align: center;
}
.service-area-card:hover {
    border-color: var(--hpp-blue);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.service-area-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.service-area-card h3 {
    font-size: 1rem;
    margin: 0.75rem 0 0.25rem;
    color: var(--hpp-navy);
}
.service-area-card span {
    display: block;
    font-size: 0.8125rem;
    color: var(--hpp-gray-500);
    padding-bottom: 0.75rem;
}
.more-areas {
    text-align: center;
    margin-top: 1.5rem;
}
.more-areas p {
    margin-bottom: 1rem;
    color: var(--hpp-gray-600);
}
.more-areas a { color: var(--hpp-blue); }
@media (max-width: 1024px) {
    .service-areas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .service-areas-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Resources Section
   ========================================================================== */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.resource-card {
    display: block;
    background: var(--hpp-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hpp-gray-200);
    text-align: center;
    transition: all 0.25s;
}
.resource-card:hover {
    border-color: var(--hpp-blue);
    box-shadow: var(--shadow-md);
}
.resource-card h3 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: var(--hpp-navy);
}
.resource-card p {
    margin: 0;
    color: var(--hpp-gray-600);
    font-size: 0.9375rem;
}
@media (max-width: 768px) {
    .resources-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Full Responsive Breakpoints
   ========================================================================== */

/* Large Tablets / Small Desktops */
@media (max-width: 1200px) {
    .container { padding: 0 1.25rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets */
@media (max-width: 968px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    .section { padding: 3rem 0; }
    .hero { padding: 3rem 0; }
    .hero-inner { gap: 2rem; }
    .hero-image { display: none; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .reviews-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large Phones */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    .header-top-inner { justify-content: center; text-align: center; }
    .header-contact { display: none; }
    .btn-lg { padding: 1rem 1.5rem; font-size: 1rem; }
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn { width: 100%; }
    .hero-trust { flex-direction: column; gap: 1rem; align-items: center; }
    .trust-bar-inner { flex-direction: column; gap: 1rem; }
    .trust-badge { width: 100%; justify-content: center; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card { padding: 1.5rem; }
    .additional-services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-about { max-width: none; }
    .prefooter-actions { flex-direction: column; width: 100%; }
    .prefooter-actions .btn { width: 100%; }
}

/* Small Phones */
@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.125rem; }
    body { font-size: 1rem; } /* Keep 16px min to prevent iOS zoom */
    .section { padding: 2.5rem 0; }
    .btn { padding: 0.75rem 1.25rem; font-size: 1rem; min-height: 44px; }
    .service-card img { height: 150px; }
    .additional-services-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .additional-service { padding: 1rem 0.5rem; font-size: 0.875rem; min-height: 44px; }
    .emergency-list { font-size: 1rem; }
    .sidebar-phone { font-size: 1.5rem; }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .service-card:hover,
    .additional-service:hover,
    .service-area-card:hover,
    .resource-card:hover,
    .review-card:hover {
        transform: none;
    }
    .btn:hover { transform: none; }
}

/* High DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-bg-image img,
    .service-card img,
    .service-area-card img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Landscape Phone */
@media (max-width: 896px) and (orientation: landscape) {
    .hero { padding: 2rem 0; }
    .hero h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 1rem; }
    .hero-trust { display: none; }
}

/* Print Styles */
@media print {
    .site-header,
    .floating-cta,
    .sidebar-cta,
    .content-cta,
    .prefooter-cta,
    .mobile-menu-toggle,
    .emergency-section,
    .hero-bg-image { display: none !important; }
    .service-page-layout { grid-template-columns: 1fr; }
    body { padding-bottom: 0; }
    a { color: #000; text-decoration: underline; }
    .service-card, .service-area-card { break-inside: avoid; }
}