/*
Theme Name: Shri Amarnath Ji Yatra 2026
Theme URI: 
Author: Asrar Bashir
Author URI: 
Description: A Sustainable & Zero Landfill Event Theme for Shri Amarnath Ji Yatra 2026.
Version: 1.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amarnathyatra
*/

/* Custom styles not covered by Tailwind can go here */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-gradient {
    background: linear-gradient(to top, rgba(2, 75, 52, 0.8) 0%, rgba(2, 75, 52, 0.3) 50%, rgba(2, 75, 52, 0.1) 100%);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none !important;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.bento-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-item:hover {
    transform: translateY(-4px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Force ALL custom widgets to perfectly fill their containers */
.elementor-widget-yatra_hero_slider,
.elementor-widget-yatra_about,
.elementor-widget-yatra_objective,
.elementor-widget-yatra_info_cards,
.elementor-widget-yatra_gallery,
.elementor-widget-yatra_pledge,
.elementor-widget-yatra_inner_header,
.elementor-widget-yatra_content_block,
.elementor-widget-yatra_stats {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force the inner widget container to have zero spacing */
.elementor-widget-yatra_hero_slider .elementor-widget-container,
.elementor-widget-yatra_about .elementor-widget-container,
.elementor-widget-yatra_objective .elementor-widget-container,
.elementor-widget-yatra_info_cards .elementor-widget-container,
.elementor-widget-yatra_gallery .elementor-widget-container,
.elementor-widget-yatra_pledge .elementor-widget-container,
.elementor-widget-yatra_inner_header .elementor-widget-container,
.elementor-widget-yatra_content_block .elementor-widget-container,
.elementor-widget-yatra_stats .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* 
 * MASTER BREAKOUT RULE
 * Automatically force Elementor containers to become Full Width (100%), remove all default 
 * 10px padding/gaps, and disable overflow clipping if they contain ANY of our custom Yatra widgets. 
 * This allows our widgets' internal Tailwind containers to perfectly control the layout!
 */
.e-con:has(.elementor-widget-yatra_hero_slider),
.e-con:has(.elementor-widget-yatra_about),
.e-con:has(.elementor-widget-yatra_objective),
.e-con:has(.elementor-widget-yatra_info_cards),
.e-con:has(.elementor-widget-yatra_gallery),
.e-con:has(.elementor-widget-yatra_pledge),
.e-con:has(.elementor-widget-yatra_inner_header),
.e-con:has(.elementor-widget-yatra_content_block),
.e-con:has(.elementor-widget-yatra_stats),
.elementor-section:has(.elementor-widget-yatra_hero_slider),
.elementor-section:has(.elementor-widget-yatra_about),
.elementor-section:has(.elementor-widget-yatra_objective),
.elementor-section:has(.elementor-widget-yatra_info_cards),
.elementor-section:has(.elementor-widget-yatra_gallery),
.elementor-section:has(.elementor-widget-yatra_pledge),
.elementor-section:has(.elementor-widget-yatra_inner_header),
.elementor-section:has(.elementor-widget-yatra_content_block),
.elementor-section:has(.elementor-widget-yatra_stats),
.e-flexbox-base:has(.elementor-widget-yatra_hero_slider),
.e-flexbox-base:has(.elementor-widget-yatra_about),
.e-flexbox-base:has(.elementor-widget-yatra_objective),
.e-flexbox-base:has(.elementor-widget-yatra_info_cards),
.e-flexbox-base:has(.elementor-widget-yatra_gallery),
.e-flexbox-base:has(.elementor-widget-yatra_pledge),
.e-flexbox-base:has(.elementor-widget-yatra_inner_header),
.e-flexbox-base:has(.elementor-widget-yatra_content_block),
.e-flexbox-base:has(.elementor-widget-yatra_stats) {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
}

/* WordPress Sub-Menu (Dropdown) Styling */
#site-navigation li.menu-item-has-children {
    position: relative;
    padding-right: 16px;
}

#site-navigation li.menu-item-has-children::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    transition: transform 0.3s ease;
}

#site-navigation li.menu-item-has-children:hover>a::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Change icon for nested submenus */
#site-navigation ul.sub-menu li.menu-item-has-children::after {
    content: "chevron_right";
    transform: translateY(-50%);
    color: #0F172A;
}

#site-navigation ul.sub-menu li.menu-item-has-children:hover::after {
    transform: translateY(-50%) translateX(3px);
}

#site-navigation ul.sub-menu {
    position: absolute;
    top: calc(100% + 25px);
    /* Push dropdown below navbar */
    left: -10px;
    /* Align nicer */
    min-width: 240px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

#site-navigation li:hover>ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nested Sub-Menu (2nd level dropdowns) should fly out to the right */
#site-navigation ul.sub-menu ul.sub-menu {
    top: -8px;
    /* Align perfectly with the parent li padding */
    left: 100%;
    /* Fly out to the right */
    transform: translateX(15px);
    /* Slide in from right */
}

#site-navigation ul.sub-menu li:hover>ul.sub-menu {
    transform: translateX(0);
}

/* Fix nested invisible bridge */
#site-navigation ul.sub-menu li.menu-item-has-children::before {
    top: 0;
    left: 100%;
    right: auto;
    width: 20px;
    height: 100%;
}

/* Invisible bridge so mouse doesn't fall through the gap */
#site-navigation li.menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 35px;
}

#site-navigation ul.sub-menu li {
    display: block;
    position: relative;
}

#site-navigation ul.sub-menu li span {
    display: block !important;
    color: inherit !important;
}

#site-navigation ul.sub-menu li a {
    display: block;
    padding: 12px 24px;
    color: #0F172A;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
}

#site-navigation ul.sub-menu li a:hover {
    color: #e91e63;
    /* Primary magenta */
    background: rgba(15, 23, 42, 0.03);
    /* Subtle slate background */
    padding-left: 28px;
}

/* Mobile Menu Sub-Menu Styling */
#mobile-menu li.menu-item-has-children {
    position: relative;
}

#mobile-menu li.menu-item-has-children>a {
    display: inline-block;
}

#mobile-menu ul.sub-menu {
    padding-left: 24px;
    margin-top: 16px;
    margin-bottom: 8px;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    gap: 16px;
    border-left: 2px solid rgba(0, 0, 0, 0.05);
}

#mobile-menu li.menu-item-has-children.open>ul.sub-menu {
    display: flex;
    /* Show when open */
}

/* Mobile Dropdown Toggle Icon */
#mobile-menu li.menu-item-has-children>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#mobile-menu li.menu-item-has-children>a::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    color: #4a4a4a;
    transition: transform 0.3s ease;
}

#mobile-menu li.menu-item-has-children.open>a::after {
    transform: rotate(180deg);
}

#mobile-menu ul.sub-menu li a {
    font-size: 17px;
    font-weight: 600;
    color: #4a4a4a;
    transition: color 0.2s ease;
}

#mobile-menu ul.sub-menu li a:hover {
    color: #024B34;
}