/* =============================================================================
   INSPIRE TRAVELS & TOURS - CUSTOM CSS
   =============================================================================
   
   Author: Zig Zag AI
   Description: Custom styles that complement Tailwind CSS
   Purpose: Styles that are difficult to achieve with Tailwind utilities alone
   
   Table of Contents:
   1. Scroll Control
   2. CSS Variables & Root Styles
   3. Text Effects & Typography
   4. Liquid Glass Effects
   5. Layout Components
   6. Gallery & Modal Components
   7. Responsive Design
   8. Accessibility & Browser Support
   
   ============================================================================= */

/* =============================================================================
   1. SCROLL CONTROL
   ============================================================================= */
html, body {
    overflow-x: hidden;
}

/* =============================================================================
   2. CSS VARIABLES & ROOT STYLES
   ============================================================================= */

:root {
    /* Sri Lankan-inspired color palette */
    --primary-color: oklch(0.35 0.15 195); /* Deep teal */
    --secondary-color: oklch(0.65 0.12 35); /* Terracotta */
    --accent-color: oklch(0.75 0.15 75); /* Golden yellow */
    --background-color: oklch(0.98 0.01 85); /* Warm off-white */
    --text-color: oklch(0.15 0.02 45); /* Deep charcoal */
    --muted-color: oklch(0.45 0.02 45); /* Muted text */
}

/* =============================================================================
   3. TEXT EFFECTS & TYPOGRAPHY
   ============================================================================= */

/* Enhanced gradient text effect for headings */
.gradient-text {
    background: linear-gradient(to right, oklch(0.35 0.15 195), oklch(0.65 0.12 35), oklch(0.75 0.15 75));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Logo color switching for navigation */
.nav-logo {
    transition: filter 0.3s ease;
}

.nav-logo.light-logo {
    /* For dark sections - make logo white/light */
    filter: brightness(0) invert(1);
}

.nav-logo.dark-logo {
    /* For light sections - make logo dark */
    filter: brightness(0) invert(0);
}

/* Enhanced navigation text visibility */
.nav-link {
    transition: all 0.3s ease;
}

/* Make navigation text bolder when in dark mode (black text on light backgrounds) */
.nav-link.text-foreground {
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Active state styling - same golden color for both dark and light sections */
.nav-link.text-accent,
.nav-link.text-primary {
    color: #FFB347 !important; /* Fallback hex color for golden yellow */
    font-weight: 900 !important;
}

/* Ensure hover colors use the orange accent color */
.nav-link:hover {
    color: #FFB347 !important; /* Fallback hex color for golden yellow */
}

/* =============================================================================
   4. LIQUID GLASS EFFECTS
   ============================================================================= */

/* 
 * LIQUID GLASS EFFECT SYSTEM
 * 
 * A sophisticated glass morphism effect with customizable parameters:
 * 
 * CUSTOMIZATION GUIDE:
 * 1. BLUR INTENSITY: Change 'blur(4px)' in ::after pseudo-elements
 *    - 0px = completely clear glass
 *    - 2px-4px = subtle blur (recommended)
 *    - 8px+ = strong blur
 * 
 * 2. GLASS SHINE: Change '0.7' values in ::before box-shadow
 *    - 0.3-0.5 = subtle shine
 *    - 0.7-1.0 = bright shine (current)
 * 
 * 3. DISTORTION: SVG filter in HTML controls liquid effect intensity
 *    - Edit #container-glass filter in index.html for different distortion
 */

/* Base liquid glass styles - shared by all liquid glass elements */
.liquid-glass {
    position: relative;
    background: transparent;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

/* Additional styles for interactive liquid glass elements */
.liquid-glass {
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    border-radius: 0;
}

/* Glass shine/highlight layer - shared by all liquid glass elements */
.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    /* GLASS SHINE CONTROL: Adjust highlight intensity here */
    /* Lower values (0.3-0.5) = subtle shine, Higher values (0.7-1.0) = bright shine */
    box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7),
                inset 0 0 3px 1px rgba(255, 255, 255, 0.7);
}

/* Background distortion and blur layer - shared by all liquid glass elements */
.liquid-glass::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    /* BLUR CONTROL: Adjust blur intensity here */
    /* 0px = clear glass, 2px-4px = subtle blur, 8px+ = strong blur */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    /* DISTORTION CONTROL: Uses SVG filter for liquid effect */
    filter: url(#container-glass);
    overflow: hidden;
    isolation: isolate;
}

/* =============================================================================
   5. LAYOUT COMPONENTS
   ============================================================================= */

/* GoWilds Footer Styling */
.gowilds-footer { 
    background-color: #1D231F; 
    color: #FFFFFF; 
}

.gowilds-footer .widget-title { 
    color: #FFFFFF; 
}

.gowilds-footer .footer-widget-nav a { 
    color: rgba(255,255,255,0.8); 
}

.gowilds-footer .footer-widget-nav a:hover { 
    color: #F7921E; 
}

.gowilds-footer .footer-text, 
.gowilds-footer p { 
    color: rgba(255,255,255,0.8); 
}

.gowilds-footer .info .title { 
    color: #FFFFFF;
}

.gowilds-footer .social a { 
    color: #FFFFFF;
}

.gowilds-footer .social a:hover { 
    color: #63AB45; 
}

.gowilds-footer .btn-primary { 
    background-color: #F7921E; 
    color: #FFFFFF; 
}

.gowilds-footer .btn-primary:hover { 
    background-color: #d97f18; 
}

/* Blog Post Styling */
.single-blog-post {
    margin-bottom: 40px;
}

.single-blog-post .post-thumbnail img {
    width: 100%;
    border-radius: 15px;
}

.single-blog-post .entry-content {
    padding: 0 15px 0;
}

.single-blog-post .cat-btn {
    background-color: #F7921E;
    color: #fff;
    padding: 6px 20px;
    border-radius: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 15px;
    transform: rotate(-6.08deg) translate(20px, -25px);
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(247, 146, 30, 0.3);
}

.single-blog-post .post-meta {
    margin-bottom: 7px;
}

.single-blog-post .post-meta span {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-blog-post .title {
    font-size: 24px;
    font-weight: 600;
    color: #1D231F;
    margin-bottom: 30px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.single-blog-post:hover .title {
    color: #63AB45;
}

/* =============================================================================
   6. GALLERY & MODAL COMPONENTS
   ============================================================================= */

/* Gallery Modal Styling */
#galleryModal {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

#galleryModal .relative {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    position: relative !important;
    box-sizing: border-box !important;
}

#modalImage {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    display: block !important;
    margin: auto !important;
}

#modalPrevBtn,
#modalNextBtn,
#galleryModal button[onclick="closeGalleryModal()"] {
    z-index: 10000 !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Ensure proper image loading */
#modalImage[src=""] {
    display: none !important;
}

