/* Houston West RV Park - Global Styles */

/* CSS Variables */
:root {
    --hwrv-red: #FF4433;
    --hwrv-dark: #1a1a1a;
    --hwrv-charcoal: #2d2d2d;
    --hwrv-white: #ffffff;
    --hwrv-gray: #f7f7f7;
    --hwrv-text: #444444;
    --hwrv-border: rgba(255,255,255,0.1);
}

/* Base */
body {
    color: var(--hwrv-text);
}

/* Buttons */
.hwrv-btn-primary {
    background: var(--hwrv-red) !important;
    color: var(--hwrv-white) !important;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.hwrv-btn-primary:hover {
    background: var(--hwrv-dark) !important;
    color: var(--hwrv-white) !important;
}

.hwrv-btn-outline {
    background: transparent;
    color: var(--hwrv-white) !important;
    padding: 10px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    border: 2px solid rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hwrv-btn-outline:hover {
    background: var(--hwrv-white);
    color: var(--hwrv-red) !important;
    border-color: var(--hwrv-white);
}

/* Section layouts */
.hwrv-section {
    padding: 64px 0;
}

.hwrv-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section label */
.hwrv-label {
    color: var(--hwrv-red);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

/* Dark sections */
.hwrv-dark {
    background: var(--hwrv-dark) !important;
}

.hwrv-dark h1,
.hwrv-dark h2,
.hwrv-dark h3,
.hwrv-dark h4,
.hwrv-dark p,
.hwrv-dark li {
    color: var(--hwrv-white) !important;
}

/* Gray sections */
.hwrv-gray {
    background: var(--hwrv-gray) !important;
}

/* Red sections */
.hwrv-red {
    background: var(--hwrv-red) !important;
}

.hwrv-red h1,
.hwrv-red h2,
.hwrv-red h3,
.hwrv-red p {
    color: var(--hwrv-white) !important;
}

/* Red left border accent */
.hwrv-accent-left {
    border-left: 4px solid var(--hwrv-red);
    padding-left: 16px;
}

/* Cards */
.hwrv-card {
    background: var(--hwrv-white);
    border-radius: 8px;
    border: 0.5px solid #e0e0e0;
    padding: 24px;
    transition: border-color 0.2s ease;
}

.hwrv-card:hover {
    border-color: var(--hwrv-red);
}

/* Trust bar */
.hwrv-trust-bar {
    background: var(--hwrv-red);
    padding: 16px 0;
}

.hwrv-trust-bar p {
    color: var(--hwrv-white) !important;
    margin: 0;
    text-align: center;
    font-weight: 500;
}

/* Amenity grid items */
.hwrv-amenity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--hwrv-gray);
    border-radius: 8px;
    border-left: 3px solid var(--hwrv-red);
    font-size: 15px;
    color: var(--hwrv-dark);
    font-weight: 500;
}

.hwrv-amenity-dot {
    width: 10px;
    height: 10px;
    background: var(--hwrv-red);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Steps */
.hwrv-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--hwrv-white);
    border-radius: 8px;
    border-left: 4px solid var(--hwrv-red);
    margin-bottom: 12px;
}

