/* --- Global Variables & Base Header Styles --- */

:root { 
    --primary-color: #FF6600; 
    --dark-bg: #1A1A1A; 
    --text-light: #FFFFFF; 
    --card-bg: #2C2C2C; 
    --hover-bg: #3A3A3A;
    --max-width: 1200px; 
}

/* New style for mobile nav open state */
body.mobile-nav-open {
    overflow: hidden;
}
.container { 
    max-width: var(--max-width); 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* --- Header & Navigation Structure --- */

header { 
    background-color: #111; 
    padding: 15px 0; 
    border-bottom: 2px solid var(--primary-color); 
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
/* Ensures the image and text are perfectly centered vertically relative to each other */
.logo {
    display: flex;
    align-items: center; 
    
    /* NEW: Use the 'gap' property to define clean, reliable space between the image and text */
    gap: 10px; 
    
    font-size: 1.8em; 
    text-decoration: none;
    color: var(--text-light);
}

.logo:hover { 
    color: var(--primary-color); 
}

.logo span { 
    color: var(--primary-color); 
}

/* Logo Image Styling (50x50px) */
.logo img {
    width: 50px;
    height: 50px;
    
    /* CRITICAL FIX: Setting display: block removes the slight space below the image 
       that happens when it's treated as an inline element. */
    display: block; 
    
    /* REMOVED: margin-right: 10px; — The gap property on the parent .logo now handles this. */
    
    /* Ensures the image fills the 50x50 space while maintaining its aspect ratio. 
       Use 'contain' if you want to see the whole logo without cropping, or 'cover' 
       if you want it to fill the entire square (cropping if necessary).
       Based on your image, 'contain' is often better for logos. */
    object-fit: contain; 
}
 
/* --- Desktop Navigation Links --- */

.nav-links { 
    display: flex; 
    align-items: center;
    margin: 0 auto; /* Added for centering desktop links */
}
.nav-links a { 
    color: var(--text-light); 
    text-decoration: none; 
    margin: 0 15px; /* Spacing between links */
    padding: 8px 0;
    font-weight: 500; 
    position: relative;
    transition: color 0.3s, transform 0.2s;
    display: inline-block;
}
.nav-links a:hover { 
    color: var(--primary-color); 
    transform: translateY(-2px);
}
.nav-links a.active { 
    color: var(--primary-color); 
}

/* --- Dropdown Styling (Desktop) --- */

.dropdown {
    position: relative;
    display: inline-block;
    margin: 0 15px;
}
.dropdown-link { 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light) !important;
    padding: 8px 0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s, transform 0.2s;
}
.dropdown-link:hover { 
    color: var(--primary-color) !important; 
    transform: translateY(-2px);
}
.dropdown-toggle-arrow {
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease, color 0.3s;
}
.dropdown:hover .dropdown-link,
.dropdown:hover .dropdown-link .dropdown-toggle-arrow {
    color: var(--primary-color) !important;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1A1A1A;
    min-width: 250px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
    z-index: 1;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* Center dropdown */ 
    border-top: 3px solid var(--primary-color);
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
}
.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease-out;
}
.dropdown-content a {
    color: var(--text-light);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 0;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    font-weight: 400;
}
.dropdown-content a:hover {
    background-color: var(--hover-bg);
    color: var(--primary-color);
    transform: none;
}
 
/* --- Mobile Navigation Styles --- */
 
/* Hamburger - shown only on mobile */
.menu-toggle { 
    display: none; 
    cursor: pointer; 
    font-size: 1.9em;
    background: none; 
    border: none; 
    color: var(--text-light); 
    padding: 0;
}

/* Mobile panel styling (The collapsible full-screen menu) */
.mobile-nav-panel {
    display: none; /* Hidden by default for desktop */
    position: absolute;
    top: 70px; /* Adjust based on header height */
    left: 0;
    width: 100%;
    background: #0f0f0f;
    border-top: 1px solid #222;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    max-height: 0; 
    opacity: 0;
    transition: max-height 0.32s ease, opacity 0.25s ease;
}
.mobile-nav-panel[aria-hidden="false"] {
    display: block;
    max-height: 1000px; /* Sufficient height to show all content */
    opacity: 1;
}
.mobile-nav-inner { 
    padding: 10px 0; 
    display:flex; 
    flex-direction:column; 
    gap: 0; 
}

/* Styling for all simple links inside the mobile panel */
.mobile-nav-inner > a { 
    padding: 12px 20px; 
    text-decoration: none; 
    color: var(--text-light); 
    border-bottom: 1px solid #222;
    width: 100%;
    box-sizing: border-box;
}
.mobile-nav-inner > a:hover { 
    background: var(--hover-bg); 
    color: var(--primary-color); 
}

/* Accordion inside mobile panel (Services/Portfolio) */
.mobile-accordion { 
    border-bottom: 1px solid #222; 
}
.mobile-accordion .acc-toggle {
    width:100%;
    text-align:left;
    padding:12px 20px;
    background: transparent;
    color:var(--text-light);
    font-weight:600;
    font-size: 1em;
    border:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}
.mobile-accordion .acc-arrow { 
    transition: transform 0.25s ease; 
    font-size: 1.2em;
}
.mobile-accordion .acc-panel {
    max-height: 0;
    overflow:hidden;
    transition:max-height 0.28s ease;
    display:flex;
    flex-direction:column;
    background: #1A1A1A;
}
.mobile-accordion.open .acc-panel { max-height: 800px; } 
.mobile-accordion.open .acc-toggle { color: var(--primary-color); }
.mobile-accordion.open .acc-arrow { 
    transform: rotate(90deg); 
    color: var(--primary-color); 
}
.mobile-accordion .acc-panel a {
    padding: 10px 40px; /* Indent sub-links */
    text-decoration: none; 
    color: var(--text-light); 
    font-weight: 400;
}
.mobile-accordion .acc-panel a:hover {
    background: var(--hover-bg); 
    color: var(--primary-color); 
}

/* --- Media Queries (Responsiveness) --- */

@media (max-width: 1024px) {
    .nav-links {
        margin: 0 auto;
    }
    .nav-links a, .dropdown {
        margin: 0 10px;
        font-size: 0.95em;
    }
}
/* Hide desktop nav and show hamburger on small screens */
@media (max-width: 768px) {
    .nav-links { display: none; } 
    .menu-toggle { display:block; }
}

/* On larger screens, mobile panel must stay hidden */
@media (min-width: 769px) {
    .mobile-nav-panel { display: none !important; }
}

/* --- Animation --- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}