/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Import Inter font from Google Fonts for the goede doel page */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* Use Inter as the default font for the page */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


:root {
    /* Spacing between sections */
    --space-pie-donation: 10%; /* Aanpasbaar percentage voor ruimte tussen cirkeldiagram en donatie sectie */
    /* Gallery/grid spacing (even horizontal & vertical gap) */
    --gallery-column-gap: 3%; /* horizontal gap between images */
    /* use the same spacing as between the hero/pie and donation section */
    --gallery-row-gap: var(--space-pie-donation, 10%); /* vertical gap between rows */
    /* Card caption block height (desktop). Change if you want a different fixed height. */
    --card-content-height: 211px;
    
    /* HERO image: size & position */
    --hero-height-vw: 35vh;
    --hero-height-max: 1440px;
    --hero-object-fit: contain; /* contain | cover */
    --hero-pos-x: 50%;
    --hero-pos-y: 100%;

    /* PIE chart */
    --pie-hole-percent: 58%;
    --pie-width-min: 180px;
    --pie-width-vw: 30vw;
    --pie-width-max: 420px;
    --sector-left-left: 17%;
    --sector-left-top: 27%;
    --sector-right-right: 12%;
    --sector-right-top: 65%;
    --sector-font-size-min: 0.95rem;
    --sector-font-size-vw: 1.8vw;
    --sector-font-size-max: 1.6rem;
    --stat-left-right: 73%;
    --stat-left-bottom: 12%;
    --stat-right-left: 73%;
    --stat-right-top: 38%;
    --pie-mobile-width: 62vw;

    /* NAV / HEADER */
    --nav-gap: 5.0rem;
    --header-font-size: 1.8rem;
    --header-font-size-1024: 1.1rem;
    --header-font-size-768: 1rem;

    /* POLYGON overlay */
    --polygon-fill: rgb(201,201,201);
    --polygon-clip: polygon(0% 14%, 100% 14%, 100% 86%, 16% 86%);
    /* POLYGON text placement & size (editable in CSS or inline via style="--polygon-text-left:...") */
    --polygon-text-left: 50%;
    --polygon-text-top: 18%;
    --polygon-text-width: 40%;

    --polygon-text2-left: 65%;
    --polygon-text2-top: 68%;
    --polygon-text2-width: 40%;
    --polygon-text-color2: rgb(40, 159, 195);
    --polygon-text-size2: 42px; 
    /* Default polygon text font and size (you can override inline with style="--polygon-text-size:...; --polygon-text-font:...") */

    --polygon-text-size: 22px; /* default: 22px as requested */
    /* use the global base font (Inter) for polygon text overlays */
    --polygon-text-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --polygon-text-color: #ffffff;
    --polygon-text-padding: 0.6rem 0.8rem;
    --polygon-text-align: left; /* left | center | right */
    /* Space between hero image and the stats/pie block. You can set a percentage
       (percentages are calculated relative to the container width) or use vh for
       viewport-height based spacing. Example: --space-hero-pie: 6%; or 6vh */
    --space-hero-pie: 10%;
        /*
            Per-page scroll percentages for the top navigation links.
            Edit these numbers (0-100) to change where each nav item scrolls to
            relative to the total page height. Example: --scroll-doneer: 20 means
            clicking "doneer" scrolls to 20% down the full page.
        */
        --scroll-doneer: 26; /* percent */
        --scroll-activiteiten: 40; /* percent */
        --scroll-Contact: 100; /* percent - case matches href fragment */
        --scroll-onderzoek: 76; /* percent */
}

/* ====== HEADER ====== */
.site-header {
    background-color: #b3b3b3;
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

.logoheader {
    width: auto;
    max-width: 250px;
    height: auto;
}


.site-nav {
    display: flex;
    align-items: center;
    margin-right: 1.25rem;
}

.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--nav-gap);
}

.site-nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: var(--header-font-size);
    text-transform: lowercase;
}

