/* Global styles */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: "liga", "kern";
    background-color: #fff;
}

/* Fix jumping scrollbar when switching to long pages */

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

/* margin top */

.mt-xl {
    margin-top: 60px;
}

/* link */

a {
    color: #333333;
    text-decoration: underline;
    background-color: transparent;
}

a:active, a:hover {
    outline-width: 0;
}

a:hover, a:focus {
    color: #333333;
    text-decoration: underline;
}

/* horizontal rule */

hr {
    border: 0;
    border-top: 1px solid #DCDCDC;
}

.content .markdown hr {
    margin-left: 1.52rem;
    margin-right: 1.52rem;
}

/* Partial: Header */

.header a {
    text-decoration: none;
}

.header a:hover {
    text-decoration: underline;
}

.header h1.name {
    font-weight: 600;
    font-size: 2.1875rem;
    color: #333333;
    text-align: center;
}

.header ul.nav li {
    font-size: 1rem;
}

.header ul.nav {
    margin-bottom: 5rem;
}

/* Partial: Content */

.content h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #333333;
    margin-bottom: 1rem;
}

.content .meta {
    font-weight: 400;
    font-size: 1rem;
    color: #738491;
    margin-bottom: 10px;
}

.content .meta a {
    text-decoration: none;
}

.content .middot:before {
    margin: 0 3px;
    content: "·";
}

.content .caption {
    text-align: center;
    margin-top: 10px;
    color: #586069;
    font-size: 0.9rem;
}

.content .markdown {
    font-weight: 400;
    font-size: 1.125rem;
    color: #333333;
    line-height: 1.75rem;
}

.content .markdown li {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.content twitterwidget {
    margin: auto;
}

.content .meta, .content .markdown h1, .content .markdown h2, .content .markdown h3, .content .markdown h4, .content .markdown h5, .content .markdown h6, .content .markdown p, .content .markdown ul, .content .markdown ol, .content .markdown dl, .content .markdown blockquote, div.alert, form, table, .gist-file {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* blog post typography */

.content .blog-post-title {
    font-size: 2rem;
    line-height: 2.625rem;
}

.content .blog-post-content {
    font-size: 1.0625rem;
    line-height: 2rem;
}

/* centered, boxed blog post images */

.content .figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.content .markdown code, .content .markdown pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: #fff;
}

.content .markdown code {
    /* enclosed by single backtick (`) */
    color: #333;
    padding: .2em .4em;
    margin: 0;
    font-size: 1rem;
    background-color: rgba(27, 31, 35, .05);
    border-radius: 6px;
}

.content .markdown pre {
    /* Hugo specific: consider using the 'highlight' shortcode */
    display: block;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    line-height: 20px;
    white-space: pre;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.content .markdown pre code, .content .markdown pre output {
    /* enclosed by 4 backticks (````) */
    padding: 0;
    font-size: 0.75rem;
    line-height: 20px;
    background-color: #fff;
    border-radius: 0;
}

.content .markdown blockquote {
    padding: 0.5rem 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #7a7a7a;
    border-left: 0.25rem solid #e5e5e5;
}

.content .markdown blockquote p:last-child {
    margin-bottom: 0;
}

.content .markdown figure {
    background: #fff;
}

.content .post-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    margin-bottom: 1rem;
}

.content .meta-title {
    font-size: 1.5625rem;
    margin-bottom: 0.5rem;
}

.content .meta-title {
    font-size: 1.5625rem;
    font-weight: 600;
}

.content .meta-title a {
    text-decoration: none;
}

.content .meta-title a:hover {
    text-decoration: underline;
}

.content .meta-date {
    font-size: 1rem;
    color: #738491;
    margin-bottom: 2rem;
}

.content .navigation .icon {
    width: 16px;
    height: 16px;
}

/* Partial: Utterances Comments */

.comments {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100%;
}

/* Zorg dat de hoofdmenu-items relatieve positionering hebben */
.nav-item {
  position: relative;
}

/* < medium screens */

@media (max-width: 767.98px) {
    html {
        font-size: 0.9rem;
    }
    .content .meta, .content .markdown h1, .content .markdown h2, .content .markdown h3, .content .markdown h4, .content .markdown h5, .content .markdown h6, .content .markdown p, .content .markdown ul, .content .markdown ol, .content .markdown dl, .content .markdown blockquote, div.alert, form, table, .gist-file {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Toegevoegd voor het tonen van submenu's */
.header .nav-item.has-children:hover .submenu {
  display: block !important;
}

.header .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid #ccc;
  z-index: 1000;
  width: max-content;
}

/* Zorgt ervoor dat de submenu's verborgen zijn */
.submenu {
  display: none;
  position: absolute;
  top: 100%; /* Plaatst het submenu direct onder het hoofdmenu */
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #ffffff; /* Pas de achtergrondkleur aan indien nodig */
  border: 1px solid #ccc;
  z-index: 1000;
  width: max-content; /* Zorgt ervoor dat het submenu niet te breed is */
}

/* Maakt het submenu zichtbaar wanneer je over het hoofdmenu-item hovert */
.has-children:hover .submenu {
  display: block;
}

.has-children.open .submenu {
  display: block;
}

/* Stijlen voor submenu-items */
.submenu .nav-item {
  padding: 5px 10px;
}

.submenu .nav-link {
  color: #333; /* Pas de kleur van de submenu-items aan */
  text-decoration: none;
}