/* ==========================================================================
   1. GLOBAL & ROOT LAYOUT (The Sticky Footer Engine)
   ========================================================================== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-repeat: no-repeat;
  background-position: 100% 0;
  font-family: sans-serif; /* Added a clean fallback baseline */
}

/* CHANGED: main and #wrapper now both actively pass down the flex stretching power */
#wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* Ensures wrapper fills out viewport structural gaps */
}

main {
  flex: 1 0 auto; 
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   2. CONTAINERS & WRAPPERS
   ========================================================================== */
#boxcontainer {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fafafa;
  padding-top: 112px;
  padding-bottom: 0; /* CHANGED: Set to 0 so the background color touches the footer */
  flex: 1 0 auto; /* FIXED: Changed to auto so it forces expansion even on long content */
  height: auto;
  /* Cleaned up borders to keep file size lightweight */
  border-left: 0;
  border-right: 0;
}

.textcontainer, 
#imagecontainer1 {
  position: relative;
  width: 600px;
  height: auto;
  box-sizing: border-box;
}

.textcontainer { padding-bottom: 20px; }
#imagecontainer1 { padding-bottom: 24px; }

#imagecontainer2 {
  position: relative;
  width: 1000px;
  height: auto;
  box-sizing: border-box;
  padding-bottom: 24px;
}

/* ==========================================================================
   3. SLIDESHOW COMPONENTS
   ========================================================================== */
.slideshow-container {
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin-top: 0; /* CHANGED: Set to 0 to prevent margin-collapse spacing layout flaws */
  padding-top: 24px; /* OPTIONAL: Kept the spacing internal so layout remains identical */
  margin-bottom: 0;
  background: transparent;
}

.slide {
  position: relative;
}

.slide img {
  width: 100%;
  display: block;
}

.slidescaption {
  position: relative;
  margin: 4px auto 12px auto;
  width: 600px;
  height: auto;
  background-color: transparent;
  box-sizing: border-box;
  z-index: 5;
  text-align: center;
}

/* Navigation Arrows */
.boxnext, 
.boxprevious {
  position: absolute;
  top: 333px;
  transform: translateY(-50%);
  width: 56px;
  height: 120px;
  background-color: #434343;
  cursor: pointer;
  z-index: 10; /* Fixed: Added valid layer order so arrows stay clickable */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.boxnext {
  right: -56px;
  border: 3px solid #1c1c1c;
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.boxprevious {
  left: -56px;
  border: 3px solid #1c1c1c;
  border-right: 0;
  border-radius: 12px 0 0 12px;
}

.boxnext:hover, 
.boxprevious:hover {
  background-color: #1c1c1c;
}

/* Visited stays uniform to prevent breaking UI visibility states */
.boxnext:visited, 
.boxprevious:visited {
  background-color: #434343;
}

/* Pagination Dots */
.dots-container {
  position: relative;
  top: 100%;
  width: 100%;
  text-align: center;
  z-index: 10;
  margin: 0;
  background-color: transparent;
}

.dotlight, 
.dotdark {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease;
}

.dotlight {
  height: 12px;
  width: 12px;
  margin: 0 4px;
  border: 2px solid #fafafa;
}
.dotlight:hover { background-color: #1c1c1c; }
.dotlight.active { background-color: #fafafa; }

.dotdark {
  height: 8px;
  width: 8px;
  margin: 0 4px 24px 4px;
  border: 2px solid #434343;
}
.dotdark:hover { background-color: #1c1c1c; }
.dotdark.active { background-color: #7f7f7f; }

/* ==========================================================================
   4. NEOBRUTALIST INTERACTIVE ELEMENTS & FOOTER
   ========================================================================== */
#linkbox {
  display: inline-block;
  position: relative;
  width: 600px;
  height: 116px;
  background: transparent;
  transition: 0.3s;
  border: 0;
  margin: 36px 0;
}

.linkboxtext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 256px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightpink;
  border: 2px solid #1c1c1c;
  box-shadow: 3px 3px 0 0 #1c1c1c;
  border-radius: 0;
  transition: 0.3s;
}

.linkboxtext:hover {
  background-color: #ec98a5;
}

.divider {
border: none;
border-top: 1pt solid #b2b2b2;
margin: 40px 0;
width: 300px;
}

/* Consolidated from 3 duplicate definitions into 1 unified component */
.footer {
  flex-shrink: 0; 
  background-color: #404040; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0; 
  padding-top: 40px; 
  padding-bottom: 16px;
}

.footer-icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.footer-text {
  display: flex;
  align-items: center;
  text-align: center;
}