<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link
		href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap"
		rel="stylesheet">
	<?php wp_head(); ?>
</head>

<body <?php body_class('bg-light'); ?>>
	<?php wp_body_open(); ?>
	<div id="page" class="site d-flex flex-column min-vh-100">
		<header id="masthead" class="site-header sticky-top bg-white shadow-sm">
			<nav class="navbar navbar-expand-lg navbar-light container py-3">
				<a href="<?php echo esc_url(home_url('/')); ?>"
					class="navbar-brand fw-bold fs-4 d-flex align-items-center">
					<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/logo.svg'); ?>"
						alt="<?php bloginfo('name'); ?>" class="me-2" style="height: 40px; width: auto;">
					<span class="d-none d-sm-inline">Wisdom from the Kingdom</span>
				</a>

				<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
					data-bs-target="#primary-menu-collapse" aria-controls="primary-menu-collapse" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse justify-content-end" id="primary-menu-collapse">
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'menu-1',
							'menu_id' => 'primary-menu',
							'menu_class' => 'navbar-nav mb-2 mb-lg-0 fw-medium',
							'container' => false,
							'fallback_cb' => 'wisdom1_menu_fallback',
							// We're mostly mapping standard wp_nav_menu classes here.
							// A full custom nav walker would be needed for perfect Bootstrap dropdowns,
							// but standard ul/li works functionally with some styling tweaks.
						)
					);
					?>
					<button
						class="btn btn-outline-secondary ms-lg-3 rounded-circle p-2 d-flex align-items-center justify-content-center"
						data-bs-toggle="collapse" data-bs-target="#searchCollapse" aria-expanded="false"
						aria-controls="searchCollapse" aria-label="Toggle search">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<circle cx="11" cy="11" r="8"></circle>
							<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
						</svg>
					</button>
				</div>
			</nav>

			<!-- Search Overlay (Bootstrap Collapse) -->
			<div class="collapse search-overlay position-absolute w-100 bg-white border-bottom shadow-sm"
				id="searchCollapse" style="top: 100%; z-index: 1050;">
				<div class="container py-4">
					<form role="search" method="get" class="d-flex" action="<?php echo esc_url(home_url('/')); ?>">
						<input type="search" class="form-control form-control-lg me-2" placeholder="Search wisdom..."
							value="<?php echo get_search_query(); ?>" name="s">
						<button type="submit" class="btn btn-primary btn-lg px-4">Search</button>
					</form>
				</div>
			</div>
		</header>