/* Import Inria Sans Font */
@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:wght@300;400;700&display=swap');

body {
  font-family: 'Inria Sans',sans-serif;
  line-height: 1.6;
  color: #321be2;
  margin: 0;
}

/* Navigation Bar Styling */
/* Navigation Bar background color */
.main-header {
  background-color: white;
}

.main-nav .btn,
.main-nav a {
  color:black;
  font-weight: bold;
}

h1 {
  font-family: 'Inria Sans',sans-serif;
  color:black;
}

.logo h1 {
  color: black;
}

/* 
    Dark Mode Settings
    - Navigation bar background switches to Navy color 
    - Logo color switches to white
*/

[data-theme="dark"] .main-header {
  background-color: #1e3a5f;
}

/* Dark Mode - Logo switches to white */
[data-theme="dark"] .logo h1 {
  color: white;
}

/* Dark Mode - Nav Bar buttons switch to white */
[data-theme="dark"] .main-nav .btn,
[data-theme="dark"] .main-nav a {
  color: white;
}

/* Light & Dark Mode - Hamburger */ 
.hamburger span {
  background-color: black;
}

[data-theme="dark"] .hamburger span {
  background-color: #ffffff;
}

/* Light/Dark mode icon */
.btn.theme-toggle img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.btn.theme-toggle {
  background:none;
  border:none;
  padding: 0;
  margin: 0;
  align-items: center;
  cursor: pointer;
  margin-left: 15px;
  height: 20px;
}

.btn.theme-toggle:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}


/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 18px;
  font-family: 'Times New Roman', Times, serif;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #a9b9f2;
}

/* Style the accordion panel. The accordion panel is hidden/collapsed by default*/
.panel {
  padding: 0 18px;
  background-color: rgb(255, 255, 255);
  max-height: 0;
  /* display: none; */
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

/* Styling for the Emojis */
.faq-emoji {
  display: inline-block;
  padding: 5px;
  vertical-align: middle;
  transition: transform 0.3s ease-out, filter 0.3s ease-out; /* Enlarges the text when you hover over it */
  backface-visibility: hidden;
}

h2 {
  text-align: center;
}

/* Stying for h2 on hover */
h2:hover {
  color: blue; /* Changes the text color to blue */
  cursor: pointer;
}

/* Styling for the emojis when you hover over them */
h2:hover .faq-emoji {
  /* Enlarges the emoji by 25% */
  transform: scale(1.25); 
  
  /* Dark blue shadow */
  filter: drop-shadow(0 4px 6px rgba(50, 27, 226, 0.4));
}

/* Styling for the p tag */
p {
  font-size: 16px;
}

/* Styling for the "Expand All" button */
.expand {
  align-items: center;  /* Centers button text */
  background-color: #ccd3eb;  /* Subtle white-blue background*/
  border-radius: 8px;  /* Rounded Edges */
  border-width: 2px;
  border-color: #536DFE;
  box-shadow: rgba(83, 109, 254, 0.2) 0 2px 4px, rgba(83, 109, 254, 0.15) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  color: #536DFE;
  cursor: pointer;
  display: inline-flex;
  font-family: 'Times New Roman', Times, serif;
  height: 40px;
  justify-content: center;
  /* Adds space to the left & right side of the text */
  padding-left: 20px;  
  padding-right: 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  font-size: 15px;
}

.expand:focus {
  outline: none;
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(83, 109, 254, 0.4) 0 2px 4px, rgba(83, 109, 254, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

/* Hovering over the button will cause it to slightly shift/"pop" upward */
.expand:hover {
  box-shadow: rgba(83, 109, 254, 0.3) 0 4px 8px, rgba(83, 109, 254, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.expand:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}

/* Styling for "Collapse All" Button */
.collapse {
  align-items: center;
  background-color: #ffecd2; /* Light orange background */
  border-radius: 8px;  /* Rounded edges */
  border-width: 2px;
  border-color: #ff8c00;  /* Strong orange border */
  /* Box shadow updated with orange RGBA values */
  box-shadow: rgba(255, 140, 0, 0.2) 0 2px 4px, rgba(255, 140, 0, 0.15) 0 7px 13px -3px, #f7d7b5 0 -3px 0 inset;
  /* Darker orange text for readability */
  color: #e67e22; 
  cursor: pointer;
  display: inline-flex;
  font-family: 'Times New Roman', Times, serif;
  height: 40px;
  justify-content: center;
  /* Add padding to left and right side of the text so it's easier to read */
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  font-size: 15px;
}

.collapse:focus {
  outline: none;
  box-shadow: #f7d7b5 0 0 0 1.5px inset, rgba(255, 140, 0, 0.4) 0 2px 4px, rgba(255, 140, 0, 0.3) 0 7px 13px -3px, #f7d7b5 0 -3px 0 inset;
}

.collapse:hover {
  box-shadow: rgba(255, 140, 0, 0.3) 0 4px 8px, rgba(255, 140, 0, 0.2) 0 7px 13px -3px, #f7d7b5 0 -3px 0 inset;
  transform: translateY(-2px);
}

.collapse:active {
  box-shadow: #f7d7b5 0 3px 7px inset;
  transform: translateY(2px);
}

/* 
  Back to Top Button
  Functionality: This button serves to improve user experience with the webpage.
  Once the user has scrolled to some extent, they can click this button to bring
  themselves back to the top of the webpage, without having to manually scroll back up.
*/

#backToTopBtn {
  position: fixed;
  /* Fixed Position on Screen */
  bottom: 20px;
  right: 20px;
  outline: none;
  border: none;
  color: white;
  background-color: rgb(152, 162, 222);
  font-family: 'Times New Roman', Times, serif;
  font-size: 10pt;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  /* Rounded Edges */
  border-radius: 10px;
}

#backToTopBtn:hover {
  background-color: rgb(71, 76, 106);  /* Dark blue-purple color upon hover */
}

/* Styling for Emergency Button */
.btn-emergency {
  background-color: #ff8c00;
  border: none;
  border-radius: 15px;  /* Rounded Edges */
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
  box-shadow: 0 2px 5px 0 rgba (0, 0, 0, 0.15);
  color: white !important;
  padding: 10px;
}
/* Styling for Emergency Button in Dark Mode */
[data-theme="dark"] .btn-emergency {
  background-color: #ff8c00;
  border: none;
  border-radius: 15px;  /* Rounded Edges */
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
  box-shadow: 0 2px 5px 0 rgba (0, 0, 0, 0.15);
  color: #1e3a5f !important;
  padding: 10px;
}

/* Dark Mode - Accordion Panels + Background */
[data-theme="dark"] .accordion {
  background-color: #2c4c75;
  color:white;
}

[data-theme="dark"] .accordion:hover {
  background-color: #3e6596;
}

[data-theme="dark"] .panel {
  background-color: #1a2f4a;
  color: #e0e0e0;
} 

[data-theme="dark"] body {
  background-color: #1e3a5f;
  color: white;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2 {
  color: white;
}

[data-theme="dark"] #backToTopBtn {
  background-color: #3e6596;
  color:white;
}

[data-theme="dark"] #backToTopBtn:hover {
  background-color: #192a3e;
}