/* Global preferences */

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

@media (prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

:root {
  font-size: var(--font-root-size);
}



/* Styles */

/* Page layout */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background-main-color);
  color: var(--text-main-color);
  display: flex;
  flex-direction: column;
  font: normal normal var(--font-size)/var(--line-height) var(--main-font);
  font-variant-numeric: oldstyle-nums;
  margin-inline: auto;
  max-inline-size: 45rem;
  inline-size: 100%;
  min-block-size: 100vh; /* fallback height */
  min-block-size: 100svh; /* new small viewport height for modern browsers */
  padding-inline: var(--spacing-04);
}

body > * {
  background-color: var(--background-main-color);
}

body > footer,
body > header {
  padding-block: var(--spacing-04);
}

body > footer {
  margin-block-start: auto;
  padding-block-start: 0;

  &::before {
    background-color: var(--support-color);
    background-image: repeating-linear-gradient(135deg,
      var(--green-main-color-dark), var(--green-main-color-dark) 30px,
      var(--green-main-color) 0, var(--green-main-color) 60px);
    block-size: var(--spacing-14);
    content: "";
    display: block;
    inline-size: 100%;
    margin-block: var(--spacing-16);
  }
}

main {
  margin-block-start: var(--spacing-16);
}

section {
  + section {
    margin-block-start: var(--spacing-36);
  }

  article {
    margin-block-start: 0;
    padding-block: var(--spacing);
  
    h3 {
      margin-block-start: 0;
    }
  }
}

article {
  .illustratie,
  .pasfoto {
    /* box-shadow: 0 var(--spacing-stroke) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * 2) 0 var(--support-color); */
    background-color: var(--support-color);
    background-image: repeating-linear-gradient(135deg,
      var(--green-main-color-dark), var(--green-main-color-dark) 30px,
      var(--green-main-color) 0, var(--green-main-color) 60px);
    float: inline-end;
    inline-size: var(--spacing-48);
    margin: 0 0 var(--spacing-04) var(--spacing-04);
    padding-block-end: var(--spacing-04);
  }

  img {
    background-color: var(--background-main-color);
    border-bottom: var(--spacing-stroke) solid var(--background-main-color);
    inline-size: 100%;
  }

  footer {
    color: var(--support-color);
    font-family: var(--support-font);
    font-size: var(--font-size-05);
    font-style: italic;
    margin: var(--spacing) 0;
    text-align: end;
  }
}

/* Main block elements */
p {
  margin: 0;
}

p + p {
  margin-block-start: var(--spacing-04);
}

h1,
h2,
h3 {
  hyphens: auto;
  word-break: break-word;
}

h1 {
  font-size: var(--font-size-10);
  font-weight: 200;
  margin: var(--spacing-04) 0 0;
  padding: 0 0 var(--spacing-18);
  text-wrap: balance;
}

h2 {
  color: var(--text-support-color);
  font-size: var(--font-size-08);
  font-variant: small-caps oldstyle-nums;
  margin: var(--spacing-14) 0 var(--spacing-04);
  text-transform: lowercase;

  &:first-child {
    margin-block-start: 0;
  }
}

h3 {
  font-size: var(--font-size-07);
  margin: var(--spacing-07) 0 0;
}

h2 + h3 {
  margin-block-start: var(--spacing-04);
}

h4 {
  font-size: var(--font-size);
  margin-block: var(--spacing) 0;
}

@media all and (min-width: 27rem) {
  h1 {
    font-size: var(--font-size-22);
    margin-block-start: 0;
  }

  h2 {
    font-size: var(--font-size-12);
  }

  h3 {
    font-size: var(--font-size-08);
  }
}

.site-name {
  font-variant: small-caps oldstyle-nums;
  font-weight: 800;
  text-transform: lowercase;

  &::after {
    background-color: var(--support-color);
    block-size: var(--spacing-stroke);
    content: "";
    display: block;
    inline-size: var(--spacing-18);
    margin-block-start: var(--spacing-04);
  }

  .home & {
    margin-block: 0 var(--spacing-04);

    &::after {
      margin-block-start: 0;
    }
  }
}

.site-subject {
  font-weight: 200;

  i {
    font-family: var(--support-font);
    font-size: .75em;
    font-style: italic;
    font-variant: initial;
  }
}


blockquote,
.pull-quote {
  background-color: var(--support-color);
  background-image:
    linear-gradient(to right, var(--background-main-color) 0 33%, transparent 33% 67%, var(--background-main-color) 67%),
    linear-gradient(to bottom, transparent 0 var(--spacing-02), var(--background-main-color) var(--spacing-02) calc(100% - var(--spacing-02)), transparent calc(100% - var(--spacing-02))),
    repeating-linear-gradient(135deg,
    var(--green-main-color-dark), var(--green-main-color-dark) 30px,
    var(--green-main-color) 0, var(--green-main-color) 60px);
  color: var(--support-color);
  font-family: var(--support-font);
  font-size: var(--font-size-08);
  font-style: italic;
  margin: var(--spacing);
  padding: var(--spacing);
  text-align: center;
}

code,
kbd {
  font-family: var(--code-font);
  font-size: .85em;
}

pre {
  background-image: repeating-linear-gradient(135deg,
    var(--gray-support-color-white), var(--gray-support-color-white) 30px,
    var(--background-main-color) 0, var(--background-main-color) 60px);
  padding: var(--spacing-02);
}



/* Lists */

ul {
  margin: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06);
  padding: 0;
}

li::marker {
  color: var(--support-color);
}



/* Tables */
.table-container {
  margin-block-end:var(--spacing-10);
  overflow-x: auto;
}

h3 + .table-container {
  margin-block-start: var(--spacing-02);
}

table,
tr,
th,
td {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  text-align: start;
  vertical-align: top;
}

