/* 2. Design Tokens */
:root {
  /* 2.1 Responsive Spacing */
  --space-3xs: clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
  --space-2xs: clamp(0.56rem, calc(0.52rem + 0.19vw), 0.69rem);
  --space-xs: clamp(0.88rem, calc(0.82rem + 0.29vw), 1.06rem);
  --space-s: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.38rem);
  --space-m: clamp(1.69rem, calc(1.57rem + 0.57vw), 2.06rem);
  --space-l: clamp(2.25rem, calc(2.1rem + 0.77vw), 2.75rem);
  --space-xl: clamp(3.38rem, calc(3.15rem + 1.15vw), 4.13rem);
  --space-2xl: clamp(4.5rem, calc(4.19rem + 1.53vw), 5.5rem);
  --space-3xl: clamp(6.75rem, calc(6.29rem + 2.3vw), 8.25rem);

  /* 2.2 Fluid One-up Pairs */
  --space-3xs-2xs: clamp(0.31rem, calc(0.2rem + 0.57vw), 0.69rem);
  --space-2xs-xs: clamp(0.56rem, calc(0.41rem + 0.77vw), 1.06rem);
  --space-xs-s: clamp(0.88rem, calc(0.72rem + 0.77vw), 1.38rem);
  --space-s-m: clamp(1.13rem, calc(0.84rem + 1.44vw), 2.06rem);
  --space-m-l: clamp(1.69rem, calc(1.36rem + 1.63vw), 2.75rem);
  --space-l-xl: clamp(2.25rem, calc(1.68rem + 2.87vw), 4.13rem);
  --space-xl-2xl: clamp(3.38rem, calc(2.72rem + 3.26vw), 5.5rem);
  --space-2xl-3xl: clamp(4.5rem, calc(3.35rem + 5.75vw), 8.25rem);

  /* 2.3 Responsive Typography */
  --step--2: clamp(0.69rem, calc(0.65rem + 0.23vw), 0.84rem);

  /* Step -2: 11.11px → 13.51px */
  --step--1: clamp(0.83rem, calc(0.74rem + 0.45vw), 1.13rem);

  /* Step -1: 13.33px → 18.00px */
  --step-0: clamp(1rem, calc(0.85rem + 0.77vw), 1.5rem);

  /* Step 0: 16.00px → 24.00px */
  --step-1: clamp(1.2rem, calc(0.95rem + 1.23vw), 2rem);

  /* Step 1: 19.20px → 31.99px */
  --step-2: clamp(1.44rem, calc(1.06rem + 1.88vw), 2.67rem);

  /* Step 2: 23.04px → 42.65px */
  --step-3: clamp(1.73rem, calc(1.17rem + 2.8vw), 3.55rem);

  /* Step 3: 27.65px → 56.85px */
  --step-4: clamp(2.07rem, calc(1.26rem + 4.08vw), 4.74rem);

  /* Step 4: 33.18px → 75.78px */
  --step-5: clamp(2.49rem, calc(1.32rem + 5.86vw), 6.31rem);

  /* Step 5: 39.81px → 101.01px */

  --font-style: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa,
    Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
    source-sans-pro, sans-serif;
  --font-not-bold: 300;
  --font-normal: 400;
  --font-bolder: 500;
  --font-bold: 700;
  --line-narrow: 1.2;
  --line-standard: 1.5;
  --line-spacious: 2;
  --main-header-width: 30ch;
  --sub-header-wdith: 20ch;
  --paragraph-width: 60ch;

  /* 2.4 Colors */

  --white: #fff;
  --black: #000;
  --color-core-primary: #c5e0f1;
  --color-core-complementary: #f7dcd5;
  --color-core-secondary: #e6506b;
  --color-core-tertiary: #8fad82;
  --color-core-quaternary: #7e3a2c;
  --color-bg-primary: #c5e0f1;
  --color-bg-secondary: #f7dcd5;
  --color-bg-tertiary: #4b4b4b;
  --color-bg-quaternary: #7c7c7c;
  --color-link: #28a745;
  --color-attention: #f00;
  --color-highlight: #ff8fa2;
  --color-shade-dark: #191919;
  --color-shade-dim: #202124;
  --color-shade-charcoal: #303136;
  --color-shade-gray: #585b63;
  --color-shade-graybright: #a5a7af;
  --color-shade-grayglare: #d2d3d7;
  --color-shade-light: #f8f9fa;
  --color-shade-lightbright: #fff;

  /* 2.5 grid stuff */
  --grid-max-width: 85.25rem;
  --grid-gutter: var(--space-xs-s,
      clamp(1.13rem, calc(0.63rem + 2.49vw), 2.75rem));
  --grid-columns: 12;
}

/* 3. Global Styles */

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


body,
h1,
h2,
p {
  margin: 0;
}

body {
  position: relative;
  font-family: var(--font-style);
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizespeed;
  display: flex;
  flex-direction: column;
  color: var(--white);
}

a {
  position: relative;
  color: currentcolor;
  text-decoration: none;
  font-weight: var(--font-bold);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
  }
}

body {
  background-image: linear-gradient(to bottom,
      var(--color-shade-light),
      25%,
      #c5e0f1 35%);
}

.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* 4. Layout Techniques (much inspiration comes from purchasing the book at 'every-layout.dev' Give it a try!) */

/* For defining `--flow-space` in combination with `class="flow"` as utility class */

/* 4.1 Grid */

/* Grids are to be placed within a grid container */
.wisp-grid-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.wisp-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(var(--grid-placement, auto-fill),
      minmax(var(--grid-min-item-size, 16rem), 1fr));
}

.wisp-grid[data-layout="12.5%"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(6rem, 12.5%, 7rem);
}

.wisp-grid[data-layout="25%"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 25%, 17rem);
}

