/*
 * NCAS23 v23 CSS - Custom Canvas LMS Enhancement Styles
 * Updated: 2025-11-12
 * Scope: Maintain exact visuals with minimal JS; CSS drives layout and states
 * Purpose: Custom navigation, layout, and content styling for Canvas course pages
 * Note: Header element is injected via JavaScript; CSS styles the injected elements
 * 
 * Structure (v23):
 * - Title floats left (static, independent position)
 * - Links wrapper centers on full header width (overlaps title)
 * - Heading indentation: All child elements respect heading indentation using heading-section wrappers
 * - Status indicators: Quiz status icons on Core Skills page, status column on Progress page
 * - External login link: "Log in to USU Canvas" button anchored to right edge of header
 */

/* ============================================
   GLOBAL OVERFLOW PREVENTION
   Applied globally to prevent horizontal scrollbar
   ============================================ */

html {
  overflow-x: hidden !important;
  overflow-y: scroll !important; /* Always show scrollbar to prevent layout shift */
  width: 100% !important;
  max-width: 100vw !important;
  height: 100% !important; /* Ensure html fills viewport */
  scrollbar-gutter: stable !important; /* Reserve space for scrollbar to prevent layout shift */
}

/* ============================================
   GLOBAL MAX-WIDTH CONSTRAINT
   Ensure no content elements exceed 1200px width
   ============================================ */

/* Apply max-width to common content elements */
img,
table,
iframe,
div.ytplayer,
video,
audio,
figure,
blockquote,
pre,
code {
  max-width: 1200px !important;
}

/* Ensure tables specifically respect max-width and are centered */
table {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   SKIP LINK (Accessibility - Skip to Main Content)
   ============================================ */

.ncademi-skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  z-index: 10000 !important; /* Above all other content */
  padding: 8px 16px !important;
  background-color: #D87C13 !important; /* Match active nav link orange */
  color: #222222 !important; /* Match active nav link text */
  text-decoration: underline !important; /* Keep underline style */
  text-decoration-color: #222222 !important; /* Underline color */
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
  border-radius: 0 0 4px 0 !important;
  transition: top 0.2s ease !important;
}

.ncademi-skip-link:focus {
  top: 0 !important;
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  background-color: #D87C13 !important; /* Maintain orange background on focus */
  color: #222222 !important; /* Maintain text color on focus */
  text-decoration: underline !important;
  text-decoration-color: #222222 !important;
}

.ncademi-skip-link:hover {
  background-color: #D87C13 !important; /* Maintain orange background on hover */
  color: #222222 !important; /* Maintain text color on hover */
  text-decoration: underline !important;
  text-decoration-color: #222222 !important;
}

/* ============================================
  CONTENT WRAPPER OVERLAY (White cover that fades out when content loaded)
  ============================================ */

/* Ensure content-wrapper has relative positioning for absolute overlay (outside scoped block) */
#content-wrapper {
  position: relative !important;
}

/* Overlay injected by JS inside #content-wrapper to cover content until images load */
#content-wrapper-overlay {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 100; /* Above content, below header (header z-index: 1000) */
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms ease;
}

/* Fade out overlay when all images are loaded */
#content-wrapper-overlay.fade-out {
  opacity: 0;
}

/* Fade out full-body loading overlay */
#ncademi-loading-overlay.fade-out {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  #content-wrapper-overlay {
    transition: none;
    opacity: 0 !important;
  }
}

/* ============================================
   SCOPE DEFINITION
   Only apply styles on course pages, excluding:
   - Admin/accounts pages (.ncademi-excluded)
   - Admin user views (.ncademi-admin-view)
   ============================================ */

body:not(.ncademi-excluded):not(.ncademi-admin-view) {
  /* ============================================
     HEADER AND NAVIGATION STRUCTURE
     ============================================ */

  /* Header container - full width container */
  #content-header.course-content-header {
    position: relative !important; /* Enable z-index stacking to cover #application content */
    width: 100% !important;
    height: 70px !important; /* Desktop: 70px nav bar */
    min-height: 70px !important; /* Prevent height collapse during updates */
    background-color: #025191 !important;
    padding: 0 !important;
    margin: 0 !important; /* Remove any margins that could shift */
    border-bottom: 4px solid #ec8e22 !important; /* Orange accent border - full width */
    flex-shrink: 0 !important; /* Prevent header from shrinking */
    z-index: 1000 !important; /* High z-index to cover first 120px of #application */
    box-sizing: border-box !important; /* Include border in height calculation */
    contain: layout style !important; /* Optimize rendering and prevent layout shifts */
    /* Header visually covers first 120px of #application to hide Canvas header.header */
  }

  /* Header title div container - floated left, static position */
  #content-header.course-content-header .ncademi-header-title {
    float: left !important;
    position: static !important; /* Static position, independent of links */
    contain: layout style !important; /* Prevent layout shifts from affecting parent */
  }

  /* Links wrapper - centered on full header width */
  #content-header.course-content-header .ncademi-links-wrapper {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Center on full header width */
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: flex-end !important; /* Align links to bottom */
    height: 65px !important; /* 65px to account for 5px border */
    min-height: 65px !important; /* Prevent height collapse during updates */
    width: auto !important; /* Let content determine width */
    pointer-events: none !important; /* Allow clicks to pass through to nav */
    will-change: transform !important; /* Optimize transform rendering */
    contain: layout style !important; /* Prevent layout shifts from affecting parent */
  }

  /* Nav inside links wrapper - re-enable pointer events */
  #content-header.course-content-header .ncademi-links-wrapper #ncademi-nav {
    pointer-events: auto !important;
    contain: layout style !important; /* Prevent layout shifts during link updates */
  }

  /* Header title styling - visible on left side */
  /* Target h1.header-text (on core-skills page) and span.header-text (on other pages) */
  #content-header.course-content-header .ncademi-header-title h1.header-text,
  #content-header.course-content-header .ncademi-header-title span.header-text {
    display: block !important;
    padding: 5px 15px 2px 15px !important;
    font-size: 1.5rem !important;
    font-weight: lighter !important;
    color: white !important;
    background-color: #0c2336 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Ensure h1.header-text has line break support */
  #content-header.course-content-header .ncademi-header-title h1.header-text br {
    display: block;
  }

  /* Navigation container - consolidated layout and visual styling */
  #content-header.course-content-header #ncademi-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important; /* Don't grow/shrink, maintain natural width */
    height: 70px !important; /* Desktop navigation bar height - matches header */
    min-height: 70px !important; /* Prevent height collapse during updates */
    z-index: 999; /* Below header, above content */
    display: flex;
    justify-content: flex-start; /* Left-align links */
    align-items: flex-end; /* Align links to bottom */
    padding: 0px 0px 4px 0px; /* Bottom padding accounts for border, no right padding */
    flex-direction: row;
    /* Visual background: transparent base with blue gradient band */
    background-color: transparent;
    margin: 0;
    /* Create 50px blue band behind active tab - extends full width of nav */
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent calc(100% - 50px),
      #025191 calc(100% - 50px),
      #025191 100%
    );
    background-size: 100% 100%; /* Full width of nav */
    background-position: bottom left; /* Align to bottom left */
    background-repeat: no-repeat;
  }

  #content-header.course-content-header .ncademi-external-link-wrapper {
    position: absolute !important;
    right: 20px !important;
    bottom: 5px !important;
    display: flex !important;
    align-items: flex-end !important;
    height: 50px !important;
    min-height: 50px !important;
    pointer-events: auto !important;
    gap: 0 !important;
  }

  #content-header.course-content-header .ncademi-external-link-wrapper a {
    pointer-events: auto !important;
    white-space: nowrap !important;
  }

  #content-header.course-content-header .ncademi-external-link-wrapper .ncademi-external-link {
    font-size: 1rem !important;
    padding: 0 12px !important;
  }

.osep-columns {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  margin: 20px auto 0;
  padding-top: 20px;
  border-top: 1px solid #666666;
  flex-wrap: nowrap;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}

.osep-column {
  flex: 0 0 auto;
}

.osep-column--image {
  flex: 0 0 200px;
  max-width: 200px;
}

