/* ------------------------- Styleguide - Samen Toegankelijk Heerlen (Pendra Studio) ------------------------- */

/* ------------------------- Fonts -------------------------------------------------- */

@font-face {
   font-family: 'PP Neue Montreal';
   src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PP Neue Montreal';
   src: url('../fonts/PPNeueMontreal-SemiBoldItalic.otf') format('opentype');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: url('../fonts/AtkinsonHyperlegible-400-italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: url('../fonts/AtkinsonHyperlegible-400.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Atkinson Hyperlegible';
   src: url('../fonts/AtkinsonHyperlegible-700.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* ------------------------- Design Tokens (kleuren & fonts) --------------------------------

   DIT IS HET CENTRALE PUNT om het hele kleurenschema en de fonts om te zetten.
   Pas alleen de waardes hieronder aan; de rest van de CSS verwijst naar deze variabelen.

   KLEUREN — wat doet welke variabele?
   --color-dark(-rgb)      hoofd-donkerkleur: donkere sectie-achtergronden, koppen, logo-vlakken
                           (-rgb varianten zijn "R, G, B" getallen; nodig voor transparante
                           afgeleiden zoals --color-text en --color-border)
   --color-dark-medium     iets lichtere donkertint (subtiele vlakken/hovers op donker)
   --color-dark-light      beige-groene accentkleur; is ook --color-primary (links, selectie, tags)
   --color-light(-rgb)     hoofd-lichtkleur: lichte sectie-achtergronden, tekst op donker
   --color-light-medium    lichte vlakken op lichte achtergrond (kaarten, inputs)
   --color-light-dark      donkerste lichttint (randen/vlakken op licht)
   --color-portrait-back   achtergrondkleur achter teamportretten
   --color-primary         primaire accentkleur (verwijst standaard naar --color-dark-light)
   --color-secondary       tweede accentkleur (rood; lijnen/accenten, ook foutmeldingen)
   --color-alert-*         formulier-feedback (error verwijst naar --color-secondary)
   --color-text(-light)    lopende tekst op licht resp. donker (70% dekking van dark/light)
   --color-border(-light)  randen/lijnen op licht resp. donker

   FONTS — één regel wijzigen om het hele font om te zetten:
   --font-primary          al het gewone tekstwerk (body, koppen, knoppen)
   --font-accent/-heading  Lexend voor koppen; <em> in koppen krijgt gele markering
   Let op: de @font-face-blokken bovenaan dit bestand bepalen welke bestanden er
   achter de familienamen 'Atkinson Hyperlegible' / 'Lexend' zitten. Eigen font gebruiken =
   (1) fontbestanden in assets/fonts/ zetten, (2) @font-face-blokken aanpassen of
   toevoegen, (3) hieronder --font-primary / --font-accent op de nieuwe familie zetten.

   Overige tokens (animatie, spacing, radius) staan onder de kleuren.
-------------------------------------------------------------------------------------------- */

:root {

   --font-primary: 'Atkinson Hyperlegible', sans-serif;
   --font-heading: 'PP Neue Montreal', sans-serif;
   --font-accent: 'PP Neue Montreal', sans-serif;

   /* GEÏNVERTEERD SCHEMA: de site is licht-op-donker → donker-op-licht omgezet.
      De namen zijn behouden (theme-dark-secties etc. verwijzen ernaar), maar de
      wáárden zijn omgewisseld: "--color-dark" rendert nu crème, "--color-light"
      donkergroen. Origineel: dark 4,25,20 / light 255,247,242 /
      dark-medium #434D48 / light-medium #E5E0DC / primary #8F8C79 / secondary #E34248. */
   --color-black-rgb: 0, 0, 0;
   --color-black: rgba(var(--color-black-rgb), 1);
   --color-dark-rgb: 255, 247, 242;
   --color-dark: rgba(var(--color-dark-rgb), 1);
   --color-dark-medium: #E5E0DC;
   --color-dark-light: #5F5D4E;

   --color-white-rgb: 255, 255, 255;
   --color-white: rgba(var(--color-white-rgb), 1);
   --color-light-rgb: 67, 81, 74;
   --color-light: rgba(var(--color-light-rgb), 1);
   --color-light-medium: #434D48;
   --color-light-dark: #D2CBC6;
   --color-portrait-back: #D0C7BE;

   --color-primary: var(--color-dark-light);
   --color-secondary: #FDB628;
   --color-btn-on-green: #1E322B; /* knopvlak op groene secties: donkerder dan de achtergrond */
   --color-accent-warm: #E2794F; /* accent op donkere secties (streep + logo-ring) */

   --color-alert-error: var(--color-secondary);
   --color-alert-success: #26ad6a;

   --color-text: rgba(var(--color-dark-rgb), 0.85);
   --color-text-light: rgba(var(--color-light-rgb), 0.85);

   --color-border: rgba(var(--color-dark-rgb), 0.15);
   --color-border-light: rgba(var(--color-light-rgb), 0.2);

   --animation-primary: .5s cubic-bezier(.3, 1, .3, 1);
   --animation-nav: .5s cubic-bezier(.6, 0, .4, 1);
   --animation-smooth: .5s cubic-bezier(.7, 0, .3, 1);

   /* Van 15 naar 12: een stap krapper op desktop. Alleen daar, want onder
      1024px overschrijven de media queries verderop deze waarde toch al.
      -medium en -small blijven staan, zodat de binnenruimte van kaarten en
      blokken niet meeverandert. */
   --section-padding: min(12vh, 12em);
   --section-padding-medium: min(10vh, 10em);
   --section-padding-small: min(7.5vh, 7.5em);
   --container-padding: min(10vw, 10em);
   --gap-padding: clamp(1em, 4vw, 2.5em);
   --gap-padding-big: clamp(1em, 8vw, 8em);

   --title-size: min(5vw, 5em);

   /* Verhouding 0.5 / 1 / 1.5, met 16px als basis - komt overeen met
      0.5em / 1em / 1.5em bij standaard tekstgrootte.
      Bewust in px en niet in em: custom properties rekenen em uit tegen het
      element waar ze gebruikt worden, dus in em zou een kaartje met kleinere
      tekst een kleinere hoek krijgen dan een kaartje ernaast.
      Let op de naamgeving: -medium is de grootste, niet de middelste. */
   --border-radius: 16px;
   --border-radius-medium: 24px;
   --border-radius-small: 8px;

   /* Tekstgrootte uit het toegankelijkheidspaneel: een vermenigvuldiger op de
      body-clamp hieronder, bereik 0.90 - 1.15. De waarde wordt als inline style
      op <html> gezet, zowel door het snippet in de <head> als door
      assets/js/toegankelijkheid.js. Inline wint van deze default, dus de keuze
      van de bezoeker gaat altijd voor.

      Bewust een factor en geen vaste font-size: zo blijft clamp(16px, 1.2vw, 19px)
      intact en schaalt de site nog steeds mee met de viewport. */
   --pendra-tekst: 1;

}

@media screen and (max-width: 1024px) {
   :root {
      --container-padding: 7.5vw;
      --title-size: 7.5vw;
      --section-padding: max(2.5em, calc(5vw + 5vh));
      --section-padding-medium: max(1.75em, calc(3.5vw + 3.5vh));
      --section-padding-small: max(1.25em, calc(2vw + 2vh));
   }
}

@media screen and (max-width: 720px) {
   :root {
      --container-padding: clamp(1em, 4vw, 2.5em);
      --title-size: 10vw;
   }
}

@media screen and (max-width: 540px) {
   :root {
      --title-size: 12.5vw;

      --section-padding: max(3em, 7.5vh);
      --section-padding-medium: max(2.25em, 6.25vh);
      --section-padding-small: max(1.5em, 5vh);
   }
}


/* ------------------------- Body -------------------------------------------------- */

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

li,
ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

body {
   -webkit-font-smoothing: antialiased;
   font-family: var(--font-primary);
   color: var(--color-text);
   line-height: 1.6;
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   font-size: clamp(16px, 1.2vw, 19px);
   font-size: calc(clamp(16px, 1.2vw, 19px) * var(--pendra-tekst, 1));
   background-color: var(--color-light);
}

html,
body {
   width: 100%;
   -webkit-font-smoothing: antialiased;
   position: relative;
   background-color: var(--color-light);
}

/* Selection: zelfde geel als de voorleesmarkering, zwart op geel leest
   overal, ook op de donkere secties. */
::selection {
   background-color: var(--color-secondary);
   color: rgba(var(--color-black-rgb), 1);
   text-shadow: none;
}

::-moz-selection {
   background-color: var(--color-secondary);
   color: rgba(var(--color-black-rgb), 1);
   text-shadow: none;
}

/* General */
canvas, img, video {
   max-width: 100%;
   height: auto;
   box-sizing: border-box;
}

svg {
   max-width: none;
   height: auto;
   box-sizing: border-box;
}

audio, canvas, iframe, img, svg, video {
   vertical-align: middle;
}

/* ------------------------- Typography -------------------------------------------------- */

h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em {
   padding: 0;
   margin: 0;
   font-style: normal;
   font-weight: 400;
   letter-spacing: normal;
}

h1 {
   font-family: var(--font-primary);
   font-weight: 500;
   font-style: normal;
   font-size: calc(var(--title-size) * 1);
   line-height: 1.1;
   color: var(--color-dark);
}

@media screen and (max-width: 540px) {
   /* Compacter op telefoons: de paginatitel hoort op drie a vier regels
      te passen, niet op vijf of zes. */
   h1 {
      font-size: calc(var(--title-size) * 0.66);
      line-height: 1.05;
   }
}

h1.small {
   font-size: calc(var(--title-size) * 0.7);
}

h2 {
   font-family: var(--font-primary);
   font-weight: 400;
   font-style: normal;
   font-size: calc(var(--title-size) * 0.55);
   line-height: 1.15;
   color: var(--color-dark);
}

h2.big {
   font-size: calc(var(--title-size) * 0.65);
}

h2.strong {
   font-weight: 500;
}

h3 {
   font-family: var(--font-primary);
   font-weight: 500;
   font-style: normal;
   font-size: calc(var(--title-size) * 0.4);
   line-height: 1.2;
   color: var(--color-dark);
}

h3.small,
.pendra-content :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-primary);
   font-weight: 500;
   font-style: normal;
   font-size: calc(var(--title-size) * 0.325);
   line-height: 1.2;
   color: var(--color-dark); 
}

.pendra-content h1 {
   font-size: calc((var(--title-size) * 0.325) * 1.3);
}

.pendra-content h2 {
   font-size: calc((var(--title-size) * 0.325) * 1.1);
}

.pendra-content h3 {
   font-size: calc((var(--title-size) * 0.325) * 0.9);
}

@media screen and (max-width: 540px) {
   h3.small,
   .pendra-content :is(h1, h2, h3, h4, h5, h6) {
      font-size: calc(var(--title-size) * 0.45);
   }

   .pendra-content h1 {
      font-size: calc((var(--title-size) * 0.45) * 1.1);
   }
   
   .pendra-content h2 {
      font-size: calc((var(--title-size) * 0.45) * 1);
   }
   
   .pendra-content h3 {
      font-size: calc((var(--title-size) * 0.45) * 0.9);
   }
}

h4 {
   font-family: var(--font-primary);
   font-weight: 500;
   font-style: normal;
   font-size: max(1.2em, calc(var(--title-size) * 0.275));
   line-height: 1.2;
   color: var(--color-dark);
}

h4.colored,
.theme-dark h4.colored {
   color: var(--color-dark-light);
}

.theme-dark :is(h1, h2, h3, h4) {
   color: var(--color-light);
}


p {
   font-family: var(--font-primary);
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   line-height: 1.66;
   margin-bottom: 0;
   color: var(--color-text);
}

.pendra-content p {
   margin-bottom: 1em;
}

.pendra-content p:last-child {
   margin-bottom: 0;
} 

.theme-dark p {
   color: var(--color-text-light);
}

p.big {
   font-size: 1.15em;
   font-weight: 400;
}

p.small {
   font-size: 0.95em;
   font-weight: 400;
}

p.tiny {
   font-size: 0.75em;
   font-weight: 400;
}

@media screen and (max-width: 540px) {
   p.big {
      font-size: 1.05em;
      line-height: 1.5;
   }
}

a {
   color: var(--color-primary);
   text-decoration: none;
}

p a {
   position: relative;
   transition: color var(--animation-primary);
}

p a::after {
   content: "";
   width: 100%;
   height: 1px;
   background-color: var(--color-primary);
   bottom: -.1em;
   position: absolute;
   left: 0;
   transform: scaleX(0);
   transform-origin: right;
   transition: transform var(--animation-primary);
}

@media (hover: hover) {

   p a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
   }

}

