/* Home page specific styles for navigation, footer, and hero section components */

/* Navigation component wrapper - uses CSS 'contents' to flatten the DOM hierarchy */
.navigation-wrapper {
  display: contents;
}
 
/* Navigation structural container - flattened into parent layout */
.navigation-container1 {
  display: contents;
}
 
/* Hidden navigation variant (not used) */
.navigation-container2 {
  display: none;
}
 
/* Active navigation container - rendered in the layout */
.navigation-container3 {
  display: contents;
}
 
.navigation-navigation-logo-accent {
  color: var(--color-primary);
}
 
.navigation-navigation-toggle-icon1 {
  top: 50%;
  left: 50%;
  color: var(--color-on-primary);
  position: absolute;
  transform: translate(-50%, -50%);
  transition: all var(--animation-duration-standard)
      var(--animation-curve-primary);
}
 
.navigation-navigation-toggle-icon2 {
  top: 50%;
  left: 50%;
  color: var(--color-on-primary);
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: all var(--animation-duration-standard)
      var(--animation-curve-primary);
}
 
.navigation-container4 {
  display: none;
}
 
.navigation-container5 {
  display: contents;
}
 
.navigation-container6 {
  display: none;
}
 
.navigation-container7 {
  display: contents;
}

/* Footer component wrapper - uses CSS 'contents' to flatten the DOM hierarchy */
.footer-wrapper {
  display: contents;
}
 
/* Footer structural container - flattened into parent layout */
.footer-container1 {
  display: contents;
}
 
/* Hidden footer variant (not used) */
.footer-container2 {
  display: none;
}
 
/* Active footer container - rendered in the layout */
.footer-container3 {
  display: contents;
}
 
/* Copyright text styling with proper line spacing */
.footer-footer-copyright-text1 {
  line-height: 1.5;
}
 
/* Heart icon with subtle heartbeat animation to draw attention */
.footer-footer-heart-icon {
  color: var(--color-accent);
  width: 18px;
  height: 18px;
  display: inline-flex;
  animation: footer-heartbeat 1.5s ease-in-out infinite;
}
 
.footer-footer-copyright-text2 {
  line-height: 1.5;
}
 
.footer-container4 {
  display: none;
}
 
.footer-container5 {
  display: contents;
}
 
.footer-container6 {
  display: none;
}
 
.footer-container7 {
  display: contents;
}
 
@media(max-width: 479px) {
  .footer-footer-heart-icon {
    width: 16px;
    height: 16px;
  }
}

/* Home page main container - full height with block layout */
.home-container10 {
  width: 100%;
  display: block;
  min-height: 100vh;
}
 
/* Hidden home page variant (not used) */
.home-container11 {
  display: none;
}
 
/* Active home page container - flattened into parent */
.home-container12 {
  display: contents;
}
 
/* Button icon display - inline flex for alignment with text */
.home-btn-icon {
  display: inline-flex;
  align-items: center;
}
 
/* Progress bar fill widths (visual indicators for level progress) */
/* Level 1: 60% complete, Level 2: 30% complete, Level 3: 80% complete */
.home-progress-fill1 {
  width: 60%;
}
 
.home-progress-fill2 {
  width: 30%;
}
 
.home-progress-fill3 {
  width: 80%;
}
 
.home-container21 {
  display: none;
}
 
.home-container22 {
  display: contents;
}
 
.home-container23 {
  display: none;
}
 
.home-container24 {
  display: contents;
}
 
/* Floating action button (FAB) - fixed position bottom-right corner */
/* Uses frosted glass effect with blur for modern aesthetic */
.home-container25 {
  right: 50px;
  border: 1px solid #ffffff5c;
  bottom: 30px;
  display: flex;
  z-index: 22;
  position: fixed; /* Stays visible while scrolling */
  box-shadow: 5px 5px 10px 0px rgba(31, 31, 31, 0.4);
  min-height: auto;
  align-items: center;
  padding-top: 8px;
  padding-left: 12px;
  border-radius: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  backdrop-filter: blur(6px); /* Frosted glass effect */
  background-color: rgba(41, 41, 41, 0.41);
}
 
.home-icon90 {
  width: 24px;
  margin-right: 4px;
}
 
.home-text56 {
  color: white;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* Footer styling with gradient background matching header */
.quiz-footer {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: var(--color-on-primary);
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-level-1);
  margin-top: auto; /* Pushes footer to bottom when content is short */
}

/* Footer content container with max-width constraint */
.quiz-footer-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
}

/* Sticky footer: flex column layout ensures footer stays at bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}