:root{
    --max-width: 1080px;
    --radius: 12px;
    --accent: #ff9a5a;
    --muted: rgba(255,255,255,0.75);
    --glass: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* base */
html,body,#app{height:100%;margin:0}
body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:#fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(180deg,#071026 0%, #071728 60%);
}
body.no-scroll { overflow: hidden; }

body{
    /* keep existing font/color settings */
    background: linear-gradient(180deg, #071026 0%, #071728 60%) fixed; /* lock to viewport */
    background-color: #071728; /* solid fallback */
}

*{box-sizing:border-box}

.container{max-width:var(--max-width);margin:0 auto;}

/* header */
.header{
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-bottom:1px solid rgba(255,255,255,0.03);
    position:sticky; top:0; z-index:40;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0;}
.brand{
    display:flex;align-items:center;gap:0.6rem;font-weight:700;
    font-size:clamp(0.95rem,2.6vw,1.05rem);
}
.logo{
    width:44px;height:44px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    overflow:hidden;background: transparent;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.logo img{width:100%;height:100%;object-fit:contain;display:block}

.nav{display:flex;gap:0.5rem;align-items:center}
.nav a{
    color:var(--muted);text-decoration:none;padding:0.5rem 0.75rem;border-radius:8px;
}
.nav a.active{color:white;background:var(--glass);box-shadow:inset 0 -1px 0 rgba(255,255,255,0.02)}

/* modern hamburger */
.hamburger{
    display:none;
    width:44px;height:44px;border:none;background:transparent;color:inherit;
    border-radius:10px;cursor:pointer;position:relative;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);background:var(--glass);
}
.hamburger span{
    position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:2px;
    transition:transform .18s ease,opacity .18s ease, top .18s ease,bottom .18s ease;
}
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ bottom:14px; }
.hamburger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ bottom:auto; top:21px; transform:rotate(-45deg); }

/* hero and cards */
.hero{
    padding:2.25rem 0;
    display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start;
}
.card{
    background:var(--card);
    border-radius:var(--radius); padding:1rem; border:1px solid rgba(255,255,255,0.03);
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}

.radius{
    border-radius:var(--radius);  border:1px solid rgba(255,255,255,0.03);

}

/* home content */
.hero-left h1{font-size:2rem;margin:0 0 0.5rem}
.lead{color:var(--muted);margin-bottom:1rem}
.stats{display:flex;gap:0.6rem;flex-wrap:wrap}
.stat{background:var(--card);padding:0.6rem;border-radius:10px;font-size:0.9rem;color:var(--muted);min-width:120px;text-align:center}

/* page content */
.content{display:grid;grid-template-columns:1fr 320px;gap:1rem;margin-top:1rem}
.main{min-height:220px}
.aside .card{position:sticky;}

/* cards grid for events/sponsors */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.event-card{padding:0.9rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}

/* MOBILE MENU */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(3,6,12,0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: 120;
    padding: 1rem;
    opacity: 0; animation: mm-fade .16s ease forwards;
}
.mobile-menu .card {
    width: 100%;
    max-width: 420px;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.04);
    transform: translateY(8px) scale(0.98);
    opacity: 0; animation: mm-in .18s ease forwards;
}
.mobile-menu nav {
    display: flex; flex-direction: column; gap: 0.65rem; align-items: stretch;
}
.mobile-menu nav a {
    display:block;padding:0.9rem 1rem;border-radius:10px;text-decoration:none;
    font-weight:700;text-align:center;color:#071722;
    background: linear-gradient(90deg, var(--accent), #ff9a5a);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    font-size:1rem;
}
.mobile-menu nav .mobile-close {
    background: transparent; color: var(--muted); box-shadow: none;
    font-weight: 600; text-decoration: underline;
}
.mobile-menu nav a:hover,
.mobile-menu nav a:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    outline: none;
}
.mobile-menu nav a[aria-current="true"] {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.03);
}


.fb-embed { width:100%; max-width:100%; background:transparent; border-radius:10px; overflow:hidden; }
.fb-embed iframe { display:block; width:100%; border:0; min-height:300px; }

/* optioneel: voeg een subtiele card-look toe */
.card .fb-embed { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: var(--radius); }

.fb-embed { width: 100%; max-width: 100%; overflow: hidden; }
.fb-embed iframe { display:block; width:100%; max-width:100%; box-sizing:border-box; }
.card .fb-embed { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: var(--radius); }

@keyframes mm-fade { to { opacity:1; } }
@keyframes mm-in { to { transform: translateY(0) scale(1); opacity:1; } }

/* footer */
.footer{margin-top:2rem;padding:1.25rem 0;color:var(--muted);text-align:center;font-size:0.9rem}

/* responsive */
@media (max-width:900px){
    .hero{grid-template-columns:1fr;}
    .content{grid-template-columns:1fr;}
    .nav{display:none}
    .hamburger{display:inline-block}
    .header-inner{padding:0.5rem 0; margin: 0px 10px 0px 10px}
    .logo{width:36px;height:36px}
    .brand{gap:0.5rem}
    .brand .tagline{display:none}
}


/* global anchors inherit color */
a { color: inherit; }