/* ==========================================================================
   GRANDVANTAGE TOURS — ELEMENTOR OVERRIDES
   Customizations to default Elementor widget styling to match our design system.
   ========================================================================== */

/* ---------- Global Elementor Overrides ---------- */

/* Force Elementor to use our fonts */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--ff-heading);
}

.elementor-widget-text-editor {
    font-family: var(--ff-body);
}

/* Remove default Elementor section padding where we handle our own */
/* Legacy Sections: enforce our container width */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--container-max, 1280px) !important;
}

/* New Elementor Container widget (Flexbox Container) */
.e-con {
    --container-max-width: var(--container-max, 1280px) !important;
}
.e-con.e-con-boxed {
    max-width: var(--container-max, 1280px) !important;
}
.e-con-inner {
    max-width: var(--container-max, 1280px) !important;
    margin-left: auto;
    margin-right: auto;
}

/* Full-width sections should span 100% */
.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100%;
}
.e-con.e-con-full {
    max-width: 100%;
}

/* Homepage specific: ensure all Elementor sections use correct width */
body.home .elementor-section-boxed > .elementor-container,
body.page-template-default .elementor-section-boxed > .elementor-container {
    max-width: var(--container-max, 1280px) !important;
}

/* Elementor widget inner content should not be constrained narrower */
body.home .elementor-widget-wrap,
body.page-template-default .elementor-widget-wrap {
    max-width: 100%;
}

/* ---------- Elementor Button Overrides ---------- */
.elementor-button-wrapper .elementor-button {
    font-family: var(--ff-body);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    transition: all var(--transition);
}

.elementor-button-wrapper .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---------- Elementor Form Overrides ---------- */
.elementor-form .elementor-field {
    font-family: var(--ff-body);
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border);
    padding: 12px 16px;
    transition: border-color var(--transition-fast);
}

.elementor-form .elementor-field:focus {
    border-color: var(--clr-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb), 0.15);
}

/* ---------- Elementor Tab Overrides ---------- */
.elementor-widget-tabs .elementor-tab-title {
    font-family: var(--ff-body);
    font-weight: var(--fw-semibold);
}

.elementor-widget-tabs .elementor-tab-title.elementor-active {
    color: var(--clr-accent);
}

/* ---------- Elementor Accordion Overrides ---------- */
.elementor-widget-accordion .elementor-accordion-title {
    font-family: var(--ff-heading);
    font-weight: var(--fw-semibold);
}

/* ---------- Elementor Image Carousel Overrides ---------- */
.elementor-widget-image-carousel .swiper-pagination-bullet-active {
    background-color: var(--clr-accent);
}

.elementor-widget-image-carousel .elementor-swiper-button {
    color: var(--clr-accent);
}

/* ---------- Hello Elementor Theme Overrides ---------- */

/* Remove default Hello Elementor header/footer if using Theme Builder */
.elementor-location-header + #masthead,
.elementor-location-footer + footer {
    display: none;
}

/* Ensure proper body background */
body.elementor-page {
    background-color: var(--clr-white);
}

/* ---------- Single Tour Page Layout ---------- */
body.single-grandvantage-tour .elementor-section-wrap > .elementor-section:first-child {
    padding-top: 0;
}

/* ---------- Archive Grid Override ---------- */
body.archive-grandvantage-tour .elementor-posts-container {
    gap: var(--sp-xl);
}