.site-nav ul li a:hover {
    color: #b10000;
    text-decoration: underline;
}

/* Hero image. */
.image-container{
position: relative;
width: auto;
height: 111%;
left: 0%;
}

/* SVG polygon overlay sits above the image. Color is controlled in CSS. */
.polygon-svg {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2; /* above the image, below text */
    pointer-events: none;
}

.polygon1 {
    fill: var(--polygon-fill);
}



/* ====== STATS / PIE CHART BLOCK ====== */
.stats {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
    /* gap above the stats block; editable via --space-hero-pie in :root or inline */
    margin-top: var(--space-hero-pie, 6%);
}

.stats-card {
    width: min(1100px, 94%);
    background: #cfcfcf; /* light gray background like example */
    padding: clamp(18px, 3vw, 32px);
    border-radius: 4px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.02) inset;
}

.stats-title {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    margin-bottom: clamp(12px, 2vw, 20px);
    max-width: 70%;
}

.stat-visual {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 24px) 0;
    min-height: clamp(240px, 36vw, 420px);
}

.pie {
    width: clamp(var(--pie-width-min), var(--pie-width-vw), var(--pie-width-max));
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* 70% = 252deg, 30% = 108deg */
    background: conic-gradient(#0a84ff 0deg 252deg, #ffb300 252deg 360deg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) inset;
        margin: 0 auto;
}

.pie::after {
    /* inner cutout to match donut-like pie in screenshot */
    content: "";
    position: absolute;
    width: var(--pie-hole-percent);
    height: var(--pie-hole-percent);
    background: #cfcfcf; /* same as card background to appear like a hole */
    border-radius: 50%;
    box-shadow: none;
}

.pie-center {
    position: absolute;
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.0rem, 2.4vw, 2rem);
    z-index: 2;
    display: none; /* hide central percent since we show percentages in sectors */
}

.sector-label {
    position: absolute;
    color: #ffffff;
    font-weight: 800;
    z-index: 4;
    pointer-events: none;
}

.sector-label-left {
    left: var(--sector-left-left);
    top: var(--sector-left-top);
    transform: translate(-50%, -50%);
    font-size: clamp(var(--sector-font-size-min), var(--sector-font-size-vw), var(--sector-font-size-max));
}

.sector-label-right {
    right: var(--sector-right-right);
    top: var(--sector-right-top);
    transform: translate(50%, -50%);
    font-size: clamp(var(--sector-font-size-min), var(--sector-font-size-vw), var(--sector-font-size-max));
}

.stat-label {
    position: absolute;
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    z-index: 3;
}

.stat-label-left {
    right: var(--stat-left-right);
    bottom: var(--stat-left-bottom);
    text-align: right;
}

.stat-label-right {
    left: var(--stat-right-left);
    top: var(--stat-right-top);
    text-align: left;
}

@media (max-width: 1024px) {
    .site-nav ul { gap: 1.75rem; }
    .site-nav ul li a { font-size: var(--header-font-size-1024); }
    .logoheader { max-width: 140px; }
    .image-container { height: clamp(240px, 40vh, 480px); }
    .trapezoid { right: 30%; width: clamp(100px, 18vw, 320px); }
    .solid-block { width: clamp(140px, 30vw, 520px); }
}