.osep-column--text {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

span.osep-column--text {
  font-size: 0.85rem !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.osep-column--image img {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .osep-column {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .osep-columns {
    flex-wrap: wrap;
  }
}

/* License section styling */
div.license {
  margin: 20px auto 0;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
}

div.license .public-license {
  display: block !important;
  margin: 0 !important;
  text-align: left !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

div.license .public-license-image-link {
  float: left !important;
  margin: 0 15px 0 0 !important;
  display: block !important;
}

div.license .public-license-text {
  display: block !important;
  white-space: normal !important;
  font-size: 0.85rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

  #content-header.course-content-header .ncademi-external-link-wrapper .external_link_icon {
    margin-inline-start: 5px;
    display: inline-block;
    text-indent: initial;
    vertical-align: middle;
    margin-top: -12px;
    width: 1em;
    height: 1em;
  }

  #content-header.course-content-header .ncademi-external-link-wrapper .external_link_icon svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
  }

  #content-header.course-content-header .ncademi-external-link-wrapper a .icon-external-link {
    margin-left: 8px;
    font-size: 1.4rem;
    line-height: 1;
  }

  /* ============================================
     NAVIGATION LINK STYLING
     ============================================ */

  /* Base navigation link styling - inactive/regular links
     3px transparent border reserves space for focus/hover outline */
  #content-header.course-content-header #ncademi-nav a,
  #content-header.course-content-header .ncademi-external-link-wrapper a {
    display: flex;
    align-items: center;
    padding: 0 24px;
    margin: 0 2px;
    margin-bottom: 0 !important;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    border: 3px solid transparent;
    background: transparent;
    border-radius: 8px;
    position: relative;
    width: auto;
    text-align: left;
    border-bottom: 3px solid transparent; /* Prevent text jumping on hover */
    height: 50px; /* Height matches blue band */
  }

  /* First link (Start Here) - add left margin to show band when active */
  #content-header.course-content-header #ncademi-nav a:first-child {
    margin-left: 30px !important;
  }

  /* Active/selected navigation link - orange tab that breaks out of background */
  #content-header.course-content-header #ncademi-nav a[style*="background: rgb(236, 142, 34)"],
  #content-header.course-content-header #ncademi-nav a.active {
    color: #222222 !important;
    font-weight: 600 !important;
    background: #ec8e22 !important; /* NCADEMI orange - using hex instead of rgb for exact color match */
    border-radius: 8px !important;
    border: 3px solid transparent !important;
    position: relative;
    z-index: 2; /* Above background gradient */
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* Make selected link non-interactive */
    pointer-events: none !important;
    cursor: default !important;
  }

  /* Navigation link hover/focus/focus-visible effects - inactive links
     Promote white 3px border without shifting layout */
  #content-header.course-content-header #ncademi-nav a:hover:not(.active):not([style*="background: rgb(236, 142, 34)"]),
  #content-header.course-content-header #ncademi-nav a:focus:not(.active):not([style*="background: rgb(236, 142, 34)"]),
  #content-header.course-content-header #ncademi-nav a:focus-visible:not(.active):not([style*="background: rgb(236, 142, 34)"]) {
    background: transparent !important;
    color: rgb(255, 255, 255) !important;
    text-decoration: underline !important;
    text-decoration-color: rgb(255, 255, 255) !important;
    text-decoration-thickness: 2px !important;
    position: relative !important;
    z-index: 3 !important; /* Above active tab (z-index: 2) */
    border-color: #ffffff !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Active links: maintain styling on hover/focus (no visual change, non-interactive) */
  #content-header.course-content-header #ncademi-nav a.active:hover,
  #content-header.course-content-header #ncademi-nav a.active:focus,
  #content-header.course-content-header #ncademi-nav a.active:focus-visible,
  #content-header.course-content-header #ncademi-nav a[style*="background: rgb(236, 142, 34)"]:hover,
  #content-header.course-content-header #ncademi-nav a[style*="background: rgb(236, 142, 34)"]:focus,
  #content-header.course-content-header #ncademi-nav a[style*="background: rgb(236, 142, 34)"]:focus-visible {
    background: #D87C13 !important;
    color: #222222 !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Progress link - ensure transparent border for visual space consistency when visible */
  #content-header.course-content-header #ncademi-nav a[href*="/grades"]:not([hidden]) {
    border: 3px solid transparent !important;
  }

  /* Home link detection - targets course home page links (any course ID) */
  #content-header.course-content-header
    #ncademi-nav
    a[href*="/courses/"]:not([href*="/assignments"]):not([href*="/pages"]):not([href*="/modules"]):not([href*="/grades"]):not([href*="/external_tools"]) {
    position: relative; /* Base styling inherited from main nav link styles */
  }

  /* Course link transitions removed for instant hover/focus effects */

  /* ============================================
     MAIN CONTENT AREA
     ============================================ */


  /* Canvas enhanced content padding */
  div.show-content.user_content.clearfix.enhanced {
    padding-top: 0px !important;
  }

  /* Header moved to document.body.firstChild by JS (like NCAS6) to persist across AJAX navigations */
  /* Header is completely outside Canvas's replaceable content areas */
  body > #content-header.course-content-header:first-child {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Hide hero box on Core Skills (home) page only */
  body.ncademi-home-page .hero-text-box {
    display: none !important;
  }

  /* Main content container - prevents scrolling under header */
  /* Constrains content to center in space remaining after 405px margin-right (hero box + 30px buffer) */
  #ncas-main.main-content,
  main {
    padding: 70px 0 0 0 !important; /* Top padding matches header height (70px) */
    padding-right: 0 !important; /* Remove right padding */
    background-color: #ffffff;
    width: 100% !important;
    max-width: calc(100vw - 405px) !important; /* Reserve 405px for hero box (375px) + 30px buffer */
    margin-left: auto !important; /* Center content in remaining space */
    margin-right: 405px !important; /* Maintain 30px buffer from hero box */
    flex: 1; /* WCAG: Allow main to grow and fill remaining space */
    margin-top: 0 !important;
    overflow-y: auto !important; /* WCAG: Ensure content is scrollable */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    position: relative;
    min-height: 0; /* WCAG: Allow flex item to shrink below content size */
    z-index: 1; /* Below header/nav */
    box-sizing: border-box !important;
  }

  /* ============================================
     PUBLIC LICENSE BLOCK ALIGNMENT
     ============================================ */
  /* Hide public license on default course home page */
  .public-license {
    display: none;
  }
  /* Public license block - constrained to center in remaining space after hero box */
  /* Calculation: 3 link-containers × 210px (200px width + 5px padding each side) + 2 gaps × 10px = 650px */
  .public-license.visible {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    box-sizing: border-box;
    text-align: left !important; /* Center align all text content */
  }



  /* 10px spacing between image and text */
  .public-license-image-link {
    margin-right: 10px !important;
    display: inline-block !important;
  }

  .public-license-text {
    display: inline !important;
  }

  /* ============================================
     BODY LAYOUT AND STRUCTURE
     ============================================ */

  /* Body flexbox layout - WCAG compliant vertical stacking */
  body {
    display: flex !important;
    flex-direction: column !important;
    /* Removed min-height: 100vh - padding-top: 70px combined with min-height causes scrollbar */
    /* Flexbox layout will naturally fill viewport without explicit min-height */
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* Prevent horizontal scrollbar */
    overflow-y: scroll !important; /* Always show scrollbar to prevent layout shift */
    width: 100% !important;
    max-width: 100vw !important; /* Ensure body doesn't exceed viewport */
    scrollbar-gutter: stable !important; /* Reserve space for scrollbar to prevent layout shift */
  }

  /* Canvas wrapper - ensure full width flexbox to prevent body whitespace */
  #application.ic-app {
    display: flex !important; /* Ensure flex layout */
    flex-direction: column !important;
    flex: 1 !important; /* Allow to grow and fill space in body flexbox */
    min-height: 0 !important; /* Allow to shrink below content size */
    width: 100% !important;
    max-width: 100vw !important; /* Prevent overflow */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    position: relative !important; /* Enable positioning context for z-index */
    z-index: 1 !important;
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    overflow-y: visible !important; /* Allow vertical scrolling */
    box-sizing: border-box !important;
  }


  .ic-Layout-wrapper,
  #wrapper.ic-Layout-wrapper {
    display: flex !important; /* Ensure flex layout */
    flex-direction: column !important;
    flex: 1 !important; /* Allow to grow and fill space in body flexbox */
    min-height: 0 !important; /* Allow to shrink below content size */
    width: 100% !important;
    max-width: 100vw !important; /* Prevent overflow */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    box-sizing: border-box !important;
  }

  /* Set max-width for all div#wrapper elements and center */
  div#wrapper.ic-Layout-wrapper {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Canvas main content area - full width flexbox layout */
  #not_right_side.ic-app-main-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important; /* Allow this element to grow and fill remaining space in body flexbox */
    min-height: 0 !important; /* Allow flex item to shrink below content size to prevent scrollbar */
    min-width: 0 !important; /* Prevent flex item from overflowing */
    width: 100% !important;
    max-width: 100% !important; /* Change from 100vw to 100% to respect parent 1200px constraint */
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important; /* Remove right padding */
    box-sizing: border-box !important; /* Include padding in width calculation */
    contain: layout style !important; /* Prevent layout shifts from affecting parent */
  }

  /* Canvas layout columns - full width flexbox */
  /* Canvas applies 48px padding-right by default to reserve space for right sidebar */
  div#main.ic-Layout-columns,
  .ic-Layout-columns {
    display: flex !important; /* Ensure flex layout */
    flex-direction: column !important;
    flex: 1 !important; /* Allow to grow and fill space in #wrapper */
    min-height: 0 !important; /* Allow to shrink below content size */
    min-width: 0 !important; /* Prevent flex item from overflowing */
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100% !important;
    max-width: 100% !important; /* Change from 100vw to 100% to respect parent 1200px constraint */
    padding-right: 0 !important; /* Remove 48px right padding that Canvas adds for sidebar */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    box-sizing: border-box !important; /* Include padding in width calculation */
    contain: layout style !important; /* Prevent layout shifts from affecting parent */
  }

  /* Content wrapper - full width flexbox */
  /* Note: position: relative moved outside scoped block for overlay positioning */
  #content-wrapper {
    display: flex !important; /* Ensure flex layout */
    flex-direction: column !important;
    flex: 1 !important; /* Allow to grow and fill space in #not_right_side */
    min-height: 0 !important; /* Allow to shrink below content size */
    width: 100% !important;
    max-width: 100% !important; /* Prevent overflow */
    min-width: 0 !important; /* Prevent flex item from overflowing */
    margin: 0 !important;
    padding-left: 30px !important;
    padding-right: 0px !important; /* Remove right padding */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    box-sizing: border-box !important;
    contain: layout style !important; /* Prevent layout shifts from affecting parent */
  }

  /* Canvas content main - handle default Canvas padding */
  div#content.ic-Layout-contentMain {
    display: flex !important; /* Ensure flex layout */
    flex-direction: column !important;
    flex: 1 !important; /* Allow to grow and fill space in #content-wrapper */
    min-height: 0 !important; /* Allow to shrink below content size */
    min-width: 0 !important; /* Prevent flex item from overflowing */
    padding: 36px 0px 0px 0px !important; /* Top padding only, bottom padding removed */
    padding-right: 0 !important; /* Remove right padding to eliminate gap */
    position: relative; /* Establish positioning context for absolutely positioned hero box */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    max-width: 100% !important;
    width: 100% !important; /* Ensure consistent width */
    box-sizing: border-box !important; /* Include padding in width calculation */
    contain: layout style !important; /* Prevent layout shifts from affecting parent */
  }

  /* Ensure proper spacing between header and main */
  #content-header + main {
    margin-top: 0; /* Body padding handles spacing, not this margin */
  }

  /* Transitions removed for instant hover/focus effects on nav links and columns */


  /* ============================================
     CANVAS UI ELEMENT HIDING
     ============================================ */

  /* Hide original Canvas left-side navigation */
  #left-side {
    display: none !important;
  }

  /* Hide Canvas header navigation and logo */
  .ic-app-header__main-navigation {
    display: none !important;
  }

  .ic-app-header__logomark-container {
    display: none !important;
    position: static !important;
  }

  /* Hide Canvas header - match both with and without .no-user class */
  header#header.ic-app-header.no-print,
  header#header.ic-app-header.no-print.no-user {
    display: none !important;
  }

  /* Hide Canvas header elements */
  .ic-app-header,
  .ic-app-header__main-navigation,
  .ic-app-header__logomark-container {
    position: static !important;
    display: none !important;
  }

  /* Hide Canvas right-side column - multiple selectors for high specificity */
  div#right-side-wrapper.ic-app-main-content__secondary,
  #application div#right-side-wrapper.ic-app-main-content__secondary,
  body div#right-side-wrapper.ic-app-main-content__secondary,
  #right-side-wrapper,
  .ic-app-main-content__secondary,
  #right-side {
    display: none !important;
  }

  /* Hide Canvas navigation toggle and breadcrumbs */
  div.ic-app-nav-toggle-and-crumbs.no-print {
    display: none !important;
  }

  /* Hide mobile Canvas header and navigation */
  header#mobile-header.no-print {
    display: none !important;
  }

  nav#mobileContextNavContainer {
    display: none !important;
  }

  /* Hide breadcrumbs container */
  div.ic-app-crumbs {
    display: none !important;
  }

  /* Hide header bar and toolbar elements */
  div.header-bar-outer-container {
    display: none !important;
  }

  /* Hide all sticky elements that could interfere with layout */
  .sticky,
  .sticky-toolbar,
  [data-sticky],
  .header-bar,
  .page-toolbar,
  .sticky-header,
  .fixed-header {
    display: none !important;
    position: static !important;
  }

  /* Header should remain static for flexbox layout (not fixed) */
  #content-header.course-content-header {
    position: static !important;
  }

  /* Ensure main element has no top margin */
  main#ncas-main.main-content {
    margin-top: 0px;
  }

  /* ============================================
     CANVAS DESIGNPLUS CONTENT LAYOUT
     ============================================ */

  /* Main Content Wrapper - reduced top margin to bring content closer to nav */
  .dp-wrapper {
    margin-top: 0;
    padding-top: 0;
    width: 100% !important;
    max-width: none !important;
  }

  /* Column Container */
  .dp-column-container {
    margin-top: 0;
    padding-top: 0;
    width: 100% !important;
    max-width: none !important;
  }

  /* Row spacing - increased by 10px to prevent overlap */
  .row.dp-col-3-eq {
    margin-bottom: 40px; /* Increased from 30px */
    margin-top: 20px; /* Add space above each row */
    width: 100% !important;
  }

  /* First row gets less top margin */
  .row.dp-col-3-eq:first-child {
    margin-top: 10px;
  }

  /* ============================================
     CELL/COLUMN HOVER EFFECTS
     ============================================ */

  /* Column base styles */
  .col-lg-4,
  .col-md-4,
  .col-12 {
    padding: 10px;
    border-radius: 8px;
    border: 2px solid transparent; /* Transparent border for hover effect */
    cursor: pointer; /* Make cells focusable for keyboard navigation */
  }

  /* Consolidated hover and focus effects - CSS handles both */
  .col-lg-4:hover,
  .col-md-4:hover,
  .col-12:hover,
  .col-lg-4:focus,
  .col-md-4:focus,
  .col-12:focus {
    border: 2px solid rgb(236, 142, 34); /* NCADEMI accent orange */
    border-radius: 8px;
    outline: none; /* Remove default outline for focus */
  }

  /* ============================================
     RESPONSIVE DESIGN
     ============================================ */

  /* Mobile responsiveness (max-width: 1000px) - stacked vertical layout */
  @media (max-width: 1000px) {
    /* Header container - stack vertically */
    #content-header.course-content-header {
      height: auto !important;
    }

    /* Header title - full width, first element, no float on mobile */
    #content-header.course-content-header .ncademi-header-title {
      float: none !important;
      width: 100% !important;
      clear: both !important;
    }

    /* Links wrapper - static position on mobile, full width */
    #content-header.course-content-header .ncademi-links-wrapper {
      position: static !important;
      transform: none !important;
      left: auto !important;
      width: 100% !important;
      height: auto !important;
    }

    #content-header.course-content-header .ncademi-header-title h1.header-text,
    #content-header.course-content-header .ncademi-header-title span.header-text {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Navigation container - stack vertically, full width */
    #content-header.course-content-header #ncademi-nav {
      flex-direction: column !important;
      width: 100% !important;
      height: auto !important;
      padding: 0 !important;
      background-image: none !important; /* Remove blue gradient band */
      background-color: transparent !important;
      box-shadow: none !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
    }

    /* Sign-in banner - full width on mobile */
    .ncademi-signin-banner {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Navigation links - full width, stack vertically */
    #content-header.course-content-header #ncademi-nav a {
      width: 100% !important;
      display: block !important;
      text-align: left !important;
      padding: 12px 30px !important;
      margin: 0 !important;
      margin-bottom: 0 !important;
      margin-left: 0 !important;
      height: auto !important;
      border-bottom: 3px solid transparent !important;
      box-sizing: border-box !important;
    }

    /* Remove first-child margin override */
    #content-header.course-content-header #ncademi-nav a:first-child {
      margin-left: 0 !important;
    }

    /* Active link - full width, no tab styling */
    #content-header.course-content-header #ncademi-nav a.active,
    #content-header.course-content-header #ncademi-nav a[style*="background: rgb(236, 142, 34)"] {
      border-radius: 0 !important;
      width: 100% !important;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
      padding: 12px 30px !important;
      height: auto !important;
      background: #ec8e22 !important; /* Full width orange background */
      color: #222222 !important;
    }

    /* Mobile: Override border-radius for hover/focus states (no rounded corners on mobile) */
    #content-header.course-content-header #ncademi-nav a:hover:not(.active):not([style*="background: rgb(236, 142, 34)"]),
    #content-header.course-content-header #ncademi-nav a:focus:not(.active):not([style*="background: rgb(236, 142, 34)"]),
    #content-header.course-content-header #ncademi-nav a:focus-visible:not(.active):not([style*="background: rgb(236, 142, 34)"]),
    #content-header.course-content-header .ncademi-external-link-wrapper a:hover,
    #content-header.course-content-header .ncademi-external-link-wrapper a:focus,
    #content-header.course-content-header .ncademi-external-link-wrapper a:focus-visible {
      border-radius: 0 !important;
    }

    #content-header.course-content-header .ncademi-external-link-wrapper {
      position: static !important;
      width: 100% !important;
      justify-content: center !important;
      padding: 10px 30px 0 !important;
      height: auto !important;
      min-height: auto !important;
    }

    #content-header.course-content-header .ncademi-external-link-wrapper a {
      width: 100% !important;
      justify-content: center;
      margin-bottom: 10px !important;
    }

    #content-header.course-content-header .ncademi-external-link-wrapper .ncademi-external-link {
      font-size: 1rem !important;
      padding: 12px 12px !important;
    }

    /* Bottom border - appears after all nav links */
    #content-header.course-content-header {
      border-bottom: 5px solid #ec8e22 !important;
    }

    /* Body padding adjustment */
    body {
      padding-top: 0 !important;
    }

    #ncas-main.main-content,
    #ncas-main.ncademi-main-layout,
    main {
      padding-top: 0 !important;
    }

    .dp-wrapper {
      margin-top: 10px;
    }

    .row.dp-col-3-eq {
      margin-bottom: 30px;
    }

    .col-lg-4,
    .col-md-4,
    .col-12 {
      margin-bottom: 15px;
    }
  }

  /* Tablet responsiveness (max-width: 992px, min-width: 769px) */
  @media (max-width: 992px) and (min-width: 769px) {
    .row.dp-col-3-eq {
      margin-bottom: 35px; /* Adjusted for tablet */
    }
  }

  /* ============================================
     ACCESSIBILITY IMPROVEMENTS
     ============================================ */

  /* Focus indicators for better accessibility */
  .col-lg-4:focus-visible,
  .col-md-4:focus-visible,
  .col-12:focus-visible {
    border: 2px solid rgb(236, 142, 34);
    box-shadow: 0 0 0 2px rgba(236, 142, 34, 0.3);
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .col-lg-4:hover,
    .col-md-4:hover,
    .col-12:hover,
    .col-lg-4:focus,
    .col-md-4:focus,
    .col-12:focus {
      border: 3px solid rgb(236, 142, 34);
    }

    #content-header.course-content-header #ncademi-nav a:hover:not(.active):not([style*="background: rgb(236, 142, 34)"]),
    #content-header.course-content-header #ncademi-nav a:focus:not(.active):not([style*="background: rgb(236, 142, 34)"]),
    #content-header.course-content-header #ncademi-nav a:focus-visible:not(.active):not([style*="background: rgb(236, 142, 34)"]),
    #content-header.course-content-header .ncademi-external-link-wrapper a:hover,
    #content-header.course-content-header .ncademi-external-link-wrapper a:focus,
    #content-header.course-content-header .ncademi-external-link-wrapper a:focus-visible {
      text-decoration: underline !important;
      text-decoration-color: rgb(255, 255, 255) !important;
      text-decoration-thickness: 2px !important;
      outline: 3px solid #ffffff !important;
      outline-offset: 1px !important;
      box-shadow: inset 0 0 0 1px #222222 !important;
      border-radius: 4px !important;
    }
  }

  /* ============================================
     UTILITY CLASSES (JavaScript-Driven Styles)
     Note: These classes are applied by JavaScript for responsive behavior
     ============================================ */

  /* Mobile responsive utility classes */
  .ncademi-mobile-header {
    height: auto !important;
  }

  .ncademi-mobile-nav {
    flex-direction: column !important;
    height: auto !important;
  }

  .ncademi-mobile-body {
    padding-top: 0 !important;
  }

  /* Desktop responsive utility classes */
  .ncademi-desktop-header {
    height: 70px !important;
  }

  .ncademi-desktop-nav {
    margin-top: 0 !important;
    flex-direction: row !important;
    height: 70px !important;
  }

  .ncademi-desktop-body {
    padding-top: 70px !important;
  }

  /* Main content layout utility */
  #ncas-main.ncademi-main-layout {
    margin-top: 0 !important; /* Body padding handles spacing */
  }

  /* End body:not(.ncademi-excluded):not(.ncademi-admin-view) */
}

