/* ========================================================================== */
/* FILE: /css/custom-functions.css                                              */
/* PURPOSE: Houses all consolidated, non-conflicting custom styles.           */
/* ========================================================================== */


/**
 * ============================================================
 * SECTION 1: HEADER BASE & SCROLL BEHAVIOR
 * ============================================================
 * These styles apply to the header on all screen sizes. It
 * defines the sticky positioning and the transitions for the
 * scroll-activated effects like showing/hiding and adding a shadow.
 */

.header {
    /* -- This makes the header stick to the top of the viewport during scroll -- */
    position: sticky;
    top: 0;
    z-index: 1000;

    /* -- The header starts transparent to sit over the hero banner -- */
    background-color: transparent;

    /* -- Defines the animations for a smooth user experience -- */
    /* Animates the hide/reveal effect, background color change, and shadow appearance. */
    transition: transform 0.4s ease, background-color 0.3s ease, box-shadow 0.3s ease;

    /* -- This is the default "shown" state. JS changes this to hide the header. -- */
    transform: translateY(0);
}

/* This class is added by JavaScript when the user scrolls down. */
.header.scrolled {
    /* -- Gives the header a solid white background when scrolled -- */
    background-color: #ffffff;
    /* -- Adds a subtle shadow to lift the header off the page content -- */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}



/**
 * ============================================================
 * SECTION 2: DESKTOP NAVIGATION STYLES (>= 992px)
 * ============================================================
 * This section contains all layout, typography, and interactive
 * styles for the main navigation menu as it appears on desktop devices.
 */

/* -- This media query ensures these styles ONLY apply to screens 992px and wider -- */
@media (min-width: 992px) {

    /* --- Header Layout --- */
    /* Uses Flexbox to align the logo on the left and the navigation on the right. */
    .header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    /* Hides the mobile hamburger menu trigger on desktop. */
    #headerTrigger {
        display: none !important;
    }

    .header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 4rem !important; /* ADDS SIGNIFICANT GAP BETWEEN LOGO AND NAV */
    }

    /* --- Navigation Menu Layout --- */
    /* Defines the main navigation list that holds the menu items. */
    .header_nav-list {
        display: flex;
        align-items: center;
        gap: 2rem; /* Sets the spacing between each top-level menu item. */
        margin: 0;
        padding: 0;
        list-style: none;
    }


    /* --- Navigation Links & Typography --- */
    /* Styles for the individual clickable links in the navigation bar. */
    .header_nav-list_item .nav-link {
        font-size: 1.125rem;
        font-weight: 700;
        color: #2563eb; /* Color: Blue, matching the hero title. */
        text-decoration: none;
        padding: 0.5rem 0;
        transition: color 0.3s ease;
    }

    .header_nav-list_item .nav-link:hover {
        color: #1d4ed8; /* Color: Darker blue on hover. */
    }


    /* --- Dropdown Menu Styling --- */
    /* This is the container for the dropdown menu items. */
    .header_nav .dropdown-menu {
        position: absolute;
        top: calc(100% + 0.75rem); /* Positions the dropdown below the parent link with a small gap. */
        left: 0;
        z-index: 9999;
        display: none; /* The menu is hidden by default. */
        opacity: 0;
        transform: translateY(-10px); /* Starts slightly raised for a slide-down animation. */
        min-width: 280px;
        padding: 1.5rem;
        background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%); /* A stylish gradient background. */
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* A bouncy, modern animation. */
    }

    /* This class is added by JavaScript to show the dropdown. */
    .header_nav .dropdown-menu.show {
        display: block !important;
        opacity: 1;
        transform: translateY(0); /* Animates the menu into its final position. */
    }

    /* Styles for the individual items within the dropdown. */
    .header_nav .dropdown-menu .dropdown-item {
        display: block;
        padding: 0.875rem 1.25rem;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff; /* Color: White text for contrast against the gradient background. */
        text-decoration: none;
        background: rgba(255, 255, 255, 0.15); /* A glassy, semi-transparent background. */
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        transition: all 0.25s ease;
    }

    /* Hover effect for dropdown items. */
    .header_nav .dropdown-menu .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.95); /* Becomes nearly opaque white on hover. */
        color: #3b82f6; /* Text color changes to blue on hover. */
        transform: translateY(-2px); /* Lifts the item slightly. */
    }


    /* --- Dropdown Arrow Styling --- */
    /* This creates a clean arrow using a CSS pseudo-element for better control. */
    .header_nav .dropdown-toggle::after {
        content: '▼';
        font-size: 0.6rem;
        margin-left: 0.5rem;
        display: inline-block;
        transition: transform 0.3s ease; /* Smooth rotation animation. */
    }

    /* Rotates the arrow when the dropdown is open (triggered by ARIA attribute from JS). */
    .header_nav .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Hides the old, conflicting span-based arrow from the HTML. */
    .header_nav .dropdown-toggle .ms-2 {
        display: none !important;
    }


    /* --- Social Icons --- */
    /* Styles for the social media icons in the header. */
    .header_nav-socials {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        padding: 0;
    }

    .header_nav-socials li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header_nav-socials .social-icon {
        width: 32px;
        height: 32px;
        display: block;
    }

} /* End of Desktop Media Query */



