:root {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --header-bg: #1e293b;
    --text-main: #f8fafc;
    --text-sub: #94a3b8;
    --accent: #38bdf8;
    --accent-hover: #0284c7;
    --border: #334155;
    --sidebar-width: 270px;
    --menu-group-bg: #1e293b;
    --menu-group-border: #3b4d68;
    --menu-cat-bg: #31435e;
    --menu-cat-border: #46597a;
    --menu-sub-bg: #101b2e;
    --menu-sub-border: #24344d;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
}

/* Hoofd-layout structuur */
.layout-container {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* SIDEBAR & DRIE-LAAGS MENU */
.sidebar {
    width: var(--sidebar-width);
    background-color: #0b1120;
    border-right: 1px solid var(--border);
    padding: 2rem 0.8rem;
    box-sizing: border-box;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  
   /* ACHTERGROND AFBEELDING INDEX */ 
    background-image: url('img/index_bg.jpeg'); 
    
    /*
    background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15)), 
    url('img/index_bg.jpeg'); */ 

  /* Zorgt ervoor dat het patroon alleen verticaal herhaalt */
  	background-repeat: repeat-y;
  /* Positioneert de afbeelding strak in de linkerbovenhoek */
  	background-position: top left;
  /* DIT IS DE BELANGRIJKSTE STAP: */
  /* Vertel de browser dat de afbeelding PRECIES 270px breed moet zijn. */
  /* De hoogte wordt automatisch aangepast om de verhouding te bewaren. */
  	background-size: 270px auto;
}

.sidebar h2 {
    font-size: 2rem;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0;
    margin-bottom: 1.2rem;
    padding-left: 0.6rem;
    text-align: center;
}

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

/* NIVEAU 1: Hoofdgroep (bijv. Beeld, Programmeren) — grote box met ronde hoeken */
.group-item {
    margin: 0 0.15rem 0.75rem;
/*  background-color: var(--menu-group-bg); */
	background-color: black;
    border: 1px solid var(--menu-group-border);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 2px 7px rgba(255, 255, 0, 0.5);
}

.group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.8rem;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.group-title:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--accent);
}

.group-item.open > .group-title {
    color: var(--accent);
}

/* NIVEAU 2: Categorie (bijv. Fotografie, Python) — box binnen de groepsbox */
.submenu {
    display: none;
    padding: 0.35rem 0.2rem 0.2rem;
    margin-top: 0;
}

.group-item.open > .submenu {
    display: block;
}

.cat-item {
    margin: 0.3rem 0.1rem;
    background-color: var(--menu-cat-bg);
    border: 1px solid var(--menu-cat-border);
    border-radius: 9px;
    padding: 0.3rem;
}

.cat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.7rem;
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.cat-title:hover {
    color: var(--accent);
    background-color: rgba(255, 255, 255, 0.06);
}

.cat-item.open > .cat-title {
    color: var(--accent);
}

/* NIVEAU 3: Subcategorie Links (bijv. Landschap, AI Agents) — box binnen de categoriëbox */
.sub-submenu {
    display: none;
    margin: 0.3rem 0.15rem 0.2rem;
    padding: 0.3rem 0.25rem 0.25rem;
    background-color: var(--menu-sub-bg);
    border: 1px solid var(--menu-sub-border);
    border-radius: 7px;
}

.cat-item.open > .sub-submenu {
    display: block;
}

.sub-submenu li {
    margin-bottom: 0.2rem;
}

.sub-submenu a {
    color: var(--text-sub);
    text-decoration: none;
    display: block;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sub-submenu a:hover {
    color: var(--text-main);
    background-color: var(--card-bg);
}

.sub-submenu a.active {
    background-color: var(--accent);
    color: #0f172a;
    font-weight: 600;
}

/* Chevron Pijltjes animatie */
.chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.group-item.open > .group-title > .chevron,
.cat-item.open > .cat-title > .chevron {
    transform: rotate(90deg);
}

/* HEADER STYLING */
.main-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border);
    padding: 2rem 2.5rem;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1200px;
}

.main-header h1 {
    margin: 0 0 0.4rem 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
}

.header-subtitle {
    margin: 0;
    color: var(--text-sub);
    font-size: 0.95rem;
}

/* INHOUD AREA */
.main-content {
    flex-grow: 1;
    padding: 2.5rem;
 /*   max-width: 1200px; */
    box-sizing: border-box;
 
    background-image: url('img/main-content_bg.jpg');
    
    background-repeat: no-repeat;
  background-position: center top;
  
  /* 1. Houdt de achtergrond vast op het scherm bij scrollen */
  background-attachment: fixed;
  
  /* 2. Bepaalt de vaste afmeting (breedte hoogte) */
  background-size: 1940px auto;



}

.category-title {
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
    margin-top: 0;
    margin-bottom: 2rem;
    color: var(--accent);
}

/* GRID & KAARTEN */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 10px 20px -10px rgba(56, 189, 248, 0.15);
}

.card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    color: var(--text-main);
   	text-align: center;
}

.card p {
    margin: 0 0 1.2rem 0;
    font-size: 0.9rem;
    color: var(--text-sub);
    line-height: 1.5;
    flex-grow: 1;
}

.card a {
    display: inline-block;
    background-color: var(--accent);
    color: #0f172a;
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.card a:hover {
    background-color: var(--accent-hover);
    color: #ffffff;
}

/* FOOTER STYLING */
.main-footer {
    background-color: #0b1120;
    border-top: 1px solid var(--border);
    padding: 1.2rem 2.5rem;
    text-align: center;
}

.main-footer p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-sub);
}

/* ZOEKVELD IN SIDEBAR */
.search-box {
    padding: 0 0.6rem 0.9rem;
}

.search-box input {
    width: 100%;
    box-sizing: border-box;
/*  background-color: var(--card-bg); */
	background-color: #f8fafc;
/*    border: 1px solid var(--border); */
    border: 2px solid #0f172a;
    border-radius: 6px;
/*    color: var(--text-main);*/
    color: #0f172a;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
}

.search-box input::placeholder {
    color: var(--text-sub);
}

.search-box input:focus {
    border-color: var(--accent);
    outline: none;
}

/* KANAAL-ICOON (80x80, gecentreerd tussen titel en beschrijving) */
.card-icon {
    max-width: 240px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0.75rem auto;
    display: block;
}

/* Pad-breadcrumb in zoekresultaatkaarten */
.card-path {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-bottom: 0.8rem;
    opacity: 0.85;
}

/* TOEGANGELIJKHEID: zichtbare focus voor toetsenbordgebruikers */
a:focus-visible,
.group-title:focus-visible,
.cat-title:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Respecteer "minder beweging" voorkeur */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .card:hover {
        transform: none;
    }
}

/* RESPONSIVE: smalle schermen */
@media (max-width: 768px) {
    .layout-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: static;
        height: auto;
        max-height: 45vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .main-header {
        padding: 1.5rem;
    }

    .main-content {
        padding: 1.5rem;
    }

    .main-footer {
        padding: 1rem 1.5rem;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}