/* ========================================
   Introduction Page Layout
   ======================================== */

/* Centered content container with max width */
.col-xl-10 {
    max-width: 100%;
}

/* Content body spacing */
.content-body {
    max-width: 100%;
}

/* Simplified Color Palette - Blue and Gray Only */
:root {
    --primary-blue: #002b5c; /* Darkened further for maximum WCAG 2.2 AAA compliance with white text (10.4:1 ratio) */
    --primary-blue-dark: #001f45;
    --primary-blue-darker: #003066; /* For AAA contrast on white backgrounds (7.3:1 ratio) */
    --primary-blue-light: #e7f1ff;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --bg-light: #f8f9fa;
    --gray-50: #fafafa; /* Light gray for subtle backgrounds - WCAG AAA compliant */
    --alert-red: #dc3545;
    --alert-red-light: #f8d7da;
    
    /* CRITICAL: Override Bootstrap 5.3 CSS Variables to force blue theme */
    --bs-primary: #002b5c !important;
    --bs-primary-rgb: 0, 43, 92 !important;
    --bs-primary-bg-subtle: #e7f1ff !important;
    --bs-primary-border-subtle: #002b5c !important;
}

/* Primary color overrides */
.text-primary,
.text-success,
.text-info,
.text-warning {
    color: var(--primary-blue) !important;
}

.bg-primary,
.bg-success,
.bg-info,
.bg-warning {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

/* Stronger specificity for bg-primary to override Bootstrap */
div.bg-primary,
section.bg-primary,
header.bg-primary,
.card-header.bg-primary,
div.card-header.bg-primary,
.card .card-header.bg-primary,
.card > .card-header.bg-primary {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue-dark) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    background-color: var(--primary-blue-dark) !important;
    border-color: #001f4d !important;
    color: white !important;
}

.border-primary,
.border-success,
.border-info,
.border-warning {
    border-color: var(--primary-blue) !important;
}

/* Simplified alert colors */
.alert-danger {
    background-color: var(--alert-red-light);
    border-color: #f5c2c7;
    color: #721c24;
}

.alert-warning,
.alert-info,
.alert-success {
    background-color: var(--primary-blue-light);
    border-color: var(--primary-blue);
    color: var(--text-dark);
}

/* Hero gradient style for module-1/unit-1 */
.hero-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
    color: white;
}

/* Hero gradient text elements */
.hero-gradient * {
    color: white !important;
}

.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.hero-gradient h4,
.hero-gradient h5,
.hero-gradient h6,
.hero-gradient p,
.hero-gradient .lead,
.hero-gradient blockquote,
.hero-gradient .blockquote-footer {
    color: white !important;
}

/* Hero gradient badges with light background for contrast - WCAG 2.2 AAA */
.hero-gradient .badge.bg-light {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    font-weight: 700;
}

/* Ensure icons within hero badges are black */
.hero-gradient .badge.bg-light i {
    color: #000000 !important;
}

/* ========================================
   Start Here Section Styling
   High Contrast for WCAG 2.2 AAA Compliance
   ======================================== */

