/**
 * Header Styles
 * 
 * Consolidated stylesheet for all header-related styles including:
 * - Site header layout
 * - Navigation menu
 * - Site branding
 * - Get Started button
 * - Menu section layout
 * - User avatar menu integration
 * 
 * @package Ethos
 */

/* ==========================================================================
   Site Header
   ========================================================================== */

header#masthead {
	padding: 10px 0 !important; /* Reduced from 10px */
	height: auto !important; /* Override fixed height from style.css */
	min-height: auto !important; /* Remove any min-height */
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 10010; /* Always above overlay (9998) and menu (10001) */
}

.site-header {
	width: 100%;
	box-sizing: border-box;
}

.site-header .container {
	overflow: visible;
	width: 100% !important;
	max-width: 100% !important; /* Override Bootstrap container max-width */
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

/* Ensure row doesn't interfere with flex layout */
.site-header .container .row {
	margin: 0;
	display: flex;
	width: 100%;
}

/* ==========================================================================
   Menu Section Layout
   ========================================================================== */

.menu-section {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: 100% !important;
	position: relative;
	min-height: 50px; /* Reduced from 60px */
	margin: 0 !important; /* Override Bootstrap row margins */
	justify-content: flex-start;
	overflow: visible !important; /* Allow content to be visible, handled by container */
	box-sizing: border-box;
}

/* Override Bootstrap row negative margins if they exist */
.row.menu-section {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Override any Bootstrap column classes that might interfere */
.menu-section > * {
	flex-shrink: 1;
	max-width: none !important;
}

/* ==========================================================================
   Site Branding
   ========================================================================== */

.menu-section .site-branding {
	flex: 0 0 auto !important;
	min-width: 0;
	margin-right: 15px;
	max-width: 140px; /* Reduced from 250px */
	flex-shrink: 0;
}

.site-branding img,
.site-branding .custom-logo {
	max-width: 140px !important; /* Reduced from 250px */
	height: auto !important; /* Maintain aspect ratio */
	max-height: 45px !important; /* Reduced from 60px to match smaller header */
	width: auto !important;
}

/* ==========================================================================
   Main Navigation
   ========================================================================== */

.menu-section .main-navigation {
	flex: 1 1 auto; /* Allow navigation to grow and shrink */
	min-width: 0;
	overflow: visible; /* Allow overflow to be handled by menu-section */
	max-width: none; /* Remove restrictive max-width */
}

/* Hide menu toggle button - always show menu links directly */
.menu-toggle {
	display: none !important;
}

/* Navigation Menu List */
nav ul {
	list-style: none;
	display: flex;
	margin-right: 20px;
}

.main-navigation ul {
	justify-content: center;
}

.menu-section .main-navigation ul#primary-menu {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 6px !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

nav ul li {
	margin-left: 20px;
}

.menu-section .main-navigation ul#primary-menu li {
	flex-shrink: 1;
	white-space: nowrap;
}

/* Navigation Links */
nav ul li a {
	color: white;
	text-decoration: none;
}

ul#primary-menu {
	gap: 10px;
}

ul#primary-menu li a {
	color: #181818;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	font-family: Poppins, sans-serif;
	transition: all 0.3s ease;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.menu-section .main-navigation ul#primary-menu li a {
	font-size: 14px !important;
	padding: 8px 12px !important;
	white-space: nowrap;
	border-radius: 6px;
}

/* Navigation link hover effect */
ul#primary-menu li a:hover {
	color: var(--primary-color, #e9463b) !important;
	font-weight: 500;
	background-color: rgba(233, 70, 59, 0.08);
}

.menu-footer-container .current-menu-item a {
    color: white !important;
}

/* Active/current page styling */
.current_page_item a,
.current-menu-item a {
	color: var(--primary-color, #e9463b) !important;
	font-weight: 600;
	background-color: rgba(233, 70, 59, 0.1);
}

/* Icon support for navigation items */
ul#primary-menu li a i,
ul#primary-menu li a .fa {
	font-size: 14px;
	width: 16px;
	text-align: center;
	transition: transform 0.3s ease;
}

ul#primary-menu li a:hover i,
ul#primary-menu li a:hover .fa {
	transform: scale(1.1);
}

/* ==========================================================================
   Get Started Button (Legacy - hidden when auth toggle is present)
   ========================================================================== */

.menu-section .get-started {
	flex: 0 0 auto !important;
	white-space: nowrap;
	margin-left: 10px;
	margin-right: 0;
}