/* ============================================
   HERO TEXT BOX STYLING
   Applied globally (outside scope wrapper)
   Matches NCADEMI.org design
   ============================================ */

/* Base styles */
/* Default size matches first responsive breakpoint (tablet/medium desktop) */
.hero-text-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 375px; /* Fixed width */
  background-color: #0c2336;
  color: #fff;
  padding: 8px 12px; /* Matches tablet/medium desktop breakpoint */
  border-radius: 10px 0 0 10px;
  text-align: left;
  z-index: 10; /* Above background content */
  box-sizing: border-box; /* Ensure padding is included in width */
  margin-top: 195px; /* Vertical offset from top */
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: calc(100vw - 20px); /* Prevent overflow - ensure box fits in viewport with small margin */
}

.hero-text-box h1 {
  font-size: 2.5rem;
  padding: 10px 0px 10px 10px; /* Fixed 3rem font size */
  font-weight: lighter;
  color: white;
  margin: 0;
  line-height: 1.2;
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .hero-text-box {
    position: relative;
    max-width: 100%;
    border-radius: 0;
    text-align: center;
    padding: 8px 16px;
    top: auto;
    right: auto;
  }
  .hero-text-box h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
}


/* Tablet / Small Desktop (max-width: 1024px) */
@media (max-width: 1024px) {
  .hero-text-box {
    position: relative;
    max-width: 100%;
    border-radius: 0;
    text-align: center;
    padding: 8px 16px;
    top: auto;
    right: auto;
  }
  .hero-text-box h1 {
    font-size: clamp(0.5rem, 4vw, 2.5rem);
  }
}

