/* ==========================================================================
   PX Non-Profit Theme - Base Design System
   Overgenomen van Bricks Builder design tokens
   ========================================================================== */

/* ==========================================================================
   1. COLOR PALETTE
   ========================================================================== */

:root {
  /* Brand Colors */
  --action: #0093F5;
  --navy: #105070;
  --yellow: #F0BC00;
  --coral: #F07575;
  --sand: #C1B2A5;

  /* Neutrals */
  --gray-dark: #333333;
  --gray-mid: #8D8D8D;
  --white: #FFFFFF;
  --bone: #F9F7F6;
  --transparent: transparent;

  /* Accents */
  --ice-blue: #E5F4FE;
  --sky-blue: #80C9FA;

  /* Semantic Colors */
  --bg-site: var(--bone);
  --bg-section-alt: var(--white);
  --text-base: var(--gray-dark);
  --text-heading: var(--gray-dark);
  --text-active: var(--action);
  --divider-primary: var(--action);

  /* Button Semantic */
  --btn-focus-ring: var(--gray-dark);
  --btn-disabled-text: var(--gray-mid);
  --btn-disabled-bg: var(--bone);
  --btn-conv-radius: var(--radius-m);
}


/* ==========================================================================
   2. FONT FAMILIES
   ========================================================================== */

:root {
  --font-display: 'Lexend', sans-serif;
  --font-body: 'IBM Plex Serif', serif;
}


/* ==========================================================================
   3. FONT WEIGHTS
   ========================================================================== */

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}


/* ==========================================================================
   4. LINE HEIGHTS
   ========================================================================== */

:root {
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.75;
}


/* ==========================================================================
   5. LETTER SPACINGS
   ========================================================================== */

:root {
  --ls-tight: -0.01em;
  --ls-none: 0em;
}


/* ==========================================================================
   6. TYPOGRAPHY SCALE (fluid responsive)
   Min screen: 390px (24.38rem) / Max screen: 1380px (86.25rem)
   ========================================================================== */

:root {
  --text-3xs: clamp(0.13rem, calc(0 * (100vw - 24.38rem) + 0.13rem), 0.13rem);
  --text-2xs: clamp(0.22rem, calc(0.001454663003070955 * (100vw - 24.38rem) + 0.22rem), 0.31rem);
  --text-xs: clamp(0.44rem, calc(0.0030709552287053496 * (100vw - 24.38rem) + 0.44rem), 0.63rem);
  --text-s: clamp(0.66rem, calc(0.004525618231776303 * (100vw - 24.38rem) + 0.66rem), 0.94rem);
  --text-m: clamp(0.88rem, calc(0.00598028123484726 * (100vw - 24.38rem) + 0.88rem), 1.25rem);
  --text-m-plus: clamp(1.09rem, calc(0.007596573460481654 * (100vw - 24.38rem) + 1.09rem), 1.56rem);
  --text-l: clamp(1.31rem, calc(0.009212865686116047 * (100vw - 24.38rem) + 1.31rem), 1.88rem);
  --text-xl: clamp(1.75rem, calc(0.01212219169225796 * (100vw - 24.38rem) + 1.75rem), 2.5rem);
  --text-2xl: clamp(2.63rem, calc(0.01810247292710522 * (100vw - 24.38rem) + 2.63rem), 3.75rem);
  --text-3xl: clamp(4.38rem, calc(0.03022466461936318 * (100vw - 24.38rem) + 4.38rem), 6.25rem);
  --text-4xl: clamp(8.75rem, calc(0.0606109584612898 * (100vw - 24.38rem) + 8.75rem), 12.5rem);
}


/* ==========================================================================
   7. SPACING SCALE (fluid responsive)
   ========================================================================== */

:root {
  --space-3xs: clamp(0.13rem, calc(0 * (100vw - 24.38rem) + 0.13rem), 0.13rem); /* D001 */
  --space-2xs: clamp(0.22rem, calc(0.001454663003070955 * (100vw - 24.38rem) + 0.22rem), 0.31rem); /* D025 */
  --space-xs: clamp(0.44rem, calc(0.0030709552287053496 * (100vw - 24.38rem) + 0.44rem), 0.63rem); /* D05 */
  --space-s: clamp(0.66rem, calc(0.004525618231776303 * (100vw - 24.38rem) + 0.66rem), 0.94rem); /* D075 */
  --space-m: clamp(0.88rem, calc(0.00598028123484726 * (100vw - 24.38rem) + 0.88rem), 1.25rem); /* D1 */
  --space-m-plus: clamp(1.09rem, calc(0.007596573460481654 * (100vw - 24.38rem) + 1.09rem), 1.56rem); /* D125 */
  --space-l: clamp(1.31rem, calc(0.009212865686116047 * (100vw - 24.38rem) + 1.31rem), 1.88rem); /* D15 */
  --space-xl: clamp(1.75rem, calc(0.01212219169225796 * (100vw - 24.38rem) + 1.75rem), 2.5rem); /* D2 */
  --space-2xl: clamp(2.63rem, calc(0.01810247292710522 * (100vw - 24.38rem) + 2.63rem), 3.75rem); /* D3 */
  --space-3xl: clamp(4.38rem, calc(0.03022466461936318 * (100vw - 24.38rem) + 4.38rem), 6.25rem); /* D5 */
  --space-4xl: clamp(8.75rem, calc(0.0606109584612898 * (100vw - 24.38rem) + 8.75rem), 12.5rem); /* D10 */
}