/* Start Here badge with enhanced visibility */
.badge.bg-light.text-dark {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 700;
    border: 2px solid #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Start with Introduction button - high contrast */
.btn-light.btn-lg {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 700;
    border: 3px solid #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-light.btn-lg:hover,
.btn-light.btn-lg:focus {
    background-color: #ffeb3b !important;
    color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-light.btn-lg:active {
    background-color: #fdd835 !important;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Focus state for keyboard navigation - WCAG 2.2 AAA */
.btn-light.btn-lg:focus-visible {
    outline: 4px solid #ffeb3b;
    outline-offset: 4px;
}

/* Icons within the button for better visibility */
.btn-light.btn-lg i {
    color: #000000 !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .btn-light.btn-lg {
        transition: none;
    }
    
    .btn-light.btn-lg:hover {
        transform: none;
    }
}

/* Card styling */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-color: var(--border-color);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Blockquotes - WCAG 2.2 AAA Compliant with Enhanced Visual Design */
.blockquote-custom,
blockquote {
    /* Border - Strong visual anchor on left */
    border-left: 6px solid var(--primary-blue);
    
    /* Spacing for readability and visual breathing room */
    padding: 1.5rem 2rem 1.5rem 2.5rem;
    margin: 2rem 0;
    
    /* Background - Clean white with subtle border for definition */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-left: 6px solid var(--primary-blue);
    
    /* Typography - Maximum contrast for readability */
    color: #1a1a1a;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.01em;
    
    /* Border and shadow for depth */
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    
    /* Smooth transitions for interactive feel */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Print optimization */
    position: relative;
}

/* Blockquotes inside hero gradient - override for visibility */
.hero-gradient blockquote,
.hero-gradient .blockquote-custom {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid rgba(255, 255, 255, 0.9);
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.hero-gradient blockquote p,
.hero-gradient .blockquote-custom p {
    color: #ffffff !important;
    font-weight: 400;
}

.hero-gradient blockquote footer,
.hero-gradient blockquote cite,
.hero-gradient .blockquote-custom footer,
.hero-gradient .blockquote-custom cite {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 400;
}

.hero-gradient blockquote::before,
.hero-gradient .blockquote-custom::before {
    color: rgba(255, 255, 255, 0.3);
}

.hero-gradient blockquote:hover,
.hero-gradient .blockquote-custom:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* WCAG 2.2 AAA: Blockquotes inside card-primary-bg (dark blue background) */
.card-primary-bg blockquote,
.card-primary-bg .blockquote-custom {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 5px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Ensure all text inside blockquotes on dark backgrounds is white */
.card-primary-bg blockquote *,
.card-primary-bg .blockquote-custom * {
    color: #ffffff !important;
}

/* Override border-light class inside dark backgrounds for WCAG AAA */
.card-primary-bg .border-light,
.hero-gradient .border-light,
.bg-primary .border-light {
    border-color: #ffffff !important;
}

.card-primary-bg blockquote:hover,
.card-primary-bg .blockquote-custom:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-left-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Quote icon decoration */
.blockquote-custom::before,
blockquote::before {
    content: '\201C';
    position: absolute;
    left: 0.75rem;
    top: 0.5rem;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--primary-blue);
    opacity: 0.15;
    font-family: Georgia, serif;
    font-style: normal;
    font-weight: bold;
}

/* Hover state for interactive blockquotes */
.blockquote-custom:hover,
blockquote:hover {
    background-color: #fafbfc;
    border-left-color: var(--primary-blue-dark);
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.15);
    transform: translateX(3px);
}

/* Citation/footer styling within blockquote */
.blockquote-custom footer,
.blockquote-custom cite,
blockquote footer,
blockquote cite {
    color: #495057;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.75rem;
    display: block;
}

.blockquote-custom footer::before,
blockquote footer::before {
    content: '\2014\00A0';
    color: var(--primary-blue);
}

/* Ensure nested elements maintain maximum contrast */
.blockquote-custom p,
blockquote p {
    color: #1a1a1a !important;
    margin-bottom: 0;
    font-weight: 500;
}

.blockquote-custom p:not(:last-child),
blockquote p:not(:last-child) {
    margin-bottom: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blockquote-custom,
    blockquote {
        font-size: 1.0625rem;
        padding: 1rem 1.25rem 1rem 1.5rem;
        margin: 1.5rem 0;
    }
    
    .blockquote-custom::before,
    blockquote::before {
        font-size: 2.5rem;
        left: 0.25rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .blockquote-custom,
    blockquote {
        background: #ffffff;
        border-left-width: 6px;
        border: 2px solid var(--primary-blue);
        border-left-width: 6px;
    }
    
    .blockquote-custom::before,
    blockquote::before {
        opacity: 0.3;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .blockquote-custom,
    .blockquote-custom:hover,
    blockquote,
    blockquote:hover {
        transition: none;
        transform: none;
    }
}

/* Print styles */
@media print {
    .blockquote-custom,
    blockquote {
        background: transparent;
        box-shadow: none;
        border-left: 3px solid #000;
        page-break-inside: avoid;
    }
    
    .blockquote-custom::before,
    blockquote::before {
        display: none;
    }
}

/* Badge styling */
.badge-stat {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}

.badge {
    background-color: var(--primary-blue) !important;
}

/* WCAG 2.2 AAA: Fix contrast for badges with light background */
.badge.bg-light,
.badge.bg-light.text-dark {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    font-weight: 700;
}

/* Ensure icons within light badges are also black */
.badge.bg-light i,
.badge.bg-light.text-dark i {
    color: #000000 !important;
}

/* Hero section badge-stat with bg-light - WCAG 2.2 AAA */
.hero-gradient .badge-stat.bg-light,
.hero-gradient .badge.bg-light.text-dark {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    font-weight: 700;
}

.hero-gradient .badge-stat.bg-light i,
.hero-gradient .badge.bg-light.text-dark i {
    color: #000000 !important;
}

/* Special boxes */
.reflection-box,
.case-study-box {
    background-color: var(--bg-light);
    border-left: 5px solid var(--primary-blue);
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin: 2rem 0;
}

/* Stat boxes */
.stat-box {
    text-align: center;
    padding: 2rem;
    background-color: var(--bg-light);
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid var(--border-color);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus visible for keyboard navigation (WCAG AAA) */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Skip links for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-blue);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Simplified card headers - WCAG 2.2 AAA compliant */
/* Base styling for all card headers - excluding bg-danger and bg-success which have their own colors */
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) {
    background-color: var(--primary-blue) !important;
    background-image: none !important;
    color: white !important;
    border-bottom: 2px solid var(--primary-blue-dark);
}

/* Ensure all text in default (non-semantic) card headers is white */
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) h1,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) h2,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) h3,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) h4,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) h5,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) h6,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) p,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) i,
.card-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info) span:not(.badge):not(.badge *) {
    color: white !important;
}

/* Ensure bg-primary on card-header always applies with maximum specificity */
.card-header.bg-primary,
div.card-header.bg-primary,
header.card-header.bg-primary {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

/* Ensure all text in card-header with bg-primary is white */
.card-header.bg-primary *:not(.badge),
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
    color: white !important;
}

/* Exception for badges which should have specific styling */
.card-header.bg-primary .badge.bg-white,
.card-header.bg-primary .badge.bg-white.text-primary {
    background-color: white !important;
    color: var(--primary-blue-darker) !important;
}

/* List group items */
.list-group-item {
    border-color: var(--border-color);
}

/* Accordion buttons */
.accordion-button {
    color: var(--text-dark);
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-blue-light);
    color: var(--primary-blue);
}

/* Accordion Body Padding Fix */
.accordion-body {
    padding: 1.5rem 2rem !important; /* Add space inside accordion card */
    background-color: #ffffff; /* optional: ensures white background */
    border-radius: 0.5rem;
}

/* Prevent accordion body from stretching full width */
.accordion-body pre,
.accordion-body code,
.accordion-body .text-wrap {
    display: block;
    max-width: 95%; /* keeps content from hitting edges */
    margin-left: auto;
    margin-right: auto;
}

