/*
🎯 DESIGN OPTION 3: FUNCTIONAL ARCHITECTURAL PRECISION
Clean architectural design with modern aesthetics that actually works.
Fixed: Header layout, text overflow, button styling, component sizing issues.
Enhanced: REAL CertifiTrax brand colors - magenta and matrix green from certifitrax.com
UPDATED: Bigger logo, improved search bar, better navigation positioning, enhanced bold headers
*/

/* === ARCHITECTURAL FOUNDATION === */
:root {
  /* Clean architectural color system */
  --arch-black: #000000;
  --arch-charcoal: #1a1a1a;
  --arch-dark-grey: #333333;
  --arch-medium-grey: #666666;
  --arch-light-grey: #999999;
  --arch-border-grey: #e0e0e0;
  --arch-bg-grey: #f8f9fa;
  --arch-white: #ffffff;
  
  /* REAL CertifiTrax brand colors from certifitrax.com - SOFTENED */
  --arch-accent: #00b333;           /* Softer green - primary brand color */
  --arch-accent-light: #00cc3a;    /* Lighter green for hover states */
  --arch-accent-dark: #009926;     /* Darker green for pressed states */
  --arch-accent-secondary: #cc0066; /* Softer magenta - secondary brand color */
  --arch-accent-secondary-light: #d91a75; /* Lighter magenta */
  --arch-accent-secondary-dark: #b30055;  /* Darker magenta */
  
  /* Brand glow effects - much softer */
  --green-glow: rgba(0, 179, 51, 0.2);
  --magenta-glow: rgba(204, 0, 102, 0.2);
  
  /* Typography */
  --arch-font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --arch-font-body: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --arch-font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;
  
  /* Spacing (8px grid) */
  --arch-space-1: 8px;
  --arch-space-2: 16px;
  --arch-space-3: 24px;
  --arch-space-4: 32px;
  --arch-space-5: 40px;
  --arch-space-6: 48px;
  --arch-space-8: 64px;
  
  /* Shadows */
  --arch-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --arch-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --arch-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Borders */
  --arch-border: 1px;
  --arch-border-thick: 2px;
  --arch-radius: 6px;
  --arch-radius-lg: 12px;
}

/* === GLOBAL RESET === */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--arch-font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--arch-charcoal);
  background: var(--arch-white);
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* === HEADER - CLEAN PROFESSIONAL DESIGN === */
.md-header {
  background: var(--arch-white);
  border-bottom: var(--arch-border-thick) solid var(--arch-black);
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: var(--arch-shadow-sm);
}

