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

body, html {
  font-family: "Archivo";
  line-height: 1.6;
  color: var(--color-text-primary);
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS Safari safe area ondersteuning */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height voor betere mobiele ondersteuning */
}

main {
    min-height: 100vh;
    min-height: 100dvh;
    /* Zorg ervoor dat main de volledige viewport vult inclusief safe area */
    position: relative;
}

/* ===== CSS VARIABLES ===== */
:root {
    /* Font sizes - responsive met maximums (desktop) */
    --font-max-base: 35px;
    --font-scale-small: clamp(0px, 2.45vw, var(--font-max-base));                           /* 35px */
    --font-scale-medium: clamp(0px, 5.9vw, calc(var(--font-max-base) * 2.408));            /* 85px (5.9/2.45 = 2.408) */
    /*  --font-scale-large: clamp(0px, 10.25vw, calc(var(--font-max-base) * 4.204));  147px (10.25/2.45 = 4.204) */
    --font-scale-large: clamp(0px, 12.25vw, calc(var(--font-max-base) * 4.204));           /* 147px (10.25/2.45 = 4.204) */
    
    /* Font sizes - responsive met maximums (mobiel) */
    /* --font-max-base-mobile: 10.5px; */
    --font-max-base-mobile: 2.6vw;
    --font-scale-small-mobile: clamp(0px, 4vw, var(--font-max-base-mobile));
    --font-scale-medium-mobile: clamp(0px, 8vw, calc(var(--font-max-base-mobile) * 2.408));
    --font-scale-large-mobile: clamp(0px, 15vw, calc(var(--font-max-base-mobile) * 4.204));
    
    /* Special mobile text size for intro text */
    --font-scale-mobile-intro: clamp(0px, 4.2vw, 20px);
    
    /* Logo sizes */
    --logo-width-desktop: 16vw;
    --logo-width-mobile: 40vw;
    
    /* Layout spacing */
    --content-padding-desktop: 2.5vw 2vw;
    --content-padding-mobile: max(4vw, env(safe-area-inset-top)) max(4vw, env(safe-area-inset-right)) max(4vw, env(safe-area-inset-bottom)) max(4vw, env(safe-area-inset-left));
    --center-padding-top: 20vh;
    --mobile-margin-bottom-small: 4vw;
    --mobile-margin-bottom-medium: 6vw;
    --mobile-margin-bottom-large: 8vw;
    
    /* Background verhoudingen */
    --bg-1-width-desktop: 60%;
    --bg-2-width-desktop: 40%;
    --bg-1-width-mobile: 65%;
    --bg-2-width-mobile: 35%;
    
    /* Font variation settings */
    --font-width-default: 125;
    --font-width-hover: 120;
    --font-weight-default: 600;
    --font-transition-duration: 0.6s;
    --color-transition-duration: 0.3s;
    
    /* Kleurencombinaties */
    --color-blue: #a1c3cc;          /* Combie 1 */
    --color-sand: #f0e4dc;
    --color-brown: #8d8068;         /* Combie 2 */
    --color-orange: #f9bb82;
    --color-yellow: #fbef77;        /* Combie 3 */
    --color-purple: #a79bc6;
    --color-green: #285e42;         /* Combie 4 */
    --color-lightgreen: #b0c689;
    
    /* Text colors */
    --color-text-primary: #1d1d1b;
    --color-text-dark: #111;
    --color-text-black: black;
}

/* ===== TYPOGRAPHY ===== */
.archivo {
  font-family: "Archivo";
  font-optical-sizing: auto;
  font-weight: var(--font-weight-default);
  font-style: normal;
  font-variation-settings: "wdth" var(--font-width-default);
}

.inter {
  font-family: "Inter";
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.1em;
  font-style: normal;
  font-size: var(--font-scale-small);
}

/* ===== LAYOUT - GRID SYSTEM ===== */
.content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  color: var(--color-text-dark);
  padding: var(--content-padding-desktop);
}

.top-left {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
}

.top-right {
  grid-area: 1 / 3;
  align-self: start;
  justify-self: end;
  text-align: right;
}

.center {
  grid-area: 2 / 1 / 2 / 4;  /* Span over alle kolommen in de middelste rij */
  display: flex;
  align-items: flex-start;      /* Tekst naar boven in plaats van center */
  justify-content: center;
  position: relative;
  padding-top: var(--center-padding-top);          
  /* margin-left: 62.4vw;        
  transform: translateX(-50%); */
}

.bottom-left {
  grid-area: 3 / 1;
  align-self: end;
  justify-self: start;
}

.bottom-right {
  grid-area: 3 / 3;
  align-self: end;
  justify-self: end;
  text-align: right;
}

/* ===== BACKGROUND & ANIMATIONS ===== */

/* .bg {
  position: relative;
  height: 100%;
  width: 100%;
} */

.bg-1 {
  position: fixed;
  z-index: 10;
  width: var(--bg-1-width-desktop);
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
  left: 0;
  top: 0;
  overflow: hidden;
}

.bg-2 {
  position: fixed;
  z-index: 10;
  width: var(--bg-2-width-desktop);
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
  right: 0; 
  top: 0;
  overflow: hidden;
}

.bg__color-1 {
  background-color: var(--color-blue); /* Default kleur */
}

.bg__color-2 {
  background-color: var(--color-sand); /* Default kleur */
}

