/*
Theme Name: ZipPicks Child Theme
Description: Custom child theme for ZipPicks $100B Local Discovery Platform. Mobile-first design system optimized for restaurant discovery and social sharing.
Template: generatepress
Version: 1.0.1
Author: ZipPicks Engineering Team
Author URI: https://zippicks.com
Text Domain: zippicks
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Built for enterprise scale with:
- Mobile-first responsive design (89% mobile users)
- High-conversion brand colors and UX
- Instagram-worthy visual design
- Decision-focused user experience
- Integrated ZipPicks Reviews System v1.0
*/

/* ========================================
   GLOBAL LINK STYLING - NO UNDERLINES
   Modern UX approach for premium brand
   ======================================== */

/* Remove all underlines globally - better UX for $100B platform */
a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-underline-offset: 0 !important;
}

/* Modern hover effects instead of underlines */
a {
    transition: var(--zippicks-transition, all 0.2s ease);
}

a:hover {
    color: var(--zippicks-primary, #194FAD);
    transform: translateY(-1px);
}

/* Content links get subtle color shift */
.entry-content a:hover,
.widget a:hover,
.comment-content a:hover {
    color: var(--zippicks-secondary, #5A9BFF);
    transform: translateX(2px);
}

/* ========================================
   ZIPPICKS REVIEWS SYSTEM INTEGRATION
   Import review system styles
   ======================================== */

/* Import Reviews System CSS Files */
@import url('assets/css/reviews-frontend.css');
@import url('assets/css/reviews-components.css');

/* ZipPicks Reviews CSS Variables Integration */
:root {
    /* Extend existing ZipPicks variables for reviews compatibility */
    --zippicks-primary: var(--zp-primary, #194FAD);
    --zippicks-secondary: var(--zp-primary-light, #5A9BFF);
    --zippicks-accent: var(--zp-success, #28A745);
    --zippicks-warning: var(--zp-warning, #FF8000);
    --zippicks-danger: var(--zp-error, #dc2626);
    --zippicks-light: var(--zp-surface-elevated, #f8fafc);
    --zippicks-dark: var(--zp-text-primary, #374151);
    --zippicks-border: var(--zp-border, #e5e7eb);
    --zippicks-shadow: var(--zp-shadow-md, 0 2px 8px rgba(0,0,0,0.1));
    --zippicks-radius: var(--zp-radius-md, 8px);
    --zippicks-radius-lg: var(--zp-radius-lg, 12px);
    --zippicks-radius-xl: var(--zp-radius-xl, 16px);
    --zippicks-transition: var(--zp-transition-fast, all 0.2s ease);
}

/* ========================================
   MOBILE MENU STYLES
   ======================================== */
/* Mobile toggle styles moved to components.css for better organization */

/* Mobile menu styles moved to components.css for better organization */

/* Show mobile toggle only on mobile and tablets */
@media (max-width: 1023px) {
    .zp-mobile-toggle {
        display: block !important;
    }
    
    .zp-header__actions--desktop {
        display: none !important;
    }
    
    .zp-nav {
        display: none !important;
    }
}

/* ========================================
   ZIPPICKS THEME CUSTOMIZATIONS
   Additional styles and overrides
   ======================================== */

/* Header styles moved to components.css for better organization */

/* ========================================
   LEGAL PAGES STYLES
   ======================================== */
.zp-legal-page {
    padding: 3rem 0;
    background: #f8f9fa;
    min-height: 80vh;
}

.zp-legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.zp-legal-title {
    font-size: 2.5rem;
    color: #194FAD;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.zp-legal-updated {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

.zp-legal-section {
    margin-bottom: 2.5rem;
}

.zp-legal-section h2 {
    font-size: 1.75rem;
    color: #194FAD;
    margin-bottom: 1rem;
    font-weight: 600;
}

.zp-legal-section h3 {
    font-size: 1.25rem;
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.zp-legal-section p {
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 1rem;
}

.zp-legal-section ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.zp-legal-section ul li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
    color: #4b5563;
}

.zp-legal-section strong {
    color: #333;
    font-weight: 600;
}

/* Mobile styles for legal pages */
@media (max-width: 768px) {
    .zp-legal-content {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }
    
    .zp-legal-title {
        font-size: 2rem;
    }
    
    .zp-legal-section h2 {
        font-size: 1.5rem;
    }
}

/* === GENERATEPRESS OVERRIDES === */

/* Header Customizations */
.site-header {
    background: var(--zp-background);
    border-bottom: 1px solid var(--zp-border-light);
    box-shadow: var(--zp-shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--zp-z-sticky);
}

.main-title {
    font-family: var(--zp-font-family-heading);
    font-weight: var(--zp-font-bold);
    color: var(--zp-primary);
}

.main-title a {
    color: var(--zp-primary);
    text-decoration: none;
}

.main-title a:hover {
    color: var(--zp-primary-dark);
    transform: none; /* Don't move the logo */
}

/* Navigation Overrides */
.main-navigation ul li a {
    font-family: var(--zp-font-family-primary);
    font-weight: var(--zp-font-medium);
    color: var(--zp-text-primary);
    transition: var(--zp-transition-fast);
    padding: var(--zp-space-sm) var(--zp-space-md);
    border-radius: var(--zp-radius-md);
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
    background-color: var(--zp-primary-light);
    color: var(--zp-text-inverse);
    transform: translateY(-1px);
}

.main-navigation .current-menu-item > a {
    background: var(--zp-gradient-primary);
    color: var(--zp-text-inverse);
    border-radius: var(--zp-radius-md);
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .menu-toggle {
        background: var(--zp-primary);
        color: var(--zp-text-inverse);
        border: none;
        border-radius: var(--zp-radius-md);
        padding: var(--zp-space-sm);
        transition: var(--zp-transition-fast);
    }
    
    .menu-toggle:hover {
        background: var(--zp-primary-dark);
        transform: scale(1.05);
    }
    
    .main-navigation.toggled ul {
        background: var(--zp-surface-elevated);
        border-radius: var(--zp-radius-lg);
        box-shadow: var(--zp-shadow-lg);
        margin-top: var(--zp-space-sm);
        padding: var(--zp-space-md);
    }
}

/* Content Area Customizations */
.site-content {
    background: var(--zp-background);
}

.content-area {
    padding: var(--zp-space-lg) 0;
}

/* Entry Styles */
.entry-header {
    margin-bottom: var(--zp-space-xl);
}

.entry-title {
    font-family: var(--zp-font-family-heading);
    font-weight: var(--zp-font-bold);
    color: var(--zp-text-primary);
    line-height: var(--zp-leading-tight);
}

.entry-content {
    font-family: var(--zp-font-family-primary);
    line-height: var(--zp-leading-relaxed);
    color: var(--zp-text-primary);
}

.entry-content p {
    margin-bottom: var(--zp-space-md);
}

/* Footer Customizations */
.site-footer {
    background: var(--zp-text-primary);
    color: var(--zp-text-inverse);
    padding: var(--zp-space-2xl) 0 var(--zp-space-xl);
    margin-top: var(--zp-space-4xl);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--zp-space-xl);
    margin-bottom: var(--zp-space-xl);
}

.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--zp-space-lg);
    text-align: center;
    color: var(--zp-text-muted);
}

/* === ZIPPICKS REVIEWS SYSTEM INTEGRATION === */

/* Ensure reviews system inherits theme fonts and spacing */
.zippicks-review-form-container,
.zippicks-reviews-container {
    font-family: var(--zp-font-family-primary);
    max-width: var(--zp-container-lg, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Override review form styling to match theme */
.zippicks-review-header h3 {
    font-family: var(--zp-font-family-heading);
    color: var(--zp-primary);
}

.zippicks-individual-reviews h4 {
    font-family: var(--zp-font-family-heading);
    color: var(--zp-primary);
}

/* Score badge integration with theme */
.zipscore-badge {
    font-family: var(--zp-font-family-primary);
}

/* Ensure buttons match theme style */
.zippicks-btn {
    font-family: var(--zp-font-family-primary);
    border-radius: var(--zp-radius-lg);
    font-weight: var(--zp-font-semibold);
}

.zippicks-btn-primary {
    background: var(--zp-gradient-primary);
    box-shadow: var(--zp-shadow-button);
}

.zippicks-btn-primary:hover {
    box-shadow: var(--zp-shadow-lg);
}

/* Review cards inherit theme card styling */
.single-review {
    background: var(--zp-surface-elevated);
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
    transition: var(--zp-transition-fast);
}

.single-review:hover {
    box-shadow: var(--zp-shadow-xl);
    transform: translateY(-2px);
}

/* ZipScore header matches theme gradients */
.zippicks-score-header {
    background: var(--zp-gradient-primary);
    border-radius: var(--zp-radius-2xl);
    box-shadow: var(--zp-shadow-xl);
}

/* Pillar scores match theme surface styling */
.zippicks-pillar-scores {
    background: var(--zp-surface-elevated);
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
}

.pillar-item {
    background: var(--zp-surface);
    border: 1px solid var(--zp-border-light);
    border-radius: var(--zp-radius-lg);
    transition: var(--zp-transition-fast);
}

.pillar-item:hover {
    box-shadow: var(--zp-shadow-md);
    transform: translateY(-1px);
}

/* === ZIPPICKS COMPONENT OVERRIDES === */

/* WordPress Default Elements with ZipPicks Styling */
.wp-block-button .wp-block-button__link {
    background: var(--zp-gradient-primary);
    color: var(--zp-text-inverse);
    border: none;
    border-radius: var(--zp-radius-lg);
    padding: var(--zp-space-md) var(--zp-space-xl);
    font-weight: var(--zp-font-semibold);
    text-decoration: none;
    transition: var(--zp-transition-fast);
    box-shadow: var(--zp-shadow-button);
}

.wp-block-button .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--zp-shadow-lg);
}

/* Search Form Styling */
.search-form {
    display: flex;
    gap: var(--zp-space-sm);
    align-items: center;
    background: var(--zp-surface);
    padding: var(--zp-space-sm);
    border-radius: var(--zp-radius-lg);
    box-shadow: var(--zp-shadow-sm);
}

.search-form input[type="search"] {
    flex: 1;
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-md);
    padding: var(--zp-space-sm) var(--zp-space-md);
    font-family: var(--zp-font-family-primary);
    transition: var(--zp-transition-fast);
}

.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--zp-primary);
    box-shadow: 0 0 0 3px rgba(25, 79, 173, 0.1);
}

.search-form button {
    background: var(--zp-gradient-primary);
    color: var(--zp-text-inverse);
    border: none;
    border-radius: var(--zp-radius-md);
    padding: var(--zp-space-sm) var(--zp-space-lg);
    font-weight: var(--zp-font-semibold);
    cursor: pointer;
    transition: var(--zp-transition-fast);
}

.search-form button:hover {
    background: var(--zp-primary-dark);
    transform: translateY(-1px);
}

/* Comment Form Styling */
.comment-form {
    background: var(--zp-surface);
    padding: var(--zp-space-xl);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-md);
    padding: var(--zp-space-md);
    font-family: var(--zp-font-family-primary);
    transition: var(--zp-transition-fast);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--zp-primary);
    box-shadow: 0 0 0 3px rgba(25, 79, 173, 0.1);
}

/* Widget Styling */
.widget {
    background: var(--zp-surface-elevated);
    border-radius: var(--zp-radius-xl);
    padding: var(--zp-space-lg);
    box-shadow: var(--zp-shadow-sm);
    transition: var(--zp-transition-fast);
}

.widget:hover {
    box-shadow: var(--zp-shadow-md);
    transform: translateY(-1px);
}

.widget-title {
    color: var(--zp-text-primary);
    border-bottom: 2px solid var(--zp-primary-light);
    padding-bottom: var(--zp-space-sm);
}

/* === BUSINESS CPT INTEGRATION === */

/* Single Business Page Styling */
.single-business .entry-content {
    display: grid;
    gap: var(--zp-space-xl);
}

/* Business header area */
.business-header {
    background: var(--zp-surface-elevated);
    padding: var(--zp-space-xl);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
    margin-bottom: var(--zp-space-xl);
}

.business-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--zp-space-md);
    margin-top: var(--zp-space-lg);
}

.business-meta-item {
    display: flex;
    align-items: center;
    gap: var(--zp-space-sm);
    font-size: var(--zp-text-sm);
    color: var(--zp-text-secondary);
}

/* Business content sections */
.business-section {
    background: var(--zp-surface-elevated);
    padding: var(--zp-space-xl);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
    margin-bottom: var(--zp-space-xl);
}

.business-section h3 {
    font-family: var(--zp-font-family-heading);
    color: var(--zp-primary);
    margin-bottom: var(--zp-space-lg);
    border-bottom: 2px solid var(--zp-primary-light);
    padding-bottom: var(--zp-space-sm);
}

/* === REVIEW FORM SPECIFIC OVERRIDES === */

/* Ensure review form fits within business page layout */
.single-business .zippicks-review-form-container {
    background: var(--zp-surface-elevated);
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
    margin: var(--zp-space-xl) 0;
}

/* Review display section styling */
.single-business .zippicks-reviews-container {
    margin: var(--zp-space-xl) 0;
}

/* === RESPONSIVE OVERRIDES === */

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-header {
        padding: var(--zp-space-md) 0;
    }
    
    .content-area {
        padding: var(--zp-space-xl) 0;
    }
    
    .business-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .site-header {
        padding: var(--zp-space-lg) 0;
    }
    
    .content-area {
        padding: var(--zp-space-2xl) 0;
    }
    
    .footer-widgets {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .business-meta {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999999;
    text-decoration: none !important; /* Remove underline from skip link too */
}

.skip-link:focus {
    background: var(--zp-primary);
    color: var(--zp-text-inverse);
    left: var(--zp-space-md);
    padding: var(--zp-space-sm) var(--zp-space-md);
    border-radius: var(--zp-radius-md);
    text-decoration: none !important;
}

/* Focus indicators */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
    outline: 2px solid var(--zp-primary);
    outline-offset: 2px;
}

/* === PRINT STYLES === */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    button,
    .menu-toggle,
    .zippicks-review-form-container {
        display: none;
    }
    
    .site-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    p, li {
        orphans: 3;
        widows: 3;
    }
    
    .zippicks-reviews-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .single-review {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 12pt;
    }
    
    /* Remove underlines in print too */
    a {
        text-decoration: none !important;
    }
}