strong {
   font-weight: 500;
   color: var(--color-dark);
}

.theme-dark strong {
   color: var(--color-light);
}

h1, h2, h3, h4 {
   font-family: var(--font-heading);
   font-weight: 500;
}

h1 em, h2 em, h3 em, h4 em, .times {
   font-family: var(--font-heading);
   font-weight: 500;
   font-style: italic;
   font-size: 1em;
   line-height: inherit;
}
}
}

em {
   font-style: italic;
}


/* ------------------------- Main Elements -------------------------------------------------- */

.section {
   display: block;
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
   position: relative;
   background-color: var(--color-light);
}

.section-wrap {
   display: block;
   padding-top: 0;
   padding-bottom: 0;
   position: relative;
}

.theme-dark.section,
.theme-nonav-dark.section,
.theme-dark.section-wrap,
.theme-nonav-dark.section-wrap {
   background-color: var(--color-dark);
}

.theme-dark-medium.section,
.theme-nonav-dark-medium.section,
.theme-dark-medium.section-wrap,
.theme-nonav-dark-medium.section-wrap {
   background-color: var(--color-dark-medium);
}

.theme-light-medium.section,
.theme-nonav-light-medium.section,
.theme-light-medium.section-wrap,
.theme-nonav-light-medium.section-wrap {
   background-color: var(--color-light-medium);
}

