/*
Theme Name: Pinnacle New
Author: Antigravity
Description: Custom theme for Amity School Dubai clone
Version: 1.1
*/

:root {
    --primary-blue: #342D56;
    --accent-gold: #AC9147;
    --light-bg: #f8f9fa;
    --text-dark: #342D56;
    --menu-overlay-bg: #AC9147;
    /* Standard Yellow for overlay */
}

/* Utility Colors */
.text-dark {
    color: var(--text-dark) !important;
}

.text-light,
.text-white {
    color: #ffffff !important;
}

body {

    color: var(--text-dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--primary-blue);
}

/* --- Header Styling --- */
.site-header {
    background: transparent;
    transition: background-color 0.4s ease, padding 0.4s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Header Transparent State - Gradient Overlay for Readability */
.site-header.header-transparent {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    padding-bottom: 2rem;
    /* Give space for gradient to fade */
    transition: background 0.3s ease;
}

/* Scrolled State - Solid Background (overrides transparency) */
.site-header.scrolled {
    background: #ffffff !important;
    /* Or user preference via JS/PHP */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding-bottom: 0;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header.scrolled .navbar-brand span {
    color: #342D56 !important;
}

.site-header.scrolled .navbar-brand .bg-dark {
    background-color: #342D56 !important;
}

/* --- Full Screen Offcanvas Menu (Adjusted to 50% Width) --- */
.offcanvas {
    /* Default for mobile */
    width: 100% !important;
    background-color: var(--menu-overlay-bg);
}

@media (min-width: 992px) {
    .offcanvas {
        width: 50vw !important;
        /* 50% of screen width */
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
    }
}

/* Premium Menu Items (Level 1) */
.main-nav-custom .nav-link {
    font-family: 'Outfit', sans-serif;
    color: var(--primary-blue) !important;
    position: relative;
    padding-left: 0;
    transition: all 0.3s ease;
    letter-spacing: -0.5px;
    font-size: 1.5rem;
    font-weight: 600;
}

.main-nav-custom .nav-link:hover,
.main-nav-custom .nav-link.active {
    padding-left: 20px;
}

/* Arrow Handling */
.arrow-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

/* Desktop Submenu Card */
@media (min-width: 992px) {

    /* Vertical Center Content within the 50% panel */
    .offcanvas-body {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Center the whole combined block */
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
    }

    .offcanvas-body .container-fluid {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Layout: Menu Block (Left) and Card Block (Right) */
    .offcanvas-body .row {
        width: 100% !important;
        justify-content: center;
        /* Center columns together */
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        position: relative;
        /* Context for alignment */
    }

    /* Column 1 (Level 1 Menu) */
    .menu-col-1 {
        width: 40% !important;
        padding-right: 2rem !important;
        /* Restore some padding for spacing */
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Stretch to fill width */
    }

    /* Column 2 (Submenu Card) */
    .menu-col-2 {
        width: 45% !important;
        padding-left: 0 !important;
        flex-shrink: 0;
        margin-left: -15px;
        /* Pull tighter */
    }

    /* DESKTOP ARROW HANDLING - FIXED */
    .main-nav-custom .menu-item-has-children>.nav-link {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding-right: 10px;
        /* Space for arrow */
    }

    .main-nav-custom .nav-link .arrow-icon {
        opacity: 1 !important;
        /* ALWAYS VISIBLE */
        transform: none !important;
        /* No sliding */
        margin-left: auto;
        /* Force to right */
        font-size: 1rem;
        color: var(--primary-blue) !important;
    }

    /* Desktop arrow rotation on active */
    .main-nav-custom .nav-link.active .arrow-icon {
        transform: rotate(0deg);
    }

    .submenu-card {
        background-color: #FFFDF5;
        border: none;
        border-radius: 20px;
        box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1) !important;
        height: auto !important;
        min-height: 300px;
        max-height: 70vh;
        overflow-y: auto;
        width: 100%;
        position: relative;
        z-index: 10;
        padding: 2rem !important;
    }


    /* Level 2 Items in Card */
    .submenu-content>li>a {
        padding: 12px 20px;
        border-radius: 10px;
        transition: all 0.2s;
        color: var(--primary-blue) !important;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .submenu-content>li>a:hover {
        background-color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        color: #AC9147 !important;
        /* Gold on hover */
    }

    /* Level 3 Items in Card */
    .submenu-content .sub-menu li a {
        font-size: 0.95rem;
        color: #555 !important;
        padding: 6px 0;
        font-weight: 500;
    }

    .submenu-content .sub-menu li a:hover {
        color: var(--primary-blue) !important;
        text-decoration: underline !important;
    }
}

/* Mobile & Global Hidden States */
.main-nav-custom .sub-menu {
    display: none;
    overflow: hidden;
    /* For smooth animation */
    transition: max-height 0.4s ease-in-out;
}

/* Mobile Styles */
@media (max-width: 991.98px) {

    /* Mobile Menu Styles */
    .main-nav-custom .nav-link {
        font-size: 1.2rem !important;
        /* Reduced from 1.5rem */
        padding: 0.8rem 1rem;
        /* Reduced padding */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        width: 100% !important;
        /* Full Width */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main-nav-custom>li:first-child .nav-link {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Force Arrow Visibility on Mobile */
    .arrow-icon {
        opacity: 1 !important;
        color: var(--primary-blue) !important;
        transition: transform 0.3s ease;
    }

    /* Mobile Menu Spacing */
    .offcanvas-body {
        /* Clear the yellow Close bar */
    }

    /* Level 1 Expanded */
    /* Mobile Accordion Animation Handling */
    .main-nav-custom .sub-menu {
        display: block;
        /* We control visibility via height/display in JS, but for animation we need block */
        max-height: 0;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        background-color: transparent;
        margin: 0;
    }

    .main-nav-custom .sub-menu.mobile-visible {
        max-height: 1000px;
        /* Arbitrary large height for opening */
        opacity: 1;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    /* Level 2 Mobile Items */
    .main-nav-custom .sub-menu li a {
        color: var(--primary-blue) !important;
        padding: 1rem 1.5rem;
        display: block;
        font-size: 1.1rem;
        font-weight: 500;
        background-color: rgba(255, 255, 255, 0.3);
        /* Slight background for contrast */
        margin-bottom: 2px;
    }

    /* Level 3 Indent */
    .main-nav-custom .sub-menu .sub-menu {
        background-color: transparent;
        padding-left: 1rem;
        border-left: 2px solid rgba(0, 0, 0, 0.1);
        margin-top: 0;
    }

    .submenu-card {
        display: none !important;
        /* Ensure card is hidden on mobile */
    }
}

/* --- Section Styling --- */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    background-color: #342D56;
    overflow: hidden;
}

.hero-content {
    z-index: 2;
    padding-top: 60px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

.stats-ticker {
    background-color: var(--accent-gold);
    color: var(--primary-blue);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.card-hover-effect {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.card-hover-effect:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.section-title {
    position: relative;
    margin-bottom: 2.5rem;
}

/* Yellow Underline for Section Titles */
.section-heading-wrapper h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-heading-wrapper h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background-color: var(--accent-gold);
    border-radius: 2px;
}

.section-heading-wrapper.text-center h2::after {
    left: 50%;
    transform: translateX(-50%);
}

.btn-custom-outline {
    border: 2px solid #342D56;
    color: #342D56;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-custom-outline:hover {
    background-color: #342D56;
    color: white;
}

/* --- Inner Page Sidebar Menu (Added for Inner Page Template) --- */
.inner-page-menu .page_item,
.inner-page-menu .menu-item {
    position: relative;
}

.inner-page-menu .page_item a,
.inner-page-menu .menu-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.inner-page-menu .page_item a:hover,
.inner-page-menu .menu-item a:hover,
.inner-page-menu .page_item.current_page_item>a,
.inner-page-menu .page_item.current-menu-parent>a,
.inner-page-menu .menu-item.current-menu-item>a,
.inner-page-menu .menu-item.current-menu-parent>a {
    color: #fff !important;
    padding-left: 10px;
    border-color: var(--accent-gold);
}

.inner-page-menu .page_item.current_page_item>a,
.inner-page-menu .menu-item.current-menu-item>a {
    font-weight: 700;
    color: var(--accent-gold) !important;
}

/* Sidebar Sub-menus (Accordions) */
.inner-page-menu .children,
.inner-page-menu .sub-menu {
    display: none;
    /* Collapsed by default */
    list-style: none;
    padding-left: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    border-radius: 4px;
}

.inner-page-menu .children li a,
.inner-page-menu .sub-menu li a {
    font-size: 0.95rem;
    border-bottom: none;
    padding: 8px 10px;
}

.inner-page-menu .children li a:hover,
.inner-page-menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Show submenu if open class is toggled OR if it's the current parent tree */
.inner-page-menu .page_item.menu-open>.children,
.inner-page-menu .page_item.menu-open>.sub-menu,
.inner-page-menu .menu-item.menu-open>.children,
.inner-page-menu .menu-item.menu-open>.sub-menu,
.inner-page-menu .current-menu-parent>.children,
.inner-page-menu .current-menu-parent>.sub-menu,
.inner-page-menu .current-menu-ancestor>.children,
.inner-page-menu .current-menu-ancestor>.sub-menu {
    display: block !important;
}

/* Sidebar Arrow Icons */
.inner-menu-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: #ffffff !important;
    /* Force white for visibility */
    opacity: 1 !important;
    /* Remove opacity-50 effect */
}

.inner-page-menu .page_item.menu-open>a .inner-menu-arrow,
.inner-page-menu .menu-item.menu-open>a .inner-menu-arrow {
    transform: rotate(90deg);
}

/* Ensure Inner Page Layout is correct on mobile */
@media (max-width: 991.98px) {
    .page-banner {
        height: 50vh !important;
    }
}

/* --- Dynamic Header Transparency & Colors --- */

/* Base Transitions */
.site-header .logo-light,
.site-header .logo-default,
.menu-toggle-btn .bar-1,
.menu-toggle-btn .bar-2,
.menu-text,
.search-icon-toggle {
    transition: all 0.3s ease;
}

/* 1. Transparent Header (Initial State) */
.site-header.header-transparent {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* When transparent: Show Light Logo, Hide Default */
.site-header.header-transparent:not(.scrolled) .logo-default {
    display: none !important;
}

.site-header.header-transparent:not(.scrolled) .logo-light {
    display: block !important;
}

/* When transparent: Ensure text/icons are white */
.site-header.header-transparent:not(.scrolled) .menu-text,
.site-header.header-transparent:not(.scrolled) .search-icon-toggle {
    color: #fff !important;
}

.site-header.header-transparent:not(.scrolled) .menu-toggle-btn .bar-1,
.site-header.header-transparent:not(.scrolled) .menu-toggle-btn .bar-2 {
    background-color: #fff !important;
}


/* 2. Solid Header (Initial State - if Transparency Disabled) */
.site-header.header-solid {
    background-color: #fff;
    /* Default to white if solid */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header.header-solid:not(.scrolled) .logo-default {
    display: block !important;
}

.site-header.header-solid:not(.scrolled) .logo-light {
    display: none !important;
}

/* Solid Header Colors (Dark Text/Icons) */
.site-header.header-solid:not(.scrolled) .menu-text,
.site-header.header-solid:not(.scrolled) .search-icon-toggle {
    color: #342D56 !important;
}

.site-header.header-solid:not(.scrolled) .menu-toggle-btn .bar-1,
.site-header.header-solid:not(.scrolled) .menu-toggle-btn .bar-2 {
    background-color: #342D56 !important;
}


/* 3. SCROLLED STATE - LIGHT Style (White BG) */
.site-header.scrolled[data-scrolled-style="light"] {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.site-header.scrolled[data-scrolled-style="light"] .logo-default {
    display: block !important;
}

.site-header.scrolled[data-scrolled-style="light"] .logo-light {
    display: none !important;
}

.site-header.scrolled[data-scrolled-style="light"] .menu-text,
.site-header.scrolled[data-scrolled-style="light"] .search-icon-toggle {
    color: #342D56 !important;
}

.site-header.scrolled[data-scrolled-style="light"] .menu-toggle-btn .bar-1,
.site-header.scrolled[data-scrolled-style="light"] .menu-toggle-btn .bar-2 {
    background-color: #342D56 !important;
}


/* 4. SCROLLED STATE - DARK Style (Dark BG) */
.site-header.scrolled[data-scrolled-style="dark"] {
    background-color: #342D56 !important;
    /* Dark Blue */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.site-header.scrolled[data-scrolled-style="dark"] .logo-default {
    display: none !important;
}

.site-header.scrolled[data-scrolled-style="dark"] .logo-light {
    display: block !important;
}

.site-header.scrolled[data-scrolled-style="dark"] .menu-text,
.site-header.scrolled[data-scrolled-style="dark"] .search-icon-toggle {
    color: #fff !important;
}

.site-header.scrolled[data-scrolled-style="dark"] .menu-toggle-btn .bar-1,
.site-header.scrolled[data-scrolled-style="dark"] .menu-toggle-btn .bar-2 {
    background-color: #fff !important;
}

/* --- Search Logic --- */

/* Desktop Expandable Search */
.header-search-wrapper {
    position: relative;
    overflow: hidden;
}

.search-input.expanded {
    width: 250px !important;
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    padding: 0.375rem 0.75rem !important;
    /* bootstrap default padding */
    border-radius: 50px;
}

/* Ensure placeholder is visible */
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark Mode Scrolled Input overrides */
.site-header.scrolled[data-scrolled-style="light"] .search-input {
    color: #342D56 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.site-header.scrolled[data-scrolled-style="light"] .search-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

/* Mobile Search Overlay */
#mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 19, 43, 0.95);
    /* Dark blue overlap */
    z-index: 2000;
    /* Higher than header (1030) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(10px);
}

#mobile-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

#mobile-search-overlay .form-control:focus {
    box-shadow: none;
    border-color: #AC9147;
}

#mobile-search-overlay .input-group-text {
    color: #AC9147 !important;
}

/* --- Banner Slider Responsive Adjustments --- */

/* Desktop (Default) - Text Centered, Height 100vh */
.banner-slider-section .swiper-slide {
    height: 100vh;
    min-height: 600px;
}

/* Mobile (<= 767px) */
@media (max-width: 767.98px) {

    /* 1. Ensure Slide has height for cover */
    .banner-slider-section .swiper-slide {
        height: 60vh !important;
        min-height: 500px;
    }

    /* 2. Image Container - Absolute to fill slide */
    .banner-slider-section .swiper-slide>div.position-absolute.z-0 {
        position: absolute !important;
        height: 100% !important;
    }

    .banner-slider-section .swiper-slide img {
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 3. Content Overlay - Position at Bottom */
    .banner-slider-section .swiper-slide>div.d-flex.align-items-center {
        padding-bottom: 60px !important;
        background: linear-gradient(to top, rgba(11, 19, 43, 0.9) 0%, rgba(11, 19, 43, 0.6) 70%, transparent 100%);
        align-items: flex-end !important;
    }

    .banner-slider-section .hero-content {
        margin-top: 0 !important;
        width: 100%;
    }

    /* Font sizes handled via Dynamic CSS now */
    .banner-slider-section .lead {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Utility: Object Fit */
.object-fit-cover {
    object-fit: cover !important;
}

.object-fit-contain {
    object-fit: contain !important;
}