/* General styling */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Abordage, serif;
  overflow-y: auto; /* Allow vertical scroll */
}


body {
  display: flex;
  flex-direction: column;
}

@font-face {
  font-family: 'Basalte';
  src: url('fonts/Basalte-Fond.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Abordage';
  src: url('fonts/Abordage-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


/* Fullscreen video styling */
#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the video covers the entire screen */
  z-index: 0; /* Place video at the very back */
}


#section-title {
  color: white;
  font-family: Basalte, sans-serif;
  margin: 0;
  font-style: italic;
  font-size: 3rem;
  letter-spacing: 4px;
  text-align: center;
  transform: rotate(-0.5deg); /* Tilt the text */
  transform-origin: top center; /* Keep the center as the pivot point */
  /* Slightly adjust the position to align better */
  position: relative;
  top: 5px; /* Fine-tune the alignment vertically */
  text-shadow: 2px 2px 8px rgb(204, 0, 255); /* Soft black shadow */
}




/* Overlay styling */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  pointer-events: none; /* Allow mouse events to pass through */
  z-index: 1; /* Ensure overlay is above the video but below content and toolbar */
}

/* White background when mouse is idle */
#overlay.white-background {
  background-color: rgba(255, 255, 255, 1); /* Full white overlay */
}

/* Circle around cursor */
#clear-circle {
  position: absolute;
  width: 250px; /* Diameter of the clear circle */
  height: 250px;
  border-radius: 50%; /* Make it circular */
  background-color: transparent; /* Clear area */
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 1); /* Extend overlay outside the circle */
  pointer-events: none; /* Prevent interaction with the circle */
}

/* Toolbar styling */
.toolbar {
  width: 100%;
  display: flex;
  justify-content: space-between; /* Align items on opposite sides */
  align-items: center; /* Vertically center items */
  padding: 10px;
  position: fixed;
  top: 0;
  z-index: 4; /* Ensure toolbar is above overlay and content */
}

.toolbar-left,
.toolbar-right {
  display: flex; /* Flex container for icons on each side */
}

.toolbar-left button,
.toolbar-right button {
  background-color: transparent; /* Transparent background for buttons */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor on hover */
  /*box-shadow: 0 2px 8px rgba(0,0,0,0.18); /* Soft shadow */
  box-shadow: 2px 2px 8px rgb(204, 0, 255); /* Soft pink shadow */
  border-radius: 50%;                      /* Optional: round buttons */
  transition: box-shadow 0.2s;
}

.toolbar-left button img,
.toolbar-right button img {
  width: 30px; /* Adjust icon size */
  height: auto; /* Maintain aspect ratio */
}

.toolbar-left button:hover img,
.toolbar-right button:hover img {
  transform: scale(1.1); /* Scale image on hover */
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  transition: transform 0.2s ease-in-out; /* Smooth scaling effect */
}

.toolbar-left button span,
.toolbar-right button span {
  font-size: 14px;
  color: black;
  margin-left: 10px;
}

.toolbar-right {
  display: flex; /* Flex container for right-aligned icons */
  gap: 15px; /* Add space between icons */
}

.toolbar-right button {
  background-color: transparent; /* Transparent background for buttons */
  border: none; /* Remove border */
  cursor: pointer; /* Pointer cursor on hover */
}


.toolbar-right button:last-child {
  margin-right: 0em; /* Add extra space to the rightmost button */
}

/* Content section styling */
.fixed-banner {
    min-height: 50px;
    position: fixed;
    top: 70px; /* Just below the toolbar */
    width: 100%;
    background-color: rgb(255, 51, 0);
    box-shadow: 1px 1px 1px rgb(204, 0, 255, 0.5); /* Soft pink shadow */
    z-index: 3;
    padding: 10px 0;
    box-sizing: border-box;
    transform: rotate(-2deg); /* Tilt the banner */
    transform-origin: top center; /* Keep the top-center as the pivot point */
    left: 0;
    /* Slightly adjust the position to compensate for the rotation */
    margin-top: 10px;
    /* Scale the banner slightly to fill the space and avoid white corners */
  transform: rotate(-2deg) scaleX(1.1) scaleY(1.1); /* Stretch both horizontally and vertically */
  }
  



/* Content section styling */
.content-container {
  z-index: 3;
  position: relative;
  margin-top: 200px; /* toolbar + banner */
  height: calc(100vh - 170px);
  overflow-y: auto;
  padding: 20px;
  text-align: center;
  font-size: 2rem;
  text-shadow: rgb(255, 255, 255) 1px 0 10px;
  font-weight: bold;
}


.content p {
  color: black;
/*  background-color: white; */
font-size: 1rem;         /* Smaller than the number */
font-weight: 500;          /* Semi-bold */
letter-spacing: 0.5px;
  max-width: 700px;   /* Limit width */
  margin: 0 auto 1.5em auto; /* Center text block and add spacing */
  line-height: 1.6;   /* Improve readability */
  text-align: left;   /* Optional: makes reading easier */
}