/* ---------- Navigation Menu Widget Override ---------- */
.elementor-widget-nav-menu .elementor-nav-menu > li > a {
    font-family: var(--ff-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    color: var(--clr-dark);
    transition: color var(--transition-fast);
}

.elementor-widget-nav-menu .elementor-nav-menu > li > a:hover {
    color: var(--clr-accent);
}

/* ---------- Kit / Global Widget Overrides ---------- */

/* Force consistent link colors */
a:not(.elementor-button):not(.grandvantage-btn) {
    transition: color var(--transition-fast);
}

a:not(.elementor-button):not(.grandvantage-btn):hover {
    color: var(--clr-accent);
}

/* ---------- Hide Default Page Title on Elementor Pages ---------- */
/* The theme renders a `.page-header > h1.entry-title` on all pages.
   When Elementor provides its own hero/title section, hide the redundant one. */
.page .page-header,
.page-template-default .page-header,
.elementor-page .page-header {
    display: none;
}

/* ---------- Remove Gap Between Content and Footer ---------- */
/* Eliminate any padding/margin gap between the last Elementor widget and the footer */
.elementor .elementor-section:last-child,
.elementor .e-con:last-child,
.elementor-section-wrap > .elementor-section:last-child,
.elementor > .elementor-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------- Newsletter Widget — Full-Width Breakout ---------- */
/* Ensure the newsletter widget fills the entire viewport width
   regardless of Elementor container / boxed layout constraints. */
.elementor-widget-grandvantage_newsletter_signup {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.elementor-widget-grandvantage_newsletter_signup > .elementor-widget-container {
    overflow: visible !important;
}
.elementor-widget-grandvantage_newsletter_signup .grandvantage-newsletter {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
}
/* Remove gap between the Elementor section/container holding the newsletter and footer */
.elementor-section:has(.elementor-widget-grandvantage_newsletter_signup),
.e-con:has(.elementor-widget-grandvantage_newsletter_signup) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove bottom spacing on Elementor page content wrapper */
.site-main,
.page-content,
.entry-content,
#content,
.elementor-page .site-main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove gap between Elementor widget area and footer element */
.elementor-widget-wrap:last-child > .elementor-widget:last-child,
.elementor-element:last-child {
    margin-bottom: 0 !important;
}

/* Remove any e-con bottom margin/padding (new Elementor containers) */
.e-con:last-child {
    margin-bottom: 0 !important;
}

/* === Top Bar Inline Search === */
.top-bar-search {
    flex: 1;
    max-width: 360px;
    margin: 0 20px;
}

.top-bar-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 100px;
    padding: 5px 16px;
    height: 30px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}

.top-bar-search-form:hover,
.top-bar-search-form:focus-within {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.3);
}

.top-bar-search-form i {
    color: var(--clr-accent-light, #E09B4A);
    font-size: .72rem;
    flex-shrink: 0;
}

.top-bar-search-form input[type="text"] {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--ff-body, 'Inter', sans-serif);
    font-size: .75rem;
    color: rgba(255,255,255,.7);
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

.top-bar-search-form input[type="text"]::placeholder {
    color: rgba(255,255,255,.4);
}

@media (max-width: 768px) {
    .top-bar-search { display: none !important; }
}


/* ==========================================================================
   TRANSPARENT HEADER — Asilia-style (homepage only)
   On the front page when video hero is active, the header (top-bar + navbar)
   overlays the hero with transparent backgrounds and white text.
   On scroll past the hero, it transitions to a solid white navbar.
   ========================================================================== */

/* --- Wrapper: pin the header to top, overlay the content --- */
.header-transparent .top-bar {
    background: transparent;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .4s, border-color .4s;
}

.header-transparent .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
    transition: top .35s cubic-bezier(.4,0,.2,1), background .4s, border-color .4s, box-shadow .4s;
}

/* Logo text white */
.header-transparent .navbar .logo-name {
    color: #fff !important;
    transition: color .4s;
}
.header-transparent .navbar .logo-tagline {
    color: rgba(255,255,255,.6) !important;
    transition: color .4s;
}

