/*
Theme Name: Astra Child
Theme URI: https://climbandrelax.com
Description: Child theme for Astra - Climb and Relax custom styles
Author: Climb & Relax
Template: astra
Version: 2.3.1
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. Header Customizations
      1.1 Sticky Header (Non-transparent pages)
      1.2 Call-to-Action Button Colors (Desktop)
      1.3 Mobile Menu Toggle Button
   2. Page Animations
      2.1 Global Fade-in Effect
      2.2 Hero Section Exclusions
   3. Post Content Simple Layout
      3.1 Blog Post Layout - Clean & Simple
   ========================================================================== */


/* ==========================================================================
   1. HEADER CUSTOMIZATIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 Sticky Header (Non-transparent pages)
   --------------------------------------------------------------------------
   Makes the header stick to the top when scrolling on pages where the
   transparent header is disabled (Blog, Contact, About, Plan-your-trip, 
   Cookie Policy EU, and all Posts)
   -------------------------------------------------------------------------- */

.page-id-911 .site-header,  /* Blog page */
.page-id-150 .site-header,  /* Contact page */
.page-id-792 .site-header,  /* About page */
.page-id-837 .site-header,  /* Plan-your-trip page */
.page-id-1515 .site-header, /* Cookie Policy EU page */
.type-post .site-header,    /* All blog posts */
.single-post .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background-color: #ffffff !important;
    transition: box-shadow 0.3s ease; /* Smooth shadow transition on scroll */
}


/* --------------------------------------------------------------------------
   1.2 Call-to-Action Button Colors (Desktop Only)
   --------------------------------------------------------------------------
   Changes the "Plan your trip" button colors on specific pages.
   Only applies on desktop screens (922px and wider).
   
   Normal state: Background uses global-color-2, text uses global-color-5
   Hover state: Background uses global-color-1, text uses global-color-5
   -------------------------------------------------------------------------- */

@media (min-width: 922px) {
    /* Normal button state */
    .page-id-911 .ast-header-button-1 .ast-custom-button,  /* Blog */
    .page-id-150 .ast-header-button-1 .ast-custom-button,  /* Contact */
    .page-id-792 .ast-header-button-1 .ast-custom-button,  /* About */
    .page-id-837 .ast-header-button-1 .ast-custom-button,  /* Plan-your-trip */
    .page-id-1515 .ast-header-button-1 .ast-custom-button, /* Cookie Policy EU */
    .type-post .ast-header-button-1 .ast-custom-button,    /* All posts */
    .single-post .ast-header-button-1 .ast-custom-button {
        background-color: var(--ast-global-color-2) !important;
        color: var(--ast-global-color-5) !important;
    }
    
    /* Button hover state */
    .page-id-911 .ast-header-button-1 .ast-custom-button:hover,
    .page-id-150 .ast-header-button-1 .ast-custom-button:hover,
    .page-id-792 .ast-header-button-1 .ast-custom-button:hover,
    .page-id-837 .ast-header-button-1 .ast-custom-button:hover,
    .page-id-1515 .ast-header-button-1 .ast-custom-button:hover,
    .type-post .ast-header-button-1 .ast-custom-button:hover,
    .single-post .ast-header-button-1 .ast-custom-button:hover {
        background-color: var(--ast-global-color-1) !important;
        color: var(--ast-global-color-5) !important;
    }
}


/* --------------------------------------------------------------------------
   1.3 Mobile Menu Toggle Button
   --------------------------------------------------------------------------
   Customizes the hamburger menu button for mobile devices:
   - Changes border color to global-color-2 on non-transparent header pages
   - Changes icon color to match
   - Removes focus outlines that appear after closing the menu
   -------------------------------------------------------------------------- */

/* Border and icon color for toggle button on specific pages */
.page-id-911 .ast-mobile-menu-trigger-outline,  /* Blog */
.page-id-150 .ast-mobile-menu-trigger-outline,  /* Contact */
.page-id-792 .ast-mobile-menu-trigger-outline,  /* About */
.page-id-837 .ast-mobile-menu-trigger-outline,  /* Plan-your-trip */
.page-id-1515 .ast-mobile-menu-trigger-outline, /* Cookie Policy EU */
.type-post .ast-mobile-menu-trigger-outline,    /* All posts */
.single-post .ast-mobile-menu-trigger-outline {
    border-color: var(--ast-global-color-2) !important;
}

