/* --- UNIVERSAL RULES --- */
* { box-sizing: border-box; }

body {
  /* Primary light blue background gradient */
  background: linear-gradient(135deg, #cce6ff, #99ccff); 
  color: #0033a0; /* Dark royal blue text for readability */
  min-height: 100vh; 
  font-family: sans-serif;
  text-align: center; 
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 600px;
  margin: 0 auto; 
}

/* --- COMPONENTS --- */
.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 10%; 
  object-fit: cover;
  margin-top: 20px;
  margin-bottom: 10px;
}

.link-button {
  display: block; 
  background-color: #0033a0; /* Royal blue button */
  color: white;
  text-decoration: none; 
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px; 
  font-weight: bold;
  transition: background-color 0.3s; 
}

.link-button:hover { background-color: #001f66; /* Darker royal blue on hover */ }

/* --- TEXT & TYPOGRAPHY --- */
h1 { font-size: 2em; margin-bottom: 5px; }
h2 { font-size: 1.2em; font-weight: normal; margin-top: 0; margin-bottom: 25px; color: #002266; }

.section-title {
  margin-top: 30px;
  border-bottom: 1px solid rgba(0, 51, 160, 0.3); /* Royal blue subtle border */
  padding-bottom: 10px;
}

.footer-heading { font-size: 1.5em; margin-top: 25px; margin-bottom: 25px; }

/* --- CONTENT BOXES --- */
.content-box {
  background-color: rgba(255, 255, 255, 0.65); /* Semi-transparent white box */
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 20px;
  text-align: left; 
}

.content-box h3 {
  margin-top: 0;
  color: #0033a0; 
  border-bottom: 1px solid rgba(0, 51, 160, 0.3);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.content-box h4 {
  font-style: italic;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 10px;
  color: #3366cc; /* Slightly lighter royal blue */
}

ul { margin: 0; padding-left: 20px; }
ul ul { margin-top: 5px; margin-bottom: 5px; list-style-type: circle; color: #0033a0; }
li { margin-bottom: 8px; line-height: 1.5; }

/* --- ACCESSIBILITY TOGGLE BUTTON --- */
.a11y-btn {
  position: fixed;      
  top: 20px;            
  right: 20px;          
  z-index: 1000;        
  background-color: rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #0033a0;
  border: 2px solid #0033a0;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  transition: all 0.3s;
}

.a11y-btn:hover { background-color: #0033a0; color: white; }

/* --- SWIPEABLE GALLERY --- */
.gallery-details summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
  color: white; 
  background-color: #0033a0; /* Royal blue */
  outline: none;
  text-align: center;
  padding: 15px;             
  border-radius: 8px;        
  list-style: none; 
  transition: background-color 0.3s;
}

.gallery-details summary:hover {
  background-color: #001f66; 
}
.gallery-details summary::-webkit-details-marker { display: none; }
.gallery-details summary::before { content: "▶ "; font-size: 0.8em; margin-right: 8px; display: inline-block;}
.gallery-details[open] summary::before { content: "▼ "; }

.gallery-instructions {
  text-align: center;
  font-size: 0.9em;
  color: #002266;
  margin-top: 15px;
  margin-bottom: 15px;
  font-style: italic;
}

.gallery-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; 
  gap: 15px;
  padding-bottom: 10px; 
  scrollbar-width: thin; 
  scrollbar-color: #0033a0 transparent;
}
.gallery-scroll::-webkit-scrollbar { height: 8px; }
.gallery-scroll::-webkit-scrollbar-thumb { background: #0033a0; border-radius: 4px; }

.gallery-img {
  scroll-snap-align: center; 
  flex: 0 0 100%; 
  width: 100%;        
  max-width: 100%; 
  height: 350px;      
  object-fit: cover;  
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: zoom-in;    
}

/* --- 18+ AGE GATE POPUP --- */
.age-gate-overlay {
  display: flex; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.90); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100000; 
  justify-content: center;
  align-items: center;
}

.age-gate-box {
  background-color: #e6f2ff; /* Very light blue/white */
  padding: 30px 25px;
  border-radius: 12px;
  border: 2px solid #0033a0;
  max-width: 90%;
  width: 400px;
  text-align: center;
  color: #0033a0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}

.age-gate-box h2 {
  color: #0033a0;
  margin-top: 0;
  border-bottom: 1px solid rgba(0, 51, 160, 0.3);
  padding-bottom: 10px;
}

/* Gray styling so the Proceed button is the main focus */
.age-gate-box .exit-button {
  background-color: #cccccc; 
  color: #000000;
  margin-bottom: 0;
}
.age-gate-box .exit-button:hover { background-color: #aaaaaa; }

/* --- LIGHTBOX (FULL SCREEN IMAGE) --- */
.lightbox {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999; 
  justify-content: center;
  align-items: center;
}

.lightbox.active {
  display: flex; 
}

.lightbox-img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 8px;
  object-fit: contain; 
}

.lightbox-close {
  position: fixed;
  top: 15px;
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 28px;
  line-height: 28px;
  cursor: pointer;
  z-index: 10000;
  transition: 0.3s;
}

.lightbox-close:hover { background: white; color: black; }

/* --- HIGH CONTRAST OVERRIDES --- */
/* Completely maintained from your original file */
body.high-contrast { background: #121212; color: #ffffff; }
body.high-contrast .content-box { background-color: #000000; border: 1px solid #444444; }
body.high-contrast h2, body.high-contrast .content-box h4, body.high-contrast ul ul { color: #cccccc; }
body.high-contrast .content-box h3 { color: #ffffff; border-bottom: 1px solid #ffffff; }
body.high-contrast .link-button, 
body.high-contrast .gallery-details summary { 
    background-color: #ffffff; 
    color: #000000; 
    border: 2px solid #ffffff; 
}

body.high-contrast .link-button:hover, 
body.high-contrast .gallery-details summary:hover { 
    background-color: #cccccc; 
}
body.high-contrast .gallery-scroll::-webkit-scrollbar-thumb { background: #ffffff; }
body.high-contrast .gallery-scroll { scrollbar-color: #ffffff transparent; }
body.high-contrast .profile-pic, 
body.high-contrast .gallery-img, 
body.high-contrast .lightbox-img { 
    filter: grayscale(100%); 
}
body.high-contrast .age-gate-box { background-color: #000000; border: 2px solid #ffffff; color: #ffffff; }
body.high-contrast .age-gate-box h2 { color: #ffffff; border-bottom: 1px solid #ffffff; }
body.high-contrast .age-gate-box .exit-button { background-color: #222222; color: #ffffff; border: 2px solid #ffffff; }
body.high-contrast .age-gate-box .exit-button:hover { background-color: #444444; }