.md-header__inner {
  height: 90px;
  padding: 0 var(--arch-space-4);
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* HIDE ALL UNWANTED HEADER ELEMENTS */
.md-header__button,
.md-header__source,
.md-header .md-icon:not(.md-search__icon),
label[for="__drawer"],
.md-header-nav,
.md-header-nav__button {
  display: none !important;
}

/* === LEFT: LOGO SECTION === */
.md-header__title {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  width: 280px; /* Fixed width to match sidebar */
  flex-shrink: 0;
}

.md-logo {
  display: flex !important;
  align-items: center;
  text-decoration: none;
}

.md-logo img {
  height: 80px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
  filter: brightness(0) saturate(100%) invert(14%) sepia(92%) saturate(5168%) hue-rotate(321deg) brightness(97%) contrast(101%);
}

.md-logo:hover img {
  transform: scale(1.05);
}

/* === CENTER: SEARCH SECTION === */
.md-search {
  flex: 1;
  max-width: 600px;
  margin: 0 var(--arch-space-4);
  position: relative;
}

.md-search__form {
  border: var(--arch-border-thick) solid var(--arch-border-grey) !important;
  border-radius: var(--arch-radius-lg) !important;
  background: var(--arch-white) !important;
  height: 50px !important;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--arch-shadow-sm) !important;
  width: 100% !important;
  position: relative;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

.md-search__form:focus-within {
  border-color: var(--arch-accent-secondary) !important;
  box-shadow: 0 0 0 3px var(--magenta-glow), var(--arch-shadow-md) !important;
}

.md-search__input {
  color: var(--arch-charcoal) !important;
  font-size: 16px !important;
  font-weight: 400;
  padding: 0 var(--arch-space-3) 0 var(--arch-space-6) !important;
  height: 48px !important;
  background: transparent !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
}

.md-search__input::placeholder {
  color: var(--arch-light-grey) !important;
  font-style: italic;
}

.md-search__icon {
  color: var(--arch-medium-grey) !important;
  left: var(--arch-space-3) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none;
}

.md-search__form:focus-within .md-search__icon {
  color: var(--arch-accent-secondary) !important;
}

/* Hide search overlays that cause white boxes */
.md-search__overlay,
.md-search__suggest {
  display: none !important;
}

.md-search__output {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: var(--arch-white) !important;
  border: var(--arch-border-thick) solid var(--arch-accent-secondary) !important;
  border-top: none !important;
  border-radius: 0 0 var(--arch-radius-lg) var(--arch-radius-lg) !important;
  box-shadow: var(--arch-shadow-lg) !important;
  max-height: 400px;
  overflow-y: auto;
}

/* === RIGHT: DASHBOARD BUTTON === */
#dashboard-nav-container {
  width: 280px; /* Fixed width to match sidebar */
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

#dashboard-link {
  background: linear-gradient(135deg, var(--arch-accent) 0%, var(--arch-accent-dark) 100%) !important;
  color: var(--arch-white) !important;
  padding: var(--arch-space-2) var(--arch-space-4) !important;
  border-radius: var(--arch-radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--arch-space-1) !important;
  box-shadow: 0 2px 8px var(--green-glow) !important;
  width: 200px; /* Reasonable button width */
}

#dashboard-link:hover {
  background: linear-gradient(135deg, var(--arch-accent-secondary) 0%, var(--arch-accent-secondary-dark) 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--magenta-glow) !important;
}

#dashboard-icon {
  font-size: 16px;
}

/* === LAYOUT CONTAINER - WORLD CLASS SPACIOUS DESIGN === */
.md-container {
  max-width: none;
  margin: 0;
  padding: 0;
  padding-top: 90px;
}

.md-main {
  background: var(--arch-white);
}

.md-main__inner {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 280px 1fr 280px; /* Narrower sidebars, much wider content */
  gap: 0;
  min-height: calc(100vh - 90px);
}

/* === NAVIGATION - STREAMLINED === */
.md-nav--primary {
  background: var(--arch-white);
  border-right: var(--arch-border-thick) solid var(--arch-black);
  width: 280px; /* Slightly narrower */
  position: sticky;
  top: 0;
  height: calc(100vh - 90px);
  overflow-y: auto;
  padding-top: 0;
  margin-top: 0;
}

.md-nav__title {
  background: var(--arch-black);
  color: var(--arch-white);
  font-family: var(--arch-font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--arch-space-2) var(--arch-space-3);
  margin: 0;
  border: none;
}

.md-nav__item {
  margin: 0;
  border-bottom: var(--arch-border) solid var(--arch-border-grey);
}

.md-nav__link {
  padding: var(--arch-space-2) var(--arch-space-3);
  color: var(--arch-medium-grey);
  font-weight: 500;
  font-size: 14px; /* Slightly smaller for more content space */
  line-height: 1.4;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
  border: none;
  margin: 0;
  text-decoration: none;
  min-height: 40px;
}

.md-nav__link:hover {
  color: var(--arch-black);
  background: transparent;
  padding-left: var(--arch-space-3);
  border-left: 2px solid var(--arch-accent-secondary);
}

.md-nav__link--active {
  color: var(--arch-black);
  font-weight: 700;
  background: linear-gradient(90deg, rgba(0, 179, 51, 0.1) 0%, rgba(204, 0, 102, 0.05) 100%);
  border-left: var(--arch-border-thick) solid var(--arch-accent);
  padding-left: calc(var(--arch-space-2) - var(--arch-border-thick));
  position: relative;
}

.md-nav__link--active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--arch-accent-secondary);
  border-radius: 2px;
}

/* === CONTENT - WORLD CLASS SPACIOUS DESIGN === */
.md-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

