/*
    ============================================================
    ROEL GROENEVELD.NL 2026
    ============================================================

    Opbouw volgens CUBE CSS (Composition, Utility, Block, Exception):
    - Design Tokens:  CSS custom properties voor kleur, typografie, spacing
    - Global Styles:  Reset, body, headings, links, images
    - Composition:    Layout-primitieven (.flow, .wrapper, .grid, .cluster, .with-sidebar, .region)
    - Utilities:      Eendoel-klassen (.text-mid, .measure, .visually-hidden, etc.)
    - Blocks:         Component-specifieke stijlen (.hero, .card, .tag, .timeline-item, etc.)
    - Exceptions:     Varianten via data-attributen ([data-variant="green"])

    Typografie:        Lora (variable font via Google Fonts)
    Kleurpalet:        Monochroom groen + neutraal grijs
    Fluid design:      Alle spacing en font-sizes via clamp() 

    Toegankelijkheid:
    - Skip-link naar #main
    - Semantische HTML (nav, main, section, aside, figure, figcaption, blockquote)
    - aria-labelledby op elke sectie gekoppeld aan h2 id
    - aria-hidden="true" op decoratieve iconen en placeholders
    - focus-visible stijlen op alle interactieve elementen
    - prefers-reduced-motion: scroll-animaties en reveal-effecten worden uitgeschakeld

    ============================================================
  */

    /* ===================================================
       DESIGN TOKENS
       Centrale variabelen voor het hele ontwerp.
       Wijzig hier om het kleurpalet, de typografische
       schaal of spacing globaal aan te passen.
       =================================================== */
  
       :root {
      /* Kleuren — monochroom groen + neutraal */
      --color-dark: #2c2c2c;          /* Primaire tekstkleur */
      --color-mid: #5a5a5a;           /* Secundaire tekst, bijschriften */
      --color-light: #ffffff;          /* Pagina-achtergrond */
      --color-paper: #ffffff;          /* Card-achtergrond (semantisch apart van --color-light zodat cards later een afwijkende tint kunnen krijgen) */
      --color-green: #4a6741;          /* Primair accent: links, iconen, tags */
      --color-green-light: #eef3ec;    /* Licht accent: icon-badges, tag-achtergrond, beschikbaarheidslabel */
      --color-green-mid: #a3c4a0;      /* Midden accent: borders, scheidingslijnen, decoratie */
      --color-green-dark: #3d5a37;     /* Donker accent: link-hover, timeline-periodes */

      /* Fluid typografie — slechts 3 stappen
         Berekend met https://utopia.fyi/type/calculator/
         Min viewport: 320px, Max viewport: 1200px */
      --step-0: clamp(1rem, 0.93rem + 0.33vw, 1.2rem);       /* Body */
      --step-1: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);     /* h2, hero-intro */
      --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);       /* h1 */

      /* Fluid spacing — 5 stappen (xs → xl)
         Schaalt evenredig met viewport */
      --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);
      --space-s: clamp(0.875rem, 0.75rem + 0.6vw, 1.25rem);
      --space-m: clamp(1.25rem, 1rem + 1.2vw, 2rem);
      --space-l: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
      --space-xl: clamp(3rem, 2.2rem + 3.8vw, 5.5rem);

      /* Maatregel — maximale regelbreedte voor leesbare tekst */
      --measure: 62ch;
    }

    /* ===================================================
       GLOBAL STYLES
       Basis-reset en typografie. De cascade doet hier
       het zware werk: headings, links en afbeeldingen
       zijn direct bruikbaar zonder extra klassen.
       =================================================== */

    @font-face {
      font-family: 'Lora';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('../fonts/lora-variable.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Lora';
      font-style: italic;
      font-weight: 400 700;
      font-display: swap;
      src: url('../fonts/lora-variable-italic.woff2') format('woff2');
    }

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

    html {
      scroll-behavior: smooth;
    }

    /* Toegankelijkheid: respecteer motion-voorkeur */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    body {
      font-family: 'Lora', Georgia, 'Times New Roman', serif;
      font-size: var(--step-0);
      line-height: 1.65;
      color: var(--color-dark);
      background-color: var(--color-light);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-weight: 600;
      line-height: 1.2;
      text-wrap: balance;
    }

    h2 {
      font-size: var(--step-1);
    }

    a {
      color: var(--color-green);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.15em;
      transition: color 0.2s ease;
    }

    a:hover {
      color: var(--color-green-dark);
    }

    a:focus-visible {
      outline: 2px solid var(--color-green);
      outline-offset: 3px;
      border-radius: 2px;
    }

    img {
      max-width: 100%;
      display: block;
    }

    /* ===================================================
       COMPOSITION
       Layout-primitieven die herbruikbaar zijn in elke
       context. Geen visuele styling, alleen structuur.
       =================================================== */

    /* Flow: verticaal ritme tussen siblings.
       Overschrijf --flow-space lokaal voor afwijkende spacing. */
    .flow > * + * {
      margin-block-start: var(--flow-space, 1em);
    }

    /* Wrapper: gecentreerde container met max-width en fluid padding */
    .wrapper {
      margin-inline: auto;
      padding-inline: var(--space-m);
      max-width: 1100px;
    }

    /* Region: verticale sectie-padding */
    .region {
      padding-block: var(--space-l);
    }

    /* Grid: responsive kolommen via auto-fit.
       Minimaal 280px per kolom, valt terug naar 100% op smalle schermen. */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: var(--space-m);
    }

    /* Cluster: horizontale flex-wrap voor tags, links, iconen */
    .cluster {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      align-items: center;
    }

    /* Sidebar: content (breed) + sidebar (smal).
       Sidebar wraps eronder op smalle schermen dankzij flex-wrap
       en min-inline-size op het hoofdelement. */
    .with-sidebar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-l);
    }

    .with-sidebar > :first-child {
      flex-basis: 0;
      flex-grow: 999;
      min-inline-size: 60%;
    }

    .with-sidebar > :last-child {
      flex-basis: 340px; /* was 280px */ 
      flex-grow: 1;
    }

    /* ===================================================
       UTILITIES
       Eendoel-klassen. Elk doet precies één ding.
       =================================================== */
    .text-mid { color: var(--color-mid); }
    .text-green { color: var(--color-green); }
    .font-italic { font-style: italic; }
    .font-bold { font-weight: 600; }

    .uppercase {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.8em;
    }

    /* Toegankelijkheid: verberg visueel maar blijf beschikbaar voor screenreaders */
    .visually-hidden {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    /* Beperk regelbreedte voor leescomfort */
    .measure { max-width: var(--measure); }

    /* ===================================================
       BLOCKS
       Component-specifieke stijlen. Elke block is een
       herkenbaar UI-element met eigen verantwoordelijkheid.
       =================================================== */

    /* --- Hero ---
       Openingssectie met naam, titel, intro en toptaken-navigatie. */
    .hero {
      padding-block: var(--space-xl) var(--space-l);
    }

    /* Naam + profielfoto naast elkaar */
    .hero__namerow {
      display: flex;
      align-items: center;
      gap: var(--space-s);
    }

    .hero__name {
      font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
      font-weight: 600;
      color: var(--color-dark);
      letter-spacing: 0.01em;
    }

    /* Subtitel onder de naam - naast foto en onder hero__name */
    .hero__subtitle {
      font-size: var(--step-0);
      color: var(--color-mid);
      font-weight: 400;
      font-style: italic;
      margin-block-start: 0.1em;
    }

    /* Ronde profielfoto naast de naam */
    .hero__photo {
      width: clamp(52px, 5vw, 72px);
      height: clamp(52px, 5vw, 72px);
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--color-green-light);
      border: 2px solid var(--color-green-light);
      box-shadow: 0 1px 6px rgba(74, 103, 65, 0.1);
    }

    .hero__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Placeholder-variant voor wanneer er nog geen foto is */
    .hero__photo--placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-green);
    }

    .hero__photo--placeholder svg {
      width: 40%;
      height: 40%;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .hero h1 {
      font-size: var(--step-2);
      max-width: 22ch;
    }

    .hero__intro {
      font-size: var(--step-1);
      max-width: 46ch;
      color: var(--color-mid);
      font-weight: 400;
      --flow-space: var(--space-m);
    }

    /* Golvende SVG-onderstreping onder de h1-tekst */
    .hero__wavy {
      display: inline;
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='8' viewBox='0 0 100 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4c10 0 15-3 25-3s15 6 25 6 15-6 25-6 15 3 25 3' fill='none' stroke='%234a6741' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: repeat-x;
      background-position: bottom;
      background-size: 50px 6px;
      padding-bottom: 6px;
    }

    /* Marker-highlight: simuleert een groene tekstmarker op papier.
       Het gradient laat boven en onder een stukje tekst zien,
       zodat het niet als een volledig blok overkomt. */
    .marker {
      background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 25%,
        #c6e4b8 25%,
        #c6e4b8 85%,
        transparent 85%
      );
      padding-inline: 0.1em;
    }

    /* Beschikbaarheidslabel — licht gedraaid voor een speels effect */
    .hero__available {
      display: inline-block;
      background: var(--color-green-light);
      color: var(--color-green);
      padding: var(--space-xs) var(--space-s);
      font-size: 0.8em;
      font-weight: 600;
      letter-spacing: 0.03em;
      transform: rotate(-1deg);
      border: 1px solid rgba(74, 103, 65, 0.15);
      --flow-space: var(--space-m);
    }

    /* --- Toptaken-menu ---
       Horizontale navigatie onder de hero-intro.
       Elke link bevat een inline SVG-icoon + tekst. */
    .toptaken {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs) var(--space-s);
      --flow-space: var(--space-m);
      padding-block-start: var(--space-s);
      border-block-start: 1px solid var(--color-green-mid);
    }

    .toptaken a {
      color: var(--color-mid);
      text-decoration: none;
      font-size: 0.85em;
      letter-spacing: 0.02em;
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      padding: 0.4em 0.8em;
      border: 1px solid var(--color-green-mid);
      border-radius: 4px;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .toptaken a:hover {
      color: var(--color-green);
      border-color: var(--color-green);
      background: var(--color-green-light);
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(74, 103, 65, 0.12);
    }

    .toptaken a:focus-visible {
      outline: 2px solid var(--color-green);
      outline-offset: 2px;
    }

    .toptaken a:hover .icon {
      color: var(--color-green);
    }

    /* --- Iconen ---
       Inline SVG-iconen die meeschalen met de tekst.
       Gebruikt in toptaken-menu. */
    .icon {
      display: inline-block;
      width: 1.1em;
      height: 1.1em;
      color: var(--color-green-mid);
      transition: color 0.2s ease;
      flex-shrink: 0;
    }

    .icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Sectie-heading ---
       Icoon-badge + h2 per sectie. Het icoon correspondeert
       met het toptaken-menu icoon voor visuele samenhang. */
    .section-heading {
      position: relative;
      --flow-space: 0;
    }

    .section-heading__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.2em;
      height: 2.2em;
      background: var(--color-green-light);
      color: var(--color-green);
      border-radius: 6px;
      margin-block-end: var(--space-xs);
    }

    .section-heading__icon svg {
      width: 1.2em;
      height: 1.2em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Section figure ---
       Foto met onderschrift, gebruikt in Over mij.
       De figure staat in de aside. Op desktop toont de
       .with-sidebar layout deze rechts naast de tekst.
       Op mobiel (≤ 640px) wrappen de flex-items verticaal
       en wordt de aside onder de tekst getoond. */
    .section-figure {
      margin: 0;
    }

    .section-figure img {
      width: 100%;
      border-radius: 4px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      background: var(--color-green-light);
    }

    .section-figure figcaption {
      font-size: 0.8em;
      color: var(--color-mid);
      margin-block-start: var(--space-xs);
      font-style: italic;
    }

    .section-figure__placeholder {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 4px;
      background: var(--color-green-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-green-mid);
    }

    .section-figure__placeholder svg {
      width: 48px;
      height: 48px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Desktop (≥ 641px): foto verplaatst naar sidebar via order.
       De aside bevat de sticky note, de figure staat in de flow
       maar wordt visueel in de sidebar geplaatst. */
    @media (max-width: 640px) {
      #over .with-sidebar {
        display: flex;
        flex-direction: column;
      }

    /* Afbeelding bij Over mij breder weergeven */ 
    @media (min-width: 641px) {
      #over .section-figure {
        margin-inline-start: calc(var(--space-m) * -1);
        width: calc(100% + var(--space-m));
        }
      }

      #over .with-sidebar > .flow {
        order: 1;
      }

      #over .with-sidebar > aside {
        order: 2;
      }
    }

    /* --- Card ---
       Witte kaart met subtiele border en schaduw.
       Gebruikt voor diensten. */
    .card {
      background: var(--color-paper);
      padding: var(--space-m);
      border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .card h3 {
      font-size: var(--step-0);
    }

    /* --- Highlight block ---
       Donkergroene achtergrond voor nadruk (referenties). */
    .highlight {
      background: var(--color-green);
      color: var(--color-paper);
      border-radius: 3px;
    }

    .highlight a {
      color: var(--color-paper);
      text-decoration-color: rgba(255,255,255,0.4);
    }

    .highlight a:hover {
      text-decoration-color: var(--color-paper);
    }

    /* --- Tag ---
       Pill-shaped label. Lichtgroene achtergrond, groene tekst en border.
       Gebruikt in diensten-cards en cases. */
    .tag {
      display: inline-block;
      background: var(--color-green-light);
      padding: 0.2em 0.65em;
      font-size: 0.78em;
      color: var(--color-green);
      border-radius: 100px;
      border: 1px solid rgba(74, 103, 65, 0.18);
    }

    /* --- Timeline ---
       Verticale lijn links met periode-label.
       Gebruikt in cases-sectie. */
    .timeline-item {
      padding-inline-start: var(--space-m);
      border-inline-start: 2px solid var(--color-green-mid);
    }

    .timeline-item__period {
      font-size: 0.8em;
      color: var(--color-green-dark);
      font-weight: 500;
    }

    /* --- Organisatie-logo ---
       Placeholder-logo naast case/timeline heading.
       Grijs vierkant met afgeronde hoeken, schaalt mee. */
    .org-logo {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background: var(--color-green-light);
      border: 1px solid rgba(74, 103, 65, 0.12);
      overflow: hidden;
      flex-shrink: 0;
    }

    .org-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
    }

    .org-logo--placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-green-mid);
    }

    .org-logo--placeholder svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Heading met logo ernaast */
    .heading-with-logo {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }

    /* --- Logo strip ---
       Rij van organisatie-logo's in referenties-sectie. */
    .logo-strip {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
      align-items: center;
      --flow-space: var(--space-m);
    }

    .logo-strip .org-logo {
      width: 56px;
      height: 56px;
    }

    /* --- Sticky note ---
       Lichtgroene achtergrond met linkerborder.
       Licht gedraaid voor een handgeschreven effect. */
    .sticky-note {
      background: var(--color-green-light);
      padding: var(--space-s) var(--space-m);
      border-left: 3px solid var(--color-green);
      font-style: italic;
      color: var(--color-mid);
      transform: rotate(-0.5deg);
    }

    /* --- Contact link ---
       Link met icoon, hergebruikt .icon styling uit toptaken. */
    .contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
    }

    /* --- Footer --- */
    .site-footer {
      border-block-start: 1px solid var(--color-green-mid);
      color: var(--color-mid);
      font-size: 0.85em;
    }

    /* ===================================================
       EXCEPTIONS
       Varianten op bestaande composities/blocks,
       aangestuurd via data-attributen.
       =================================================== */

    /* Groene achtergrond voor de referenties-sectie */
    .region[data-variant="green"] {
      background: var(--color-green-light);
    }

    /* ===================================================
       SCROLL REVEAL
       Fade-in + slide-up animatie via IntersectionObserver.
       Wordt volledig uitgeschakeld bij prefers-reduced-motion
       (zie global styles bovenaan).
       =================================================== */

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

    .js .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .js .reveal.is-visible {
      opacity: 1;
      transform: none;
    }