.theme-light.section,
.theme-nonav-light.section,
.theme-light.section-wrap,
.theme-nonav-light.section-wrap {
   background-color: var(--color-light);
}

.section.full-height {
   min-height: 100vh;
   display: flex;
   align-items: center;
}

.section.no-padding {
   padding-top: unset;
   padding-bottom: unset;
}

.container {
   margin: 0 auto;
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
   max-width: 100em;
}

.container.large {
   padding-left: var(--gap-padding);
   padding-right: var(--gap-padding);
}

.container.medium {
   padding-left: calc(var(--container-padding) * 1.75);
   padding-right: calc(var(--container-padding) * 1.75);
}

.container.small {
   padding-left: calc(var(--container-padding) * 2.5);
   padding-right: calc(var(--container-padding) * 2.5);
}

.container.no-padding {
   padding-left: unset;
   padding-right: unset;
}

.row {
   display: flex;
   flex-wrap: wrap;
   position: relative;
}

.row.no-flex {
   display: block;
}

.row.no-wrap {
   flex-wrap: nowrap;
}

.flex-col {
   display: block;
   width: 100%;
   order: 2;
   position: relative;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

img.overlay,
video.overlay {
   object-fit: cover;
}

svg {
   width: 100%;
}

.line {
   display: block;
   width: 100%;
   height: 1px;
   background-color: var(--color-border);
   margin-top: var(--gap-padding);
   margin-bottom: var(--gap-padding);
}

.theme-dark .line {
   background-color: var(--color-border-light);
}

.stripe {
   display: block;
   width: 100%;
   height: 1px;
   background-color: var(--color-border);
}

.theme-dark .stripe {
   background-color: var(--color-border-light);
}

.no-select {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

@media screen and (max-width: 540px) {

   .section.full-height {
      min-height: 100vh;
      min-height: calc(var(--vh, 1vh) * 100);
   }

   .container.medium,
   .container.small {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
   }
}

/* ------------------------- Main -------------------------------------------------- */

main {
   box-sizing: border-box;
   overflow: hidden;
   width: 100vw;
   position: fixed;
   height: 100%;
   background: var(--color-dark-medium);
   display: block;
}

.main-wrap {
   box-sizing: border-box;
   width: 100vw;
   will-change: transform;
   position: fixed;
   display: block;
}

main.touch {
   position: relative;
   height: auto;
}

main.touch .main-wrap {
   position: relative;
}

@media screen and (max-width: 1024px) {
   main {
      position: relative;
   }

   .main-wrap {
      position: relative;
   }
}

/* ------------------------- Buttons -------------------------------------------------- */

.btn-row {
   width: 100%;
   position: relative;
   display: flex;
   gap: 1em;
   flex-wrap: wrap;
}

.btn {
   cursor: pointer;
   border: 0;
   background: transparent;
   padding: 0;
   font-size: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   text-decoration: none;
   outline: 0;
   border-radius: 1000em;
   white-space: nowrap;
}

.btn-content {
   position: relative;
   height: 3.25em;
   transform: translateX(-3.25em) rotate(0.001deg);
   transition: transform var(--animation-primary);
}

.btn-fill {
   background: var(--color-light-medium);
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: var(--border-radius-small);
   top: 0;
   left: 0;
}

.theme-dark .btn-fill {
   background: var(--color-dark-medium);
}

/* Groene secties: het knopvlak wordt donkergroen i.p.v. --color-light-medium,
   dat te dicht bij de sectieachtergrond ligt. Kleine knoppen blijven transparant. */
:is(.theme-light, .theme-nonav-light, .theme-light-medium, .theme-nonav-light-medium) .btn:not(.btn-small) .btn-fill {
   background: var(--color-btn-on-green);
}

.btn-text {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 0 2em;
   font-size: 400;
   position: relative;
   color: var(--color-dark-medium);
   border-radius: var(--border-radius-small);
}

.btn-text span {
   transition: var(--animation-primary);
}

.theme-dark .btn-text {
   color: var(--color-light-medium);
}

.btn .arrow {
   /* Volgt de hoogte van .btn-content zodat cirkel en pil gelijk uitlijnen.
      Bewust op .btn gescoped: losse pijlen (scroll-knop, sliders) houden 3.75em. */
   width: 3.25em;
   height: 3.25em;
   transition: transform var(--animation-primary);
}

.btn .arrow.first {
   transform: scale(0) rotate(0.001deg);
   transform-origin: left;
}

.btn .arrow.second {
   position: absolute;
   z-index: 2;
   right: 0;
   transform: scale(1) rotate(0.001deg);
   transform-origin: right;
}

.btn .arrow.first .arrow-fill {
   background: var(--color-secondary);
   border: 0;
}

.btn .arrow.first .arrow-content {
   color: var(--color-light);
}

/* --- Hover--- */

@media (hover: hover) {

   .btn:hover .arrow .arrow-content {
      transform: rotate(-45deg);
   }

   .btn:hover .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }

   .btn:hover .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }

   .btn:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }

}

