/* styles.css */

/* Basic Adaptors for different devices */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #E8E9E9;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

@media (max-width: 768px) {
  .logo {
    max-width: 150px;
    width: 100%; /* allows it to scale down */
    height: auto;
    margin-left: 10px;
}
}
@media (max-width: 768px) {
  main {
    padding: 10px;
  }
  section {
    margin-bottom: 20px;
  }
  footer {
    padding: 10px 0;
    font-size: 16px;
  }
  /* Buttons */
  .button-link {
   padding: 8px 12px;
   font-size: clamp(18px, 4vw, 28px);
  }
}

img {
    max-width: 100%;  /* Crucial for responsive images */
    height: auto;
}
body {
  font-size: clamp(16px, 2vw, 24px);
}


/* Header styles */
header {
  background: ;
  color: #004152;
  padding: 20px 0;
  text-align: center;
}

nav a {
  margin: 0 15px;
  color: #E8E9E9;
}
nav a:focus,
nav a:hover {
  outline: 3px solid #E8E9E9;
}
/* Main & sections */
main {
  padding: 20px;
}
section {
  margin-bottom: 40px;
}
/* Footer styles */
footer {
  background: ;
  color: #CFCFCF;
  text-align: center;
  padding: 15px 0;
  font-size: 18px;
}
  /* BUTTONS STYLES */
.button-link {
  display: inline-flex; /* Use flex for centering */
  align-items: center;  /* Vertically center the text */
  justify-content: center; /* Horizontally center the text */
  padding: 10px 16px;
  background-color: #004152;
  color: #E8E9E9;
  text-decoration: none;
  border-radius: 30px;
  font-family: "Philosopher", serif;
  font-size: clamp(16px, 2vw, 24px);
  transition:
    background-color 0.3s,
    transform 0.2s;
  margin-right: 1px;
  min-width: 100px;
  height: 40px; /* Adjust height for better vertical centering */
  line-height: normal; /* Not needed when using flex, but just in case */
  box-sizing: border-box; /* Ensures padding doesn't overflow */
  text-align: center;
}

.button-link:hover,
.button-link:focus {
  background-color: #337B8F;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
  transform: translateY(-2px);
}

.button-link {
  margin-left: 5px; /* or adjust as needed */
}

a:not(.button-link) {
  color: #004152;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}
a:not(.button-link):hover,
a:not(.button-link):focus,
a:not(.button-link):active {
  color: #337B8F;
}

a.button-link svg {
  width: .75em;
  height: .75em;
  vertical-align: middle; /* aligns icon vertically with text */
}


/* Styles for headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Philosopher", serif;
  color: #4b206f;
  font-weight: bold;
}
h1 {
  font-size: clamp(35px, 5vw, 60px);
  color: #9F60D2;
}
h2 {
  font-size: clamp(30px, 5vw, 50px);
  color: #9F60D2;
  margin: 0 
}
h3 {
  font-size: clamp(20px, 3vw, 35px);
  color: #CFCFCF;
  background-color: #4b206f; 
  border-radius: 12px;       /* Adjust the radius for rounded corners */
  padding: 6px 12px;         /* Add some padding for better appearance */
  margin-bottom: 8px;
  display: inline;
}
h4 {
  font-size: clamp(20px, 3vw, 35px);
  color: #CFCFCF;
  background-color: #4b206f; 
  border-radius: 12px;       /* Adjust the radius for rounded corners */
  padding: 6px 12px;         /* Add some padding for better appearance */
  margin-bottom: 8px; 
}
h5 {
  font-size: clamp(20px, 3vw, 35px);
  color: #CFCFCF;
  background-color: #4b206f; 
  border-radius: 12px;       /* Adjust the radius for rounded corners */
  padding: 6px 12px;         /* Add some padding for better appearance */
  margin: 0 
}
h6 {
  font-size: clamp(18px, 2.5vw, 28px);
  color: #CFCFCF;
  background-color: #4b206f; 
  border-radius: 12px;       /* Adjust the radius for rounded corners */
  padding: 6px 12px;         /* Add some padding for better appearance */
  margin-bottom: 8px;
  display: inline;  
}


/* Style for the container wrapping logo and text */
.header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; /* slightly smaller gap for smaller screens */
  justify-content: center;
}
.header-link {
  display: block;
}
.header-link:focus {
  outline: 3px dashed #E8E9E9;
  outline-offset: 4px;
}
.header-top h1 {
  font-size: clamp(40px, 8vw, 100px);
  color: #004152;
}
.header-top h2 {
  font-size: clamp(30px, 6vw, 55px);
  color: #004152;
}
.logo {
  max-width: 550px; /* or suitable size */
  width: 100%;
  height: auto;
  display: block;
}


