<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ asset('assets/img/uganda-flag.jpg') }}" rel="icon">
    <title>@yield('title', 'National Gender-Based Violence Database')</title>
    <style>
        :root { --ngbvd-yellow:#FDB209; --ngbvd-dark:#111827; --ngbvd-muted:#64748b; --ngbvd-border:#e5e7eb; --ngbvd-red:#d90429; --ngbvd-bg:#f8fafc; }
        * { box-sizing: border-box; }
        body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--ngbvd-dark); background:var(--ngbvd-bg); }
        a { color:inherit; text-decoration:none; }
        .container { width:min(1160px, calc(100% - 32px)); margin:0 auto; }
        .row { display:flex; flex-wrap:wrap; margin:0 -12px; }
        [class*="col-"] { padding:0 12px; }
        .col-lg-12 { flex:0 0 100%; max-width:100%; } .col-lg-6 { flex:0 0 50%; max-width:50%; } .col-lg-4 { flex:0 0 33.333%; max-width:33.333%; } .col-lg-3 { flex:0 0 25%; max-width:25%; }
        .top-flag div:nth-child(1){height:4px;background:#000}.top-flag div:nth-child(2){height:4px;background:#facc15}.top-flag div:nth-child(3){height:4px;background:#dc2626}
        .site-nav { background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--ngbvd-border); position:sticky; top:0; z-index:20; }
        .site-nav .inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
        .brand { display:flex; align-items:center; gap:14px; font-weight:900; }
        .brand img { width:54px; height:54px; object-fit:contain; }
        .brand span { display:block; font-size:.82rem; color:var(--ngbvd-muted); font-weight:800; margin-top:2px; }
        .nav-links { display:flex; align-items:center; gap:18px; font-weight:800; color:#334155; font-size:.94rem; }
        .public-menu-button { display:none; border:1px solid var(--ngbvd-border); background:#fff; border-radius:10px; padding:10px 12px; font-weight:900; }
        .btn { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:12px 18px; font-weight:900; border:1px solid transparent; cursor:pointer; }
        .btn-primary { background:var(--ngbvd-yellow); color:#111827; box-shadow:0 10px 24px rgba(253,178,9,.28); }
        .btn-outline { border-color:var(--ngbvd-border); background:#fff; color:#111827; }
        .hero { position:relative; overflow:hidden; padding:86px 0 72px; background:linear-gradient(135deg, rgba(253,178,9,.94), rgba(255,255,255,.96)), url('{{ asset('assets/img/violence.jpg') }}') center/cover no-repeat; }
        .hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; }
        .kicker { display:inline-flex; background:rgba(255,255,255,.75); border:1px solid rgba(17,24,39,.12); border-radius:999px; padding:8px 12px; font-weight:900; font-size:.82rem; margin-bottom:18px; }
        .hero h1 { font-size:clamp(2.2rem, 5vw, 4.4rem); line-height:1.02; margin:0 0 18px; letter-spacing:-.04em; }
        .hero p { font-size:1.12rem; color:#374151; line-height:1.7; margin:0 0 28px; max-width:720px; }
        .hero-card, .panel, .info-box, .public-card { background:#fff; border:1px solid var(--ngbvd-border); border-radius:20px; padding:28px; box-shadow:0 16px 42px rgba(15,23,42,.07); }
        .hero-card { background:rgba(255,255,255,.88); border-color:rgba(255,255,255,.8); }
        .section, .contact, .about { padding:64px 0; }
        .section-title span, .section h2, .page-title { font-size:2rem; font-weight:900; margin:0 0 14px; display:block; }
        .section-intro { color:var(--ngbvd-muted); max-width:760px; line-height:1.7; margin-bottom:30px; }
        .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
        .card { background:#fff; border:1px solid var(--ngbvd-border); border-radius:18px; padding:22px; box-shadow:0 10px 28px rgba(15,23,42,.06); }
        .card strong { display:block; font-size:1.8rem; margin-bottom:8px; }
        .card span, .panel p, .panel li, .info-box p { color:var(--ngbvd-muted); line-height:1.75; }

        .gbv-communication-panel { overflow:hidden; }
        .gbv-message-visual { min-height:170px; margin:-28px -28px 24px; padding:28px; display:flex; align-items:flex-end; gap:16px; color:#fff; background:linear-gradient(135deg, rgba(17,24,39,.92), rgba(217,4,41,.70)), url('{{ asset('assets/img/violence.jpg') }}') center/cover no-repeat; }
        .gbv-message-badge { width:66px; height:66px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--ngbvd-yellow); color:#111827; font-weight:900; font-size:1.15rem; box-shadow:0 14px 30px rgba(0,0,0,.24); flex:0 0 auto; }
        .gbv-message-visual strong { display:block; font-size:1.45rem; line-height:1.15; }
        .gbv-message-visual span { display:block; color:#f8fafc; margin-top:6px; line-height:1.45; font-weight:700; }
        .gbv-message-list { margin:14px 0 0; padding-left:18px; }
        .two-col { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
        .public-page-hero { padding:54px 0; background:linear-gradient(135deg,#fff8e6,#fff); border-bottom:1px solid var(--ngbvd-border); }
        .chart-shell, #container, #region-data, #map { background:#fff; border:1px solid var(--ngbvd-border); border-radius:20px; padding:18px; box-shadow:0 16px 42px rgba(15,23,42,.07); min-height:420px; }
        table { border-collapse:collapse; width:100%; background:#fff; } th, td { padding:12px; border-bottom:1px solid var(--ngbvd-border); text-align:left; } th { background:#f8fafc; font-weight:900; }
        .footer { background:#111827; color:#e5e7eb; padding:42px 0; }
        .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; }
        .footer h3, .footer h4 { color:#fff; margin-top:0; }
        .footer p, .footer li { color:#cbd5e1; line-height:1.8; }
        .footer ul { list-style:none; padding:0; margin:0; }
        .rounded-badge .badge { width:42px; height:42px; border-radius:999px; background:var(--ngbvd-yellow); display:flex; align-items:center; justify-content:center; border:3px solid #fff; box-shadow:0 10px 24px rgba(15,23,42,.25); }
        .rounded-badge.low .badge { background:#bbf7d0; } .rounded-badge.medium .badge { background:#fde68a; } .rounded-badge.high .badge { background:#fecaca; }
        @media(max-width:900px){ .hero-grid,.two-col,.footer-grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.col-lg-6,.col-lg-4,.col-lg-3{flex:0 0 100%;max-width:100%;}.nav-links{display:none; position:absolute; top:76px; left:0; right:0; background:#fff; padding:18px; border-bottom:1px solid var(--ngbvd-border); flex-direction:column; align-items:flex-start}.nav-links.open{display:flex}.public-menu-button{display:inline-flex} }
        @media(max-width:560px){ .cards{grid-template-columns:1fr}.brand img{width:44px;height:44px}.site-nav .inner{min-height:66px} }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="{{ asset('/assets/css/ngbvd-ui.css') }}">
    @stack('styles')
</head>