/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Roboto+Condensed:wght@300;400;700&display=swap');

:root{
    --brand:#5a2ea6;
    --brand-ink:#111827;
    --accent:#00d1ff;
    --bg:#0b0b12;
    --paper:#10121a;
    --muted:#8a90a2;
    --radius:12px;
    --gap:clamp(12px,2vw,24px);
    --transition:.3s ease;
}

*{box-sizing:border-box}
html{ color-scheme:dark }

body{
    margin:0;
    font-family:'Roboto Condensed',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:#e8ecf3;
    background:linear-gradient(180deg,#07070c,#0e0f1a);
    line-height:1.6
}

.container{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr auto;
    min-block-size:100dvb
}

.site-header{
    position:sticky;
    inset-block-start:0;
    z-index:1000;
    background:rgba(13,14,25,.9);
    backdrop-filter:blur(6px);
    border-block-end:1px solid rgba(255,255,255,.06)
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap);
    padding:12px clamp(12px,4vw,48px)
}
    
.logo{
    position:relative;
    display:inline-grid;
    place-items:center;
    inline-size:clamp(160px,22vw,240px)
}

.logo img{
    display:block;
    inline-size:100%;
    border-radius:8px
}

.logo::after{
    content:"FM Inside — Football Manager 24";
    position:absolute;
    inset-block-end:6%;
    inset-inline:8%;
    background:linear-gradient(90deg,rgba(90,46,166,.92),rgba(0,209,255,.92));
    padding:4px 8px;
    border-radius:6px;
    color:#0a0b10;
    font:700 12px/1 'Montserrat',sans-serif;
    letter-spacing:.3px
}

.nav{ --link-pad:.6rem .9rem }

.nav ul{ list-style:none;margin:0;padding:0 }

.nav a{
    display:block;
    padding:var(--link-pad);
    color:#dfe6ff;
    text-decoration:none;
    font-weight:700;
    font-family:'Montserrat',sans-serif;
    border-radius:8px
}

.nav a:hover,.nav a:focus-visible{
    background:rgba(0,209,255,.12);
    outline:none
}

.nav a.active,[aria-current="page"]{
    background:rgba(90,46,166,.22)
}

/* === Hamburger === */
.hamburger{
    inline-size:42px;
    block-size:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:#141622;
    cursor:pointer;
    transition:background var(--transition);
}
.hamburger span{
    display:block;
    position:relative;
    inline-size:20px;
    block-size:2px;
    background:#fff;
    transition:all var(--transition);
}
.hamburger span::before,
.hamburger span::after{
    content:"";
    position:absolute;
    inline-size:100%;
    block-size:100%;
    background:#fff;
    transition:all var(--transition);
}
.hamburger span::before{ top:-6px }
.hamburger span::after{ bottom:-6px }

/* Animatie naar kruisje */
.hamburger.active span{ background:transparent }
.hamburger.active span::before{
    top:0; transform:rotate(45deg)
}
.hamburger.active span::after{
    bottom:0; transform:rotate(-45deg)
}

/* === Navigatie paneel === */
.nav-panel{
    max-height:0;
    overflow:hidden;
    padding-inline:clamp(12px,4vw,48px);
    transition:max-height var(--transition);
}
.nav-panel.open{
    max-height:500px; /* genoeg ruimte voor menu */
}

/* === Submenu’s === */
.nav>ul>li{ margin-block:6px }

.nav li ul{
    max-height:0;
    overflow:hidden;
    margin-block-start:6px;
    padding-inline-start:12px;
    border-inline-start:2px solid rgba(255,255,255,.06);
    transition:max-height var(--transition);
}

/* Hover/focus desktop */
.nav li:focus-within>ul,
.nav li:hover>ul{
    display:block;
    max-height:600px;
}

/* Klikbaar submenu (mobiel) */
.nav li ul.open{ max-height:600px }

.nav li ul a{ font-weight:600;opacity:.9 }

/* === Hero en secties === */
.hero{ inline-size:100%;display:block }
.section{ padding:clamp(16px,4vw,48px) }
.section h1,.section h2,.section h3{
    font-family:'Montserrat',sans-serif;
    margin:0 0 .6rem 0
}
.section .lead{ color:var(--muted); max-inline-size:70ch }

.grid{ display:grid; gap:var(--gap) }
.grid-2{ grid-template-columns:1fr }
.grid-3{ grid-template-columns:1fr }

.tile{
    background:var(--paper);
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--radius);
    padding:clamp(12px,2.5vw,24px);
    display:grid;gap:12px
}
.tile img{ inline-size:100%; border-radius:10px }
.tile .title{ font-weight:700; font-family:'Montserrat',sans-serif }

.table-wrap{ overflow:auto }
table{
    border-collapse:collapse;
    inline-size:100%;
    background:var(--paper);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius)
}
thead th{
    text-align:left;
    background:rgba(90,46,166,.18);
    font-family:'Montserrat',sans-serif
}
th,td{
    padding:.6rem .8rem;
    border-block-end:1px solid rgba(255,255,255,.06)
}
tbody tr:hover{ background:rgba(255,255,255,.03) }

.ratio{
    position:relative;
    inline-size:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:10px
}
.ratio iframe,.ratio img{
    position:absolute;
    inset:0;
    inline-size:100%;
    block-size:100%
}

.site-footer{
    padding:24px clamp(12px,4vw,48px);
    background:#0a0b12;
    border-block-start:1px solid rgba(255,255,255,.06);
    color:var(--muted);
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    font-size:.95rem
}

.map-embed{
    inline-size:100%;
    block-size:clamp(240px,40vh,420px);
    border:0;display:block
}

/* === Media queries === */
@media (min-width:768px) {
    .topbar{ gap:24px }
    .hamburger{ display:none }
    .nav-panel{ max-height:none; overflow:visible }
    .nav>ul{
        display:flex;gap:6px;
        align-items:center;
        flex-wrap:wrap}
    .nav li{ position:relative }
    .nav li ul{
        position:absolute;
        inset-block-start:calc(100% + 8px);
        background:#161828;
        padding:6px;
        border:1px solid rgba(255,255,255,.08);
        border-radius:8px;
        inline-size:max-content;
        max-height:none;
        display:none
    }
    .nav li:focus-within>ul,
    .nav li:hover>ul{
        display:block
    }
    .grid-2{ grid-template-columns:repeat(2,1fr) }
    .grid-3{ grid-template-columns:repeat(3,1fr) }
}
@media (min-width:1024px) {
    .topbar{ padding-block:16px }
    .nav a{ padding:.7rem 1rem }
    .five-across{
        display:grid;
        gap:var(--gap);
        grid-template-columns:repeat(5,1fr)}
    .three-across{
        display:grid;
        gap:var(--gap);
        grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1440px) {
    .container{ max-inline-size:1400px;margin-inline:auto }
}

.hero,.tile img{ inline-size:min(100%,1440px) }

.banner{
    inline-size:100%;
    block-size:clamp(200px,30vh,420px)
}