/* drie basisstijlregels om je te helpen */
:root {
    font-size: 100%;  /* zet je dit op 62.5%, dan is elke rem 10px waard, anders 16px */
    --kleur-achtergrond: #F1EFED;
    --kleur-tekst: #1F232E;
    --kleur-link: #0F6FFF;
    --standaard-witruimte: 1.75rem;
    --standaard-body-padding: .75rem;
    --standaard-lettergrootte: 1.2rem;
    --standaard-lijnhoogte: 1.7;
}

@media (min-width: 600px) {
    :root {
        --standaard-witruimte: 2rem;
        --standaard-body-padding: 2rem;
        --standaard-lijnhoogte: 1.85;
        --standaard-lettergrootte: 1.25rem;
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding: var(--standaard-body-padding);
    font-size: var(--standaard-lettergrootte);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);} 

    @media (min-width: 500px) {
    }

/* begin header styling */

h1 {
    font-size: calc(var(--standaard-lettergrootte) * 1.8);
    margin-bottom: var(--standaard-witruimte);}

h1 a {
    color: var(--kleur-tekst);
    text-decoration: none;}

header {
    border-bottom: 1px solid var(--kleur-tekst);
    padding-bottom: var(--standaard-witruimte);}

header nav {
    display: flex;
    gap: .75rem;
    justify-content: flex-start;}

nav a {
    text-decoration: none;
    color: var(--kleur-tekst);
    font-weight: 400;}

nav a.active {
    color: #ED495C;
    font-weight: 500;}

/* einde header styling */ /* begin main styling */

h1, main h2, main h3 {
    font-weight: 600;}

main h2  {
    font-size: calc(var(--standaard-lettergrootte) * 1.5);
    margin-bottom: calc(var(--standaard-witruimte) / 1.5);
    margin-top: calc(var(--standaard-witruimte) / 1.5);
    line-height: calc(var(--standaard-lijnhoogte) / 1.25);}

main h3 {
    font-size: calc(var(--standaard-lettergrootte) * 1.25);
    margin-bottom: calc(var(--standaard-witruimte) / 2);
    margin-top: calc(var(--standaard-witruimte) / 1.25);
    line-height: calc(var(--standaard-lijnhoogte) / 1.25);}

main p, main article time, main ul li {
    margin-bottom: calc(var(--standaard-witruimte) / 2);
    line-height: var(--standaard-lijnhoogte);}

main a {
    color: var(--kleur-link);}

main img {
    max-width: 100%;
    margin-bottom: var(--standaard-witruimte);}

main ul {
    margin-bottom: calc(var(--standaard-witruimte) / 1.5);
    list-style: disc;
    padding-left: calc(var(--standaard-witruimte) / 2);}

main ul li {
    margin-bottom: calc(var(--standaard-witruimte) / 4);
    line-height: var(--standaard-lijnhoogte);}   

/* einde main styling */ /* begin radar-section styling (pages/index.astro) */

.radar section article {
    border-bottom: 1px solid var(--kleur-tekst);
    padding-bottom: calc(var(--standaard-witruimte) * 2);
    position: relative;
    display: flex;
    flex-direction: column;}

.radar section div:first-child {
    border-bottom: 1px solid var(--kleur-tekst);
    padding-bottom: calc(var(--standaard-witruimte) / 2);}

.radar section article:last-child {
    border-bottom: none;
    padding-bottom: calc(var(--standaard-witruimte) * 2);
    margin-bottom: 0;}

.radar section article a.read-more, .recent-radar a, .full-radar a, .reader-older {
    color: var(--kleur-tekst);
    text-decoration: none;
    border: 1px solid var(--kleur-tekst);
    border-bottom: none;
    padding: calc(var(--standaard-witruimte) / 2);}

.radar section article a.read-more {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: auto;}

.recent-radar a, .full-radar a {
    margin-top: 2rem;
    display: inline-block;
    display: none;}

.full-line {
    border-top: 1px solid var(--kleur-tekst);
    width: calc(100% + 2rem);
    display: none;}

/* Container div voor de "Lees oudere berichten" link */
div.older-posts {
    position: relative;
    padding: 0;
    margin: 0;
    height: 8rem;
    border-top: 1px solid var(--kleur-tekst);
    grid-column: 2 / 3;
    grid-row: 2 / 3;}

/* Styling voor de "Lees oudere berichten" link */
.reader-older {
    position: absolute;
    right: 0;
    bottom: -1px;
    z-index: 1;}

.radar-single article{
    padding-bottom: var(--standaard-witruimte);}