/* ============================================
   CUSTOM LAYOUT STYLES
   Applied globally (outside scope wrapper)
   ============================================ */

/* Custom Container Styles */
.custom-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  margin-left: 0px !important;
  margin-right: 0px !important;
  flex-wrap: wrap;
}

.top-row {
  margin-bottom: 45px; /* Increased from 40px to add 5px more space */
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Containers are now constrained by main element's max-width and margin-right */
/* No individual container constraints needed - main element handles centering */

.course-modules {
  flex-direction: column;
  gap: 20px;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* ============================================
   CORE SKILLS PAGE - STATUS KEY BANNER
   Dismissable banner showing status icon legend
   ============================================ */

/* Status key banner container */
.ncademi-status-key-banner {
  display: none; /* Hidden by default, shown via JS when user is signed in */
  position: relative;
  margin: 0 auto 20px auto;
  padding: 15px 40px 15px 15px;
  border: 1px solid #333333;
  border-radius: 8px;
  background-color: #ffffff;
  color: #333333;
  box-sizing: border-box;
  max-width: 640px;
  /* Width is set dynamically via JavaScript to match links container (up to max-width) */
}

/* Show banner when status is enabled (user signed in) */
body.ncademi-core-skills-page.ncas-status-enabled .ncademi-status-key-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

/* Status key item */
.ncademi-status-key-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status icon in key banner (matches link icons) */
.ncademi-status-key-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}

/* Pending icon */
.ncademi-status-key-icon.pending {
  background-color: #ffffff;
  color: #666666;
  border: 2px solid #666666;
}

.ncademi-status-key-icon.pending::before {
  content: '—' / "";
  display: block;
}

/* Active icon */
.ncademi-status-key-icon.active {
  background-color: #ffffff;
  color: #955823;
  border: 2px solid #955823;
}

.ncademi-status-key-icon.active::before {
  content: '\2713' / "";
  display: block;
}

/* Done icon */
.ncademi-status-key-icon.done {
  background-color: #38993D;
  color: #ffffff;
  border: 2px solid #38993D;
}

.ncademi-status-key-icon.done::before {
  content: '\2713' / "";
  display: block;
}

/* Status key label */
.ncademi-status-key-label {
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: #222222;
  margin-right: 10px;
}

/* Status key text */
.ncademi-status-key-text {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
}

/* Banner dismiss buttons - consolidated shared styles */
.ncademi-status-key-banner-dismiss,
.ncademi-signin-banner-dismiss {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background-color: transparent !important;
  z-index: 10 !important;
  color: #333333 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Ensure it's positioned on the right side */
  float: none !important;
  text-align: center !important;
  direction: ltr !important;
  /* Force right positioning even if parent has RTL */
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  /* Transition removed for instant hover/focus effects */
}

.ncademi-status-key-banner-dismiss:hover,
.ncademi-status-key-banner-dismiss:active,
.ncademi-signin-banner-dismiss:hover,
.ncademi-signin-banner-dismiss:active {
  color: #000000;
}

.ncademi-status-key-banner-dismiss:focus,
.ncademi-signin-banner-dismiss:focus {
  outline: 2px solid #D87C13;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sign-in banner for non-signed-in users on core-skills page and skill pages */
.ncademi-signin-banner {
  position: relative !important;
  margin: 0 auto 20px auto;
  padding: 15px 40px 15px 15px;
  border: 1px solid #333333;
  border-radius: 8px;
  background-color: #ffffff;
  color: #333333;
  box-sizing: border-box;
  max-width: 640px;
  /* Width is set dynamically via JavaScript to match links container (up to max-width) */
  /* Ensure dismiss button is positioned in upper right */
  overflow: visible;
  /* Ensure text direction is left-to-right for proper button positioning */
  direction: ltr !important;
  text-align: left !important;
}

/* Hide sign-in banner on skill pages when user is logged in */
body.ncas-quiz-enabled:not(.ncademi-core-skills-page) .ncademi-signin-banner {
  display: none !important;
}

/* Force dismiss button to upper right - extra specific selector */
.ncademi-signin-banner .ncademi-signin-banner-dismiss,
.ncademi-signin-banner button.ncademi-signin-banner-dismiss,
button.ncademi-signin-banner-dismiss,
.ncademi-signin-banner-dismiss {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  float: none !important;
  clear: both !important;
  transform: translateX(0) !important;
  /* Ensure it overrides any Canvas CSS */
  box-sizing: border-box !important;
}

.ncademi-signin-banner-message {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
  text-align: center;
}

.ncademi-signin-banner-message a {
  color: #006199;
  text-decoration: none !important;
  border-bottom: 1px solid #222222;
  display: inline;
}

.ncademi-signin-banner-message a:hover {
  color: #222222;
  text-decoration: none !important;
  border-bottom-color: #D87C13;
  outline: 2px solid #D87C13;
  outline-offset: 2px;
  border-radius: 2px;
}

.ncademi-signin-banner-message a:focus {
  color: #222222;
  text-decoration: none !important;
  border-bottom-color: #D87C13;
  outline: 2px solid #D87C13;
  outline-offset: 2px;
  border-radius: 2px;
}


/* Custom Row Styles */
.custom-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Link Container */
.link-container {
  width: 200px;
  height: auto;
  padding: 5px;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Custom Link Styles */
.custom-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid #ddd;
  border-radius: 8px;
  background-color: #fff !important;
  /* Transition removed for instant hover/focus effects */
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  padding: 10px;
}

/* Override Canvas global link styles for custom-link elements */
/* Prevent Canvas .user_content a and .mceContentBody a from adding underlines to custom-link */
.user_content .custom-link:not(.btn):not(.Button):not(.ui-button):not([role=button]),
.mceContentBody .custom-link:not(.btn):not(.Button):not(.ui-button):not([role=button]),
.user_content a.custom-link:not(.btn):not(.Button):not(.ui-button):not([role=button]),
.mceContentBody a.custom-link:not(.btn):not(.Button):not(.ui-button):not([role=button]) {
  text-decoration: none !important;
}

/* Override Canvas a:focus and a:hover for custom-link elements */
.custom-link:focus,
.custom-link:hover,
a.custom-link:focus,
a.custom-link:hover {
  text-decoration: none !important;
}

/* Ensure custom-link images don't get underlines from Canvas styles */
.custom-link img {
  text-decoration: none !important;
}

.large {
  height: 200px;
  min-height: 200px;
}

.small {
  height: 150px;
  min-height: 150px;
}

/* Custom Link Hover and Focus States - consolidated */
.custom-link.small:hover,
.custom-link.small:focus,
.custom-link.small:focus-visible,
.custom-link.large:hover,
.custom-link.large:focus,
.custom-link.large:focus-visible {
  border-color: rgb(236, 142, 34);
  box-shadow: 0 4px 8px rgba(236, 142, 34, 0.3);
  transform: translateY(-2px);
  outline: none;
}

/* Only .small and .large links receive focus - make all other links not focusable */
.custom-link:not(.small):not(.large) {
  pointer-events: none;
}

.custom-link:not(.small):not(.large) * {
  pointer-events: none;
}

/* Make images and text within non-focusable links also non-focusable */
.custom-link:not(.small):not(.large) img,
.custom-link:not(.small):not(.large) .link-text {
  pointer-events: none;
}

/* Custom Link Images */
.custom-link img {
  max-width: 100%;
  max-height: 80%;
  object-fit: contain;
  margin-bottom: 8px;
  border-radius: 4px;
}

/* Override Canvas link color variable */
:root {
  --ic-link-color: #006199;
}

/* Override any links using the Canvas link color variable */
/* Note: .link-text is handled separately below - this rule doesn't apply to it due to specificity */
a[style*="--ic-link-color"],
a[style*="var(--ic-link-color)"] {
  color: #666666 !important; /* Override var(--ic-link-color) default */
}

/* Custom Link Text - NOT dynamic based on status */
.link-text {
  font-size: 1.25rem;
  font-weight: 400;
  color: #006199 !important; /* Normal link text color */
  text-align: center;
  line-height: 1.2;
  margin-top: auto;
  text-decoration: underline;
  text-decoration-color: #006199 !important; /* Normal underline color */
  text-underline-offset: 2px;
}

/* Custom Link Hover/Focus Text Color - NOT dynamic based on status */
.custom-link.small:hover .link-text,
.custom-link.large:hover .link-text,
.custom-link.small:focus .link-text,
.custom-link.large:focus .link-text,
.custom-link.small:focus-visible .link-text,
.custom-link.large:focus-visible .link-text,
a:hover .link-text,
a:focus .link-text,
a:focus-visible .link-text,
.link-text:hover,
.link-text:focus,
.link-text:focus-visible {
  color: #222222 !important; /* Hover/focus link text color */
  text-decoration-color: #D87C13 !important; /* Hover/focus underline color */
}

/* WCAG 2.2 AA Compliance Enhancements - focus-visible styles consolidated above */

/* ============================================
   QUIZ BUTTON STYLES
   Button-styled links for quiz navigation
   Based on Canvas button styles from default.css
   ============================================ */

a.quiz-button {
  /* Base button styles from default.css */
  background: #2B7ABC !important;
  color: #fff !important;
  border: 1px solid #2B7ABC !important;
  border-radius: 3px !important;
  /* Transitions removed for instant hover/focus effects */
  display: inline-block !important;
  position: relative !important;
  padding: 8px 14px !important;
  margin: 0 10px 0 10px !important;
  font-size: 16px !important;
  font-size: 1rem !important;
  line-height: 22px !important;
  text-align: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-shadow: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

a.quiz-button:focus {
  background: #D87C13 !important; /* Orange fill on focus */
  color: #222222 !important; /* Dark text on focus */
  border-color: #D87C13 !important;
  /* Rounded double border: black inside, white outside - match nav bar links */
  outline: 3px solid #ffffff !important;
  outline-offset: 1px !important;
  box-shadow: inset 0 0 0 1px #222222 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

a.quiz-button:hover {
  background: #D87C13 !important; /* Orange fill on hover */
  color: #222222 !important; /* Dark text on hover */
  border-color: #D87C13 !important;
  /* Rounded double border: black inside, white outside - match nav bar links */
  outline: 3px solid #ffffff !important;
  outline-offset: 1px !important;
  box-shadow: inset 0 0 0 1px #222222 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

a.quiz-button:active {
  background: #015a26 !important; /* Even darker green when active */
  color: #fff !important;
}

a.quiz-button.quiz-button--done {
  background: #38993D !important;
  border-color: #38993D !important;
  color: #ffffff !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
  outline: none !important;
}

a.quiz-button.quiz-button--done:hover,
a.quiz-button.quiz-button--done:focus,
a.quiz-button.quiz-button--done:focus-visible {
  background: #38993D !important;
  border-color: #38993D !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hide quiz sections by default on skill pages (pages with quiz buttons but not Core Skills page) */
/* This ensures quiz button and text are hidden immediately on page load, before JavaScript runs */
body:not(.ncademi-core-skills-page) .ncas-quiz-section {
  display: none !important;
}

/* Show quiz sections when enabled (logged-in users) - higher specificity overrides default hide */
body.ncas-quiz-enabled .ncas-quiz-section {
  display: block !important;
}

/* Also hide quiz sections when hidden class is explicitly set (for consistency) */
body.ncas-quiz-buttons-hidden:not(.ncas-quiz-enabled) .ncas-quiz-section {
  display: none !important;
}

/* Hide quiz buttons by default on skill pages (pages with quiz buttons but not Core Skills page) */
/* This ensures quiz buttons are hidden immediately on page load, before JavaScript runs */
body:not(.ncademi-core-skills-page) a.quiz-button {
  display: none !important;
}

/* Show quiz buttons when enabled (logged-in users) - higher specificity overrides default hide */
body.ncas-quiz-enabled a.quiz-button {
  display: inline-block !important;
}

/* Also hide quiz buttons when hidden class is explicitly set (for consistency) */
body.ncas-quiz-buttons-hidden:not(.ncas-quiz-enabled) a.quiz-button {
  display: none !important;
}

/* Reduced motion support for quiz buttons */
@media (prefers-reduced-motion: reduce) {
  a.quiz-button {
    transition: none !important;
  }
}

/* High contrast mode support for custom links */
@media (prefers-contrast: high) {
  .custom-link.small,
  .custom-link.large {
    border-color: #000;
    background-color: #fff;
  }

  .custom-link.small:hover,
  .custom-link.large:hover,
  .custom-link.small:focus,
  .custom-link.large:focus {
    border-color: #000;
    background-color: #fff;
    outline: 3px solid #000;
  }

  .link-text {
    color: #000;
  }

  .custom-link.small:hover .link-text,
  .custom-link.large:hover .link-text,
  .custom-link.small:focus .link-text,
  .custom-link.large:focus .link-text {
    color: #000;
  }
}

/* Reduced motion support for custom links */
@media (prefers-reduced-motion: reduce) {
  .custom-link.small,
  .custom-link.large {
    transition: none;
  }

  .custom-link.small:hover,
  .custom-link.large:hover,
  .custom-link.small:focus,
  .custom-link.large:focus {
    transform: none;
  }
}

/* ============================================
   CORE SKILLS PAGE - CHECKMARK ICONS
   Add checkmark in circle to upper-right corner of all links
   ============================================ */

/* Step 1: Make links on core-skills page position relative for absolute positioning of checkmark */
body.ncademi-core-skills-page .custom-link.small,
body.ncademi-core-skills-page .custom-link.large {
  position: relative;
  /* Ensure enough space in upper-right corner for the icon - adjust padding to accommodate checkmark */
  padding-top: 10px; /* Keep existing top padding */
  padding-right: 10px; /* Keep existing right padding - checkmark positioned outside border */
  padding-bottom: 10px; /* Keep existing bottom padding */
  padding-left: 10px; /* Keep existing left padding */
}

/* Step 2: Create icon using ::after pseudo-element - Hidden by default, only shown when user is signed in */
/* Status icons are hidden by default and only shown when ncas-status-enabled class is added to body */
body.ncademi-core-skills-page .custom-link.small::after,
body.ncademi-core-skills-page .custom-link.large::after {
  display: none !important; /* Hidden by default - only show when status is enabled */
}


/* Only show status icons when user is signed in and status has been applied */
body.ncademi-core-skills-page.ncas-status-enabled .custom-link.small::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link.large::after {
  display: flex !important; /* Show icon when status is enabled */
  content: '—' / ""; /* Em dash for pending status */
  font-family: Arial, sans-serif; /* Font that renders well */
  position: absolute;
  top: 8px; /* Position in upper-right corner */
  right: 8px; /* Position in upper-right corner */
  
  /* Circle styling */
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px; /* Size of the circle */
  background-color: #ffffff; /* Default: Pending style - White fill */
  color: #666666; /* Default: Pending style - Gray dash */
  border: 2px solid #666666; /* Default: Pending style - Gray border */
  border-radius: 50%; /* Makes it a perfect circle */
  
  /* Icon styling */
  font-size: 10px; /* Size of the dash/icon - smaller for pending dash */
  font-weight: bold;
  line-height: 1; /* Center the icon vertically */
  
  /* Ensure it doesn't interfere with link functionality */
  pointer-events: none; /* Prevent clicks on the icon from affecting the link */
  z-index: 10; /* Ensure it appears above other elements */
}

/* Pending style - Gray dash on white fill with gray border, and gray link text */
body.ncademi-core-skills-page.ncas-status-enabled .custom-link[data-status="pending"].small::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link[data-status="pending"].large::after {
  background-color: #ffffff !important;
  color: #666666 !important;
  border: 2px solid #666666 !important;
  content: '—' / ""; /* Em dash for pending */
}

/* Link text is NOT dynamic based on status - styling handled by .link-text rules above */

/* Active style - Orange/brown checkmark on white fill with orange/brown border */
body.ncademi-core-skills-page.ncas-status-enabled .custom-link[data-status="active"].small::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link[data-status="active"].large::after {
  background-color: #ffffff !important;
  color: #955823 !important;
  border: 2px solid #955823 !important;
  content: '\2713' / ""; /* Checkmark for active */
}

/* Done style - White checkmark on green fill with green border */
body.ncademi-core-skills-page.ncas-status-enabled .custom-link[data-status="done"].small::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link[data-status="done"].large::after {
  background-color: #38993D !important;
  color: #ffffff !important;
  border: 2px solid #38993D !important;
  content: '\2713' / ""; /* Checkmark for done */
}

/* Step 3: Ensure checkmark remains visible on hover/focus (optional - can be removed if you want it to hide) */
body.ncademi-core-skills-page.ncas-status-enabled .custom-link.small:hover::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link.large:hover::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link.small:focus::after,
body.ncademi-core-skills-page.ncas-status-enabled .custom-link.large:focus::after {
  opacity: 1; /* Keep visible on hover/focus */
}

/* ============================================
   GRADES PAGE STYLING
   Applied globally (outside scope wrapper)
   ============================================ */

/* Hide Canvas grade summary menu and navigation pills (not for admins) */
body:not(.ncademi-admin-view) div#GradeSummarySelectMenuGroup {
  display: none !important;
}

body:not(.ncademi-admin-view) ul#navpills {
  display: none !important;
}

/* Grades table styling - font sizes apply to both admins and students */
table#grades_summary {
  /* Increase th font size to 1.25rem */
  thead th,
  tbody th {
    font-size: 1.25rem !important;
  }

  /* Increase td font size to 1rem */
  tbody td {
    font-size: 1rem !important;
  }

  /* Style for injected grade icons */
  tbody tr th.title {
    position: relative;
    display: flex;
    align-items: center;
  }

  tbody tr th.title img.ncademi-grade-icon {
    width: 60px !important;
    height: 60px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    flex-shrink: 0;
    object-fit: contain;
  }

  tbody tr th.title a {
    display: inline-flex;
    align-items: center;
  }
}

/* Hide "Your Progress" or "Grades for..." H1 heading on grades page (not for admins) */
body:not(.ncademi-admin-view) .ic-Action-header__Heading,
body:not(.ncademi-admin-view) h1.ic-Action-header__Heading {
  display: none !important;
}

/* Hide grade table columns (not for admins) */
body:not(.ncademi-admin-view) table#grades_summary thead tr th:nth-child(2), /* Hide "Due" column header */
body:not(.ncademi-admin-view) table#grades_summary thead tr th:nth-child(3), /* Hide "Submitted" column header */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.due, /* Hide "Due" column data */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.submitted, /* Hide "Submitted" column data */
body:not(.ncademi-admin-view) table#grades_summary tbody tr.group_total,
body:not(.ncademi-admin-view) table#grades_summary tbody tr th.title div.context {
  display: none !important;
}

/* Hide columns with no visible header text (screenreader-only or empty) */
body:not(.ncademi-admin-view) table#grades_summary thead tr th#asset_processors_header,
body:not(.ncademi-admin-view) table#grades_summary thead tr th:empty,
/* Hide columns with screenreader-only text (Details and Submission Progress Status) */
body:not(.ncademi-admin-view) table#grades_summary thead tr th:nth-child(6),
body:not(.ncademi-admin-view) table#grades_summary thead tr th:nth-child(7),
body:not(.ncademi-admin-view) table#grades_summary thead tr th:nth-child(8),
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.asset_processors_cell,
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.details,
body:not(.ncademi-admin-view) table#grades_summary tbody tr td:last-child {
  display: none !important;
}

/* Center-align all header text in grades table */
body:not(.ncademi-admin-view) table#grades_summary thead tr th {
  text-align: center !important;
}

