/* DARKFORGE HEADER CSS GRID */

/* --- TOP BAR (System/Meta Nav) --- */
#header-top-bar {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
    color: #aaa;
    font-size: 0.85rem;
    padding: 4px 0;
}

#header-top-bar a {
    color: #ccc;
    transition: color 0.2s;
}

#header-top-bar a:hover {
    color: var(--df-accent, #ff9e00);
    text-decoration: none;
}

/* --- MAIN HEADER WRAPPER --- */
.df-header-wrapper {
    background-color: rgba(30, 30, 30, 0.98);
    backdrop-filter: blur(8px);
    width: 100%;
    z-index: 1030;
    border-bottom: 1px solid var(--df-accent, #ff9e00);
    transition: padding 0.3s ease;
    padding-top: 15px;
    /* More space on top */
    padding-bottom: 0px;
    /* FLUSH BOTTOM for nav */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    /* Ensure height stretches */
    flex-direction: column;
    justify-content: center;
}

/* --- THE GRID --- */
.df-header-grid {
    display: grid;
    /* Grid Columns: Logo | Nav | Search | Icons */
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    column-gap: 30px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    min-height: 80px;
    /* Ensure space */
}

/* 1. LOGO */
.df-logo img {
    max-height: 70px;
    /* Optimal height */
    transition: max-height 0.3s ease;
}

.df-logo .h1 {
    color: var(--df-accent, #ff9e00);
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. SEARCH */
.df-search {
    min-width: 200px;
    width: 250px;
    /* Fixed smaller width */
    justify-self: end;
}

.df-search-wrapper {
    position: relative;
    width: 100%;
}

.df-search input.form-control {
    border-radius: 4px;
    /* Slight rounded corners, not full pill */
    padding-right: 40px;
    background-color: #000;
    border: 1px solid #444;
    color: #fff;
    height: 40px;
}

.df-search input.form-control:focus {
    background-color: #111;
    border-color: var(--df-accent, #ff9e00);
    box-shadow: none;
}

.df-search button[type="submit"] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: transparent;
    border: none;
    color: #888;
    transition: color 0.2s;
}

.df-search button:hover {
    color: var(--df-accent, #ff9e00);
}

/* 3. NAVIGATION (CRITICAL FIXES) */
.df-nav {
    justify-self: center;
    /* Center the navigation block */
    width: auto;
    /* Shrink to content to allow centering */
    align-self: end;
    /* PUSH TO BOTTOM EDGE */
    margin-bottom: -2px;
    /* Pull down slightly */
    display: flex;
    /* Enable Flexbox for icon + menu alignment */
    align-items: flex-end;
    /* Align icon and menu to the bottom */
}

/* INTEGRATED HOME ICON ADJUSTMENT (LIFT for Baseline) */
.nav-home-integrated .nav-link {
    padding-bottom: 38px !important;
    /* Slightly increased to lift icon (Standard) */
    padding-left: 10px !important;
    padding-right: 15px !important;
}

/* Nudge Icon UP & SIZE */
.nav-home-integrated .nav-link .fas {
    position: relative;
    top: -1px;
    font-size: 1.2rem;
}

/* Nudge Icon UP & SIZE */
.home-icon-nav .nav-link .fas {
    position: relative;
    top: -1px;
    font-size: 1.2rem;
    /* Larger */
}


/* Force Visibility of Collapse Content */
.df-nav .active-header-nav,
.df-nav #mainNavigation,
.df-nav .collapse.navbar-collapse {
    display: block !important;
    /* Override Bootstrap collapse */
    height: auto !important;
}

/* Hide Mobile Elements on Desktop */
.df-nav .nav-mobile-header {
    display: none !important;
}

/* Navbar Flex Reset */
.df-nav .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* DISABLE NOVA DEFAULT HIGHLIGHTER (The thick line issue) */
.df-nav .navbar-nav>.nav-item>.nav-link::before {
    display: none !important;
    content: none !important;
}

/* Link Styling */
.df-nav .nav-link {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8rem 0.8rem;
    padding-bottom: 32px;
    /* Increase bottom padding to reach edge */
    letter-spacing: 0.5px;
    border-bottom: 3px solid transparent;
    /* Thinner active line (1px) */
    /* Thicker hover line */
    /* For hover effect */
    transition: all 0.2s ease;
}

.df-nav .nav-link:hover,
.df-nav .nav-item.active .nav-link {
    color: var(--df-accent, #ff9e00) !important;
    border-bottom-color: var(--df-accent, #ff9e00);
}


/* --- MEGA MENU & DROPDOWNS --- */

/* 1. Anchor Dropdowns to the Grid (Full width of content) */
.df-header-grid {
    position: relative;
}

/* 2. Release Nav Items to allow Grid-Width Dropdown */
.df-nav .nav-item {
    position: static !important;
}

/* 3. Mega Menu Styling */
.df-nav .dropdown-menu {
    position: absolute;
    left: 20px;
    /* Align with grid gutter */
    right: 20px;
    /* Align with grid gutter */
    width: auto;
    /* Stretch to Left/Right */
    top: 100%;
    /* Start directly below header */
    margin-top: 0;

    background-color: rgba(25, 25, 25, 0.98);
    backdrop-filter: blur(15px);
    border: 1px solid #444;
    border-top: 3px solid var(--df-accent, #ff9e00);
    /* Accent Line */
    border-radius: 0 0 5px 5px;

    padding: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    z-index: 2000;

    /* Reset heights/scrolls */
    max-height: none !important;
    overflow: visible !important;
}

/* 4. Mouseover / Hover Logic (Desktop) */
@media (min-width: 992px) {
    .df-nav .nav-item:hover .dropdown-menu {
        display: block;
        animation: dfMenuFadeIn 0.2s ease-out forwards;
    }
}

@keyframes dfMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- MEGA MENU: CYBERPUNK SAMURAI 2026 --- */

/* 5. The Container - Tech Frame */
.df-nav .dropdown-menu {
    /* Angled 'Cut' Corners (Samurai/Tech look) */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            20px 100%,
            0 calc(100% - 20px));

    /* Dark Metal Background - SOLID (100%) as requested */
    background-color: #0d0d0d;
    /* Solid Color */
    background-image: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2) 1px,
            transparent 1px,
            transparent 2px);
    background-size: 100% 4px;
    backdrop-filter: none;
    /* Remove blur as it's solid now */

    /* Neon Borders - Calmed Down (Dark Gray instead of Orange) */
    border: 1px solid #333;
    /* Fallback */
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 2px solid #333;
    /* Was orange */
    border-bottom: none;
    /* Handled by clip-path visual */

    padding: 40px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    /* Dark shadow instead of orange glow */
}

/* Row Layout */
.df-nav .dropdown-menu .row {
    margin: 0 -10px;
    display: flex;
    justify-content: center;
}

/* --- THE CARDS: Tech Modules --- */
.df-nav .dropdown-menu [class*="col-"] {
    padding: 25px 15px;
    margin: 0 10px 20px 10px;

    /* Glassy Tech Module Base - Less Transparent */
    background: rgba(20, 20, 20, 0.85);
    /* Increased from 0.6 */
    border: 1px solid #333;
    position: relative;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Sharp edges */
    border-radius: 0;

    /* Text alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 5-Column Grid Support (20% width minus margins) */
@media (min-width: 992px) {
    .df-nav .dropdown-menu .col-lg-20 {
        -ms-flex: 0 0 calc(20% - 20px);
        flex: 0 0 calc(20% - 20px);
        max-width: calc(20% - 20px);
    }
}

/* Tech Brackets (Corners) using pseudo-elements */
.df-nav .dropdown-menu [class*="col-"]::before,
.df-nav .dropdown-menu [class*="col-"]::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    pointer-events: none;
    /* FIX: Allow clicks to pass through */
}

/* Top Left & Top Right Brackets */
.df-nav .dropdown-menu [class*="col-"]::before {
    top: 0;
    left: 0;
    border-top-color: #555;
    border-left-color: #555;
}

.df-nav .dropdown-menu [class*="col-"]::after {
    bottom: 0;
    right: 0;
    border-bottom-color: #555;
    border-right-color: #555;
}

/* --- HOVER STATE: Activation --- */
.df-nav .dropdown-menu [class*="col-"]:hover {
    background: rgba(10, 10, 10, 0.95);
    /* Darker and Less Transparent (More Solid) */
    /* White tint instead of orange */
    border-color: #666;
    /* Lighter gray instead of orange */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transform: translateY(-5px);
}

/* Active Brackets on Hover - Keep these Orange for minimal accent */
.df-nav .dropdown-menu [class*="col-"]:hover::before,
.df-nav .dropdown-menu [class*="col-"]:hover::after {
    width: 100%;
    height: 100%;
    border-color: var(--df-accent);
    /* Subtle corner activation */
}

/* --- IMAGES: Holographic Projection --- */
.df-nav .dropdown-menu img {
    max-width: 60% !important;
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 20px;

    filter: grayscale(100%) contrast(1.2);
    opacity: 0.8;
    transition: all 0.4s ease;

    /* Tech Mask */
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}

/* NO IMAGE CASE */
.no-image-placeholder {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.no-image-placeholder .fas {
    color: #444 !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.df-nav .dropdown-menu [class*="col-"]:hover .no-image-placeholder .fas {
    color: var(--df-accent, #ff9e00) !important;
    text-shadow: 0 0 10px var(--df-accent);
    transform: scale(1.2);
}

.df-nav .dropdown-menu [class*="col-"]:hover img {
    filter: grayscale(0%) contrast(1.1) drop-shadow(0 0 8px rgba(255, 158, 0, 0.5));
    opacity: 1;
    transform: scale(1.1);
}

/* --- TYPOGRAPHY: Future Heavy Metal --- */
.df-nav .dropdown-menu .h4,
.df-nav .dropdown-menu .h5,
.df-nav .dropdown-menu strong,
.df-nav .dropdown-menu .nav-link.main-category {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    font-weight: 800;
    text-shadow: 2px 2px 0px #000;
    margin-bottom: 15px;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    display: inline-block;
}

.df-nav .dropdown-menu [class*="col-"]:hover .h4,
.df-nav .dropdown-menu [class*="col-"]:hover strong {
    border-bottom-color: var(--df-accent);
    color: var(--df-accent);
}

/* Links */
.df-nav .dropdown-item {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    padding: 5px 0;
    background: transparent !important;
    border-bottom: 1px dashed #333;
}

.df-nav .dropdown-item:hover {
    color: #fff;
    text-shadow: 0 0 5px var(--df-accent);
    padding-left: 5px;
    border-bottom-color: var(--df-accent);
}

.df-nav .dropdown-item:last-child {
    border-bottom: none;
}


/* 4. ICONS (User, Heart, Cart) */
.df-icons {
    justify-self: end;
}

.df-icons .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.df-icons .nav-item {
    margin-left: 15px;
}

.df-icons .nav-link {
    color: #fff !important;
    font-size: 1.2rem;
    padding: 5px;
    transition: color 0.2s;
}

.df-icons .nav-link:hover {
    color: var(--df-accent, #ff9e00) !important;
}

.df-icons .cart-icon-link {
    position: relative;
}

.df-icons .badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--df-accent, #ff9e00);
    color: #000;
    font-size: 0.7rem;
}

/* --- SCROLLED STATE (Refined) --- */
body.df-scrolled .df-header-wrapper {
    padding: 0;
    background-color: rgba(20, 20, 20, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    height: 60px;
    /* Fixed height for consistency */
}

body.df-scrolled .df-header-grid {
    height: 100%;
    /* Fill wrapper */
    min-height: 0 !important;
}

body.df-scrolled .df-logo img {
    max-height: 40px;
    /* Slightly easier to read */
}

/* Fix Scrolled Nav Alignment */
body.df-scrolled .df-nav {
    margin-bottom: 0px;
    /* Align flush */
}

body.df-scrolled .df-nav .nav-link {
    font-size: 0.85rem;
    padding-top: 1rem;
    /* Center text vertically */
    padding-bottom: 18px;
    /* Distance to bottom border */
    border-bottom-width: 3px;
    /* ENSURE LINK REACHES BOTTOM TO BRIDGE GAP */
    height: 100%;
    display: flex;
    align-items: center;
}

/* FIX: Ensure Dropdown connects to header in sticky mode */
body.df-scrolled .df-nav .dropdown-menu {
    top: 80px;
    /* Adjusted to prevent overlap */
    margin-top: 0 !important;
}


/* Integrated Home Icon Adjustment for Scrolled State (LIFTED) */
body.df-scrolled .nav-home-integrated .nav-link {
    padding-bottom: 22px !important;
    /* Reduced to 22px to lower icon by 2px */
}

body.df-scrolled .nav-home-integrated .nav-link .fas {
    top: -1px;
    font-size: 1.2rem;
}


/* Search Box Scaling */
body.df-scrolled .df-search input.form-control {
    height: 32px;
    font-size: 0.85rem;
    padding-right: 30px;
}

body.df-scrolled .df-search button[type="submit"] {
    height: 32px;
    /* Match input height explicitly */
    width: 30px;
    top: 0;
    line-height: 32px;
    /* Force vertical centering of text/icon */
    padding: 0;
    /* Reset padding */
    display: flex;
    /* Use flexbox for robust centering */
    align-items: center;
    justify-content: center;
}

/* Icon adjustments */
body.df-scrolled .df-icons .nav-link {
    font-size: 1rem;
}



/* --- MOBILE RESPONSIVENESS (< 992px) --- */
@media (max-width: 991px) {
    .df-header-grid {
        grid-template-columns: 1fr auto;
        /* Row 1: Logo | Icons */
        grid-template-rows: auto auto auto;
        /* Logo/Icons | Search | Nav(Hidden) */
        row-gap: 15px;
    }

    .df-logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .df-icons {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .df-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .df-nav {
        display: none !important;
        /* TODO: Implement Mobile Menu Toggler */
    }
}