/* -------------------------------------------------------
   1) GLOBAL STYLING
   (Shared by all pages)
--------------------------------------------------------*/
* {
    margin: 0; /* margin is gebruikt als whitespace rondom bijvoorbeeld een vakje */
    padding: 0;/* padding is gebruikt als opvulling binnen een vakje*/
    box-sizing: border-box; /* de hoogte en breedte van een vakje */
    font-family: 'Marcellus', serif;
  }
  
  body {
    background-color: #f9ddda; /*  kleur voor alle paginas hun achtergronden */
    color: #CBA66B; /* text color */
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  /* Basic footer styling */
  footer {
    text-align: center; /* wordt gebruikt om tekst uit te lijnen 
    in dit voorbeeld om deze in het midden uit te lijnen */
    margin-bottom: 2rem;
  }
  footer p {
    font-size: 1.1rem; 
    letter-spacing: 0.02em; /* wordt gebruikt om ruimte tussen letters toe te voegen.
    rem staat voor root em of ook De lettergrootte van het root-element  */
  }
  
  /* -------------------------------------------------------
     2) Datapunten & possibly Ekkifolio
  --------------------------------------------------------*/
  .brand-row {
    display: flex; /* display stelt in of een element wordt behandeld als een blok of een inline box */
    align-items: center; /* het lijnt uit wat displayed wordt*/
    gap: 1rem; /* gap is de ruimte tussen kolommen en rijen */
    margin-bottom: 1rem; 
  }
  
  .brand-row img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  
  .brand-row h1,
  .brand-row span {
    font-size: 2rem;
    letter-spacing: 0.2em;
    color: #516546;
  }
   ul {
   list-style-type:none;
   }
  
  /* -------------------------------------------------------
     3) EKKIFOLIO PAGE STYLES
     (header class="ekkifolio-header")
  --------------------------------------------------------*/
  .ekkifolio-header {
    margin: 1rem 2rem;
  }
  
  /* heading on left, woman  on right */
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .header-left h1 {
    line-height: 1.3;
    font-size: 2.4rem;
    color: #516546;
    margin-top: 0.5rem;
    letter-spacing: 0.1em;
  }
  
  /* Ekkifolio woman placeholder on the RIGHT */
  .woman-placeholder {
    width: 400px;
    height: 400px;
    border: 2px  #516546;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
  }
  .woman-placeholder p {
    color: #516546;
    font-weight: bold;
  }
  
  /* Ekkifolio main content area */
  .ekkifolio-main {
    margin-top: 1rem;
  }
  
  /* 4 card grid for Ekkifolio */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem;
  }
  
  /* general styling fo each card */
  .nav-card {
    position: relative;
    display: grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #f9ddda;
    background-color: #516546;
    border: 2px solid #516546;
    border-radius: 8px;
    min-height: 220px;
    cursor: pointer;
    transition: transform 0.2s;
  

}
/* datapunten card*/
    .nav-card:nth-child(1){
        grid-column-start: 1;
        grid-column-end: 2;
    }
/* aboutme card*/
    .nav-card:nth-child(2){
        grid-column-start: 2;
        grid-column-end: 3;  
    }
/* contact card*/
    .nav-card:nth-child(3){
        grid-column-start: 3;
        grid-column-end: 4;   
    }