@media screen and (max-width: 540px) {
   .btn-text {
      padding: 0 1.5em;
   }

   .btn-text span {
      font-size: 0.9em;
   }
}


/* --- Small --- */

.btn-small .btn-content {
   height: 2em;
   transform: translateX(-2em) rotate(0.001deg);
}

.btn-small .btn-text {
   padding: 0 0.5em;
}

.btn-small .btn-fill {
   background: transparent;
}

.btn-small .btn-text span {
   font-size: 0.85em;
}

/* --- Hover--- */

.btn-small .arrow .arrow-content {
   transform: rotate(-45deg);
}

@media (hover: hover) {

   .btn-small:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }

}

/* --- Small Flipped --- */

.btn-small.flipped .arrow .arrow-content {
   transform: rotate(0deg);
}

.btn-small.flipped .arrow.first {
   transform: scale(1) rotate(0.001deg);
}

.btn-small.flipped .arrow.second {
   transform: scale(0) rotate(0.001deg);
}

@media (hover: hover) {

   .btn-small.flipped:hover .arrow.first {
      transform: scale(0) rotate(0.001deg);
   }

   .btn-small.flipped:hover .arrow.second {
      transform: scale(1) rotate(0.001deg);
   }

}

.btn-small.flipped .btn-content {
   transform: translateX(0em) rotate(0.001deg);
}

