/*
 * Odysseys From Africa - Modern Design Enhancements
 * Enhances existing Travolo theme without changing layout
 * Version: 1.0
 */

/* ============================================
   HIDE OLD ELEMENTOR FOOTER (replaced by SEO footer)
   ============================================ */
footer > .elementor,
footer .elementor-41,
footer .elementor-43 {
    display: none !important;
}

/* ============================================
   CUSTOM PROPERTIES
   ============================================ */
:root {
    --ody-gold: #b69063;
    --ody-gold-light: #dfbd8f;
    --ody-gold-lighter: #f5e6d0;
    --ody-brown: #463e31;
    --ody-brown-dark: #231f20;
    --ody-transition: cubic-bezier(0.4, 0, 0.2, 1);
    --ody-shadow-sm: 0 1px 3px rgba(70, 62, 49, 0.08);
    --ody-shadow-md: 0 4px 14px rgba(70, 62, 49, 0.1);
    --ody-shadow-lg: 0 10px 30px rgba(70, 62, 49, 0.12);
    --ody-shadow-xl: 0 20px 50px rgba(70, 62, 49, 0.15);
    --ody-radius-sm: 8px;
    --ody-radius-md: 12px;
    --ody-radius-lg: 16px;
    --ody-radius-xl: 24px;
}

/* ============================================
   SCROLL ANIMATIONS - fade/slide in on scroll
   ============================================ */
.ody-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ody-transition), transform 0.7s var(--ody-transition);
    will-change: opacity, transform;
}

.ody-animate.ody-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.ody-stagger > .ody-animate:nth-child(1) { transition-delay: 0s; }
.ody-stagger > .ody-animate:nth-child(2) { transition-delay: 0.1s; }
.ody-stagger > .ody-animate:nth-child(3) { transition-delay: 0.2s; }
.ody-stagger > .ody-animate:nth-child(4) { transition-delay: 0.3s; }
.ody-stagger > .ody-animate:nth-child(5) { transition-delay: 0.4s; }
.ody-stagger > .ody-animate:nth-child(6) { transition-delay: 0.5s; }

/* Slide from left */
.ody-slide-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s var(--ody-transition), transform 0.6s var(--ody-transition);
}
.ody-slide-left.ody-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.ody-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s var(--ody-transition), transform 0.6s var(--ody-transition);
}
.ody-slide-right.ody-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.ody-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s var(--ody-transition), transform 0.6s var(--ody-transition);
}
.ody-scale.ody-visible {
    opacity: 1;
    transform: scale(1);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .ody-animate, .ody-slide-left, .ody-slide-right, .ody-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================
   TYPOGRAPHY REFINEMENTS
   ============================================ */

/* Section titles - refined spacing and weight */
.sec-title,
.title-selector,
.elementor-heading-title {
    letter-spacing: -0.02em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Subtle text shadow on hero headings for depth */
.breadcumb-wrapper .sec-title,
.elementor-section[data-settings*=\"background\"] .elementor-heading-title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   BUTTONS - Modern & Polished
   ============================================ */
.vs-btn,
.elementor-button,
.wpte-trip-explore-btn,
.category-trip-viewmre-btn,
a.btn-wrapper,
.wte-book-now-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.35s var(--ody-transition) !important;
    border-radius: var(--ody-radius-sm) !important;
    letter-spacing: 0.03em;
}

/* Shine sweep effect on hover */
.vs-btn::after,
.elementor-button::after,
.wpte-trip-explore-btn::after {
    content: \'\';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.6s var(--ody-transition);
    pointer-events: none;
}

.vs-btn:hover::after,
.elementor-button:hover::after,
.wpte-trip-explore-btn:hover::after {
    left: 125%;
}

/* Button lift on hover */
.vs-btn:hover,
.elementor-button:hover,
.wpte-trip-explore-btn:hover,
.category-trip-viewmre-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ody-shadow-lg) !important;
}

.vs-btn:active,
.elementor-button:active {
    transform: translateY(0) !important;
}