/* Handle long URLs and text in code elements - prevent horizontal overflow */
code {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* Optional: add subtle border separation */
.accordion-body {
    border-top: 1px solid var(--border-color);
}


/* Remove excessive color variations */
.text-danger {
    color: var(--alert-red) !important;
}

/* bg-danger should NOT set text color - only background */
/* Text color is handled separately below */

/* Simplified background colors */
.bg-light {
    background-color: var(--bg-light) !important;
}

/* Table styling */
table {
    border-color: var(--border-color);
}

/* Utility classes for common inline styles */

/* Primary blue background cards with white text */
.card-primary-bg {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

.card-primary-bg h1,
.card-primary-bg h2,
.card-primary-bg h3,
.card-primary-bg h4,
.card-primary-bg h5,
.card-primary-bg h6,
.card-primary-bg p,
.card-primary-bg .lead,
.card-primary-bg blockquote,
.card-primary-bg li {
    color: white !important;
}

/* Light blue alert boxes */
.alert-light-blue {
    background-color: var(--primary-blue-light) !important;
    border-color: var(--primary-blue) !important;
    color: var(--text-dark) !important;
}

/* Large decorative icon in hero */
.hero-decorative-icon {
    font-size: 6rem;
    opacity: 0.3;
}

/* Question badge styling */
.question-badge {
    font-size: 1.2rem;
}

/* Image styling for responsive and visible images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure images in cards are responsive */
.card img,
.card-body img,
.accordion-body img,
.alert img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
}

/* Ensure embedded images maintain aspect ratio */
.embed-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Video container responsive styling for iframes */
.video-container-iframe {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.5rem;
}

/* Video container for HTML5 video elements */
.video-container {
    width: 100%;
    margin: 1rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    background-color: #000;
}

/* ========================================
   Module 2 Specific Styles
   ======================================== */

/* Card headers with dark backgrounds - ensure headings are white */
.card-primary-bg h1,
.card-primary-bg h2,
.card-primary-bg h3,
.card-primary-bg h4,
.card-primary-bg h5,
.card-primary-bg h6,
.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.hero-gradient h4,
.hero-gradient h5,
.hero-gradient h6,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
    color: white !important;
}

/* Ensure icons within dark background headings are also white */
.card-primary-bg h1 i,
.card-primary-bg h2 i,
.card-primary-bg h3 i,
.card-primary-bg h4 i,
.card-primary-bg h5 i,
.card-primary-bg h6 i,
.hero-gradient h1 i,
.hero-gradient h2 i,
.hero-gradient h3 i,
.hero-gradient h4 i,
.hero-gradient h5 i,
.hero-gradient h6 i,
.bg-primary h1 i,
.bg-primary h2 i,
.bg-primary h3 i,
.bg-primary h4 i,
.bg-primary h5 i,
.bg-primary h6 i {
    color: white !important;
}

/* Takeaway boxes for module summaries and transitions */
.takeaway-box {
    background-color: var(--primary-blue-light);
    border-left: 5px solid var(--primary-blue);
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.takeaway-box h3,
.takeaway-box h4,
.takeaway-box h5,
.takeaway-box h6 {
    color: var(--primary-blue);
}

/* Two-path cards for AI-resistant vs AI-dependent design */
/* WCAG 2.2 AAA: Use darker colors for proper contrast with white text */
.card-header.bg-danger {
    background: #991b1b !important; /* Darker red for 7:1+ contrast with white */
    background-color: #991b1b !important;
    background-image: none !important;
    color: #ffffff !important;
}

.card-header.bg-danger *,
.card-header.bg-danger h1,
.card-header.bg-danger h2,
.card-header.bg-danger h3,
.card-header.bg-danger h4,
.card-header.bg-danger h5,
.card-header.bg-danger h6,
.card-header.bg-danger i {
    color: #ffffff !important;
}

.card-header.bg-success {
    background: #166534 !important; /* Darker green for 7:1+ contrast with white */
    background-color: #166534 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.card-header.bg-success *,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-success i {
    color: #ffffff !important;
}

/* Enhanced focus states for WCAG AAA compliance */
.card:focus-within {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Image hover effects for better engagement */
img.img-fluid {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img.img-fluid:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Badge improvements for GOALS framework */
.badge.bg-primary {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
}

/* Badge text color override for AAA contrast on white backgrounds */
.badge.bg-white.text-primary,
.card-header .badge.bg-white.text-primary {
    background-color: #ffffff !important;
    color: #003066 !important; /* Darker blue for 7.3:1 contrast ratio */
    border: 2px solid #003066 !important;
    font-weight: 700;
}

/* Ensure icons in white badges have proper contrast */
.badge.bg-white.text-primary i,
.card-header .badge.bg-white.text-primary i {
    color: #003066 !important;
}

/* Responsive text sizing for better readability */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }
    
    .fs-5 {
        font-size: 1rem;
    }
    
    .takeaway-box {
        padding: 1rem;
    }
}

/* ========================================
   Secure Iframe Styling
   ======================================== */

/* Secure iframe wrapper for takeaways and interactive content */
.secure-iframe-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio for forms */
    height: 0;
    overflow: hidden;
    background-color: var(--bg-light);
    border-radius: 0.5rem;
}

/* Scrollable iframe wrapper with fixed height */
.secure-iframe-wrapper.scrollable {
    padding-bottom: 0;
    height: 1200px;
    min-height: 1000px;
    overflow: visible;
    display: block;
}

/* Testimonials iframe - extra height for multiple testimonials */
.secure-iframe-wrapper.scrollable.testimonials {
    height: 1400px;
    min-height: 1200px;
}

/* Secure iframe element */
.secure-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.5rem;
    background-color: white;
    overflow: auto;
}