/* Hamburger icon SVG color */
.page-id-911 .ast-mobile-menu-trigger-outline .ast-mobile-svg,
.page-id-150 .ast-mobile-menu-trigger-outline .ast-mobile-svg,
.page-id-792 .ast-mobile-menu-trigger-outline .ast-mobile-svg,
.page-id-837 .ast-mobile-menu-trigger-outline .ast-mobile-svg,
.page-id-1515 .ast-mobile-menu-trigger-outline .ast-mobile-svg,
.type-post .ast-mobile-menu-trigger-outline .ast-mobile-svg,
.single-post .ast-mobile-menu-trigger-outline .ast-mobile-svg {
    fill: var(--ast-global-color-2) !important;
}

/* Icon container color */
.page-id-911 .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon,
.page-id-150 .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon,
.page-id-792 .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon,
.page-id-837 .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon,
.page-id-1515 .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon,
.type-post .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon,
.single-post .ast-mobile-menu-trigger-outline .mobile-menu-toggle-icon {
    color: var(--ast-global-color-2) !important;
}

/* Remove focus outline from minimal menu trigger */
.ast-button-wrap .ast-mobile-menu-trigger-minimal:focus {
    border-width: 0px !important;
    outline: none;
}

/* Remove focus outline from close button (X) when menu is open */
.ast-mobile-popup-drawer.active .menu-toggle-close:focus {
    border-width: 0px !important;
    outline: none;
}

/* Remove outline from mobile dropdown menu items */
.ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle {
    border-width: 0px !important;
    outline: none;
}

/* Remove focus outline from hamburger menu button after closing */
.ast-mobile-menu-trigger-outline:focus,
.menu-toggle:focus,
.main-header-menu-toggle:focus {
    outline: none !important;
    border-color: var(--ast-global-color-2) !important;
    box-shadow: none !important;
}

/* Remove focus-visible state */
.ast-mobile-menu-trigger-outline:focus-visible,
.menu-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure no border appears after closing mobile menu */
.ast-mobile-popup-drawer:not(.active) ~ .ast-mobile-header-wrap .menu-toggle:focus {
    border-color: var(--ast-global-color-2) !important;
    outline: none !important;
}

/* Remove focus outline from desktop menu links */
.ast-desktop-header .main-header-menu .menu-item > a:focus,
.ast-desktop-header .main-header-menu .menu-item > a:focus-visible,
.ast-desktop-header .ast-masthead-custom-menu-items a:focus,
.ast-desktop-header .ast-masthead-custom-menu-items a:focus-visible,
.main-header-bar .main-header-menu .menu-item > a:focus,
.main-header-bar .main-header-menu .menu-item > a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus from submenu items */
.ast-desktop-header .main-header-menu .sub-menu .menu-item > a:focus,
.ast-desktop-header .main-header-menu .sub-menu .menu-item > a:focus-visible,
.main-header-bar .main-header-menu .sub-menu .menu-item > a:focus,
.main-header-bar .main-header-menu .sub-menu .menu-item > a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}



/* ==========================================================================
   2. PAGE ANIMATIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Global Fade-in Effect for All Pages
   --------------------------------------------------------------------------
   Creates a scroll-triggered fade-in animation for all Elementor widgets
   across the entire website. Elements fade in as they enter the viewport.
   
   - Initial state: opacity 0 (hidden)
   - Transition: 1.5s fade
   - Staggered delays for sequential elements (0s, 0.1s, 0.2s, etc.)
   - JavaScript adds 'fade-in-visible' class when element enters viewport
   
   IMPORTANT: Hero sections on Home and Destinations pages are excluded
   to prevent background images from fading in (see section 2.2 below)
   -------------------------------------------------------------------------- */

/* Widgets with exclude-fade class - COMPLETELY excluded from our system */
/* Don't apply ANY rules to these widgets */