.md-content__inner {
  max-width: none;
  margin: 0;
  padding: var(--arch-space-8) var(--arch-space-8); /* More generous padding */
  background: var(--arch-white);
}

/* === TYPOGRAPHY HIERARCHY - LARGE AND BEAUTIFUL === */
.md-content h1 {
  font-family: var(--arch-font-display);
  font-size: clamp(40px, 5vw, 56px); /* Much larger */
  font-weight: 800;
  line-height: 1.2;
  color: var(--arch-black);
  margin: 0 0 var(--arch-space-8) 0; /* More space */
  letter-spacing: -0.02em;
  max-width: none; /* Remove width constraint */
  background: var(--arch-bg-grey);
  padding: var(--arch-space-6) var(--arch-space-8); /* More padding */
  border-left: var(--arch-border-thick) solid var(--arch-accent);
  border-radius: var(--arch-radius);
}

.md-content h2 {
  font-family: var(--arch-font-display);
  font-size: clamp(32px, 4vw, 44px); /* Much larger */
  font-weight: 700;
  line-height: 1.3;
  color: var(--arch-black);
  margin: var(--arch-space-8) 0 var(--arch-space-6) 0; /* More space */
  letter-spacing: -0.01em;
  max-width: none; /* Remove width constraint */
  position: relative;
  padding-left: var(--arch-space-8); /* More padding */
}

.md-content h2::before {
  content: counter(h2-counter, decimal-leading-zero);
  counter-increment: h2-counter;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--arch-space-6); /* Larger */
  height: var(--arch-space-6);
  background: linear-gradient(135deg, var(--arch-accent) 0%, var(--arch-accent-light) 100%);
  color: var(--arch-white);
  border-radius: 50%;
  font-size: 16px; /* Larger */
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--green-glow);
}

.md-content__inner {
  counter-reset: h2-counter;
}

.md-content h3 {
  font-size: clamp(24px, 3vw, 32px); /* Much larger */
  font-weight: 600;
  line-height: 1.4;
  color: var(--arch-charcoal);
  margin: var(--arch-space-8) 0 var(--arch-space-4) 0; /* More space */
  max-width: none; /* Remove width constraint */
  border-left: var(--arch-border-thick) solid var(--arch-accent-secondary);
  padding-left: var(--arch-space-4);
}

.md-content p {
  font-size: 18px; /* Much larger from 16px */
  line-height: 1.8; /* More spacious */
  color: var(--arch-charcoal);
  margin: 0 0 var(--arch-space-4) 0; /* More space */
  max-width: none; /* Remove width constraint for full width */
}

.md-content p.lead {
  font-size: 22px; /* Much larger */
  font-weight: 500;
  color: var(--arch-black);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
  padding: var(--arch-space-6); /* More padding */
  border-radius: var(--arch-radius);
  border-left: var(--arch-border-thick) solid var(--arch-accent-secondary);
  position: relative;
  margin: var(--arch-space-6) 0; /* More space */
}

.md-content p.lead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--arch-accent-secondary) 0%, var(--arch-accent) 100%);
  border-radius: 2px;
}

/* === ENHANCED LISTS - LARGER AND MORE SPACIOUS === */
.md-content ul,
.md-content ol {
  margin: 0 0 var(--arch-space-6) 0; /* More space */
  padding-left: var(--arch-space-6); /* More indentation */
  max-width: none; /* Remove width constraint */
}

.md-content li {
  font-size: 18px; /* Much larger from 16px */
  line-height: 1.8; /* More spacious */
  color: var(--arch-charcoal);
  margin: var(--arch-space-2) 0; /* More space between items */
}

.md-content ul > li::marker {
  color: var(--arch-accent-secondary);
}

.md-content ol > li::marker {
  color: var(--arch-accent);
  font-weight: 600;
}

/* === ENHANCED BOLD HEADER FORMATTING === */
/* Beautiful formatting for headers with **bold** text */
.md-content h1 strong,
.md-content h2 strong,
.md-content h3 strong,
.md-content h4 strong {
  background: linear-gradient(135deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  position: relative;
  padding: 0 var(--arch-space-1);
}

.md-content h1 strong::after,
.md-content h2 strong::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  border-radius: 2px;
  opacity: 0.3;
}