/* Show Status column (previously hidden, now visible) */
body:not(.ncademi-admin-view) table#grades_summary thead tr th.status,
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status {
  display: table-cell !important;
}


/* Table width and centering */
body:not(.ncademi-admin-view) table#grades_summary {
  table-layout: fixed !important;
  width: 400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Name column: 250px wide, header centered, content left-aligned */
body:not(.ncademi-admin-view) table#grades_summary thead tr th:first-child {
  width: 250px !important;
  text-align: center !important; /* Header centered */
}
body:not(.ncademi-admin-view) table#grades_summary tbody tr th.title {
  width: 250px !important;
  text-align: left !important; /* Content left-aligned */
}

/* Status column: 150px wide, header centered, content centered */
body:not(.ncademi-admin-view) table#grades_summary thead tr th.status {
  width: 150px !important;
  text-align: center !important; /* Header centered */
}
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status {
  width: 150px !important;
  text-align: center !important; /* Content centered */
}

/* Score column: 100px wide, header centered, content centered */
body:not(.ncademi-admin-view) table#grades_summary thead tr th.assignment_score {
  width: 100px !important;
  text-align: center !important; /* Header centered */
}
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.assignment_score {
  width: 100px !important;
  text-align: center !important; /* Content centered */
}

/* ============================================
   GRADES PAGE - STATUS COLUMN ICONS
   Add circle icons after status text (Pending, Active, Done) - same style as Core Skills
   ============================================ */