/* Hide all OTHER Elementor widgets initially (but NOT exclude-fade) */
body:not(.elementor-editor-active) .elementor-widget:not(.exclude-fade):not(.no-fade-in *) {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* Show elements when they become visible (class added by JavaScript) */
body:not(.elementor-editor-active) .elementor-widget.fade-in-visible:not(.exclude-fade) {
    opacity: 1;
}

/* Let Elementor handle its own animated widgets */
body:not(.elementor-editor-active) .elementor-widget.elementor-invisible {
    opacity: 0;
    /* Remove our transition so Elementor can control it */
    transition: none !important;
}

/* Staggered delays for sequential fade-in effect */
body:not(.elementor-editor-active) .elementor-widget:nth-child(1).fade-in-visible {
    transition-delay: 0s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(2).fade-in-visible {
    transition-delay: 0.1s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(3).fade-in-visible {
    transition-delay: 0.2s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(4).fade-in-visible {
    transition-delay: 0.3s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(5).fade-in-visible {
    transition-delay: 0.4s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(6).fade-in-visible {
    transition-delay: 0.5s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(7).fade-in-visible {
    transition-delay: 0.6s !important;
}

body:not(.elementor-editor-active) .elementor-widget:nth-child(8).fade-in-visible {
    transition-delay: 0.7s !important;
}


/* --------------------------------------------------------------------------
   2.2 Hero Section Exclusions - Custom Class Method
   --------------------------------------------------------------------------
   Prevents fade-in animation on specific containers using custom CSS class.
   
   USAGE:
   1. Edit page in Elementor
   2. Click the container you want to exclude (typically Header with bg image)
   3. Go to Advanced → CSS Classes
   4. Add class: no-fade-in
   5. Update page
   
   All widgets inside containers with 'no-fade-in' class will appear 
   immediately without fade-in animation.
   
   PAGES THAT NEED THIS CLASS:
   - Home (395) - Header container
   - Destinations (144) - Header container
   - Catalonia (869) - Header container
   - Greece (1487) - Header container
   - Turkey (1479) - Header container
   
   This approach is:
   - Reusable across any page
   - Easy to add/remove
   - Self-documenting (class name explains purpose)
   - Independent of page structure
   -------------------------------------------------------------------------- */

.no-fade-in .elementor-widget,
body:not(.elementor-editor-active) .no-fade-in .elementor-widget {
    opacity: 1 !important;
    transition: none !important;
}


/* ==========================================================================
   3. POST CONTENT SIMPLE LAYOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Blog Post Layout - Clean & Simple
   --------------------------------------------------------------------------
   Desktop: 600px centered text, 840px centered images
   Mobile/Tablet: 20px side padding for everything
   -------------------------------------------------------------------------- */

/* ====================
   DESKTOP (1025px+)
   ==================== */

/* Post Title - 600px centered */
.single-post .elementor-widget-theme-post-title .elementor-heading-title {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Post Content - text 600px, images 840px */
.single-post .elementor-widget-theme-post-content p,
.single-post .elementor-widget-theme-post-content h1,
.single-post .elementor-widget-theme-post-content h2,
.single-post .elementor-widget-theme-post-content h3,
.single-post .elementor-widget-theme-post-content h4,
.single-post .elementor-widget-theme-post-content h5,
.single-post .elementor-widget-theme-post-content h6,
.single-post .elementor-widget-theme-post-content ul,
.single-post .elementor-widget-theme-post-content ol,
.single-post .elementor-widget-theme-post-content blockquote {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Blockquote specific styling */
.single-post .elementor-widget-theme-post-content blockquote {
    border-left: 4px solid var(--ast-global-color-3);
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-style: italic;
    color: #555;
}

/* List indentation - move bullets to the right (desktop) */
.single-post .elementor-widget-theme-post-content ul,
.single-post .elementor-widget-theme-post-content ol {
    padding-left: 30px;
}

/* Spacing between list items */
.single-post .elementor-widget-theme-post-content li {
    margin-bottom: 12px;
}

.single-post .elementor-widget-theme-post-content li:last-child {
    margin-bottom: 0;
}

/* Heading hierarchy - font sizes only (keep original theme weights) */
/* Exclude headings inside .full-width-cta containers */
.single-post .elementor-widget-theme-post-content h1:not(.full-width-cta h1),
.single-post .elementor-widget-theme-post-content h1:not(.full-width-cta *) {
    font-size: 38px;
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.single-post .elementor-widget-theme-post-content h2:not(.full-width-cta h2),
.single-post .elementor-widget-theme-post-content h2:not(.full-width-cta *) {
    font-size: 24px;
    margin-top: 35px;
    margin-bottom: 15px;
    line-height: 1.3;
}

.single-post .elementor-widget-theme-post-content h3:not(.full-width-cta h3),
.single-post .elementor-widget-theme-post-content h3:not(.full-width-cta *) {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.single-post .elementor-widget-theme-post-content h4:not(.full-width-cta h4),
.single-post .elementor-widget-theme-post-content h4:not(.full-width-cta *) {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.single-post .elementor-widget-theme-post-content h5:not(.full-width-cta h5),
.single-post .elementor-widget-theme-post-content h5:not(.full-width-cta *) {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.single-post .elementor-widget-theme-post-content h6:not(.full-width-cta h6),
.single-post .elementor-widget-theme-post-content h6:not(.full-width-cta *) {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Small text */
.single-post .elementor-widget-theme-post-content small {
    font-size: 14px;
}

/* Add margin-bottom to all headings - COMMENTED OUT (using hierarchy margins instead)
.single-post .elementor-widget-theme-post-content h1,
.single-post .elementor-widget-theme-post-content h2,
.single-post .elementor-widget-theme-post-content h3,
.single-post .elementor-widget-theme-post-content h4,
.single-post .elementor-widget-theme-post-content h5,
.single-post .elementor-widget-theme-post-content h6 {
    margin-bottom: 10px;
}
*/

.single-post .elementor-widget-theme-post-content img {
    max-width: 840px;
    width: 100%;
    height: auto;
    display: block;
    margin: 30px auto;
}

/* Gallery widget INSIDE post content - same styling as images */
.single-post .elementor-widget-theme-post-content .elementor-widget-gallery {
    max-width: 840px !important;
    width: 100% !important;
    margin: 30px auto !important;
    display: block !important;
}

/* Target the gallery container inside */
.single-post .elementor-widget-theme-post-content .elementor-widget-gallery .elementor-gallery__container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ====================
   MOBILE/TABLET (≤1024px)
   ==================== */

@media (max-width: 1024px) {
    /* Post Title - 30px padding (20px + 10px to match content widget padding) */
    .single-post .elementor-widget-theme-post-title .elementor-heading-title {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
    
    /* Post Content text - 20px padding (Elementor widget already has 10px) */
    .single-post .elementor-widget-theme-post-content p,
    .single-post .elementor-widget-theme-post-content h1,
    .single-post .elementor-widget-theme-post-content h2,
    .single-post .elementor-widget-theme-post-content h3,
    .single-post .elementor-widget-theme-post-content h4,
    .single-post .elementor-widget-theme-post-content h5,
    .single-post .elementor-widget-theme-post-content h6,
    .single-post .elementor-widget-theme-post-content ul,
    .single-post .elementor-widget-theme-post-content ol,
    .single-post .elementor-widget-theme-post-content blockquote {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Images - 20px padding (Elementor widget already has 10px) */
    .single-post .elementor-widget-theme-post-content img {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    
    /* Gallery widget INSIDE post content - same styling as images (mobile) */
    .single-post .elementor-widget-theme-post-content .elementor-widget-gallery {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* Gallery container respects parent padding */
    .single-post .elementor-widget-theme-post-content .elementor-widget-gallery .elementor-gallery__container {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* List indentation - move bullets to the right (mobile) */
    .single-post .elementor-widget-theme-post-content ul,
    .single-post .elementor-widget-theme-post-content ol {
        padding-left: 45px !important;
    }
}

/* Links inside post content TEXT ONLY - underlined (not buttons/widgets) */
.single-post .elementor-widget-theme-post-content p a,
.single-post .elementor-widget-theme-post-content li a {
    text-decoration: underline;
}

.single-post .elementor-widget-theme-post-content p a:hover,
.single-post .elementor-widget-theme-post-content li a:hover {
    text-decoration: none;
}

/* Full-width class for CTAs and special elements in posts */
.single-post .elementor-widget-theme-post-content .full-width-cta {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile - same but with standard padding */
@media (max-width: 1024px) {
    .single-post .elementor-widget-theme-post-content .full-width-cta {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}