/* Lettertype, lokaal meegeleverd (geen verzoeken naar externe servers). SIL Open Font License. */
@font-face {
    font-family: 'Atkinson Hyperlegible Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/atkinson-hyperlegible-mono-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/atkinson-hyperlegible-mono-600-latin.woff2') format('woff2');
}

/*
 * Design tokens: overgenomen van apitecture.nl (zie www.apitecture.nl/design-system/).
 * OpenCommunities is een dienst van Apitecture en gebruikt dezelfde huisstijl:
 * licht en rustig, met nacht en oranje uit het Apitecture-logo.
 * Componenten gebruiken alleen deze tokens, nooit losse waarden.
 */
:root {
    /* Merk */
    --night: #141416;
    --accent: #ff5900;
    /* Oranje voor tekst en links: #ff5900 haalt op wit geen 4.5:1, dit wel (5.6:1) */
    --accent-text: #b83f00;
    --accent-subtle: color-mix(in srgb, var(--accent) 7%, var(--card));

    /* Kern: ondergrond, kaarten, tekst */
    --paper: #f7f6f3;
    --paper-deep: #eceae4;
    --card: #ffffff;
    --ink: var(--night);
    --text: #2e2e33;
    --muted: #5f5f66;
    --line: rgba(20, 20, 22, 0.12);
    --line-strong: rgba(20, 20, 22, 0.24);

    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, monospace;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Kleine afrondingen, zoals een schema */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-ring: 0 0 0 1px var(--line);
    --card-shadow: 0 0 0 1px var(--line), 0 4px 14px rgba(20, 20, 22, 0.05);

    --duration-fast: 0.2s;
    --duration: 0.3s;

    --measure: 42rem;
    --page: 1000px;
}

/* ===== Basis ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
    background: var(--paper);
    overflow-x: hidden;
}

main {
    padding: 0 var(--space-4);
}

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
}

h1 { font-size: 48px; }
h2 { font-size: 30px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }

p {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent-text) 35%, transparent);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--duration-fast);
}

a:hover {
    text-decoration-color: currentColor;
}

/* Een telefoonnummer breekt niet af */
a[href^="tel:"] {
    white-space: nowrap;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    background: var(--paper-deep);
    color: var(--ink);
}

/* ===== Hulpklassen ===== */
.readable {
    max-width: var(--measure);
    margin: var(--space-6) auto;
}

.m-0 { margin: 0; }

/* ===== Atomen ===== */

/* Zeshoek: de markering van Apitecture, de oranje cel uit het logo */
.hex {
    display: inline-block;
    flex: none;
    width: 0.8em;
    height: 0.92em;
    background: var(--accent);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    vertical-align: -0.08em;
}

/* Lege cel: structuur, nog niet in gebruik */
.hex-outline {
    background: var(--line-strong);
    position: relative;
}

.hex-outline::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--paper);
    clip-path: inherit;
}

/* Statuslampje (in het monitortje in de kop): er draait iets. Knippert onregelmatig;
   het enige wat uit zichzelf beweegt */
.bleep {
    color: var(--accent);
    font-size: 0.5em;
    vertical-align: bottom;
    margin-left: 2px;
    animation: bleep 2.3s step-end infinite;
}

@keyframes bleep {
    0%   { opacity: 1; }
    4%   { opacity: 0; }
    9%   { opacity: 1; }
    17%  { opacity: 0; }
    20%  { opacity: 1; }
    31%  { opacity: 0; }
    36%  { opacity: 1; }
    43%  { opacity: 0; }
    52%  { opacity: 1; }
    56%  { opacity: 0; }
    63%  { opacity: 1; }
    74%  { opacity: 0; }
    78%  { opacity: 1; }
    86%  { opacity: 0; }
    93%  { opacity: 1; }
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 var(--space-2);
}

.link-more {
    font-weight: 700;
}

.link-more::after {
    content: ' →';
}

/* ===== Header ===== */
/* Woordmerk: geen beeldlogo, maar de oranje zeshoek van Apitecture met de naam erachter */
.wordmark {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Even breed als het Apitecture-logo in de kop (260px) */
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}

.wordmark .hex {
    font-size: 0.9em;
}

.site-header {
    max-width: var(--page);
    margin: 0 auto;
    padding: var(--space-7) 0 var(--space-6);
}

.site-brand {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.site-header h1 {
    margin: 0;
    line-height: 0;
}

.site-header img {
    width: 260px;
    max-width: 80%;
}

.text-beep {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: var(--space-3) 0 0;
}

/* ===== Moleculen ===== */

/* Persoon: wie achter Apitecture zit */
.person {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.person img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line-strong);
}

.person strong {
    display: block;
    color: var(--ink);
}