/* Keep status cells as table cells, center-align content with icon first */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status {
  display: table-cell !important; /* Keep table cell alignment with header */
  text-align: center !important; /* Center-align content */
  font-size: 1.25rem !important; /* Base font size for status text */
  color: #222222 !important; /* All status text color */
  font-weight: 400 !important; /* All status text weight */
  font-style: normal !important; /* No italics */
  position: relative; /* For positioning ::before icon */
  padding-left: 0 !important; /* No left padding needed for centered content */
}

body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status .ncademi-status-text {
  display: inline-block;
  vertical-align: middle;
  color: #222222 !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  margin-left: 15px; /* 20px space after icon */
}

/* Status text colors - all use same color now */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status[data-status="pending"] {
  color: #222222 !important;
  font-style: normal !important;
}

body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status[data-status="active"] {
  color: #222222 !important;
  font-weight: 400 !important;
}

body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status[data-status="done"] {
  color: #222222 !important;
  font-weight: 400 !important;
}

/* Add circle icon using ::before pseudo-element - Icon comes FIRST */
/* NOTE: Icon is decorative - nearby status text provides alternative text for screen readers */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status::before {                                                                  
  content: '—' / ""; /* Em dash for pending - decorative only, text provides context */                                                                              
  font-family: Arial, sans-serif;
  
  /* Circle styling - same as Core Skills */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px; /* Size of the circle */
  height: 20px; /* Size of the circle */
  background-color: #ffffff; /* Default: Pending style - White fill */
  color: #666666; /* Default: Pending style - Gray dash */
  border: 2px solid #666666; /* Default: Pending style - Gray border */
  border-radius: 50%; /* Makes it a perfect circle */
  
  /* Icon styling */
  font-size: 10px; /* Size of the dash/icon - smaller for pending dash */
  font-weight: bold;
  line-height: 1; /* Center the icon vertically */
  vertical-align: middle; /* Align with text */
  margin-right: 0; /* Space handled by text margin-left */
}

/* Pending status - Gray dash on white fill with gray border */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status[data-status="pending"]::before {                                           
  content: '—' / "";
  background-color: #ffffff !important;
  color: #666666 !important;
  border: 2px solid #666666 !important;
}

/* Active status - Orange/brown checkmark on white fill with orange/brown border */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status[data-status="active"]::before {                                            
  content: '\2713' / ""; /* Checkmark for active */
  background-color: #ffffff !important;
  color: #955823 !important;
  border: 2px solid #955823 !important;
  font-size: 12px; /* Slightly larger for checkmark */
}

