/**
 * America's State Parks - Premium Homepage Styles
 * 
 * A modern, immersive homepage design with hero section,
 * activity carousel, featured parks, and interactive elements.
 * 
 * @version 2.0.0
 */

/* ==========================================================================
   Astra Container Override - Force full-width on homepage
   The homepage shortcodes handle their own max-width via .asp-container.
   We need to break out of Astra's default 1200px .ast-container wrapper.
   ========================================================================== */

.home .site-content>.ast-container,
.home #content>.ast-container,
.page-id-11 .site-content>.ast-container,
.page-id-11 #content>.ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.home #primary,
.page-id-11 #primary {
    padding: 0;
    margin: 0;
}

.home .entry-content,
.page-id-11 .entry-content {
    margin: 0;
    padding: 0;
}

/* Remove article padding that Astra adds by default */
.home article,
.page-id-11 article {
    padding: 0 !important;
    margin: 0;
}

/* ==========================================================================
   CSS Variables - Design Tokens
   ========================================================================== */

:root {
    /* Colors */
    --asp-forest: #166534;
    --asp-forest-dark: #14532d;
    --asp-sage: #22c55e;
    --asp-sage-light: #86efac;
    --asp-cream: #fefce8;
    --asp-slate: #1e293b;
    --asp-slate-light: #475569;
    --asp-mist: #f8fafc;
    --asp-white: #ffffff;

    /* Gradients - enhanced for better text contrast */
    --asp-gradient-hero: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.6) 100%);
    --asp-gradient-card: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);

    /* Shadows */
    --asp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --asp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --asp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --asp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Spacing */
    --asp-section-padding: 80px;
    --asp-container-max: 1400px;
    --asp-gap: 24px;

    /* Transitions */
    --asp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius */
    --asp-radius-sm: 8px;
    --asp-radius-md: 12px;
    --asp-radius-lg: 16px;
    --asp-radius-xl: 24px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.asp-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Removed overflow: hidden - it was clipping the search dropdown */
    margin-top: -80px;
    /* Overlap header for full-screen effect */
    padding-top: 80px;
    /* Keep below header (z-index ~99-101) but above subsequent sections */
    z-index: 10;
}


.asp-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.asp-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.asp-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--asp-gradient-hero);
    z-index: 1;
}

.asp-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
    color: var(--asp-white);
}

.asp-hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--asp-white) !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    display: inline-block;
}

.asp-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Hero Search Bar */
.asp-hero-search {
    display: flex;
    max-width: 600px;
    margin: 0 auto 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    padding: 8px;
    box-shadow: var(--asp-shadow-xl);
    backdrop-filter: blur(10px);
    /* Ensure search dropdown appears above CTAs and Trust Bar */
    position: relative;
    z-index: 1000;
}

.asp-hero-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 16px 24px;
    font-size: 1rem;
    color: var(--asp-slate);
    outline: none;
}

.asp-hero-search input::placeholder {
    color: var(--asp-slate-light);
}

.asp-hero-search button {
    background: var(--asp-forest);
    color: var(--asp-white);
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--asp-transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.asp-hero-search button:hover {
    background: var(--asp-forest-dark);
    transform: translateY(-1px);
}

/* Hero CTAs */
.asp-hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    /* Keep below search dropdown */
    position: relative;
    z-index: 1;
}

.asp-btn {
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--asp-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.asp-btn-primary {
    background: var(--asp-forest);
    color: var(--asp-white);
}

.asp-btn-primary:hover {
    background: var(--asp-forest-dark);
    transform: translateY(-2px);
    box-shadow: var(--asp-shadow-lg);
}

.asp-btn-outline {
    background: transparent;
    color: var(--asp-white);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.asp-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--asp-white);
}

/* Trust Bar */
.asp-trust-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--asp-radius-lg);
    /* Keep below search dropdown */
    position: relative;
    z-index: 1;
}

.asp-trust-item {
    text-align: center;
}

.asp-trust-number {
    font-size: 1.5rem;
    font-weight: 800;
    display: block;
}

.asp-trust-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ==========================================================================
   Section Shared Styles
   ========================================================================== */

.asp-section {
    padding: var(--asp-section-padding) 20px;
    /* Ensure sections stay below hero (z-index: 100) for dropdown visibility */
    position: relative;
    z-index: 1;
}