.md-content h3 strong::after,
.md-content h4 strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--arch-accent-secondary) 0%, var(--arch-accent) 100%);
  border-radius: 1px;
  opacity: 0.4;
}

/* Enhanced styling for bold text in general content */
.md-content p strong,
.md-content li strong {
  color: var(--arch-accent-dark);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(0, 179, 51, 0.1) 0%, rgba(204, 0, 102, 0.1) 100%);
  padding: 2px 4px;
  border-radius: 3px;
  border-left: 2px solid var(--arch-accent-secondary);
}

/* === EDUCATIONAL CALLOUTS === */
.md-content .callout-tip {
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.05) 0%, rgba(204, 0, 102, 0.03) 100%);
  border: var(--arch-border) solid var(--arch-accent-secondary);
  border-left-width: 4px;
  border-radius: var(--arch-radius);
  padding: var(--arch-space-4);
  margin: var(--arch-space-4) 0;
  position: relative;
}

.md-content .callout-tip::before {
  content: '💡';
  position: absolute;
  top: var(--arch-space-2);
  right: var(--arch-space-2);
  font-size: 20px;
}

.md-content .callout-important {
  background: linear-gradient(135deg, rgba(0, 179, 51, 0.05) 0%, rgba(0, 179, 51, 0.03) 100%);
  border: var(--arch-border) solid var(--arch-accent);
  border-left-width: 4px;
  border-radius: var(--arch-radius);
  padding: var(--arch-space-4);
  margin: var(--arch-space-4) 0;
  position: relative;
}

.md-content .callout-important::before {
  content: '⚠️';
  position: absolute;
  top: var(--arch-space-2);
  right: var(--arch-space-2);
  font-size: 20px;
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.md-nav__link:focus-visible,
.md-search__input:focus-visible,
#dashboard-link:focus-visible {
  outline: 2px solid var(--arch-accent);
  outline-offset: 2px;
}

/* === HIDE MATERIAL FOOTER === */
.md-footer {
  display: none;
}

/* === PDF VIEWER === */
.pdf-wrapper {
  border-radius: var(--arch-radius-lg);
  box-shadow: var(--arch-shadow-lg);
  margin: var(--arch-space-6) 0;
  background: var(--arch-white);
  border: var(--arch-border) solid var(--arch-border-grey);
  overflow: hidden;
}