/* ============================================
   CARDS - Trip Cards & Category Cards
   ============================================ */

/* Trip cards */
.category-trips-single-inner-wrap,
.wpte-trip-single,
.wpte-trip-category .wpte-inner-container {
    border-radius: var(--ody-radius-lg) !important;
    overflow: hidden;
    transition: transform 0.4s var(--ody-transition), box-shadow 0.4s var(--ody-transition) !important;
    box-shadow: var(--ody-shadow-sm);
    backface-visibility: hidden;
}

.category-trips-single-inner-wrap:hover,
.wpte-trip-single:hover,
.wpte-trip-category .wpte-inner-container:hover {
    transform: translateY(-6px);
    box-shadow: var(--ody-shadow-xl) !important;
}

/* Card images - smooth zoom */
.category-trips-single-inner-wrap img,
.wpte-trip-single img,
.wpte-trip-category figure img,
.category-trip-fig img {
    transition: transform 0.6s var(--ody-transition) !important;
    will-change: transform;
}

.category-trips-single-inner-wrap:hover img,
.wpte-trip-single:hover img,
.wpte-trip-category .wpte-inner-container:hover img,
.category-trip-fig:hover img {
    transform: scale(1.06) !important;
}

/* Featured badge */
.featured-text-wrap,
.category-feat-ribbon .category-feat-ribbon-txt {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Price tag refinement */
.category-trip-price .trip-price,
.wpte-trip-price .trip-price {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ============================================
   NAVIGATION - Smooth & Modern
   ============================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Navigation links hover underline effect */
.main-menu > ul > li > a {
    position: relative;
}

.main-menu > ul > li > a::after {
    content: \'\';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--ody-gold);
    transition: width 0.3s var(--ody-transition), left 0.3s var(--ody-transition);
}

.main-menu > ul > li > a:hover::after,
.main-menu > ul > li.current-menu-item > a::after {
    width: 100%;
    left: 0;
}

/* Dropdown menus */
.main-menu ul li ul.sub-menu {
    border-radius: var(--ody-radius-md) !important;
    box-shadow: var(--ody-shadow-lg) !important;
    border: 1px solid rgba(223, 189, 143, 0.15) !important;
    overflow: hidden;
    animation: ody-dropdown 0.25s var(--ody-transition);
}

@keyframes ody-dropdown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   HEADER - Glassmorphism on scroll
   ============================================ */
.sticky-wrapper.is-sticky .vs-header,
.she-header-yes .elementor-section.she-header {
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    background: rgba(35, 31, 32, 0.88) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.4s var(--ody-transition) !important;
}

/* ============================================
   HERO / BREADCRUMB AREA
   ============================================ */
.breadcumb-wrapper {
    position: relative;
}

.breadcumb-wrapper::after {
    content: \'\';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */
.e-con.e-parent + .e-con.e-parent {
    position: relative;
}

/* ============================================
   IMAGES - Modern Treatment
   ============================================ */
.elementor-image img,
.wp-post-image {
    border-radius: var(--ody-radius-sm);
}

/* Image overlay on hover for linked images */
a > .elementor-image img {
    transition: filter 0.4s var(--ody-transition), transform 0.4s var(--ody-transition);
}

a:hover > .elementor-image img {
    filter: brightness(1.05);
}

/* ============================================
   FORMS - Search & Contact
   ============================================ */
.hfe-search-form__input,
.wpcf7 input[type=\"text\"],
.wpcf7 input[type=\"email\"],
.wpcf7 textarea,
.advanced-search-wrapper input[type=\"search\"] {
    border-radius: var(--ody-radius-sm) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.hfe-search-form__input:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: var(--ody-gold) !important;
    box-shadow: 0 0 0 3px rgba(182, 144, 99, 0.12) !important;
    outline: none !important;
}

/* ============================================
   SCROLL-TO-TOP BUTTON
   ============================================ */
.scrollToTop,
.hfe-scroll-to-top-wrap {
    border-radius: 50% !important;
    transition: all 0.3s var(--ody-transition) !important;
    box-shadow: var(--ody-shadow-md) !important;
}

.scrollToTop:hover,
.hfe-scroll-to-top-wrap:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: var(--ody-shadow-lg) !important;
}

/* ============================================
   LOADING SKELETON - Perceived Performance
   ============================================ */
img[loading=\"lazy\"] {
    background: linear-gradient(90deg, #f0ebe4 25%, #f8f4ef 50%, #f0ebe4 75%);
    background-size: 200% 100%;
    animation: ody-shimmer 1.5s ease infinite;
}

img[loading=\"lazy\"][src] {
    animation: none;
    background: none;
}

@keyframes ody-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   FOOTER - Refined
   ============================================ */
footer .elementor-widget-container a {
    transition: color 0.25s ease, opacity 0.25s ease !important;
}

footer .elementor-widget-container a:hover {
    opacity: 0.85;
}

footer .elementor-icon-list-item a:hover .elementor-icon-list-text {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ============================================
   WP TRAVEL ENGINE - Trip Archive Refinements
   ============================================ */

/* Filter sidebar */
.advanced-search-wrapper {
    border-radius: var(--ody-radius-lg) !important;
    overflow: hidden;
}

.advanced-search-wrapper .sidebar {
    border-radius: var(--ody-radius-lg) !important;
}

.advanced-search-field {
    border-radius: var(--ody-radius-sm) !important;
    transition: background 0.2s ease;
}

/* Trip grid items smooth entrance */
.wp-travel-engine-archive-repeater-wrap .category-trips-single {
    animation: ody-card-in 0.5s var(--ody-transition) both;
}

.wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(1) { animation-delay: 0s; }
.wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(2) { animation-delay: 0.08s; }
.wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(3) { animation-delay: 0.16s; }
.wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(4) { animation-delay: 0.24s; }
.wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(5) { animation-delay: 0.32s; }
.wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(6) { animation-delay: 0.4s; }

@keyframes ody-card-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toolbar / sort dropdown */
.wte-filterby-dropdown .wpte__select-options {
    border-radius: var(--ody-radius-md) !important;
    box-shadow: var(--ody-shadow-lg) !important;
    animation: ody-dropdown 0.2s var(--ody-transition);
}

/* ============================================
   SWIPER / SLIDER ENHANCEMENTS
   ============================================ */
.wpte-swiper .swiper-slide {
    transition: opacity 0.4s ease;
}

.swiper-button-next,
.swiper-button-prev,
.wpte-swiper-btn {
    transition: all 0.3s var(--ody-transition) !important;
    border-radius: 50% !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.wpte-swiper-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: var(--ody-shadow-md) !important;
}

/* ============================================
   SMOOTH PAGE TRANSITIONS
   ============================================ */
.hfeed.site {
    animation: ody-page-in 0.4s var(--ody-transition);
}

@keyframes ody-page-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   SELECTION COLOR
   ============================================ */
::selection {
    background: var(--ody-gold-light);
    color: var(--ody-brown-dark);
}

::-moz-selection {
    background: var(--ody-gold-light);
    color: var(--ody-brown-dark);
}

/* ============================================
   FOCUS STYLES - Accessibility
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--ody-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* ============================================
   MOBILE HEADER - Logo left, buttons right
   ============================================ */
@media (max-width: 1024px) {
    /* Main nav header row: force flex row */
    .elementor-element-40a443c5 > .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 15px !important;
    }

    /* Logo column: shrink to content, align left */
    .elementor-element-40a443c5 .elementor-element-5e4aba6 {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* Logo: left align, reasonable size */
    .elementor-element-40a443c5 .wpr-logo {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .elementor-element-40a443c5 .wpr-logo img {
        max-height: 50px !important;
        width: auto !important;
    }

    /* Nav column: hide on mobile (already hidden, but reinforce) */
    .elementor-element-40a443c5 .elementor-element-63924891 {
        display: none !important;
    }

    /* Buttons column: shrink to content, align right */
    .elementor-element-40a443c5 .elementor-element-2bdcad80 {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .elementor-element-40a443c5 .elementor-element-2bdcad80 > .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        justify-content: flex-end !important;
    }

    /* Search icon */
    .elementor-element-40a443c5 .elementor-element-dfdcf62 {
        width: auto !important;
        margin: 0 !important;
    }

    /* Shop button */
    .elementor-element-40a443c5 .elementor-element-1b244fd {
        width: auto !important;
        margin: 0 !important;
    }

    .elementor-element-40a443c5 .elementor-element-1b244fd .elementor-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Hamburger / offcanvas toggle */
    .elementor-element-40a443c5 .elementor-element-b5b2935 {
        width: auto !important;
        margin: 0 !important;
    }

    /* Mobile menu / offcanvas: ensure it sits above all content */
    .ekit-sidebar-group {
        z-index: 999999 !important;
        position: fixed !important;
    }

    .ekit-overlay {
        z-index: 999998 !important;
        position: fixed !important;
    }

    .ekit-sidebar-widget {
        z-index: 999999 !important;
    }

    /* WPR mobile nav menu overlay */
    .wpr-mobile-nav-menu {
        z-index: 999999 !important;
    }

    /* Header itself should be above page content */
    #masthead,
    header#masthead {
        position: relative;
        z-index: 9999 !important;
    }
}

/* Touch devices: disable hover transforms that feel janky on tap */
@media (hover: none) and (pointer: coarse) {
    .vs-btn:hover,
    .elementor-button:hover,
    .wpte-trip-explore-btn:hover,
    .category-trip-viewmre-btn:hover {
        transform: none !important;
    }

    .vs-btn::after,
    .elementor-button::after,
    .wpte-trip-explore-btn::after {
        display: none !important;
    }

    .category-trips-single-inner-wrap:hover,
    .wpte-trip-single:hover,
    .wpte-trip-category .wpte-inner-container:hover {
        transform: none;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        transform: none !important;
    }

    .scrollToTop:hover,
    .hfe-scroll-to-top-wrap:hover {
        transform: none !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .wprev-slider ul {
        gap: 14px !important;
        padding: 10px 6px 24px !important;
    }

    .wprev-slider ul li {
        flex: 0 0 260px !important;
        max-width: 260px !important;
    }

    .wprev-slider .wptripadvisor_t1_outer_div {
        padding: 18px !important;
    }

    .wprev-slider .wptripadvisor_t1_P_3 {
        font-size: 13px !important;
        -webkit-line-clamp: 4;
    }

    /* Trip cards: full width on very small screens */
    .category-trips-single-inner-wrap,
    .wpte-trip-single {
        border-radius: var(--ody-radius-md) !important;
    }

    /* Section titles smaller on mobile */
    .sec-title,
    .title-selector,
    .elementor-heading-title {
        word-break: break-word;
    }
}

/* Tablets and below */
@media (max-width: 768px) {
    /* Reduce animation distance on mobile */
    .ody-animate {
        transform: translateY(20px);
    }

    .ody-slide-left {
        transform: translateX(-20px);
    }

    .ody-slide-right {
        transform: translateX(20px);
    }

    /* Trip grid animation — less stagger on mobile */
    .wp-travel-engine-archive-repeater-wrap .category-trips-single:nth-child(n+3) {
        animation-delay: 0.16s;
    }

    /* Dropdown menus — full width on mobile */
    .main-menu ul li ul.sub-menu {
        border-radius: 0 !important;
    }

    /* Breadcrumb text shadow lighter */
    .breadcumb-wrapper .sec-title {
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
}

/* SEO Footer mobile stacking */
@media (max-width: 768px) {
    #ody-seo-footer > div:first-child {
        grid-template-columns: 1fr !important;
        padding: 40px 16px 30px !important;
        gap: 30px !important;
    }

    /* Nav group (Destinations + Company) stays 2 columns on mobile */
    .ody-footer-nav-group {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .ody-footer-nav-group h3 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .ody-footer-nav-group li {
        margin-bottom: 8px !important;
    }

    .ody-footer-nav-group a {
        font-size: 12px !important;
    }

    #ody-seo-footer div[itemscope] h3 {
        margin-bottom: 14px !important;
    }

    /* Bottom bar stacks centered */
    #ody-seo-footer > div:last-child {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }
}

/* Preloader on mobile - smaller logo */
@media (max-width: 480px) {
    #ody-preloader .ody-pre-logo {
        width: 80px;
        height: 80px;
    }
    #ody-preloader .ody-pre-slogan {
        font-size: 12px;
        letter-spacing: 0.1em;
        padding: 0 20px;
        text-align: center;
    }
    #ody-preloader .ody-pre-bar {
        width: 80px;
    }
}

/* ============================================
   PERFORMANCE: GPU compositing hints
   (Skip header to avoid breaking fixed/absolute mobile menus)
   ============================================ */
.e-con.e-parent:not(header *),
.elementor-section:not(header .elementor-section) {
    contain: layout style;
}

/* ============================================
   TESTIMONIALS - Horizontal Scrolling Carousel
   ============================================ */

/* Override the plugin\'s one-at-a-time display */
.wprev-slider ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 20px 10px 30px !important;
    list-style: none !important;
    justify-content: center !important;
}

/* Show ALL testimonials - responsive fit */
.wprev-slider ul li {
    display: block !important;
    flex: 1 1 300px !important;
    max-width: 400px !important;
    opacity: 1 !important;
    animation: none !important;
}

/* Mobile: horizontal scroll */
@media (max-width: 768px) {
    .wprev-slider ul {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        scrollbar-width: thin;
        scrollbar-color: var(--ody-gold) transparent;
    }

    .wprev-slider ul::-webkit-scrollbar {
        height: 4px;
    }

    .wprev-slider ul::-webkit-scrollbar-thumb {
        background: var(--ody-gold);
        border-radius: 4px;
    }

    .wprev-slider ul li {
        flex: 0 0 300px !important;
        max-width: 300px !important;
        scroll-snap-align: start !important;
    }
}

/* Card styling */
.wprev-slider .wptripadvisor_t1_outer_div {
    background: #fff !important;
    border-radius: var(--ody-radius-lg) !important;
    box-shadow: var(--ody-shadow-md) !important;
    padding: 24px !important;
    height: 100% !important;
    transition: transform 0.35s var(--ody-transition), box-shadow 0.35s var(--ody-transition) !important;
    position: relative;
    border: 1px solid rgba(182, 144, 99, 0.1);
}

.wprev-slider .wptripadvisor_t1_outer_div:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ody-shadow-xl) !important;
}

/* Review text */
.wprev-slider .wptripadvisor_t1_P_3 {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #4a443d !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Review title */
.wprev-slider .wprevrevtitle {
    display: block !important;
    font-weight: 600 !important;
    color: var(--ody-brown-dark) !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
}

/* Stars */
.wprev-slider .wptripadvisor_star_imgs_T1 {
    display: block !important;
    margin-bottom: 10px !important;
}

.wprev-slider .wptripadvisor_t1_star_img_file {
    height: 16px !important;
    width: auto !important;
}

/* Author name */
.wprev-slider .wptripadvisor_t1_SPAN_5 {
    font-weight: 600 !important;
    color: var(--ody-brown) !important;
    font-size: 14px !important;
}

.wprev-slider .wprev_showdate_T1 {
    font-weight: 400 !important;
    color: #9a917e !important;
    font-size: 12px !important;
}

/* Avatar */
.wprev-slider .wptripadvisor_t1_IMG_4 {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid var(--ody-gold-lighter) !important;
    object-fit: cover !important;
}

/* Auto-scroll removed — was clipping cards on desktop */