/* General reset and body styles */
* {
  border: 0.5px solid rgba(110, 190, 247, 0.232);
}

html {
  overflow:visible;
}
body {
  color: var(--clr-font);
  background-color: var(--clr-white);
  font-family: var(--font-body);
  font-size: var(--mfont);
  line-height: 150%;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  overflow:visible;
}
.hide-title{
  /* for the iFrame title in edit mode */
  display:contents;
  color: var(--clr-dev);
}
.iframe-holder::before {
  content: "An iFrame will go here.";
  display: block; 
  margin-bottom: 10px; 
  background-color: var(--clr-tertiary);
  padding: 30px;
  width: 100%;
  margin: auto;
  text-align: center;
  font-weight: bolder;
}
/* ! Slideshoe iframe placeholder START */
[data-iframe-type]:not(:has(iframe))::before {
  content: "An iFrame will go here: " attr(data-iframe-src);
  display: block;
  margin-bottom: 10px;
  background-color: var(--clr-tertiary);
  border: 2px dashed var(--clr-secondary);
  border-radius: 5px;
  padding: 30px;
  width: 100%;
  margin: auto;
  text-align: center;
  font-weight: bolder;
  color: var(--clr-primary);
}

[data-iframe-type][data-folder="slideshows"]:not(:has(iframe))::before {
  content: "A Slideshow iFrame will go here: " attr(data-iframe-src);
  background-color: var(--clr-tertiary);
  border-color: var(--clr-accent, #5c068c);
}
/* ! Slideshoe iframe placeholder END */



/* Ensure the proper styles for toggle-button */
.toggle-button + .hidden-div {
  display: block !important;
  height: auto !important;
  padding: 20px !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

/* Ensure all accordions and their content are open by default */
details,
.base-accordion,
.question-accordion,
.accordion-other,
.toggle-button {
  display: block !important;
}

/* Ensure the content inside these elements is displayed */
details > *:not(summary),
.base-accordion > div,
.question-accordion > div,
.accordion-other > div,
.toggle-button + .hidden-div {
  display: block !important;
  height: auto !important;
  padding: 20px !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  overflow: visible !important;
}
/* Ensure all universal accordions are open by default */
.universal-base-accordion,
.universal-base-accordion.open {
  display: block !important;
}

.universal-base-accordion > div,
.universal-base-accordion .universal-base-accordion-title + div,
.universal-base-accordion .universal-base-accordion-title-button + div {
  display: block !important;
  height: auto !important;
  padding: 20px !important;
  overflow: visible !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 
              0 6px 20px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Prevent icons from looking "closed" */
.universal-base-accordion .universal-base-accordion-title::before,
.universal-base-accordion .universal-base-accordion-title-button::before {
  transform: rotate(90deg) !important;
}

/* Magic card START */
.spell {
  transform: rotateY(180deg); /* Flip the card by default */
}
/* Magic card END */

/* tabs START */
/* Default visibility for tabcontent in no-script mode */
.tabcontent {
  display: block; /* Ensure all tab contents are visible */
  margin-bottom: 20px; /* Add spacing between tab panels */
  border-top: 1px solid var(--clr-accent); /* Optional: separate panels visually */
}

/* Adjust tablinks styles for "no script" mode */
.tablinks {
  display: inline-block; /* Ensure buttons align properly */
  margin-right: 5px; /* Add spacing between tab buttons */
  font-weight: bold; /* Make the tab buttons visually distinct */
  text-decoration: underline; /* Highlight tabs in no-script mode */
  cursor: default; /* Indicate these are not clickable in no-script mode */
  pointer-events: none; /* Disable interaction */
}

/* Ensure the tab group has proper spacing and borders */
.tab-group {
  margin-bottom: 20px; /* Space below the tab group */
  padding: 10px; /* Add padding inside the group */
  border: 1px solid var(--clr-accent); /* Border for better visibility */
  background-color: #f9f9f9; /* Light background for contrast */
}

/* Optional: Add clear separation for tab contents */
.tabcontent + .tabcontent {
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* Separator between tab panels */
  margin-top: 20px; /* Spacing between panels */
}

/* tabs END */
/* New tabs START */
.tab {
  overflow: hidden;
  position: relative;
}

.tablinks {
  background-color: transparent;
  outline: none;
  cursor: pointer;
  padding: 10px 15px;
  margin-bottom: -1px;
  transition: border-color 0.15s ease-in-out;
  color: var(--clr-primary);
  position: relative;
  z-index: 1;
  font-size: var(--mfont);
}

.tabcontent h2 {
  margin: 0;
  padding-top: 20px;
  padding-left: 0px;
  font-family: var(--font-h1);
  font-size: 1.75em;
  font-weight: bold;
  line-height: 1px;
  color: var(--clr-accent);
  background-color: var(--clr-white);
  text-align: left;
  border-bottom: 0px solid var(--clr-accent);
}
.tabcontent h3 {
  color: var(--clr-accent);
  background-color: var(--clr-white);
  padding-left: 15px;
  margin: 0;
  line-height: 1.5;
}
.tabcontent {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  background-color: var(--clr-white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* Accesibility Section */
.tabcontent.active {
  display: block;
}
/* [aria-hidden="true"] {
  display: none;
} */
.tab-group {
  border: solid 1px var(--clr-accent);
  box-shadow: 2px 0 10px -4px rgba(163, 163, 164, 0.5),
    -2px 0 15px -4px rgba(163, 163, 164, 0.5);
  background-color: #eeeeee;
}
.tab-group button {
  border-radius: 0;
  margin: 0px;
}

.tablinks[aria-selected="true"] {
  font-weight: bold;
  color: var(--clr-accent);
  background-color: var(--clr-white);
}
/* new Tabs END */
/* ================================================================= */
/* ! UNIVERSAL TAB SYSTEM START */
/* ================================================================= */
.universal-tab-group {
  /* This is the main theme color variable for the component. */
  /* It now inherits --box-color from any applied color-* class, with --clr-accent as a fallback. */
  --tab-theme-color: var(--box-color, var(--clr-accent));

  /* All other themeable properties are derived from this variable. */
  --universal-tab-border-color: var(--tab-theme-color);
  --universal-tab-active-text-color: var(--tab-theme-color);
  
  /* Static colors for the component structure */
  --universal-tab-bg: #f1f1f1;
  --universal-tab-text-color: #333;
  --universal-tab-hover-bg: #e7e7e7;
  --universal-tab-content-bg: #ffffff;
  --universal-tab-active-bg: var(--universal-tab-content-bg);
  --universal-tab-radius: 4px;
  
  border: 1px solid var(--universal-tab-border-color);
  border-radius: var(--universal-tab-radius);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

/* The container for the tab buttons */
.universal-tab-group .tab {
  overflow: hidden;
  background-color: var(--universal-tab-bg);
  border-bottom: 1px solid var(--universal-tab-border-color);
  border-radius: var(--universal-tab-radius) var(--universal-tab-radius) 0 0;
}

/* Individual tab buttons */
.universal-tab-group .tablinks {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 18px;
  transition: background-color 0.3s, color 0.3s;
  color: var(--universal-tab-text-color);
  font-size: 1em;
  margin: 0;
  border-radius: 0;
  border-right: 1px solid #ddd;
}

.universal-tab-group .tablinks:last-child {
  border-right: none;
}

/* Hover state for tab buttons */
.universal-tab-group .tablinks:hover {
  background-color: var(--universal-tab-hover-bg);
}

/* Active/selected tab button */
.universal-tab-group .tablinks[aria-selected="true"] {
  background-color: var(--universal-tab-active-bg);
  color: var(--universal-tab-active-text-color);
  font-weight: bold;
  border-bottom: 2px solid transparent; /* Hides the container border below the active tab */
  margin-bottom: -1px;
}

/* Tab content panel */
.universal-tab-group .tabcontent {
  background-color: var(--universal-tab-content-bg);
  padding: 20px;
  border: none; /* This resets any borders from more generic .tabcontent rules */
  display: none; /* Hidden by default */
  animation: fadeIn 0.5s;
}

/* Show active tab content */
.universal-tab-group .tabcontent[aria-hidden="false"] {
  display: block;
}
/* =============================== */
/* No-script: show ALL Universal Tab panels */

/* =============================== */

.universal-tab-group .tabcontent,
.universal-tab-group .tabcontent[aria-hidden="true"],
.universal-tab-group .tabcontent[hidden] {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  animation: none !important; 
}


.universal-tab-group .tab .tablinks {
  pointer-events: none;
  cursor: default;
  text-decoration: underline;
}


.universal-tab-group .tabcontent + .tabcontent {
  border-top: 1px solid rgba(0,0,0,0.1);
  margin-top: 20px;
  padding-top: 20px;
}

/* ================================================================= */
/* ! UNIVERSAL TAB SYSTEM END */
/* ================================================================= */
/* Clickable Image for text START */

/* Ensure the image takes the desired width */
.image-text-container img {
  display: block;
  max-width: 100%;
  cursor: pointer;
  margin-bottom: 10px;
}

/* Hidden text container */
.hidden-text-image {
  width: 100%;            /* Take the same width as the container */
  max-height: 0;
  opacity: 1;
  overflow:visible;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  padding: 0 20px;  /* Optional: add horizontal padding */
  box-sizing: border-box;
  box-shadow: none;
}



/* Clicakable Image of text END */

/* Slideshow Start */
    /* Show all slides in a vertical layout when JavaScript is disabled */
    .simpleSlide {
      position: relative !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      margin-bottom: 20px;
    }
    /* Hide navigation controls */
    .prev, .next, .dot {
      display: none !important;
    }
/* Slideshow End */

/* Image Caption START */
figcaption{
  color: var(--clr-primary);
}
/* Image Caption END */

/* Knowledge Checker Place holder */
.quiz-instance {
  display: block; 
  color: var(--clr-primary);
  margin-bottom: 10px; 
  background-color: var(--clr-tertiary);
  border-style: dashed;
  border-width: 2px;
  border-color: var(--clr-secondary);
  border-radius: 5px;
  padding: 30px;
  width: 100%;
  margin: auto;
  text-align: center;
  font-weight: bolder;
}

/* This adds the text content inside the box */
.quiz-instance::before {
  content: "Knowledge Check questions or Slideshows will go here.";
}

.source {
  font-size: 1em;
  color: #333;
  line-height: 1.2em;
  display: block;
/* border: 0.5px solid rgba(110, 190, 247, 0.232); */
border: 0.5px solid rgba(247, 110, 110, 0.232);
}
.hidden-div-source,.hidden-div-source  {
  display: block;
  margin-left: 10px;
  padding: 0px;
  box-sizing: border-box;
  border: 0.5px solid rgba(247, 110, 110, 0.232);

}