/*
Theme Name: MSC Divi Child
Theme URI: 
Author: Inavizion Media
Author URI: https://inavizionmedia.com
Description: Your Destination for Custom Web Designz!
Version: 1.0.0
Template: Divi
*/

/* ============================================================
   1. SITE PRE-LOADING & OVERLAY (Session-Aware)
   ============================================================ */

/* Base Overlay Styles */
html, body {
    overflow-x: hidden !important;
	/*background-color: #121212;*/
	background-color: #030508;
}

.no-js #page-container { opacity: 1 !important; }

/* ============================================================
   2. DESKTOP NAVIGATION (Theme Builder)
   ============================================================ */
.et_pb_menu .et-menu-nav > ul > li {
    padding-left: 7px !important;
    padding-right: 7px !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
}

/* Updated: Only apply hover transform if the item is NOT active or a parent of an active item */
.et_pb_menu .et-menu-nav > ul > li:not(.current-menu-item):not(.current-menu-ancestor):hover {
    transform: translateY(-3px);	
}

.et_pb_menu .et-menu-nav > ul > li:first-child { padding-left: 0 !important; }
.et_pb_menu .et-menu-nav > ul > li:last-child { padding-right: 0 !important; }

.et_pb_menu .et-menu-nav > ul > li.current-menu-item > a,
.et_pb_menu .et-menu-nav > ul > li.current-menu-ancestor > a {
    font-weight: 900 !important;
    border-bottom: 2.0px solid #606060;
    padding-bottom: 5px;
    pointer-events: none !important; 
    cursor: default !important;
}

.et_pb_row_1_tb_header.et_pb_row { margin-top: 5px !important; }
.et_pb_menu_1_tb_header { padding: 10px 8px 0 0 !important; }

.et_pb_row_1_tb_header.et_pb_row { margin-top: 5px !important; }
.et_pb_menu_1_tb_header { padding: 10px 8px 0 0 !important; }






/* ============================================================
  3. MOBILE NAVIGATION STRUCTURE
   ============================================================ */

/* MOBILE HEADER PADDING Target the Section and Row to ensure the entire background expands */
.et_pb_section_1_tb_header,
.et_pb_row_1_tb_header.et_pb_row { 
    padding-top: 20px !important;    /* Force 20px Top Padding */
    padding-bottom: 10px !important; /* Force 20px Bottom Padding */
    margin-top: 0 !important;        /* Reset margins to ensure padding is even */
    margin-bottom: 0 !important;
    min-height: auto !important;     /* Allow the container to grow with padding */
}

/* Ensure the Menu Module doesn't have extra offset padding */
.et_pb_menu_1_tb_header { 
    padding: 0 !important; 
    margin: 0 !important;
}

/* Align the hamburger and logo vertically center */
.et_pb_row_1_tb_header.et_pb_row {
    display: flex !important;
    align-items: center !important;	
}

.et_pb_image_2_tb_header {
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
        z-index: 0;
        padding-top: 10px;
    }

.et_mobile_menu {
    width: 120% !important; 
    margin-left: -10% !important; 
    padding: 35px 0 0 0 !important;
    margin-bottom: 0px !important;	
	border-top: none !important; /* 1. Remove the physical top border */
    box-shadow: inset 0 15px 0 0 black, inset 0 15px 0 0 #9d000a !important;
	/*Use an inset box-shadow to place the red "stroke" 15px down */
    /* format: inset 0 [distance from top] 0 [thickness] [color] */
}

/* Creating the red bar as a separate line that can be moved down */
.et_mobile_menu::after {
    content: "";
    position: absolute;
    top: 8px;       /* This moves the red bar down 15px */
    left: 0;
    width: 100%;
    height: 2px;     /* Thickness of your red bar */
    background-color: #9d000a;
    z-index: 10;
}

.et_mobile_menu li {
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    position: relative;
}

.et_mobile_menu li a {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    /* Adjusting padding to account for the toggle on the LEFT */
    padding-right: calc(10% + 20px) !important; 
    padding-left: calc(10% + 50px) !important;    
    border-bottom: 1px solid #1c1c1c !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    transition: all 0.3s ease !important;
    color: #333333;
    position: relative;
    z-index: 1;
}

