/* wyldfyre.css: Standardized styles across WyldFyre */

@import url('system.css');

@media (max-width: 600px) {
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('wyldfyre.mp4');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
    --scrollbar-width: 0; /* Initialize custom property */
    min-width: calc(100vw - var(--scrollbar-width)); /* Container takes full width minus scrollbar */
  }
}

@media (min-width: 601px) {
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('wyldfyre.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
    --scrollbar-width: 0; /* Initialize custom property */
    min-width: calc(100vw - var(--scrollbar-width)); /* Container takes full width minus scrollbar */
  }
}

.basic-screen {
  background-color: black;
  background-image: none;
  align-items: center;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: left;
  padding: 10px 20px; /* Add padding to the top and bottom */
  height: 90px;
  width: 100%;
  flex-shrink: 0; /* Prevent the header from shrinking */
  background-color: transparent;
  color: white;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.message-box {
  padding: 5px;
  border: 2px solid yellow;
  background-color: navy;
  color: white;
  font-family: Arial, sans-serif;
  width: 34vw;
  max-height: 90px; /* fit inside header */
  overflow-y: auto; /* Enable vertical scrolling */
  box-sizing: border-box; /* Include padding and border in total size */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center;
  align-items: center;
}

.overflow {
  justify-content: flex-start; /* Align content to the top if overflow */
}

#messages {
  max-width: 95%; /* Adjust as needed */
  text-align: center; /* Center text horizontally */
  margin: 0 auto; /* Center horizontally */
}

