/* Reflectiewandelingen - www.reflectiewandelingen.nl */

:root {
    --colour-page: #f8f5ef;
    --colour-surface: #ffffff;
    --colour-surface-shaded: #f1ece1;
    --colour-green-deep: #14312a;
    --colour-green-darker: #0f2621;
    --colour-green: #24564a;
    --colour-green-soft: #3d7565;
    --colour-accent: #a8802f;
    --colour-accent-strong: #7d5f1e;
    --colour-accent-light: #d8b878;
    --colour-text: #22302b;
    --colour-text-muted: #55645d;
    --colour-text-on-dark: #f2f6f3;
    --colour-text-on-dark-muted: #bfd0c8;
    --colour-border: rgba(20, 49, 42, 0.12);
    --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --radius-card: 18px;
    --header-height: 66px;
    --content-width: 1080px;
    --shadow-card: 0 10px 30px rgba(20, 49, 42, 0.07);
}

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

html {
    scroll-behavior: smooth;
    /* Keeps anchor targets clear of the sticky header. */
    scroll-padding-top: calc(var(--header-height) + 14px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--colour-text);
    background: var(--colour-page);
    -webkit-font-smoothing: antialiased;
}

p {
    margin: 0 0 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

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

img,
svg {
    max-width: 100%;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
    padding: 12px 20px;
    background: var(--colour-green-deep);
    color: var(--colour-text-on-dark);
    text-decoration: none;
    border-radius: 0 0 10px 0;
}

.skip-link:focus {
    left: 0;
}

/* Header and navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(248, 245, 239, 0.94);
    border-bottom: 1px solid var(--colour-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* While the visitor is still looking at the dark hero the bar melts into it.
   The at-page-top class is set by main.js, so without scripting the bar simply
   stays solid everywhere. */
.at-page-top .site-header {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: var(--content-width);
    min-height: var(--header-height);
    margin: 0 auto;
    padding: 0 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.16rem;
    letter-spacing: 0.01em;
    color: var(--colour-green-deep);
    text-decoration: none;
}

.at-page-top .brand {
    color: var(--colour-text-on-dark);
}

.brand-mark {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--colour-accent);
    box-shadow: 0 0 0 4px rgba(168, 128, 47, 0.18);
}

.at-page-top .brand-mark {
    background: var(--colour-accent-light);
    box-shadow: 0 0 0 4px rgba(216, 184, 120, 0.22);
}

.navigation-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation-link {
    display: inline-block;
    padding: 8px 12px;
    font-size: 0.94rem;
    color: var(--colour-text);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navigation-link:hover {
    color: var(--colour-accent-strong);
    background: rgba(168, 128, 47, 0.1);
}

.navigation-link.active {
    color: var(--colour-accent-strong);
    box-shadow: inset 0 -2px 0 var(--colour-accent);
}

.at-page-top .navigation-link {
    color: var(--colour-text-on-dark-muted);
}

.at-page-top .navigation-link:hover,
.at-page-top .navigation-link.active {
    color: var(--colour-accent-light);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.navigation-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--colour-green-deep);
    background: transparent;
    border: 1px solid var(--colour-border);
    border-radius: 999px;
    cursor: pointer;
}

.navigation-toggle-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 17px;
}