.person span {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

/* Bedrijfsgegevens: wie factureert, en hoe je dat controleert */
.company {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
    margin: 0;
}

.company dt {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.company dd {
    margin: 0;
    color: var(--ink);
}

/* ===== Organismen ===== */

/* Secties van de homepage */
.intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
    max-width: var(--page);
    margin: 0 auto var(--space-7);
}

.intro-text > p {
    max-width: var(--measure);
    margin: 0;
    font-size: 20px;
    color: var(--ink);
}

.intro-text > p + p {
    margin-top: var(--space-4);
}

.intro .person {
    margin: var(--space-6) 0 0;
}

.section {
    max-width: var(--page);
    margin: 0 auto var(--space-7);
}

.section-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.section-split > * {
    padding: var(--space-5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.section-split > :first-child {
    border-top: 3px solid var(--accent);
}

/* Beheer van: rij logo's onder de intro, gecentreerd op de pagina, in zwart-wit */
.partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
}

.partners .kicker {
    margin: 0;
}

/* Logo's staan op één baseline: de onderkant van het hoofdwoord. De verschuiving
   per logo staat als margin-top in de HTML, gemeten aan de logo's zelf. */
.partners ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.partners a {
    display: block;
}

/* Elk logo krijgt ongeveer hetzelfde oppervlak: de maten staan per logo in de HTML.
   Het Tiltshift-logo in de footer volgt dezelfde regel: grijs, in kleur bij hover. */
.partners img,
.footer-label img {
    display: block;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--duration-fast), opacity var(--duration-fast);
}

.partners a:hover img,
.partners a:focus-visible img,
.footer-label:hover img,
.footer-label:focus-visible img {
    filter: none;
    opacity: 1;
}

footer {
    max-width: var(--page);
    width: calc(100% - 2 * var(--space-4));
    margin: var(--space-8) auto 0;
    padding: var(--space-5) 0 var(--space-6);
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

footer p {
    margin: 0;
}

footer a {
    color: var(--muted);
}

.footer-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.footer-label:hover {
    text-decoration: underline;
}

/* Nep-monitortje naast de intro: een knipoog naar de API-achtergrond, puur decoratief.
   Gecentreerd als een plaatje, als uitsnede van een groter dashboard: de regels boven
   en onder zijn vaag en vagen weg. Het lampje bij "website" knippert. */
.intro-text {
    flex: 1 1 var(--measure);
    min-width: 0;
}

.intro-visual {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    justify-content: center;
    margin: 0;
}

.monitor {
    width: 300px;
    max-width: 100%;
    padding: var(--space-3) var(--space-7);
    background: var(--paper-deep);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 2.1;
    color: var(--ink);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at center, #000 55%, transparent 100%);
}

/* Drie kolommen (naam, lampje, status) zodat lampjes en statussen recht onder elkaar staan */
.monitor ul {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.monitor li {
    display: contents;
}

.monitor li.is-vague > * {
    filter: blur(1.5px);
    opacity: 0.7;
}

.monitor-dot {
    color: var(--accent);
}

.monitor .bleep {
    font-size: inherit;
    vertical-align: baseline;
    margin: 0;
}

.monitor li.is-low .monitor-dot {
    color: var(--line-strong);
}

/* Kop van een sectie: kicker, titel en een korte inleiding */
.section-head {
    max-width: var(--measure);
    margin-bottom: var(--space-5);
}

.section-head p {
    color: var(--muted);
}

/* Wat ik regel: lijst in de stijl van het monitortje op apitecture.nl. Eén regel per dienst:
   lampje en naam in mono, omschrijving, logo van de aanbieder. Het lampje knippert niet */
.services {
    margin: 0;
    padding: var(--space-2) var(--space-5);
    list-style: none;
    background: var(--paper-deep);
    border-radius: var(--radius-lg);
}

.service {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 130px;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-3) 0;
}

.service + .service {
    border-top: 1px solid var(--line);
}

.service h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0;
}

.service-dot {
    color: var(--accent);
}

.service p {
    margin: 0;
    font-size: 15px;
}

/* Waar het draait: logo van de aanbieder onderaan de kaart, grijs zoals de logo-rij
   op apitecture.nl, in kleur bij hover over de kaart */
.service-via {
    display: block;
    justify-self: end;
}

/* Afsluitende regel onder de kaarten: wat er niet tussen staat */
.services-more {
    margin: var(--space-5) 0 0;
    max-width: var(--measure);
    color: var(--muted);
}

.service-via img {
    display: block;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--duration-fast), opacity var(--duration-fast);
}

.service:hover .service-via img,
.service-via:focus-visible img {
    filter: none;
    opacity: 1;
}

/* Belofte: één factuur, één contact, open. Drieluik van kaarten, zoals .section-split */
.promise {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.promise > * {
    padding: var(--space-5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.promise > :first-child {
    border-top: 3px solid var(--accent);
}

.promise h3 {
    margin-bottom: var(--space-2);
}

.promise p {
    margin: 0;
    font-size: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    h1 { font-size: 36px; }
    h2 { font-size: 24px; }

    .section-split,
    .promise {
        grid-template-columns: minmax(0, 1fr);
    }

    .wordmark {
        font-size: 24px;
    }

    .service {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .service-via {
        justify-self: start;
        margin-top: var(--space-1);
    }

    .intro-text > p {
        font-size: 18px;
    }

    .company {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .company dd {
        margin-bottom: var(--space-2);
    }

    .site-header {
        padding-top: var(--space-6);
    }

    .intro {
        flex-direction: column;
        gap: var(--space-5);
    }

    .intro-text {
        flex: none;
    }

    .intro-visual {
        align-self: stretch;
    }
}

/* Rustig: bij prefers-reduced-motion staat alles stil */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}