@media (min-width: 1100px) {
    .radar section {
        display: grid;
        grid-template-columns: 1fr 2.5fr;
        min-height: 100vh;}
    
    .radar section > div:first-child {
        padding-right: var(--standaard-witruimte);}
    
    .radar section article {
        padding-left: var(--standaard-witruimte);
        height: 100%;
        border-left: 1px solid var(--kleur-tekst);}

    .radar section div:first-child {
        border-bottom: none;
        padding-bottom: 0;}
    
    .radar section > div:nth-child(2) {
        display: flex;
        flex-direction: column;}

    div.older-posts {
        border-left: 1px solid var(--kleur-tekst);}

    .recent-radar a, .full-radar a, .full-line {
        display: block;}
}

/* einde radar-section styling */ /* begin footer styling */

footer {
    border-top: 1px solid var(--kleur-tekst);
    padding-top: var(--standaard-witruimte);
    position: relative;}

footer nav {
    display: flex;
    gap: .5rem;
    justify-content: flex-start;
    position: absolute;
    left: 0;
    top: 2rem;}

footer p {
    margin-top: 3rem;}

/* einde footer styling */ /* begin replay-section styling (pages/replay/index.astro) */

input, textarea {
    border: 1px solid var(--kleur-tekst);
    padding: 0.5rem;
    font-size: var(--standaard-lettergrootte);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    width: 20rem;
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    border-radius: 4px;}


input::placeholder {
    color: var(--kleur-tekst);}

.replay div article a {
    color: var(--kleur-tekst);
    text-decoration: none;}

.replay main > div > div {
    margin-bottom: var(--standaard-witruimte);}

.replay p {
    margin-bottom: 0rem;}

.replay main > div:first-child {
    display: none;}

.replay main > div:nth-child(2) > div:nth-child(2) {
    display: none;}

@media (min-width: 1100px) {
    .replay main > div:first-child {
        display: block;}

    .replay main > div:nth-child(2) > div:first-child {
        display: none;}

    .replay main {
        display: grid;
        grid-template-columns: 2.5fr 1fr;}
        
    .replay main > div:first-child {
        grid-column: 2 / 3;
        padding-left: var(--standaard-witruimte);}
    
    .replay main > div:nth-child(2) {
        border-right: 1px solid var(--kleur-tekst);
        padding-right: var(--standaard-witruimte);
        grid-column: 1 / 2;
        grid-row: 1 / 2;}

    .replay main > div:nth-child(2) > div:nth-child(2) {
        display: block;}
}

/* einde replay-section styling */ /* begin tags-list gerelateerde styles */

ul.tags {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--standaard-witruimte) 0;
}

ul.tags li {
    display: inline-block;  
    margin-right: .5rem;
    line-height: calc(var(--standaard-lijnhoogte) / 1);
}

ul.tags-radar li {
    line-height: calc(var(--standaard-lijnhoogte) / 1.5);

}

.radar ul.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 .5rem 0;
    list-style: none;
    padding: 0;}

/* einde tags-list gerelateerde styles */ /* begin page-gerelateerde styles */

.page > div:last-child {
    display: none;}

@media (min-width: 1100px) {
    .page {
        display: grid;
        grid-template-columns: 2.5fr 1fr;}

    .page > div:first-child {
        border-right: 1px solid var(--kleur-tekst);
        padding-right: var(--standaard-witruimte);
        padding-bottom: var(--standaard-witruimte);}
        
    .page > div:last-child {
        display: block;
        padding-left: var(--standaard-witruimte);}
}


/* einde page-gerelateerde styles */ /* begin media queries */

@media (min-width: 700px) {
    footer nav {
        justify-content: flex-end;
        right: 0;
        left: auto;}

    footer p {margin-top: 0rem;}
}

@media (min-width: 1100px) {
    body {
        max-width: 1200px;
        margin: 0 auto;} 

    .radar-single article{
        max-width: 950px;}
}

/* einde media queries */

/* Verbeterde responsieve afbeeldingen voor het hele project */
img, .astro-image, [astro-image], [data-astro-cid-*] img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
}

.responsive-image {
  width: 100%;
  margin-bottom: var(--standaard-witruimte);}

.responsive-image img {
  display: block;
  width: 100%;
  height: auto;}

div.update-image img, 
div.update-featured-image img {
  width: 100%;
  height: auto;}

/* einde responsive afbeeldingen */

blockquote {
    margin: var(--standaard-witruimte) 0;
    font-style: italic;
    color: var(--kleur-tekst);}
  
  blockquote cite {
    display: block;
    margin-top: calc(var(--standaard-witruimte) / 1.5);
    font-style: normal;
    font-weight: 500;
    color: var(--kleur-tekst);
    font-size: var(--standaard-lettergrootte);
    line-height: calc(var(--standaard-lijnhoogte) / 1.5);}

  strong {
    font-weight: 500;}

  .double-margin {
    margin-top: 4rem;}

  .hide-on-mobile {
    display: none;}
  
  @media (min-width: 1100px) {
    .hide-on-mobile {
      display: block;}
  }