.hwrv-step-number {
    background: var(--hwrv-red);
    color: var(--hwrv-white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

/* Remove gap between sections */
.hwrv-section + section {
    margin-top: 0 !important;
}

/* Sticky header */
.header-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Header transition on scroll */
.header-wrap.scroll-down {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .hwrv-section {
        padding: 40px 0;
    }

    .hwrv-container {
        padding: 0 16px;
    }

    .hwrv-btn-primary,
    .hwrv-btn-outline {
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
}

/* Hide ALL Elfsight header elements */
.eapps-google-reviews-title,
.eapps-google-reviews-header,
.eapps-google-reviews-header-title,
.eapps-google-reviews-header-inner,
[class*="eapps-google-reviews-header"],
[class*="eapps-google-reviews-title"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo size */
.site-header .custom-logo {
    max-width: 140px !important;
    height: auto !important;
}

.site-branding img {
    max-width: 140px !important;
}

/* Announcement bar */
.hwrv-announcement-bar {
    position: relative;
    z-index: 1000;
}

/* Book Now nav button */
a[href*="book-now"],
a[href*="camplife"] {
    background: #FF4433 !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease !important;
    text-decoration: none !important;
}

a[href*="book-now"]:hover,
a[href*="camplife"]:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Hide Kadence default footer credit */
.site-footer .kadence-credits,
.kadence-footer-bottom,
.site-info,
.footer-credit {
    display: none !important;
}

/* Button color reinforcement */
.hwrv-btn-primary {
    background: #FF4433 !important;
    color: #ffffff !important;
}

.hwrv-btn-outline {
    border: 2px solid rgba(255,255,255,0.8) !important;
    color: #ffffff !important;
    background: transparent !important;
}

/* ================================
   MOBILE RESPONSIVE FIXES
   ================================ */

@media (max-width: 768px) {

    /* Announcement bar - smaller text */
    div[style*="background:#FF4433"][style*="padding:8px"] p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    /* Hero - larger headline on mobile */
    .hwrv-hero h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .hwrv-hero p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .hwrv-hero div[style*="display:flex"][style*="gap:12px"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hwrv-hero a {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Center logo on mobile */
    .site-branding,
    .custom-logo-link,
    .site-header .custom-logo,
    header .site-branding,
    .kadence-header .site-branding {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Center header on mobile */
    .header-main-inner,
    .site-header .header-main-inner {
        justify-content: center !important;
    }

    /* Hide phone and Book Now button on mobile header - too crowded */
    .header-main .kadence-button-wrap,
    .header-main .html-header-wrap {
        display: none !important;
    }

    /* Trust bar - keep 3 columns on mobile but smaller */
    div[style*="grid-template-columns:repeat(3,1fr)"][style*="text-align:center"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px !important;
    }

    div[style*="grid-template-columns:repeat(3,1fr)"][style*="text-align:center"] p {
        font-size: 11px !important;
    }

    /* About section icons - smaller gap */
    div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:24px"] {
        gap: 12px !important;
    }

    /* Services cards - single column */
    div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:16px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Rate bar - 2 columns on mobile */
    div[style*="grid-template-columns:repeat(4,1fr)"][style*="background:#FF4433"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    /* Gallery strip - 3 columns on mobile */
    div[style*="grid-template-columns:repeat(6,1fr)"] {
        grid-template-columns: repeat(3,1fr) !important;
        height: auto !important;
    }

    div[style*="grid-template-columns:repeat(6,1fr)"] > div {
        height: 120px !important;
    }

    /* Amenities grid - 2 columns on mobile */
    div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:20px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Map section - stack vertically */
    div[style*="grid-template-columns:1fr 1fr"][style*="gap:48px"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Map iframe - full width */
    div[style*="border-radius:12px"][style*="overflow:hidden"] iframe {
        height: 280px !important;
    }

    /* Footer - single column */
    div[style*="grid-template-columns:1.5fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* CTA buttons - stack */
    div[style*="display:flex"][style*="gap:16px"][style*="justify-content:center"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Social proof numbers - smaller */
    div[style*="display:flex"][style*="gap:32px"][style*="justify-content:center"] {
        gap: 16px !important;
    }

    div[style*="font-size:36px"][style*="font-weight:800"] {
        font-size: 28px !important;
    }

    /* Rate bar - fix bottom row cutoff */
    div[style*="background:#FF4433"][style*="border-radius:8px"] {
        grid-template-columns: 1fr 1fr !important;
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    div[style*="background:#FF4433"][style*="border-radius:8px"] span[style*="font-size:22px"] {
        font-size: 20px !important;
    }

    div[style*="background:#FF4433"][style*="border-radius:8px"] span[style*="font-size:11px"] {
        font-size: 10px !important;
    }

    /* Map - prevent zoom message overlay */
    .map-container,
    div[style*="border-radius:12px"][style*="overflow:hidden"] {
        pointer-events: none !important;
    }

    div[style*="border-radius:12px"][style*="overflow:hidden"] iframe {
        pointer-events: auto !important;
        height: 250px !important;
    }

    /* Hero location tag - ensure visible */
    .hwrv-hero span[style*="background:#FF4433"] {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 10px !important;
        padding: 3px 10px !important;
        margin-bottom: 12px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Hero location tag */
    .hwrv-hero span[style*="display:inline-block"][style*="background:#FF4433"] {
        display: inline-block !important;
        font-size: 10px !important;
        padding: 3px 10px !important;
        margin-bottom: 10px !important;
    }

    /* Hero buttons - stacked */
    .hwrv-hero div[style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .hwrv-btn-primary,
    .hwrv-btn-outline {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
    }

    /* Rate bar - 2x2 on mobile */
    div[style*="grid-template-columns:repeat(4,1fr)"][style*="background:#FF4433"][style*="border-radius:8px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px 8px !important;
        padding: 16px 12px !important;
    }

    div[style*="grid-template-columns:repeat(4,1fr)"][style*="background:#FF4433"] span[style*="font-size:22px"] {
        font-size: 18px !important;
    }

    /* Announcement bar - hide on mobile, too cramped */
    div[style*="background:#FF4433"][style*="padding:8px 24px"] {
        display: none !important;
    }

    /* Hero buttons - stack vertically on mobile */
    .hwrv-hero > div > div > div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hwrv-hero a[class*="hwrv-btn"] {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Rate bar - 2x2 grid on mobile */
    div[style*="grid-template-columns:repeat(4,1fr)"][style*="border-radius:8px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* Footer links - larger tap targets */
    footer a {
        font-size: 14px !important;
        padding: 4px 0 !important;
        display: block !important;
    }

    /* Footer headings */
    footer h4 {
        font-size: 14px !important;
        margin-top: 8px !important;
    }

    /* Map section text on mobile */
    div[style*="OUR LOCATION"] h2 {
        font-size: 24px !important;
    }

    /* Reduce section label size */
    .hwrv-label {
        font-size: 10px !important;
    }

    /* Container padding on mobile */
    .hwrv-container {
        padding: 0 16px !important;
    }

    /* Section padding on mobile */
    section[style*="padding:72px 0"] {
        padding: 40px 0 !important;
    }

    section[style*="padding:64px 0"] {
        padding: 40px 0 !important;
    }

    section[style*="padding:48px 0"] {
        padding: 32px 0 !important;
    }

}

/* Fix dropdown menu text color - always black */
.main-navigation .sub-menu,
.kadence-navigation .sub-menu,
header .sub-menu,
.primary-menu .sub-menu {
    background: #ffffff !important;
    border: 0.5px solid #e0e0e0 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

.main-navigation .sub-menu li a,
.kadence-navigation .sub-menu li a,
header .sub-menu li a,
.primary-menu .sub-menu li a,
.sub-menu .menu-item a {
    color: #1a1a1a !important;
    background: transparent !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.main-navigation .sub-menu li a:hover,
.kadence-navigation .sub-menu li a:hover,
header .sub-menu li a:hover {
    color: #FF4433 !important;
    background: #f7f7f7 !important;
}

/* Fix active/current page nav text - always stay same color */
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a,
.main-navigation .current-menu-ancestor > a,
.kadence-navigation .current-menu-item > a,
header .current-menu-item > a,
header .current-page-ancestor > a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* Ensure top level nav always dark */
.main-navigation > ul > li > a,
.kadence-navigation > ul > li > a,
header nav > ul > li > a,
.primary-menu > li > a {
    color: #1a1a1a !important;
}

.main-navigation > ul > li > a:hover,
header nav > ul > li > a:hover {
    color: #FF4433 !important;
}

/* Remove any white text on active pages */
.current-menu-item a,
.current_page_item a {
    color: #1a1a1a !important;
}
/* Blog post heading colors */
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.wp-block-heading {
    color: #1a1a1a !important;
}