.foldout-menu {
  position: fixed;
  top: 60px; /* just below the toolbar */
  right: 10px;
  background-color: rgba(255, 255, 255, 0.801);
  border-radius: 5px;
  padding: 10px;
  z-index: 7;
 /* box-shadow: 0px 4px 6px rgba(0,0,0,0.2);*/
}

.foldout-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foldout-menu li {
  margin: 10px 0;
}

.foldout-menu a {
  text-decoration: none;
  color: black;
  font-size: 16px;
}

.hidden {
  display: none;
}

/* Ensuring the FAQ section has enough space from the top without affecting other sections */
#faq {
  padding-top: 0px;  /* Add some space to the top, adjust as needed */
  margin: 0 auto;
  max-width: 700px;
  padding-left: 20px;
  padding-right: 20px;
}

.faq-container {
  max-width: 700px;
  margin: 50px auto;  /* Center it horizontally with space above */
  padding: 0 20px;
}

.faq-item {
  width: 100%; /* Ensure each FAQ item takes the full width of the container */
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  font-size: 1rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Abordage, serif;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 20px; /* Increased padding on left and right */
  color: black;
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.faq-question:hover {
  background-color: white;  /* Change the background to white on hover */
  text-shadow: 2px 2px 8px rgb(204, 0, 255);
}

.faq-question.active {
  font-family: Abordage, serif;
  font-weight: bold;
  background-color: white;  /* Change the background to white on hover */
  text-shadow: 2px 2px 8px rgb(204, 0, 255);
}

.faq-answer {
  display: none;
  font-family: Abordage, serif;
  padding: 5px 30px 15px 10px; /* Add more space to the left to indent the answer */
  font-weight: 500;          /* Semi-bold */
  letter-spacing: 0.5px;
  font-size: 0.95rem;
  text-align: left;
  line-height: 1.4;
  color: black;
  max-width: 700px;
  background-color: white;  /* Solid white background */
  position: relative; /* Ensure it's positioned relative for layering */
  border-left: 5px solid #ff3300;
  z-index: 10;  /* Ensure the answer is on top */
}

.arrow {
  transition: transform 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
}

.faq-question.active .arrow {
  font-family: Arial, Helvetica, sans-serif;
  transform: rotate(90deg); /* Point down */
}

.faq-item .faq-question.active {
  background-color: #ffffff; /* Optional: background color for active question */
}

.faq-item .faq-answer.active {
  display: block; /* Show the answer when active */
}

.faq-block {
  max-width: 700px;
  margin: 0 auto; /* Centers horizontally */
  text-align: left;
}


.number-container {
  margin: 2em auto 2em auto;
  text-align: center;
  margin-top: 40px; /* toolbar + banner */
  max-width: 700px; /* or whatever fits your design */
}

/* Style for the large number */
.large-number {
  font-family: Basalte, sans-serif;
  font-size: 8rem;
  font-weight: 800;
  color: #000000;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 0;
  animation: glowDrift 3s ease-in-out infinite;
}

/* Keyframes for combined glow + subtle drift */
@keyframes glowDrift {
  0% {
    text-shadow: 1px 0 30px rgb(255, 0, 242);
  }
  25% {
    text-shadow: 2px 1px 50px rgb(255, 0, 242);
  }
  50% {
    text-shadow: 0px 2px 70px rgb(255, 0, 242);
  }
  75% {
    text-shadow: -1px 1px 50px rgb(255, 0, 242);
  }
  100% {
    text-shadow: 1px 0 30px rgb(255, 0, 242);
  }
}


/* Style for the subtitle */
.number-subtitle {
  font-size: 1rem;         /* Smaller than the number */
  font-weight: 500;          /* Semi-bold */
  color: #8b8a8a;               /* Dark grey for contrast */
  letter-spacing: 1px;
  margin-bottom: 1em;
  text-transform: uppercase; /* Optional: makes it all caps */
  opacity: 0.8;              /* Slightly faded for subtlety */
  text-shadow: 1px 0 10px rgb(255, 255, 255); /* Subtle shadow for depth */
}

/* Make the triangle a bit larger and pointer */
.toggle-triangle {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s;
  font-size: 1em;
  vertical-align: middle;
  font-family: Arial, Helvetica, sans-serif;
}

/* Rotate the triangle on hover */
.toggle-triangle:hover {
  transform: rotate(90deg);
  text-shadow: 2px 2px 8px rgb(204, 0, 255);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  text-decoration: none; /* Optional: removes underline */
  font-weight: normal;   /* Regular font */
  color: rgb(204, 0, 255);        /* Inherits color from parent (adjust as needed) */
  transition: box-shadow 0.3s ease;
}

a:hover {
  box-shadow: 4px 4px 16px rgb(204, 0, 255); /* Expanded glow on hover */
}

.highlighted-text {
  text-shadow: 2px 2px 8px rgb(204, 0, 255);
  font-family: Abordage, serif;
  font-weight: bold;
}

.inline-photo-container {
  max-width: 100%;
  margin: 1em auto;
  text-align: center;
}

.inline-photo {
  max-width: 680px;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.inline-photo-container figcaption {
  font-size: 0.4em;
  font-weight: 500;
  font-style: italic
  color: #555;
  margin-top: 0.5em;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .inline-photo {
    max-width: 100%;
    width: 100%;
  }