/**
 * ============================================================
 * SECTION 3: MOBILE NAVIGATION STYLES (< 992px)
 * ============================================================
 * This section ensures that on mobile devices, the desktop
 * navigation is hidden and the hamburger trigger for the
 * offcanvas menu is visible and correctly styled.
 */

/* -- This media query ensures these styles ONLY apply to screens smaller than 992px -- */
@media (max-width: 991.98px) {

    /* -- Hides the entire desktop navigation container on mobile -- */
    nav.header_nav {
        display: none !important;
    }

    /* -- Ensures the header container wraps its content properly -- */
    .header .container {
        flex-wrap: wrap;
    }

} /* End of Mobile Media Query */



/**
 * ============================================================
 * SECTION 4: MOBILE OFFCANVAS MENU - LEFT SLIDE OUT (BRUTE FORCE)
 * ============================================================
 * Purpose: Override all conflicting styles to ensure the mobile menu
 * slides out from the LEFT when triggered by the hamburger icon.
 * This uses !important to force override any other CSS rules.
 */

/* -- Force offcanvas to slide from the LEFT -- */
.offcanvas-start {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 300px !important;
    height: 100vh !important;
    background-color: #ffffff !important; /* Color: White background */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
    transform: translateX(-100%) !important; /* Hidden off-screen to the left */
    transition: transform 0.3s ease-in-out !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    visibility: visible !important; /* Force visibility */
}

/* -- Show offcanvas when it has the 'show' class -- */
.offcanvas-start.show {
    transform: translateX(0) !important; /* Slide into view from left */
    visibility: visible !important; /* Ensure visible when shown */
}

/* -- Offcanvas backdrop overlay -- */
.offcanvas-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Color: Semi-transparent black */
    z-index: 9998 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    pointer-events: none !important; /* Prevent clicks when hidden */
}

/* -- Show backdrop when it has the 'show' class -- */
.offcanvas-backdrop.show {
    opacity: 1 !important;
    pointer-events: auto !important; /* Allow clicks when visible */
}

/* -- Offcanvas header styling with logo -- */
.offcanvas-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1.5rem !important;
    border-bottom: 2px solid #e5e7eb !important; /* Color: Light gray border */
    position: relative !important;
}

