/* ==========================================================================
   Hadron Milkboy Custom Header & Styling Rules
   ========================================================================== */

/* Fixed Header Container & High Z-Index - Identical Design for Scrolled and Non-Scrolled */
#header,
#header.scrolled,
body #header,
body #header.scrolled,
body.header-fixed #header,
body.header-fixed #header.scrolled,
body:is(.header-light, .header-transparent) #header,
body:is(.header-light, .header-transparent) #header.scrolled,
body.header-dark #header:not(.scrolled),
body.header-dark #header.scrolled,
body.header-fixed.header-animated #header,
body.header-fixed.header-animated #header.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 3.5rem !important;
    margin: 0 !important;
    padding: 0.25rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    background: rgba(10, 15, 30, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0, 240, 255, 0.35) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Container & Navbar Flex Alignment */
#header .container,
#header.scrolled .container {
    width: 100% !important;
    max-width: 1280px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#header .navbar,
#header.scrolled .navbar {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header .navbar-section,
#header.scrolled .navbar-section,
body.header-fixed.header-animated #header.scrolled .navbar-section {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#header .navbar-section.logo,
#header.scrolled .navbar-section.logo {
    flex: 0 0 auto !important;
}

#header .navbar-section.desktop-menu,
#header.scrolled .navbar-section.desktop-menu {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    height: 100% !important;
}

/* Ensure navbar sections and interactive elements sit on top and accept pointer events */
#header .navbar,
#header.scrolled .navbar,
#header .navbar-section,
#header.scrolled .navbar-section,
#header .desktop-menu,
#header.scrolled .desktop-menu,
#header .dropmenu,
#header.scrolled .dropmenu,
#header nav.language-switcher,
#header.scrolled nav.language-switcher,
#header a,
#header.scrolled a,
#header button {
    position: relative !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Header Navbar Brand & Title */
#header .navbar-brand,
#header.scrolled .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    height: 100% !important;
}

#header .navbar-brand .title,
#header.scrolled .navbar-brand .title {
    font-family: 'Hadron', 'Nasalization', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.7), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

#header .navbar-brand img,
#header.scrolled .navbar-brand img,
body.header-fixed.header-animated #header.scrolled .logo img,
body.header-fixed.header-animated #header.scrolled .navbar-brand.inverted img {
    max-height: 28px !important;
    height: auto !important;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6)) !important;
}

/* Navigation Dropmenu & Links */
#header .dropmenu,
#header.scrolled .dropmenu {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#header .dropmenu ul.navigation,
#header.scrolled .dropmenu ul.navigation {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    list-style: none !important;
}

#header .dropmenu ul.navigation li,
#header.scrolled .dropmenu ul.navigation li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset Pseudo-elements that cause off-center alignment */
#header .dropmenu ul.navigation > li > a:before,
#header.scrolled .dropmenu ul.navigation > li > a:before,
#header .dropmenu ul.navigation > li > a:after,
#header.scrolled .dropmenu ul.navigation > li > a:after {
    display: none !important;
    content: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Clean Box-Free Navigation Menu Links (No Background Selection Box) */
#header .dropmenu:not(.language-switcher) a,
#header.scrolled .dropmenu:not(.language-switcher) a,
#header .dropmenu ul.navigation > li > a,
#header.scrolled .dropmenu ul.navigation > li > a {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    opacity: 0.9 !important;
    padding: 0.35rem 0.6rem !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Crisp Clean Active & Hover State for Navigation Links - Text Glow Only */
#header .dropmenu:not(.language-switcher) a:hover,
#header.scrolled .dropmenu:not(.language-switcher) a:hover,
#header .dropmenu:not(.language-switcher) a:focus,
#header.scrolled .dropmenu:not(.language-switcher) a:focus,
#header .dropmenu:not(.language-switcher) a.active,
#header.scrolled .dropmenu:not(.language-switcher) a.active,
#header .dropmenu ul.navigation > li > a:hover,
#header.scrolled .dropmenu ul.navigation > li > a:hover,
#header .dropmenu ul.navigation > li > a.active,
#header.scrolled .dropmenu ul.navigation > li > a.active {
    color: #00f0ff !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.85), 0 0 20px rgba(0, 240, 255, 0.4) !important;
}

/* Language Switcher - Clean Box-Free Flag Icon Selector */
body #header nav.language-switcher,
body #header.scrolled nav.language-switcher,
#header nav.language-switcher,
#header.scrolled nav.language-switcher {
    position: relative !important;
    z-index: 1000001 !important;
    margin-left: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

body #header nav.language-switcher ul,
body #header.scrolled nav.language-switcher ul,
#header nav.language-switcher ul,
#header.scrolled nav.language-switcher ul {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    list-style: none !important;
}

body #header nav.language-switcher ul li,
body #header.scrolled nav.language-switcher ul li,
#header nav.language-switcher li,
#header.scrolled nav.language-switcher li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #header nav.language-switcher ul li a,
body #header.scrolled nav.language-switcher ul li a,
#header nav.language-switcher a,
#header.scrolled nav.language-switcher a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.3rem 0.4rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    opacity: 0.55 !important;
    filter: grayscale(40%) !important;
    transition: all 0.25s ease-in-out !important;
}

body #header nav.language-switcher ul li a .flag-icon,
body #header.scrolled nav.language-switcher ul li a .flag-icon,
#header nav.language-switcher a .flag-icon,
#header.scrolled nav.language-switcher a .flag-icon {
    display: inline-block !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.25s ease-in-out, filter 0.25s ease-in-out !important;
}