/* === CUSTOM ZIPPICKS ADDITIONS === */

/* Restaurant-specific styles that will be enhanced in components.css */
.zp-restaurant-card {
    transition: var(--zp-transition-fast);
    background: var(--zp-surface-elevated);
    border-radius: var(--zp-radius-xl);
    box-shadow: var(--zp-shadow-card);
    overflow: hidden;
}

.zp-restaurant-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zp-shadow-xl);
}

/* Review stars styling */
.zp-rating-stars {
    color: var(--zp-warning);
    font-size: var(--zp-text-lg);
}

/* Price range indicators */
.zp-price-indicator {
    color: var(--zp-success);
    font-weight: var(--zp-font-semibold);
}

/* Social sharing buttons */
.zp-social-share {
    display: flex;
    gap: var(--zp-space-sm);
    align-items: center;
}

.zp-social-share button {
    width: 40px;
    height: 40px;
    border-radius: var(--zp-radius-full);
    border: none;
    color: var(--zp-text-inverse);
    cursor: pointer;
    transition: var(--zp-transition-fast);
}

.zp-social-share .facebook { background: #1877f2; }
.zp-social-share .twitter { background: #1da1f2; }
.zp-social-share .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }

.zp-social-share button:hover {
    transform: scale(1.1);
}

/* Loading states */
.zp-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.zp-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--zp-border);
    border-top-color: var(--zp-primary);
    border-radius: 50%;
    animation: zp-spin 1s linear infinite;
}