@media (hover: hover) {

   .btn-small.flipped:hover .btn-content {
      transform: translateX(-2em) rotate(0.001deg);
   }

}

.btn-small.flipped .arrow.first .arrow-fill {
   border: 1px solid var(--color-border);
   background: transparent;
}

.theme-dark .btn-small.flipped .arrow.first .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.btn-small.flipped.negative span,
.btn-small.flipped.positive span {
   padding-left: 0.5em;
   font-size: 0.85em;
   color: var(--color-light);
   opacity: 1;
   transition: var(--animation-primary);
}

.btn-small.flipped .arrow.second {
   right: unset;
   left: 0;
}

.btn-small.flipped.negative .arrow.second .arrow-fill {
   border: 0;
   background: var(--color-secondary);
}

.btn-small.flipped.positive .arrow.second .arrow-fill {
   border: 0;
   background: var(--color-alert-success);
}

.btn-small.flipped .arrow.first .arrow-content {
   color: var(--color-dark);
}

.theme-dark .btn-small.flipped .arrow.first .arrow-content {
   color: var(--color-light);
}

.btn-small.flipped .arrow.second .arrow-content {
   color: var(--color-light);
}

/* --- Link --- */

.btn-link .btn-content {
   transform: translateX(0) rotate(0.001deg);
}

