/* BDCA Responsive Styles - The Source of Truth for Mobile Layouts */
/* Use !important sparingly, but this file is meant to override page-specific styles */

/* Global Reset for box-sizing is handled in styles.css, but verifying here just in case */
* {
    box-sizing: border-box;
}

/* -----------------------------------------------------------
   MOBILE NAVIGATION - COMPACT & PROFESSIONAL
----------------------------------------------------------- */
@media (max-width: 768px) {

    /* Navbar Container */
    nav {
        height: 60px;
        padding: 0 1rem;
        background-color: #000 !important;
        /* Force black background for contrast */
        border-bottom: 2px solid #ffd700;
        /* Gold Brand Border */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo Sizing */
    nav .logo img {
        height: 35px;
        width: auto;
    }

    /* Hamburger Button */
    .nav-toggle {
        display: block !important;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 1.5rem;
        color: #ffd700 !important;
        background: transparent;
        border: none;
        padding: 5px;
        z-index: 2001;
        /* Above almost everything */
    }

    /* Dropdown Menu - The Compact "Dropdown" Style */
    nav ul {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 60px;
        /* Directly below the 60px navbar */
        left: 0;
        width: 100%;
        background-color: #1a1a1a !important;
        /* Dark Grey professional background */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* Snappy easing */
        padding: 0;
        margin: 0;
        z-index: 2000;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        /* Deep shadow */
        border-bottom: 1px solid #333;
    }

    /* Active State for Menu */
    nav ul.active {
        max-height: 400px;
        /* Enough for 7-8 items, prevents full screen takeover */
        overflow-y: auto;
        /* Scroll if tiny phone landscape */
    }

    /* List Items */
    nav ul li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #333;
        /* Subtle separator */
    }

    nav ul li:last-child {
        border-bottom: none;
    }

    /* Links */
    nav a {
        display: block;
        padding: 12px 25px;
        /* Comfortable touch target, left aligned */
        color: #e0e0e0 !important;
        font-size: 0.95rem;
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.5px;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
        border-left: 3px solid transparent;
        /* reserved space for active indicator */
    }

    /* Hover & Active States */
    nav a:hover,
    nav a.active {
        background-color: #252525 !important;
        color: #ffd700 !important;
        border-left: 3px solid #ffd700;
        /* Visual "Active" Indicator */
        padding-left: 22px;
        /* Adjust padding to keep text aligned */
    }
}