/* ==========================================================================
   8. BORDER RADIUS
   ========================================================================== */

:root {
  --radius-xs: var(--space-xs);
  --radius-s: var(--space-s);
  --radius-m: var(--space-m);
  --radius-full: 50%;
  --radius-pill: 999rem;
}


/* ==========================================================================
   9. LAYOUT
   ========================================================================== */

:root {
  --row-width: 1200px;
}


/* ==========================================================================
   10. BOX SHADOWS
   ========================================================================== */

:root {
  --shadow-subtle: 1px 1px 2px 0px #00000059;
  --shadow-hover: 1px 3px 4px 0px #33333333;
  --shadow-pressed: 1px 2px 3px 0px #33333333;
  --shadow-elevated: 2px 4px 10px 0px #33333326;
  --shadow-elevated-fluid: var(--space-xs) var(--space-s) var(--space-xl) 0px #00000040;
}


/* ==========================================================================
   11. TRANSITIONS & ANIMATIONS
   ========================================================================== */

:root {
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-btn: background-color var(--duration-normal) var(--ease-smooth),
                    border-color var(--duration-normal) var(--ease-smooth),
                    box-shadow var(--duration-normal) var(--ease-smooth),
                    width var(--duration-normal) var(--ease-smooth),
                    fill var(--duration-normal) var(--ease-smooth);
}


/* ==========================================================================
   12. BASE / RESET
   ========================================================================== */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background-color: var(--bg-site);
  color: var(--text-base);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-none);
}

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

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Screen reader only - WCAG accessible hidden text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link (keyboard nav) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: var(--space-xs) var(--space-s);
  background: var(--action);
  color: var(--white);
  font-family: var(--font-display);
}

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

/* Global focus-visible - alleen bij keyboard navigatie */
:focus-visible {
  outline: solid 3px var(--btn-focus-ring);
  outline-offset: 2px;
}

/* Verberg standaard focus ring bij muis, toon bij keyboard */
:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   13. TYPOGRAPHY CLASSES
   ========================================================================== */

.heading {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-tight);
}

.heading--h1 {
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  row-gap: var(--space-m);
}

.heading--h2 {
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  row-gap: var(--space-s);
}

.heading--h3 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  row-gap: var(--space-xs);
}

.heading--h4 {
  font-size: var(--text-m-plus);
  line-height: var(--lh-snug);
  row-gap: var(--space-xs);
}

/* Heading divider (colored bar above heading) */
.heading__divider {
  display: flex;
  flex-direction: column;
}

.heading__divider::before {
  content: "";
  display: block;
  background-color: var(--divider-primary);
}

.heading__divider.heading--h1::before {
  width: 2em;
  height: 0.15em;
}

.heading__divider.heading--h2::before {
  width: 1.66em;
  height: 0.166em;
}

.heading__divider.heading--h3::before {
  width: 1.5em;
  height: 0.125em;
}

.heading__divider.heading--h4::before {
  width: 2.4em;
  height: 0.2em;
}

/* Body text */
.text {
  font-family: var(--font-body);
}

.text--body {
  font-size: var(--text-m);
  color: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-none);
}


/* ==========================================================================
   14. LAYOUT CLASSES
   ========================================================================== */

.section {
  padding: 0 var(--space-2xl);
}

@media screen and (max-width: 992px) {
  .section {
    padding: 0 var(--space-xl);
  }
}

.container {
  max-width: 86.25rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   15. BUTTON CLASSES (from Bricks design system)
   ========================================================================== */

/* -- Button Group -- */
.btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-m);
  width: fit-content;
}

/* -- Primary Button -- */
.btn--prim {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--text-m-plus);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-none);
  color: var(--white);

  position: relative;

  padding: calc(var(--space-s) - 3px) calc(var(--space-m) - 3px);

  background-color: var(--action);

  border-radius: var(--radius-s);
  border: 3px solid var(--transparent);

  box-shadow: var(--shadow-subtle);

  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--prim svg {
  width: var(--space-m);
  height: var(--space-m);
}