@media (max-width: 768px) {
    .site-header { flex-direction: row; align-items: center; padding: 10px 16px; }
    .site-nav { margin-right: 12px; }
    .site-nav ul { gap: 0.75rem; flex-wrap: wrap; }
    .site-nav ul li a { font-size: var(--header-font-size-768); color: #fff; }
    .logoheader { max-width: 120px; }
    /* show full-width image on small screens and hide decorative blocks */
    .image-container { height: clamp(220px, 35vh, 420px); }
    .trapezoid, .solid-block { display: none; }
    /* On small screens, the image keeps the global variables (you can override per-image inline) */
}

@media (max-width: 600px) {
    .stats-card { padding: 14px; }
    .stats-title { max-width: 100%; }
    .stat-label-left { left: 6%; bottom: 8%; font-size: 0.95rem; }
    .stat-label-right { right: 6%; top: 36%; font-size: 0.95rem; }
    .pie { width: 62vw; }
}

/* Donation Section Styles */
.donation-section {
    width: 100%;
    /* Gebruik de CSS variabele voor de ruimte */
    margin-top: var(--space-pie-donation);
    padding: 0 2%;
}

.donation-image-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.donation-image {
    width: 100%;
    height: auto;
    display: block;
}

.donation-overlay {
    position: absolute;
    /* Centreer het blok horizontaal en verticaal */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 4px;
    width: 40%;
    max-width: 500px;
}

.donation-overlay h2 {
    color: #ff5b5b;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}

.donation-overlay h3 {
    color: #ff5b5b;
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

.donation-frequency {
    margin-top: 2rem;
}

.donation-frequency p {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.frequency-options {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.frequency-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.frequency-options span {
    color: #333;
    font-size: 1rem;
}

.donation-amounts {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.amount-btn {
    background: #ff5b5b;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    min-width: 100px;
    text-align: center;
}

.amount-btn:hover {
    background: #ff4242;
}

@media (max-width: 1024px) {
    .donation-overlay {
        width: 60%;
    }
}

@media (max-width: 768px) {
    .donation-overlay {
        position: relative;
        width: 90%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        margin: -2rem 0 0;
    }
    
    .frequency-options {
        flex-direction: column;
        gap: 1rem;
    }
    
    .donation-amounts {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .donation-overlay h2 {
        font-size: 1.5rem;
    }
    
    .donation-overlay h3 {
        font-size: 1.8rem;
    }
    
    .amount-btn {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
        min-width: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Footer Styles */
.site-footer {
    background-color: #cecece;
    padding: 2rem 1rem;
    margin-top: 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.logo-footer {
    width: auto;
    max-width: 180px;
    height: auto;
}

.footer-address {
    color: white;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    flex: 1;
}

.footer-contact {
    color: white;
    text-align: right;
    max-width: 400px;
}

.footer-contact h3 {
    color: #ff5b5b;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.phone-number {
    color: #ff5b5b;
    font-weight: bold;
}

.contact-hours {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .footer-contact {
        text-align: center;
    }

    .logo-footer {
        max-width: 150px;
    }
}

/* Positioning for foreignObject content so text can be moved via CSS variables */
.polygon-text {
    /* absolutely positioned HTML text overlay (not inside SVG) to avoid scaling distortions */
    position: absolute;
    left: var(--polygon-text-left);
    top: var(--polygon-text-top);
    width: var(--polygon-text-width);
    z-index: 3; /* above SVG */

    /* visual variables (editable via :root or inline style on the element) */
    color: var(--polygon-text-color, #ffffff);
    font-family: var(--polygon-text-font, "Calibri", "Segoe UI", Tahoma, sans-serif);
    font-size: var(--polygon-text-size, 22px);
    line-height: 1.4;
    text-align: var(--polygon-text-align, left);
    padding: var(--polygon-text-padding, 0.6rem 0.8rem);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);

    box-sizing: border-box;
    pointer-events: none;
}

/* Positioning for foreignObject content so text can be moved via CSS variables */
.polygon-text2 {
    /* absolutely positioned HTML text overlay (not inside SVG) to avoid scaling distortions */
    position: absolute;
    left: var(--polygon-text2-left);
    top: var(--polygon-text2-top);
    width: var(--polygon-text2-width);
    z-index: 3; /* above SVG */

    /* visual variables (editable via :root or inline style on the element) */
    color: var(--polygon-text-color2,rgb(54, 208, 255)f);
    font-family: var(--polygon-text-font, "Calibri", "Segoe UI", Tahoma, sans-serif);
    font-size: var(--polygon-text-size2, 22px);
    line-height: 1.4;
    text-align: var(--polygon-text-align, left);
    padding: var(--polygon-text-padding, 0.6rem 0.8rem);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);

    box-sizing: border-box;
    pointer-events: none;
}

/* News / Cards grid */
.news-grid {
    max-width: 1200px;
    /* keep a consistent gap between the pie and the top row: use the shared spacing variable */
    margin: var(--space-pie-donation) auto var(--space-pie-donation) auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two columns as requested */
    gap: var(--gallery-row-gap) var(--gallery-column-gap);
    align-items: start;
    padding: 0 2%;
}


.news-card {
    width: 100%;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.news-card img {
    display: block;
    width: 100%;
    /* enforce a consistent image aspect so all cards are visually aligned */
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.card-content {
    /* Slightly darker than pure white for better contrast on top of images */
    background: rgba(245,245,245,0.98); /* off-white */
    padding: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    /* Fixed height on larger screens but responsive via media query below */
    height: var(--card-content-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* prevent overflow if content is too long */
}

.card-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: #111;
    font-weight: 700;
}

.card-content p {
    color: #222;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.card-content a {
    color: #111;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .news-grid { grid-template-columns: 1fr; gap: calc(var(--gallery-gap) / 2); }
}

@media (max-width: 520px) {
    /* On small screens allow caption blocks to size naturally */
    .card-content {
        height: auto;
        min-height: 0;
        padding: 1rem;
        justify-content: flex-start;
    }
}

/* Three-column promo row (images only) */
.three-grid {
    max-width: 1200px;
    margin: var(--space-pie-donation) auto var(--space-pie-donation) auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gallery-row-gap) var(--gallery-column-gap);
    padding: 1.25rem 2%;
    align-items: start;
    background: #ffffff; /* white band like the design */
    box-shadow: 0 0 0 0 rgba(0,0,0,0.02) inset;
}

.three-card {
    background: #fff;
    display: flex;
    flex-direction: column;
}

.three-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.three-card .card-box {
    height: var(--card-content-height); /* keeps same visual block height as other cards */
    background: #fff;
    /* red divider line between image and white block to match original formatting */
    border-top: 4px solid #e10a0a;
}

/* When using .card-content inside the three-grid, add the red divider too */
.three-card .card-content {
    border-top: 4px solid #e10a0a;
}

@media (max-width: 1024px) {
    .three-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .three-grid { grid-template-columns: 1fr; }
    .three-card .card-box { height: auto; }
}

/* Featured centered image with red overlay */
.featured-section {
    width: 100%;
    padding: 0 2%;
    margin-top: var(--space-pie-donation);
    margin-bottom: var(--space-pie-donation);
}

.featured-wrap {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.featured-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.featured-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e10a0a; /* red background matching KWF */
    color: #fff;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.featured-overlay h2 {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    font-weight: 800;
}

.featured-overlay p {
    margin: 0.25rem 0;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

@media (max-width: 700px) {
    .featured-wrap { width: 94%; }
    .featured-overlay { padding: 1rem; }
}

@media (max-width: 520px) {
    .featured-overlay { position: relative; bottom: auto; left: auto; right: auto; box-shadow: none; }
}/* Review Section */
.reviews-section {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 4rem auto;
  max-width: 1200px;
  padding: 0 2%;
}

.review-card {
  width: 100%;
  max-width: 300px;
  background: #ffffff;
  border: 2px solid #ff2c2c;
  border-radius: 10px;
  text-align: center;
  padding: 3.5rem 1.5rem 2rem; /* Extra padding boven voor rode balk */
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* Red top bar */
.review-card::before {
  content: "";
  height: 50px;
  width: 100%;
  background: #ff2c2c;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 0; /* Achter content */
}

/* Title & text */
.review-card h3,
.review-card p {
  position: relative;
  z-index: 1;
}

.review-card h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.review-card p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Score box */
.review-score {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #bbb;
  z-index: 2;
}

/* Responsive for mobile */
@media (max-width: 800px) {
  .reviews-section {
    flex-direction: column;
    align-items: center;
  }
}