/* Interactive Learner 7.1.12 — shared learner accessibility, responsive, and design foundations. */
:root {
  --il-color-canvas: #f4f8f7;
  --il-color-surface: #ffffff;
  --il-color-surface-soft: #eef7f5;
  --il-color-text: #102a2d;
  --il-color-muted: #5b6f72;
  --il-color-border: rgba(15, 75, 77, .14);
  --il-color-primary: #0f766e;
  --il-color-primary-strong: #0b5f58;
  --il-color-focus: #0b6ea8;
  --il-color-success: #166534;
  --il-color-warning: #92400e;
  --il-color-danger: #b42318;
  --il-radius-sm: 12px;
  --il-radius-md: 18px;
  --il-radius-lg: 24px;
  --il-shadow-card: 0 16px 44px rgba(15, 42, 45, .09);
  --il-content-width: 1180px;
  --il-target-size: 44px;
  --il-space-1: .25rem;
  --il-space-2: .5rem;
  --il-space-3: .75rem;
  --il-space-4: 1rem;
  --il-space-5: 1.5rem;
  --il-space-6: 2rem;
}

[data-il-experience-version] {
  color-scheme: light;
  accent-color: var(--il-color-primary);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[data-il-experience-version],
[data-il-experience-version] *,
[data-il-experience-version] *::before,
[data-il-experience-version] *::after {
  box-sizing: border-box;
}

[data-il-experience-version] :where(img, svg, video, canvas, iframe) {
  max-width: 100%;
}
[data-il-experience-version] :where(img, video) { height: auto; }
[data-il-experience-version] :where(pre, code, kbd, samp) { overflow-wrap: normal; }
[data-il-experience-version] :where(pre) { max-width: 100%; overflow: auto; }
[data-il-experience-version] :where(h1, h2, h3, h4, h5, h6, [id]) { scroll-margin-top: 7rem; }

/* Preserve assistive price context that older WooCommerce compatibility CSS hid. */
[data-il-experience-version] :where(.price, .woocommerce-Price-amount, .il-learn-checkout-offer__price) .screen-reader-text,
.interactive-learner-learn-document :where(.price, .woocommerce-Price-amount, .il-learn-checkout-offer__price) .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: block !important;
  visibility: visible !important;
}

/* Links in prose remain identifiable without relying on colour alone. */
[data-il-experience-version] :where(p, li, dd, figcaption) a:not(.button):not([class*="__nav"]):not([class*="__button"]):not([class*="__link"]),
[data-il-experience-version] .il-learn-auth-links a {
  text-decoration-line: underline !important;
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

[data-il-experience-version] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--il-color-focus) !important;
  outline-offset: 3px !important;
  box-shadow: none;
}
[data-il-experience-version] :where(button, input[type="button"], input[type="submit"], input[type="reset"], .button, [role="button"]) {
  min-height: var(--il-target-size);
}
[data-il-experience-version] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  max-width: 100%;
  font: inherit;
}
[data-il-experience-version] :where(input[type="checkbox"], input[type="radio"]) {
  min-width: 1.25rem;
  min-height: 1.25rem;
}
[data-il-experience-version] [aria-invalid="true"] {
  border-color: var(--il-color-danger) !important;
  box-shadow: 0 0 0 1px var(--il-color-danger) !important;
}
[data-il-experience-version] :where([disabled], [aria-disabled="true"]) { cursor: not-allowed; }

.interactive-learner-table-region {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  border-radius: var(--il-radius-sm);
  -webkit-overflow-scrolling: touch;
}
.interactive-learner-table-region[data-il-overflow="true"] {
  box-shadow: inset -16px 0 18px -20px rgba(15, 42, 45, .75);
}
[dir="rtl"] .interactive-learner-table-region[data-il-overflow="true"] {
  box-shadow: inset 16px 0 18px -20px rgba(15, 42, 45, .75);
}
.interactive-learner-table-region:focus-visible {
  outline: 3px solid var(--il-color-focus);
  outline-offset: 3px;
}
.interactive-learner-table-region > table { margin-bottom: 0; }

.interactive-learner-experience-message[role="alert"] { border-color: rgba(180, 35, 24, .28); }
.interactive-learner-experience-message[role="status"] { border-color: rgba(15, 118, 110, .24); }

/* Shared live regions are visually hidden without being removed from accessibility APIs. */
.interactive-learner-experience-live-region,
.interactive-learner-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px) {
  [data-il-experience-version] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-height: 48px;
    font-size: 16px;
  }
  [data-il-experience-version] :where(.button, button, [role="button"]) {
    min-height: 48px;
  }
  [data-il-experience-version] :where(h1, h2, h3, h4, h5, h6, [id]) { scroll-margin-top: 5.5rem; }
}

@media (max-width: 480px) {
  [data-il-experience-version] { overflow-wrap: anywhere; }
  [data-il-experience-version] :where(.button, button, input[type="submit"]) { max-width: 100%; }
}

/* The learner preference applies even when the operating system does not request reduced motion. */
.interactive-learner-learn-shell--reduced-motion,
.interactive-learner-learn-shell--reduced-motion *,
.interactive-learner-learn-shell--reduced-motion *::before,
.interactive-learner-learn-shell--reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-il-experience-version],
  [data-il-experience-version] *,
  [data-il-experience-version] *::before,
  [data-il-experience-version] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (forced-colors: active) {
  [data-il-experience-version] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
  }
  [data-il-experience-version] :where(.button, button, [role="button"], [aria-current="page"], [aria-current="step"]) {
    border: 1px solid ButtonText !important;
  }
  [data-il-experience-version] :where([role="progressbar"] > span) {
    background: Highlight !important;
    forced-color-adjust: none;
  }
}

@media print {
  [data-il-experience-version] .interactive-learner-learn-shell__topbar,
  [data-il-experience-version] .interactive-learner-learn-shell__bottomnav,
  [data-il-experience-version] .interactive-learner-learn-shell__skip-link { display: none !important; }
  [data-il-experience-version] { background: #fff !important; color: #000 !important; }
}

/* Interactive Learner 7.1.22 — standalone assistive-text utility. */
[data-il-experience-version] .screen-reader-text,
.interactive-learner-learn-document .screen-reader-text {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
[data-il-experience-version] .screen-reader-text:focus,
.interactive-learner-learn-document .screen-reader-text:focus {
  position: fixed !important;
  z-index: 100000 !important;
  inset-block-start: 8px !important;
  inset-inline-start: 8px !important;
  inline-size: auto !important;
  block-size: auto !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 2px solid var(--il-color-focus) !important;
  border-radius: 8px !important;
  background: var(--il-color-surface) !important;
  color: var(--il-color-text) !important;
}