.asp-section-dark {
    background: var(--asp-slate);
    color: var(--asp-white);
}

.asp-section-alt {
    background: var(--asp-mist);
}

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

/* Full-width sections */
.asp-section-fullwidth {
    padding-left: 40px;
    padding-right: 40px;
}

.asp-section-fullwidth .asp-container {
    padding: 0;
}

.asp-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.asp-section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--asp-slate);
    margin-bottom: 1rem;
}

.asp-section-dark .asp-section-title {
    color: var(--asp-white);
}

.asp-section-subtitle {
    font-size: 1.125rem;
    color: var(--asp-slate-light);
    max-width: 600px;
    margin: 0 auto;
}

.asp-section-dark .asp-section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Activity Carousel
   ========================================================================== */

.asp-activities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--asp-gap);
    width: 100%;
}

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

@media (max-width: 640px) {
    .asp-activities-grid {
        grid-template-columns: 1fr;
    }
}

/* Fix WordPress/Astra link styling conflicts */
.asp-section .asp-activities-grid .asp-activity-card,
a.asp-activity-card {
    position: relative;
    border-radius: var(--asp-radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    transition: var(--asp-transition);
    display: block;
    text-decoration: none !important;
    color: inherit;
    background: #334155;
    padding: 0;
    margin: 0;
}

.asp-section .asp-activities-grid .asp-activity-card:hover,
a.asp-activity-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--asp-shadow-xl);
    text-decoration: none !important;
}

.asp-activity-card>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--asp-transition);
    z-index: 1;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.asp-activity-card:hover>img {
    transform: scale(1.1);
}

.asp-activity-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: var(--asp-white);
    z-index: 2;
    pointer-events: none;
}

.asp-activity-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    line-height: 1;
}

.asp-activity-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--asp-white) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.asp-activity-count {
    font-size: 0.875rem;
    opacity: 0.9;
    color: var(--asp-white) !important;
}


/* ==========================================================================
   US Map Section
   ========================================================================== */

.asp-map-section {
    background: var(--asp-slate);
    padding: var(--asp-section-padding) 0;
}

.asp-map-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
    max-width: var(--asp-container-max);
    margin: 0 auto;
    padding: 0 40px;
}

.asp-map-info h2 {
    color: var(--asp-white);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.asp-map-info p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.asp-region-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.asp-region-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--asp-radius-sm);
    color: var(--asp-white);
    text-decoration: none;
    transition: var(--asp-transition);
}

.asp-region-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(4px);
}

.asp-region-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.asp-region-dot.northeast {
    background: #60a5fa;
}

.asp-region-dot.southeast {
    background: #f97316;
}

.asp-region-dot.midwest {
    background: #a78bfa;
}

.asp-region-dot.southwest {
    background: #fb923c;
}

.asp-region-dot.mountain {
    background: #34d399;
}

.asp-region-dot.pacific {
    background: #f472b6;
}

.asp-map-svg {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================================
   Seasonal Highlights
   ========================================================================== */

.asp-seasonal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--asp-gap);
}

.asp-seasonal-card {
    position: relative;
    border-radius: var(--asp-radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
    text-decoration: none;
}

.asp-seasonal-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--asp-transition);
}

.asp-seasonal-card:hover img {
    transform: scale(1.05);
}

.asp-seasonal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: var(--asp-white);
}

.asp-seasonal-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--asp-forest);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    width: fit-content;
}

.asp-seasonal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.asp-seasonal-desc {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ==========================================================================
   Newsletter Section
   ========================================================================== */

.asp-newsletter {
    background: linear-gradient(135deg, var(--asp-forest) 0%, var(--asp-forest-dark) 100%);
    padding: 60px 40px;
    text-align: center;
    color: var(--asp-white);
}

.asp-newsletter-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.asp-newsletter-subtitle {
    opacity: 0.9;
    margin-bottom: 2rem;
}

.asp-newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 12px;
}

.asp-newsletter-form input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
}

.asp-newsletter-form button {
    padding: 16px 32px;
    background: var(--asp-white);
    color: var(--asp-forest);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--asp-transition);
}