.wisp-grid[data-layout="33%"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

.wisp-grid[data-layout="50%"] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}

/* true horizontal centering with vertical alignment */
.center {
  box-sizing: content-box;
  max-inline-size: 70ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* true vertical centering */

/* true intrinsic centering. Works best as direct child of a .hero */

/* wrapper */
.restrict {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 85rem);
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
  position: relative;
}

/* for clustered content such as tag clouds and menu items */

/* As name implies, awesome for stacking stuff. Such as forms or content blocks */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack>* {
  margin-block: 0;
}

.stack>*+* {
  margin-block-start: var(--space, 1.5rem);
}

/* as name implies, sidebar width is fixed so that the adjacent element takes up the rest of the available space. Useful for an image or figure */

.vibe {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bg-secondary);
}

.vibe-bg {
  padding: 1rem;
}

/* Switcher allows me to switch whether an element should be stacked horizontally or vertically. */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));

  --switcher-target-container-width: 100%;

  /* notice this is locally defined within the .switcher class */
}

.switcher>* {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width) - 100%) * 999);
}

.info .switcher>* {
  flex-grow: 0;
  flex-basis: auto;
}

@media (width <=525px) {
  .info .switcher>* {
    flex-basis: 100%;
  }
}

/* If required, I can optimalize further by specifying the number of elements before switching up */

/* .switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
flex-basis: 100%; 
} */

/* or adjust so that specific parts grows bigger than compared to its fellow childs */

/* .switcher > :nth-child(2) {
    flex-grow: 2;
} */

/* for stacking images on top of a layer */

/* This CSS rule allows the element to extend seamlessly across the entire width of the viewport */
.full-bleed {
  margin-left: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

.icon {
  height: 1em;
  height: 1cap;
  width: 1em;
  width: 1cap;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.with-icon .icon {
  margin-inline-end: var(--space, 0.5rem);
}

/* Index page Hero */

.header-img {
  width: 100%;
  height: auto;
  border: 0.5px solid var(--color-core-secondary);
  border-radius: 10px 20px;
}

.info h1,
.info h2,
.info p {
  max-width: 100%;
}

.info h2 {
  color: var(--color-core-quaternary);
}

.info img {
  border-radius: 20px 40px;
}

.meer-qr {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.meer-qr img {
  width: 300px;
}

/* nice for accessibility */

/* 5. Content Block Classes */

/* Basic styles for common content components. Can be adjusted based on the projects need */

/* 5.1 Button-basic */

/* 5.2 Header Items */

/* Use my noted standard header with navigation menu for below */

/* To be adjusted based on project needs */

/* 5.3 Footer Items */

footer {
  position: relative;
  padding: 1rem;
}

/* 5.4 Cards */

/* Use my noted standard form layout for below to work */

/* To be adjusted based on project needs */

.card {
  position: relative;
  border-radius: 15px;
  background-color: var(--color-bg-secondary);
  padding: var(--space-2xs);
  border: 1px solid var(--color-core-secondary);
  --flow-space: --space-xs-s;
}

.card img {
  border: 1px solid var(--color-shade-lightbright);
  border-radius: 15px;
  height: 400px;
  width: 100%;
  object-fit: cover;
  filter: brightness(75%);
}

.card-header {
  display: flex;
  flex-flow: column wrap;
  height: fill;
  --space: var(--space-s);
}

.card img:hover {
  transition: filter 0.5s ease;
  filter: brightness(100%);
}

.card p {
  word-wrap: break-word;
  color: var(--color-core-quaternary);
  font-size: 18px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-s);
  padding-left: 0px;
}

.image-gallery>li {
  flex: 1 1 auto;
  height: 400px;
  position: relative;
  list-style: none;
}

.image-gallery li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 5px;
  border: 1px solid var(--color-shade-lightbright);
}

/* .image-gallery::after {
  content: "";
  flex-grow: 999;
} */

/* 5.5 card-pills */

/* Can be modified into any other type of pill with utilities */

.card-pill {
  min-width: 15ch;
  margin: auto;
  text-align: center;
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--step--1);
  font-weight: var(--font-bold);
  color: white;
  border: 1px solid var(--color-core-secondary);
  border-radius: 50px;

  /* This gives the pill shape */
  transition: box-shadow 0.2s ease-in-out;
}

.card-pill:hover {
  box-shadow: 0 0 5px 2px var(--color-core-secondary);
}

/* 5.7 post rotation */

/* 5.8 wiki header */

/* 5.9 Wiki ToC */

/* 5.10 Wiki/Post definitions */

/* 5.11 contact page definitions */

/* 6. Utility Classes */

/* Stuff that does one thing, but does it extremely well */

/* Can be used in combination with other classes to create a desired effect */

/* Will be extended based on specific requirements. I've attempted to include as much as possible on composition level */

/* 6.1 Containers */

.wisp {
  /* equivalent to container */
  width: 100%;
}

/* 6.2 Specific padding and margin spacing */

.mtb-2xl {
  margin-block: var(--space-2xl);
}

.mt-s {
  margin-block-start: var(--space-s);
}

.mt-m {
  margin-block-start: var(--space-m);
}

.mt-l {
  margin-block-start: var(--space-l);
}

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

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

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

.font-step-3 {
  font-size: var(--step-3);
}

.staybelow {
  margin-top: auto;
}

.text-secondary {
  color: var(--color-core-secondary);
}

.text-tertiary {
  color: var(--color-core-tertiary);
}

.background-complementary {
  background-color: var(--color-core-secondary);
}

/* prijslijst */

.prijslijst img {
border: 1px solid var(--color-core-secondary);
max-width: 75%;
}

@media (max-width: 768px) {
  .prijslijst img {
    max-width: 100%;
    object-fit: cover;
  }
}