/* ==========================================================================
   Sving Holding B.V. — site stylesheet
   Plain CSS (previously compiled from Sass). Breakpoints:
     mobile-landscape 576px | tablet-portrait 768px | tablet 992px | desktop 1200px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Globals / custom properties
   -------------------------------------------------------------------------- */
:root {
  /* font sizes */
  --rem-font-size: clamp(1rem, 2.3vw, 1.5rem);
  --h1-font-size: 1.7rem;
  --menu-font-size: 1.3rem;
  /* font properties */
  font-family: Verdana, sans-serif;
  overflow-wrap: break-word; /* prevent text overflow */
  /* colours */
  --green: #165b61;
  --bgwhite: #f2ebe2;
  --color-text: black;
  color: var(--color-text);
  /* spacing */
  --link-underline-size: 0.2em;
  font-size: var(--rem-font-size);
  --page-x-padding: 1rem;
  --logo-nav-space: 2rem;
  color-scheme: light;
}

@media (min-width: 576px) {
  :root {
    --page-x-padding: 2rem;
  }
}

hr {
  border-color: var(--green);
}

*:focus {
  outline: var(--green) solid 3px;
}

/* --------------------------------------------------------------------------
   CSS remedies (subset of github.com/jensimmons/cssremedy)
   -------------------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none; }

h1, .page-title { font-size: var(--h1-font-size); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }
h1, .page-title { margin: 0.67em 0; }

pre { white-space: pre-wrap; }

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
audio:not([controls]) { display: none; }
picture { display: contents; }
source { display: none; }
img, svg, video, canvas { height: auto; }
audio { width: 100%; }

html { line-height: 1.5; }
h1, h2, h3, h4, h5, h6, .page-title { line-height: 1.25; }
caption, figcaption, label, legend { line-height: 1.375; }

:root:lang(en), :not(:lang(en)) > :lang(en) { quotes: '\201c' '\201d' '\2018' '\2019'; }
:root:lang(nl), :not(:lang(nl)) > :lang(nl) { quotes: '\2018' '\2019' '\201c' '\201d'; }

img { border-style: none; }
svg { overflow: hidden; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}
textarea { overflow: auto; }
form > ul > li > * { display: block; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
/* keep <footer> at the bottom of the page */
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-columns: var(--page-columns, 100%);
}

@media (min-width: 576px) {
  body {
    grid-template-areas:
      "header header"
      "main main"
      "footer footer";
    --page-columns: 50vw 1fr;
  }
}

@media (min-width: 992px) {
  body {
    --page-columns: 20vw 1fr;
  }
}

/* consistent padding in header and footer so that content aligns */
header, footer {
  padding: 1rem var(--page-x-padding);
}

header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: start;
}
header > a.logo-link { margin-bottom: 1rem; }
header > .header-links { width: 100%; }

@media (min-width: 576px) {
  header {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-columns: var(--page-columns, 100%);
  }
  header > a.logo-link {
    grid-column: 1/2;
    display: flex;
    align-items: start;
    margin-bottom: 0;
  }
  header > .header-links {
    grid-column: 2/3;
    width: initial;
    align-self: center;
    margin-left: var(--logo-nav-space);
  }
}

/* logo */
.logo-link img {
  width: 100px;
  height: auto;
}

.header-links {
  display: flex;
  align-items: start;
  gap: 1rem;
}
.header-links > .social-media-links { margin-left: auto; }
.header-links > .language-switcher { writing-mode: vertical-rl; }

@media (min-width: 992px) {
  .header-links { align-items: center; }
  .header-links > .social-media-links { margin-left: 0; }
  .header-links > .language-switcher {
    writing-mode: initial;
    margin-left: auto;
  }
}

.main-navigation > ul {
  line-height: 1.5;
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
}
.main-navigation > ul > li:before {
  content: "\200B";
  position: absolute;
}

@media (min-width: 576px) {
  .main-navigation > ul {
    line-height: 1.75;
  }
  .main-navigation > ul > li {
    line-height: 1;
    display: inline-block;
  }
  .main-navigation > ul > li:not(:last-child) {
    margin-right: 0.5em;
  }
}