.btn-link .btn-content .btn-text {
   padding: 0;
}

.btn-link .btn-content::after {
   content: "";
   bottom: 0;
   width: 100%;
   left: 0;
   height: 1px;
   background: var(--color-secondary);
   position: absolute;
   transform: rotate(0.001deg) scaleX(0);
   transition: transform var(--animation-primary);
   transform-origin: right;
}

@media (hover: hover) {

   .btn-link:hover .btn-content::after {
      transform: rotate(0.001deg) scaleX(1);
      transform-origin: left;
   }

   .btn-link:hover span {
      opacity: .66;
   }

}

/* --- Link Tiny --- */

.btn-tiny .btn-content {
   height: 1.5em;
}

.btn-tiny .btn-text span {
   font-size: 0.75em;
}

/* Button Arrow */

button.btn-arrow {
   border: 0;
   outline: 0;
   padding: 0;
   transform: rotate(0.001deg) scale(1);
   transition: var(--animation-primary);
}

button.btn-arrow[disabled] {
   transform: rotate(0.001deg) scale(0);
}

button.btn-arrow.btn-prev .arrow .arrow-content {
   transform: scaleX(-1) rotate(-45deg);
}

button.btn-arrow.btn-next .arrow .arrow-content {
   transform: rotate(-45deg);
}

/* --- Icon --- */

.btn-icon {
   height: 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.25em;
}