/* draw card*/
    .nav-card:nth-child(4){
        grid-column-start: 4;
        grid-column-end: 5;   
    }
  .nav-card:hover {
    transform: translateY(-4px);
  }
  
  /* The plus sign in top-right corner */
  .plus {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1.4rem;
    color: #f9ddda;
  }
  
  /* Icon area in top half of card */
  .top-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  .card-label {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  
  /* -------------------------------------------------------
     4) DATAPUNTEN PAGE STYLES
     (header class="datapunten-header")
  --------------------------------------------------------*/
  .datapunten-header {
    margin: 1rem 2rem;
  }
  
  /* Wide green nav bar below brand row */
  .main-nav {
    background-color: #516546;
    border-radius: 8px;
    padding: 1rem 2rem;
    max-width: 900px;
    margin: 0 auto; 
  }
  
  .main-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    margin: 0;
  }
  
  .main-nav li a {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: color 0.2s;
  }
  .main-nav li a:hover {
    color: #FFFFFF; 
  }
  
  /* Datapunten main container (3 columns of Cursus) */
  .datapunten-main {
    margin: 2rem;
    text-align: center;
  }
  
  .cursus-container {
    display: inline-flex;
    gap: 3rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    justify-content: center;
    width: 100%;
  }
  
  .cursus-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .cursus-column h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
  }
  
  /*  link boxes for Cursussen */
  .download-link {
    display: inline-block;
    background-color: #516546;
    border: 2px solid #CBA66B;
    border-radius: 6px;
    padding: 1rem 2rem;
    margin: 0.75rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s, transform 0.2s;
  }
  .download-link:hover {
    background-color: #CBA66B;
    color: #FCE6EA;
    transform: translateY(-2px);
  }
  
  /* -------------------------------------------------------
     5) ABOUT PAGE STYLES
     (header class="datapunten-header" + about layout)
  --------------------------------------------------------*/
  
  /* The main container for the About page */
  .about-main {
    margin: 2rem;
  }
  
  /* Overall layout: left-col + right-col for the about content */
  .about-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }
  
  /* The left column for woman placeholder + skills, etc. */
  .left-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .woman-left-large {
    width: 300px;   
    height: 400px;  
    border: 2px  #516546;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .woman-left-large p {
    color: #516546;
    font-weight: bold;
  }
  
  .skills-box {
    background-color: #f9ddda;
    border: 2px solid #CBA66B;
    border-radius: 6px;
    padding: 1rem;
  }
  
  /* The right column for text & social icons */
  .right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .text-box {
    background-color: #516546;
    border: 2px solid #CBA66B;
    border-radius: 6px;
    padding: 1rem;
  }
  
  .text-box h2 {
    margin-bottom: 0.5rem;
  }
  
  /* Bullet lists inside text-boxes */
  .text-box ul {
    margin-top: 0.5rem;
    margin-left: 1.2rem;
    list-style: disc;
    color: #CBA66B;
  }
  
  /* Social links row */
  .social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  .social-link img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.2s;
  }
  .social-link:hover img {
    transform: scale(1.1);
  }
  
  /* -------------------------------------------------------
     6) CONTACT PAGE STYLES
     (header class="datapunten-header" + contact layout)
  --------------------------------------------------------*/
  
  /* Container for the Contact page main area */
  .contact-main {
    margin: 2rem;
  }
  
  .contact-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }
  
  .contact-left {
    width: 300px; 
    height: 400px;
    border: 2px #CBA66B;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
  }
  .contact-left p {
    color: #CBA66B;
    font-weight: bold;
  }
  
  .contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .contact-info {
    /* text-box style is reused; adjust if needed */
  }
  
  .contact-form label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-weight: bold;
  }
  
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    background-color: #f9ddda;
    border: 2px solid #CBA66B;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1rem;
    color: #516546;
    font-family: 'Marcellus', serif;
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: #f9ddda;
  }
  
  /* The "Send" button */
  .send-button {
    margin-top: 1rem;
    background-color: #f9ddda;
    border: 2px solid #CBA66B;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #CBA66B;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
  }
  .send-button:hover {
    background-color: #CBA66B;
    color: #FCE6EA;
    transform: translateY(-2px);
  }
  
  /* -------------------------------------------------------
     POPUP STYLES (NEW)
     for the "Details sent" message
  --------------------------------------------------------*/
  
  /* Dark overlay covering the entire screen, hidden by default */
  .popup-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* show with JavaScript */
    align-items: center; 
    justify-content: center;
  }
  
  /* Popup container with the same peach/gold color scheme */
  .popup {
    background-color: #F9CFB4;
    border: 2px solid #CBA66B;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    max-width: 300px;
    width: 90%;
  }
  
  /* Popup text */
  .popup p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #CBA66B;
  }
  
  /* Close button inside the popup */
  .close-popup {
    background-color: #FCE6EA;
    border: 2px solid #CBA66B;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #CBA66B;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
  }
  .close-popup:hover {
    background-color: #CBA66B;
    color: #FCE6EA;
    transform: translateY(-2px);
  }