.navigation-toggle-bar {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.at-page-top .navigation-toggle {
    color: var(--colour-text-on-dark);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Without scripting the toggle cannot work, so the plain list is shown instead. */
.no-javascript .navigation-toggle {
    display: none;
}

/* The breakpoint leaves room for the six menu items next to the brand. */
@media (max-width: 940px) {
    .navigation-toggle {
        display: inline-flex;
    }

    .primary-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        padding: 10px;
        background: var(--colour-surface);
        border: 1px solid var(--colour-border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
    }

    .navigation-open .primary-navigation {
        display: block;
    }

    .navigation-list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .navigation-link {
        display: block;
        padding: 11px 14px;
        font-size: 1rem;
    }

    /* Inside the white menu panel the links are dark again, also at the top. */
    .at-page-top .navigation-link {
        color: var(--colour-text);
    }

    .at-page-top .navigation-link:hover,
    .at-page-top .navigation-link.active {
        color: var(--colour-accent-strong);
        background: rgba(168, 128, 47, 0.1);
    }

    .no-javascript .primary-navigation {
        display: block;
        position: static;
        left: auto;
        right: auto;
        padding: 0 0 10px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .no-javascript .header-inner {
        flex-wrap: wrap;
    }

    .no-javascript .navigation-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Hero */
.hero {
    position: relative;
    /* The sticky header sits on top of the hero, so its height is added here. */
    margin-top: calc(var(--header-height) * -1);
    padding: calc(var(--header-height) + 76px) 20px 132px;
    color: var(--colour-text-on-dark);
    background:
        radial-gradient(120% 90% at 78% 8%, rgba(216, 184, 120, 0.16) 0%, rgba(216, 184, 120, 0) 58%),
        linear-gradient(168deg, var(--colour-green-deep) 0%, var(--colour-green) 62%, #2c6354 100%);
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.hero-eyebrow {
    margin: 0 0 22px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--colour-accent-light);
}

.hero-title {
    margin: 0 0 24px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.4vw, 3.15rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.hero-title-accent {
    color: var(--colour-accent-light);
}

.hero-text {
    max-width: 58ch;
    margin: 0 auto 20px;
    color: var(--colour-text-on-dark-muted);
}

.hero-invitation {
    max-width: 52ch;
    margin: 0 auto 30px;
    font-style: italic;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hero-dunes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 130px;
    display: block;
}

.hero-dune-back {
    fill: rgba(248, 245, 239, 0.32);
}

.hero-dune-front {
    fill: var(--colour-page);
}

@media (max-width: 560px) {
    .hero {
        padding: calc(var(--header-height) + 52px) 20px 104px;
    }

    .hero-actions {
        flex-direction: column;
    }
}

/* Buttons */
.button {
    display: inline-block;
    padding: 13px 26px;
    font-family: inherit;
    font-size: 0.98rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease,
        color 0.25s ease, transform 0.15s ease;
}

.button:active {
    transform: translateY(1px);
}

.button:focus-visible {
    outline: 2px solid var(--colour-accent-light);
    outline-offset: 3px;
}

.button-primary {
    font-weight: 600;
    color: #17281f;
    background: var(--colour-accent-light);
}

.button-primary:hover {
    background: #e6cb96;
}

.button-ghost {
    color: var(--colour-text-on-dark);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.32);
}

.button-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Round button with only a drawing in it. The padding matches the other buttons
   and the drawing is as tall as their line of text, so it ends up the same
   height and exactly square. align-self keeps it round in the stacked layout on
   a phone, where the buttons next to it grow to the full width. */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    padding: 13px;
}

.button-icon-glyph {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sections */
.section {
    padding: clamp(52px, 7vw, 86px) 20px;
}

.section-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

/* Running text gets a shorter line length while its container keeps the width of
   the wide sections, so every heading on the page starts in the same place. */
.section-narrow > * {
    max-width: 680px;
}

.section-shaded {
    background: var(--colour-surface-shaded);
}

.section-intro {
    padding-top: clamp(38px, 5vw, 60px);
}

.section-title {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.2vw, 2.05rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--colour-green-deep);
}

.section-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 16px;
    background: var(--colour-accent);
    border-radius: 2px;
}

.section-subtitle {
    margin: 30px 0 14px;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--colour-green-deep);
}

.section-intro p,
.section-shaded p {
    color: var(--colour-text-muted);
}

/* Reveal on scroll, only enabled when scripting is available */
.javascript .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.javascript .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Recognition list, the situations under 'Herken je dit?' */
.recognition-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.recognition-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    color: var(--colour-text-muted);
    border-top: 1px solid var(--colour-border);
}

.recognition-item:first-child {
    border-top: 0;
}

.recognition-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 6px;
    color: var(--colour-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Practical details */
/* The minimum of 280px lets the six cards settle into three columns on a wide
   screen, two on a tablet and one on a phone. */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 0;
}

.detail-card {
    padding: 26px 24px 24px;
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.detail-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    color: var(--colour-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-term {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--colour-green-soft);
}

.detail-description {
    margin: 0;
    color: var(--colour-text);
}

/* About */
.about {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(26px, 4vw, 48px);
    align-items: start;
}

.about-figure {
    margin: 0;
}

.about-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    box-shadow: 0 16px 40px rgba(20, 49, 42, 0.16);
}

.about-caption {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--colour-green-deep);
}

.about-text p {
    color: var(--colour-text-muted);
}

.audience-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.audience-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    color: var(--colour-text-muted);
    border-top: 1px solid var(--colour-border);
}

.audience-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.audience-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 6px;
    color: var(--colour-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Small remark below the audience list. */
.audience-note {
    margin-top: 16px;
    font-size: 0.95rem;
}

@media (max-width: 720px) {
    .about {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .about-figure {
        max-width: 320px;
        text-align: center;
    }
}

/* Contact */
.section-contact {
    color: var(--colour-text-on-dark);
    background:
        radial-gradient(100% 80% at 20% 0%, rgba(216, 184, 120, 0.14) 0%, rgba(216, 184, 120, 0) 60%),
        linear-gradient(162deg, var(--colour-green) 0%, var(--colour-green-deep) 100%);
    text-align: center;
}

/* The closing section is centred, so its shortened blocks are centred as well. */
.section-contact .section-narrow > * {
    margin-right: auto;
    margin-left: auto;
}

.section-contact .section-title {
    color: var(--colour-text-on-dark);
}

.section-contact .section-title::after {
    margin-right: auto;
    margin-left: auto;
    background: var(--colour-accent-light);
}

.contact-statement {
    max-width: 30ch;
    margin: 0 auto 18px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    line-height: 1.35;
}

.contact-text {
    max-width: 50ch;
    margin: 0 auto 28px;
    color: var(--colour-text-on-dark-muted);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.contact-email {
    margin: 22px 0 0;
    font-size: 0.95rem;
}

.contact-email a {
    color: var(--colour-accent-light);
}

.copy-feedback {
    margin: 12px 0 0;
    min-height: 1.3em;
    font-size: 0.88rem;
    color: var(--colour-accent-light);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.copy-feedback.visible {
    opacity: 1;
}

/* Field that main.js uses to copy text on browsers without the Clipboard API. */
.offscreen-helper {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: 0;
    pointer-events: none;
}

@media (max-width: 560px) {
    .contact-actions {
        flex-direction: column;
    }
}

/* Footer */
.site-footer {
    padding: 30px 20px;
    color: var(--colour-text-on-dark-muted);
    background: var(--colour-green-darker);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: var(--content-width);
    margin: 0 auto;
    font-size: 0.85rem;
}

.footer-line {
    margin: 0;
}

.footer-test-marker {
    margin: 0;
    padding: 4px 12px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--colour-accent-light);
    border: 1px dashed rgba(216, 184, 120, 0.45);
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .javascript .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .button,
    .site-header,
    .navigation-link,
    .copy-feedback {
        transition: none;
    }
}