/* Secure iframe in scrollable wrapper - override positioning */
.secure-iframe-wrapper.scrollable .secure-iframe {
    position: static;
    width: 100%;
    height: 1200px;
    min-height: 1200px;
    display: block;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

/* Testimonials iframe - extra height */
.secure-iframe-wrapper.scrollable.testimonials .secure-iframe {
    height: 1400px;
    min-height: 1400px;
}

/* Loading spinner removed - was interfering with iframe display */

/* Focus state for secure iframe */
.secure-iframe:focus {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Expectations, takeaways, exit survey, and testimonials container styling */
.expectations-container .card,
.takeaways-container .card,
.exit-survey-container .card,
.testimonials-container .card {
    border: 2px solid var(--primary-blue);
}

/* Ensure iframe body allows scrolling */
.secure-iframe-wrapper.scrollable {
    border: 1px solid var(--border-color);
}

/* Responsive adjustments for secure iframe */
@media (max-width: 768px) {
    .secure-iframe-wrapper {
        padding-bottom: 100%; /* Taller aspect ratio on mobile */
    }
    
    .secure-iframe-wrapper.scrollable {
        height: 1100px;
    }
    
    .secure-iframe-wrapper.scrollable .secure-iframe {
        height: 1100px;
        min-height: 1100px;
    }
    
    .secure-iframe-wrapper.scrollable.testimonials {
        height: 1300px;
    }
    
    .secure-iframe-wrapper.scrollable.testimonials .secure-iframe {
        height: 1300px;
        min-height: 1300px;
    }
}

@media (max-width: 576px) {
    .secure-iframe-wrapper {
        padding-bottom: 120%; /* Even taller on small devices */
        border-radius: 0.25rem;
    }
    
    .secure-iframe {
        border-radius: 0.25rem;
    }
    
    .secure-iframe-wrapper.scrollable {
        height: 1000px;
    }
    
    .secure-iframe-wrapper.scrollable .secure-iframe {
        height: 1000px;
        min-height: 1000px;
    }
    
    .secure-iframe-wrapper.scrollable.testimonials {
        height: 1200px;
    }
    
    .secure-iframe-wrapper.scrollable.testimonials .secure-iframe {
        height: 1200px;
        min-height: 1200px;
    }
}

/* Print styles for secure iframe */
@media print {
    .secure-iframe-wrapper,
    .secure-iframe {
        display: none;
    }
    
    .takeaways-container .card-footer::after,
    .expectations-container .card-footer::after,
    .exit-survey-container .card-footer::after {
        content: ' Visit the survey link above to submit your response.';
        display: block;
        margin-top: 0.5rem;
        font-style: italic;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .secure-iframe-wrapper::before {
        animation: none;
    }
}

/* ========================================
   Book Cover Styling
   ======================================== */

/* Book cover wrapper for enhanced presentation */
.book-cover-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* Book cover image styling */
.book-cover-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hover effect for book cover */
.book-cover-image:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* Book cover focus state for accessibility */
.book-cover-image:focus {
    outline: 3px solid var(--primary-blue);
    outline-offset: 4px;
}

/* Responsive adjustments for book cover */
@media (max-width: 991px) {
    .book-cover-wrapper {
        margin-bottom: 1rem;
    }
    
    .book-cover-image {
        max-width: 350px;
    }
}

@media (max-width: 576px) {
    .book-cover-wrapper {
        padding: 0.5rem;
    }
    
    .book-cover-image {
        max-width: 100%;
        border-radius: 0.5rem;
    }
}

/* Reduced motion support for book cover */
@media (prefers-reduced-motion: reduce) {
    .book-cover-image {
        transition: none;
    }
    
    .book-cover-image:hover {
        transform: none;
    }
}

/* Print styles for accessibility */
@media print {
    .skip-link,
    .btn,
    nav {
        display: none;
    }
    
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
    
    .card,
    .takeaway-box {
        page-break-inside: avoid;
        border: 1px solid #000;
    }
    
    .book-cover-image {
        max-width: 300px;
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* ========================================
   Certificate Completion Section
   ======================================== */

/* Certificate completion card styling */
.certificate-completion-card .card-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
    border-bottom: none;
}

/* Certificate completion body */
.certificate-completion-card .card-body {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

/* Certificate card borders for visual distinction */
.certificate-completion-section .border-primary {
    border-width: 3px !important;
}

.certificate-completion-section .border-danger {
    border-width: 3px !important;
}

/* Certificate icons sizing */
.certificate-completion-section .bi-patch-check-fill,
.certificate-completion-section .bi-award-fill {
    transition: transform 0.3s ease;
}

.certificate-completion-section .card:hover .bi-patch-check-fill,
.certificate-completion-section .card:hover .bi-award-fill {
    transform: scale(1.1);
}

/* Certificate features grid responsive adjustments */
@media (max-width: 768px) {
    .certificate-completion-section .row.g-3 {
        row-gap: 1rem !important;
    }
    
    .certificate-completion-section .col-md-4 {
        padding-bottom: 0.5rem;
    }
}

/* Print styles for certificate section */
@media print {
    .certificate-completion-section .btn {
        display: inline-block;
        background-color: #0056b3;
        border: 2px solid #004494;
        padding: 0.75rem 1.5rem;
    }
    
    .certificate-completion-section .btn::after {
        content: ' - Visit ' attr(href);
        font-size: 0.875rem;
        display: block;
        margin-top: 0.25rem;
    }
}

/* ========================================
   CRITICAL FIX: Force blue background and white text on card headers
   This MUST come last to override Bootstrap
   Maximum specificity to ensure proper rendering
   ======================================== */

/* Force blue background on all card headers with bg-primary */
.bg-primary.card-header,
.card-header.bg-primary,
.card-header.bg-primary.text-white,
.card-header.bg-primary.py-3,
div.card .card-header.bg-primary,
div.card.border-0.shadow-sm .card-header.bg-primary,
.card > .card-header.bg-primary,
.card > .bg-primary.card-header,
[class*="card-header"][class*="bg-primary"] {
    background-color: #002b5c !important;
    color: #ffffff !important;
}

/* Ensure ALL content in card headers with bg-primary is white - catch-all */
.card-header.bg-primary,
.card-header.bg-primary *:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* Ensure all headings in card headers with bg-primary are white */
.bg-primary.card-header h1,
.bg-primary.card-header h2,
.bg-primary.card-header h3,
.bg-primary.card-header h4,
.bg-primary.card-header h5,
.bg-primary.card-header h6,
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-primary.text-white h1,
.card-header.bg-primary.text-white h2,
.card-header.bg-primary.text-white h3,
.card-header.bg-primary.text-white h4,
.card-header.bg-primary.text-white h5,
.card-header.bg-primary.text-white h6 {
    color: #ffffff !important;
}

/* Target h3 with class h5 specifically (commonly used pattern) */
.card-header.bg-primary h3.h5,
.card-header.bg-primary h3.h5.mb-0,
.card-header.bg-primary.text-white h3.h5,
.card-header.bg-primary.text-white h3.h5.mb-0 {
    color: #ffffff !important;
}

/* Ensure all spans, divs, and text elements in headings are white */
.card-header.bg-primary h1 span:not(.badge):not(.badge *),
.card-header.bg-primary h2 span:not(.badge):not(.badge *),
.card-header.bg-primary h3 span:not(.badge):not(.badge *),
.card-header.bg-primary h4 span:not(.badge):not(.badge *),
.card-header.bg-primary h5 span:not(.badge):not(.badge *),
.card-header.bg-primary h6 span:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* Ensure icons in headings are white */
.card-header.bg-primary h1 i,
.card-header.bg-primary h2 i,
.card-header.bg-primary h3 i,
.card-header.bg-primary h4 i,
.card-header.bg-primary h5 i,
.card-header.bg-primary h6 i {
    color: #ffffff !important;
}

/* Ensure paragraph and other text elements are white */
.card-header.bg-primary p,
.card-header.bg-primary .lead,
.card-header.bg-primary div:not(.badge),
.card-header.bg-primary span:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* Special handling for badges - white background with dark blue text */
.card-header.bg-primary .badge.bg-white,
.card-header.bg-primary .badge.bg-white.text-primary,
.card-header.bg-primary .badge.bg-white.text-primary.me-2 {
    background-color: #ffffff !important;
    color: #003066 !important;
    font-weight: 700;
}

/* Override any potential text-primary classes inside card headers */
.card-header.bg-primary .text-primary:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* ========================================
   WCAG 2.2 AAA CRITICAL FIX: Ensure maximum contrast for card header text
   Problem: Text in card headers with dark blue background must be pure white
   Solution: Force white color on ALL text nodes and elements
   ======================================== */

/* Target ALL heading levels with class h5 in card headers with bg-primary */
h1.h5.mb-0,
h2.h5.mb-0,
h3.h5.mb-0,
h4.h5.mb-0,
h5.h5.mb-0,
h6.h5.mb-0 {
    color: inherit;
}

/* Force white color on ALL headings in card-header with bg-primary */
.card-header.bg-primary h1.h5,
.card-header.bg-primary h2.h5,
.card-header.bg-primary h3.h5,
.card-header.bg-primary h4.h5,
.card-header.bg-primary h5.h5,
.card-header.bg-primary h6.h5,
.card-header.bg-primary h1.h5.mb-0,
.card-header.bg-primary h2.h5.mb-0,
.card-header.bg-primary h3.h5.mb-0,
.card-header.bg-primary h4.h5.mb-0,
.card-header.bg-primary h5.h5.mb-0,
.card-header.bg-primary h6.h5.mb-0,
.card-header.bg-primary.text-white h1.h5,
.card-header.bg-primary.text-white h2.h5,
.card-header.bg-primary.text-white h3.h5,
.card-header.bg-primary.text-white h4.h5,
.card-header.bg-primary.text-white h5.h5,
.card-header.bg-primary.text-white h6.h5,
.card-header.bg-primary.text-white h1.h5.mb-0,
.card-header.bg-primary.text-white h2.h5.mb-0,
.card-header.bg-primary.text-white h3.h5.mb-0,
.card-header.bg-primary.text-white h4.h5.mb-0,
.card-header.bg-primary.text-white h5.h5.mb-0,
.card-header.bg-primary.text-white h6.h5.mb-0,
.card-header.bg-primary.py-3 h1.h5,
.card-header.bg-primary.py-3 h2.h5,
.card-header.bg-primary.py-3 h3.h5,
.card-header.bg-primary.py-3 h4.h5,
.card-header.bg-primary.py-3 h5.h5,
.card-header.bg-primary.py-3 h6.h5,
.card-header.bg-primary.py-3 h1.h5.mb-0,
.card-header.bg-primary.py-3 h2.h5.mb-0,
.card-header.bg-primary.py-3 h3.h5.mb-0,
.card-header.bg-primary.py-3 h4.h5.mb-0,
.card-header.bg-primary.py-3 h5.h5.mb-0,
.card-header.bg-primary.py-3 h6.h5.mb-0 {
    color: #ffffff !important;
}

/* Force white on text nodes directly in headings - catch text after badges */
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
    color: #ffffff !important;
}

/* Explicitly force white text on ALL content in card headers with bg-primary */
.card-header.bg-primary.text-white h1,
.card-header.bg-primary.text-white h2,
.card-header.bg-primary.text-white h3,
.card-header.bg-primary.text-white h4,
.card-header.bg-primary.text-white h5,
.card-header.bg-primary.text-white h6 {
    color: #ffffff !important;
}

/* Force white on all text content and elements within card headers */
.card-header.bg-primary.text-white,
.card-header.bg-primary.text-white p,
.card-header.bg-primary.text-white div:not(.badge),
.card-header.bg-primary.text-white span:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* Ensure ANY element with class text-white inside card header is white */
.card-header.text-white,
.card-header.text-white *:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* Additional catch-all for any text in bg-primary card headers */
.card-header.bg-primary,
.card-header.bg-primary *:not(.badge):not(.badge *) {
    color: #ffffff !important;
}

/* Exception: badges should keep their specific colors */
.card-header.bg-primary .badge,
.card-header.bg-primary .badge * {
    color: inherit !important;
}

.card-header.bg-primary .badge.bg-white,
.card-header.bg-primary .badge.bg-white * {
    color: #003066 !important;
}

.card-header.bg-primary .badge.text-primary {
    color: #003066 !important;
}

/* ========================================
   WCAG 2.2 AAA FINAL FIX: Card Header Color Contrast
   Issue: Text nodes after badges and inline elements not inheriting white color
   Solution: Maximum specificity rules to ensure ALL text is white
   ======================================== */

/* Force blue background and white text on ALL card headers with bg-primary */
.card-header.bg-primary,
.bg-primary.card-header,
div.card-header.bg-primary {
  background-color: #002b5c !important;
  background: #002b5c !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Force white color on ALL elements inside card-header.bg-primary except badges */
.card-header.bg-primary *:not(.badge):not(.badge *),
.card-header.bg-primary h1,
.card-header.bg-primary h2, 
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
  color: #ffffff !important;
}

/* Critical: Force white on headings with ANY size class */
.card-header.bg-primary h1.h1,
.card-header.bg-primary h1.h2,
.card-header.bg-primary h1.h3,
.card-header.bg-primary h1.h4,
.card-header.bg-primary h1.h5,
.card-header.bg-primary h1.h6,
.card-header.bg-primary h2.h1,
.card-header.bg-primary h2.h2,
.card-header.bg-primary h2.h3,
.card-header.bg-primary h2.h4,
.card-header.bg-primary h2.h5,
.card-header.bg-primary h2.h6,
.card-header.bg-primary h3.h1,
.card-header.bg-primary h3.h2,
.card-header.bg-primary h3.h3,
.card-header.bg-primary h3.h4,
.card-header.bg-primary h3.h5,
.card-header.bg-primary h3.h6,
.card-header.bg-primary h4.h1,
.card-header.bg-primary h4.h2,
.card-header.bg-primary h4.h3,
.card-header.bg-primary h4.h4,
.card-header.bg-primary h4.h5,
.card-header.bg-primary h4.h6,
.card-header.bg-primary h5.h1,
.card-header.bg-primary h5.h2,
.card-header.bg-primary h5.h3,
.card-header.bg-primary h5.h4,
.card-header.bg-primary h5.h5,
.card-header.bg-primary h5.h6,
.card-header.bg-primary h6.h1,
.card-header.bg-primary h6.h2,
.card-header.bg-primary h6.h3,
.card-header.bg-primary h6.h4,
.card-header.bg-primary h6.h5,
.card-header.bg-primary h6.h6 {
  color: #ffffff !important;
}

/* Force white on paragraphs, spans, divs, and text elements */
.card-header.bg-primary p,
.card-header.bg-primary span:not(.badge):not(.badge *),
.card-header.bg-primary div:not(.badge),
.card-header.bg-primary strong,
.card-header.bg-primary em,
.card-header.bg-primary i:not(.bi):not([class*="icon"]),
.card-header.bg-primary b {
  color: #ffffff !important;
}

/* Force white on Bootstrap icon elements in headers */
.card-header.bg-primary i.bi,
.card-header.bg-primary [class*="bi-"] {
  color: #ffffff !important;
}

/* Exception: Preserve badge colors - white background with dark text */
.card-header.bg-primary .badge,
.card-header.bg-primary .badge * {
  /* Allow badge to define its own colors */
  color: inherit !important;
}

.card-header.bg-primary .badge.bg-white,
.card-header.bg-primary .badge.bg-white.text-primary {
  background-color: #ffffff !important;
  color: #003066 !important; /* Darker blue for AAA contrast on white */
  font-weight: 700;
}

/* Ensure text-white class works */
.card-header.bg-primary.text-white,
.card-header.bg-primary.text-white * {
  color: #ffffff !important;
}

/* Override any inline styles that might be setting color */
.card-header.bg-primary[style*="background"] {
  background-color: #002b5c !important;
}

.card-header.bg-primary *[style*="color"]:not(.badge):not(.badge *) {
  color: #ffffff !important;
}

/* ========================================
   WCAG 2.2 AAA: Outline Button Contrast Fix
   Problem: btn-outline-primary has poor contrast on hover
   Solution: Enhanced contrast ratios for all states
   ======================================== */

/* Outline Primary Button - Normal State */
.btn-outline-primary,
a.btn-outline-primary {
  color: #002b5c !important; /* Dark blue for 10.4:1 contrast on white */
  border-color: #002b5c !important;
  border-width: 2px !important;
  font-weight: 600;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

/* Outline Primary Button - Hover State (WCAG AAA) */
.btn-outline-primary:hover,
a.btn-outline-primary:hover {
  background-color: #002b5c !important; /* Dark blue background */
  border-color: #001f45 !important; /* Even darker border */
  color: #ffffff !important; /* White text for maximum contrast */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 43, 92, 0.3);
}

/* Outline Primary Button - Focus State (WCAG AAA) */
.btn-outline-primary:focus,
a.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
a.btn-outline-primary:focus-visible {
  background-color: #002b5c !important;
  border-color: #001f45 !important;
  color: #ffffff !important;
  outline: 4px solid #ffeb3b !important; /* High contrast yellow outline */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 235, 59, 0.3), 0 4px 12px rgba(0, 43, 92, 0.3);
}

/* Outline Primary Button - Active/Pressed State */
.btn-outline-primary:active,
a.btn-outline-primary:active,
.btn-outline-primary.active,
a.btn-outline-primary.active {
  background-color: #001f45 !important; /* Darker blue */
  border-color: #001534 !important;
  color: #ffffff !important;
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Ensure icons within outline buttons maintain proper contrast */
.btn-outline-primary i,
a.btn-outline-primary i {
  color: inherit !important;
}

/* Large outline button specific styles */
.btn-outline-primary.btn-lg,
a.btn-outline-primary.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  border-width: 2px !important;
}

/* Disabled state for outline buttons */
.btn-outline-primary:disabled,
.btn-outline-primary.disabled,
a.btn-outline-primary:disabled,
a.btn-outline-primary.disabled {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
  opacity: 0.65;
  pointer-events: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-outline-primary,
  a.btn-outline-primary {
    transition: none;
  }
  
  .btn-outline-primary:hover,
  a.btn-outline-primary:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-outline-primary,
  a.btn-outline-primary {
    border-width: 3px !important;
    font-weight: 700;
  }
  
  .btn-outline-primary:focus,
  a.btn-outline-primary:focus {
    outline-width: 5px !important;
  }
}

/* Print styles for outline buttons */
@media print {
  .btn-outline-primary,
  a.btn-outline-primary {
    border: 2px solid #000 !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ========================================
   Discussion Embed Styling
   WCAG 2.2 AAA Compliant Forum Integration
   ======================================== */

/* Lesson Discussion Embed Card */
.lesson-discussion-embed {
    margin: 2.5rem 0;
}

.discussion-embed-card {
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
}

.discussion-embed-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Discussion embed header with gradient */
.discussion-embed-card .card-header {
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.discussion-embed-card .card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
}

/* Discussion icon wrapper animation */
.discussion-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: pulse-gentle 3s ease-in-out infinite;
}

@keyframes pulse-gentle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Prompt styling with lightbulb icon background */
.discussion-prompt {
    position: relative;
}

.prompt-icon-bg {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-icon-bg i {
    font-size: 1.25rem;
}

/* Thought prompts chips styling */
.thought-prompts-section {
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 43, 92, 0.1);
}

.thought-prompt-chip {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
    font-size: 0.9rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
    height: 100%;
}

.thought-prompt-chip:hover {
    background: var(--primary-blue-light);
    border-color: var(--primary-blue);
    transform: translateX(4px);
}

.thought-prompt-chip i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Thread preview cards in discussion embed */
.thread-preview-card {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.thread-preview-card:hover {
    background: white;
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 43, 92, 0.1);
    transform: translateX(4px);
}

.thread-preview-title {
    font-weight: 600;
    transition: color 0.2s ease;
}

.thread-preview-card:hover .thread-preview-title {
    color: var(--primary-blue) !important;
}

.thread-preview-meta {
    font-size: 0.8rem;
}

.thread-preview-meta .separator {
    color: #adb5bd;
}

.thread-heat-indicator {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thread-preview-arrow {
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.thread-preview-card:hover .thread-preview-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Quick post form styling */
.quick-post-form-wrapper {
    border: 2px dashed #dee2e6;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.quick-post-form-wrapper:focus-within {
    border-color: var(--primary-blue);
    background-color: #fafbfc !important;
}

.quick-post-form .form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 43, 92, 0.15);
}

.quick-post-form .form-control-lg {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Reflect & Discuss Callout */
.reflect-discuss-callout {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reflect-discuss-callout:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 43, 92, 0.1);
}

.callout-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Synthesis Discussion Section */
.synthesis-gradient-card {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box;
}

.synthesis-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.synthesis-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--primary-blue-light) 0%, #ffffff 100%);
    border: 1px solid var(--primary-blue);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-blue);
}

.connection-arrow {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
}

/* Unit discussion stats */
.unit-discussion-stats {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.stat-item {
    display: inline-flex;
    align-items: center;
}

/* Color class variations for discussion embeds */
.discussion-embed-card .card-header.bg-info {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%) !important;
}

.discussion-embed-card .card-header.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #000000 !important;
}

.discussion-embed-card .card-header.bg-warning * {
    color: #000000 !important;
}

.discussion-embed-card .card-header.bg-danger {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
    color: #ffffff !important;
}

.discussion-embed-card .card-header.bg-danger * {
    color: #ffffff !important;
}

.discussion-embed-card .card-header.bg-success {
    background: linear-gradient(135deg, #166534 0%, #14532d 100%) !important;
    color: #ffffff !important;
}

.discussion-embed-card .card-header.bg-success * {
    color: #ffffff !important;
}

/* Info color subtle background */
.bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.1) !important;
}

.text-info {
    color: #0dcaf0 !important;
}

/* Warning color for badges and stats */
.badge.bg-white.text-info {
    background-color: #ffffff !important;
    color: #0a7a8f !important;
}

.badge.bg-white.text-warning {
    background-color: #ffffff !important;
    color: #997404 !important;
}

.badge.bg-white.text-danger {
    background-color: #ffffff !important;
    color: #b02a37 !important;
}

/* Responsive adjustments for discussion embeds */
@media (max-width: 991px) {
    .lesson-discussion-embed {
        margin: 2rem 0;
    }

    .discussion-embed-card .card-body {
        padding: 1.5rem !important;
    }

    .thought-prompt-chip {
        font-size: 0.85rem;
        padding: 0.625rem 0.875rem;
    }
}

@media (max-width: 768px) {
    .lesson-discussion-embed {
        margin: 1.5rem 0;
    }

    .discussion-embed-card {
        border-radius: 0.75rem;
    }

    .discussion-embed-card .card-header {
        padding: 1rem !important;
    }

    .discussion-embed-card .card-body {
        padding: 1rem !important;
    }

    .discussion-prompt .lead {
        font-size: 1rem !important;
    }

    .thought-prompts-section {
        padding: 0.75rem;
    }

    .thought-prompt-chip {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .quick-post-form-wrapper {
        padding: 1rem !important;
    }

    .synthesis-header h3 {
        font-size: 1.25rem;
    }

    .module-tag {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 576px) {
    .discussion-icon-wrapper {
        animation: none;
    }

    .prompt-icon-bg {
        width: 36px;
        height: 36px;
    }

    .prompt-icon-bg i {
        font-size: 1rem;
    }

    .discussion-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .discussion-actions .btn {
        width: 100%;
    }

    .thread-preview-card {
        padding: 0.75rem;
    }

    .callout-icon {
        width: 32px;
        height: 32px;
    }
}

/* Reduced motion support for discussion embeds */
@media (prefers-reduced-motion: reduce) {
    .discussion-embed-card,
    .thread-preview-card,
    .thought-prompt-chip,
    .reflect-discuss-callout,
    .thread-preview-arrow,
    .discussion-icon-wrapper {
        transition: none;
        animation: none;
    }

    .discussion-embed-card:hover,
    .thread-preview-card:hover,
    .thought-prompt-chip:hover,
    .reflect-discuss-callout:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .discussion-embed-card {
        border: 3px solid var(--primary-blue);
    }

    .thought-prompt-chip {
        border: 2px solid var(--primary-blue);
    }

    .thread-preview-card {
        border: 2px solid #495057;
    }

    .quick-post-form-wrapper {
        border: 3px dashed var(--primary-blue);
    }
}

/* Print styles for discussion embeds */
@media print {
    .lesson-discussion-embed {
        page-break-inside: avoid;
        border: 2px solid #000;
        padding: 1rem;
        margin: 1rem 0;
    }

    .discussion-embed-card {
        box-shadow: none !important;
    }

    .discussion-embed-card .card-header {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .quick-post-form-wrapper,
    .discussion-actions .btn,
    .collapse {
        display: none !important;
    }

    .thought-prompt-chip {
        border: 1px solid #000;
        background: white !important;
    }
}

/* ========================================
   ARAD Framework Visual Diagram Styling
   WCAG 2.2 AAA Compliant
   ======================================== */

/* Figure container for framework diagrams */
figure[role="figure"] {
  margin: 2rem 0;
  padding: 0;
  border: 0;
}

/* ARAD framework diagram specific styling */
figure[aria-labelledby="arad-visual-caption"] {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--primary-blue-light);
  transition: all 0.3s ease;
}

/* Hover state for enhanced engagement */
figure[aria-labelledby="arad-visual-caption"]:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* Image within figure - ensure proper display */
figure[aria-labelledby="arad-visual-caption"] img {
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image hover effect */
figure[aria-labelledby="arad-visual-caption"] img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Figure caption styling for enhanced readability */
figure[aria-labelledby="arad-visual-caption"] figcaption {
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.6;
  padding: 1rem 2rem 0;
  text-align: center;
  font-weight: 500;
}

/* Strong emphasis in caption */
figure[aria-labelledby="arad-visual-caption"] figcaption strong {
  color: var(--primary-blue);
  font-weight: 700;
}

/* Focus state for accessibility */
figure[aria-labelledby="arad-visual-caption"] img:focus {
  outline: 4px solid var(--primary-blue);
  outline-offset: 4px;
}

/* Responsive adjustments for ARAD diagram */
@media (max-width: 991px) {
  figure[aria-labelledby="arad-visual-caption"] {
    padding: 1.5rem;
  }
  
  figure[aria-labelledby="arad-visual-caption"] figcaption {
    padding: 1rem 1rem 0;
    font-size: 0.9375rem;
  }
}

@media (max-width: 768px) {
  figure[aria-labelledby="arad-visual-caption"] {
    padding: 1rem;
    border-radius: 0.75rem;
  }
  
  figure[aria-labelledby="arad-visual-caption"] img {
    border-radius: 0.375rem;
  }
  
  figure[aria-labelledby="arad-visual-caption"] figcaption {
    font-size: 0.875rem;
    padding: 0.75rem 0.5rem 0;
  }
}

@media (max-width: 576px) {
  figure[aria-labelledby="arad-visual-caption"] {
    padding: 0.75rem;
    margin: 1.5rem 0;
  }
  
  figure[aria-labelledby="arad-visual-caption"] figcaption {
    font-size: 0.8125rem;
    padding: 0.5rem 0.25rem 0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  figure[aria-labelledby="arad-visual-caption"],
  figure[aria-labelledby="arad-visual-caption"] img {
    transition: none;
  }
  
  figure[aria-labelledby="arad-visual-caption"]:hover,
  figure[aria-labelledby="arad-visual-caption"] img:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  figure[aria-labelledby="arad-visual-caption"] {
    border-width: 3px;
    border-color: var(--primary-blue);
  }
  
  figure[aria-labelledby="arad-visual-caption"] img {
    border: 2px solid var(--primary-blue);
  }
}

/* Print styles for ARAD diagram */
@media print {
  figure[aria-labelledby="arad-visual-caption"] {
    background: white;
    border: 2px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
    padding: 1rem;
  }
  
  figure[aria-labelledby="arad-visual-caption"] img {
    max-width: 100%;
    box-shadow: none;
    border: 1px solid #000;
  }
  
  figure[aria-labelledby="arad-visual-caption"] figcaption {
    color: #000;
    font-size: 0.875rem;
  }
}

/* ========================================
   FINAL OVERRIDE: Card Header Color Contrast
   WCAG 2.2 AAA Compliant - Must be at END of file
   ======================================== */

/* Override bg-danger card headers - MAXIMUM SPECIFICITY */
.card .card-header.bg-danger,
.card-header.bg-danger.text-white,
div.card-header.bg-danger,
.card > .card-header.bg-danger {
    background-color: #991b1b !important;
    background-image: none !important;
    background: #991b1b !important;
    color: #ffffff !important;
}

.card-header.bg-danger.text-white *,
.card .card-header.bg-danger *,
.card-header.bg-danger h1,
.card-header.bg-danger h2,
.card-header.bg-danger h3,
.card-header.bg-danger h4,
.card-header.bg-danger h5,
.card-header.bg-danger h6,
.card-header.bg-danger p,
.card-header.bg-danger span,
.card-header.bg-danger i,
.card-header.bg-danger .h5,
.card-header.bg-danger .mb-0 {
    color: #ffffff !important;
}

/* Override bg-success card headers - MAXIMUM SPECIFICITY */
.card .card-header.bg-success,
.card-header.bg-success.text-white,
div.card-header.bg-success,
.card > .card-header.bg-success {
    background-color: #166534 !important;
    background-image: none !important;
    background: #166534 !important;
    color: #ffffff !important;
}

.card-header.bg-success.text-white *,
.card .card-header.bg-success *,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-success p,
.card-header.bg-success span,
.card-header.bg-success i,
.card-header.bg-success .h5,
.card-header.bg-success .mb-0 {
    color: #ffffff !important;
}

/* Global bg-danger/bg-success overrides to ensure contrast anywhere */
.bg-danger {
    background-color: #991b1b !important;
    background-image: none !important;
    color: #ffffff !important;
}

.bg-success {
    background-color: #166534 !important;
    background-image: none !important;
    color: #ffffff !important;
}