/*
 * NPL Sports Pro Theme - Header & Footer Styles
 * File: Assets/css/header-footer.css
 */

/* ===================================================================
 * TABLE OF CONTENTS
 * 1. Header Styles (Desktop)
 * 2. Header Dropdown Search Bar
 * 3. Mobile Header & Menu Overlay
 * 4. Responsive Styles - Header
 * =================================================================== */

/* ===================================================================
 * 1. Header Styles (Desktop)
 * =================================================================== */
.header-top-bar {
    padding: 10px 0; /* Add a little vertical padding */
	background-color: #0010a0; 
}
.current-date {
    color: #fff; /* Date color changed to white */
    font-size: 13px;
    font-weight: 500;
}
.header-top-navigation a {
    color: #fff; /* Top menu item color changed to white */
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.2s ease;
}
.header-top-navigation a:hover {
    opacity: 0.8;
}
.header-social-icons a {
    color: #fff; /* Social icon color changed to white */
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s ease;
}
.header-social-icons a:hover {
    opacity: 0.8;
}

/* --- Default Desktop Styles --- */
.header-main-nav { 
    background-color: #0010a0; 
    border-bottom: 3px solid #dd0000; 
    position: relative; 
}
.header-ad-space {
text-align: center; 
border: 1px solid #ccc; 
padding: 10px; 
display: flex; 
align-items: center; 
justify-content: center;
 }
.header-top-bar .container, 
.header-main-area .container, 
.header-main-nav .container { 
display: flex; 
justify-content: space-between; 
align-items: center; 
}
.top-bar-right { 
display: flex; 
align-items: center; 
}
.header-top-navigation ul { 
list-style: none; 
margin: 0; 
padding: 0; 
display: flex; 
}
.header-top-navigation li { 
margin-left: 15px; /* Increased spacing */
} 
.header-social-icons { 
margin-left: 15px; 
display: flex; 
gap: 12px; /* Increased spacing */
} 
.header-main-area { 
padding: 10px 0; 
border-bottom: 1px solid #eee; 
}
.header-main-area .container { 
gap: 10px; 
}
.site-branding .custom-logo-link { 
display: block; 
}
.custom-logo {
	max-height: 80px ; 
	width: auto; 
	}
.header-ad-space {
	flex-grow: 1; 
	height: 90px!important;
	min-height: 90px !important;  
	}
.desktop-nav { 
display: flex; 
align-items: center; 
width: 100%; 
}
.main-navigation {
	flex-grow: 1; }
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex; }
.main-navigation ul li {
	position: relative; }
.main-navigation a {
	display: block;
	padding: 15px 20px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	color: #fff;
	transition: background-color 0.2s ease; }
.main-navigation li:hover > a, 
.main-navigation .current-menu-item > a {
	background-color: #dd0000;
	}
.main-navigation ul ul {
	display: none; 
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #0010a0;
	min-width: 220px;
	z-index: 9999;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.main-navigation ul li:hover > ul {
	display: block;
	}
.main-navigation ul ul li {
	width: 100%;
	border-bottom: 1px solid rgba(255,255,255,0.1);
 	}
.main-navigation ul ul a {
	text-transform: none;
	font-weight: normal; }
.header-search-icon {
	padding: 15px 20px;
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	}

/* --- Mobile Elements (Hidden on Desktop) --- */
.npl-mobile-header {
	display: none;
	}
.mobile-header-ad-area {
	height: 50px !important;
	display: none;
	}
.custom-mobile-logo {
	max-height: 50px;
	width: auto;
	}
/* ===================================================================
 * 4. Responsive Styles - Header & Footer (7 Devices)
 * =================================================================== */
@media (max-width: 1024px) {
    .header-main-area,
    .header-main-nav .desktop-nav {
        display: none !important;
    }
    .npl-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 5px 0;
        height: 60px;
    }
    .npl-mobile-logo {
        flex-grow: 1;
        text-align: center;
    }
    .npl-mobile-logo .custom-logo {
        max-height: 50px; 
    }
}

@media (max-width: 768px) {
    .header-top-bar, .header-main-area { display: none !important; }

@media (max-width: 767px) {
    .mobile-header-ad-area {
        display: block;
        text-align: center;
        padding: 5px 0;
		height: 50px !important; 
        background-color: #f1f1f1;
    }
    .header-top-bar {
        display: none;
    }
}

@media (max-width: 400px) {
    .header-search-bar {
        width: 300px;
        right: -15px;
    }
}