/* Slide animation ONLY for top-level links */
.et_mobile_menu > li > a:hover {   
    transform: translateX(-10px);
}

/* DISABLE Slide animation for sub-menu links */
.et_mobile_menu li ul.sub-menu li a:hover {
    transform: none !important;
}

/* Active Page Indicators */
.et_mobile_menu li.current-menu-item > a, 
.et_mobile_menu li.current_page_item > a,
.et_mobile_menu li.current-menu-ancestor > a {
    color: #9d000a !important; 
    font-weight: 800 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Force the mobile menu to the absolute front for touch events */
.et_mobile_menu {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

.mobile_nav.opened .mobile_menu_bar {
    z-index: 999999 !important;
}

/* ============================================================
   4. COLLAPSIBLE SUB-MENU (Independent Link & Toggle)
   ============================================================ */

/* Hide sub-menus by default and remove space */
.et_mobile_menu li.menu-item-has-children > ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   OVERWRITE: Sub-Menu Link Color
   ============================================================ */
/* Optional: Different green when hovering */
.et_mobile_menu li ul.sub-menu li a:hover {
    color: #FFFFFF !important;      /* Slightly darker on hover */
    background: rgba(124, 0, 0, 0.05) !important; /* Very faint green background */
}

/* Targets the specific links inside the sub-menu container */
.et_mobile_menu li ul.sub-menu li a {   
    font-weight: 600 !important;	
	color: #FFFFFF !important;      /* Forces the text to be White */
    font-weight: 600 !important;    /* Makes it slightly bolder for readability */
}

/* Optional: Different green or style when hovering over sub-menu links */
.et_mobile_menu li ul.sub-menu li a:hover {
    color: #FFFFFF !important; /* Color on hover */
    background: rgba(124, 0, 0, 0.8) !important; /* White on hover */
}

/* Show sub-menu when toggled */
.et_mobile_menu li.menu-item-has-children > ul.sub-menu.pa-submenu-open {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

/* Sub-menu Link Styling */
.et_mobile_menu li ul.sub-menu li a {
    background: rgba(51, 51, 51, 0.1) !important;
    font-size: 16px;
}

/* The Clickable Toggle Arrow Area (Positioned LEFT) */
.et_mobile_menu .mobile-toggle {
    width: 50px;
    height: 48px; 
    line-height: 45px;
    position: absolute;
    left: 9%; /* Moved to the left side */
    top: 0;
    z-index: 9999 !important; 
    text-align: center;
    cursor: pointer;
    display: block !important;
    /* Vertical Divider on the right side of the toggle */
    border-right: 1px solid #3a3a3a;
}

/* The Red Arrow Icon */
.et_mobile_menu .mobile-toggle::before {
    content: "\33"; 
    font-family: 'ETmodules' !important;
    color: #9d000a;
    font-size: 22px;
	font-weight: 900;
    transition: all 0.3s ease;
    display: block;
}

/* Rotate arrow when open */
.et_mobile_menu .mobile-toggle.pa-toggle-open::before {
    transform: rotate(180deg);
}

/* ============================================================
   5. HAMBURGER & INTERACTION
   ============================================================ */
/* Adjust the size of the Hamburger Icon (Closed state) */
.mobile_menu_bar::before {
    font-size: 40px !important;/* Increase or decrease this value to change icon size */
    color: #999999 !important;  /* Keeps your red branding */
    top: 0 !important;          /* Adjust vertical alignment if needed */
    transition: font-size 0.3s ease;
}

/* Adjust the size of the 'X' Icon (Opened state) */
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { 
    content: '\4d'!important; 
    font-size: 40px !important; /* Adjust this specifically for the 'X' size */
    color: #999999 !important;
}

.et_mobile_nav_menu:before {
    content: 'MENU';
    position: absolute;
    right: 55px;
    color: #9d000a;
    font-size: 18px;
    font-weight: 700;
}

/* Animations for Opening Menu */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.mobile_nav.opened .et_mobile_menu { 
    animation: fadeIn 0.4s ease-in forwards; 
    pointer-events: auto;
}

.mobile_nav:not(.opened) .et_mobile_menu { 
    animation: fadeOut 0.6s ease-out forwards; 
    pointer-events: none;
}