:root {
    --bg: #FBF9EC;
    --text: #9D7D4D;
    --darkgrey: #333333;
    --lightgrey: #A5A5A5;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    line-height: 1.6;
}

a {
    color: var(--darkgrey);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #000000;
    text-decoration: underline;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.brand a {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

/* Ensure the brand wordmark will render characters like Greek nu on devices
   where the primary webfont might not include the glyph. Prefer system
   fonts for the brand to guarantee broad Unicode coverage. */
.brand a {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px; /* ruimte tussen logo en tekst */
}

.brand .logo {
  max-width: 10vw;     /* nooit groter dan 10% van schermbreedte */
  height: auto;        /* verhouding blijft goed */
  max-height: 60px;    /* extra limiet zodat het niet te hoog wordt */
  display: block;
}

.nav {
    display: flex;
    gap: 16px;
}

.nav a {
    padding: 8px 10px;
    border-radius: 8px;
}

.nav a:focus {
    outline: 2px dashed currentColor;
    outline-offset: 2px;
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.menu-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    margin: 5px 0;
    transition: transform 0.2s ease;
}

h1 {
    font-size: 2rem;
    margin: 0.2rem 0 1rem;
}

h2 {
    font-size: 1.25rem;
    margin: 1.2rem 0 0.5rem;
}

h3 {
    font-size: 1.05rem;
    margin: 1rem 0 0.25rem;
}

small {
    font-weight: 400;
    font-size: 0.8em;
    opacity: 0.8;
}

.text-darkgrey {
    color: var(--darkgrey);
}

.text-lightgrey {
    color: var(--lightgrey);
}

.justify p {
    text-align: justify;
}

.footnote {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.prices {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    overflow: hidden;
}

.prices li {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
}

.prices li:nth-child(odd) {
    background: rgba(0,0,0,0.02);
}

/* Responsive menu */
@media (max-width: 820px) {
    .menu-toggle {
        display: block;
    }
    .nav {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--bg);
        flex-direction: column;
        gap: 0;
        border-top: 1px solid rgba(0,0,0,0.05);
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        pointer-events: none;
        transition: 0.2s ease;
        will-change: transform, opacity;
    }
    .nav a {
        padding: 14px 24px;
        border-radius: 0;
    }
    .nav.open {
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }
}

.site-footer {
    padding: 32px 24px;
    border-top: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.9;
}

.nav a {
    transition: color 0.2s ease;
}

/* Homepage image and doc content */
.home-figure {
    margin: 0 0 24px 0;
    display: flex;
    justify-content: center;
    /* keep content centered and responsive */
}

.home-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.homepage-doc p {
    margin: 0.35rem 0;
}

.homepage-doc {
    text-align: center;
    /* optional: keep text from becoming too wide on large screens */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.homepage-doc h1 {
    margin: 0.4rem 0 0.6rem;
}

.homepage-doc h2 {
    margin: 0.3rem 0 0.5rem;
}

.homepage-doc h3 {
    margin: 0.25rem 0 0.4rem;
}

.table-wrap {
    width: 100%;
    overflow: auto;
    margin: 16px 0;
}

.doc-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 320px;
}

.doc-table td {
    border: none;
    padding: 8px;
    text-align: center;
    vertical-align: top;
}

.doc-table tr:nth-child(odd) {
    background: transparent;
}