/**
 * Site Header Component
 *
 * Global site header with branding and navigation.
 * Matches wireframe: sovereign-debt-hub-countries-wireframe.html
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.1.0
 */

/* ==========================================================================
   Header Base
   ========================================================================== */

.site-header {
	position: relative;
	background-color: var(--wp--preset--color--white);
	border-bottom: 2px solid var(--wp--preset--color--ocean-indigo);
}

.site-header__nav {
	display: flex;
	justify-content: center;
}

.site-header__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	width: 100%;
	max-width: 1280px;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

@media (min-width: 1024px) {
	.site-header__container {
		padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	}
}

.site-header__left {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

/* ==========================================================================
   Logo
   ========================================================================== */

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--wp--preset--color--ocean-indigo);
}

.site-header__logo:hover {
	text-decoration: none;
}

.site-header__logo-img {
	display: block;
	height: 44px;
	width: 68px;
	object-fit: contain;
	object-position: left center;
	filter: brightness(0) invert(1);
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.site-header__logo:hover .site-header__logo-img {
	opacity: 1;
}

/* ==========================================================================
   Primary Menu
   ========================================================================== */

.site-header__menu {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.site-header__menu {
		display: flex;
	}
}

.site-header__menu .menu-item {
	margin: 0;
}

.site-header__menu .menu-item a {
	display: block;
	padding: var(--wp--preset--spacing--xs) 0;
	color: var(--wp--preset--color--gray-700);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.site-header__menu .menu-item a:hover,
.site-header__menu .menu-item.current-menu-item a,
.site-header__menu .menu-item.current_page_item a {
	color: var(--wp--preset--color--ocean-indigo);
}

/* ==========================================================================
   CTA Button
   ========================================================================== */

.site-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.5rem;
	border: 2px solid var(--wp--preset--color--ocean-indigo);
	background: transparent;
	color: var(--wp--preset--color--ocean-indigo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header__cta:hover {
	background-color: var(--wp--preset--color--ocean-indigo);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.site-header__menu .menu-item a,
	.site-header__cta {
		transition: none;
	}
}