.btn--prim svg path {
  transition: var(--transition-btn);
}

.btn--prim:hover {
  color: var(--gray-dark);
  background-color: var(--transparent);
  border-color: var(--action);
  box-shadow: var(--shadow-hover);
}

.btn--prim:hover path {
  fill: var(--gray-dark);
}

.btn--prim:focus {
  background-color: var(--transparent);
  outline: solid 3px var(--btn-focus-ring);
  border-color: var(--action);
  box-shadow: none;
}

.btn--prim:active {
  color: var(--white);
  background-color: var(--navy);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}

.btn--prim:active path {
  fill: var(--white);
}

.btn--prim:disabled,
.btn--prim[aria-disabled="true"] {
  color: var(--btn-disabled-text);
  background-color: var(--btn-disabled-bg);
  border-color: var(--transparent);
  outline: none;
  box-shadow: none;
}

.btn--prim:disabled path,
.btn--prim[aria-disabled="true"] path {
  fill: var(--btn-disabled-text);
}


/* -- Secondary Button -- */
.btn--sec {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--text-m-plus);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-none);
  color: var(--gray-dark);

  position: relative;

  padding: calc(var(--space-s) - 3px) calc(var(--space-m) - 3px);

  background-color: var(--white);

  border-radius: var(--radius-s);
  border: 3px solid var(--transparent);

  box-shadow: var(--shadow-subtle);

  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--sec svg {
  width: var(--space-m);
  height: var(--space-m);
}

.btn--sec svg path {
  fill: var(--gray-dark);
  transition: var(--transition-btn);
}

.btn--sec:hover {
  color: var(--gray-dark);
  background-color: var(--transparent);
  border-color: var(--action);
  box-shadow: var(--shadow-hover);
}

.btn--sec:hover path {
  fill: var(--gray-dark);
}

.btn--sec:focus {
  background-color: var(--transparent);
  outline: solid 3px var(--btn-focus-ring);
  border-color: var(--action);
  box-shadow: none;
}

.btn--sec:active {
  color: var(--gray-dark);
  background-color: var(--sky-blue);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}

.btn--sec:active path {
  fill: var(--gray-dark);
}

.btn--sec:disabled,
.btn--sec[aria-disabled="true"] {
  color: var(--btn-disabled-text);
  background-color: var(--btn-disabled-bg);
  border-color: var(--transparent);
  outline: none;
  box-shadow: none;
}

.btn--sec:disabled path,
.btn--sec[aria-disabled="true"] path {
  fill: var(--btn-disabled-text);
}


/* -- Conversion Button 1 (Yellow) -- */
.btn--conv1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-none);
  color: var(--gray-dark);

  position: relative;

  padding: calc(var(--space-m) - 3px) calc(var(--space-l) - 3px);

  background-color: var(--yellow);

  border-radius: var(--btn-conv-radius);
  border: 3px solid var(--transparent);

  box-shadow: var(--shadow-subtle);

  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--conv1 svg {
  width: var(--space-xl);
  height: var(--space-xl);
}

.btn--conv1 svg path {
  transition: var(--transition-btn);
}

.btn--conv1:hover {
  background-color: var(--transparent);
  border-color: var(--yellow);
  box-shadow: var(--shadow-hover);
}

.btn--conv1:focus {
  background-color: var(--transparent);
  outline: solid 3px var(--btn-focus-ring);
  border-color: var(--yellow);
  box-shadow: none;
}

.btn--conv1:active {
  color: var(--white);
  background-color: var(--navy);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}

.btn--conv1:disabled,
.btn--conv1[aria-disabled="true"] {
  color: var(--btn-disabled-text);
  background-color: var(--btn-disabled-bg);
  border-color: var(--transparent);
  outline: none;
  box-shadow: none;
}

.btn--conv1:disabled path,
.btn--conv1[aria-disabled="true"] path {
  fill: var(--btn-disabled-text);
}


/* -- Conversion Button 2 (Navy) -- */
.btn--conv2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-none);
  color: var(--white);

  position: relative;

  padding: calc(var(--space-m) - 3px) calc(var(--space-l) - 3px);

  background-color: var(--navy);

  border-radius: var(--btn-conv-radius);
  border: 3px solid var(--transparent);

  box-shadow: var(--shadow-subtle);

  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--conv2 svg {
  width: var(--space-xl);
  height: var(--space-xl);
}

.btn--conv2 svg path {
  transition: var(--transition-btn);
}