/* ===== COMPONENTS ===== */
/* Logo */
.logo {
    width: var(--logo-width-desktop);
}

.logo img {
    width: 100%;
    height: auto;
}

/* Welcome text */
.welkom {
  height: 100%;
  pointer-events: none;
  margin: 0 -4vw;
}

.wel, .kom {
  font-size: var(--font-scale-large);
  line-height: 1em;
  display: block;
}

.wel-element, .kom-element {
  /* position: absolute; */
  font-size: var(--font-scale-large);
  line-height: 1em;
  /* border: 1px solid white; */
}

.wel-element {
  left: 0;
  text-align: right;
  width: var(--bg-1-width-desktop);
  padding-right: 1%;
  transform: translateY(-100%);
}

.kom-element {
  text-align: left;
  width: var(--bg-2-width-desktop);
  right: 0;
  padding-left: 1%;
  transform: translateY(0%);
}

.kom {
  text-align: right;
}

.nostyle, .nostyle:hover, .nostyle:active, .nostyle:visited {
  color: currentColor;
  text-decoration: none;
}


/* Contact links */
.phone, .mail {
  font-size: var(--font-scale-medium);
  line-height: 0.9em;
  text-decoration: none;
  color: var(--color-text-primary);
  cursor: pointer;
  font-variation-settings: "wdth" var(--font-width-default), "wght" var(--font-weight-default);
  transition: font-variation-settings var(--font-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              color var(--color-transition-duration) ease;
}

.phone:hover, .mail:hover {
  color: var(--color-text-black);
  font-variation-settings: "wdth" var(--font-width-hover), "wght" var(--font-weight-default);
}

/* ===== UTILITIES ===== */
span {
  clear: both;
  display: block;
}

.hidden {
  visibility: hidden;
}

/* Desktop/Mobile visibility */
.mobile {
  display: none;
  max-width: var(--bg-1-width-mobile);
  text-wrap: balance;
}

.desktop {
  display: block;
}

.demo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: 100;
  opacity: 50%;
  filter: grayscale(100%);
}

/* ===== STATIC COLOR CLASSES ===== */
.blue { background-color: var(--color-blue); }
.sand { background-color: var(--color-sand); }
.brown { background-color: var(--color-brown); }
.orange { background-color: var(--color-orange); }
.yellow { background-color: var(--color-yellow); }
.purple { background-color: var(--color-purple); }
.green { background-color: var(--color-green); }
.lightgreen { background-color: var(--color-lightgreen); }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Achtergrond verhoudingen aanpassen naar 70/30 op mobiel */
  .bg-1 { width: var(--bg-1-width-mobile); }
  .bg-2 { width: var(--bg-2-width-mobile); }
  
  /* Grid layout aanpassingen */
  .content {
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr 1fr;
    padding: var(--content-padding-mobile);
    max-height: 130vw;
  }
  
  /* Mobiele font sizes toepassen */
  .inter { font-size: var(--font-scale-small-mobile); }
  .phone, .mail { font-size: var(--font-scale-medium-mobile); }
  .wel, .kom { font-size: var(--font-scale-large-mobile); }
  .wel-element, .kom-element { font-size: 11vw; } /* Vaste waarde voor mobiel */
  .wel-element {
    padding-right: 2%;
  }
  .kom-element {
    padding-left: 2%;
  }

  /* Mobiele wel/kom element widths om overeen te komen met achtergrond */
  .wel-element { width: var(--bg-1-width-mobile); }
  .kom-element { width: var(--bg-2-width-mobile); }
  
  /* Speciale styling voor .mobile tekst - groter en onafhankelijk van verhoudingen */
  .mobile {
    font-size: var(--font-scale-mobile-intro) !important;
    /* max-width: 100% !important; */
    /* width: 100% !important; */
  }
  
  /* Grid positioning aanpassingen */
  .top-left {
    grid-area: 2 / 1 / 2 / 3;  /* Span over beide kolommen */
    margin-bottom: 2vw;
    order: 2;
  }
  
  .top-right {
    grid-area: 1 / 1 / 1 / 3;  /* Span over beide kolommen */
    justify-self: start;
    text-align: left;
    margin-bottom: 4vw;
    order: 1;
  }
  
  .logo { width: var(--logo-width-mobile); }
  
  .center {
    position: static;
    grid-area: 3 / 1 / 3 / 3;  /* Span over beide kolommen */
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    height: auto;
    justify-content: flex-start;
    align-items: flex-start;
    order: 3;
    padding-top: 10vh;
    margin-bottom: 2vw;
  }
    
  /* .wel, .kom { text-align: left; } */
  
  .bottom-left {
    grid-area: 4 / 1;  /* Links in rij 4 */
    justify-self: start;
    text-align: left;
    margin-bottom: 1vw;
    order: 4;
  }
  
  .bottom-right {
    grid-area: 4 / 2;  /* Rechts in rij 4 */
    justify-self: end;  /* Rechts uitlijnen zoals desktop */
    text-align: right;  /* Tekst ook rechts uitlijnen */
    margin-bottom: 1vw;
    order: 5;
  }
  
  /* Mobile/Desktop visibility */
  .mobile {
    display: block;
  }
  
  .desktop {
    display: none;
  }
  
  /* Hover effects uitschakelen op mobiel */
  .phone:hover, .mail:hover {
    color: var(--color-text-primary);
    font-variation-settings: "wdth" var(--font-width-default), "wght" var(--font-weight-default);
  }
}