<?php
/**
 * The header template file.
 *
 * Displays all of the <head> section and everything up until the main content area.
 *
 * @package Rosea
 *
 * This file is part of the Rosea WordPress theme.
 *
 * Rosea WordPress Theme, Copyright 2026 nopStation
 * Rosea is distributed under the terms of the GNU General Public License v2 or later.
 *
 * @license GPL-2.0-or-later
 * @license URI: https://www.gnu.org/licenses/gpl-2.0.html
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">


	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<?php wp_body_open(); ?>

	<a class="skip-link screen-reader-text" href="#main"><?php esc_html_e('Skip to content', 'rosea'); ?></a>

	<div class="main-container">

		<!-- Overlay for mobile menu -->
		<div class="overlay"></div>

		<!--header part-->
		<header>
			<?php if (get_header_image()): ?>
				<div class="rosea-header-image text-center">
					<img src="<?php header_image(); ?>" class="img-fluid w-100" alt="<?php bloginfo('name'); ?>">
				</div>
			<?php endif; ?>
			<div class="global-header">
				<div class="menu-container">
					<nav class="navbar navbar-expand-lg navbar-light ">
						<div class="header-main-content d-flex align-items-center w-100">
							<!-- Mobile Menu Toggle Button -->
							<button type="button" id="sidebarCollapse" class="btn navbar-toggler collapsed d-lg-none"
								aria-label="<?php esc_attr_e('Toggle mobile menu', 'rosea'); ?>" aria-expanded="false"
								aria-controls="sidebar">
								<span
									class="screen-reader-text"><?php esc_html_e('Toggle mobile menu', 'rosea'); ?></span>
								<span class="icon-nav" aria-hidden="true"></span>
							</button>
							<!-- Logo Left -->
							<div class="header-logo-section">
								<?php
								if (has_custom_logo()) {
									the_custom_logo();
								} else {
									?>
									<a class="navbar-brand logo" href="<?php echo esc_url(home_url('/')); ?>">
										<img src="<?php echo esc_url(get_template_directory_uri() . '/assets/img/logo.png'); ?>"
											alt="<?php bloginfo('name'); ?>" class="default-logo">
									</a>

									<?php if (get_bloginfo('description')): ?>
										<p class="site-description d-block mb-0">
											<?php echo esc_html(get_bloginfo('description')); ?>
										</p>
									<?php endif; ?>

									<?php
								}
								?>
							</div>
							<!-- Logo End -->

							<!-- Search Box Center -->
							<div class="header-search-section">
								<div class="navbar-collapse collapse" id="navbarSupportedContent">
									<ul class="navbar-nav main-search-box search-box-web">
										<li class="nav-item">
											<?php get_search_form(); ?>
										</li>
									</ul>
								</div>
							</div>
							<!-- Search Box End -->

							<!-- Social Icons Right -->
							<div class="header-social-section d-none d-lg-flex">
								<div class="header-social-icons">
									<?php
									$social_links = rosea_get_social_links();
									if (!empty($social_links)) {
										foreach ($social_links as $social) {
											if (!empty($social['url'])) {
												?>
												<a href="<?php echo esc_url($social['url']); ?>" target="_blank"
													rel="noopener noreferrer" title="<?php echo esc_attr($social['label']); ?>"
													class="social-icon">
													<i class="<?php echo esc_attr($social['icon']); ?>"></i>
												</a>
												<?php
											}
										}
									}
									?>
								</div>
							</div>
							<!-- Social Icons End -->


						</div>

						<!--mobile-menu-->
						<nav id="sidebar" role="navigation" aria-label="<?php esc_attr_e('Mobile Menu', 'rosea'); ?>">
							<button type="button" id="dismiss" class="menu-close"
								aria-label="<?php esc_attr_e('Close menu', 'rosea'); ?>">
								<span class="screen-reader-text"><?php esc_html_e('Close menu', 'rosea'); ?></span>
								<i class="fas fa-times" aria-hidden="true"></i>
							</button>

							<?php
							wp_nav_menu(array(
								'theme_location' => 'primary',
								'menu_class' => 'list-unstyled components',
								'container' => false,
								'fallback_cb' => 'rosea_default_menu',
							));
							?>
						</nav>
						<!--mobile-menu-->
					</nav>

					<!--Mobile Search-->
					<div class="pb-3 d-block d-lg-none w-100">
						<ul class="navbar-nav mx-auto main-search-box w-100">
							<li class="nav-item w-100">
								<?php get_search_form(); ?>
							</li>
						</ul>
					</div>
					<!--Mobile Search-->

				</div>

				<!--web-main-menu-->
				<div class="main-menu d-none d-md-block">
					<div class="row">
						<div class="col-md-12 text-center">
							<nav class="navbar navbar-expand-lg p-0" role="navigation"
								aria-label="<?php esc_attr_e('Primary Menu', 'rosea'); ?>">
								<?php
								wp_nav_menu(array(
									'theme_location' => 'primary',
									'menu_class' => 'm-auto text-uppercase',
									'container' => false,
									'fallback_cb' => 'rosea_default_menu',
									'depth' => 3,
								));
								?>
							</nav>
						</div>
					</div>
				</div>
				<!--web-main-menu-->
			</div>
		</header>
		<!--header part-->