/* ==============================================================
   90‑/00‑s Sketchy‑Minimal Theme – Mobile‑Friendly Edition
   --------------------------------------------------------------
   • Crème‑wit achtergrond, zwarte tekst
   • Monospace (optioneel sketchy) lettertype
   • Hand‑getekende (dashed / dotted) randen
   • Fully responsive, fast loading
   ============================================================== */

/* -------------------------------------------------
   1. CSS‑variabelen (unchanged)
   ------------------------------------------------- */
:root {
    /* Colours */
    --bg-main:     #f1ece1;   /* crème‑wit background */
    --bg-accent:   #e9e0d2;   /* light pastel for cards/sections */
    --txt-primary: #111111;   /* near‑black – high contrast */
    --txt-muted:   #555555;   /* for secondary text */
    --link:        #0066cc;   /* classic web‑blue */
    --link-hover:  #004499;

    /* Border */
    --border-w:    2px;       /* “hand‑drawn” thickness */

    /* Font stacks (system fonts → no download) */
    --font-sans:   "Segoe UI", Tahoma, Helvetica, Arial, sans-serif;
    --font-mono:   "Courier New", Courier, monospace;
    --font-sketch: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
}

/* -------------------------------------------------
   2. Global reset & base styles
   ------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Make sure the CSS file is always fetched as CSS */
@font-face { font-display: swap; }   /* tiny safeguard – no external fonts used */

/* Base page */
html,
body {
    background-color: var(--bg-main);
    color: var(--txt-primary);
    font-family: var(--font-mono);
    line-height: 1.5;
    scroll-behavior: smooth;
}

/* Uncomment to use the “sketchy” font family */
/* body { font-family: var(--font-sketch); } */

/* Links */
a {
    color: var(--link);
    text-decoration: underline;
}
a:hover,
a:focus {
    color: var(--link-hover);
}

/* -------------------------------------------------
   3. Layout – wrapper, sidebar & main content
   ------------------------------------------------- */
.wrapper {
    display: flex;
    min-height: 100vh;
}

/* ----- Sidebar ------------------------------------------------- */
.sidebar {
    flex: 0 0 200px;                 /* fixed width on large screens */
    background: #f0f0f0;
    padding: 20px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 14px;
}

/* Title inside the sidebar */
.sidebar h2 {
    margin-bottom: 10px;
    color: #333;
    font-weight: normal;
}

/* List styling */
.sidebar ul {
    list-style: none;
}

/* Links inside the sidebar */
.sidebar a {
    color: #0000ee;
    text-decoration: underline;
    display: block;
    padding: 4px 0;
}
.sidebar a:hover,
.sidebar a:focus {
    color: #551a8b;                 /* visited‑purple hint */
    background: #e0e0ff;
}

/* ----- Main content -------------------------------------------- */
.content {
    flex: 1;
    padding: 30px;
    font-family: Georgia, serif;
    line-height: 1.6;
}

/* -------------------------------------------------
   4. Top navigation
   ------------------------------------------------- */
nav {
    display: flex;
    justify-content: center;
    background: var(--bg-accent);
    border-bottom: var(--border-w) dashed var(--txt-muted);
    padding: 0.5rem 0;
    flex-wrap: wrap;                /* allow wrapping on very narrow screens */
}
nav a {
    color: var(--link);
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: var(--border-w) dotted transparent;
    transition: all 0.15s ease-in-out;
}
nav a:hover,
nav a:focus {
    color: var(--link-hover);
    border-color: var(--link-hover);
    background-color: rgba(0,0,0,0.03);
}

/* -------------------------------------------------
   5. Sections / Cards
   ------------------------------------------------- */
section {
    max-width: 960px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--bg-accent);
    border: var(--border-w) solid var(--txt-muted);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}

/* Images inside sections – “polaroid” style */
section img {
    display: block;
    margin: 0 auto;
    width: 100%;                     /* full width on mobile, constrained by container */
    max-width: 500px;                /* keep them reasonable on large screens */
    border: var(--border-w) solid var(--txt-muted);
    padding: 4px;
    background: #fff;
}

/* -------------------------------------------------
   6. Forms
   ------------------------------------------------- */
form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto;
}
label {
    font-weight: bold;
    color: var(--txt-primary);
}
input[type=text],
input[type=email],
textarea {
    width: 100%;
    padding: 0.5rem;
    border: var(--border-w) dashed var(--txt-muted);
    background: #fff;
    font-family: var(--font-mono);
    resize: vertical;
}
input:focus,
textarea:focus {
    outline: none;
    border: var(--border-w) solid var(--link);
    background: #fafafa;
}
button {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    border: var(--border-w) solid var(--txt-muted);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background 0.2s;
}
button:hover {
    background: linear-gradient(to bottom, #d0d0d0, #b0b0b0);
}

/* -------------------------------------------------
   7. Footer
   ------------------------------------------------- */
footer {
    background: var(--bg-accent);
    padding: 1rem 0;
    border-top: var(--border-w) dashed var(--txt-muted);
    text-align: center;
    font-size: 0.85rem;
}
footer .bottom-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
footer .bottom-nav a {
    color: var(--link);
    text-decoration: underline;
}
footer .bottom-nav a:hover,
footer .bottom-nav a:focus {
    color: var(--link-hover);
}
footer .legal {
    margin-top: 0.5rem;
}
footer .legal a {
    color: var(--txt-muted);
    text-decoration: none;
}
footer .legal a:hover,
footer .legal a:focus {
    text-decoration: underline;
}

/* -------------------------------------------------
   8. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------- */
@media (max-width: 900px) {
    /* Reduce sidebar width, eventually stack */
    .sidebar {
        flex: 0 0 150px;
    }
}
@media (max-width: 750px) {
    .wrapper {
        flex-direction: column;      /* sidebar moves on top */
    }
    .sidebar {
        width: 100%;
        flex: none;
        order: -1;                   /* appears before main content */
    }
    .content {
        padding: 20px;
    }
}
@media (max-width: 600px) {
    nav {
        flex-direction: column;
        align-items: stretch;
    }
    nav a {
        margin: 0.2rem 0;
    }
    section {
        margin: 1rem;
        padding: 1rem;
    }
    .sidebar,
    .content {
        padding: 15px;
    }
}

/* -------------------------------------------------
   9. Touch‑friendly tweaks
   ------------------------------------------------- */
a,
button,
nav a,
.sidebar a,
footer .bottom-nav a {
    /* Minimum 44 × 44 dp tap target */
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}