.footer {
  flex-direction: row;
  height: 90px;
  width: 100%;
  padding: 20px 10px; /* Add padding to the top and bottom */
  flex-shrink: 0; /* Prevent the footer from shrinking */
  background-color: transparent;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: left;
  padding-right: 10px; /* Add padding to the right to prevent image cutoff */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.footer img {
  height: 70px; /* Desired height */
  width: auto; /* Maintain aspect ratio */
}

.header td:last-child, .footer td:last-child {
  align-items: right; /* Right-align the last cell in the header and footer */
}

/* General CSS rules */
.quarter-width-container {
  display: flex;
  flex-direction: row; /* Default to horizontal layout */
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.quarter-width {
  flex: 1; /* Flexible width for all quarters */
  min-height: calc(100vh - 180px); /* Remaining height after header and footer */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  padding-top: 10px; /* Add padding to the top */
  margin: auto 0; /* Center vertically */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  overflow: hidden; /* Prevent scrolling within the quarters */
}

.three-part-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;

  flex-direction: row; /* Default to horizontal layout */
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  min-height: 100vh;
}

@media (min-width: 601px) {
  .left, .middle, .right {
    width: 33%;

    flex: 1; /* Flexible width for all quarters */
    min-height: calc(100vh - 180px); /* Remaining height after header and footer */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 10px; /* Add padding to the top */
    margin: auto 0; /* Center vertically */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    overflow: hidden; /* Prevent scrolling within the quarters */
  }
}

.middle {
  display: flex;
  justify-content: center;
}

.vertical-page {
  color: white;
  font-family: Arial, sans-serif;
  padding: 0;
  margin: 0;
}

.vertical-container {
  max-width: 100vh;
  width: 800px;
  min-height: calc(100vh - 180px); /* Remaining height after header and footer */
  padding: 0;       /* Remove internal left/right padding */
  margin: 0 auto;   /* Still center it if narrower */
  display: flex;
  flex-direction: column;   /* Stack children vertically */
  justify-content: center;
  align-items: center;
}

.vertical-element {
  /* For testing: border: 1px solid #ccc; */
  padding: 1rem 1rem;       /* Less left/right padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;   /* Stack children vertically */
  justify-content: center;   /* Center horizontally */
  align-items: center;
  width: 100%;
}

/* Add media query for mobile devices */
@media (max-width: 600px) {
  .quarter-width-container {
    flex-direction: column; /* Stack items vertically */
  }

  .quarter-width {
    width: 100%; /* Full width for each quarter */
    min-height: auto; /* Allow flexible height */
    display: block; /* Adjust for simpler stacking */
    flex-direction: unset; /* Disable flex behavior */
    justify-content: unset; /* Disable vertical centering */
    align-items: unset; /* Disable horizontal centering */
    padding: 1rem 0; /* Simplify padding */
    margin: 1rem 0; /* Add spacing between stacked quarters */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }

  .three-part-container {
    flex-direction: column;
  }

  .left {
    order: 1;
  }

  .right {
    order: 2;
  }

  .middle {
    order: 3;
  }
}

/* Add media query for mid-sized devices */
@media (min-width: 601px) and (max-width: 1000px) {
  .quarter-width-container {
    flex-direction: row; /* Horizontal layout for mid-sized devices */
  }

  .quarter-width:first-child,
  .quarter-width:last-child {
    flex: 0 0 250px; /* Fixed width of 250px for the first and last quarters */
    overflow: hidden; /* Prevent scrolling and ensure fixed size */
  }

  .quarter-width:nth-child(2),
  .quarter-width:nth-child(3) {
    flex: 1; /* Flexible width for the middle quarters */
  }
}

/* Add media query for larger devices */
@media (min-width: 1001px) {
  .quarter-width-container {
    flex-direction: row; /* Retain horizontal layout */
  }

  .quarter-width {
    flex: 1; /* Flexible width for all quarters */
    min-height: calc(100vh - 180px); /* Original height rule */
    display: flex;
    flex-direction: column; /* Stack vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 10px; /* Add padding to the top */
    margin: auto 0; /* Center vertically */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    overflow: hidden; /* Prevent scrolling within the quarters */
  }
}

.quarter-width-old {
  min-height: calc(100vh - 180px); /* Remaining height after header and footer */
  display: flex;
  flex-direction: column; /* Stack vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  padding-top: 10px; /* Add padding to the top */
  margin: auto 0; /* Center vertically */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Flex container for the quarter-width items */
.quarter-width-container-old {
  display: flex;
  flex-direction: row; /* Ensure the items are laid out horizontally */
  width: 100%
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.quarter-width-old td:last-child {
  text-align: right; /* Right-align the rightmost quarter */
}

.text-box {
  border: 2px solid red;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
  width: calc(100% - 40px); /* Fill entire container, except for margins */
  color: white;
  padding: 1rem;
  flex-grow: 0;
  overflow-y: visible;
  margin: auto 20px; /* Center vertically */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

@media (min-width: 601px) {
  .featured-text-box {
    max-width: 24vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem;
    flex-grow: 0;
    overflow-y: visible;
    margin: auto 20px; /* Center vertically */
    box-sizing: border-box;
    border: 4px solid yellow;
  }
}

@media (max-width: 600px) {
  .featured-text-box {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 1rem;
    margin: auto 20px 20px;
    box-sizing: border-box;
    border: 4px solid yellow;
    text-align: center; /* Center text horizontally */
  }
}

.action-text-box {
  width: calc(100% - 40px);
  background-color: rgba(0, 0, 0, 0.7); /* Slightly semi-transparent */
  color: white;
  padding: 1rem;
  margin: auto 20px; /* Center vertically */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border: 4px solid yellow;
}

.footer-box {
  background-color: rgba(0, 0, 0, 0.3); /* default */
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 0.8em;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  width: auto;
}

/* Override if needed for stronger contrast */
.footer-box.high-contrast {
  background-color: rgba(0, 0, 0, 0.7);
}

textarea {      /* Standard "input" boxes */
  width: 100%;  /* Full width of the container */
  height: 15em; /* Approx. 15 lines high */
  box-sizing: border-box; /* Ensures padding/border don't affect width */
  font-size: 16px; /* Adjust for readability */
  padding: 0.5rem; /* Adds space inside the textarea */
}

.faq-container {
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* Ensures centering */
  align-items: flex-start; /* Prevents unwanted vertical stretching */
  width: auto; /* Prevents it from stretching to 100vw */
  width: 90%; /* Ensures it never expands beyond the viewport */
  flex-wrap: nowrap; /* Prevents items from wrapping */
/*  border: 2px solid yellow; /* Debugging border */
}

@media (max-width: 600px) {
  .faq-box {
    width: 90%; /* Fixed width */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 1rem;
    flex-grow: 0; /* Prevent flexbox from expanding it */
    flex-shrink: 0; /* Prevent flexbox from shrinking it */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Enable vertical scrolling only when necessary */
    margin: 10px;
    box-sizing: border-box;
    border: 2px solid red;
    align-self: center; /* Center vertically inside flex parent */
  }
}

@media (min-width: 601px) {
  .faq-box {
    width: 70%; /* Fixed width */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 1rem;
    flex-grow: 0; /* Prevent flexbox from expanding it */
    flex-shrink: 0; /* Prevent flexbox from shrinking it */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto; /* Enable vertical scrolling only when necessary */
    margin: 10px;
    box-sizing: border-box;
    border: 2px solid red;
    align-self: center; /* Center vertically inside flex parent */
  }
}

.faq-question {
  text-decoration: underline;
  font-weight: bold; 
  color: cyan;
  cursor: pointer;
  margin-top: 5px;
}

.faq-question:hover { /* Hovered link */
  color: yellow; /* Color change when hovering */
}

.faq-answer {
  display: none;
  color: yellow;
  margin-top: 5px;
  width: 100%; /* Ensures it doesn’t change parent width */
  white-space: normal; /* Prevents long words from breaking layout */
  word-wrap: break-word;
}

.button-container {
  margin-top: 10px; /* Add margin between the iframe and buttons */
}

.button-centered {
  display: flex;
  justify-content: center; /* center horizontally */
  gap: 1rem;               /* spacing between buttons */
  flex-wrap: wrap;         /* allows wrapping on narrow screens */
}

.button {
  padding: 10px 20px;
  min-width: 100px; /* Set a minimum width for the button */
  margin-bottom: 5px; /* Add space below the button */
  margin-right: 10px;
  background-color: #3498db;
  color: #fff;
  border: 1px solid #2980b9;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: block; /* Make the button a block element */
  float: left; /* Align button to the left */
  font-size: 130%; /* Increase the font size */
}

.button:hover {
  background-color: #2980b9;
}

.input-area {
  height: 200px;
  width: 95%;
  resize: vertical;
  overflow-y: auto; /* Enable vertical scrolling */
}

a:link { /* Unvisited link */
  color: cyan; /* Default color for unvisited link */
}

a:visited { /* Visited link */
  color: magenta; /* Default color for visited link */
}

a:hover { /* Hovered link */
  color: yellow; /* Color change when hovering */
}

a:active { /* Active link */
  color: yellow; /* Color when the link is clicked */
}

.meta {
  text-align: center;
  margin: 0;
  font-family: "Impact", sans-serif;
  font-size: 300%;
  color: yellow;
}

.easteregg {
  color: magenta;
}

.hashtag {
  color: magenta;
}

.colorhighlight {
  color: red;
}

.magenta {
  color: magenta;
}

.yellow {
  color: yellow;
}

.invisible-until-hover {
  opacity: 0; /* Make the element fully transparent */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.invisible-until-hover:hover {
  opacity: 1; /* Make the element fully visible when hovered */
}

.background-video {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw; /* Full width */
  height: 100vh; /* Full height */
  z-index: -1; /* Send the video to the background */
  overflow: hidden; /* Hide scrollbars */
}

.background-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* Ensures the video covers the entire element */
  transform: translate(-50%, -50%);
}

/*
.background-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the entire container */
/*
}
*/

.overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  color: yellow; /* Text color */
  text-shadow: 0 0 10px black; /* Text shadow for readability */
}

/* Base styles for the tooltip trigger */
.tooltip-trigger {
  margin: 0; /* Removes default margin */
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Add this to remove space between list items if needed */
/* This became an issue with my tooltip code.            */
ol {
  padding-left: 20px; /* Adjust as needed for your design */
  list-style-position: outside; /* Align numbers outside the content flow */
  /* The following 2 lines may have helped remove a layout issue with li. */
  counter-reset: list-counter; /* Create a new instance of the counter */
  list-style: none; /* Remove default list styling */
}

ul {
  list-style-type: none; /* Remove default bullets */
  padding: 0; /* Remove default padding from ul */
  margin: 0; /* Remove default margin from ul */
}

/* This became an issue with my tooltip code.            */
li {
  margin: 0; /* Removes default margin between list items */
  padding: 0; /* Removes default padding between list items */
  /* The following line may have helped remove a layout issue with li. */
  vertical-align: top; /* Align the numbers to the top of the list items */
}

/* The following may have helped remove a layout issue with li. */
ol li {
  counter-increment: list-counter; /* Increment the counter */
  position: relative; /* Allows absolute positioning of the pseudo-element */
  padding-left: 20px; /* Space for the counter */
}

ul li {
  margin: 0; /* Remove default margin between list items */
  padding: 0; /* Remove default padding between list items */
  vertical-align: top; /* Align the list items to the top */
  position: relative; /* Allows absolute positioning of the pseudo-element */
  padding-left: 20px; /* Space for the bullet */
}

/* The following may have helped remove a layout issue with li. */
ol li::before {
  content: counter(list-counter) ". "; /* Display the counter */
  position: absolute; /* Position the counter */
  left: 0; /* Align to the left */
  top: 0; /* Align to the top */
}

ul li::before {
  content: '•'; /* Display bullet */
  position: absolute; /* Position the bullet */
  left: 0; /* Align to the left */
  top: 0; /* Align to the top */
  font-size: 1em; /* Match the bullet size to the text */
  line-height: 1; /* Ensure the bullet aligns vertically */
}

/* Tooltip styles */
.tooltip {
  position: fixed; /* Changed from absolute to fixed */
  width: 350px;
  background-color: #333;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  display: none; /* Initially hidden */
  border-bottom: 1px dotted black; /* Underline to indicate it's a tooltip */
  z-index: 999;
}

/* Show the tooltip on hover */
.tooltip-trigger:hover + .tooltip {
  display: block;
}

.no-link {
  text-decoration: none;
}

.advisor-button {
  width: 150px; /* Set the width of the container */
  height: 150px; /* Set the height of the container */
  overflow: hidden; /* Hide any overflow */
  margin: 10px;
  border: 10px solid black; /* Optional: add a border for visibility */
  background-color: transparent;
}

.advisor-button video {
  width: 100%; /* Make the image fit the container's width */
  height: 100%; /* Make the image fit the container's height */
  object-fit: cover; /* Ensure the image covers the container without distortion */
}

.advisor-button img {
  width: 100%; /* Make the image fit the container's width */
  height: 100%; /* Make the image fit the container's height */
  object-fit: cover; /* Ensure the image covers the container without distortion */
}

.advisor-minibutton {
  width: 70px; /* Set the width of the container */
  height: 70px; /* Set the height of the container */
  overflow: hidden; /* Hide any overflow */
/*   border: 2px solid #333; /* Optional: add a border for visibility */
  background-color: transparent;
}

.advisor-minibutton img {
  width: 100%; /* Make the image fit the container's width */
  height: 100%; /* Make the image fit the container's height */
  object-fit: cover; /* Ensure the image covers the container without distortion */
}

@media (max-width: 600px) {
  .large-advisor {
    display: none;
  }
}

@media (min-width: 601px) {
  .large-advisor {
    width: 20%; /* Always 20% of the outer container */
    aspect-ratio: 1 / 1; /* Maintains a square shape */
    overflow: hidden; /* Hide any overflow */
    /* border: 2px solid blue; /* Debugging border */
    background-color: transparent;
    align-self: center;
  }
}

.large-advisor video {
  width: 100%; /* Make the image fit the container's width */
  height: 100%; /* Make the image fit the container's height */
  object-fit: cover; /* Ensure the image covers the container without distortion */
}

.large-advisor img {
  width: 100%; /* Make the image fit the container's width */
  height: 100%; /* Make the image fit the container's height */
  object-fit: cover; /* Ensure the image covers the container without distortion */
}

.main-heading {
    text-align: center;
}

.main-heading h1 {
  display: block;
  margin: 0;
}

.main-heading .tagline {
  display: block;
  margin-top: 0.5em;
  font-size: 1.2em;
  color: yellow;
}

.button-download-container {
  display: block;
  text-align: center;
  margin: 30px 0;
}

.button-download-container .download-button {
  display: inline-block;  /* Needed to center properly */
  float: none;            /* Override the float: left */
}

.download-button {
  display: inline-block;
  background-color: #005fa3; /* Deep blue: professional and reliable */
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  text-decoration: none;
  padding: 0.75em 1.5em;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.download-button:hover {
  background-color: #004080; /* Darker blue on hover */
}

.hanging-indent {
  padding-left: 1.5em;     /* Push the whole paragraph over */
  text-indent: -1.5em;     /* Pull the first line back to the left */
}

.quote-hanging-indent {
  padding-left: 1em;     /* Push the whole paragraph over */
  text-indent: -1em;     /* Pull the first line back to the left */
}

@media print {
  body {
    background: white !important;
    color: black !important;
  }

  .background-video,
  video,
  img {
    display: none !important;
  }

  .text-box {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  a {
    color: black !important;
    text-decoration: underline;
  }

  .header,
  .button,
  .message-box {
    display: none !important;
  }
}