/* ===== VARIABELEN ===== */
:root {
    --primary-color: #e91010;
    --secondary-color: #fff;
    --text-color: #000;
    --bg-color: #fff;
    --footer-bg: #000;
    --footer-text: #fff;
    --border-color: #ddd;
    --nav-bg: #fff;
    --nav-text: var(--primary-color);
    --nav-hover-bg: var(--primary-color);
    --nav-hover-text: var(--secondary-color);
    --button-bg: #4CAF50;
    --button-hover-bg: #45a049;
    --font-main: Helvetica, Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;
    --border-width: 10px;
    --border-style: solid;
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    background: var(--bg-color);
    width: 100%;
}

/* ===== TYPOGRAFIE ===== */
h1, h2, h3, h4, h5, h6,
.MainNav li a,
.Header p.WebsiteTitle {
    font-family: var(--font-main);
}
h2.Black{    
      display: block;
      padding: 10px;
      line-height: 1.2;
      background-color: #000;
      margin-bottom: 20px;
      margin-top: 30px;
      color: #fff;
      float: left;
}
.Header p.WebsiteTitle {
    font-size: 35px;
    font-weight: bold;
    margin-top: 36px;
    line-height: 1.2;
}
.Header h1, .Header p {
    line-height: 1.2; 
    margin-bottom: 5px; 
    padding: 0;
}
.helft p,
.EenDerde p, .TweeDerde p, .DrieDerde p {
    line-height:1.2;
    margin-bottom: 20px;    
}
.helft ul,
.EenDerde ul, .TweeDerde ul, .DrieDerde ul
{
    margin-left: 20px;
}
ul.MainNav {
    margin-left: 0px;
}
.GreyArea {
    margin-top: 20px;
    border: 5px solid #ccc;
    background-color: #CCC;
}
.AlignRight,
.AlignRight p {
    text-align: right;
}

/* ===== TABLES, TOTALLY IN AWE OF TABLES ===== */
th, tr, td {
    text-align: top left;
    padding: 5px;
    line-height: 1.2;
}
th {
    background-color: #BBB;
}
tr.Grey {
    background-color: #DDD;
}
td {

}

/* ===== LAYOUT (Mobile-First) ===== */
.Header,
.Torso,
.Footer {
    width: 100%;
    float: left;
}

.Header img {
    border: 15px solid var(--secondary-color);
  display: block;
  float: left;
  vertical-align: middle;
  margin-right: 10px;
  height: 110px;
  margin-top: 10px;
  width: 140px;
}

.Torso img {
    width: 100%;
    height: auto;
    display: block;
}

/* Container & Kolommen (Standaard: 100% breedte op mobiel) */
.Margin,
.Container,
.EenVijfde,
.TweeVijfde,
.DrieVijfde,
.VierVijfde,
.VijfVijfde,
.EenDerde,
.TweeDerde,
.DrieDerde,
.Helft {
    display: block;
    float: left;
    margin: 0;
    width: 100%; /* Standaard: volle breedte op mobiel */
    padding: 0;
}

.Margin {
    margin: 0 1%;
    width: 98%;
}

.Divider {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    float: left;
    height: 30px;
    margin-bottom: 20px;
    border-bottom: 14px dotted #000;
}

/* Portfolio-specifieke stijlen */
.PortfolioIndex .EenDerde a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    float: left;
    margin-bottom: 10px;
}

.PortfolioIndex .EenDerde a:hover {
    text-decoration: none;
}

.PortfolioIndex .EenDerde a img {
    float: left;
}

.PortfolioIndex .EenDerde a span {
    display: none;
}

.PortfolioIndex .EenDerde a:hover span {
    display: block;
    width: 70%;
    float: left;
    line-height: 20px;
    border: 5px solid var(--secondary-color);
    background: var(--secondary-color);
    color: var(--text-color);
    margin-top: -90px;
}

/* ===== NAVIGATIE ===== */
ul.MainNav,
ul.MainNav li {
    display: block;
    padding: 0;
    list-style: none;
}