.asp-newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: var(--asp-shadow-lg);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --asp-section-padding: 48px;
    }

    .asp-hero {
        min-height: 80vh;
    }

    .asp-hero-search {
        flex-direction: column;
        border-radius: var(--asp-radius-lg);
    }

    .asp-hero-search button {
        width: 100%;
        justify-content: center;
    }

    .asp-hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .asp-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .asp-trust-bar {
        flex-direction: column;
        gap: 20px;
    }

    .asp-map-container {
        grid-template-columns: 1fr;
    }

    .asp-seasonal-grid {
        grid-template-columns: 1fr;
    }

    .asp-newsletter-form {
        flex-direction: column;
    }

    .asp-newsletter-form button {
        width: 100%;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.asp-animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

.asp-animate-delay-1 {
    animation-delay: 0.1s;
}

.asp-animate-delay-2 {
    animation-delay: 0.2s;
}

.asp-animate-delay-3 {
    animation-delay: 0.3s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Featured Article CTA
   ========================================================================== */

.asp-featured-article {
    padding: var(--asp-section-padding) 0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
}

.asp-featured-article-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: var(--asp-container-max);
    margin: 0 auto;
    padding: 0 40px;
}

.asp-featured-article-image {
    position: relative;
    border-radius: var(--asp-radius-lg);
    overflow: hidden;
    box-shadow: var(--asp-shadow-xl);
}

.asp-featured-article-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.asp-featured-article-inner:hover .asp-featured-article-image img {
    transform: scale(1.03);
}

.asp-featured-article-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--asp-forest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.asp-featured-article-badge svg {
    color: #f59e0b;
}

.asp-featured-article-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.asp-featured-article-label {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: var(--asp-forest);
    color: var(--asp-white);
    border-radius: 24px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;
}

.asp-featured-article-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--asp-slate);
    line-height: 1.2;
    margin: 0;
}

.asp-featured-article-excerpt {
    font-size: 1.05rem;
    color: var(--asp-slate-light);
    line-height: 1.7;
    margin: 0;
}

.asp-featured-article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.asp-featured-article-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--asp-slate-light);
}

.asp-featured-article-date svg {
    opacity: 0.6;
}

.asp-featured-article-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--asp-forest);
    color: var(--asp-white) !important;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.3);
}

.asp-featured-article-cta:hover {
    background: var(--asp-forest-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 101, 52, 0.4);
}

.asp-featured-article-cta svg {
    transition: transform 0.3s ease;
}

.asp-featured-article-cta:hover svg {
    transform: translateX(4px);
}

/* No-image fallback: centered single-column layout */
.asp-featured-no-image .asp-featured-article-inner {
    grid-template-columns: 1fr;
    max-width: 860px;
    text-align: center;
}

.asp-featured-no-image .asp-featured-article-content {
    align-items: center;
}

.asp-featured-no-image .asp-featured-article-meta {
    justify-content: center;
    flex-wrap: wrap;
}

.asp-featured-no-image .asp-featured-article-title {
    font-size: 2.25rem;
    line-height: 1.3;
}

.asp-featured-no-image .asp-featured-article-excerpt {
    max-width: 680px;
}

/* Inline badge (shown when no image badge available) */
.asp-featured-article-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: rgba(22, 101, 52, 0.08);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--asp-forest);
}

.asp-featured-article-badge-inline svg {
    color: #f59e0b;
}

/* ==========================================================================
   Latest News Grid
   ========================================================================== */

.asp-latest-news-section {
    background: var(--asp-white);
}

.asp-latest-news-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--asp-gap);
}

.asp-latest-news-grid>* {
    flex: 0 1 calc(33.333% - var(--asp-gap) * 2 / 3);
    min-width: 0;
}

.asp-news-card {
    background: var(--asp-white);
    border-radius: var(--asp-radius-lg);
    overflow: hidden;
    box-shadow: var(--asp-shadow-md);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.asp-news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--asp-shadow-xl);
}

.asp-news-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f1f5f9;
}

.asp-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.asp-news-card:hover .asp-news-image img {
    transform: scale(1.05);
}

.asp-news-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.asp-news-content {
    padding: 24px;
}

