<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<?php
$menu_style   = get_theme_mod( 'header_menu_style', 'classic' );
$branding_pos = get_theme_mod( 'sidebar_branding_position', 'left' );
?>

<?php if ( $menu_style === 'sidebar' ) : ?>
<!-- ══════════════════════════════════════════════════════════════
     LAYOUT 3: SIDEBAR
═══════════════════════════════════════════════════════════════ -->
<aside class="header-sidebar" id="header-sidebar" aria-hidden="true">
    <div class="header-sidebar-inner">
        <?php mm_branding( true ); ?>
        <?php mm_nav(); ?>
    </div>
    <button class="sidebar-menu-close" aria-label="Menü schließen"><i class="fas fa-times"></i></button>
</aside>
<div class="header-sidebar-overlay" id="sidebar-overlay"></div>
<header id="masthead" class="site-header site-header--sidebar branding-<?php echo esc_attr( $branding_pos ); ?>">
    <div class="container">
        <div class="header-main">
            <button class="sidebar-menu-toggle" aria-label="Menü öffnen" aria-expanded="false" aria-controls="header-sidebar">
                <i class="fas fa-bars"></i>
            </button>
            <?php if ( $branding_pos === 'right' ) : ?>
                <?php mm_icons(); ?>
                <?php mm_branding( true ); ?>
            <?php elseif ( $branding_pos === 'center' ) : ?>
                <div class="header-center-spacer"></div>
                <?php mm_branding( true ); ?>
                <?php mm_icons(); ?>
            <?php else : ?>
                <?php mm_branding( true ); ?>
                <?php mm_icons(); ?>
            <?php endif; ?>
        </div>
    </div>
</header>

<?php elseif ( $menu_style === 'centered' ) : ?>
<!-- ══════════════════════════════════════════════════════════════
     LAYOUT 2: ZENTRIERT
═══════════════════════════════════════════════════════════════ -->
<header id="masthead" class="site-header site-header--centered">
    <div class="container">
        <!-- Zeile 1: Branding + Icons -->
        <div class="header-row header-row-branding pos-<?php echo esc_attr( $branding_pos ); ?>">
            <?php if ( $branding_pos === 'left' ) : ?>
                <?php mm_branding( true ); ?>
                <div class="header-spacer"></div>
                <?php mm_icons(); ?>
            <?php elseif ( $branding_pos === 'right' ) : ?>
                <?php mm_icons(); ?>
                <div class="header-spacer"></div>
                <?php mm_branding( true ); ?>
            <?php else : ?>
                <div class="header-spacer"></div>
                <?php mm_branding( true ); ?>
                <?php mm_icons(); ?>
            <?php endif; ?>
        </div>
        <!-- Zeile 2: Navigation zentriert -->
        <div class="header-row header-row-nav">
            <?php mm_nav(); ?>
        </div>
    </div>
</header>

<?php elseif ( $menu_style === 'mega' ) : ?>
<!-- ══════════════════════════════════════════════════════════════
     LAYOUT 4: MEGA-MENÜ
═══════════════════════════════════════════════════════════════ -->
<header id="masthead" class="site-header site-header--mega">
    <div class="container">
        <!-- Zeile 1: Branding + Icons -->
        <div class="header-row header-row-branding pos-<?php echo esc_attr( $branding_pos ); ?>">
            <?php if ( $branding_pos === 'left' ) : ?>
                <?php mm_branding( true ); ?>
                <div class="header-spacer"></div>
                <?php mm_icons(); ?>
            <?php elseif ( $branding_pos === 'right' ) : ?>
                <?php mm_icons(); ?>
                <div class="header-spacer"></div>
                <?php mm_branding( true ); ?>
            <?php else : ?>
                <div class="header-spacer"></div>
                <?php mm_branding( true ); ?>
                <?php mm_icons(); ?>
            <?php endif; ?>
        </div>
    </div>
    <!-- Zeile 2: Menü volle Breite -->
    <div class="header-mega-nav-bar">
        <div class="container">
            <?php mm_nav('mega-nav'); ?>
        </div>
    </div>
</header>

<?php else : ?>
<!-- ══════════════════════════════════════════════════════════════
     LAYOUT 1: CLASSIC
═══════════════════════════════════════════════════════════════ -->
<header id="masthead" class="site-header site-header--classic">
    <div class="container">
        <?php if ( $branding_pos === 'center' ) : ?>
            <!-- Center: Branding oben zentriert, Menü darunter -->
            <div class="header-row header-row-branding pos-center">
                <div class="header-spacer"></div>
                <?php mm_branding( true ); ?>
                <?php mm_icons(); ?>
            </div>
            <div class="header-row header-row-nav">
                <?php mm_nav(); ?>
            </div>
        <?php elseif ( $branding_pos === 'right' ) : ?>
            <!-- Right: Icons + Nav links, Branding rechts -->
            <div class="header-main">
                <?php mm_nav(); ?>
                <div class="header-spacer"></div>
                <?php mm_icons(); ?>
                <?php mm_branding( true ); ?>
            </div>
        <?php else : ?>
            <!-- Left: Branding links, Nav Mitte, Icons rechts -->
            <div class="header-main">
                <?php mm_branding( true ); ?>
                <?php mm_nav(); ?>
                <?php mm_icons(); ?>
            </div>
        <?php endif; ?>
    </div>
</header>

<?php endif; ?>