/* === BEGIN NORMALIZATION === */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.65;

  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* === END NORMALIZATION === */
:root {
  --color-primary: oklch(0.8751 0.0368 194.37); /* #BBDEDD, soft teal */
  --color-highlighting: oklch(0.954 0.0149 202.05);/* #E5F3F4, pale teal */
  --color-shadow: oklch(0.6378 0.059 195.77);/* #5F9797, deep teal */
  --color-white: oklch(1 0 0); /* #FFFFFF */
  --color-black: oklch(0.4506 0.0089 196.84); /* #505757, muted teal-grey */
  --color-accent: oklch(0.72 0.13 45); /* warm terracotta */
  --color-accent-soft: oklch(0.94 0.04 45); /* pale peach */
  --font-size-default: 16px;
  --font-size-smaller: 14px;
  --font-size-larger: 18px;
  font-size: var(--font-size-default);
}

body {
  font-family: "bilo", sans-serif;
  font-weight: 300;
  font-style: normal;

  background-color: oklch(from var(--color-primary) calc(l + 0.1) c h);

  display: flex;
  flex-direction: column;
  align-items: center;
}

main, header { width: min(100% - 2rem, 915px); }

/*
/* HEADER
*/
header {
  color: var(--color-black);

  #header__title {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem);
    padding-top: 2rem;
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent);
  }
}

/*
/* MAIN
*/
main {
  margin-top: 1.8rem;
  margin-bottom: 4rem;
}

li {
  i {
    height: 16px;
    width: 16px;
    margin-right: 0.5rem;
  }
}

/*
/* SECTION
*/
section:not(:first-child) {
  margin-top: 1.5rem;
}

section {
  h1 {
    margin-bottom: 1.0rem;
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  /*h1::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    transform: translateY(0.06em);
  }*/

  .section-card:not(:last-child) {
    margin-bottom: 1.5rem;
  }

  .section-card {
    border-radius: 1rem;
    border: 1px solid oklch(from var(--color-primary) l c h / 0.4);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.08);

    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;
    box-shadow: 0px 0px 0.7rem var(--color-shadow);
    overflow: hidden;
    justify-content: start;

    .section-card__content {
      background-color: var(--color-white);
      padding: 1.0rem;

      p {
        max-width: 90ch;
        padding: 0.5rem;
      }
    }

    .section-card__image {
      height: 100%;
      width: 100%;
    }
  }

  @media (min-width: 720px) {
    .section-card:has(.section-card__image) {
      grid-template-columns: 1fr 1fr;
    }

    .section-card:has(.section-card__image > iframe) {
      grid-template-columns: 1fr;
    }
  }
}

.credentials {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.credentials__title {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--color-shadow);
  margin-bottom: 0.75rem;
}

.credentials__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.credentials__list li {
  padding: 0.4rem 0.9rem;
  background-color: var(--color-highlighting);
  color: var(--color-black);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 400;
  border: 1px solid oklch(from var(--color-primary) l c h / 0.5);
}

section#contact {
  iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    display: block;
  }

  .section-card__image {
    width: 100%;
  }

  .section-card__content {
    border-bottom: 0.2rem solid var(--color-shadow);

    #contact__details {
      display: flex;

      span {
        padding: 0.5rem;

                i {
                  margin-right: 0.5rem;
                }
      }

      @media (max-width: 400px) and (orientation: portrait) {
        flex-direction: column;

        span {
          width: 100%;
        }
      }

      @media (min-width: 400px) and (orientation: portrait) {
        flex-direction: row;

        span {
          width: 50%;
        }
      }
    }
  }

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-evenly;
    padding: 0;

    li {
      list-style-type: none;
      padding-bottom: 0.5rem;
    }
  }
}

section#prices {
  p {
    padding: 0;
  }
}

table {
  border-collapse: collapse;
  margin: 0.5rem 0;
  width: 100%;
}

tr {
  line-height: 2.5rem;

  td:last-of-type {
    text-align: right;
  }
}

tr:not(:last-of-type) {
  td {
    border-bottom: 3px solid oklch(from var(--color-shadow) l c h / 0.3);
  }
}

section#about {
  div#mieke_img {
    float: right;

    @media (max-width: 400px) and (orientation: portrait) {
      margin-top: 15px;
      margin-bottom: 15px;
    }

        @media (min-width: 400px) {
          margin-left: 15px;
        }
  }
}