/* --- Styles for Page 1 / Slide 1: Intro --- */
.slide-p1s1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align items to the top */
  align-items: center; /* Center items horizontally (adjust if you want full width) */
  height: 100%; /* Fill the page height */
  padding: 2rem 1rem 2rem; /* Adjust padding as needed */
  box-sizing: border-box;
  overflow: hidden; /* Prevent slide content itself from overflowing */
}

/* Profile picture container - shouldn't grow or shrink */
.profile-photo-container {
  flex-shrink: 0;
  margin-bottom: 2rem; /* Space below picture */
  /* Add width/max-width if not already set */
  width: 100%;
  /* max-width: 400px; */
  text-align: center;
}

/* Container for vertical layout */
.p1s1-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Adjust cursor color if needed for contrast on red background */
.slide-p1s1 .cursor {
  background-color: #c5c8c6;
}

@media (max-width: 480px) {
  .slide-p1s1 {
    padding: 1rem 0.5rem 1rem;
  }
}

/* Page 2 / Slide 1: Split Text */
.slide-p2s1 {
  /* Override default centering if needed, or adjust container */
  align-items: stretch; /* Allow container to fill height */
  justify-content: center;
  padding: 2rem; /* Add padding inside the slide */
  box-sizing: border-box;
  background-color: #f0e68c; /* Example: Khaki background */
  color: #333; /* Darker text for readability */
}

.split-slide-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 800px; /* Max width for text readability */
  justify-content: center; /* Center content vertically */
}

.top-section,
.bottom-section {
  flex: 1; /* Make sections share space */
  display: flex;
  align-items: center; /* Center text vertically within section */
  justify-content: center;
  overflow: hidden; /* Prevent text overflow issues */
  padding: 1rem 0; /* Add vertical padding within sections */
}

.top-section p,
.bottom-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify;
  margin: 0;
}

.divider {
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.3); /* Style the line */
  width: 80%; /* Make line slightly shorter than container */
  margin: 1rem auto; /* Center line and add space */
}

/* Page 2 / Slide 2: Fullscreen Video */
.slide-p2s2 {
  padding: 0; /* Remove padding to allow video full bleed */
  overflow: hidden; /* Hide anything that might peek out */
  position: relative; /* For positioning overlays if needed */
  background-color: #58048d; /* Fallback background */
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative; /* Context for play button */
}

.fullscreen-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the entire area, cropping if needed */
  display: block; /* Remove extra space below video */
}

/* --- Styles for Page 3 / Slide 1: Terminal --- */
.slide-p3s1 {
  background-color: #069783de; /* Match the slider's teal background or choose another */
  display: flex; /* Use flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  padding: 1rem;
  box-sizing: border-box;
}

.red-btn {
  background-color: #ff5f56;
  border: 1px solid #e0443e;
}
.yellow-btn {
  background-color: #ffbd2e;
  border: 1px solid #dea123;
}
.green-btn {
  background-color: #27c93f;
  border: 1px solid #1aab29;
}



/* The actual profile photo - styles from .profile-photo */
.profile-photo {
  box-shadow: 0px 0px 75px rgba(255, 255, 255, 0.507);
  background-position: center;
  background-size: cover;
  width: 80%;
  border-top: 15px solid rgba(65, 65, 65, 0.789);
  border-left: 12px solid black;
  border-right: 15px solid black;
  border-bottom: 11px solid rgba(65, 65, 65, 0.789);
  height: 200px;
  border-radius: 10px 10px 1px 1px;
  object-fit: cover;
}

/* --- Responsive Adjustments --- */
/* Add media queries if needed to adjust size/borders on smaller screens */
@media (max-width: 768px) {
  .profile-photo-container {
    max-width: 400px;
  }
  .profile-photo {
    width: 90%; /* Adjust width */
    height: 320px; /* Adjust height */
    /* Adjust borders if they look too thick */
    border-top-width: 10px;
    border-left-width: 8px;
    border-right-width: 10px;
    border-bottom-width: 8px;
  }
  .profile-photo-screen-effect {
    border-top-width: 15px;
    border-bottom-width: 8px;
  }
}

@media (max-width: 480px) {
  .profile-photo {
    height: 200px; /* Further adjust height */
    border-top-width: 8px;
    border-left-width: 6px;
    border-right-width: 8px;
    border-bottom-width: 6px;
  }
  .profile-photo-screen-effect {
    border-top-width: 12px;
    border-bottom-width: 6px;
  }
}

/* ========================================
   Windows XP–style Dialog (look & feel)
   ======================================== */

/* 1) Overlay altijd initieel verbergen */
#xp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;     /* blijft hidden tot JS 'flex' zet */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: Tahoma, Arial, sans-serif;
}

/* 2) Hoofd-dialog window */
#xp-dialog {
  background: #F0EAD6;                 /* licht beige */
  border: 2px solid #0c62e4;           /* donkerblauwe rand */
  box-shadow:
    inset -1px -1px 0 #FFF,             /* licht randje top/links */
    inset  1px  1px 0 #7A7A7A,          /* donker randje bottom/rechts */
    4px 4px 12px rgba(0,0,0,0.3);       /* drop-shadow */
  width: 320px;
  border-radius: 0;                    /* scherpe hoeken */
  overflow: hidden;
}

/* 3) Title-bar */
#xp-dialog-header {
  background: #0c62e4;                  /* XP-blauw */
  color: #FFF;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

/* 3a) Titeltekst */
#xp-dialog-header .title-text {
  font-weight: normal;
}

/* 3b) Window-controls container */
#xp-dialog-header .window-controls {
  display: flex;
  gap: 2px;
}

.window-controls button {
  width: 16px;           /* vaste afmetingen */
  height: 14px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  /* zorg dat het hele vak gevuld wordt */
  cursor: pointer;
}

/* Let op: pad is relatief t.o.v. de CSS-file */
.btn-minimize {
  background-image: url("../assets/icons/min.png");
}
.btn-maximize {
  background-image: url("../assets/icons/max.png");
}
.btn-close {
  background-image: url("../assets/icons/close.png");
}

/* Active state */
.window-controls button:active {
  transform: translate(1px, 1px);
}

.xp-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url('../assets/icons/info.png') no-repeat center;
  background-size: contain;
}

/* 4) Body */
#xp-dialog-body {
  padding: 12px 10px;
  font-size: 12px;
  color: #000;
  line-height: 1.4;
  background: #ebe9d8;
}

/* 5) Footer (OK-button) */
#xp-dialog-footer {
  padding: 8px 10px;
  text-align: right;
  background: #ebe9d8;
}

/* 5a) XP-stijl knop */
#xp-ok-btn {
  font-size: 11px;
  padding: 2px 14px;
  background: linear-gradient(to bottom, #FFF 0%, #C8C6C4 100%);
  border-top:    2px solid #FFF;
  border-left:   2px solid #FFF;
  border-bottom: 2px solid #7A7A7A;
  border-right:  2px solid #7A7A7A;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
  cursor: pointer;
  user-select: none;
}
#xp-ok-btn:active {
  background: linear-gradient(to bottom, #C8C6C4 0%, #FFF 100%);
  border-top:    2px solid #7A7A7A;
  border-left:   2px solid #7A7A7A;
  border-bottom: 2px solid #FFF;
  border-right:  2px solid #FFF;
}