/* === ASSESSMENT STYLING - INSANELY GREAT === */
.quiz {
  background: var(--arch-white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: var(--arch-space-6) 0 !important;
  max-width: 100% !important;
  font-family: var(--arch-font-body) !important;
}

/* Clean first child margin */
.quiz > *:first-child {
  margin-top: 0 !important;
}

/* Hide utility class */
.quiz .hidden {
  display: none !important;
}

/* Instructions - perfectly refined */
.quiz h2,
.quiz h3,
.quiz p:first-of-type {
  color: var(--arch-charcoal) !important;
  font-family: var(--arch-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 0 var(--arch-space-4) 0 !important;
  padding: 0 !important;
}

/* Form container - invisible */
.quiz form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Question container - clean spacing */
.quiz fieldset {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--arch-space-6) 0 !important;
  background: transparent !important;
  display: block !important;
}

/* Question text - MUCH BIGGER AND MORE PROMINENT */
.quiz h3 {
  color: var(--arch-black) !important;
  font-family: var(--arch-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--arch-space-6) 0 !important;
  padding: var(--arch-space-4) var(--arch-space-4) !important;
  border-bottom: 3px solid var(--arch-accent) !important;
  background: linear-gradient(135deg, rgba(0, 179, 51, 0.08) 0%, rgba(0, 179, 51, 0.03) 100%) !important;
  border-radius: var(--arch-radius) !important;
  position: relative !important;
}

/* Remove the "Q" circle icon - no longer needed */
.quiz h3::before {
  display: none !important;
}

/* Legacy selectors for compatibility - now redundant but keeping for safety */
.quiz fieldset > div:first-child,
.quiz fieldset > p:first-child {
  color: var(--arch-charcoal) !important;
  font-family: var(--arch-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 0 var(--arch-space-2) 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* Remove the accent mark from these legacy selectors */
.quiz fieldset > div:first-child::before,
.quiz fieldset > p:first-child::before {
  display: none !important;
}

/* Option containers - clean list with spacing */
.quiz fieldset > div:not(:first-child) {
  margin: 0 0 var(--arch-space-2) 0 !important;
  padding: 0 !important;
}

/* Hide default radio buttons */
.quiz fieldset input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Option labels - beautiful and spacious */
.quiz fieldset label {
  margin: 0 !important;
  padding: var(--arch-space-3) var(--arch-space-4) !important;
  color: var(--arch-charcoal) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  display: block !important;
  border: 1px solid var(--arch-border-grey) !important;
  border-radius: var(--arch-radius) !important;
  background: var(--arch-white) !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  padding-left: var(--arch-space-6) !important;
}

/* Custom radio button - elegant circle */
.quiz fieldset label::before {
  content: '' !important;
  position: absolute !important;
  left: var(--arch-space-3) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--arch-border-grey) !important;
  border-radius: 50% !important;
  background: var(--arch-white) !important;
  transition: all 0.15s ease !important;
}

/* Hover state - elegant */
.quiz fieldset label:hover {
  color: var(--arch-black) !important;
  border-color: var(--arch-charcoal) !important;
  background: var(--arch-bg-grey) !important;
}

.quiz fieldset label:hover::before {
  border-color: var(--arch-charcoal) !important;
}

/* Selected state - beautiful accent color */
.quiz input[type="radio"]:checked + label {
  color: var(--arch-black) !important;
  font-weight: 500 !important;
  border-color: var(--arch-accent) !important;
  background: rgba(0, 179, 51, 0.04) !important;
}

.quiz input[type="radio"]:checked + label::before {
  border-color: var(--arch-accent) !important;
  background: var(--arch-accent) !important;
  box-shadow: inset 0 0 0 3px var(--arch-white) !important;
}

/* HIDE ONLY individual question submit buttons - VERY SPECIFIC */
.quiz form button.quiz-button,
.quiz form button[type="submit"].quiz-button,
.quiz form input[type="submit"].quiz-button,
button.quiz-button,
input.quiz-button,
.quiz fieldset button[type="submit"],
.quiz fieldset input[type="submit"],
.quiz fieldset button:not(.final-submit):not([class*="final"]):not([id*="final"]),
.quiz form fieldset button,
.quiz form fieldset input[type="submit"],
.quiz form fieldset input[type="button"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ENSURE final submit buttons are ALWAYS visible - very comprehensive */
.quiz-submit-all,
button[class*="submit-all"],
button[id*="submit-all"],
input[class*="submit-all"],
input[id*="submit-all"],
.final-submit,
button.final-submit,
input.final-submit,
#quiz-submit-all,
#submit-all,
#final-submit,
button[onclick*="submitAll"],
input[onclick*="submitAll"],
.quiz-container > button,
.quiz-container > input[type="submit"],
.assessment-submit,
button.assessment-submit,
input.assessment-submit,
.quiz-final-button,
button.quiz-final-button,
input.quiz-final-button,
/* Target the actual submit buttons that exist */
.quiz form > button[type="submit"]:not(.quiz-button),
.quiz > form > button[type="submit"]:not(.quiz-button),
.quiz button[type="submit"]:not(.quiz-button):not([class*="question"]),
button[type="submit"]:not(.quiz-button):not([class*="question"]) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: linear-gradient(135deg, var(--arch-accent) 0%, var(--arch-accent-light) 50%, var(--arch-accent) 100%) !important;
  border: none !important;
  color: var(--arch-white) !important;
  padding: var(--arch-space-4) var(--arch-space-8) !important;
  font-family: var(--arch-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-radius: var(--arch-radius-lg) !important;
  cursor: pointer !important;
  margin: var(--arch-space-8) auto !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--arch-space-2) !important;
  min-width: 200px !important;
  height: 56px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 20px rgba(0, 179, 51, 0.4), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

/* Hover effects for the real submit button */
.quiz-submit-all:hover,
button[class*="submit-all"]:hover,
button[id*="submit-all"]:hover,
input[class*="submit-all"]:hover,
input[id*="submit-all"]:hover,
.final-submit:hover,
button.final-submit:hover,
input.final-submit:hover,
#quiz-submit-all:hover,
#submit-all:hover,
#final-submit:hover,
button[onclick*="submitAll"]:hover,
input[onclick*="submitAll"]:hover,
.quiz-container > button:hover,
.quiz-container > input[type="submit"]:hover,
.assessment-submit:hover,
button.assessment-submit:hover,
input.assessment-submit:hover,
.quiz-final-button:hover,
button.quiz-final-button:hover,
input.quiz-final-button:hover,
.quiz form > button[type="submit"]:not(.quiz-button):hover,
.quiz > form > button[type="submit"]:not(.quiz-button):hover,
.quiz button[type="submit"]:not(.quiz-button):not([class*="question"]):hover,
button[type="submit"]:not(.quiz-button):not([class*="question"]):hover {
  background: linear-gradient(135deg, var(--arch-accent-light) 0%, var(--arch-accent) 50%, var(--arch-accent-light) 100%) !important;
  box-shadow: 0 8px 32px rgba(0, 179, 51, 0.6), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Feedback states - subtle and refined */
.quiz label.correct {
  color: #059669 !important;
  border-color: #059669 !important;
  background: rgba(5, 150, 105, 0.04) !important;
}

.quiz label.correct::before {
  border-color: #059669 !important;
  background: #059669 !important;
}

.quiz label.wrong {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.04) !important;
}

.quiz label.wrong::before {
  border-color: #dc2626 !important;
  background: #dc2626 !important;
}

/* Content area */
.quiz .content {
  margin: 0 !important;
  color: var(--arch-charcoal) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .quiz {
    margin: var(--arch-space-4) 0 !important;
  }
  
  .quiz fieldset {
    margin: 0 0 var(--arch-space-4) 0 !important;
  }
  
  .quiz h2,
  .quiz h3 {
    font-size: 20px !important;
    padding: var(--arch-space-3) var(--arch-space-3) !important;
  }
  
  .quiz fieldset > div:first-child,
  .quiz fieldset > p:first-child {
    font-size: 15px !important;
  }
  
  .quiz fieldset label {
    font-size: 15px !important;
    padding: var(--arch-space-2) var(--arch-space-3) !important;
    padding-left: var(--arch-space-5) !important;
  }
  
  .quiz fieldset label::before {
    width: 14px !important;
    height: 14px !important;
    left: var(--arch-space-2) !important;
  }
  
  .quiz-submit-all,
  .final-submit,
  .quiz:last-of-type::after {
    font-size: 15px !important;
    height: 44px !important;
    line-height: 40px !important;
    min-width: 140px !important;
  }
}

/* === ADMONITIONS === */
.admonition {
  background: linear-gradient(135deg, rgba(0, 179, 51, 0.04) 0%, rgba(204, 0, 102, 0.04) 100%);
  border: var(--arch-border) solid var(--arch-border-grey);
  border-left: var(--arch-border-thick) solid var(--arch-accent);
  border-radius: var(--arch-radius);
  padding: var(--arch-space-4);
  margin: var(--arch-space-4) 0;
  position: relative;
}

.admonition.note {
  border-left-color: var(--arch-accent);
}

.admonition.tip {
  border-left-color: var(--arch-accent-secondary);
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.06) 0%, rgba(204, 0, 102, 0.02) 100%);
}

.admonition.warning {
  border-left-color: var(--arch-accent-dark);
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.06) 0%, rgba(204, 0, 102, 0.02) 100%);
}