/* -- Logo image inside offcanvas title -- */
.offcanvas-header .offcanvas-title {
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 0 1rem 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.offcanvas-header .offcanvas-title img {
    width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

/* -- Close button styling -- */
.btn-close {
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: #6b7280 !important; /* Color: Gray */
    opacity: 1 !important;
    padding: 0.5rem !important;
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10 !important;
}

.btn-close:hover {
    color: #1f2937 !important; /* Color: Darker gray on hover */
}

/* -- Offcanvas body styling -- */
.offcanvas-body {
    padding: 1.5rem !important;
    padding-top: 2rem !important; /* Add extra top padding to move nav items away from logo */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Left align all content */
}

/* -- Main navigation container spacing -- */
.offcanvas-body .header_nav_mobile {
    width: 100% !important;
    margin-top: 1rem !important; /* Additional spacing from the header/logo */
}

/* -- Mobile menu links styling with reduced font size -- */
.offcanvas-body .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem 0 !important;
    font-size: 1.125rem !important; /* Reduced from 2rem to 1.125rem */
    font-weight: 600 !important;
    color: #1f2937 !important; /* Color: Dark gray */
    text-decoration: none !important;
    text-align: left !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding-left: 0.5rem !important;
}

.offcanvas-body .nav-link:hover {
    color: #ffffff !important; /* Color: White on hover */
    background: #f9b73f !important; /* Color: Theme yellow/gold */
    transform: translateX(5px) !important; /* Slide right on hover */
}

/* -- Mobile dropdown toggle styling with reduced font size -- */
.offcanvas-body .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 1.125rem !important; /* Reduced from 2rem to 1.125rem */
    font-weight: 600 !important;
    color: #1f2937 !important; /* Color: Dark gray */
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
}

.offcanvas-body .dropdown-toggle:hover {
    color: #ffffff !important; /* Color: White on hover */
    background: #f9b73f !important; /* Color: Theme yellow/gold */
}

/* -- Mobile dropdown arrow -- */
.offcanvas-body .dropdown-toggle::after {
    content: '▼' !important;
    font-size: 0.875rem !important;
    margin-left: 0.5rem !important;
    transition: transform 0.3s ease !important;
}

.offcanvas-body .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
}