/*IMAGES*/
@media (prefers-color-scheme: dark) {
  .images {
    width: 100%;
    display: flex;
    justify-content: flex-start;  
    align-items: center;
    padding: 2%;
    margin: 0 auto;
    overflow: hidden; 
    position: relative;
  }

  .labyrinth {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 65%;
    height: auto;
    object-fit: contain;
    border: 7px solid #004152;
}
  .hand {
    max-width: 100%;
    height: auto; 
    object-fit: contain;
    display: block; 
    margin-left: 3%
}
}


/* Shift all lists and list items to the right by 20px */
ul, ol {
  Margin-right: 20px;
}


.icon i {
  font-size: clamp(12px, 6vw, 28px);
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 5px;
  color: #004152;
text-shadow:
    .5px .5px 0 #66CCCC,
    -.5px .5px 0 #66CCCC,
    .5px -.5px 0 #66CCCC,
    -.5px -.5px 0 #66CCCC;
  transition: font-size 0.3s ease;
}

.heart {
    max-width: 45px; /* adjust size as needed */
    height: auto;
    margin-right: 8px; /* space between image and text */
    Display: none;
}


  .heart-container img {
    display: inline-flex;        /* Flex container inline with text */
    align-items: flex-start;     /* align items at the top */
    margin-left: 0;              /* reset margin if needed */
    filter: drop-shadow(0 0 5px #66CCCC);
  }


/* Dark mode styles as default */
body {
  position: relative; /* Ensure positioning context for pseudo-element */
  margin: 0;
  padding: 0;
  color: #CFCFCF; /* Your text color */
  font-family: Arial, sans-serif;
background-color: #1b0f00;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%23120000' fill-opacity='0.74' fill-rule='evenodd'/%3E%3C/svg%3E");
}



.line {
  stroke: #004152;
  fill: none;
  stroke-width: 1;
  width: 85%; /* container width */
  height: auto;
  display: inline-block; /* remove inline spacing */
  overflow: visible; /* Important for SVG to stretch */
  margin-top: -5%;
  margin-bottom: -2%;
}
.decorative-line {
  display: flex; /* Important: Prevents SVG from being inline */
  justify-content: center;
  width: 100%;

}



/* FAQ STYLES*/
.collapsible {
  cursor: pointer;
  background-color: #9E9E9E;
  padding: 5px;
  border: 5px solid #ccc;
  color: #4b206f;
  position: relative; /* for chevron positioning */
  user-select: none; /* prevent text selection */
  font-weight: bold;
}
.collapsible:hover {
  background-color: #ccc; /* Your desired hover color */
}
.collapsible::after {
  content: "▶"; /* Chevron icon */
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease;
}
.collapsible.expanded::after {
  transform: translateY(-50%) rotate(90deg);
}
/* Content sections hidden by default */
.content {
  display: none;
  padding: 2px;
  border: 5px solid #ccc;
  border-top: none;
  color: #CFCFCF;
  margin-top: 10px;
  margin-bottom: -25px;
}
/* Style for questions */
.question {
  cursor: pointer;
  position: relative; /* for chevron placement */
  padding: 5px;
  margin: 0;
  list-style: none;
  margin-bottom: -5px;
}
h5.question {
  background-color: #004152;
}
h5.question:nth-of-type(odd) {
  background-color: #004152; /* dark color for odd questions */
}
h5.question:nth-of-type(even) {
  background-color: #4b206f; /* lighter color for even questions */
}
h5.question:nth-of-type(odd):hover {
  background-color: #337B8F; /* lighter or different color on hover for odd questions */
}

h5.question:nth-of-type(even):hover {
  background-color: #9F60D2; /* lighter or different color on hover for even questions */
}


.question::after {
  content: "▶"; /* Chevron icon */
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease;
}
.question.expanded::after {
  transform: translateY(-50%) rotate(90deg);
}
/* Answers hidden by default */
.answer {
  display: none;
  padding: 5px 5px;
  border-top: none;
  margin: 0;
  Background-color: #9E9E9E;
  color: #4b206f;
  margin-bottom: -5px;
  font-size: clamp(16px, 2vw, 24px);
}




/* LIGHT MODE ADJUSTMENTS */
body.light-mode {
  background-color: #CFCFCF;
  color: #000;
  background-image: none
}
body.light-mode::before {
  display: none; /* hide the pseudo-element to avoid any overlay or effects */
}
body.light-mode a:hover,
body.light-mode a:focus {
  background-color: #555;
  color: #000 !important;
  padding: 2px 4px;
  border-radius: 4px;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode a{
  color: #000;
  font-weight: bold;
  background-color: #e8e8e9; 

}
body.light-mode p{
  color: #000;
}
body.light-mode header,
body.light-mode footer {
  background-color: #CFCFCF;
  /* add this if needed: */
  color: #000; /* header text color */
  font-weight: bold;
}
body.light-mode .button-link {
  background-color: #000; 
  color: #CFCFCF;
  }
body.light-mode .button-link i {
  background-color: #000; 
  color: #CFCFCF;
}
body.light-mode .icon I {
  color: #000;
}
body.light-mode .phigh {
  background-color: #cfcfcf;  
}
body.light-mode h5.question {
  background-color: #e8e8e9;
}
body.light-mode h5.question:hover {
  background-color: #888; /* lighter or different color on hover for even questions */
}
body.light-mode .collapsible:hover {
  background-color: #888; /* Your desired hover color */
}


/* HEARTTALK: dark visible, light hidden */
.heart.color {
  display: in-line; /* Show only color heart by default */
}
.heart.bw {
  display: none;
}

body.light-mode .heart-container {
  /*This is the crucial part.  The container needs to be affected*/
}

body.light-mode .heart.color {
  display: none; /* Hide the color heart in light mode */
}

body.light-mode .heart.bw {
  display: inline; /* Show the black and white heart in light mode */
}



/* LOGO: dark visible, light hidden */
.logo.light {
  display: none;
}
body.light-mode .logo.dark {
  display: none;
}
body.light-mode .logo.light {
  display: inline;
}
body.light-mode .button-link {
  color: #CFCFCF; /* Keep button text white in light mode */
}
body.light-mode .button-link:hover,
body.light-mode .button-link:focus {
  background-color: #555;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
  transform: translateY(-2px);
}
body.light-mode .labyrinth{
  border: 7px solid #000;
}
body.light-mode #mode-toggle {
  color: #CFCFCF; /* black text in light mode */
  background-color: #000; /* optional, if you want the background to be white in light mode */
  border-color: #000; /* optional, if you want the border to match */
}
body.light-mode #mode-toggle:hover {
  background-color: #555;
}
body.light-mode a i {
  color: #000; /* black in light mode */
}

