/*!
We like light, clean and minimal pure html and CSS code.
We serve no cookies, trackers or ads.
Design Straatmeid.
*/

/*!
1. Base / Reset
*/
html {
font-size: 100%; /* ±16px, respecteert user settings */
}
html, body, div, span, h1, h2, h3, p, a, strong, em, blockquote,
img, ol, ul, li, fieldset, form, article, canvas, details,
footer, header, nav, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
article, footer, header, nav {
display: block;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}

/*!
2. Design tokens (CSS variables)
*/
:root {
  /* kleuren – betekenisvol */
  --bgc: #AE0042;
  --text: #d0c8b7;
  --hover: #480b1c;
  --first: #d0c8b7;
}

body[data-theme="functional"] {
  --bgc: #b79b7e;
  --text: #D01E50;
  --hover: #480b1c;
  --first: #D5093D;
}

/* spacing scale*/
:root {
  --space-xxs: clamp(0.0rem, 1vw, 0.0rem);
  --space-xs: clamp(0.25rem, 1vw, 0.5rem);
  --space-sm: clamp(0.5rem, 2vw, 1rem);
  --space-md: clamp(1rem, 4vw, 2rem);
  --space-lg: clamp(2rem, 6vw, 3rem);
  --space-xl: clamp(3rem, 10vw, 5rem);
  --space-xxl: clamp(5rem, 10vw, 10rem);
}

/*!
3. Layout (structure & spacing)
*/
body {
padding: var(--space-md);
font-family: "Inter Tight", sans-serif;
font-weight: 400;
background-color: var(--bgc);
background-image: url("/img/NNW_Background_1.svg");
background-repeat: no-repeat;
background-size: cover;
-webkit-font-smoothing: antialiased;
}
#page {
max-width: 1200px;
margin: 0 auto;
}
main {
overflow: hidden;
}
header {
margin-top: var(--space-sm);
margin-bottom: var(--space-xl);
overflow: hidden;
}
footer {
padding-top: var(--space-xxl);
padding-bottom: var(--space-xxl);
}

/*!
4. Navigation
*/
nav {
clear: both;
}
nav ul li {
float: left;
margin-right: var(--space-md);
font-size: 1em;
font-weight: 700;
letter-spacing: 0.1em;
}
nav ul li a {
display: block;
color: var(--first);
text-transform: uppercase;
}
nav li:hover > a {
color: var(--hover);
}

/*!
5. Typografie
*/
h1 {
margin-bottom: var(--space-lg);
font-size: 4.5em;
font-weight: 700;
line-height: 1;
color: var(--first);
}
h2 {
margin-bottom: var(--space-sm);
font-size: 2em;
font-weight: 700;
line-height: 1;
color: var(--text);
}
h3 {
margin-bottom: var(--space-sm);
font-size: 1.5em;
font-weight: 600;
line-height: 1;
color: var(--text);
}
p {
margin-bottom: var(--space-lg);
font-size: 1.25em;
line-height: 1.75;
letter-spacing: 0.02em;
color: var(--text);
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
small {
font-size: 0.75em;
}

/*!
6. Content-specific blocks
*/
#first {
margin-bottom: var(--space-lg);
font-size: 1.5em;
line-height: 1.75;
color: var(--first);
}
#event {
margin-bottom: var(--space-xxs);
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text);
}
#event_facts {
margin-bottom: var(--space-md);
font-size: 1.5em;
line-height: 1.25;
color: var(--text);
}

/*!
6a. Links (content & footer)
*/
a {
color: inherit;
text-decoration: none;
}
article p a,
footer p a {
padding-bottom: 0.0625rem; /* 1px */
color: var(--text);
border-bottom: 0.0625rem solid var(--text);
}
article p a:hover,
footer p a:hover {
color: var(--hover);
border-bottom-color: var(--hover);
}

/*!
7. Components
*/
#logo {
width: 10.9375rem; /* 175px */
margin-left: 0.625rem;
margin-bottom: var(--space-lg);
}
.button {
padding: var(--space-xs) var(--space-md);
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
color: var(--bgc);
background: var(--text);
cursor: pointer;
}
.button:hover {
background: var(--hover);
color: var(--text);
}

/*!
8. Lists
*/
ul.text_list {
font-size: 1.25em;
line-height: 1.75;
list-style: disc;
color: var(--text);
margin-left: var(--space-md);
}
li.text_list_steps {
margin-left: var(--space-md);
list-style: disc;
color: var(--text);
}

/*!
9. Media queries
*/

@media (max-width: 1225px) {
  body {
  background-image:none;
  }
  }
  
@media (max-width: 700px) {
header {
margin-bottom: var(--space-xl);
}
nav ul li {
font-size: 0.8em;
}
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.25em; }
p {
margin-bottom: var(--space-lg);
font-size: 1em;
}
#first {
font-size: 1.15em;
}
#event_facts {
font-size: 1.25em;
}
li.text_list_steps {
margin-left: var(--space-sm);
}
ul.text_list {
font-size: 1em
}
}

/*!
10. Utilities
*/
::selection {
background: var(--bgc2);
}