.btn-icon .icon {
   height: 1.5em;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn-icon .icon svg {
   width: 100%;
}

.btn-icon .icon svg path {
   stroke: var(--color-secondary);
   stroke-width: 1.25px;
}

.btn-icon span {
   color: var(--color-text);
   font-size: 0.85em;
   transition: var(--animation-primary);
}

@media (hover: hover) {

   .btn-icon:hover span {
      opacity: .6;
   }
}

/* --- Scroll --- */

.btn-scroll span {
   padding-right: 0.5em;
   font-size: 0.85em;
   color: var(--color-light);
   opacity: 1;
   transition: var(--animation-primary);
}

.btn-scroll .arrow-wrap {
   position: relative;
   transform: rotate(90deg);
}

.btn-scroll .arrow .arrow-content {
   transform: rotate(-45deg);
}

.btn-scroll:hover .arrow .arrow-content {
   transform: rotate(-45deg);
}

.btn-scroll .arrow.second .arrow-fill {
   background: var(--color-light);
}

.btn-scroll .arrow.second .arrow-content {
   color: var(--color-dark-medium);
}

@media (hover: hover) {

   .btn-scroll:hover span {
      opacity: 0.6;
   }

}


/* ------------------------- Social Icons -------------------------------------------------- */

.s-icon {
   position: relative;
   overflow: hidden;
   width: 1.75em;
   height: 1.75em;
   margin-right: .15em;
   margin-left: .15em;
   border-radius: 50%;
   background-color: var(--primary);
   transition: var(--animation-primary);
   display: block;
   float: left;
}

.s-icon .s-icon-wrap {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0.0001deg);
   width: 65%;
   transition: var(--animation-primary);
}

.s-icon .s-icon-wrap svg {
   display: block;
   width: 100%;
}

.s-icon .s-icon-wrap svg path {
   fill: var(--color-dark);
   transition: var(--animation-primary);
}

.s-icon:hover {
   background: var(--color-primary);
   cursor: pointer;
}

.s-icon:hover svg path {
   fill: var(--color-light);
}


/* ------------------------- Color Box -------------------------------------------------- */

.color-box {
   width: calc(33.333% - 1.333em);
   background: var(--primary-dark);
   font-weight: 500;
   color: var(--white);
   margin-right: 2em;
   margin-top: 2em;
}

.color-box:nth-child(3),
.color-box:nth-child(6) {
   margin-right: 0;
}

.color-box:before {
   content: "";
   display: block;
   padding-top: 40%;
}