/* Done status - White checkmark on green fill with green border */
body:not(.ncademi-admin-view) table#grades_summary tbody tr td.status.ncademi-status[data-status="done"]::before {                                              
  content: '\2713' / ""; /* Checkmark for done */
  background-color: #38993D !important;
  color: #ffffff !important;
  border: 2px solid #38993D !important;
  font-size: 12px; /* Slightly larger for checkmark */
}

/* Reduce Name column padding by 50% (typical Canvas table cell padding is ~1rem, so 50% = 0.5rem) */
body:not(.ncademi-admin-view) table#grades_summary thead tr th:first-child,
body:not(.ncademi-admin-view) table#grades_summary tbody tr th.title {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Hide Print Grades button (not for admins) */
body:not(.ncademi-admin-view) #print-grades-button,
body:not(.ncademi-admin-view) #print-grades-button-container {
  display: none !important;
}

/* Disable What-If grades, sorting, and interactive features on grades page */
/* Keep Score column values visible but make them read-only - CSS only, no JS */
body:not(.ncademi-admin-view) .assignment_score {
  pointer-events: none !important;
  cursor: default !important;
  /* Ensure visibility */
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Disable all interactive elements within Score column */
body:not(.ncademi-admin-view) .assignment_score * {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
}

body:not(.ncademi-admin-view) .assignment_score .grade,
body:not(.ncademi-admin-view) .assignment_score .tooltip,
body:not(.ncademi-admin-view) .grade_tooltip {
  /* Ensure visibility */
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Disable inputs in Score column */
body:not(.ncademi-admin-view) .assignment_score input,
body:not(.ncademi-admin-view) .assignment_score input[type="text"],
body:not(.ncademi-admin-view) .assignment_score input[type="number"] {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
  background-color: transparent !important;
  border: none !important;
  /* Keep visible */
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Disable contenteditable elements in Score column */
body:not(.ncademi-admin-view) .assignment_score [contenteditable="true"],
body:not(.ncademi-admin-view) .assignment_score [contenteditable] {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
}

/* Ensure elements removed from keyboard navigation cannot receive focus */
/* Primary target: .grade elements within .assignment_score */
body:not(.ncademi-admin-view) .assignment_score .grade[tabindex="-1"],
body:not(.ncademi-admin-view) .assignment_score input[tabindex="-1"],
body:not(.ncademi-admin-view) .assignment_score [contenteditable][tabindex="-1"],
body:not(.ncademi-admin-view) #assignment_sort_order_select_menu[tabindex="-1"],
body:not(.ncademi-admin-view) #apply_select_menus[tabindex="-1"],
body:not(.ncademi-admin-view) #student-grades-whatif input[tabindex="-1"],
body:not(.ncademi-admin-view) #student-grades-revert button[tabindex="-1"],
body:not(.ncademi-admin-view) .revert_all_scores_link[tabindex="-1"] {
  outline: none !important;
}

body:not(.ncademi-admin-view) .assignment_score .grade[tabindex="-1"]:focus,
body:not(.ncademi-admin-view) .assignment_score input[tabindex="-1"]:focus,
body:not(.ncademi-admin-view) .assignment_score [contenteditable][tabindex="-1"]:focus,
body:not(.ncademi-admin-view) #assignment_sort_order_select_menu[tabindex="-1"]:focus,
body:not(.ncademi-admin-view) #apply_select_menus[tabindex="-1"]:focus,
body:not(.ncademi-admin-view) #student-grades-whatif input[tabindex="-1"]:focus,
body:not(.ncademi-admin-view) #student-grades-revert button[tabindex="-1"]:focus,
body:not(.ncademi-admin-view) .revert_all_scores_link[tabindex="-1"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Disable sorting dropdown */
body:not(.ncademi-admin-view) #assignment_sort_order_select_menu,
body:not(.ncademi-admin-view) #assignment_sort_order_select_menu * {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Disable Apply button */
body:not(.ncademi-admin-view) #apply_select_menus,
body:not(.ncademi-admin-view) #apply_select_menus * {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Disable What-If score inputs in right sidebar (keep visible for reference) */
body:not(.ncademi-admin-view) #student-grades-whatif input,
body:not(.ncademi-admin-view) #student-grades-whatif .grade,
body:not(.ncademi-admin-view) #student-grades-whatif input[type="text"],
body:not(.ncademi-admin-view) #student-grades-whatif input[type="number"] {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
  background-color: transparent !important;
  /* Keep visible for reference */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Disable revert scores button */
body:not(.ncademi-admin-view) #student-grades-revert button,
body:not(.ncademi-admin-view) .revert_all_scores_link,
body:not(.ncademi-admin-view) #student-grades-revert button *,
body:not(.ncademi-admin-view) .revert_all_scores_link * {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ============================================
   PAGE CONTENT STYLING
   Applied globally (outside scope wrapper)
   Based on analysis of https://ncademi.org/
   ============================================ */

/* Base heading styles - matching NCADEMI.org computed CSS */
h1 {
  font-family: "Calibri", sans-serif !important;
  font-size: 2em; /* Base browser default */
  font-weight: 500 !important;
  color: #005190;
  text-align: left;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

h2 {
  font-family: "Calibri", sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: #D87C13; /* NCADEMI orange */
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

h3 {
  font-family: "Calibri", sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #0c2336;
  text-align: left;
  margin: 1em 0 0.5em 1rem;
  line-height: 1.4;
}

h4 {
  font-family: "Calibri", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #333333;
  text-align: left;
  margin: 1em 0 0.5em 2rem;
  line-height: 1.4;
}

/* Heading indentation within heading-group and heading-section - relative to PRECEDING nearest heading one level up */
/* Each heading level only looks at its immediate parent level (one level up) */
/* With section structure, headings are always first child of their section */

/* h2 is base level (no indent) */
.heading-group > h2,
.heading-section > h2 {
  margin-left: 0 !important;
}

/* h3: indented 1rem relative to PRECEDING h2 (h2's 0 + 1rem = 1rem) */
/* h3 in a section that follows or is nested after a section containing h2 */
.heading-section:has(> h2) ~ .heading-section > h3,
.heading-section:has(> h2) .heading-section > h3 {
  margin-left: 1rem !important;
}

/* h3 without h2 context - base indent */
.heading-section > h3:first-child {
  margin-left: 1rem !important;
}

/* Legacy support: h3 as direct child (without sections) */
.heading-group > h3:first-child {
  margin-left: 1rem !important;
}
.heading-group > h2 ~ h3 {
  margin-left: 1rem !important;
}

/* h4: indented 1rem relative to PRECEDING h3 ONLY (h3's 1rem + 1rem = 2rem) */
/* h4 in a section that follows or is nested after a section containing h3 */
.heading-section:has(> h3) ~ .heading-section > h4,
.heading-section:has(> h3) .heading-section > h4 {
  margin-left: 2rem !important;
}

/* h4 without h3 context - base indent */
.heading-section > h4:first-child {
  margin-left: 1rem !important;
}

/* Legacy support: h4 as direct child (without sections) */
.heading-group > h4:first-child {
  margin-left: 1rem !important;
}
.heading-group > h3 ~ h4 {
  margin-left: 2rem !important;
}

/* h5: indented 1rem relative to PRECEDING h4 ONLY (h4's 2rem + 1rem = 3rem) */
/* h5 in a section that follows or is nested after a section containing h4 */
.heading-section:has(> h4) ~ .heading-section > h5,
.heading-section:has(> h4) .heading-section > h5 {
  margin-left: 3rem !important;
}

/* h5 without h4 context - base indent */
.heading-section > h5:first-child {
  margin-left: 1rem !important;
}

/* Legacy support: h5 as direct child (without sections) */
.heading-group > h5:first-child {
  margin-left: 1rem !important;
}
.heading-group > h4 ~ h5 {
  margin-left: 3rem !important;
}

/* Indent all content elements after headings based on immediate parent heading */
/* Uses .heading-section wrapper to isolate each heading and its content for reliable indentation */
/* Each heading-section contains one heading and its direct content, preventing cross-contamination */
/* Supports nested heading-sections for sub-sections */
/*
 * Indentation rules:
 * - Lists (ul, ol): heading's margin-left + 2rem
 * - Lists that follow a paragraph: 1rem deeper than that paragraph
 * - Other elements: heading's margin-left + 1rem
 * - Exceptions (no additional indent): img, div.ytplayer, a.quiz-button (match heading's margin-left exactly)
 */

/* Content after h2 (h2 has 0rem indent) */
/* Regular content: 0rem + 1rem = 1rem */
.heading-section > h2 ~ p,
.heading-section > h2 ~ div:not(h2):not(h3):not(h4):not(h5):not(h6):not(.heading-section):not(.ytplayer):not(.ncademi-signin-banner),
.heading-section > h2 ~ table,
.heading-section > h2 ~ blockquote,
.heading-section > h2 ~ pre {
  margin-left: 1rem !important;
}

/* Lists after h2: 0rem + 2rem = 2rem */
.heading-section > h2 ~ ul,
.heading-section > h2 ~ ol {
  margin-left: 2rem !important;
}

/* Exceptions after h2: 0rem (match heading exactly) */
.heading-section > h2 ~ img,
.heading-section > h2 ~ div.ytplayer,
.heading-section > h2 ~ div.ncademi-signin-banner,
.heading-section > h2 ~ a.quiz-button {
  margin-left: 0 !important;
}

/* Content after h3 (h3 has 1rem indent) */
/* Regular content: 1rem + 1rem = 2rem */
.heading-section > h3 ~ p,
.heading-section > h3 ~ div:not(h2):not(h3):not(h4):not(h5):not(h6):not(.heading-section):not(.ytplayer):not(.ncademi-signin-banner),
.heading-section > h3 ~ table,
.heading-section > h3 ~ blockquote,
.heading-section > h3 ~ pre {
  margin-left: 2rem !important;
}

/* Lists after h3: 1rem + 2rem = 3rem */
.heading-section > h3 ~ ul,
.heading-section > h3 ~ ol {
  margin-left: 3rem !important;
}

/* Exceptions after h3: 1rem (match heading exactly) */
.heading-section > h3 ~ img,
.heading-section > h3 ~ div.ytplayer,
.heading-section > h3 ~ div.ncademi-signin-banner,
.heading-section > h3 ~ a.quiz-button {
  margin-left: 1rem !important;
}

/* Content after h4 (h4 has 2rem indent) */
/* Regular content: 2rem + 1rem = 3rem */
.heading-section > h4 ~ p,
.heading-section > h4 ~ div:not(h2):not(h3):not(h4):not(h5):not(h6):not(.heading-section):not(.ytplayer):not(.ncademi-signin-banner),
.heading-section > h4 ~ table,
.heading-section > h4 ~ blockquote,
.heading-section > h4 ~ pre {
  margin-left: 3rem !important;
}

/* Lists after h4: 2rem + 2rem = 4rem */
.heading-section > h4 ~ ul,
.heading-section > h4 ~ ol {
  margin-left: 4rem !important;
}

/* Exceptions after h4: 2rem (match heading exactly) */
.heading-section > h4 ~ img,
.heading-section > h4 ~ div.ytplayer,
.heading-section > h4 ~ div.ncademi-signin-banner,
.heading-section > h4 ~ a.quiz-button {
  margin-left: 2rem !important;
}

/* Content after h5 (h5 has 3rem indent) */
/* Regular content: 3rem + 1rem = 4rem */
.heading-section > h5 ~ p,
.heading-section > h5 ~ div:not(h2):not(h3):not(h4):not(h5):not(h6):not(.heading-section):not(.ytplayer):not(.ncademi-signin-banner),
.heading-section > h5 ~ table,
.heading-section > h5 ~ blockquote,
.heading-section > h5 ~ pre {
  margin-left: 4rem !important;
}

/* Lists after h5: 3rem + 2rem = 5rem */
.heading-section > h5 ~ ul,
.heading-section > h5 ~ ol {
  margin-left: 5rem !important;
}

/* Exceptions after h5: 3rem (match heading exactly) */
.heading-section > h5 ~ img,
.heading-section > h5 ~ div.ytplayer,
.heading-section > h5 ~ div.ncademi-signin-banner,
.heading-section > h5 ~ a.quiz-button {
  margin-left: 3rem !important;
}

/* Lists immediately following a paragraph inherit the paragraph indent + 1rem */
.heading-section > h2 ~ p + ul,
.heading-section > h2 ~ p + ol {
  margin-left: 2rem !important;
}
.heading-section > h3 ~ p + ul,
.heading-section > h3 ~ p + ol {
  margin-left: 3rem !important;
}
.heading-section > h4 ~ p + ul,
.heading-section > h4 ~ p + ol {
  margin-left: 4rem !important;
}
.heading-section > h5 ~ p + ul,
.heading-section > h5 ~ p + ol {
  margin-left: 5rem !important;
}

/* Fallback for paragraph/list patterns outside heading sections */
p + ul,
p + ol {
  margin-left: 1rem;
  padding-left: 1rem;
}

div.ytplayer iframe + p,
img + p
 {
  margin-left: 1em !important;
}


h5 {
  font-family: "Calibri", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #333333;
  text-align: left;
  margin: 1em 0 0.5em 3rem;
  line-height: 1.4;
}

/* Page title styling - context-specific override inheriting from h1 */
h1.page-title {
  color: #025191 !important; /* Match border color */
  font-size: 2rem !important;
  font-weight: 200 !important;
  color: #025191 !important;
  border-bottom: 2px solid #025191 !important;
  padding-bottom: 0.25em !important;
  margin: -5px 0 0 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* Visually hide h1.page-title on core-skills page but keep accessible to screen readers */
body.ncademi-core-skills-page h1.page-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important; /* Modern approach - visually hides but keeps in DOM for screen readers */
  clip: rect(0, 0, 0, 0) !important; /* Fallback for older browsers */
  white-space: nowrap !important;
  border: 0 !important;
}

/* Icon container - positioned over the border under h1.page-title */
div.icon-right {
  float: right;
  margin: -40px -5px 0 0; /* Pull up to align with border (70px icon height) */
  position: relative;
  z-index: 2; /* Position over the border */
  clear: right; /* Prevent wrapping issues */
}

div.icon-right span {
  display: block; /* Ensure proper positioning */
}

/* Icon image styling - aligns with border */
div.icon-right img.icon {
  width: 70px;
  height: 70px;
  display: block;
  margin: 0; /* Reset any default margins */
}

/* Legacy icon styling for backwards compatibility */
img.icon {
  width: 70px;
  height: 70px;
  float: right;
  margin-top: -0.5em; /* Pull up to align with border line */
  margin-left: 1rem; /* Space between icon and content */
  display: block;
}

/* Callout/alert box styling */
div.callout {
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-left: 4px solid #0066cc;
  background-color: #f0f7ff;
  border-radius: 4px;
}

.margin-top-50 {
  margin-top: 20px !important;
  width: 90% !important;
}
.margin-top-25 {
  margin-top: 25px !important;
}

div#print-grades-container.ic-Action-header {
 display: none !important;
}
.rem-1-2-5 {
  font-size: 1.25rem !important;
}
.rem-1-5-0 {
  font-size: 1.5rem !important;
}
.rem-1-7-5 {
  font-size: 1.75rem !important;
}
.rem-2-0-0 {
  font-size: 2rem !important;
}
.rem-2-2-5 {
  font-size: 2.25rem !important;
}
.rem-2-5-0 {
  font-size: 2.5rem !important;
}

div.page {
  margin-bottom: 60px !important;
}

/* ============================================
   INLINE STYLE REPLACEMENTS
   Classes to replace inline styles for better maintainability
   ============================================ */

/* List style: decimal numbering */
.list-decimal {
  list-style-type: decimal !important;
}

/* Text color utilities */
.text-green {
  color: #196b24 !important;
}

.text-blue {
  color: #215e99 !important;
}

.text-purple {
  color: #7030a0 !important;
}

/* Image display: inline */
.img-inline {
  display: inline !important;
}

/* Image width responsive - follows pattern img-responsive-{width} */
.img-responsive-150 {
  width: 100% !important;
  max-width: 150px !important;
}

.img-responsive-178 {
  width: 100% !important;
  max-width: 178px !important;
}

.img-responsive-200 {
  width: 100% !important;
  max-width: 200px !important;
}

.img-responsive-250 {
  width: 100% !important;
  max-width: 250px !important;
}

.img-responsive-300 {
  width: 100% !important;
  max-width: 300px !important;
}

.img-responsive-320 {
  width: 100% !important;
  max-width: 320px !important;
}

.img-responsive-400 {
  width: 100% !important;
  max-width: 400px !important;
}

.img-responsive-500 {
  width: 100% !important;
  max-width: 500px !important;
}

.img-responsive-550 {
  width: 100% !important;
  max-width: 550px !important;
}

.img-responsive-600 {
  width: 100% !important;
  max-width: 600px !important;
}

.img-responsive-650 {
  width: 100% !important;
  max-width: 650px !important;
}

/* Image centered */
img.centered {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Inline images should remain inline even with centered class */
img.img-inline.centered {
  display: inline !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* YouTube player wrapper */
div.ytplayer {
  display: block !important;
  margin: 1em 0 !important;
}

div.ytplayer iframe {
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

/* YouTube player centered */
div.ytplayer.centered {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Text center alignment */
.text-center {
  text-align: center !important;
}

/* ============================================
   TABLE STYLES
   Classes to replace inline table styles
   ============================================ */

/* Base table styling */
.table-standard {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 20px auto !important;
  max-width: 1000px !important;
}

.table-standard-height {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 20px auto !important;
  height: 150px !important;
  max-width: 1000px !important;
}

/* Table header row styling */
.table-header-row {
  background-color: #156082 !important;
  height: 23px !important;
}

/* Table header cell styling */
.table-header-cell {
  padding: 8px !important;
  text-align: center !important;
  color: white !important;
  height: 23px !important;
}

/* Table body cell styling */
.table-body-cell {
  padding: 8px !important;
  text-align: center !important;
  height: 23px !important;
}

/* Table body row styling - alternating colors */
.table-row-alt-1 {
  background-color: #c1e4f5 !important;
  height: 23px !important;
}

.table-row-alt-2 {
  background-color: #f9f9f9 !important;
  height: 23px !important;
}

/* Table font sizes */
.table-font-large {
  font-size: 18.6667px !important;
}

.table-font-standard {
  font-size: 14pt !important;
}