/* =============================
   Root Variabelen
   (Custom Properties)
   Worden gebruikt als vaste waarden voor kleuren,
   spacing, typografie en animaties.
   Dit zorgt voor consistentie en makkelijker onderhoud.
============================= */
:root {
  --spacing-m: 1.875rem;                           /* custom property voor spacing */
  --spacing-s: calc(var(--spacing-m) / 2);         /* custom property voor spacing */


  --font-size-xxl: 4rem;                           /* custom property voor XXL font-size */
  --font-size-xl: 3rem;                            /* custom property voor XL font-size */
  --font-size-l: 2rem;                             /* custom property voor L font-size */
  --font-size-m: 1.5rem;                           /* custom property voor M font-size */
  --font-size-s: 1rem;                             /* custom property voor S font-size */


  --animation-duration: 0.3s;                      /* custom property voor animatie snelheid */
  --color-primary: #002646;
  --color-secondary: #ffffff;
  --color-accent: #d8b66a;
  --color-inactive: #E9E9E9;
  --color-inactive-dark: #6E6E6E;
}


/* =============================
   Algemene reset
   (Cascade: basisregels voor alle elementen)
============================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* =============================
   Body
============================= */
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-primary);
  background-color: var(--color-secondary);
  line-height: 1.6;
  padding: var(--spacing-m);
}


/* =============================
   Header component
   (Specificity: element + descendant selectors)
   (Cascade: hover overschrijft link kleur)
   (Custom Properties: kleuren)
============================= */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background-color: var(--color-primary);  /* custom property */


  img { height: 60px; }


  nav {
    ul {
      list-style: none;
      display: flex;
      gap: 30px;
      align-items: center;


      li {
        a {
          text-decoration: none;
          color: var(--color-secondary);  /* custom property */
          font-weight: 400;               /* style guide */
          transition: color var(--animation-duration);


          &:hover { color: var(--color-accent); }   /* cascade + custom */
        }



        input[type="search"] {
          padding: 6px 10px;
          border-radius: 6px;
          border: none;
        }
      }
    }
  }


  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;


    nav ul {
      flex-direction: column;
      gap: 10px;
    }
  }
}


/* =============================
   Catalog Formulier
============================= */
.catalog-form {
  max-width: 700px;
  margin: var(--spacing-m) auto;
  padding: var(--spacing-m);
  background-color: var(--color-inactive);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);


  h1 {
    text-align: center;
    font-size: var(--font-size-l);
    margin-bottom: var(--spacing-s);
    color: var(--color-primary);
  }


  p {
    text-align: center;
    font-size: var(--font-size-s);
    margin-bottom: var(--spacing-m);
  }


  form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);


    label {
      font-weight: 400;
      font-size: var(--font-size-s);
      color: var(--color-primary);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }


    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
      padding: 0.75rem 1rem;
      font-size: var(--font-size-s);
      border-radius: 8px;
      border: 1px solid var(--color-primary);
      outline: none;
      transition: border-color var(--animation-duration);
    }


    textarea { resize: vertical; min-height: 120px; }


    input:focus,
    select:focus,
    textarea:focus { border-color: var(--color-accent); }


    button[type="submit"] {
      margin-top: var(--spacing-s);
      padding: 0.9rem;
      font-size: var(--font-size-s);
      font-weight: 400;
      border: none;
      border-radius: 8px;
      background-color: var(--color-primary);
      color: var(--color-secondary);
      cursor: pointer;
      transition: background-color var(--animation-duration);


      &:hover {
        background-color: var(--color-accent);
        color: var(--color-primary);
      }
    }
  }
}


/* =============================
   Cards component
   (Specificity: class selectors)
   (Cascade: hover overschrijft basiskaart stijl)
   (Custom Properties: kleuren)
============================= */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;


  .card {
    border-radius: 12px;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--animation-duration) ease, box-shadow var(--animation-duration) ease;
    cursor: pointer;


    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 12px;
    }


    h3 {
      text-align: center;
      font-size: var(--font-size-s);                        /* style guide */
      margin-top: 8px;
    }


    &:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 12px 20px rgba(0,0,0,0.15);
    }
  }


  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;
  }
}


/* =============================
   Footer component
   (Specificity: class + element selectors)
   (Cascade: hover overschrijft link kleur)
   (Custom Properties: kleuren)
============================= */
footer {
  background-color: var(--color-primary);                  /* custom property */
  color: var(--color-secondary);                           /* custom property */
  padding: 40px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;


  section { flex: 1 1 200px; }


  h3 { margin-bottom: 10px; }


  ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;


    li {
      a {
        text-decoration: none;
        color: var(--color-secondary);                          /* custom property */
        font-weight: 400;                                        /* style guide */
        font-size: var(--font-size-s);


        &:hover { color: var(--color-accent); }                    /* cascade + custom property */
      }
    }
  }


  form {
    display: flex;
    flex-direction: column;
    gap: 10px;


    input[type="email"] {
      padding: 0.75rem 1rem;
      border: 1px solid var(--color-primary);
      border-radius: 8px;
      outline: none;
      font-size: var(--font-size-s);
      transition: border-color var(--animation-duration);


      &:focus { border-color: var(--color-accent); }
    }


    button[type="submit"] {
      padding: 0.8rem 1.2rem;
      background-color: var(--color-primary);
      color: var(--color-secondary);                   /* custom property */
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color var(--animation-duration);


      &:hover {
        background-color: var(--color-accent);
        color: var(--color-primary);
      }
    }
  }


  /* Social buttons component */
  .social-buttons {
    display: flex;
    gap: 8px;


    a {
      font-size: var(--font-size-s);
      font-weight: 400;                                /* style guide */
      color: var(--color-primary);                     /* custom property */
      background-color: var(--color-secondary);        /* custom property */
      padding: 8px 12px;
      border-radius: 6px;
      text-decoration: none;
      transition: opacity var(--animation-duration);


      &:hover { opacity: 0.8; }


      &.facebook, &.instagram, &.youtube {
        background-color: var(--color-secondary);
      }
    }
  }


  @media (max-width: 768px) {
    flex-direction: column;
    gap: 30px;
  }
}


/* =============================
   Nieuwsbrief component 
   (Nieuw component, FDND-style)
============================= */
section.newsletter {
  padding: var(--spacing-m);
  background-color: var(--color-inactive);              /* custom property */
  border-radius: 12px;
  max-width: 600px;
  margin: var(--spacing-m) auto;


  h3 {
    font-size: var(--font-size-m);
    margin-bottom: var(--spacing-s);
    color: var(--color-primary);
  }


  form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);


    label {
      font-size: var(--font-size-s);
      font-weight: 400;
      color: var(--color-primary);
      display: flex;
      flex-direction: column;
    }


    input[type="email"] {
      padding: 0.75rem 1rem;
      border: 1px solid var(--color-primary);
      border-radius: 8px;
      outline: none;
      transition: border-color var(--animation-duration);


      &:focus { border-color: var(--color-accent); }
    }


    button[type="submit"] {
      padding: 0.8rem 1.2rem;
      background-color: var(--color-primary);
      color: var(--color-secondary);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color var(--animation-duration);


      &:hover {
        background-color: var(--color-accent);
        color: var(--color-primary);
      }
    }
  }
}


/* =============================
   Typografie Media Queries
============================= */
h1 {
  @media (min-width: 900px) {
    font-size: var(--font-size-xxl);
  }
}