.admonition-title {
  font-weight: 700;
  color: var(--arch-black);
  margin-bottom: var(--arch-space-2);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: var(--arch-space-2);
}

.admonition.tip .admonition-title::before {
  content: '💡';
  font-size: 18px;
}

.admonition.warning .admonition-title::before {
  content: '⚠️';
  font-size: 18px;
}

.admonition.note .admonition-title::before {
  content: '📝';
  font-size: 18px;
}

/* === EDUCATIONAL PROGRESS INDICATORS === */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--arch-border-grey);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--arch-space-2) 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* === SPECIAL EDUCATIONAL CARDS === */
.learning-objective {
  background: linear-gradient(135deg, rgba(0, 179, 51, 0.06) 0%, rgba(0, 179, 51, 0.03) 100%);
  border: var(--arch-border) solid var(--arch-accent);
  border-radius: var(--arch-radius-lg);
  padding: var(--arch-space-5);
  margin: var(--arch-space-5) 0;
  position: relative;
}

.learning-objective::before {
  content: '🎯';
  position: absolute;
  top: var(--arch-space-3);
  left: var(--arch-space-3);
  font-size: 24px;
}

.learning-objective h3 {
  margin-top: 0;
  padding-left: var(--arch-space-6);
  color: var(--arch-accent-dark);
}

