/* =========================================================
   AOO Base styles
   -----------------------------------------
   Basis voor AOO componenten
   ✔ gescopeerd
   ✔ geen GeneratePress overrides
   ✔ geen globale selectors
   ========================================================= */

/* ---------------------------------------------------------
   1. AOO root wrapper
--------------------------------------------------------- */

.aoo {
    color-scheme: light;
    font-family: var(--aoo-font-base);
    color: var(--aoo-fg);
}

/* ---------------------------------------------------------
   2. Typography
--------------------------------------------------------- */

.aoo h1,
.aoo h2,
.aoo h3,
.aoo h4,
.aoo h5,
.aoo h6 {
    color: var(--aoo-fg);
    line-height: 1.25;
    margin: 1.4em 0 0.4em;
    font-weight: 700;
}

.aoo h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.aoo h2 {
    font-size: clamp(1.3rem, 2.8vw, 1.7rem);
}

.aoo h3 {
    font-size: 1.15rem;
}

.aoo p {
    margin: 0 0 1em;
}

.aoo small {
    font-size: 0.85em;
    color: var(--aoo-muted);
}

/* ---------------------------------------------------------
   3. Links
--------------------------------------------------------- */

.aoo a {
    color: var(--aoo-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--aoo-transition-fast);
}

.aoo a:hover {
    color: var(--aoo-brand-strong);
}

/* ---------------------------------------------------------
   4. Lists
--------------------------------------------------------- */

.aoo ul,
.aoo ol {
    margin: 0 0 1.2em 1.2em;
}

.aoo li {
    margin-bottom: 0.4em;
}

/* ---------------------------------------------------------
   5. Media
--------------------------------------------------------- */

.aoo img,
.aoo picture,
.aoo video,
.aoo svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.aoo img {
    border-radius: var(--aoo-radius-sm);
}

/* ---------------------------------------------------------
   6. Tables
--------------------------------------------------------- */

.aoo table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.aoo th,
.aoo td {
    padding: 0.6em 0.75em;
    border-bottom: 1px solid var(--aoo-border);
    text-align: left;
}

.aoo th {
    font-weight: 600;
}

/* ---------------------------------------------------------
   7. Forms (basis)
--------------------------------------------------------- */

.aoo input,
.aoo textarea,
.aoo select,
.aoo button {
    font-family: inherit;
    font-size: 1rem;
}

.aoo input,
.aoo textarea,
.aoo select {
    border-radius: var(--aoo-radius-xs);
    border: 1px solid var(--aoo-border);
    padding: 0.5em 0.6em;
    background-color: var(--aoo-surface);
    color: var(--aoo-fg);
}

.aoo input:focus,
.aoo textarea:focus,
.aoo select:focus {
    outline: none;
    border-color: var(--aoo-brand);
}

/* ---------------------------------------------------------
   8. Utility spacing
--------------------------------------------------------- */

.aoo>*+* {
    margin-top: var(--aoo-space-2);
}

/* ---------------------------------------------------------
   9. Accessibility
--------------------------------------------------------- */

.aoo :focus-visible {
    outline: 2px solid var(--aoo-brand);
    outline-offset: 2px;
}

.aoo [hidden] {
    display: none !important;
}