/* Nav links white */
.header-transparent .navbar .nav-link {
    color: rgba(255,255,255,.85) !important;
    transition: color .4s, background .4s;
}
.header-transparent .navbar .nav-link:hover,
.header-transparent .navbar .nav-link.active {
    color: var(--clr-accent-light, #E09B4A) !important;
    background: rgba(255,255,255,.08) !important;
}

/* CTA buttons adjust */
.header-transparent .navbar .btn-whatsapp {
    border-color: rgba(255,255,255,.25) !important;
    color: #fff !important;
    background: transparent !important;
    transition: all .4s;
}
.header-transparent .navbar .btn-whatsapp:hover {
    background: rgba(37,211,102,.15) !important;
    border-color: #25D366 !important;
}
.header-transparent .navbar .btn-primary {
    transition: all .4s;
}

/* Mobile hamburger bars — white */
.header-transparent .navbar .mobile-toggle span {
    background: #fff !important;
    transition: background .4s;
}

/* Ensure mobile toggle is visible */
.header-transparent .navbar .mobile-toggle {
    z-index: 10;
}

/* ---------- SCROLLED STATE ---------- */
/* Once scrolled, revert to solid navbar */
.header-transparent .navbar.scrolled {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--clr-border, #E2DED5) !important;
    box-shadow: 0 8px 30px rgba(59,35,20,.1) !important;
}

.header-transparent .navbar.scrolled .logo-name {
    color: var(--clr-primary, #3B2314) !important;
}
.header-transparent .navbar.scrolled .logo-tagline {
    color: var(--clr-muted, #6B7B74) !important;
}
.header-transparent .navbar.scrolled .nav-link {
    color: var(--clr-body, #2C2C2C) !important;
}
.header-transparent .navbar.scrolled .nav-link:hover,
.header-transparent .navbar.scrolled .nav-link.active {
    color: var(--clr-accent, #C9982E) !important;
    background: rgba(201,152,46,.06) !important;
}
.header-transparent .navbar.scrolled .btn-whatsapp {
    border-color: #25D366 !important;
    color: #25D366 !important;
    background: transparent !important;
}
.header-transparent .navbar.scrolled .mobile-toggle span {
    background: var(--clr-primary, #3B2314) !important;
}

/* --- On transparent header, top-bar hides on scroll --- */
.header-transparent .top-bar {
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
}
.header-transparent .top-bar.hidden-on-scroll {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* --- Hero adjusts for transparent header --- */
/* Since .navbar is position:fixed (out of flow), the hero naturally
   starts at page top. The top-bar IS in the flow, so hero sits just
   below it. We just need to ensure the hero extends up behind the
   top-bar as well, and the content doesn't hide under the navbar. */
.header-transparent .hero,
.header-transparent .hero.hero-video-bg {
    margin-top: -40px; /* pull up behind the top-bar */
    padding-top: 140px; /* push content below navbar */
}

/* --- Mobile adjustments for transparent header --- */
@media (max-width: 768px) {
    .header-transparent .hero,
    .header-transparent .hero.hero-video-bg {
        margin-top: -40px;
        padding-top: 100px;
    }

    /* Hamburger toggle — ensure it is clickable and visible on mobile */
    .mobile-toggle,
    .header-transparent .mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        position: relative;
        z-index: 1010;
        cursor: pointer;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        width: 28px;
        height: 20px;
        padding: 0;
    }

    /* Ensure hamburger spans are always visible */
    .mobile-toggle span,
    .header-transparent .mobile-toggle span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
    }

    /* Mobile menu panel — ABOVE the fixed navbar */
    .navbar-menu.open,
    .header-transparent .navbar-menu.open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        background: #fff !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }

    /* CRITICAL: Force dark text on mobile menu links when menu is open.
       The transparent header styles set nav-link color to white for the
       hero overlay, which makes links invisible in the white mobile menu panel. */
    .navbar-menu.open .nav-link,
    .navbar-menu.open > a,
    .header-transparent .navbar-menu.open .nav-link,
    .header-transparent .navbar-menu.open > a,
    .header-transparent .navbar.scrolled .navbar-menu.open .nav-link,
    .header-transparent .navbar .navbar-menu.open .nav-link {
        color: var(--clr-body, #2C2C2C) !important;
    }

    .navbar-menu.open .nav-link:hover,
    .navbar-menu.open > a:hover,
    .header-transparent .navbar-menu.open .nav-link:hover,
    .header-transparent .navbar-menu.open > a:hover {
        color: var(--clr-accent, #C9982E) !important;
        background: rgba(201,152,46,.06) !important;
    }

    .navbar-menu.open .nav-link.active,
    .navbar-menu.open > a.active,
    .header-transparent .navbar-menu.open .nav-link.active,
    .header-transparent .navbar-menu.open > a.active {
        color: var(--clr-accent, #C9982E) !important;
    }

    /* Mobile dropdown sub-links — also force dark text */
    .navbar-menu.open .nav-dropdown-content a,
    .header-transparent .navbar-menu.open .nav-dropdown-content a {
        color: var(--clr-body, #2C2C2C) !important;
    }
    .navbar-menu.open .nav-dropdown-content a:hover,
    .header-transparent .navbar-menu.open .nav-dropdown-content a:hover {
        color: var(--clr-accent, #C9982E) !important;
    }
}

/* ==========================================================================
   PLAYBOOK PHASE 11: EDGE-TO-EDGE BREAKOUT RULES
   Target both Flexbox Containers and Classic Sections for custom hero/CTA widgets
   ========================================================================== */
.e-con:has([data-widget_type^="grandvantage_hero"]),
.e-con:has([data-widget_type^="grandvantage_tours_hero"]),
.e-con:has([data-widget_type^="grandvantage_dest_hero"]),
.e-con:has([data-widget_type^="grandvantage_about_hero"]),
.e-con:has([data-widget_type^="grandvantage_travellers_hero"]),
.e-con:has([data-widget_type^="grandvantage_blog_hero"]),
.e-con:has([data-widget_type^="grandvantage_contact_hero"]),
.e-con:has([data-widget_type^="grandvantage_cta"]),
.e-con:has([data-widget_type^="grandvantage_tours_cta"]),
.e-con:has([data-widget_type^="grandvantage_newsletter_signup"]) {
    --container-max-width: 100% !important;
    --content-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.e-con:has([data-widget_type^="grandvantage_hero"]) > .e-con-inner,
.e-con:has([data-widget_type^="grandvantage_tours_hero"]) > .e-con-inner,
.e-con:has([data-widget_type^="grandvantage_dest_hero"]) > .e-con-inner,
.e-con:has([data-widget_type^="grandvantage_about_hero"]) > .e-con-inner,
.e-con:has([data-widget_type^="grandvantage_travellers_hero"]) > .e-con-inner,
.e-con:has([data-widget_type^="grandvantage_blog_hero"]) > .e-con-inner,
.e-con:has([data-widget_type^="grandvantage_contact_hero"]) > .e-con-inner {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Classic Sections edge-to-edge */
.elementor-section:has([data-widget_type^="grandvantage_hero"]) > .elementor-container,
.elementor-section:has([data-widget_type^="grandvantage_tours_hero"]) > .elementor-container,
.elementor-section:has([data-widget_type^="grandvantage_dest_hero"]) > .elementor-container,
.elementor-section:has([data-widget_type^="grandvantage_about_hero"]) > .elementor-container,
.elementor-section:has([data-widget_type^="grandvantage_travellers_hero"]) > .elementor-container,
.elementor-section:has([data-widget_type^="grandvantage_blog_hero"]) > .elementor-container,
.elementor-section:has([data-widget_type^="grandvantage_contact_hero"]) > .elementor-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Constrain SVG icons inside custom widgets so they do not blow out */
.elementor-widget[data-widget_type^="grandvantage_"] svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

/* Suppress default theme / Elementor entry titles when our hero widget is present */
.page-header,
h1.entry-title,
.elementor-page-title {
    display: none !important;
}