/**
 * =====================================================
 * AOGM MAIN HEADER STYLES
 * =====================================================
 *
 * FILE
 * ----
 * assets/css/header.css
 *
 * PURPOSE
 * -------
 * Controls the desktop website header.
 *
 * HEADER STRUCTURE
 * ----------------
 *
 * Left   : Logo
 * Center : Ministry Name + Navigation
 * Right  : Search
 *
 * Future:
 * - Sticky header styles
 * - Divider systems
 * - Background options
 * - Dynamic submenu styles
 * =====================================================
 */


/**
 * =====================================================
 * MAIN HEADER WRAPPER
 * =====================================================
 *
 * Controls the overall desktop header area.
 * =====================================================
 */

.aogm-main-header {
	width: 100%;
	background: #ffffff;
	border-bottom: 1px solid #eeeeee;
}


/**
 * =====================================================
 * HEADER CONTAINER
 * =====================================================
 *
 * Main flex container holding all header columns.
 * =====================================================
 */

.aogm-header-container {

	max-width: 1400px;

	margin: 0 auto;

	padding: 20px 30px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 40px;
}


/**
 * =====================================================
 * LOGO COLUMN
 * =====================================================
 *
 * Left column containing the website logo.
 * =====================================================
 */

.aogm-header-logo {
	flex: 0 0 220px;
}

.aogm-header-logo img {
	max-width: 100%;
	height: auto;
}


/**
 * =====================================================
 * CENTER COLUMN
 * =====================================================
 *
 * Contains ministry name and primary navigation.
 * =====================================================
 */

.aogm-header-center {
	flex: 1;
	text-align: center;
}

/**
 * =====================================================
 * MINISTRY NAME ROW
 * =====================================================
 *
 * First row inside center column.
 * Displays ministry/church title.
 * =====================================================
 */

.aogm-ministry-name-row {

	margin-bottom: 15px;
}


/**
 * =====================================================
 * NAVIGATION ROW
 * =====================================================
 *
 * Second row inside center column.
 * Contains the primary desktop menu.
 * =====================================================
 */

.aogm-navigation-row {

	width: 100%;
}
/**
 * =====================================================
 * MINISTRY NAME
 * =====================================================
 *
 * Displays the church/ministry title.
 * =====================================================
 */

.aogm-ministry-name {

	font-size: 32px;

	font-weight: 700;

	margin-bottom: 15px;
}


/**
 * =====================================================
 * PRIMARY NAVIGATION
 * =====================================================
 *
 * Controls the desktop navigation menu.
 * =====================================================
 */

.aogm-main-menu {

	display: flex;

	justify-content: center;

	list-style: none;

	margin: 0;
	padding: 0;

	gap: 35px;
}

.aogm-main-menu li {
	position: relative;
}

.aogm-main-menu a {

	text-decoration: none;

	font-weight: 600;
}


/**
 * =====================================================
 * SEARCH COLUMN
 * =====================================================
 *
 * Right column containing search functionality.
 * =====================================================
 */

.aogm-header-search {
	flex: 0 0 250px;
}

.aogm-header-search input[type="search"] {
	width: 100%;
}


/**
 * =====================================================
 * RESPONSIVE STYLES
 * =====================================================
 *
 * Hide desktop header on tablets and mobiles.
 * Mobile header will be displayed instead.
 * =====================================================
 */

@media (max-width: 991px) {

	.aogm-main-header {
		display: none;
	}
}