main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: var(--page-columns, 100%);
}

.markdown-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: var(--page-columns, 100%);
  grid-column: 1/-1;
}

.markdown-content {
  grid-column: 1/-1;
  padding: 0 var(--page-x-padding);
}

@media (min-width: 992px) {
  .markdown-content {
    grid-column: 2/3;
    padding: 0;
    max-width: 70ch;
    margin: 0 var(--logo-nav-space);
  }
}

footer {
  grid-area: footer;
  display: flex;
}
footer p { margin: 0; }

@media (max-width: 576px) {
  footer { flex-direction: column; }
  footer > *:last-child { margin-top: 1rem; }
}

@media (min-width: 576px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

ul { padding-left: 1rem; }

@media (min-width: 768px) {
  ul { padding-left: 0; }
}

ul.horizontal-list {
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
}
ul.horizontal-list > li:before {
  content: "\200B";
  position: absolute;
}
ul.horizontal-list > li {
  line-height: 1;
  display: inline-block;
}
ul.horizontal-list > li:not(:last-child) {
  margin-right: 0.5em;
}

.icon-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* --------------------------------------------------------------------------
   Appearance
   -------------------------------------------------------------------------- */
body {
  background: var(--bgwhite);
  color: var(--color-text);
}

header, footer {
  background: var(--bgwhite);
  color: var(--color-text);
}

h1, h2, .page-title {
  font-weight: 600;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

a {
  color: var(--color-text);
  text-decoration-color: var(--green);
  text-decoration-thickness: var(--link-underline-size);
  text-decoration-skip-ink: none;
}
a:hover,
a:focus,
.header-link-font.active-link {
  text-decoration-color: var(--green);
}

.header-link-font {
  font-size: var(--menu-font-size);
  text-transform: uppercase;
}

.strong-link,
strong > a,
section.summary a {
  text-decoration-thickness: var(--link-underline-size);
  text-underline-offset: calc(var(--link-underline-size) / 2);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
/* email/phone links assembled from data-attributes to deter scrapers */
.email-link:after {
  content: attr(data-naam) "@" attr(data-domein) "." attr(data-ext);
}
.phone-link:after {
  content: attr(data-a) "-" attr(data-b);
}

li > p { margin: 0; }

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */
.index {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: var(--page-columns, 100%);
  grid-column: 1/-1;
}

@media (min-width: 576px) {
  section.summary ul {
    padding-inline-start: 0;
    list-style-type: none;
  }
  section.summary ul > li:before {
    content: "\200B";
    position: absolute;
  }
}

section.about {
  grid-column: 1/-1;
  display: grid;
  height: fit-content;
  grid-template-rows: 1fr max-content 1fr;
  grid-template-columns: var(--page-x-padding) 1fr 2fr;
}
section.about img {
  width: 100%;
  height: auto;
  grid-row: 1/-1;
  grid-column: 1/-1;
}
section.about > p {
  margin: 0;
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  padding: 1em;
  line-height: 1.75;
  background: var(--bgwhite);
  border-width: 0.2em;
  border-color: var(--green);
  border-style: none none none solid;
}
section.about > p > a {
  display: block; /* always place link on a new line */
}

@media (max-width: 576px) {
  section.about {
    grid-template-rows: 1fr repeat(2, max-content);
    grid-template-columns: 100%;
  }
  section.about img {
    object-fit: cover;
    height: 50vh;
    grid-row: 1 / span 2;
  }
  section.about > p {
    grid-row: 2 / span 2;
    grid-column: 1 / span 1;
    margin: 0 var(--page-x-padding) 1rem;
    box-shadow: 0 10px 6px -6px #777;
  }
}

/* --------------------------------------------------------------------------
   Legal documents (privacy policy, terms and conditions)
   -------------------------------------------------------------------------- */
.markdown-content h2 {
  margin-top: 1.5em;
}
.markdown-content ol,
.markdown-content ul {
  padding-left: 1.5rem;
}
.markdown-content li {
  margin-bottom: 0.4em;
}