.color-box .overlay {
   padding: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.color-box:nth-child(1) {
   background: var(--color-dark);
   color: var(--color-light);
}

.color-box:nth-child(2) {
   background: var(--color-dark-medium);
   color: var(--color-light);
}

.color-box:nth-child(3) {
   background: var(--color-dark-light);
   color: var(--color-light);
}

.color-box:nth-child(4) {
   background: var(--color-light);
   box-shadow: inset 0 0 0 1px var(--color-border);
}

.color-box:nth-child(5) {
   background: var(--color-light-medium);
   box-shadow: inset 0 0 0 1px var(--color-border);
}

.color-box:nth-child(6) {
   background: var(--color-light-dark);
   box-shadow: inset 0 0 0 1px var(--color-border);
}


@media screen and (max-width: 1000px) {
   .color-box {
      width: calc(50% - 1em);
   }

   .color-box:nth-child(3),
   .color-box:nth-child(6) {
      margin-right: 2em;
   }

   .color-box:nth-child(even) {
      margin-right: 0;
   }
}

@media screen and (max-width: 720px) {
   .color-box {
      width: 100%;
   }

   .color-box:nth-child(even),
   .color-box:nth-child(odd) {
      margin-right: 0;
   }
}

/* ------------------------- Form -------------------------------------------------- */

.form {
   width: 100%;
   display: block;
}

.pendra-form {
   width: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
   background: var(--color-dark-medium);
   border-radius: 0.5em;
   padding: calc(var(--gap-padding) + 0.25em) var(--gap-padding) var(--gap-padding) var(--gap-padding);
   gap: 1.25em;
}

.hidden-field,
.website-field {
   position: absolute;
   left: -9999px;
}

.pendra-form input,
.pendra-form textarea,
.pendra-form select {
   border: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

.pendra-form .form-col {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
}

.pendra-form .form-col :is(input, textarea) {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   width: 100%;
   padding: 0.75em 0 1em 0;
   border: 0;
   border-bottom: 1px solid var(--color-border-light);
   border-radius: 0;
   font-weight: 400;
   font-size: 0.9em;
   /* Let op het omgedraaide palet: --color-light is donkergroen. Wit was
      hier onleesbaar op de creme kaart. */
   color: var(--color-light);
   display: block;
   background: transparent;
}

.pendra-form .form-col > :is(input, textarea):focus {
   outline: 0;
   outline-width: 1px !important;
   outline-offset: 0px;
   border-radius: 0;
   border-bottom: 1px solid rgba(var(--color-light-rgb), 0.5);
}

.pendra-form .form-col :is(input, textarea)::placeholder {
   color: rgba(var(--color-light-rgb), 0.5);
   font-weight: 400;
}

.pendra-form .form-col input {
   line-height: 1em;
}

.pendra-form .form-col textarea {
   min-height: 10em;
   resize: vertical;
}

.pendra-form .form-col label {
   width: 100%;
   margin-bottom: 0;
   color: var(--color-light);
   font-size: .75em;
   font-weight: 400;
   line-height: 0.75em;
}

.pendra-form .form-col abbr {
   color: var(--color-alert-error);
   font-weight: 400;
   text-decoration: none;
   border-bottom: 0;
   font-size: 1.2em;
}

/* --- Upload --- */

.pendra-form .upload {
   width: 100%;
   border: 1px dashed rgba(var(--color-light-rgb), 0.2);
   border-radius: 0.25em;
   position: relative;
   display: flex;
   gap: 0.5em;
   padding: 0.75em;
   align-items: center;
   cursor: pointer;
}

.pendra-form .upload .file-icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   cursor: pointer;
}

.pendra-form .upload .file-icon svg {
   width: 100%;
}

.pendra-form .upload .file-icon svg path {
   stroke: var(--color-light);
   stroke-width: 1px;
}

.pendra-form .upload input {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   cursor: pointer;
   z-index: 2;
}

.pendra-form .upload span {
   color: var(--color-text-light);
   font-size: 0.75em;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   transition: var(--animation-primary);
}

.pendra-form .upload:hover span {
   opacity: 0.66;
} 

/* --- Submit Button --- */

.pendra-form .btn {
   margin-left: -0.5em;
}

.pendra-form .btn input {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   cursor: pointer;
}

.pendra-form .btn .btn-text {
   color: var(--color-light);
}

.pendra-form .btn .arrow .arrow-fill {
   background: var(--color-secondary);
}

.pendra-form .btn .arrow.border .arrow-content {
   color: var(--color-light);
}


/* --- Alert Options --- */

.alert {
   padding: .4em .5em .6em .5em;
   border: 0;
   background-color: var(--color-alert-error);
   text-align: center;
   border-radius: 0.25em;
   line-height: 1em;
}

.alert span {
   color: var(--color-light);
   font-size: .75em;
   font-weight: 500;
}

.alert-success {
   background-color: var(--color-alert-success);
}

/* --- Alert In Form Col --- */

.pendra-form .form-col .alert {
   padding: 0;
   text-align: left;
   margin-top: 0.25em;
   background: transparent;
}

.pendra-form .form-col .alert span {
   color: var(--color-alert-error);
   font-size: 0.7em;
}

/* --- Outofill reset --- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
   -webkit-text-fill-color: var(--color-light);
   -webkit-box-shadow: 0 0 0px 1000px var(--color-dark) inset;
   box-shadow: 0 0 0px 1000px var(--color-dark) inset;
   transition: background-color 5000s ease-in-out 0s;
}

input[type=radio] {
   -webkit-appearance: none;
}

@media screen and (max-width: 1024px){
   .pendra-form {
      padding: calc(var(--section-padding-medium) + 0.25em) var(--gap-padding) var(--section-padding-medium) var(--gap-padding);
      gap: 1.5em;
   }
}