/* ==========================================================================
   Auth Toggle Button
   ========================================================================== */

.menu-section .ethos-auth-toggle {
	flex: 0 0 auto !important;
	white-space: nowrap;
	margin-left: 10px;
	margin-right: 0;
}

/* Default Get Started button styling (when start-btn class is not present) */
.get-started:not(.start-btn) a {
	font-weight: 700;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	font-family: Oswald, arial, sans-serif !important;
	position: relative;
	background-color: #fff;
	font-size: 14px !important;
	color: #333;
	text-align: center;
	line-height: 11px;
}

/* Start button (gradient styling) */
.start-btn {
	white-space: nowrap;
	background-image: linear-gradient(135deg, #267dff, #f64c55);
	border-radius: 100px;
	padding-left: 20px;
	padding-right: 20px;
	transition: box-shadow .2s, width .2s;
	padding: 11px 16px 9px;
	cursor: pointer;
	border: none; /* Remove any default borders */
}

/* Start button link styling - override .get-started a when both classes present */
.get-started.start-btn a,
.start-btn a {
	color: white !important;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 16px;
	text-decoration: none !important;
	font-family: Poppins, sans-serif !important;
	display: inline-block;
	transition: background-color 0.3s;
	background-color: transparent !important; /* Remove white background */
	border-bottom: none !important; /* Remove border */
}

/* Remove underline on all link states for get started buttons */
.get-started.start-btn a:hover,
.get-started.start-btn a:focus,
.get-started.start-btn a:active,
.get-started.start-btn a:visited,
.start-btn a:hover,
.start-btn a:focus,
.start-btn a:active,
.start-btn a:visited {
	text-decoration: none !important;
}

.start-btn:hover {
	box-shadow: 0 2px 4px -1px rgba(0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12);
}

/* Hide Get Started button when auth toggle or user menu is present */
.menu-section:has(.ethos-auth-toggle) .get-started,
.menu-section:has(.ethos-user-avatar-menu--logged-in) .get-started,
body.user-logged-in .menu-section .get-started {
	display: none !important;
}

/* Hide auth toggle when user is logged in */
.menu-section:has(.ethos-user-avatar-menu--logged-in) .ethos-auth-toggle,
body.user-logged-in .menu-section .ethos-auth-toggle {
	display: none !important;
}

/* Show auth toggle only for logged-out users */
body.logged-out .menu-section .ethos-auth-toggle {
	display: inline-flex;
}

/* ==========================================================================
   User Avatar Menu Integration
   ========================================================================== */

/* Avatar menu - always on the right, don't shrink */
.menu-section .ethos-user-avatar-menu {
	flex: 0 0 auto !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	white-space: nowrap;
	position: relative;
	z-index: 1000;
	min-width: fit-content;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Large tablets and small desktops */
@media (max-width: 1400px) {
	.menu-section .main-navigation ul#primary-menu li a {
		font-size: 13px;
		padding: 5px 5px;
	}
	
	.menu-section {
		gap: 6px !important;
	}
}

/* Tablets */
@media (max-width: 1200px) {
	.menu-section .main-navigation ul#primary-menu li a {
		font-size: 12px;
		padding: 5px 4px;
	}
	
	.menu-section .site-branding img,
	.menu-section .site-branding .custom-logo {
		max-width: 120px !important;
		max-height: 55px !important;
	}
	
	.menu-section {
		gap: 5px !important;
	}
}

/* Small tablets */
@media (max-width: 992px) {
	.menu-section .main-navigation ul#primary-menu li a {
		font-size: 11px;
		padding: 5px 3px;
	}
	
	.menu-section {
		gap: 4px !important;
	}
	
	.menu-section .site-branding img,
	.menu-section .site-branding .custom-logo {
		max-width: 100px !important;
		max-height: 45px !important;
	}
}

/* Mobile devices */
@media (max-width: 768px) {
	.menu-section .main-navigation ul#primary-menu {
		display: flex !important; /* Always show menu links directly */
		flex-wrap: wrap; /* Allow wrapping on small screens */
	}
	
	.menu-section .get-started {
		display: none; /* Hide on mobile or make it icon-only */
	}
	
	.menu-section .site-branding img,
	.menu-section .site-branding .custom-logo {
		max-width: 90px !important;
		max-height: 40px !important;
	}
	
	.menu-section {
		flex-wrap: wrap;
		gap: 10px;
	}
}