body.light-mode a:not(.button-link) {
  color: #000; /* black text in light mode */
}
body.light-mode a:not(.button-link):hover,
body.light-mode a:not(.button-link):focus,
body.light-mode a:not(.button-link):active {
  color: #555; /* hover color in light mode */
}

.light-mode .line {
  stroke: #000;
}

.light-mode .highlight {
  background-color: #e8e8e9; /* Choose your preferred background color */
  border-radius: 12px;       /* Adjust the radius for rounded corners */
  padding: 2px 8px;         /* Add some padding for better appearance */
  font-family: "Philosopher", serif;
  font-size: clamp(16px, 2vw, 30px);
  
}


#current-mode {
  display: none;
}
#mode-toggle {
  background-color: #004152; /* or your preferred color */
  border: 2px solid #004152; /* optional border */
  border-radius: 12px; /* optional rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* optional shadow */
  font-size: clamp(16px, 2vw, 20px);
  color: #E8E9E9;
}
#mode-toggle:hover {
  background-color: #337B8F;
}

/*SPECIAL FOR ABOUT PAGE*/
/*Style for Photo*/
.about-cont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10%;
  width: 100%;
}
.circular-image {
  width: 30vw;
  height: 40vw; 
  object-fit: cover; 
  border-radius: 50%; 
  display: block;
  margin: 0 auto;
}
.name-container {
  display: flex;
  flex-direction: column; /* stack items vertically */
  width: 50%; /* make the wrapper take full width of container if needed */
  text-align: left;
  margin-left: 11vw
}
.name-wrapper {
  margin-top: 5px; /* space between image and text */
  margin-left: 13vw
  width: 35%; /* make the wrapper take full width of container if needed */
  margin-bottom: -3vw; 
}
.highlight {
  background-color: #004152; /* Choose your preferred background color */
  border-radius: 12px;       /* Adjust the radius for rounded corners */
  padding: 2px 8px;         /* Add some padding for better appearance */
  font-family: "Philosopher", serif;
  font-size: clamp(16px, 2vw, 24px);
  font-size: 120%;
  
}
.phigh {
  background-color: #004152; /* Choose your preferred background color */
  
}



.pif a {
  color: #9F60D2;
}

.pif a:hover {
  color: #4b206f;
}

.pif {
  font-family: 'Philosopher', sans-serif;
  font-size: clamp(18px, 2.5vw, 28px);
  display: flex;
  flex-wrap: wrap;
  gap: 50px; /* Adjust the spacing between columns as needed */
  margin-bottom: 40px;
}
.pif ul {
  column-count: 2; /* Creates two columns */
  column-gap: 50px; /* Space between columns, adjust as needed */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.pif ul li {
  list-style-type: none;
  list-style-position: inside;
}




  .logos {
   max-width: 35%;
   height: auto;  
   display: inline-block; 
   margin-left: 5%
  }

.indented {
  text-indent: 2em; /* Adjust the value as needed */
}
.indented > * {
  text-indent: 0;
}