<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen flex flex-col bg-cream" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
        <!-- Skip to content link for keyboard accessibility -->
        <a
            href="#main-content"
            class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md focus:font-semibold"
            data-test="skip-to-content"
        >
            {{ __('Skip to content') }}
        </a>

        <x-navigation />

        <!-- Spacer for fixed navigation -->
        <div class="h-16"></div>

        <main id="main-content" class="flex-1" tabindex="-1">
            <div class="max-w-[1200px] mx-auto px-4 py-8">
                {{ $slot }}
            </div>
        </main>

        <x-footer />

        @fluxScripts
    </body>
</html>