ul.MainNav li a {
    display: block;
    border: 2px solid var(--secondary-color);
    background-color: var(--nav-bg);
    color: var(--nav-text);
    font-size: 20px;
    padding: 5px;
    line-height: 20px;
    margin-bottom: 2px;
    text-decoration: none;
}

ul.MainNav li a:hover {
    color: var(--nav-hover-text);
    background: var(--nav-hover-bg);
}

/* Actieve pagina in navigatie */
#home ul.MainNav li a#homeButton,
#portfolio ul.MainNav li a#portfolioButton,
#over ul.MainNav li a#overButton,
#info ul.MainNav li a#infoButton,
#kennisdeling ul.MainNav li a#kennisdelingButton,
#winkel ul.MainNav li a#winkelButton,
#contact ul.MainNav li a#contactButton,
#artistStatment ul.MainNav li a#artistStatementButton,
#blog ul.MainNav li a#blogButton {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* ===== VERKOOPFORMULIER ===== */
.bestel-formulier {
    max-width: 600px;
    margin: 20px 0px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: var(--font-main);
}

.bestel-formulier label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.bestel-formulier input[type="text"],
.bestel-formulier input[type="email"],
.bestel-formulier input[type="tel"],
.bestel-formulier select,
.bestel-formulier textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-main);
}

.postcode-woonplaats {
    display: flex;
    gap: 10px;
}

.postcode-woonplaats div {
    flex: 1;
}

.bestel-formulier textarea {
    height: 100px;
}

.nieuwsbrief-checkbox,
.beveiligingscode {
    margin: 15px 0;
}

.beveiligingscode {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
}

.bestel-formulier button {
    background-color: var(--button-bg);
    color: var(--secondary-color);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    font-family: var(--font-main);
}

.bestel-formulier button:hover {
    background-color: var(--button-hover-bg);
}

/* ===== FOOTER ===== */
.Footer,
.Footer p {
    color: var(--footer-text);
    background: var(--footer-bg);
}

.Footer a,
.Footer ul li a,
.Footer a:hover {
    color: var(--secondary-color);
}

/* ===== MEDIA QUERIES ===== */
/* Tablets (600px en breder) */
@media (min-width: 600px) {
    body {
        font-size: 18px;
    }

    .Header {
        border-bottom: var(--border-width) var(--border-style) var(--primary-color);
    }

    .Torso {
        border-top: var(--border-width) var(--border-style) var(--secondary-color);
        border-bottom: var(--border-width) var(--border-style) var(--secondary-color);
    }

    .Footer {
        border-top: var(--border-width) var(--border-style) var(--primary-color);
    }

    /* Kolommen voor tablets */
    .EenDerde {
        width: 50%; /* 2 kolommen op tablets */
    }

    .TweeDerde,
    .DrieDerde,
    .VierVijfde,
    .VijfVijfde {
        width: 100%;
    }
}

/* Laptops (992px en breder) */
@media (min-width: 992px) {
    body {
        font-size: 20px;
    }

    /* Kolommen voor laptops */
    .EenVijfde {
        width: 20%;
    }

    .TweeVijfde {
        width: 40%;
    }

    .DrieVijfde {
        width: 60%;
    }

    .VierVijfde {
        width: 80%;
    }

    .VijfVijfde {
        width: 100%;
    }

    .EenDerde {
        width: 33.33%; /* 3 kolommen */
    }

    .TweeDerde {
        width: 66.66%;
    }

    .Helft {
        width: 50%;
    }

    /* Navigatie aanpassingen */
    ul.MainNav li a {
        padding: 15px 20px;
        margin-bottom: 10px;
    }
}

/* Grote desktops (1500px en breder) */
@media (min-width: 1500px) {
    .Container {
        max-width: 1500px;
        margin: 0 auto;
        float: none;
    }

    /* Vaste breedtes voor grote schermen */
    .EenVijfde {
        width: 300px;
    }

    .TweeVijfde {
        width: 600px;
    }

    .DrieVijfde {
        width: 900px;
    }

    .VierVijfde {
        width: 1200px;
    }

    .VijfVijfde {
        width: 1500px;
    }

    .EenDerde {
        width: 33.33%;
    }

    .TweeDerde {
        width: 66.66%;
    }

    .Helft {
        width: 50%;
    }
}