/* Gedeelde visuele stijl van werkplaats.matteman.nl. */
:root {
    --site-header-height: 72px;
    --site-background: #f5f7f9;
    --surface-color: #fff;
    --border-color: #dfe5e9;
    --text-color: #24313a;
    --muted-color: #66737c;
    --accent-color: #cc5b35;
    --accent-hover: #a94728;
    --focus-color: rgba(204, 91, 53, .35);
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text-color);
    background: var(--site-background);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

/* Header en hoofdnavigatie */
body > header > nav:first-child {
    position: sticky;
    z-index: 1030;
    top: 0;
    min-height: var(--site-header-height);
    padding: 0;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 18px rgba(36, 49, 58, .06) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body > header > nav:first-child > div > div:first-child {
    min-height: var(--site-header-height);
}

body > header > nav:first-child a {
    color: var(--muted-color) !important;
    font-weight: 500;
    text-decoration: none;
    border-radius: .4rem;
    transition: color 160ms ease, background-color 160ms ease;
}

body > header > nav:first-child a[href="/"],
body > header > nav:first-child a.text-xl {
    color: var(--text-color) !important;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

body > header > nav:first-child a:hover,
body > header > nav:first-child a:focus,
body > header > nav:first-child a.is-active {
    color: var(--accent-color) !important;
    background: rgba(204, 91, 53, .06);
}

body > header > nav:first-child a.is-active {
    font-weight: 650;
}

body > header > nav:first-child button {
    padding: .45rem;
    color: var(--muted-color) !important;
    border: 1px solid var(--border-color);
    border-radius: .4rem;
}

body > header > nav[aria-label="Breadcrumb"] {
    padding: .55rem max(1rem, calc((100vw - 1140px) / 2)) !important;
    color: var(--muted-color) !important;
    background: #eef1f3 !important;
    border-bottom: 1px solid var(--border-color);
}

body > header > nav[aria-label="Breadcrumb"] a {
    color: var(--accent-color) !important;
}

/* Inhoud */
body > main,
body > .container > main {
    width: min(100% - 2rem, 960px);
    max-width: 960px !important;
    min-height: calc(100vh - 190px);
    margin-inline: auto;
    padding: 2rem 0 3rem !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    line-height: 1.2;
    letter-spacing: -.02em;
}

p, li {
    text-wrap: pretty;
}

a {
    color: var(--accent-color);
}

a:hover {
    color: var(--accent-hover);
}

.card,
.chart-card,
.video-card,
.sensor-data:not(.hero-parallax-wrapper .sensor-data),
.bg-white.rounded,
article {
    border: 1px solid var(--border-color) !important;
    border-radius: .75rem !important;
    box-shadow: 0 8px 24px rgba(36, 49, 58, .07) !important;
}

.btn-primary,
.button-primary,
button[type="submit"] {
    color: #fff !important;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.btn-primary:hover,
.button-primary:hover,
button[type="submit"]:hover {
    background-color: #b94e2d !important;
    border-color: #b94e2d !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 .25rem var(--focus-color);
}

pre {
    overflow: auto;
    border: 1px solid #35414a;
    border-radius: .6rem;
}

/* Footer */
body > footer {
    margin: 0;
    padding: 1.15rem 1rem !important;
    color: var(--muted-color) !important;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color) !important;
}

body > footer p {
    margin-bottom: .25rem;
}

body > footer a {
    color: var(--muted-color);
    text-decoration: none;
}

body > footer a:hover,
body > footer a:focus {
    color: var(--accent-color);
    text-decoration: underline;
}

[x-cloak] { display: none !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}

@media (max-width: 639.98px) {
    :root { --site-header-height: 64px; }

    body > header > nav:first-child > div > div:first-child {
        min-height: var(--site-header-height);
    }

    body > header > nav:first-child a[href="/"],
    body > header > nav:first-child a.text-xl {
        font-size: 1rem;
    }

    body > header > nav:first-child [x-show="open"] {
        padding: .75rem 0 1rem;
        border-top: 1px solid var(--border-color);
    }

    body > header > nav:first-child [x-show="open"] a {
        display: block;
        padding: .7rem .75rem;
    }

    body > main,
    body > .container > main {
        width: min(100% - 1.5rem, 960px);
        padding-top: 1.4rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}