@keyframes zp-spin {
    to { transform: rotate(360deg); }
}

/* === REVIEWS SYSTEM PERFORMANCE OPTIMIZATIONS === */

/* Lazy load styles for review images */
.review-image-lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.review-image-lazy.loaded {
    opacity: 1;
}

/* Intersection observer enhancements */
.review-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.review-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Critical CSS for above-the-fold reviews */
.zippicks-score-header {
    contain: layout style paint;
}

.single-review {
    contain: layout style;
}

/* === DARK MODE SUPPORT (FUTURE ENHANCEMENT) === */
@media (prefers-color-scheme: dark) {
    :root {
        --zippicks-light: #1f2937;
        --zippicks-dark: #f9fafb;
        --zippicks-border: #374151;
    }
    
    .zippicks-review-form-container,
    .zippicks-reviews-container,
    .single-review {
        background: #1f2937;
        color: #f9fafb;
        border-color: #374151;
    }
}

/* ==========================================================================
   GENERATEPRESS THEME OVERRIDES FOR $100B DESKTOP EXPERIENCE
   CRITICAL FIX: Override GeneratePress container constraints on vibes pages
   ========================================================================== */

/* Custom vibes container variables for intelligent spacing */
:root {
    --zp-container-max-width: none;
    --zp-vibes-max-width: 1400px;
    --zp-content-padding: 40px;
    --zp-content-padding-mobile: 20px;
}