.btn--conv2:hover {
  color: var(--gray-dark);
  background-color: var(--transparent);
  border-color: var(--navy);
  box-shadow: var(--shadow-hover);
}

.btn--conv2:focus {
  background-color: var(--transparent);
  outline: solid 3px var(--btn-focus-ring);
  border-color: var(--yellow);
  box-shadow: none;
}

.btn--conv2:active {
  color: var(--gray-dark);
  background-color: var(--yellow);
  border-color: var(--transparent);
  outline: none;
  box-shadow: var(--shadow-pressed);
}

.btn--conv2:disabled,
.btn--conv2[aria-disabled="true"] {
  color: var(--btn-disabled-text);
  background-color: var(--btn-disabled-bg);
  border-color: var(--transparent);
  outline: none;
  box-shadow: none;
}

.btn--conv2:disabled path,
.btn--conv2[aria-disabled="true"] path {
  fill: var(--btn-disabled-text);
}


/* -- Tertiary Button (Text Link) -- */
.btn--tert {
  display: grid;
  grid-template-columns: auto 0fr;
  align-items: center;
  gap: 0;

  font-family: var(--font-display);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-none);
  color: var(--gray-dark);
  text-decoration: underline;

  background-color: var(--transparent);

  border-radius: var(--radius-xs);
  border: none;

  padding: var(--space-xs) 0;

  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--tert svg {
  overflow: hidden;
  width: 0;
  transition: var(--transition-btn);
}

.btn--tert svg path {
  transition: var(--transition-btn);
}

.btn--tert:hover {
  color: var(--action);
  text-decoration: none;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
}

.btn--tert:hover svg {
  width: var(--space-m);
  height: var(--space-m);
}

.btn--tert:focus {
  color: var(--action);
  text-decoration: none;
  background-color: var(--white);
  outline: 5px solid var(--btn-focus-ring);
}

.btn--tert:active {
  color: var(--action);
  outline: none;
}

.btn--tert:active svg {
  width: 0;
}


/* -- Icon Button (Circle) -- */
.btn--icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: calc(3.75rem - 3px);
  height: calc(3.75rem - 3px);

  background-color: var(--white);

  border: 3px solid var(--transparent);
  border-radius: var(--radius-full);

  box-shadow: var(--shadow-subtle);

  transition: var(--transition-btn);
  cursor: pointer;
}

.btn--icon svg {
  width: var(--space-l);
  height: var(--space-l);
}

.btn--icon svg path {
  transition: var(--transition-btn);
}

.btn--icon:hover {
  border-color: var(--action);
  box-shadow: var(--shadow-hover);
}

.btn--icon:hover svg path {
  fill: var(--action);
}

.btn--icon:focus {
  outline: var(--btn-focus-ring);
  border-color: var(--transparent);
  box-shadow: var(--shadow-hover);
}

.btn--icon:active {
  background-color: var(--sky-blue);
  box-shadow: var(--shadow-pressed);
}

.btn--icon:active svg path {
  fill: var(--action);
}


/* -- Icon Left modifier -- */
.btn--icon-left {
  flex-direction: row-reverse;
}


/* -- Mobile-only Button -- */
.btn--mobile {
  display: none;
}

@media screen and (max-width: 475px) {
  .btn--mobile {
    display: flex;
  }
}


/* ==========================================================================
   16. CARD CLASSES
   ========================================================================== */

.card__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "image content";
  align-items: stretch;
  width: 100%;
  height: fit-content;
  margin: var(--space-2xl) 0;
  background-color: var(--white);
  box-shadow: var(--shadow-elevated);
}

@media screen and (max-width: 991px) {
  .card__container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "content";
  }
}

.card__container--image-left {
  grid-template-areas: "image content";
}

@media screen and (max-width: 991px) {
  .card__container--image-left {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "content";
  }
}

.card__container--image-right {
  grid-template-areas: "content image";
}

@media screen and (max-width: 991px) {
  .card__container--image-right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "image";
  }
}

.card__image {
  grid-area: image;
  min-height: 17.5rem;
  height: 100%;
}

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

.card__content-wrapper {
  grid-area: content;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
  padding: var(--space-2xl);
}


/* ==========================================================================
   17. BUTTON BAR CLASSES
   ========================================================================== */

.px-button-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

.px-button-bar__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
}

.px-button-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-m);
  border: 2px solid var(--action);
  border-radius: var(--radius-pill);
  background-color: var(--white);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-s);
  line-height: var(--lh-normal);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.px-button-bar__item:hover,
.px-button-bar__item:focus-visible {
  background-color: var(--action);
  color: var(--white);
  border-color: var(--action);
}

.px-button-bar__text {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.px-button-bar__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}