/* ═══════════════════════════════════════════════════════════════════════
   GreenOps 101 — Accessibility & Enhancement Layer
   Posetiv Practitioner Course

   Loads BEFORE polish.css. Contains ONLY:
   - Skip-link for keyboard accessibility
   - Focus ring styles
   - Reduced-motion support
   - Print styles
   - Scroll reveal animation base

   Does NOT override fonts, colours, layout, or component styles.
   Those are handled by inline module CSS + polish.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── SKIP TO CONTENT — keyboard accessibility ─────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: #243007;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  z-index: 9999;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: none;
}


/* ── FOCUS RING — visible keyboard navigation ─────────────────────── */
*:focus-visible {
  outline: 2px solid #93C01F;
  outline-offset: 2px;
}

/* Remove focus ring for mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
}


/* ── REDUCED MOTION — respect user preference ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.animate {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ── SCROLL REVEAL — base animation classes ───────────────────────── */
.reveal {
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.animate {
  opacity: 0;
  transform: translateY(12px);
}
.reveal.animate.visible {
  opacity: 1;
  transform: none;
}


/* ── FONT SIZE FLOOR — readability minimum for small labels ───────── */
/* Raises the smallest label sizes (0.58-0.65rem / 9-10px) to a more  */
/* readable 0.72rem (11.5px). These are mostly uppercase JetBrains    */
/* Mono labels with letter-spacing, so 0.72rem is a practical floor.  */

.module-footer .footer-brand,
.footer-brand {
  font-size: 0.69rem !important;
}

.chart-y-label,
.chart-x-label,
.shift-num,
.dim-tab-label,
.at-num,
.scope-tag,
.takeaway-icon,
.card-label {
  font-size: 0.72rem !important;
}

/* Bump the next tier of small labels from 0.69rem to 0.75rem */
.nav-track-pill,
.nav-btn-label,
.waste-tab,
.seq-label,
.isnt-marker,
.domain-label,
.meas-col-label,
.tab-btn,
.phase-label,
.role-name,
.method-pros-label,
.method-cons-label,
.chart-x-title,
.kc-label,
.takeaway-num,
.gstat-note {
  font-size: 0.75rem !important;
}

/* Ensure body prose and card text is at least 1rem for comfortable reading */
.prose,
.card-body,
.card p {
  font-size: max(0.97rem, 1rem);
}


/* ── PRINT STYLES ─────────────────────────────────────────────────── */
@media print {
  .top-nav,
  .module-nav,
  .skip-link,
  .complete-btn,
  .nav-progress {
    display: none !important;
  }
  body {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  .module-hero {
    background: #243007 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 2rem;
    min-height: auto;
  }
  .module-content {
    padding: 1rem;
  }
  .content-section {
    break-inside: avoid;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}