.asp-news-category {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(22, 101, 52, 0.08);
    color: var(--asp-forest);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.asp-news-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--asp-slate);
    line-height: 1.4;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.asp-news-date {
    font-size: 0.8rem;
    color: var(--asp-slate-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Responsive for new sections
   ========================================================================== */

@media (max-width: 768px) {
    .asp-featured-article-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 20px;
    }

    .asp-featured-article-title {
        font-size: 1.5rem;
    }

    .asp-latest-news-grid {
        grid-template-columns: 1fr;
    }

    .asp-map-container {
        padding: 0 20px;
    }
}

@media (max-width: 1024px) {
    .asp-latest-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Homepage Container Fix – Remove Astra sidebar reservation
   The Astra theme applies max-width: calc(100% - 356px) on .content-area
   to reserve space for a sidebar. On the homepage there is no sidebar,
   so we override this to use the full viewport width.
   ========================================================================== */

body.home #primary.content-area,
body.page-id-11 #primary.content-area {
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   Full-Bleed Breakout Mixin
   These sections break out of the .entry-content container to span the
   full viewport width. The technique uses 100vw width + negative margins
   calculated from 50% of the difference between viewport and container.
   ========================================================================== */

.asp-map-section,
.asp-newsletter,
.asp-featured-article {
    width: 100vw !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

/* Ensure inner content stays centered and readable */
.asp-map-container,
.asp-newsletter-inner,
.asp-featured-article-inner {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* ==========================================================================
   Widescreen Optimizations (≥1400px)
   ========================================================================== */

@media (min-width: 1400px) {

    /* Expand activity and park grids to 5 columns */
    .asp-activities-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    /* News grid: 4 columns */
    .asp-latest-news-grid>* {
        flex: 0 1 calc(25% - var(--asp-gap) * 3 / 4);
    }

    /* Larger featured article title */
    .asp-featured-article-title {
        font-size: 2.25rem;
    }

    /* Map SVG can grow larger */
    .asp-map-svg {
        max-width: 1000px;
    }

    /* Wider map grid: give map more space */
    .asp-map-container {
        grid-template-columns: 1fr 2.5fr;
        gap: 60px;
    }

    /* Inner content can stretch wider */
    .asp-map-container,
    .asp-newsletter-inner,
    .asp-featured-article-inner {
        max-width: 1400px;
    }
}

/* ==========================================================================
   Ultra-Widescreen Optimizations (≥1800px)
   ========================================================================== */

@media (min-width: 1800px) {
    :root {
        --asp-container-max: 1600px;
    }

    /* 6-column grids for ultra-wide */
    .asp-activities-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Larger section titles */
    .asp-section-title {
        font-size: 2.75rem;
    }

    /* Wider gaps for breathing room */
    .asp-activities-grid,
    .asp-latest-news-grid {
        gap: 32px;
    }

    /* Map SVG full scale */
    .asp-map-svg {
        max-width: 1200px;
    }

    /* Allow inner content to use more space on ultra-wide */
    .asp-map-container,
    .asp-newsletter-inner,
    .asp-featured-article-inner {
        max-width: 1600px;
    }
}

/* ==========================================================================
   Featured Destinations - Homepage centering & responsive override
   Switches from CSS Grid to Flexbox so the last row is always centered.
   ========================================================================== */

.home .sp-premium-cards-grid,
.page-id-11 .sp-premium-cards-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.home .sp-premium-card,
.page-id-11 .sp-premium-card {
    width: calc(25% - 18px);
    max-width: 280px;
    flex-shrink: 0;
}

/* Tablet: 2 cards per row, centered */
@media (max-width: 768px) {

    .home .sp-premium-card,
    .page-id-11 .sp-premium-card {
        width: calc(50% - 14px);
        min-width: 260px;
    }
}

/* Mobile: single column, full width */
@media (max-width: 480px) {

    .home .sp-premium-cards-grid,
    .page-id-11 .sp-premium-cards-grid {
        gap: 20px;
        padding: 0 16px;
    }

    .home .sp-premium-card,
    .page-id-11 .sp-premium-card {
        width: 100%;
        min-width: unset;
    }
}

/* ==========================================================================
   Grow.me Recommended Widget - Center alignment fix
   The widget uses Shadow DOM, so we can only style the host element.
   ========================================================================== */

#grow-me-in-content-recs-root {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   Mobile Fixes - v2026-03-10
   1. Hide Grow.me floating share widget on mobile (uses Shadow DOM)
   2. Fix large whitespace gap on tablet (768px)
   ========================================================================== */

/* Fix 1: Grow.me floating widget (heart + share + Providence Canyon popup)
   overlaps content on mobile. The entire widget runs in Shadow DOM so we
   hide the host element on small screens. */
@media (max-width: 768px) {

    #preact-border-shadow-host,
    #grow-me-root {
        display: none !important;
    }
}

/* Fix 2: Reduce excessive top-padding on .asp-featured-article at tablet width.
   At ~768px, the section renders with too much vertical padding, creating a
   ~400px dead white space visible between "Featured Guide" and "Explore by Activity". */
@media (max-width: 900px) {
    .asp-featured-article {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .asp-featured-article-inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 20px !important;
    }
}
/* ==========================================================================
   Parks Near Places Hub Page (/parks-near-places/)
   ========================================================================== */
.parks-near-places-hub { max-width: 900px; margin: 0 auto; }
.asp-hub-intro { font-size: 1.1em; line-height: 1.7; margin-bottom: 2rem; }

.asp-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}
.asp-nearby-card {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.asp-nearby-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
    text-decoration: none;
}
.asp-nearby-icon { font-size: 2rem; flex-shrink: 0; }
.asp-nearby-info h3 { margin: 0 0 .3rem; font-size: 1rem; color: #1a3c5e; }
.asp-nearby-info p  { margin: 0 0 .4rem; font-size: .85rem; color: #555; line-height: 1.5; }
.asp-nearby-meta    { font-size: .75rem; color: #2e7d32; font-weight: 600; }

.asp-hub-cta {
    background: linear-gradient(135deg, #1a3c5e, #2e7d32);
    color: #fff;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 2.5rem 0;
}
.asp-hub-cta h2          { color: #fff; margin-bottom: .5rem; }
.asp-btn-primary         { display: inline-block; margin-top: 1rem; background: #fff; color: #1a3c5e; padding: .7rem 1.6rem; border-radius: 6px; font-weight: 700; text-decoration: none; }
.asp-btn-primary:hover   { background: #f0f0f0; text-decoration: none; }

.asp-faq-section .asp-faq-item      { border-bottom: 1px solid #e5e7eb; padding: 1rem 0; }
.asp-faq-section .asp-faq-item h3   { font-size: 1rem; margin-bottom: .4rem; }
.asp-faq-section .asp-faq-item p    { font-size: .9rem; color: #444; }

@media (max-width: 600px) {
    .asp-nearby-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage Stabilization Fixes v2 - 2026-04-14
   REPLACES the previous v1 fix at end of file.
   1. Hide Mediavine ad placeholders on homepage to prevent whitespace
   2. Hide Grow.me recommended content widget on homepage  
   3. Fix Featured Destinations grid to show 4 cards per row on desktop
   ========================================================================== */

/* Fix 1: Suppress Mediavine ad containers on Homepage */
body.page-id-11 div[data-type="ad"],
body.page-id-11 .mv-ad-box,
body.page-id-11 [id^="div-gpt-ad"],
body.page-id-11 .adsbygoogle {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix 2: Hide Grow.me recommended content on homepage */
body.page-id-11 #grow-me-in-content-recs-root,
body.home #grow-me-in-content-recs-root {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix 3: Featured Destinations - force 4 cards per row on desktop */
body.home .sp-premium-cards-grid,
body.page-id-11 .sp-premium-cards-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px !important;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 20px;
    box-sizing: border-box;
}

body.home .sp-premium-cards-grid .sp-premium-card,
body.page-id-11 .sp-premium-cards-grid .sp-premium-card {
    width: calc(25% - 18px) !important;
    min-width: 220px;
    max-width: 280px;
    flex-shrink: 0;
}

/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
    body.home .sp-premium-cards-grid .sp-premium-card,
    body.page-id-11 .sp-premium-cards-grid .sp-premium-card {
        width: calc(50% - 12px) !important;
        max-width: none;
    }
}

/* Mobile: single column */
@media (max-width: 768px) {
    body.home .sp-premium-cards-grid .sp-premium-card,
    body.page-id-11 .sp-premium-cards-grid .sp-premium-card {
        width: 100% !important;
        min-width: unset;
        max-width: none;
    }
}