.hands-on-activity {
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.06) 0%, rgba(204, 0, 102, 0.03) 100%);
  border: var(--arch-border) solid var(--arch-accent-secondary);
  border-radius: var(--arch-radius-lg);
  padding: var(--arch-space-5);
  margin: var(--arch-space-5) 0;
  position: relative;
}

.hands-on-activity::before {
  content: '🔧';
  position: absolute;
  top: var(--arch-space-3);
  left: var(--arch-space-3);
  font-size: 24px;
}

.hands-on-activity h3 {
  margin-top: 0;
  padding-left: var(--arch-space-6);
  color: var(--arch-accent-secondary-dark);
}

/* === SELECTION STYLING === */
::selection {
  background: linear-gradient(135deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  color: var(--arch-white);
}

::-moz-selection {
  background: linear-gradient(135deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  color: var(--arch-white);
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--arch-bg-grey);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--arch-accent-light) 0%, var(--arch-accent-secondary-light) 100%);
}

/* === SPECIAL YOUTH-FRIENDLY ENHANCEMENTS === */
.md-content .tech-tip {
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.08) 0%, rgba(0, 179, 51, 0.04) 100%);
  border: 2px solid var(--arch-accent-secondary);
  border-radius: var(--arch-radius-lg);
  padding: var(--arch-space-4);
  margin: var(--arch-space-4) 0;
  position: relative;
  box-shadow: 0 4px 16px var(--magenta-glow);
}

.md-content .tech-tip::before {
  content: '🔧';
  position: absolute;
  top: -10px;
  left: var(--arch-space-3);
  background: var(--arch-accent-secondary);
  color: var(--arch-white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.md-content .skill-check {
  background: linear-gradient(135deg, rgba(0, 179, 51, 0.08) 0%, rgba(204, 0, 102, 0.04) 100%);
  border: 2px solid var(--arch-accent);
  border-radius: var(--arch-radius-lg);
  padding: var(--arch-space-4);
  margin: var(--arch-space-4) 0;
  position: relative;
  box-shadow: 0 4px 16px var(--green-glow);
}

.md-content .skill-check::before {
  content: '✓';
  position: absolute;
  top: -10px;
  left: var(--arch-space-3);
  background: var(--arch-accent);
  color: var(--arch-white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

/* === TABLE OF CONTENTS - STREAMLINED === */
.md-sidebar--secondary {
  width: 280px; /* Slightly narrower */
}

.md-nav--secondary {
  border-left: var(--arch-border) solid var(--arch-border-grey);
  padding: var(--arch-space-4);
  position: sticky;
  top: 0;
  height: calc(100vh - 90px);
}

.md-nav--secondary .md-nav__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--arch-medium-grey);
  margin-bottom: var(--arch-space-2);
  background: none;
  border: none;
  padding: 0;
}

.md-nav--secondary .md-nav__link {
  font-size: 12px;
  color: var(--arch-light-grey);
  padding: var(--arch-space-1) 0;
  border-bottom: none;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--arch-accent);
  background: none;
  padding-left: 0;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--arch-accent-secondary);
  font-weight: 600;
  background: none;
  border-left: none;
  padding-left: 0;
  position: relative;
}

.md-nav--secondary .md-nav__link--active::before {
  content: '';
  position: absolute;
  left: -var(--arch-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, var(--arch-accent) 0%, var(--arch-accent-secondary) 100%);
  border-radius: 2px;
}