@media (min-width: 768px) {
    :root {
        --zp-content-padding: 60px;
    }
}

@media (min-width: 1400px) {
    :root {
        --zp-content-padding: 80px;
        --zp-vibes-max-width: 1600px;
    }
}

/* Override GeneratePress container constraints for vibes pages ONLY */
body.single-vibe .container,
body.page-template-vibes-index .container,
body.archive-vibe .container,
body[class*="vibe"] .container {
    max-width: none !important;
    width: 100% !important;
}

/* Override GeneratePress content-area constraints */
body.single-vibe .content-area,
body.page-template-vibes-index .content-area,
body.archive-vibe .content-area,
body[class*="vibe"] .content-area {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override GeneratePress grid-container class */
body.single-vibe .grid-container,
body.page-template-vibes-index .grid-container,
body.archive-vibe .grid-container,
body[class*="vibe"] .grid-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override GeneratePress inside-container */
body.single-vibe .inside-container,
body.page-template-vibes-index .inside-container,
body.archive-vibe .inside-container,
body[class*="vibe"] .inside-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override GeneratePress site-content */
body.single-vibe .site-content,
body.page-template-vibes-index .site-content,
body.archive-vibe .site-content,
body[class*="vibe"] .site-content {
    max-width: none !important;
    width: 100% !important;
}

/* CRITICAL: ZipPicks vibe containers take full precedence */
.zp-vibe-archive,
.zp-vibes-index {
    width: 100% !important;
    max-width: none !important;
}

/* Ensure our intelligent zp-container system works as designed */
.zp-vibe-archive .zp-container {
    max-width: var(--zp-container-max-width, none) !important;
}

/* Full-width sections for optimal space utilization */
.zp-top-spots-section,
.zp-critics-section, 
.zp-zippers-section {
    width: 100% !important;
    max-width: none !important;
}

/* Related vibes with intelligent max-width */
.zp-related-vibes {
    width: 100% !important;
    max-width: var(--zp-vibes-max-width, 1400px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Override GeneratePress CSS Grid system if present */
body.single-vibe .wp-site-blocks,
body.page-template-vibes-index .wp-site-blocks,
body.archive-vibe .wp-site-blocks,
body[class*="vibe"] .wp-site-blocks {
    max-width: none !important;
}

/* Block editor container overrides */
body.single-vibe .wp-block-group__inner-container,
body.page-template-vibes-index .wp-block-group__inner-container,
body.archive-vibe .wp-block-group__inner-container,
body[class*="vibe"] .wp-block-group__inner-container {
    max-width: none !important;
}

/* ENTERPRISE ENHANCEMENT: Intelligent header constraint vs content expansion */
body[class*="vibe"] .zp-vibe-header .zp-container,
body[class*="vibe"] .zp-zip-prompt,
body[class*="vibe"] .zp-zip-display {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Main content areas get intelligent adaptive spacing */
body[class*="vibe"] .zp-top-spots-section .zp-container,
body[class*="vibe"] .zp-critics-section .zp-container,
body[class*="vibe"] .zp-zippers-section .zp-container {
    max-width: none !important;
    padding: 0 var(--zp-content-padding) !important;
}

/* Mobile responsive override - preserve existing mobile experience */
@media (max-width: 767px) {
    body[class*="vibe"] .zp-top-spots-section .zp-container,
    body[class*="vibe"] .zp-critics-section .zp-container,
    body[class*="vibe"] .zp-zippers-section .zp-container,
    body[class*="vibe"] .zp-related-vibes {
        padding: 0 var(--zp-content-padding-mobile) !important;
    }
}

/* ENTERPRISE QUALITY: Ensure vibes pages get $100B treatment */
body[class*="vibe"] {
    /* Force full utilization of screen real estate */
    --wp-admin-theme-color: var(--zp-primary);
    --wp-admin-theme-color-darker-10: var(--zp-primary-dark);
    --wp-admin-theme-color-darker-20: var(--zp-primary-darker);
}

/* ==========================================================================
   FEATURED IMAGE CENTERING FIX
   ENTERPRISE FIX: Center all featured images across the entire site
   ========================================================================== */

/* Center featured images globally */
.post-image,
.page-image,
.entry-header .featured-image,
.wp-post-image,
.attachment-post-thumbnail {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Featured image container centering */
.featured-image-container,
.post-thumbnail,
.entry-image {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* GeneratePress specific featured image classes */
.page-header-image-single,
.page-header-contained,
.featured-image {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Ensure images within containers are centered */
.featured-image-container img,
.post-thumbnail img,
.entry-image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* WordPress default post thumbnail centering */
.wp-block-post-featured-image {
    text-align: center !important;
}

.wp-block-post-featured-image img {
    margin: 0 auto !important;
    display: block !important;
}

/* Hero/header image centering */
.page-header-image,
.page-header-image img,
.hero-image,
.hero-image img {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Additional GeneratePress image containers */
.inside-article .featured-image,
.inside-article .post-image {
    text-align: center !important;
    margin: 0 auto !important;
}

/* Responsive featured image centering */
@media (max-width: 768px) {
    .post-image,
    .page-image,
    .entry-header .featured-image,
    .wp-post-image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .featured-image-container,
    .post-thumbnail,
    .entry-image {
        text-align: center !important;
        width: 100% !important;
    }
}

/* Final nuclear option fallback - only uncomment if nothing else works */
/*
body.single-vibe *:not(.zp-container):not([class*="zp-"]),
body.page-template-vibes-index *:not(.zp-container):not([class*="zp-"]),
body.archive-vibe *:not(.zp-container):not([class*="zp-"]) {
    max-width: none !important;
}
*/

/* ==========================================================================
   ZIPPICKS DEFAULT PAGE TEMPLATE (Modern Full-Width Design)
   Enterprise-grade template for static pages (Privacy, Terms, About, etc.)
   ========================================================================== */

.zp-page-wrapper {
    width: 100%;
    background: transparent;
}

/* Hero Section - Matches content container */
.zp-page-hero {
    width: 100%;
    padding: 2rem 0 0;
    background: #f8f9fa;
}

.zp-page-hero-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
}

.zp-page-hero-inner {
    background: linear-gradient(135deg, #194FAD 0%, #2563eb 100%);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: calc(100vw - 8rem);
    margin: 0 auto;
}

.zp-page-hero-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(45deg);
}

.zp-page-title {
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.zp-page-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    font-weight: 400;
}

.zp-page-updated {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Content Section with Rounded Corners */
.zp-page-content {
    width: 100%;
    padding: 4rem 0;
    background: #f8f9fa;
}

.zp-page-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4rem;
}

.zp-page-content-inner {
    background: #ffffff;
    padding: 4rem 6rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: none;
    width: 100%;
}

/* Content Typography */
.zp-page-content-inner h2 {
    font-size: 2rem;
    color: #194FAD;
    margin: 2.5rem 0 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.zp-page-content-inner h2:first-child {
    margin-top: 0;
}

.zp-page-content-inner h3 {
    font-size: 1.5rem;
    color: #333;
    margin: 2rem 0 1rem;
    font-weight: 600;
}

.zp-page-content-inner h4 {
    font-size: 1.25rem;
    color: #4b5563;
    margin: 1.5rem 0 1rem;
    font-weight: 600;
}

.zp-page-content-inner p {
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.zp-page-content-inner ul,
.zp-page-content-inner ol {
    margin: 0 0 1.5rem 1.5rem;
    padding-left: 1rem;
}

.zp-page-content-inner li {
    margin-bottom: 0.75rem;
    line-height: 1.8;
    color: #4b5563;
}

.zp-page-content-inner strong {
    color: #333;
    font-weight: 600;
}

.zp-page-content-inner a {
    color: #194FAD;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.zp-page-content-inner a:hover {
    color: #2563eb;
}

.zp-page-content-inner blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: #f3f4f6;
    border-left: 4px solid #194FAD;
    font-style: italic;
    color: #4b5563;
}

/* CTA Section (Optional) */
.zp-page-cta {
    width: 100%;
    padding: 4rem 0;
    background: #ffffff;
}

.zp-page-cta-inner {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.zp-page-cta h2 {
    font-size: 2.5rem;
    color: #194FAD;
    margin-bottom: 1rem;
    font-weight: 700;
}

.zp-page-cta p {
    font-size: 1.25rem;
    color: #4b5563;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .zp-page-hero {
        padding: 1rem 0 0;
    }
    
    .zp-page-hero-container {
        padding: 0 1rem;
    }
    
    .zp-page-hero-inner {
        padding: 2rem;
        border-radius: 12px;
        max-width: calc(100vw - 2rem);
        margin: 0 auto;
    }
    
    .zp-page-title {
        font-size: 2rem;
    }
    
    .zp-page-subtitle {
        font-size: 1.125rem;
    }
    
    .zp-page-content {
        padding: 2rem 0;
    }
    
    .zp-page-container {
        padding: 0 1rem;
    }
    
    .zp-page-content-inner {
        padding: 2rem 2rem;
        border-radius: 12px;
        max-width: none !important;
        width: 100% !important;
    }
    
    .zp-page-content-inner h2 {
        font-size: 1.5rem;
    }
    
    .zp-page-content-inner h3 {
        font-size: 1.25rem;
    }
    
    .zp-page-cta h2 {
        font-size: 2rem;
    }
    
    .zp-page-cta p {
        font-size: 1.125rem;
    }
}

/* Medium Screens */
@media (min-width: 769px) and (max-width: 1399px) {
    .zp-page-hero-container {
        padding: 0 4rem;
    }
    
    .zp-page-hero-inner {
        max-width: calc(100vw - 8rem);
        margin: 0 auto;
    }
    
    .zp-page-content-inner {
        max-width: none !important;
        width: 100% !important;
        padding: 3rem 4rem;
    }
}

/* Large Screens */
@media (min-width: 1400px) {
    .zp-page-container,
    .zp-page-hero-container {
        max-width: 100%;
        padding: 0 8rem;
    }
    
    .zp-page-hero-inner {
        max-width: calc(100vw - 16rem);
        margin: 0 auto;
    }
    
    .zp-page-content-inner {
        padding: 4rem 8rem;
        max-width: none;
        width: 100%;
    }
}

/* Override GeneratePress constraints for default page template - ONLY in main content area */
body.page-template-page-templates-default-page .site-content .content-area,
body.page-template-page-templates-default-page .site-main,
body.page-template-page-templates-default-page main#main,
body.page-template-page-templates-default-page article .entry-content,
body.page-template-page-templates-default-page .site-content .inside-article {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Keep the header/nav normal */
body.page-template-page-templates-default-page .site-header {
    background: inherit;
    padding: inherit;
}

/* Ensure our page wrapper takes full control without layout shift */
body.page-template-page-templates-default-page .zp-page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
}

/* Remove any GeneratePress content area constraints */
body.page-template-page-templates-default-page .separate-containers .inside-article,
body.page-template-page-templates-default-page .one-container .site-content {
    padding: 0 !important;
}

/* ==========================================================================
   CRITICAL FIX: Remove White Background Behind Blue Hero Section
   Enterprise solution for default page template display issues
   ========================================================================== */

/* Remove ALL white backgrounds from GeneratePress containers */
body.page-template-page-templates-default-page .site-content,
body.page-template-page-templates-default-page .content-area,
body.page-template-page-templates-default-page .inside-article,
body.page-template-page-templates-default-page .entry-content,
body.page-template-page-templates-default-page article,
body.page-template-page-templates-default-page main,
body.page-template-page-templates-default-page .site-main {
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the hero section has proper background */
body.page-template-page-templates-default-page .zp-page-hero {
    background: #f8f9fa !important;
    margin: 0 !important;
    padding: 2rem 0 0 !important;
}

/* Remove any container margins that create white space */
body.page-template-page-templates-default-page .container,
body.page-template-page-templates-default-page .grid-container,
body.page-template-page-templates-default-page .inside-container {
    margin: 0 !important;
    background: transparent !important;
}

/* Ensure body background doesn't create white areas */
body.page-template-page-templates-default-page {
    background: #f8f9fa !important;
}

/* Fix any GeneratePress separator containers */
body.page-template-page-templates-default-page .separate-containers .site-content,
body.page-template-page-templates-default-page .separate-containers .content-area {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any default WordPress container backgrounds */
body.page-template-page-templates-default-page .wp-site-blocks,
body.page-template-page-templates-default-page .wp-block-group {
    background: transparent !important;
    margin: 0 !important;
}

/* Ensure the page wrapper takes full control */
body.page-template-page-templates-default-page .zp-page-wrapper {
    background: #f8f9fa !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile responsive fixes for hero section */
@media (max-width: 768px) {
    body.page-template-page-templates-default-page .zp-page-hero {
        padding: 1rem 0 0 !important;
        background: #f8f9fa !important;
    }
    
    /* Ensure mobile containers don't create white space */
    body.page-template-page-templates-default-page .site-content,
    body.page-template-page-templates-default-page .content-area {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* Tablet responsive fixes */
@media (min-width: 769px) and (max-width: 1024px) {
    body.page-template-page-templates-default-page .zp-page-hero {
        background: #f8f9fa !important;
        padding: 1.5rem 0 0 !important;
    }
}

/* ==========================================================================
   ADDITIONAL LAYOUT SHIFT PREVENTION
   Ensure stable layout during page load
   ========================================================================== */

/* Prevent any container width jumping during load */
body.page-template-page-templates-default-page .zp-page-container,
body.page-template-page-templates-default-page .zp-page-hero-container {
    width: 100% !important;
    max-width: 100% !important;
    transition: none !important;
}

/* Ensure content area doesn't shift */
body.page-template-page-templates-default-page .zp-page-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Prevent horizontal scrollbars that could cause shifts */
body.page-template-page-templates-default-page {
    overflow-x: hidden !important;
}

/* Make content loading stable */
body.page-template-page-templates-default-page .zp-page-content-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ==========================================================================
   FINAL HAMBURGER MENU FIX - ABSOLUTE OVERRIDE
   This MUST be at the end of style.css to override everything
   ========================================================================== */

/* Force hamburger to stay white with transparent background */
.zp-header button.zp-mobile-toggle,
.zp-header .zp-mobile-toggle,
button.zp-mobile-toggle,
.zp-mobile-toggle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hamburger lines must be white */
.zp-mobile-toggle__line,
.zp-header .zp-mobile-toggle__line,
button.zp-mobile-toggle .zp-mobile-toggle__line {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Active state overrides */
.zp-mobile-toggle--active,
.zp-mobile-toggle.zp-mobile-toggle--active,
button.zp-mobile-toggle--active,
button.zp-mobile-toggle.zp-mobile-toggle--active {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

/* Remove all filters and shadows that could darken the button */
.zp-mobile-toggle,
.zp-mobile-toggle:hover,
.zp-mobile-toggle:focus,
.zp-mobile-toggle:active,
.zp-mobile-toggle--active {
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}