/**
 * Theme Name: Nieuw Ontwerp Core
 Description: Nieuw Ontwerp Core Theme
 Version: 0.01
 Author: Jeroen van der Wiel @ Nieuw Ontwerp
*/

/* ** THE CORE THEME IS NOT MEANT TO BE ADJUSTED EVERY PROJECT, ADJUST THE THEME IN THE PROJECT CHILD THEME
* ** IF A CERTAIN BLOCK OR PATTERN IS REPEATED IN SEVERAL PROJECTS, IT WILL BE ADDED TO THE CORE.

/**
* This stylesheet contains styling that usually does not change between projects.
* :root variables are adjusted in the project theme's inc/setup.php file
*/
:root
{
  --title-color: var(--project-title-color);
  --text-color: var(--project-text-color);
  --background-color: var(--project-bg-color);
  --text-size: var(--project-text-size);
  --splash-color-1: var(--project-splash-color-1);
  --splash-color-2: var(--project-splash-color-2);
  --splash-color-3: var(--project-splash-color-3);
  --splash-color-4: var(--project-splash-color-4);
  --splash-color-5: var(--project-splash-color-5);
  --super-h1-size: clamp(5rem, calc(1rem + calc(calc(100dvh * var(--project-superh1-size)) - 1rem)), 200px);
  --h1-size: clamp(4rem, calc(1rem + calc(calc(100dvh * var(--project-h1-size)) - 1rem)), 150px);
  --h2-size: clamp(3rem, calc(1rem + calc(calc(100dvh * var(--project-h2-size)) - 1rem)), 100px);
  --h3-size: clamp(2rem, calc(1rem + calc(calc(100dvh * var(--project-h3-size)) - 1rem)), 50px);
  --h4-size: clamp(1rem, calc(1rem + calc(calc(100dvh * var(--project-h4-size)) - 1rem)), 50px);
  --h5-size: clamp(1rem, calc(1rem + calc(calc(100dvh * var(--project-h5-size)) - 1rem)), 50px);
  --h6-size: clamp(1rem, calc(1rem + calc(calc(100dvh * var(--project-h6-size))- 1rem)), 50px);
}

/**
* Removing unwanted margins and declaring box sizing
*/
*
{
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: 0;
}

/**
* GLOBAL STYLING
*/
body,html
{
  font-family: 'Arial', 'Arial', sans-serif;
  margin: 0;
  color: var(--text-color);
  font-size: var(--text-size);
  background-color: var(--background-color);
  line-height: 1.34em;
}

/**
* HEADING STYLING
*/
h1,h2,h3,h4,h5,h6
{
  color: var(--title-color);
  width: 25ch;
  line-height: 1em;
}

h1.super { font-size: var(--super-h1-size); }
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

/**
* CONTENT STYLING
*/
p
{
  width: 75ch;
  margin-block-end: 1.5em;

  a
  {
    color: var(--splash-color-1);
  }
}

p:last-child
{
  margin-block-end: 0px;
}

a.button
{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .5em 1em;
  font-size: .8em;
  text-decoration: none;

  > span.button-text
  {
    max-width: 10ch;
  }
}

a.btn-primary
{
  color: var(--background-color);
  background: var(--splash-color-1);
  border; 1px solid var(--splash-color-1);
}

/**
* SECTION STYLING
*/
section.text-block
{
  padding-left: clamp(1rem, 5dvw, 200px);
  padding-right: clamp(1rem, 5dvw, 200px);
}

section.archive-block
{
  > .archive-wrapper
  {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    > a
    {
      padding: 1rem;
      text-decoration: none;
    }
  }
}

section.cards-block
{
    > .cards-wrapper
    {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      > *
      {
        padding: 1rem;
        text-decoration: none;
      }
  }
}