/* Smooth transitions for all modal elements */
#galleryModal,
#galleryModal .relative,
#modalImage {
    transition: all 0.3s ease-in-out !important;
}

/* =============================================================================
   7. RESPONSIVE DESIGN
   ============================================================================= */


/* Responsive Adjustments for Blog Posts */
@media (max-width: 768px) {
    .single-blog-post .entry-content {
        padding: 20px 25px 25px;
    }
    
    .single-blog-post .title {
        font-size: 18px;
    }
    
    .single-blog-post .cat-btn {
        transform: rotate(-3deg) translate(15px, -20px);
        padding: 6px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .single-blog-post .entry-content {
        padding: 15px 20px 20px;
    }
    
    .single-blog-post .title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .single-blog-post .cat-btn {
        transform: rotate(-2deg) translate(10px, -15px);
        padding: 5px 14px;
        font-size: 12px;
    }
}

/* Mobile Optimizations for Gallery Modal */
@media (max-width: 768px) {
    #galleryModal {
        padding: 0.5rem !important;
    }
    
    #galleryModal .relative {
        max-width: 98vw !important;
        max-height: 98vh !important;
    }
    
    #modalImage {
        border-radius: 0.25rem !important;
    }
    
    #modalPrevBtn,
    #modalNextBtn,
    #galleryModal button[onclick="closeGalleryModal()"] {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* Handle Very Wide Images (Landscape) */
@media (min-aspect-ratio: 16/9) {
    #modalImage {
        max-height: 90vh !important;
    }
}

/* Handle Very Tall Images (Portrait) */
@media (max-aspect-ratio: 4/5) {
    #modalImage {
        max-width: 90vw !important;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    #galleryModal .relative {
        max-width: 80vw !important;
        max-height: 80vh !important;
    }
}

/* Small screens */
@media (max-width: 480px) {
    #galleryModal {
        padding: 0.25rem !important;
    }
    
    #galleryModal .relative {
        max-width: 99vw !important;
        max-height: 99vh !important;
    }
    
    #modalPrevBtn,
    #modalNextBtn,
    #galleryModal button[onclick="closeGalleryModal()"] {
        width: 2rem !important;
        height: 2rem !important;
    }
}


/* =============================================================================
   8. ACCESSIBILITY & BROWSER SUPPORT
   ============================================================================= */


/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .liquid-glass {
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid var(--primary-color);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (for future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: oklch(0.08 0.02 45);
        --text-color: oklch(0.95 0.01 85);
        --muted-color: oklch(0.65 0.02 45);
    }
}