th[scope="row"] {
  min-inline-size: 9rem;
}

td,
th {
  border-block-end: 1px dotted var(--gray-support-color-light);
  padding: var(--spacing-01) var(--spacing-02);
}

th {
  border-block-end-style: solid;
}

td:first-child,
th:first-child {
  padding-inline-start: 0;
}

td:last-child,
th:last-child {
  padding-inline-end: 0;
}

.column-numeric {
  text-align: end;
}



/* Navigation */

nav {
  box-shadow: 0 calc(var(--spacing-stroke) * -1) 0 var(--nav-support-color) inset;
  font-variant: small-caps oldstyle-nums;
  font-weight: bold;
  padding-inline: var(--spacing-04);
  text-transform: lowercase;

  body > footer & {
    box-shadow: 0 var(--spacing-stroke) 0 var(--nav-support-color) inset;
  }

  ul {
    display: flex;

    header & {
      justify-content: end;
    }
  }

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

  li {
    border-inline: var(--spacing-stroke) solid var(--background-main-color);

    + li {
      border-inline-start: 0;
    }
  }

  a,
  a:link,
  a:visited {
    background-color: var(--nav-support-color);
    color: var(--nav-text-main-color);
    display: inline-block;
    padding-inline: var(--spacing-04);
    text-decoration: none;

    &:hover {
      box-shadow: 0 var(--spacing-stroke) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * 2) 0 var(--nav-support-color);

      body > footer & {
        box-shadow: 0 calc(var(--spacing-stroke) * -1) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * -2) 0 var(--nav-support-color);
      }
    }

    &:focus {
      box-shadow: 0 var(--spacing-stroke) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * 2) 0 var(--nav-contrast-color);
      background-color: var(--nav-contrast-color);
      color: var(--nav-text-contrast-color);
      outline: none;
      position: relative;
      z-index: 10;

      body > footer & {
        box-shadow: 0 calc(var(--spacing-stroke) * -1) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * -2) 0 var(--nav-contrast-color);
      }
    }

    &[aria-current="page"],
    &.active-trail {
      background-color: var(--nav-contrast-color);
      color: var(--nav-text-contrast-color);
      box-shadow: 0 var(--spacing-stroke) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * 2) 0 var(--nav-contrast-color);

      body > footer & {
        box-shadow: 0 calc(var(--spacing-stroke) * -1) 0 var(--background-main-color), 0 calc(var(--spacing-stroke) * -2) 0 var(--nav-contrast-color);
      }
    }
  }
} 

a:link {
  color: var(--blue-support-color);
}

a:visited {
  color: var(--purple-support-color);
}

a[aria-current="page"] {
  color: unset;
  text-decoration: none;
}

a:hover {
  color: var(--red-support-color);
}

a:focus {
  outline: var(--spacing-stroke) solid var(--nav-contrast-color);
  outline-offset: var(--spacing-stroke);
}

a:active {
  color: var(--red-support-color);
}

.more-link {
  background-image: linear-gradient(to top, 
    var(--background-main-color) .3em,
    var(--support-color) .3em calc(.3em + var(--spacing-stroke)),
    var(--background-main-color) calc(.3em + var(--spacing-stroke)));
  text-align: end;

  a {
    background-color: var(--background-main-color);
    border-inline: var(--spacing-stroke) solid var(--background-main-color);
    color: var(--support-color);
    display: inline-block;
    margin-inline-end: var(--spacing-18);
    padding-inline: var(--spacing-stroke);
    text-decoration: none;

    > span {
      box-shadow:
        0 var(--spacing-stroke) 0 var(--background-main-color),
        0 calc(var(--spacing-stroke) * 2) 0 var(--support-color);
      display: inline-block;
    }

    &:hover,
    &:focus {
      outline: 0;

      > span {
        outline: var(--spacing-stroke) solid var(--support-color);
        outline-offset: var(--spacing-stroke);
      }
    }
  }
  
  .view-laatste-blogs & {
    background-image: linear-gradient(to top, 
      var(--background-main-color) .3em,
      var(--contrast-color) .3em calc(.3em + var(--spacing-stroke)),
      var(--background-main-color) calc(.3em + var(--spacing-stroke)));

    a {
      > span {
        box-shadow:
          0 var(--spacing-stroke) 0 var(--background-main-color),
          0 calc(var(--spacing-stroke) * 2) 0 var(--nav-support-color);
      }

      &:hover,
      &:focus {
        > span {
          outline-color: var(--nav-support-color);
        }
      }
    }
  }
}



/* Generic classes AOI */

.small-caps {
  text-transform: lowercase;
  font-variant: small-caps oldstyle-nums;
}

.lush {
  font-family: var(--support-font);
  font-style: italic;
}

.clear {
  clear: both;
}

.visually-hidden,
nav h2 {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

[lang] {
  font-style: italic;
}




/* Blocks */

.view-laatste-blogs {
  h2 {
    background-color: var(--support-color);
    background-image: repeating-linear-gradient(135deg,
      var(--green-main-color-dark), var(--green-main-color-dark) 30px,
      var(--green-main-color) 0, var(--green-main-color) 60px);
    color: var(--background-main-color);
    font-weight: 800;
    letter-spacing: .05em;
    padding-inline-start: calc(var(--spacing-18) + var(--spacing-stroke));
    word-spacing: .1em;
  }

  h3 {
    color: var(--support-color);

    .date {
      color: var(--green-main-color-dark);
      font-family: var(--support-font);
      font-size: var(--font-size-06);
      font-style: italic;
      font-weight: normal;
    }
  }
}



/* Specific pages */

.home {
  h1 {
    font-size: var(--font-size-06);
  }

  .site-name {
      font-size: var(--font-size-22);
  }
}