/* -- Mobile submenu collapse styling - CLOSED BY DEFAULT -- */
.offcanvas-body .collapse {
    width: 100% !important;
    display: none !important; /* HIDDEN by default */
    flex-direction: column !important;
    padding-left: 0 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* -- Show collapse when it has 'show' class -- */
.offcanvas-body .collapse.show {
    display: flex !important; /* VISIBLE when opened */
}

/* -- Dropdown menu items with button styling - properly sized -- */
.offcanvas-body .collapse .nav-link {
    font-size: 1rem !important; /* Reduced size */
    font-weight: 500 !important;
    color: #6b7280 !important; /* Color: Gray */
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important; /* Color: Light gray gradient */
    border-radius: 8px !important;
    padding: 0.625rem 1rem !important; /* Compact padding */
    margin-bottom: 0.5rem !important;
    margin-left: 1rem !important; /* Indent from parent */
    width: calc(100% - 1rem) !important; /* Full width minus indent */
    border: 2px solid transparent !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(0) !important;
    white-space: nowrap !important; /* Keep text on one line */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.offcanvas-body .collapse .nav-link:hover {
    color: #ffffff !important; /* Color: White text on hover */
    background: linear-gradient(135deg, #5bb286 0%, #438363 100%) !important; /* Color: Theme green gradient */
    border-color: #5bb286 !important; /* Color: Theme green border */
    transform: translateX(5px) scale(1.02) !important; /* Slide right and scale up */
    box-shadow: 0 4px 8px rgba(91, 178, 134, 0.3) !important; /* Color: Theme green shadow */
}

.offcanvas-body .collapse .nav-link:active {
    transform: translateX(5px) scale(0.98) !important; /* Slight press effect */
}

/* -- Mobile social icons styling - increased by 0.5x -- */
.offcanvas-body .social-icon {
    width: 42px !important; /* Increased from 28px by 0.5x (28 * 1.5 = 42) */
    height: 42px !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.offcanvas-body .social-icon:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* -- Social icons container alignment -- */
.offcanvas-body .d-flex.list-unstyled {
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 1rem !important;
}

/* -- Hamburger trigger button visibility on mobile -- */
@media (max-width: 991.98px) {
    /* DO NOT touch header container - leave it as is from index.html */
    
    /* DO NOT touch logo position - leave it as is from index.html */
    
    /* Only make hamburger visible with size increase and right spacing */
    .header_trigger {
        display: block !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        padding-right: 1.5rem !important; /* Add spacing from right edge */
        z-index: 10000 !important;
        transform: scale(1.5) !important; /* Increase size by 1.5x */
        transform-origin: center !important; /* Scale from center to avoid position shift */
    }

    .header_trigger .line {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background-color: #1f2937 !important; /* Color: Dark gray */
        margin: 5px 0 !important;
        transition: all 0.3s ease !important;
    }

    /* -- Hamburger animation when menu is open -- */
    .header_trigger[aria-expanded="true"] {
        transform: scale(1.5) !important; /* Maintain size when open */
    }

    .header_trigger[aria-expanded="true"] .line:nth-child(1) {
        transform: rotate(45deg) translateY(8px) !important;
    }

    .header_trigger[aria-expanded="true"] .line:nth-child(2) {
        opacity: 0 !important;
    }

    .header_trigger[aria-expanded="true"] .line:nth-child(3) {
        transform: rotate(-45deg) translateY(-8px) !important;
    }
}

/* -- Fix for Contact Us button and remove extra blue box on mobile -- */
@media (max-width: 991.98px) {
    /* Hide the extra blue box (likely a play button or second element) */
    .hero .wrapper span:nth-child(2),
    .hero .wrapper .btn-play,
    .hero .wrapper a:nth-child(2) {
        display: none !important;
    }

    /* Ensure Contact Us button has rounded corners */
    .hero .wrapper .btn,
    .btn {
        border-radius: 30px !important;
    }
}



/**
 * ============================================================
 * SECTION 5: PAGE-SPECIFIC OVERRIDES & COMPONENTS
 * ============================================================
 * This section contains styles that are specific to certain
 * pages (like the homepage and about page) or override base styles.
 */

/* --- Homepage Hero Section --- */
.hero_media {
    background-image: url('../img/index/center-cover.avif') !important;
}

/* --- Homepage Testimonials Section --- */
.testimonials .main h2,
.testimonials .main p {
    color: #ffffff !important;
}

.testimonials_slider-nav .swiper-nav-item {
    background-color: #ffffff !important;
    border: 2px solid #FF007F !important;
}

.testimonials_slider-nav .swiper-nav-item i {
    color: #FF007F !important;
}

/* --- Homepage "Our Services" Section --- */
.menu_tabs-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: center !important;
}

.menu_tabs-list_item {
    flex: 1 1 450px !important;
    max-width: 540px !important;
    display: flex !important;
}

.menu_tabs-list_item .link,
.menu_tabs-list_item .media {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px;
    overflow: hidden;
}

.menu_tabs-list_item .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Makes images cover the area without distortion. */
}


/*
 * ------------------------------------------------------------
 * SUB-SECTION: BANNER PAGE OVERRIDES (e.g., for About Page)
 * ------------------------------------------------------------
 * These are the forceful styles from the original inline style
 * block. They are intended to override the default sticky header
 * for pages that have a full-width banner.
 */

/* This forces the main navigation bar to float over the page content */
.header {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999 !important;
    background-color: transparent !important;
    transition: background-color 0.4s ease !important;
}

/* This forces the banner to act as a background container */
.page_cover {
    min-height: 500px !important;  /* <-- EDIT for DESKTOP banner height */
    padding-top: 50px !important; /* This is for the h1 Header ------- Pushes content down below the nav bar */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 
       [FIX]: The background image URL has been changed to the full, absolute path to guarantee it loads.
    */
    background-image: url('../img/about/cover.jpg') !important; /* Note: path is relative to the CSS file */
    background-size: cover !important;
    background-position: center !important;
}

/* Hides the empty inner div, as the background is now on the parent */
.page_cover-img {
    display: none !important;
}

/* This forces the page title to be white with a readable shadow */
.page_cover-title {
    color: #ffffff !important; /* <-- EDIT for title color */
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6) !important;
}

/* This forces the header to get a white background when scrolled (override for banner pages) */
.header.scrolled {
    background-color: #ffffff !important; /* Color: White */
}

/* Responsive Brute Force for Mobile Banner */
@media (max-width: 1199.98px) {
    /* Adjusts banner height and padding for mobile */
    .page_cover {
        min-height: 350px !important; /* <-- EDIT for MOBILE banner height */
        padding-top: 100px !important;
    }
}