/* Hover State - Scale & Full Color */
body #header nav.language-switcher ul li a:hover,
body #header.scrolled nav.language-switcher ul li a:hover,
#header nav.language-switcher a:hover,
#header.scrolled nav.language-switcher a:hover {
    opacity: 0.9 !important;
    filter: grayscale(0%) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body #header nav.language-switcher ul li a:hover .flag-icon,
body #header.scrolled nav.language-switcher ul li a:hover .flag-icon,
#header nav.language-switcher a:hover .flag-icon,
#header.scrolled nav.language-switcher a:hover .flag-icon {
    transform: scale(1.2) !important;
}

/* Active State - Full Color, Bright Glow & Scale */
body #header nav.language-switcher ul li a.active,
body #header.scrolled nav.language-switcher ul li a.active,
#header nav.language-switcher a.active,
#header.scrolled nav.language-switcher a.active {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body #header nav.language-switcher ul li a.active .flag-icon,
body #header.scrolled nav.language-switcher ul li a.active .flag-icon,
#header nav.language-switcher a.active .flag-icon,
#header.scrolled nav.language-switcher a.active .flag-icon {
    transform: scale(1.18) !important;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.85)) !important;
}

/* Dropdown Sub-menus */
.dropmenu ul ul {
    background: rgba(10, 15, 30, 0.95) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0 !important;
}

/* Hide Mobile Toggle Hamburger & Drawer Menu */
.mobile-menu,
.mobile-container,
#overlay {
    display: none !important;
}

/* Ensure hero section sits below header in stack layer */
.hero {
    position: relative !important;
    z-index: 1 !important;
}

.hero .image-overlay {
    z-index: 1 !important;
}

.hero .container {
    position: relative !important;
    z-index: 2 !important;
}

/* ==========================================================================
   Mobile Responsive Styling Rules (Media Queries)
   ========================================================================== */

@media (max-width: 840px) {
    /* Auto-expanding Header Container on Mobile so navbar never overflows offscreen */
    #header,
    #header.scrolled,
    body.header-fixed #header,
    body.header-fixed #header.scrolled,
    body:is(.header-light, .header-transparent) #header,
    body:is(.header-light, .header-transparent) #header.scrolled {
        padding: 0.35rem 0.6rem !important;
        height: auto !important;
        min-height: 3.5rem !important;
        box-sizing: border-box !important;
    }

    #header .navbar,
    #header.scrolled .navbar {
        height: auto !important;
        min-height: 3.5rem !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 0.25rem !important;
    }

    #header .navbar-section.desktop-menu,
    #header.scrolled .navbar-section.desktop-menu {
        display: flex !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 0.15rem !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }

    #header .dropmenu ul.navigation,
    #header.scrolled .dropmenu ul.navigation {
        flex-wrap: wrap !important;
        gap: 0.15rem !important;
        height: auto !important;
    }

    /* Brand Logo & Title Scaling on Mobile */
    #header .navbar-brand,
    #header.scrolled .navbar-brand {
        gap: 0.25rem !important;
        flex: 0 0 auto !important;
    }

    #header .navbar-brand .title,
    #header.scrolled .navbar-brand .title {
        font-size: 0.9rem !important;
        letter-spacing: 0px !important;
    }

    #header .navbar-brand img,
    #header.scrolled .navbar-brand img {
        max-height: 20px !important;
    }

    /* Navigation Links on Mobile */
    #header .dropmenu:not(.language-switcher) a,
    #header.scrolled .dropmenu:not(.language-switcher) a,
    #header .dropmenu ul.navigation > li > a,
    #header.scrolled .dropmenu ul.navigation > li > a {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.35rem !important;
        letter-spacing: 0px !important;
    }

    /* Language Switcher on Mobile */
    body #header nav.language-switcher,
    body #header.scrolled nav.language-switcher,
    #header nav.language-switcher,
    #header.scrolled nav.language-switcher {
        margin-left: 0.1rem !important;
    }

    body #header nav.language-switcher ul li a .flag-icon,
    body #header.scrolled nav.language-switcher ul li a .flag-icon,
    #header nav.language-switcher a .flag-icon,
    #header.scrolled nav.language-switcher a .flag-icon {
        font-size: 1rem !important;
    }

    /* Responsive Grid Columns & Cards */
    .column,
    .col-12,
    .col-6,
    .col-4,
    .col-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 600px) {
    /* Narrow Mobile Phone Adjustments */
    #header,
    #header.scrolled {
        padding: 0.3rem 0.5rem !important;
    }

    #header .navbar-brand .title,
    #header.scrolled .navbar-brand .title {
        font-size: 0.85rem !important;
    }

    /* Hero Typography on Small Screens */
    .hero h1,
    .hero h2,
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    .hero p.lead,
    .hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    /* Hero Action Buttons - Stacked on Mobile */
    .hero .buttons,
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }

    .hero .btn,
    .hero-actions .btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.65rem 1.25rem !important;
    }

    /* Mobile Section Padding */
    section.section,
    .modular-row {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* FontAwesome 6 Brands Automatic Font-Family Fallback Resolution */
.fa-github,
.fa-github-alt,
.fa-github-square,
.fa-square-github,
.fa-docker,
.fa-grav,
.fa-wordpress,
.fa-php,
.fa-laravel,
.fa-symfony,
.fa-twitter,
.fa-x-twitter,
.fa-facebook,
.fa-facebook-f,
.fa-linkedin,
.fa-linkedin-in,
.fa-youtube,
.fa-instagram,
.fa-discord,
.fa-python,
.fa-git,
.fa-git-alt,
.fa-gitlab,
.fa-bitbucket {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}