/* ==========================================================================
   GLOBAL LAYOUT RESETS & UTILITIES (100% Native HTML Friendly)
   ========================================================================== */
nav, .fancyNav, .fancyNav-list, .dropdown-panel, .dropdown-panel li {
    box-sizing: border-box;
}

/* ==========================================================================
   🖥️ DESKTOP & LAPTOP ENGINE (Screens 1024px and wider)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    /* Base Nav Container Configured into a Right-Aligned Flex Box Engine */
    nav {
        display: flex;
        justify-content: flex-end; /* Pins your target navigation menu cleanly to the right */
        width: 100%;               /* Spans container fluidly instead of a hard broken 1000px */
    }

    /* Core Navigation Bar Layout Container */
    .fancyNav {
        display: inline-flex;     /* Changes to flex layout to handle button nodes easily */
        margin: 14px 15px 150px 0;    /* Drops a strict 10px offset gap right off the edge boundary */
        padding: 0;
        list-style: none;         /* Cleans list formats up cleanly */
    }

    /* Pre-Existing Core Layout Styles (Kept completely intact for you) */
    .fancyNav-list {
        -moz-box-shadow:1px -1px 0 rgba(255,255,255,0.6) inset;
        -ms-box-shadow:1px -1px 0 rgba(255,255,255,0.6) inset;
        -o-box-shadow:1px -1px 0 rgba(255,255,255,0.6) inset;
        -webkit-box-shadow:1px -1px 0 rgba(255,255,255,0.6) inset;
        background-color:#5678B8;
        background-image:-webkit-gradient(linear,left top,left bottom,from(#5678B8),color-stop(0.5,#DBE5F1),color-stop(0.91,#5678B8));
        background-image:-moz-linear-gradient(#5678B8 0,#DBE5F1 50%,#5678B8 91%);
        background-image:-o-linear-gradient(#5678B8 0,#DBE5F1 50%,#5678B8 91%);
        background-image:-ms-linear-gradient(#5678B8 0,#DBE5F1 50%,#5678B8 91%);
        background-image:linear-gradient(#5678B8 0,#DBE5F1 50%,#5678B8 91%);
        border-right:1px solid rgba(9,9,9,0.125);
        box-shadow:1px -1px 0 rgba(255,255,255,0.6) inset;
        float:left;
        list-style:none;
        position:relative; /* Context point for tracking where the dropdown pops out */
    }

    /* Shared Background Overlay Hover States */
    .fancyNav-list:after{
        -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -moz-transition:.25s all;
        -ms-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -ms-transition:.25s all;
        -o-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -o-transition:.25s all;
        -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        -webkit-transition:.25s all;
        background-image:-moz-linear-gradient(left,rgba(255,255,255,0.5),rgba(255,255,255,0) 50%,rgba(255,255,255,0.5));
        background-image:-o-linear-gradient(left,rgba(255,255,255,0.5),rgba(255,255,255,0) 50%,rgba(255,255,255,0.5));
        background-image:-ms-linear-gradient(left,rgba(255,255,255,0.5),rgba(255,255,255,0) 50%,rgba(255,255,255,0.5));
        background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.5)),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.5)));
        background-image:linear-gradient(left,rgba(255,255,255,0.5),rgba(255,255,255,0) 50%,rgba(255,255,255,0.5));
        box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
        content:'.';
        height:100%;
        left:0;
        opacity:0;
        overflow:hidden;
        position:absolute;
        top:0;
        transition:.25s all;
        text-indent:-9999px;
        width:100%;
        z-index:1;
    }

    /* First/Last Button Edge Rounding Rules */
    .fancyNav-list:first-child{
        border-radius:4px 0 0 4px
    }
    .fancyNav-list:first-child:after,.fancyNav li.selected:first-child:after{
        box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
        border-radius:4px 0 0 4px
    }
    .fancyNav-list:last-child{
        border-radius:0 4px 4px 0;
        border-right: none;
    }
    .fancyNav-list:last-child:after,.fancyNav-list.selected:last-child:after{
        border-radius:0 4px 4px 0;
        box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    }

    /* Interactive Hover Trigger Overlays */
    .fancyNav-list:hover:after,.fancyNav-list.selected:after,.fancyNav-list:target:after{
        opacity:1;
    }
    .fancyNav:hover .fancyNav-list.selected:after,.fancyNav:hover .fancyNav-list:target:after{
        opacity:0;
    }
    .fancyNav-list.selected:hover:after,.fancyNav-list:target:hover:after{
        opacity:1!important
    }

    /* Master Anchor Font Presentation */
    .fancyNav-anchor{
        color:darkblue!important;
        display:inline-block;
        font:16px/1 "Lobster" !important;
        padding:12px 15px 14px;
        position:relative;
        text-decoration:none!important;
        text-shadow:1px 1px 0 rgba(255,255,255,0.4);
        white-space:nowrap;
        z-index:2;
    }

    /* Desktop Home Icon Image Sprite Configuration */
    .homeIcon{
        background:url("../images/default-sprite.png") -13px 310px;
        display:block;
        margin-left:2px;
        overflow:hidden;
        padding-left:12px;
        padding-right:25px;
        text-indent:-9999px;
        width:12px;
    }

    /* Pure CSS Trigger Intercept Engine - Displays Dropdown on Hover */
    .has-dropdown:hover .dropdown-panel {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* The Floating Sub-List Dropdown Box Container */
    .dropdown-panel {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #DBE5F1;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15), 1px 1px 0px rgba(255, 255, 255, 0.8) inset;
        border: 1px solid rgba(9, 9, 9, 0.15);
        min-width: 180px;
        padding: 0;
        margin: 4px 0 0 0;
        list-style: none;
        z-index: 999;
        border-radius: 8px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .dropdown-panel li {
        width: 100%;
        float: none;
        border-bottom: 1px solid rgba(9, 9, 9, 0.08);
    }

    .dropdown-panel li:last-child {
        border-bottom: none;
    }

    /* Sub-Anchor Layout and Text Alignment Formatting */
    .dropdown-panel a {
        display: block;
        color: darkblue !important;
        font: normal 15px/1 Calibri, 'Segoe UI', Arial, sans-serif !important;
        font-weight: 600 !important;
        padding: 12px 16px;
        text-decoration: none !important;
        text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
        white-space: nowrap;
        transition: background-color 0.15s ease;
    }

    /* Premium Sub-Link Hover Micro-Interactions */
    .dropdown-panel a:hover {
        background-color: #DBE5F1;
        color: #5678B8 !important;
    }
}
/* ==========================================================================
   📱 MOBILE & PORTRAIT TABLET ENGINE (Screens smaller than 1024px)
   ========================================================================== */
@media screen and (max-width: 1023px) {
    /* Transforms your parent navigation box into a premium mobile panel block */
    nav {
        display: block !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        background-color: #5678B8; /* Preserves your exact branding primary blue */
        border-bottom: 3px solid #DBE5F1; /* Accent accent baseline divider line */
        padding: 0 !important;
        margin: 0 !important;
        z-index: 99999 !important;
        overflow-y: auto !important; /* Enables smooth scrolling if menu list is deep */
    }

    /* Converts horizontal layout engine container into a vertical mobile block track */
    .fancyNav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Stacks main category button cells vertically with crisp contrast dividers */
    .fancyNav-list {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(219, 229, 241, 0.25) !important;
        border-right: none !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        position: relative;
    }

    /* Deactivates advanced desktop background hover pseudo layers on mobile screens */
    .fancyNav-list:after {
        display: none !important;
    }

    /* UNIFORM MOBILE MASTER TARGET RULE: Forces 100% identical grid heights on every element */
    .fancyNav-anchor, 
    .homeIcon,
    .dropdown-panel a,
    .fancyNav ul.dropdown-panel li.kod-nav-deactivated a,
    .fancyNav ul.dropdown-panel li.kod-nav-upcoming a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important; /* Fixed math: Creates comfortable 46px touch targets for fingers */
        text-indent: 0 !important; /* Option A: Restores hidden 'Home' text string cleanly */
        background: none !important; /* Safely discards desktop sprite coordinates positioning rules */
        text-decoration: none !important;
        text-shadow: none !important;
        white-space: nowrap;
    }

    /* Mobile Typography Configuration for Main Category Headers */
    .fancyNav-anchor, .homeIcon {
        color: #DBE5F1 !important; /* Bright soft blue contrast typography over dark background */
        font: 600 16px/1 Calibri, 'Segoe UI', Arial, sans-serif !important;
    }

    /* NATIVE INTERACTIVE TRIGGER MECHANISM: Displays panels on tap without changing html */
    .has-dropdown:active .dropdown-panel,
    .has-dropdown:focus-within .dropdown-panel {
        display: block !important;
        max-height: 4000px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Streamlines the floating sub-menus to expand vertically directly inline */
    .dropdown-panel {
        display: none; /* Stays tucked clean out of sight until category is actively tapped */
        position: static !important;
        width: 100% !important;
        background-color: rgba(255, 255, 255, 0.98) !important; /* Pure high-contrast mobile backdrop */
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        opacity: 0;
        visibility: hidden;
    }

    /* Aligns internal dropdown slots inside the stacked accordion track layout */
    .dropdown-panel li {
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid rgba(86, 120, 184, 0.12) !important;
    }

    /* Typography settings for standard valid tool items inside the dropdowns */
    .dropdown-panel a {
        color: darkblue !important;
        font: normal 15px/1 Calibri, 'Segoe UI', Arial, sans-serif !important;
        font-weight: 600 !important;
        padding-left: 32px !important; /* Indents child tools neatly to build clear visual hierarchy */
    }
}

/* ==========================================================================
   🔒 CORE MAINTENANCE SPECIAL COMPONENT STATES (Applied across all screens)
   ========================================================================== */
.dropdown-panel li:last-child {
    border-bottom: none !important;
}

/* 1. DEACTIVATED UTILITY OVERRIDES */
.kod-nav-deactivated {
    cursor: help !important;
    opacity: 0.5 !important;
    filter: grayscale(100%) brightness(90%);
    transition: none !important;
}

/* 2. THE DEACTIVATED CONTAINER OVERLAYS */
.fancyNav .dropdown-panel li.kod-nav-deactivated {
    cursor: help !important;
    background: rgba(226, 232, 240, 0.7) !important; /* Dull industrial fallback tint */
    opacity: 0.8 !important;
    display: block !important;
    width: 100% !important;
    pointer-events: auto !important;
}

/* 3. THE DEACTIVATED DECK ANCHOR SPECIFICITY OVERRIDES */
.fancyNav ul.dropdown-panel li.kod-nav-deactivated a {
    color: #4a5568 !important; /* Dull gray text typography color */
    cursor: help !important;
    text-shadow: none !important;
    background: none !important;
    pointer-events: none !important; /* Locks click behavior tracking strings */
}

/* Appends automated technical maintenance icon indicators uniformly */
.fancyNav ul.dropdown-panel li.kod-nav-deactivated a::before {
    content: "🛠️ " !important;
    font-size: 1.1rem !important;
    display: inline-block !important;
    margin-right: 6px !important;
    text-decoration: none !important;
}

/* 4. UPCOMING BLUEPRINT COMPONENT NAVIGATION STYLES */
.fancyNav .dropdown-panel li.kod-nav-upcoming {
    cursor: help !important;
    background: rgba(14, 165, 233, 0.04) !important; /* Soft sky blueprint tint */
    display: block !important;
    width: 100% !important;
}

/* The upcoming deck anchor weights overrides */
.fancyNav ul.dropdown-panel li.kod-nav-upcoming a {
    color: #0ea5e9 !important; /* Tech blueprint sky text color fill */
    cursor: help !important;
    text-shadow: none !important;
    background: none !important;
    border-bottom: 2px dashed rgba(14, 165, 233, 0.4) !important;
    pointer-events: none !important; /* Drops click routing selection rules */
}

/* Appends automated system upcoming rocket icon indicators uniformly */
.dropdown-panel li.kod-nav-upcoming a::before {
    content: "🚀 " !important;
    font-size: 1.1rem !important;
    display: inline-block !important;
    margin-right: 6px !important;
    text-decoration: none !important;
}

/* Overrides uniform layout padding exclusively to accommodate the 2px dashed layout boundary line */
@media screen and (max-width: 1023px) {
    .fancyNav ul.dropdown-panel li.kod-nav-upcoming a {
        padding-top: 14px !important;
        padding-bottom: 12px !important; /* Adjusted slightly so the element hits exactly 46px with the border */
        padding-left: 32px !important;
        padding-right: 20px !important;
    }
    .fancyNav ul.dropdown-panel li.kod-nav-deactivated a {
        padding-left: 32px !important;
    }
}