/* =========================================================
   5041 Native Training Module Layout

   Shared document-mode styling for modules converted from Reveal.js.
   Legacy module classes are intentionally retained so existing
   interactives and module-specific visual styles continue to work.
   ========================================================= */

:root {
  --red: #980000;
  --black: #090909;
  --gray: #666;
  --light: #f4f4f4;
  --white: #fff;
  --border: #d8d8d8;
  --success: #2e7d32;
  --danger: #b42318;
  --warning: #d97706;
}

/* Prevent the raw module from flashing before docs-shell.js wraps it. */
body[data-native-module="true"] > #docs-native-module-content {
  opacity: 0;
  animation: native-shell-fallback 0s linear 2s forwards;
}

@keyframes native-shell-fallback {
  to { opacity: 1; }
}

.docs-native-article {
  min-width: 0;
}

/* ---------------------------------------------------------
   Section Cards
   --------------------------------------------------------- */

.native-module-section {
  scroll-margin-top: 150px;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: 6px solid var(--red) !important;
  border-radius: 7px !important;
  padding: clamp(20px, 3vw, 34px) !important;
  margin: 0 0 22px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;

  /* Legacy modules sized many children in em relative to a ~29px
     Reveal canvas. Retaining this base preserves their proportions;
     the readability rules below clamp normal text to document sizes. */
  font-size: 29px;
}

.native-module-section.center {
  text-align: center !important;
}

.native-module-section > h1,
.native-module-section > h2,
.native-module-section > h3 {
  font-family: "Droid Sans", Arial, sans-serif !important;
  line-height: 1.15 !important;
}

.native-module-section > h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
}

.native-module-section > h2 {
  margin-top: 0 !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
}

.native-module-section > h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
}

/* Keep ordinary reading text within a comfortable range even when
   a legacy module used small slide-relative em values. */
.native-module-section p,
.native-module-section li,
.native-module-section dd,
.native-module-section dt,
.native-module-section label {
  font-size: clamp(0.9rem, 1em, 1.05rem) !important;
  line-height: 1.5 !important;
}

.native-module-section .small,
.native-module-section [class*="small"] {
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
}

.native-module-section ul,
.native-module-section ol {
  max-width: 100%;
}

.native-module-section img,
.native-module-section video,
.native-module-section canvas,
.native-module-section svg {
  max-width: 100%;
  height: auto;
}

.native-module-section iframe {
  max-width: 100%;
}

.native-module-section pre {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}

.native-module-section code {
  overflow-wrap: anywhere;
}

.native-module-section table {
  max-width: 100%;
}

/* Reveal fragments become ordinary visible document content. */
.native-module-section .fragment {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Controls should remain comfortable to use outside a slide canvas. */
.docs-native-article button,
.docs-native-article input,
.docs-native-article select,
.docs-native-article textarea {
  max-width: 100%;
  font-size: 0.92rem !important;
}

.docs-native-article button {
  min-height: 38px;
}

/* ---------------------------------------------------------
   Tags / Section Accents
   --------------------------------------------------------- */

.native-module-section > .tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 5px 9px;
  background: var(--red);
  color: #fff;
  font: 700 0.76rem "Droid Sans", Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.native-module-section > .bar,
.native-module-section > .stripe {
  position: static !important;
}

/* ---------------------------------------------------------
   Quiz Sections
   --------------------------------------------------------- */

.native-quiz-question-section {
  border-top-width: 4px !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.native-quiz-question-section > .tag {
  margin-bottom: 0.45rem;
}

.native-module-section .quiz-card {
  width: 100% !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.native-module-section .quiz-card > p {
  font: 700 1rem/1.45 "Droid Sans", Arial, sans-serif !important;
}

.native-module-section .quiz-card label {
  display: block;
  margin: 0.45rem 0;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  font: 400 0.95rem/1.4 "Droid Sans", Arial, sans-serif !important;
}

.native-module-section .quiz-card input {
  margin-right: 0.5rem;
}

.native-quiz-results-section .quiz-actions,
.native-module-section .quiz-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.native-module-section .quiz-button,
.native-module-section .certificate-download {
  padding: 0.7rem 0.95rem !important;
  font: 700 0.92rem "Droid Sans", Arial, sans-serif !important;
}

.native-module-section .result {
  font-size: 0.94rem !important;
  line-height: 1.45 !important;
}

/* ---------------------------------------------------------
   Certificate
   --------------------------------------------------------- */

.native-certificate-section {
  text-align: center !important;
}

.native-certificate-section .certificate-card {
  transform: none !important;
  width: min(1000px, 100%) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.native-certificate-section .certificate-card p,
.native-certificate-section .certificate-card h2,
.native-certificate-section .certificate-card h3,
.native-certificate-section .certificate-card div {
  line-height: 1.35;
}

#complete.locked .certificate-card {
  filter: blur(5px);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Responsive Layout
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .native-module-section {
    font-size: 27px;
  }

  .docs-native-article :is(
    .two,
    .three,
    .elec-grid-2,
    .elec-grid-3,
    .elec-grid-4,
    .motor-grid-2,
    .motor-grid-3,
    .motor-grid-4,
    .safety-grid-2,
    .safety-grid-3,
    .safety-grid-4,
    .weight-card-grid,
    .three-choice-grid,
    .impact-repair-grid,
    .maintenance-grid,
    .frcintro-grid-2,
    .frcintro-grid-3,
    .frcintro-grid-4,
    .judge-grid-2,
    .judge-grid-3,
    .media-grid-2,
    .media-grid-3,
    .topic-grid-2,
    .topic-grid-3,
    .topic-grid-4,
    .topic-checklist
  ) {
    grid-template-columns: 1fr !important;
  }

  .docs-native-article .wd-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .native-module-section {
    padding: 16px !important;
    font-size: 25px;
  }

  .docs-native-article .process-strip {
    flex-direction: column;
  }
}