/* =====================================================
	 COLOUR SYSTEM - Inclusive Design Palette
	 ===================================================== */
:root {
	--edl-accent-1: #8e44ad;
	--edl-accent-2: #d6336c;
	--edl-accent-3: #f39c12;
	--edl-accent-4: #2ecc71;
	--edl-accent-5: #3498db;
	--edl-text-primary: #2e2e2e;
	--edl-text-secondary: #555555;
	--edl-text-muted: #6b7280;
	
	/* Typography Scale */
	--edl-font-size-base: 1rem;
	--edl-font-size-sm: 0.9rem;
	--edl-font-size-lg: 1.1rem;
	--edl-font-size-xl: 1.25rem;
	--edl-line-height: 1.7;
	--edl-line-height-tight: 1.4;
	
	/* Spacing */
	--edl-spacing-xs: 0.5rem;
	--edl-spacing-sm: 0.75rem;
	--edl-spacing-md: 1rem;
	--edl-spacing-lg: 1.5rem;
	--edl-spacing-xl: 2rem;
	--edl-spacing-2xl: 3rem;
}

.blog-post-content {
	max-width: 900px;
	margin: 0 auto;
	line-height: 1.6;
	color: var(--edl-text-primary);

	/* Hero Section Styling */
	& .hero-section {
		text-align: center;
		padding: 3rem 0;
		background: linear-gradient(135deg, rgba(0, 48, 135, 0.08) 0%, rgba(255, 193, 7, 0.08) 100%);
		border-radius: 12px;
		margin-bottom: 3rem;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(0, 48, 135, 0.1);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23003087' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
			z-index: 0;
		}

		& > * {
			position: relative;
			z-index: 1;
		}

		& .hero-icon {
			margin-bottom: 1.5rem;

			& .accessibility-icon {
				font-size: 4rem;
				color: #28a745;
				filter: drop-shadow(0 4px 8px rgba(40, 167, 69, 0.3));
			}
		}

		& h1 {
			color: #003087;
			margin-bottom: 1.5rem;
			font-size: 3em;
			font-weight: 700;
			text-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}

		& .lead {
			font-size: 1.3em;
			font-weight: 300;
			color: #555;
			margin: 0 auto 2rem auto;
			max-width: 600px;
			padding: 0;
			background: none;
			border: none;
		}

		& .time-investment {
			display: flex;
			justify-content: center;
			gap: 2rem;
			margin-top: 2rem;

			& .time-badge,
			& .impact-badge {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0.75rem 1.5rem;
				background: white;
				border-radius: 50px;
				box-shadow: 0 4px 12px rgba(0,48,135,0.15);
				font-weight: 600;
				color: #003087;
				border: 1px solid rgba(0, 48, 135, 0.1);

				& .clock-icon {
					color: #ffc107;
				}

				& .impact-icon {
					color: #28a745;
				}
			}
		}
	}

	/* Intro Section with Visual */
	& .intro-section {
		display: flex;
		align-items: flex-start;
		gap: 2rem;
		margin-bottom: 3rem;
		padding: 2rem;
		background: rgba(0, 48, 135, 0.03);
		border-radius: 8px;
		border-left: 4px solid #003087;
		border: 1px solid rgba(0, 48, 135, 0.1);

		& .intro-visual {
			flex-shrink: 0;

			& .users-icon {
				font-size: 3rem;
				color: #003087;
				background: rgba(0, 48, 135, 0.1);
				padding: 0.75rem;
				border-radius: 50%;
			}
		}
		
		& p {
			font-size: 1.1em;
			color: #555;
			margin: 0;
		}
	}

	/* WCAG Explanation Section */
	& .wcag-explanation {
		background: white;
		border: 1px solid rgba(0, 48, 135, 0.1);
		border-radius: 12px;
		padding: 2.5rem;
		margin: 3rem 0;
		box-shadow: 0 4px 12px rgba(0,48,135,0.08);

		& .wcag-icon-container {
			text-align: center;
			margin-bottom: 1.5rem;

			& .wcag-icon {
				font-size: 3rem;
				color: #28a745;
				background: rgba(40, 167, 69, 0.1);
				padding: 1rem;
				border-radius: 50%;
			}
		}

		& h2 {
			text-align: center;
			margin-top: 0;
			color: #003087;
		}

		& .wcag-principles {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 1.5rem;
			margin-top: 2rem;

			& .principle-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				padding: 1.5rem;
				background: rgba(0, 48, 135, 0.02);
				border-radius: 8px;
				border: 2px solid transparent;
				transition: all 0.3s ease;

				&:hover {
					border-color: #003087;
					transform: translateY(-2px);
					background: rgba(0, 48, 135, 0.05);
				}

				&:nth-child(1) .principle-icon {
					color: #003087; /* EduLinked Blue for Perceivable */
				}

				&:nth-child(2) .principle-icon {
					color: #28a745; /* Green for Operable */
				}

				&:nth-child(3) .principle-icon {
					color: #ffc107; /* Yellow for Understandable */
				}

				&:nth-child(4) .principle-icon {
					color: #dc3545; /* Red for Robust */
				}

				& .principle-icon {
					font-size: 2rem;
					margin-bottom: 0.75rem;
				}

				& span {
					font-weight: 600;
					color: #003087;
				}
			}
		}
	}

	/* Enhanced Checklist Section */
	& .checklist-section {
		background: #fff;
		border: 1px solid rgba(0, 48, 135, 0.1);
		border-radius: 12px;
		padding: 2.5rem;
		margin: 3rem 0;
		box-shadow: 0 4px 12px rgba(0,48,135,0.08);

		& .section-header {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 2rem;

			& .section-icon {
				font-size: 2rem;
				color: #003087;
			}

			& h2 {
				margin: 0;
				color: #003087;
				border: none;
				padding: 0;
			}
		}

		& .progress-container {
			margin-bottom: 2.5rem;
			padding: 2rem;
			background: linear-gradient(135deg, rgba(0, 48, 135, 0.04) 0%, rgba(255, 193, 7, 0.04) 100%);
			border-radius: 12px;
			border: 2px solid rgba(0, 48, 135, 0.1);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffc107' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
				z-index: 0;
			}

			& > * {
				position: relative;
				z-index: 1;
			}

			& .progress-bar {
				width: 100%;
				height: 14px;
				background: rgba(0, 48, 135, 0.1);
				border-radius: 10px;
				overflow: hidden;
				margin-bottom: 1rem;
				box-shadow: inset 0 2px 4px rgba(0, 48, 135, 0.1);
				border: 1px solid rgba(0, 48, 135, 0.15);

				& .progress-fill {
					height: 100%;
					background: linear-gradient(90deg, #003087 0%, #28a745 50%, #ffc107 100%);
					width: 0%;
					transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
					border-radius: 10px;
					box-shadow: 0 2px 8px rgba(0,48,135,0.3);
					position: relative;

					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
						animation: shimmer 2s infinite;
					}
				}
			}

			& .progress-text {
				font-weight: 700;
				color: #003087;
				font-size: 1em;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5rem;

				&::before {
					content: '📊';
					font-size: 1.2em;
				}
			}
		}
	}

	/* Check Step Styling */
	& .check-step {
		margin: 2rem 0;
		border: 2px solid rgba(0, 48, 135, 0.1);
		border-radius: 12px;
		overflow: hidden;
		transition: all 0.3s ease;
		background: white;

		&.completed {
			border-color: #28a745;
			background: rgba(40, 167, 69, 0.02);
			box-shadow: 0 4px 12px rgba(40, 167, 69, 0.1);
		}

		&:hover {
			border-color: rgba(0, 48, 135, 0.2);
			box-shadow: 0 6px 20px rgba(0, 48, 135, 0.1);
		}

		& .step-header {
			display: flex;
			align-items: center;
			padding: 1.5rem;
			background: rgba(0, 48, 135, 0.02);
			border-bottom: 1px solid rgba(0, 48, 135, 0.1);

			& .step-number {
				width: 45px;
				height: 45px;
				background: linear-gradient(135deg, #003087 0%, #0056b3 100%);
				color: white;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 1.2em;
				margin-right: 1rem;
				box-shadow: 0 3px 8px rgba(0, 48, 135, 0.3);
				transition: all 0.3s ease;
			}

			& .step-info {
				flex: 1;

				& h3 {
					margin: 0 0 0.5rem 0;
					color: #003087;
					font-size: 1.3em;
					font-weight: 600;
				}

				& .time-indicator {
					display: flex;
					align-items: center;
					gap: 0.5rem;
					color: #666;
					font-size: 0.9em;

					& .time-icon {
						font-size: 1em;
						color: #ffc107;
					}
				}
			}

			& .step-icon {
				& .check-image {
					width: 60px;
					height: 60px;
					border-radius: 12px;
					object-fit: cover;
					border: 3px solid;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
					transition: all 0.3s ease;
					filter: brightness(1.1) contrast(1.1);

					&:hover {
						transform: scale(1.1) rotate(2deg);
						box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
						filter: brightness(1.2) contrast(1.2);
					}

					/* Individual image styling using EduLinked palette */
					&.keyboard-image {
						border-color: #28a745; /* Green for keyboard/operable */
						
						&:hover {
							border-color: #20c997;
							box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4);
						}
					}

					&.image-alt-image {
						border-color: #003087; /* EduLinked Blue for perceivable */
						
						&:hover {
							border-color: #0056b3;
							box-shadow: 0 8px 20px rgba(0, 48, 135, 0.4);
						}
					}

					&.headings-image {
						border-color: #6f42c1; /* Purple for structure */
						
						&:hover {
							border-color: #5a32a3;
							box-shadow: 0 8px 20px rgba(111, 66, 193, 0.4);
						}
					}

					&.contrast-image {
						border-color: #ffc107; /* EduLinked Yellow for contrast */
						
						&:hover {
							border-color: #e0a800;
							box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
						}
					}

					&.forms-image {
						border-color: #dc3545; /* Red for forms */
						
						&:hover {
							border-color: #c82333;
							box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4);
						}
					}

					&.navigation-image {
						border-color: #17a2b8; /* Teal for navigation */
						
						&:hover {
							border-color: #138496;
							box-shadow: 0 8px 20px rgba(23, 162, 184, 0.4);
						}
					}
				}
			}
		}

		& .check-item {
			background: white;
			border: none;
			border-radius: 0;
			margin: 0;
			padding: 0;
			display: flex;
			gap: 2rem;

			& .check-content {
				flex: 1;
				padding: 1.5rem;

				& h4 {
					margin-top: 0;
					color: #28a745;
					font-size: 1.1em;
					display: flex;
					align-items: center;
					gap: 0.5rem;
				}

				& ul {
					margin: 1rem 0;
					padding-left: 1.5rem;

					& li {
						margin: 0.75rem 0;
						color: #555;
						position: relative;

						&::marker {
							color: #c0b8cc;
						}
					}
				}

				& .quick-fix {
					display: flex;
					align-items: flex-start;
					gap: 0.75rem;
					margin: 1.5rem 0 0 0;
					padding: 1rem;
					background: #e8f4f8;
					border-left: 3px solid #ffc107;
					border-radius: 6px;

					& .fix-icon {
						color: #ffc107;
						font-size: 1.2em;
						margin-top: 0.1rem;
						flex-shrink: 0;
					}

					& p {
						margin: 0;
						font-weight: 500;

						& strong {
							color: #e67e22;
						}
					}
				}
			}

			& .completion-checkbox {
				padding: 1.5rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #f8f9fa;
				border-left: 1px solid #e9ecef;
				min-width: 150px;

				& input[type="checkbox"] {
					width: 20px;
					height: 20px;
					margin-bottom: 0.5rem;
					accent-color: #28a745;
				}

				& label {
					font-size: 0.9em;
					color: #666;
					text-align: center;
					cursor: pointer;
				}
			}
		}
	}

	/* Enhanced Tools Section */
	& .tools-section {
		margin: 3rem 0;

		& .section-header {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 2rem;

			& .section-icon {
				font-size: 2rem;
				color: #003087;
				background: rgba(0, 48, 135, 0.1);
				padding: 0.5rem;
				border-radius: 50%;
			}

			& h2 {
				margin: 0;
				color: #003087;
				border: none;
				padding: 0;
			}
		}

		& .tools-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: 2rem;

			& .tool-item {
				background: white;
				border: 1px solid rgba(0, 48, 135, 0.1);
				border-radius: 12px;
				padding: 2rem;
				box-shadow: 0 4px 12px rgba(0,48,135,0.08);
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-6px);
					box-shadow: 0 8px 24px rgba(0,48,135,0.15);
					border-color: rgba(0, 48, 135, 0.2);
				}

				& .tool-header {
					display: flex;
					align-items: center;
					gap: 1rem;
					margin-bottom: 1.5rem;
					padding-bottom: 1rem;
					border-bottom: 1px solid rgba(0, 48, 135, 0.1);

					& .tool-category-icon {
						font-size: 1.8rem;
						color: #003087;
						background: rgba(0, 48, 135, 0.1);
						padding: 0.5rem;
						border-radius: 8px;
					}

					& h4 {
						margin: 0;
						color: #003087;
						font-weight: 600;
					}
				}

				& ul {
					margin: 0;
					padding: 0;
					list-style: none;

					& li {
						display: flex;
						align-items: flex-start;
						gap: 0.75rem;
						margin: 1rem 0;
						padding: 1rem;
						background: rgba(0, 48, 135, 0.02);
						border-radius: 8px;
						border-left: 3px solid #ffc107;
						transition: all 0.3s ease;

						&:hover {
							background: rgba(0, 48, 135, 0.05);
							transform: translateX(5px);
						}

						& .tool-icon {
							color: #28a745;
							font-size: 1.2em;
							margin-top: 0.1rem;
							flex-shrink: 0;
						}

						& .tool-info {
							& strong {
								color: #003087;
								display: block;
								margin-bottom: 0.25rem;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
	}

	/* Enhanced Issues Section */
	& .issues-section {
		margin: 3rem 0;

		& .section-header {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 2rem;

			& .section-icon {
				font-size: 2rem;
				color: #dc3545;
				background: rgba(220, 53, 69, 0.1);
				padding: 0.5rem;
				border-radius: 50%;
			}

			& h2 {
				margin: 0;
				color: #003087;
				border: none;
				padding: 0;
			}
		}

		& .issue-item {
			background: white;
			border: 1px solid rgba(220, 53, 69, 0.2);
			border-radius: 12px;
			padding: 0;
			margin: 1.5rem 0;
			overflow: hidden;
			box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
			transition: all 0.3s ease;

			&:hover {
				box-shadow: 0 6px 20px rgba(220, 53, 69, 0.15);
				transform: translateY(-2px);
			}

			& .issue-header {
				display: flex;
				align-items: center;
				gap: 1rem;
				padding: 1.5rem;
				background: rgba(220, 53, 69, 0.03);
				border-bottom: 1px solid rgba(220, 53, 69, 0.1);

				&:has([iconName="image"]) .issue-icon {
					color: #6f42c1; /* Purple for images */
					background: rgba(111, 66, 193, 0.1);
				}

				&:has([iconName="eye"]) .issue-icon {
					color: #003087; /* EduLinked Blue for vision */
					background: rgba(0, 48, 135, 0.1);
				}

				&:has([iconName="keyboard"]) .issue-icon {
					color: #28a745; /* Green for keyboard */
					background: rgba(40, 167, 69, 0.1);
				}

				&:has([iconName="edit"]) .issue-icon {
					color: #ffc107; /* EduLinked Yellow for forms */
					background: rgba(255, 193, 7, 0.1);
				}

				& .issue-icon {
					font-size: 1.8rem;
					padding: 0.5rem;
					border-radius: 8px;
				}

				& h4 {
					margin: 0;
					color: #dc3545;
					font-weight: 600;
				}
			}

			& .issue-content {
				padding: 1.5rem;

				& .problem,
				& .solution {
					display: flex;
					align-items: flex-start;
					gap: 0.75rem;
					margin: 1rem 0;
					padding: 1rem;
					border-radius: 8px;

					& .problem-icon {
						color: #dc3545;
						font-size: 1.2em;
						margin-top: 0.1rem;
						flex-shrink: 0;
						background: rgba(220, 53, 69, 0.1);
						padding: 0.3rem;
						border-radius: 50%;
					}

					& .solution-icon {
						color: #28a745;
						font-size: 1.2em;
						margin-top: 0.1rem;
						flex-shrink: 0;
						background: rgba(40, 167, 69, 0.1);
						padding: 0.3rem;
						border-radius: 50%;
					}

					& p {
						margin: 0;
						color: #555;

						& strong {
							color: #003087;
						}
					}
				}

				& .problem {
					background: rgba(220, 53, 69, 0.02);
					border-left: 3px solid #dc3545;
				}

				& .solution {
					background: rgba(40, 167, 69, 0.02);
					border-left: 3px solid #28a745;
				}
			}
		}
	}

	/* Beyond Section */
	& .beyond-section {
		margin: 3rem 0;
		padding: 2rem;
		background: #f8f9fa;
		border-radius: 12px;
		border-left: 4px solid #c0b8cc;

		& .section-header {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1.5rem;

			& .section-icon {
				font-size: 2rem;
				color: #6610f2; /* Purple for beyond */
			}

			& h2 {
				margin: 0;
				color: #2c3e50;
				border: none;
				padding: 0;
			}
		}

		& .beyond-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 1.5rem;
			margin-top: 2rem;

			& .beyond-item {
				display: flex;
				align-items: flex-start;
				gap: 0.75rem;
				padding: 1.5rem;
				background: white;
				border-radius: 8px;
				border: 1px solid #e9ecef;

				&:nth-child(1) .beyond-icon {
					color: #17a2b8; /* Teal for screen readers */
				}

				&:nth-child(2) .beyond-icon {
					color: #6f42c1; /* Purple for users */
				}

				&:nth-child(3) .beyond-icon {
					color: #28a745; /* Green for code */
				}

				&:nth-child(4) .beyond-icon {
					color: #fd7e14; /* Orange for search/audits */
				}

				& .beyond-icon {
					font-size: 1.5rem;
					margin-top: 0.1rem;
					flex-shrink: 0;
					padding: 0.5rem;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.8);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}

				& strong {
					color: #2c3e50;
					display: block;
					margin-bottom: 0.25rem;
				}

				& .beyond-text {
					flex: 1;
					min-width: 0;
					overflow-wrap: break-word;
					word-wrap: break-word;
				}
			}
		}
	}

	/* Enhanced Action Section */
	& .action-section {
		background: linear-gradient(135deg, #003087 0%, #ffc107 100%);
		color: white;
		padding: 3rem;
		border-radius: 12px;
		margin: 3rem 0;
		position: relative;
		overflow: hidden;
		box-shadow: 0 8px 24px rgba(0, 48, 135, 0.2);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E") repeat;
			z-index: 0;
		}

		& > * {
			position: relative;
			z-index: 1;
		}

		& .action-header {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1.5rem;

			& .action-icon {
				font-size: 2.5rem;
				color: #ffc107;
				filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
				animation: pulse 2s ease-in-out infinite;
			}

			& h2 {
				color: white;
				border-bottom: 3px solid rgba(255, 193, 7, 0.5);
				margin: 0;
				padding-bottom: 0.5rem;
				text-shadow: 0 2px 4px rgba(0,0,0,0.3);
			}
		}

		& p {
			color: rgba(255,255,255,0.95);
			font-size: 1.1em;
			text-shadow: 0 1px 2px rgba(0,0,0,0.2);
		}

		& .next-steps {
			background: rgba(255,255,255,0.15);
			padding: 2rem;
			border-radius: 10px;
			margin-top: 2rem;
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 193, 7, 0.3);

			& h4 {
				color: white;
				margin-top: 0;
				margin-bottom: 1.5rem;
				text-shadow: 0 1px 2px rgba(0,0,0,0.3);
			}

			& ol {
				margin: 0;
				padding-left: 0;
				list-style: none;
				counter-reset: step-counter;

				& li {
					counter-increment: step-counter;
					display: flex;
					align-items: flex-start;
					gap: 1rem;
					margin: 1.5rem 0;
					padding: 1.25rem;
					background: rgba(255,255,255,0.12);
					border-radius: 8px;
					color: rgba(255,255,255,0.95);
					position: relative;
					border-left: 3px solid rgba(255, 193, 7, 0.6);
					transition: all 0.3s ease;

					&:hover {
						background: rgba(255,255,255,0.18);
						transform: translateX(5px);
					}

					&::before {
						content: counter(step-counter);
						background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
						color: #003087;
						width: 28px;
						height: 28px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 0.9em;
						flex-shrink: 0;
						box-shadow: 0 2px 4px rgba(0,0,0,0.3);
					}

					& .step-icon {
						font-size: 1.2em;
						margin-top: 0.1rem;
						flex-shrink: 0;
					}

					&:nth-child(1) .step-icon {
						color: #90EE90; /* Light green for start */
					}

					&:nth-child(2) .step-icon {
						color: #FFB347; /* Light orange for fix */
					}

					&:nth-child(3) .step-icon {
						color: #87CEEB; /* Light blue for implement */
					}

					&:nth-child(4) .step-icon {
						color: #F0E68C; /* Light yellow for professional */
					}
				}
			}
		}
	}

	/* Enhanced Conclusion */
	& .conclusion {
		background: linear-gradient(135deg, rgba(0, 48, 135, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
		border: 2px solid rgba(0, 48, 135, 0.1);
		border-radius: 12px;
		padding: 3rem;
		margin: 3rem 0;
		text-align: center;
		position: relative;
		box-shadow: 0 6px 20px rgba(0, 48, 135, 0.1);

		& .conclusion-icon {
			margin-bottom: 1.5rem;

			& .heart-icon {
				font-size: 3.5rem;
				color: #e91e63;
				animation: heartbeat 2s ease-in-out infinite;
				filter: drop-shadow(0 3px 6px rgba(233, 30, 99, 0.3));
			}
		}

		& p {
			margin: 0;
			font-size: 1.3em;
			color: #003087;
			max-width: 650px;
			margin: 0 auto;
			font-weight: 500;
			text-shadow: 0 1px 2px rgba(0,0,0,0.1);

			& strong {
				color: #ffc107;
				font-weight: 700;
			}
		}
	}

	/* Beyond Section Enhancement */
	& .beyond-section {
		margin: 3rem 0;
		padding: 2rem;
		background: rgba(0, 48, 135, 0.02);
		border-radius: 12px;
		border-left: 4px solid #003087;
		border: 1px solid rgba(0, 48, 135, 0.1);

		& .section-header {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1.5rem;

			& .section-icon {
				font-size: 2rem;
				color: #6610f2;
				background: rgba(102, 16, 242, 0.1);
				padding: 0.5rem;
				border-radius: 50%;
			}

			& h2 {
				margin: 0;
				color: #003087;
				border: none;
				padding: 0;
			}
		}

		& .beyond-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 1.5rem;
			margin-top: 2rem;

			& .beyond-item {
				display: flex;
				align-items: flex-start;
				gap: 0.75rem;
				padding: 1.5rem;
				background: white;
				border-radius: 10px;
				border: 1px solid rgba(0, 48, 135, 0.1);
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-3px);
					box-shadow: 0 6px 20px rgba(0, 48, 135, 0.1);
					border-color: rgba(0, 48, 135, 0.2);
				}

				&:nth-child(1) .beyond-icon {
					color: #17a2b8; /* Teal for screen readers */
					background: rgba(23, 162, 184, 0.1);
				}

				&:nth-child(2) .beyond-icon {
					color: #6f42c1; /* Purple for users */
					background: rgba(111, 66, 193, 0.1);
				}

				&:nth-child(3) .beyond-icon {
					color: #28a745; /* Green for code */
					background: rgba(40, 167, 69, 0.1);
				}

				&:nth-child(4) .beyond-icon {
					color: #ffc107; /* EduLinked Yellow for search/audits */
					background: rgba(255, 193, 7, 0.1);
				}

				& .beyond-icon {
					font-size: 1.8rem;
					margin-top: 0.1rem;
					flex-shrink: 0;
					padding: 0.75rem;
					border-radius: 10px;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}

				& strong {
					color: #003087;
					font-weight: 600;
				}
			}
		}
	}

	/* General Styling */
	& h1 {
		color: #003087;
		margin-bottom: 1rem;
		font-size: 2.5em;
		font-weight: 700;
	}

	& h2 {
		color: #003087;
		margin: 2.5rem 0 1.5rem 0;
		font-size: 1.8em;
		font-weight: 600;
		border-bottom: 2px solid #003087;
		padding-bottom: 0.5rem;
	}

	& h3 {
		color: #003087;
		margin: 2rem 0 1rem 0;
		font-size: 1.4em;
		font-weight: 600;
	}

	& h4 {
		color: #003087;
		margin: 1.5rem 0 0.75rem 0;
		font-size: 1.2em;
		font-weight: 600;
	}

	& ul, & ol {
		margin: 1rem 0;
		padding-left: 2rem;

		& li {
			margin: 0.5rem 0;
			color: #555;
		}
	}

	& p {
		margin: 1rem 0;
		color: #555;
	}
}

/* Enhanced Animations */
@keyframes heartbeat {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@keyframes pulse {
	0%, 100% { 
		transform: scale(1);
		filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
	}
	50% { 
		transform: scale(1.05);
		filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes float {
	0%, 100% { 
		transform: translateY(0px);
	}
	50% { 
		transform: translateY(-10px);
	}
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes slideInFromLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInFromRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 5px rgba(0, 48, 135, 0.2);
	}
	50% {
		box-shadow: 0 0 20px rgba(0, 48, 135, 0.4), 0 0 30px rgba(255, 193, 7, 0.2);
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.blog-post-content {
		padding: 0 1rem;

		& .hero-section {
			padding: 2rem 1rem;

			& h1 {
				font-size: 2.2em;
			}

			& .time-investment {
				flex-direction: column;
				gap: 1rem;
				align-items: center;
			}
		}

		& .intro-section {
			flex-direction: column;
			text-align: center;
		}

		& .wcag-principles {
			grid-template-columns: 1fr;
		}

		& .check-step .check-item {
			flex-direction: column;

			& .completion-checkbox {
				border-left: none;
				border-top: 1px solid #e9ecef;
				min-width: auto;
				flex-direction: row;
				justify-content: center;
			}
		}

		& .step-icon .check-icon {
			font-size: 1.8rem;
			width: 45px;
			height: 45px;
			padding: 0.5rem;
		}

		& .tools-grid {
			grid-template-columns: 1fr;
		}

		& .beyond-grid {
			grid-template-columns: 1fr;
		}

		& .action-section {
			padding: 2rem 1rem;

			& .next-steps ol li {
				flex-direction: column;
				text-align: center;
				gap: 0.5rem;
			}
		}
	}
}

/* Survey Section Styles */
.survey-section {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-radius: 16px;
	padding: 2.5rem;
	margin: 2rem 0;
	border: 1px solid #dee2e6;
}

.survey-section .section-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.survey-section .section-icon {
	font-size: 2rem;
	color: #dea93f;
}

.survey-section .section-header h2 {
	margin: 0;
	color: #222830;
	font-size: 1.75rem;
}

.survey-intro {
	font-size: 1.1rem;
	color: #495057;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.survey-progress {
	margin-bottom: 2rem;
}

.survey-progress-bar {
	height: 8px;
	background: #dee2e6;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.survey-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #c0b8cc, #dea93f);
	border-radius: 4px;
	width: 0%;
	transition: width 0.4s ease;
}

.survey-progress-text {
	font-size: 0.875rem;
	color: #6c757d;
	font-weight: 500;
}

.survey-categories {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.survey-category {
	background: #ffffff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #f1f3f5;
}

.category-icon {
	font-size: 1.5rem;
	color: #c0b8cc;
}

.category-header h3 {
	margin: 0;
	font-size: 1.25rem;
	color: #222830;
}

.survey-item {
	padding: 1rem 0;
	border-bottom: 1px solid #f1f3f5;
}

.survey-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.survey-question {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.question-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	background: #c0b8cc;
	color: #ffffff;
	border-radius: 50%;
	font-size: 0.875rem;
	font-weight: 600;
	flex-shrink: 0;
}

.survey-question p {
	margin: 0;
	font-size: 1rem;
	color: #222830;
	line-height: 1.5;
	padding-top: 0.25rem;
}

.survey-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-left: calc(28px + 0.75rem);
}

.survey-option {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 2px solid #dee2e6;
	background: #ffffff;
	transition: all 0.2s ease;
}

.survey-option:hover {
	border-color: #c0b8cc;
	background: #f8f5fc;
}

.survey-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.survey-option input:checked + .option-label {
	font-weight: 600;
}

.survey-option.yes input:checked ~ .option-label,
.survey-option.yes:has(input:checked) {
	background: #d3f9d8;
	border-color: #40c057;
	color: #2f9e44;
}

.survey-option.partial input:checked ~ .option-label,
.survey-option.partial:has(input:checked) {
	background: #fff3bf;
	border-color: #fab005;
	color: #e67700;
}

.survey-option.no input:checked ~ .option-label,
.survey-option.no:has(input:checked) {
	background: #ffe3e3;
	border-color: #fa5252;
	color: #e03131;
}

.survey-option.unsure input:checked ~ .option-label,
.survey-option.unsure:has(input:checked) {
	background: #e9ecef;
	border-color: #868e96;
	color: #495057;
}

.option-label {
	font-size: 0.875rem;
	color: #495057;
}

.survey-item.completed .question-number {
	background: #dea93f;
}

/* Survey Results */
.survey-results {
	margin-top: 2rem;
	background: #ffffff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.results-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.results-icon {
	font-size: 1.75rem;
	color: #dea93f;
}

.results-header h3 {
	margin: 0;
	font-size: 1.5rem;
	color: #222830;
}

.results-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.result-card {
	text-align: center;
	padding: 1.25rem;
	border-radius: 12px;
	background: #f8f9fa;
	border: 2px solid transparent;
	transition: transform 0.2s ease;
}

.result-card:hover {
	transform: translateY(-2px);
}

.result-card.inclusive {
	background: #d3f9d8;
	border-color: #40c057;
}

.result-card.partial {
	background: #fff3bf;
	border-color: #fab005;
}

.result-card.gap {
	background: #ffe3e3;
	border-color: #fa5252;
}

.result-card.unsure {
	background: #e9ecef;
	border-color: #868e96;
}

.result-number {
	font-size: 2.5rem;
	font-weight: 700;
	color: #222830;
	line-height: 1;
	margin-bottom: 0.25rem;
}

.result-label {
	font-size: 1rem;
	font-weight: 600;
	color: #495057;
	margin-bottom: 0.25rem;
}

.result-desc {
	font-size: 0.75rem;
	color: #6c757d;
}

.results-message {
	padding: 1rem;
	border-radius: 8px;
	background: linear-gradient(135deg, #f8f5fc 0%, #fff9e6 100%);
	border-left: 4px solid #dea93f;
	font-size: 1rem;
	line-height: 1.6;
	color: #495057;
}

.results-message strong {
	color: #222830;
}

.survey-actions {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.survey-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	border: none;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(192, 184, 204, 0.3);
}

.survey-submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(192, 184, 204, 0.4);
}

.survey-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.survey-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: #ffffff;
	border: 2px solid #dee2e6;
	border-radius: 8px;
	font-size: 1rem;
	color: #495057;
	cursor: pointer;
	transition: all 0.2s ease;
}

.survey-reset-btn:hover {
	background: #f8f9fa;
	border-color: #c0b8cc;
	color: #222830;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.survey-section {
		padding: 1.5rem;
	}

	.survey-options {
		flex-direction: column;
		margin-left: 0;
	}

	.survey-option {
		width: 100%;
		justify-content: center;
	}

	.results-summary {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Survey Completion Message */
.survey-completion-message {
	animation: slideDown 0.4s ease;
	margin-bottom: 1.5rem;
}

.survey-completion-message .completion-content {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, #d3f9d8 0%, #b2f2bc 100%);
	border: 2px solid #40c057;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(64, 192, 87, 0.2);
	transition: opacity 0.3s ease;
}

.survey-completion-message .completion-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #40c057;
	color: white;
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: bold;
	flex-shrink: 0;
}

.survey-completion-message h4 {
	margin: 0;
	color: #2f9e44;
	font-size: 1.1rem;
}

.survey-completion-message p {
	margin: 0;
	color: #1e7b34;
	font-size: 0.95rem;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Ensure submit button icon inherits color */
.survey-submit-btn standard\:icon,
.survey-submit-btn .fa-check-circle {
	color: #ffffff !important;
}



/* ==========================================
	 PROMPT 1-4: Hero, Pathway, Reflection, Knowledge Hub Styles
	 ========================================== */

/* Breadcrumb Navigation */
.breadcrumb-nav {
	padding: 1rem 0;
	margin-bottom: 1rem;
}

.breadcrumb-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumb-list li {
	display: flex;
	align-items: center;
	font-size: 0.9rem;
	color: #666;
}

.breadcrumb-list li:not(:last-child)::after {
	content: '→';
	margin-left: 0.5rem;
	color: #c0b8cc;
}

.breadcrumb-list a {
	color: #003087;
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumb-list a:hover {
	color: #c0b8cc;
	text-decoration: underline;
}

.breadcrumb-list li[aria-current="page"] {
	color: #222830;
	font-weight: 500;
}

/* Lesson Progress Tracker */
.lesson-progress {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, rgba(192, 184, 204, 0.1) 0%, rgba(222, 169, 63, 0.1) 100%);
	border-radius: 12px;
	border: 1px solid rgba(192, 184, 204, 0.3);
}

.progress-label {
	font-weight: 600;
	color: #222830;
	font-size: 0.95rem;
	white-space: nowrap;
}

.progress-bar-container {
	flex: 1;
	height: 8px;
	background: rgba(34, 40, 48, 0.1);
	border-radius: 4px;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #c0b8cc 0%, #dea93f 100%);
	border-radius: 4px;
	transition: width 0.5s ease;
}

/* Hero Section Enhancements */
.hero-section .hero-eyebrow {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	color: #222830;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 50px;
	margin-bottom: 1.5rem;
}

.hero-section .hero-description {
	font-size: 1.1em;
	color: #555;
	max-width: 700px;
	margin: 0 auto 1rem auto;
	line-height: 1.7;
}

.hero-section .hero-supporting {
	font-size: 1em;
	color: #666;
	max-width: 650px;
	margin: 0 auto 2rem auto;
	line-height: 1.6;
}

.hero-section .hero-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.hero-section .hero-btn-primary,
.hero-section .hero-btn-secondary {
	display: inline-flex;
	align-items: center;
	padding: 0.875rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.hero-section .hero-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(192, 184, 204, 0.4);
}

.hero-section .hero-btn-secondary:hover {
	background: rgba(0, 48, 135, 0.05);
	transform: translateY(-2px);
}

.hero-section .hero-note {
	font-size: 0.9em;
	color: #666;
	font-style: italic;
	max-width: 600px;
	margin: 0 auto;
}

/* Learning Pathway Section */
.learning-pathway-section {
	margin: 3rem 0;
	padding: 2.5rem;
	background: linear-gradient(135deg, rgba(0, 48, 135, 0.03) 0%, rgba(192, 184, 204, 0.05) 100%);
	border-radius: 16px;
	border: 1px solid rgba(0, 48, 135, 0.1);
}

.learning-pathway-section .section-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.learning-pathway-section .section-icon {
	font-size: 2.5rem;
	color: #dea93f;
	background: rgba(222, 169, 63, 0.1);
	padding: 0.75rem;
	border-radius: 12px;
}

.learning-pathway-section h2 {
	margin: 0;
	color: #222830;
	border: none;
	padding: 0;
}

.learning-pathway-section .pathway-intro {
	font-size: 1.05em;
	color: #555;
	margin-bottom: 0.75rem;
	line-height: 1.6;
}

.lesson-pathway {
	position: relative;
	margin-top: 2.5rem;
}

.pathway-line {
	position: absolute;
	left: 28px;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #c0b8cc 0%, #dea93f 50%, #c0b8cc 100%);
	border-radius: 2px;
}

.lesson-card {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: white;
	border-radius: 12px;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	position: relative;
}

.lesson-card:hover {
	border-color: #c0b8cc;
	transform: translateX(8px);
	box-shadow: 0 6px 20px rgba(192, 184, 204, 0.2);
}

.lesson-card[data-lesson="1"] {
	border-color: #dea93f;
	background: linear-gradient(135deg, rgba(222, 169, 63, 0.08) 0%, white 100%);
}

.lesson-number {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	color: #222830;
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(192, 184, 204, 0.3);
	z-index: 1;
}

.lesson-card[data-lesson="1"] .lesson-number {
	background: linear-gradient(135deg, #dea93f 0%, #c0b8cc 100%);
	box-shadow: 0 4px 16px rgba(222, 169, 63, 0.4);
}

.lesson-content h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	color: #222830;
}

.lesson-content p {
	margin: 0 0 0.75rem 0;
	color: #666;
	font-size: 0.95rem;
}

.lesson-link {
	display: inline-flex;
	align-items: center;
	color: #003087;
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.lesson-link:hover {
	color: #c0b8cc;
}

/* Reflection Section */
.reflection-section {
	margin: 3rem 0;
	padding: 2.5rem;
	background: white;
	border-radius: 16px;
	border: 2px solid rgba(222, 169, 63, 0.3);
	box-shadow: 0 4px 20px rgba(222, 169, 63, 0.1);
}

.reflection-section .section-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.reflection-section .section-icon {
	font-size: 2.5rem;
	color: #dea93f;
	background: rgba(222, 169, 63, 0.1);
	padding: 0.75rem;
	border-radius: 12px;
}

.reflection-section h2 {
	margin: 0;
	color: #222830;
	border: none;
	padding: 0;
}

.reflection-intro {
	font-size: 1.05em;
	color: #555;
	margin-bottom: 2rem;
	line-height: 1.6;
}

.reflection-questions {
	background: rgba(192, 184, 204, 0.08);
	padding: 2rem;
	border-radius: 12px;
	margin-bottom: 2rem;
}

.reflection-questions h3 {
	margin: 0 0 1rem 0;
	color: #222830;
	font-size: 1.2rem;
}

.reflection-questions ol {
	margin: 0;
	padding-left: 1.5rem;
}

.reflection-questions li {
	margin: 0.75rem 0;
	color: #555;
	line-height: 1.6;
	padding-left: 0.5rem;
}

.reflection-questions li::marker {
	color: #dea93f;
	font-weight: 600;
}

.capability-section {
	background: linear-gradient(135deg, rgba(0, 48, 135, 0.05) 0%, rgba(192, 184, 204, 0.1) 100%);
	padding: 2rem;
	border-radius: 12px;
	border-left: 4px solid #003087;
}

.capability-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.capability-icon {
	font-size: 2rem;
	color: #003087;
}

.capability-section h3 {
	margin: 0;
	color: #222830;
	font-size: 1.2rem;
}

.capability-section p {
	margin: 0.75rem 0;
	color: #555;
	line-height: 1.6;
}

.capability-note {
	font-size: 0.95em;
	color: #003087;
	font-weight: 500;
}

/* Knowledge Hub Section */
.knowledge-hub-section {
	margin: 3rem 0;
	padding: 2.5rem;
	background: linear-gradient(135deg, rgba(34, 40, 48, 0.03) 0%, rgba(0, 48, 135, 0.05) 100%);
	border-radius: 16px;
	border: 1px solid rgba(34, 40, 48, 0.1);
}

.knowledge-hub-section .section-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.knowledge-hub-section .section-icon {
	font-size: 2rem;
	color: #222830;
	background: rgba(34, 40, 48, 0.1);
	padding: 0.75rem;
	border-radius: 12px;
}

.knowledge-hub-section h2 {
	margin: 0;
	color: #222830;
	border: none;
	padding: 0;
}

.related-topics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.topic-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: white;
	border-radius: 10px;
	border: 2px solid transparent;
	text-decoration: none;
	color: #222830;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.topic-link:hover {
	border-color: #c0b8cc;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(192, 184, 204, 0.2);
	color: #003087;
}

.topic-link standard\:icon,
.topic-link .fa-solid {
	color: #dea93f;
	font-size: 1.25rem;
}

.continue-learning {
	background: white;
	padding: 2rem;
	border-radius: 12px;
	border: 2px solid rgba(0, 48, 135, 0.15);
}

.continue-learning h3 {
	margin: 0 0 1.5rem 0;
	color: #222830;
	font-size: 1.2rem;
}

.continue-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.continue-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(135deg, #003087 0%, #0056b3 100%);
	color: white;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.continue-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 48, 135, 0.3);
}

.continue-link standard\:icon,
.continue-link .fa-solid {
	color: #dea93f;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.breadcrumb-list {
		font-size: 0.85rem;
	}
	
	.lesson-progress {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}
	
	.hero-section .hero-buttons {
		flex-direction: column;
		align-items: center;
	}
	
	.hero-section .hero-btn-primary,
	.hero-section .hero-btn-secondary {
		width: 100%;
		max-width: 280px;
		justify-content: center;
	}
	
	.lesson-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.pathway-line {
		display: none;
	}
	
	.lesson-number {
		width: 48px;
		height: 48px;
		font-size: 1.1rem;
	}
	
	.related-topics-grid {
		grid-template-columns: 1fr;
	}
	
	.continue-links {
		flex-direction: column;
	}
	
	.continue-link {
		width: 100%;
		justify-content: center;
	}
}



/* ==========================================
	 PROMPT 7: Plain Language Support Styles
	 ========================================== */

.plain-language-section {
	margin: 3rem 0;
	padding: 2.5rem;
	background: linear-gradient(135deg, rgba(222, 169, 63, 0.08) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 16px;
	border: 2px solid rgba(222, 169, 63, 0.3);
}

.plain-language-section .section-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.plain-language-section .section-icon {
	font-size: 2rem;
	color: #dea93f;
	background: rgba(222, 169, 63, 0.15);
	padding: 0.75rem;
	border-radius: 12px;
}

.plain-language-section h2 {
	margin: 0;
	color: #222830;
	border: none;
	padding: 0;
	font-size: 1.5rem;
}

.summary-text {
	font-size: 1.15em;
	line-height: 1.7;
	color: #333;
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: white;
	border-radius: 12px;
	border-left: 4px solid #dea93f;
}

.key-ideas {
	background: white;
	padding: 2rem;
	border-radius: 12px;
	margin-bottom: 2rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.key-ideas h3 {
	margin: 0 0 1.25rem 0;
	color: #222830;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.key-ideas h3::before {
	content: '💡';
	font-size: 1.3rem;
}

.key-ideas ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.key-ideas li {
	padding: 0.75rem 0;
	padding-left: 1.75rem;
	position: relative;
	border-bottom: 1px solid rgba(192, 184, 204, 0.2);
	line-height: 1.6;
}

.key-ideas li:last-child {
	border-bottom: none;
}

.key-ideas li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #dea93f;
	font-weight: bold;
}

.key-ideas li strong {
	color: #003087;
}

.accessibility-notice {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, #003087 0%, #0056b3 100%);
	border-radius: 12px;
	color: white;
}

.accessibility-notice .notice-icon {
	font-size: 2.5rem;
	color: #dea93f;
	flex-shrink: 0;
}

.accessibility-notice .notice-content h4 {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	color: white;
}

.accessibility-notice .notice-content p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 0.95;
}

/* ==========================================
	 PROMPT 8: Lesson Navigation Styles
	 ========================================== */

.lesson-navigation {
	margin: 3rem 0;
	padding: 2rem 0;
	border-top: 2px solid rgba(192, 184, 204, 0.3);
}

.nav-divider {
	text-align: center;
	margin-bottom: 1.5rem;
}

.nav-divider span {
	background: white;
	padding: 0.5rem 1.5rem;
	color: #666;
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: relative;
}

.nav-buttons {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.nav-btn {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.75rem;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.3s ease;
	flex: 1;
	min-width: 250px;
}

.nav-btn-overview {
	background: rgba(192, 184, 204, 0.15);
	border: 2px solid #c0b8cc;
	color: #222830;
}

.nav-btn-overview:hover {
	background: #c0b8cc;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(192, 184, 204, 0.3);
}

.nav-btn-next {
	background: linear-gradient(135deg, #003087 0%, #0056b3 100%);
	border: 2px solid transparent;
	color: white;
	justify-content: flex-end;
}

.nav-btn-next:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 48, 135, 0.3);
}

.nav-btn-prev {
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	border: 2px solid transparent;
	color: #222830;
}

.nav-btn-prev:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(192, 184, 204, 0.3);
}

.nav-btn .nav-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.nav-btn-next .nav-icon,
.nav-btn-prev .nav-icon {
	color: #dea93f;
}

.nav-btn-overview .nav-icon {
	color: #003087;
}

.nav-btn-overview:hover .nav-icon {
	color: #222830;
}

.nav-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.nav-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.8;
}

.nav-title {
	font-weight: 600;
	font-size: 1.05rem;
}

/* Navigation when there's both prev and next */
.nav-buttons.has-both {
	justify-content: space-between;
}

.nav-buttons.has-both .nav-btn {
	max-width: calc(50% - 0.5rem);
}

/* Responsive */
@media (max-width: 768px) {
	.plain-language-section {
		padding: 1.5rem;
	}
	
	.key-ideas {
		padding: 1.5rem;
	}
	
	.accessibility-notice {
		flex-direction: column;
		text-align: center;
	}
	
	.nav-buttons {
		flex-direction: column;
	}
	
	.nav-btn {
		min-width: 100%;
		justify-content: center;
		text-align: center;
	}
	
	.nav-btn-next {
		justify-content: center;
	}
	
	.nav-text {
		align-items: center;
	}
}


	/* Quick Summary Section */
	.quick-summary-section {
		margin-bottom: 2rem;
		padding: 1.5rem;
		background: linear-gradient(135deg, rgba(46, 204, 113, 0.08) 0%, rgba(192, 184, 204, 0.08) 100%);
		border-radius: 12px;
		border: 1px solid rgba(46, 204, 113, 0.2);
	}

	.quick-summary-header {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		margin-bottom: 1rem;
	}

	.quick-summary-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: rgba(46, 204, 113, 0.15);
		border-radius: 50%;
	}

	.quick-summary-title {
		font-size: 1.25rem;
		font-weight: 600;
		color: #222830;
		margin: 0;
	}

	.quick-summary-subtitle {
		font-size: 0.85rem;
		color: #666;
		margin: 0.25rem 0 0 0;
	}

	.quick-summary-intro {
		font-size: 1rem;
		line-height: 1.7;
		color: #444;
		margin-bottom: 1rem;
		padding: 0.75rem 1rem;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 8px;
		border-left: 3px solid #2ecc71;
	}

	.quick-summary-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.quick-summary-item {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba(46, 204, 113, 0.15);
	}

	.quick-summary-item:last-child {
		border-bottom: none;
	}

	.quick-summary-bullet {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
		color: #fff;
		font-size: 0.85rem;
		font-weight: 600;
		border-radius: 50%;
	}

	/* Key Ideas Section */
	.key-ideas-section {
		margin-bottom: 2rem;
		padding: 1.5rem;
		background: linear-gradient(135deg, rgba(52, 152, 219, 0.08) 0%, rgba(192, 184, 204, 0.08) 100%);
		border-radius: 12px;
		border: 1px solid rgba(52, 152, 219, 0.2);
	}

	.key-ideas-header {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		margin-bottom: 1rem;
	}

	.key-ideas-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: rgba(52, 152, 219, 0.15);
		border-radius: 50%;
	}

	.key-ideas-title {
		font-size: 1.25rem;
		font-weight: 600;
		color: #222830;
		margin: 0;
	}

	.key-ideas-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.key-ideas-item {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba(52, 152, 219, 0.15);
	}

	.key-ideas-item:last-child {
		border-bottom: none;
	}

	.key-ideas-bullet {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		border-radius: 50%;
	}

	.key-ideas-item strong {
		color: #222830;
		font-weight: 600;
	}


	/* Accessibility Support Notice - Easy Read Indicator */
	.accessibility-support-notice {
		display: flex;
		gap: 1.25rem;
		align-items: flex-start;
		padding: 1.25rem 1.5rem;
		margin-bottom: 2rem;
		background: linear-gradient(135deg, rgba(142, 68, 173, 0.08) 0%, rgba(192, 184, 204, 0.12) 100%);
		border-radius: 12px;
		border: 1px solid rgba(142, 68, 173, 0.2);
	}

	.accessibility-support-notice-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: rgba(142, 68, 173, 0.1);
		border-radius: 50%;
	}

	.accessibility-support-notice-content {
		flex: 1;
	}

	.accessibility-support-notice-title {
		font-size: 1.15rem;
		font-weight: 600;
		color: #222830;
		margin: 0 0 0.5rem 0;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		flex-wrap: wrap;
	}

	.accessibility-support-notice-badge {
		display: inline-flex;
		align-items: center;
		padding: 0.2rem 0.6rem;
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: #fff;
		background: linear-gradient(135deg, #8e44ad 0%, #c0b8cc 100%);
		border-radius: 20px;
	}

	.accessibility-support-notice-text {
		margin: 0;
		font-size: 0.95rem;
		color: #555;
		line-height: 1.6;
	}


	/* Lesson Navigation */
	.lesson-navigation {
		margin-top: 3rem;
		padding-top: 2rem;
	}

	.nav-divider {
		text-align: center;
		margin-bottom: 1.5rem;
		position: relative;
	}

	.nav-divider::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, transparent, rgba(192, 184, 204, 0.4), transparent);
	}

	.nav-divider span {
		background: #fff;
		padding: 0 1.5rem;
		color: #888;
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: 600;
		position: relative;
		z-index: 1;
	}

	.nav-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	@media (max-width: 768px) {
		.nav-buttons {
			grid-template-columns: 1fr;
		}
	}

	.nav-btn {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1.25rem 1.5rem;
		background: linear-gradient(135deg, rgba(34, 40, 48, 0.03) 0%, rgba(192, 184, 204, 0.08) 100%);
		border: 2px solid rgba(192, 184, 204, 0.25);
		border-radius: 12px;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.nav-btn:hover {
		background: linear-gradient(135deg, rgba(222, 169, 63, 0.08) 0%, rgba(192, 184, 204, 0.12) 100%);
		border-color: #dea93f;
		transform: translateY(-2px);
	}

	.nav-btn-overview {
		justify-content: flex-start;
	}

	.nav-btn-next {
		justify-content: flex-end;
	}

	.nav-text {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.nav-label {
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: #888;
		font-weight: 600;
	}

	.nav-title {
		font-size: 1rem;
		font-weight: 600;
		color: #222830;
	}

	.nav-icon {
		font-size: 1.25rem;
		color: #dea93f;
	}


	/* Content Section Headers */
	.content-section-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin: 2.5rem 0 1.5rem 0;
		padding-bottom: 0.75rem;
		border-bottom: 2px solid rgba(192, 184, 204, 0.3);
	}

	.content-section-header .section-icon {
		font-size: 2rem;
		color: #dea93f;
		background: rgba(222, 169, 63, 0.1);
		padding: 0.75rem;
		border-radius: 12px;
	}

	.content-section-header h2 {
		margin: 0;
		color: #222830;
		border: none;
		padding: 0;
	}

	/* Intro Block */
	.intro-block {
		display: flex;
		gap: 1.5rem;
		align-items: flex-start;
		padding: 1.5rem;
		background: linear-gradient(135deg, rgba(0, 48, 135, 0.05) 0%, rgba(192, 184, 204, 0.08) 100%);
		border-radius: 12px;
		margin-bottom: 2rem;
		border-left: 4px solid #003087;
	}

	.intro-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		background: rgba(0, 48, 135, 0.1);
		border-radius: 50%;
		font-size: 1.5rem;
		color: #003087;
	}

	.intro-content p {
		margin: 0.5rem 0;
		color: #444;
		line-height: 1.7;
	}

	.intro-content p:first-child {
		margin-top: 0;
	}

	/* Barriers Section */
	.barriers-intro {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.5rem;
		padding: 1rem 1.25rem;
		background: rgba(220, 53, 69, 0.05);
		border-radius: 8px;
		border-left: 3px solid #dc3545;
	}

	.barriers-intro-icon {
		font-size: 1.5rem;
		color: #dc3545;
	}

	.barriers-intro p {
		margin: 0;
		font-weight: 600;
		color: #333;
	}

	.barriers-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.barrier-item {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 1.25rem;
		background: white;
		border-radius: 10px;
		border: 2px solid rgba(192, 184, 204, 0.2);
		transition: all 0.3s ease;
	}

	.barrier-item:hover {
		border-color: #c0b8cc;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(192, 184, 204, 0.2);
	}

	.barrier-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: linear-gradient(135deg, rgba(192, 184, 204, 0.15) 0%, rgba(222, 169, 63, 0.15) 100%);
		border-radius: 10px;
		font-size: 1.25rem;
		color: #222830;
	}

	.barrier-item span {
		font-weight: 500;
		color: #333;
	}

	/* Highlight Box */
	.highlight-box {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		padding: 1.5rem;
		background: linear-gradient(135deg, rgba(222, 169, 63, 0.1) 0%, rgba(192, 184, 204, 0.1) 100%);
		border-radius: 12px;
		border: 2px solid rgba(222, 169, 63, 0.3);
		margin: 2rem 0;
	}

	.highlight-box .highlight-icon {
		flex-shrink: 0;
		font-size: 2rem;
		color: #dea93f;
	}

	.highlight-box p {
		margin: 0;
		font-size: 1.05em;
		line-height: 1.7;
		color: #333;
	}

	.highlight-box-alt {
		background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(192, 184, 204, 0.1) 100%);
		border-color: rgba(40, 167, 69, 0.3);
	}

	.highlight-box-alt .highlight-icon {
		color: #28a745;
	}

	/* Importance Block */
	.importance-block {
		display: flex;
		gap: 1.5rem;
		align-items: flex-start;
		padding: 1.5rem;
		background: linear-gradient(135deg, rgba(0, 48, 135, 0.05) 0%, rgba(192, 184, 204, 0.08) 100%);
		border-radius: 12px;
		margin-bottom: 2rem;
		border-left: 4px solid #003087;
	}

	.importance-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		background: rgba(0, 48, 135, 0.1);
		border-radius: 50%;
		font-size: 1.5rem;
		color: #003087;
	}

	.importance-content p {
		margin: 0.5rem 0;
		color: #444;
		line-height: 1.7;
	}

	.importance-content p:first-child {
		margin-top: 0;
	}

	/* Benefits Section */
	.benefits-intro {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.5rem;
		padding: 1rem 1.25rem;
		background: rgba(40, 167, 69, 0.05);
		border-radius: 8px;
		border-left: 3px solid #28a745;
	}

	.benefits-intro-icon {
		font-size: 1.5rem;
		color: #28a745;
	}

	.benefits-intro p {
		margin: 0;
		font-weight: 600;
		color: #333;
	}

	.benefits-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.25rem;
		margin-bottom: 2rem;
	}

	.benefit-card {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		padding: 1.25rem;
		background: white;
		border-radius: 12px;
		border: 2px solid rgba(40, 167, 69, 0.2);
		transition: all 0.3s ease;
	}

	.benefit-card:hover {
		border-color: #28a745;
		transform: translateY(-3px);
		box-shadow: 0 6px 20px rgba(40, 167, 69, 0.15);
	}

	.benefit-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(32, 201, 151, 0.15) 100%);
		border-radius: 10px;
		font-size: 1.25rem;
		color: #28a745;
	}

	.benefit-content p {
		margin: 0;
		color: #444;
		line-height: 1.6;
	}

	.benefit-content strong {
		color: #222830;
	}

	/* Responsive adjustments */
	@media (max-width: 768px) {
		.intro-block,
		.importance-block {
			flex-direction: column;
			text-align: center;
		}

		.intro-icon,
		.importance-icon {
			margin: 0 auto;
		}

		.barriers-list,
		.benefits-grid {
			grid-template-columns: 1fr;
		}

		.highlight-box {
			flex-direction: column;
			text-align: center;
		}

		.content-section-header {
			flex-direction: column;
			text-align: center;
			gap: 0.75rem;
		}
	}


	/* Barriers Section */
	.barriers-section {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.5rem;
		margin: 2rem 0;
	}

	.barrier-type-card {
		background: white;
		border-radius: 16px;
		border: 2px solid rgba(192, 184, 204, 0.25);
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.barrier-type-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(192, 184, 204, 0.2);
	}

	.barrier-type-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1.25rem 1.5rem;
		background: linear-gradient(135deg, rgba(34, 40, 48, 0.03) 0%, rgba(192, 184, 204, 0.08) 100%);
		border-bottom: 2px solid rgba(192, 184, 204, 0.15);
	}

	.barrier-type-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 12px;
		font-size: 1.25rem;
		color: white;
	}

	.barrier-type-icon.physical {
		background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	}

	.barrier-type-icon.communication {
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	}

	.barrier-type-icon.digital {
		background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
	}

	.barrier-type-icon.attitudinal {
		background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
	}

	.barrier-type-header h3 {
		margin: 0;
		font-size: 1.1rem;
		color: #222830;
	}

	.barrier-type-card > p {
		padding: 1rem 1.5rem 0.5rem;
		margin: 0;
		color: #555;
		line-height: 1.6;
	}

	.barrier-examples {
		padding: 0.75rem 1.5rem;
	}

	.example-item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 0;
		border-bottom: 1px solid rgba(192, 184, 204, 0.15);
	}

	.example-item:last-child {
		border-bottom: none;
	}

	.example-icon {
		font-size: 0.9rem;
		color: #888;
		width: 20px;
		text-align: center;
	}

	.example-item span {
		font-size: 0.95rem;
		color: #444;
	}

	.barrier-solution {
		display: flex;
		gap: 0.75rem;
		align-items: flex-start;
		padding: 1rem 1.5rem;
		margin: 0.5rem 1rem 1rem;
		background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.08) 100%);
		border-radius: 8px;
		border-left: 3px solid #28a745;
	}

	.solution-icon {
		flex-shrink: 0;
		font-size: 1.25rem;
		color: #28a745;
		margin-top: 2px;
	}

	.barrier-solution p {
		margin: 0;
		font-size: 0.9rem;
		color: #333;
		line-height: 1.5;
	}

	@media (max-width: 768px) {
		.barriers-section {
			grid-template-columns: 1fr;
		}
	}



/* =====================================================
	 GRADIENT HEADINGS - Accent Words
	 ===================================================== */
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3 {
	color: var(--edl-text-primary);
	font-weight: 600;
}

.blog-post-content h1 .accent,
.blog-post-content h2 .accent,
.blog-post-content h3 .accent {
	background: linear-gradient(90deg, var(--edl-accent-1), var(--edl-accent-3), var(--edl-accent-5));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Gradient text for key heading words */
.blog-post-content .gradient-text {
	background: linear-gradient(90deg, var(--edl-accent-1), var(--edl-accent-3), var(--edl-accent-5));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* =====================================================
	 SECTION CONTAINERS - Soft Rounded Panels
	 ===================================================== */
.blog-post-content .content-section {
	background: linear-gradient(135deg, rgba(142,68,173,0.06), rgba(52,152,219,0.04));
	border-radius: 20px;
	padding: 2rem;
	margin: 2rem 0;
	box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.blog-post-content .highlight-panel {
	background: linear-gradient(135deg, rgba(142,68,173,0.08), rgba(214,51,108,0.05), rgba(52,152,219,0.06));
	border-radius: 16px;
	padding: 1.5rem;
	margin: 1.5rem 0;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* =====================================================
	 GRADIENT DIVIDERS
	 ===================================================== */
.blog-post-content .gradient-divider {
	height: 6px;
	background: linear-gradient(90deg, var(--edl-accent-1), var(--edl-accent-5));
	border-radius: 999px;
	margin: 2.5rem auto;
	max-width: 200px;
}

.blog-post-content hr.gradient {
	border: none;
	height: 4px;
	background: linear-gradient(90deg, var(--edl-accent-1), var(--edl-accent-2), var(--edl-accent-5));
	border-radius: 999px;
	margin: 2rem 0;
	opacity: 0.7;
}

/* =====================================================
	 PROGRESS BARS
	 ===================================================== */
.blog-post-content .progress-bar {
	height: 10px;
	background: rgba(0,0,0,0.08);
	border-radius: 999px;
	overflow: hidden;
	margin: 1rem 0;
}

.blog-post-content .progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--edl-accent-1), var(--edl-accent-2), var(--edl-accent-4));
	border-radius: 999px;
	transition: width 0.4s ease;
}

/* =====================================================
	 LINKS & HIGHLIGHTS
	 ===================================================== */
.blog-post-content a {
	color: var(--edl-accent-5);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.blog-post-content a:hover {
	color: var(--edl-accent-1);
}

.blog-post-content .highlight-text {
	background: linear-gradient(90deg, rgba(142,68,173,0.15), rgba(214,51,108,0.1));
	padding: 0.1em 0.3em;
	border-radius: 4px;
}

/* =====================================================
	 BLOCKQUOTES
	 ===================================================== */
.blog-post-content blockquote {
	border-left: 4px solid;
	border-image: linear-gradient(180deg, var(--edl-accent-1), var(--edl-accent-5)) 1;
	background: linear-gradient(135deg, rgba(142,68,173,0.05), rgba(52,152,219,0.03));
	border-radius: 0 12px 12px 0;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--edl-text-secondary);
}

/* =====================================================
	 LISTS
	 ===================================================== */
.blog-post-content ul li::marker,
.blog-post-content ol li::marker {
	color: var(--edl-accent-1);
}

/* =====================================================
	 CALLOUTS & INFO BOXES
	 ===================================================== */
.blog-post-content .callout {
	background: linear-gradient(135deg, rgba(46,204,113,0.08), rgba(52,152,219,0.05));
	border-radius: 16px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	border-left: 4px solid var(--edl-accent-4);
}

.blog-post-content .callout-warning {
	background: linear-gradient(135deg, rgba(243,156,18,0.08), rgba(214,51,108,0.04));
	border-left-color: var(--edl-accent-3);
}

.blog-post-content .callout-info {
	background: linear-gradient(135deg, rgba(52,152,219,0.08), rgba(142,68,173,0.04));
	border-left-color: var(--edl-accent-5);
}

/* =====================================================
	 BUTTONS
	 ===================================================== */
.blog-post-content .btn-gradient {
	background: linear-gradient(135deg, var(--edl-accent-1), var(--edl-accent-5));
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 15px rgba(142,68,173,0.25);
}

.blog-post-content .btn-gradient:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(142,68,173,0.35);
}

/* =====================================================
	 CARDS
	 ===================================================== */
.blog-post-content .card {
	background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
	border-radius: 20px;
	padding: 1.5rem;
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
	border: 1px solid rgba(142,68,173,0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-post-content .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* =====================================================
	 ACCESSIBILITY - Focus States
	 ===================================================== */
.blog-post-content a:focus,
.blog-post-content button:focus,
.blog-post-content .card:focus-within {
	outline: 3px solid var(--edl-accent-5);
	outline-offset: 3px;
}

/* =====================================================
	 REDUCED MOTION
	 ===================================================== */
@media (prefers-reduced-motion: reduce) {
	.blog-post-content *,
	.blog-post-content *::before,
	.blog-post-content *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}



/* ==========================================
	 SAFEGUARDING AND INCLUSION SECTION
	 ========================================== */

.safeguarding-section {
	margin: 3rem 0;
	padding: 2.5rem;
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 16px;
	border: 2px solid rgba(220, 53, 69, 0.15);
}

.safeguarding-section .section-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.safeguarding-section .section-icon {
	font-size: 2rem;
	color: #dc3545;
	background: rgba(220, 53, 69, 0.1);
	padding: 0.75rem;
	border-radius: 12px;
}

.safeguarding-section h2 {
	margin: 0;
	color: #222830;
	border: none;
	padding: 0;
}

.safeguarding-intro {
	font-size: 1.1em;
	color: #333;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.safeguarding-subsection {
	background: white;
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.safeguarding-subsection h3 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem 0;
	color: #222830;
	font-size: 1.15rem;
}

.safeguarding-subsection h3 .subsection-icon {
	color: #dc3545;
	font-size: 1.25rem;
}

.safeguarding-subsection p {
	margin: 0.75rem 0;
	color: #555;
	line-height: 1.6;
}

.safeguarding-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.safeguarding-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.6rem 0;
	color: #444;
	line-height: 1.5;
}

.safeguarding-list li::before {
	content: "•";
	color: #dc3545;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1;
	flex-shrink: 0;
}

.safeguarding-list li strong {
	color: #222830;
}

.safeguarding-risks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.risk-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	background: rgba(220, 53, 69, 0.03);
	border-radius: 10px;
	border: 1px solid rgba(220, 53, 69, 0.1);
	transition: all 0.3s ease;
}

.risk-card:hover {
	border-color: rgba(220, 53, 69, 0.25);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
}

.risk-card .risk-icon {
	flex-shrink: 0;
	font-size: 1.25rem;
	color: #dc3545;
	margin-top: 0.1rem;
}

.risk-card span {
	color: #444;
	line-height: 1.5;
}

.safeguarding-practice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.practice-card {
	padding: 1.25rem;
	background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 12px;
	border: 2px solid rgba(40, 167, 69, 0.2);
	transition: all 0.3s ease;
}

.practice-card:hover {
	border-color: #28a745;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(40, 167, 69, 0.15);
}

.practice-card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.practice-card-header .practice-icon {
	font-size: 1.5rem;
}

.practice-card.notice .practice-icon { color: #003087; }
.practice-card.communicate .practice-icon { color: #28a745; }
.practice-card.respect .practice-icon { color: #dea93f; }
.practice-card.act .practice-icon { color: #dc3545; }

.practice-card-header h4 {
	margin: 0;
	color: #222830;
	font-size: 1.05rem;
}

.practice-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.practice-card ul li {
	padding: 0.4rem 0;
	padding-left: 1.25rem;
	position: relative;
	color: #555;
	font-size: 0.95rem;
	line-height: 1.5;
}

.practice-card ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #28a745;
	font-weight: bold;
}

.real-world-examples {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(220, 53, 69, 0.05) 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
	border-left: 4px solid #ffc107;
}

.real-world-examples h4 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem 0;
	color: #222830;
}

.real-world-examples h4 .example-icon {
	color: #ffc107;
}

.real-world-examples ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.real-world-examples ul li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(192, 184, 204, 0.2);
	color: #444;
	line-height: 1.5;
}

.real-world-examples ul li:last-child {
	border-bottom: none;
}

.real-world-examples ul li::before {
	content: "⚠️";
	flex-shrink: 0;
	font-size: 1rem;
}

.real-world-examples .callout {
	margin-top: 1rem;
	padding: 1rem;
	background: rgba(220, 53, 69, 0.08);
	border-radius: 8px;
	font-weight: 600;
	color: #dc3545;
}

.reflection-activity {
	background: linear-gradient(135deg, rgba(0, 48, 135, 0.05) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
	border: 2px solid rgba(0, 48, 135, 0.15);
}

.reflection-activity h4 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem 0;
	color: #003087;
}

.reflection-activity .reflection-prompt {
	font-style: italic;
	color: #555;
	padding: 1rem;
	background: white;
	border-radius: 8px;
	margin-top: 1rem;
	border-left: 3px solid #dea93f;
}

.key-takeaway {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(192, 184, 204, 0.15) 0%, rgba(222, 169, 63, 0.15) 100%);
	border-radius: 12px;
	margin-top: 2rem;
	border: 2px solid rgba(192, 184, 204, 0.3);
}

.key-takeaway .takeaway-icon {
	font-size: 2rem;
	color: #dea93f;
	flex-shrink: 0;
}

.key-takeaway p {
	margin: 0;
	font-size: 1.1em;
	color: #222830;
	line-height: 1.6;
}

.key-takeaway p strong {
	color: #003087;
}

/* Responsive */
@media (max-width: 768px) {
	.safeguarding-section {
		padding: 1.5rem;
	}

	.safeguarding-practice-grid {
		grid-template-columns: 1fr;
	}

	.safeguarding-risks {
		grid-template-columns: 1fr;
	}
}


/* ===================================
	 SAFEGUARDING RESPONSE PATHWAY DIAGRAM
	 =================================== */

.safeguarding-diagram {
	background: linear-gradient(135deg, rgba(192, 184, 204, 0.1) 0%, rgba(222, 169, 63, 0.05) 100%);
	border: 2px solid #c0b8cc;
	border-radius: 12px;
	padding: 2rem;
	margin: 2rem 0;
}

.safeguarding-diagram h3 {
	color: #222830;
	font-size: 1.4rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.diagram-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1.5rem 0;
	background: #fff;
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(34, 40, 48, 0.1);
}

.safeguarding-pathway-image {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.diagram-caption {
	background: rgba(222, 169, 63, 0.15);
	border-left: 4px solid #dea93f;
	padding: 1rem 1.25rem;
	margin-top: 1.5rem;
	border-radius: 0 8px 8px 0;
}

.diagram-caption p {
	margin: 0;
	color: #222830;
	font-size: 0.95rem;
	line-height: 1.6;
}

.diagram-caption strong {
	color: #dea93f;
}

/* ===================================
	 SAFEGUARDING RESPONSE STEPS
	 =================================== */

.safeguarding-response-section {
	margin: 2rem 0;
	padding: 1.5rem;
	background: rgba(34, 40, 48, 0.03);
	border-radius: 12px;
}

.safeguarding-response-section h3 {
	color: #222830;
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.response-step {
	display: flex;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(34, 40, 48, 0.08);
	border-left: 4px solid #c0b8cc;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.response-step:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(34, 40, 48, 0.12);
}

.response-step:last-child {
	margin-bottom: 0;
}

.step-number-badge {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #c0b8cc 0%, #a89db8 100%);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
}

.step-content {
	flex: 1;
}

.step-content h4 {
	color: #222830;
	font-size: 1.1rem;
	margin: 0 0 0.75rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.step-list {
	margin: 0.5rem 0;
	padding-left: 1.25rem;
	color: #444;
	line-height: 1.7;
}

.step-list li {
	margin-bottom: 0.35rem;
}

.step-callout {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	background: rgba(192, 184, 204, 0.15);
	border-radius: 8px;
}

.step-callout.urgent {
	background: rgba(222, 169, 63, 0.2);
	border: 1px solid #dea93f;
}

.step-callout.important {
	background: rgba(222, 169, 63, 0.15);
	border-left: 3px solid #dea93f;
}

.callout-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

.step-callout p {
	margin: 0;
	color: #222830;
	font-size: 0.9rem;
	line-height: 1.5;
}

.step-warning {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	background: rgba(220, 53, 69, 0.08);
	border: 1px solid rgba(220, 53, 69, 0.25);
	border-radius: 8px;
}

.step-warning h5 {
	color: #dc3545;
	font-size: 0.95rem;
	margin: 0 0 0.5rem 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.step-warning ul {
	margin: 0;
	padding-left: 1.25rem;
	color: #666;
	font-size: 0.9rem;
	line-height: 1.6;
}

.step-warning li {
	margin-bottom: 0.25rem;
}

/* ===================================
	 IF YOU'RE UNSURE SECTION
	 =================================== */

.unsure-section {
	background: linear-gradient(135deg, rgba(222, 169, 63, 0.12) 0%, rgba(192, 184, 204, 0.12) 100%);
	border: 2px dashed #dea93f;
	border-radius: 12px;
	padding: 1.5rem 2rem;
	margin: 2rem 0;
	text-align: center;
}

.unsure-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.unsure-icon {
	font-size: 1.8rem;
}

.unsure-section h3 {
	color: #222830;
	font-size: 1.3rem;
	margin: 0;
}

.unsure-section p {
	color: #444;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0.5rem 0;
}

.unsure-section p:last-child {
	font-size: 1.05rem;
}


/* ===================================
	 REAL-WORLD EXAMPLE CASES
	 =================================== */

.example-case {
	background: #fff;
	border: 1px solid rgba(34, 40, 48, 0.12);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 6px rgba(34, 40, 48, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.example-case:hover {
	box-shadow: 0 4px 12px rgba(34, 40, 48, 0.1);
	transform: translateY(-2px);
}

.example-case:last-of-type {
	margin-bottom: 1.5rem;
}

.case-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.case-number {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #dea93f 0%, #c4932e 100%);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
}

.case-header h5 {
	color: #222830;
	font-size: 1.05rem;
	margin: 0;
	line-height: 1.3;
}

.case-description {
	color: #555;
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0 1rem 0;
	padding-left: calc(28px + 0.75rem);
}

.case-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: linear-gradient(135deg, #c0b8cc 0%, #a89db8 100%);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 500;
	margin-left: calc(28px + 0.75rem);
	transition: background 0.2s ease, transform 0.15s ease;
}

.case-link:hover {
	background: linear-gradient(135deg, #a89db8 0%, #9589a5 100%);
	transform: translateX(3px);
	color: #fff;
}

.case-link standard\:icon,
.case-link standard\:icon,
.case-link svg {
	font-size: 0.8rem;
}

/* Responsive adjustments for case cards */
@media (max-width: 600px) {
	.case-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.case-description,
	.case-link {
		padding-left: 0;
		margin-left: 0;
	}
}


/* ===================================
	 WHAT GOOD INCLUSION LOOKS LIKE
	 =================================== */

.inclusion-in-practice-section {
	background: linear-gradient(180deg, rgba(192, 184, 204, 0.08) 0%, rgba(255, 255, 255, 1) 100%);
	padding: 2.5rem 2rem;
	margin: 2rem 0;
	border-radius: 16px;
}

.inclusion-section-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.inclusion-section-icon {
	font-size: 2rem;
}

.inclusion-section-header h2 {
	color: #222830;
	font-size: 1.6rem;
	margin: 0;
}

.inclusion-intro {
	font-size: 1.05rem;
	color: #444;
	line-height: 1.7;
	margin-bottom: 2rem;
	max-width: 800px;
}

/* Everyday Practice Section */
.everyday-practice {
	margin-bottom: 2.5rem;
}

.everyday-practice h3 {
	color: #222830;
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}

.everyday-practice > p {
	color: #666;
	margin-bottom: 1.5rem;
}

.practice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.practice-block {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 2px 8px rgba(34, 40, 48, 0.08);
	border-top: 4px solid #c0b8cc;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.practice-block:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(34, 40, 48, 0.12);
}

.practice-block.communication { border-top-color: #c0b8cc; }
.practice-block.participation { border-top-color: #dea93f; }
.practice-block.respect { border-top-color: #7b9e89; }
.practice-block.adjustments { border-top-color: #e07b54; }
.practice-block.inclusion-action { border-top-color: #5b8fb9; }

.practice-block-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.practice-emoji {
	font-size: 1.4rem;
}

.practice-block-header h4 {
	color: #222830;
	font-size: 1.05rem;
	margin: 0;
}

.practice-list {
	margin: 0;
	padding-left: 1.25rem;
	color: #555;
	font-size: 0.9rem;
	line-height: 1.7;
}

.practice-list li {
	margin-bottom: 0.4rem;
}

.inclusion-insight {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: rgba(222, 169, 63, 0.12);
	padding: 1rem 1.25rem;
	border-radius: 10px;
	border-left: 4px solid #dea93f;
}

.insight-icon {
	font-size: 1.3rem;
	flex-shrink: 0;
}

.inclusion-insight p {
	margin: 0;
	color: #222830;
	font-size: 0.95rem;
}

/* Comparison Section */
.comparison-section {
	margin: 2.5rem 0;
}

.comparison-section h3 {
	color: #222830;
	font-size: 1.3rem;
	margin-bottom: 1.25rem;
	text-align: center;
}

.comparison-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.comparison-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(34, 40, 48, 0.08);
}

.comparison-card.inclusive {
	border: 2px solid #7b9e89;
}

.comparison-card.exclusive {
	border: 2px solid #dc6b6b;
}

.comparison-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(34, 40, 48, 0.1);
}

.comparison-icon {
	font-size: 1.3rem;
}

.comparison-header h4 {
	margin: 0;
	font-size: 1.05rem;
}

.comparison-card.inclusive .comparison-header h4 {
	color: #5a7d66;
}

.comparison-card.exclusive .comparison-header h4 {
	color: #b84848;
}

.comparison-list {
	margin: 0;
	padding-left: 1.25rem;
	color: #555;
	font-size: 0.9rem;
	line-height: 1.8;
}

.comparison-list li {
	margin-bottom: 0.5rem;
}

/* Reflection Activity */
.inclusion-reflection {
	background: linear-gradient(135deg, rgba(192, 184, 204, 0.15) 0%, rgba(222, 169, 63, 0.1) 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 2rem 0;
}

.reflection-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.reflection-icon {
	font-size: 1.4rem;
}

.inclusion-reflection h3 {
	color: #222830;
	font-size: 1.15rem;
	margin: 0;
}

.inclusion-reflection > p {
	color: #555;
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
}

.reflection-questions-list {
	margin: 0;
	padding-left: 1.5rem;
	color: #444;
	font-size: 0.9rem;
	line-height: 1.8;
}

.reflection-questions-list li {
	margin-bottom: 0.4rem;
}

/* Key Message */
.inclusion-key-message {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: rgba(34, 40, 48, 0.06);
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	margin: 1.5rem 0;
}

.key-message-icon {
	font-size: 1.3rem;
	flex-shrink: 0;
}

.key-message-text {
	margin: 0;
	color: #222830;
	font-size: 1rem;
	line-height: 1.6;
}

.key-message-text em {
	color: #dea93f;
	font-style: normal;
	font-weight: 600;
}

/* Accessibility Quick Checklist */
.accessibility-checklist {
	background: #fff;
	border: 2px solid #c0b8cc;
	border-radius: 12px;
	padding: 1.5rem;
	margin-top: 2rem;
}

.checklist-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.checklist-icon {
	font-size: 1.4rem;
}

.checklist-header h3 {
	color: #222830;
	font-size: 1.1rem;
	margin: 0;
}

.checklist-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.checklist-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: linear-gradient(135deg, #c0b8cc 0%, #a89db8 100%);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 50px;
}

.check-number {
	width: 24px;
	height: 24px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
}

.check-text {
	font-size: 0.9rem;
	font-weight: 500;
}

.check-arrow {
	color: #c0b8cc;
	font-size: 1.5rem;
	font-weight: 700;
}

/* Responsive */
@media (max-width: 600px) {
	.inclusion-in-practice-section {
		padding: 1.5rem 1rem;
	}
	
	.practice-grid {
		grid-template-columns: 1fr;
	}
	
	.comparison-grid {
		grid-template-columns: 1fr;
	}
	
	.checklist-flow {
		flex-direction: column;
		gap: 0.75rem;
	}
	
	.check-arrow {
		transform: rotate(90deg);
	}
}


/* ===================================
	 VIDEO RESOURCE SECTION
	 =================================== */

.video-resource-section {
	background: linear-gradient(135deg, rgba(34, 40, 48, 0.03) 0%, rgba(192, 184, 204, 0.08) 100%);
	border: 2px solid rgba(192, 184, 204, 0.3);
	border-radius: 16px;
	padding: 2rem;
	margin: 2rem 0;
}

.video-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.video-icon {
	font-size: 1.8rem;
}

.video-header h3 {
	color: #222830;
	font-size: 1.35rem;
	margin: 0;
}

.video-intro {
	color: #555;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.video-container {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto 1.5rem;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(34, 40, 48, 0.15);
	background: #000;
}

.video-container iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: none;
}

.video-key-points {
	background: #fff;
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}

.video-key-points h4 {
	color: #222830;
	font-size: 1.05rem;
	margin: 0 0 0.75rem 0;
}

.video-key-points ul {
	margin: 0;
	padding-left: 1.25rem;
	color: #444;
	font-size: 0.9rem;
	line-height: 1.7;
}

.video-key-points li {
	margin-bottom: 0.5rem;
}

.video-key-points strong {
	color: #dea93f;
}

.video-reflection {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: rgba(222, 169, 63, 0.12);
	border-left: 4px solid #dea93f;
	padding: 1rem 1.25rem;
	border-radius: 0 10px 10px 0;
}

.video-reflection .reflection-icon {
	font-size: 1.3rem;
	flex-shrink: 0;
}

.video-reflection p {
	margin: 0;
	color: #222830;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Responsive */
@media (max-width: 600px) {
	.video-resource-section {
		padding: 1.25rem;
	}
	
	.video-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.video-container {
		border-radius: 8px;
	}
}


/* ===================================
	 REFLECTION FORMS
	 =================================== */

.reflection-form {
	margin-top: 1.5rem;
}

.reflection-questions-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.reflection-question-item {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	padding: 1.25rem;
	border: 1px solid rgba(192, 184, 204, 0.2);
}

.reflection-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	cursor: pointer;
}

.reflection-number {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	color: #222830;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
}

.reflection-text {
	color: #222830;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	padding-top: 0.25rem;
}

.reflection-textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 2px solid rgba(192, 184, 204, 0.3);
	border-radius: 8px;
	font-size: 0.95rem;
	line-height: 1.6;
	font-family: inherit;
	color: #222830;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	resize: vertical;
	min-height: 80px;
}

.reflection-textarea:focus {
	outline: none;
	border-color: #c0b8cc;
	box-shadow: 0 0 0 3px rgba(192, 184, 204, 0.2);
}

.reflection-textarea::placeholder {
	color: #999;
	font-style: italic;
}

.reflection-submit-row {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.reflection-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	color: #222830;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reflection-submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(192, 184, 204, 0.4);
}

.reflection-success {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, rgba(40, 167, 69, 0.12) 0%, rgba(32, 201, 151, 0.08) 100%);
	border: 2px solid #28a745;
	border-radius: 12px;
	margin-top: 1.5rem;
	animation: slideIn 0.4s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.reflection-success .success-icon {
	font-size: 2rem;
	flex-shrink: 0;
}

.reflection-success .success-content h4 {
	margin: 0 0 0.5rem 0;
	color: #28a745;
	font-size: 1.1rem;
}

.reflection-success .success-content p {
	margin: 0;
	color: #444;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Responsive */
@media (max-width: 600px) {
	.reflection-question-item {
		padding: 1rem;
	}
	
	.reflection-label {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.reflection-number {
		width: 24px;
		height: 24px;
		font-size: 0.8rem;
	}
	
	.reflection-submit-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ===================================
	 QUICK CHECK BEFORE YOU ACT
	 =================================== */

.quick-check-section {
	background: linear-gradient(135deg, rgba(34, 40, 48, 0.04) 0%, rgba(192, 184, 204, 0.1) 100%);
	border: 2px solid rgba(192, 184, 204, 0.25);
	border-radius: 16px;
	padding: 2rem;
	margin: 2rem 0;
}

.quick-check-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.quick-check-icon {
	font-size: 1.8rem;
}

.quick-check-header h3 {
	color: #222830;
	font-size: 1.4rem;
	margin: 0;
}

.quick-check-intro {
	color: #555;
	font-size: 1rem;
	margin-bottom: 1.5rem;
}

.quick-check-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.quick-check-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	box-shadow: 0 3px 10px rgba(34, 40, 48, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-top: 4px solid;
}

.quick-check-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(34, 40, 48, 0.12);
}

.quick-check-card.inclusive-check {
	border-top-color: #7b9e89;
}

.quick-check-card.respectful-check {
	border-top-color: #dea93f;
}

.quick-check-card.safe-check {
	border-top-color: #5b8fb9;
}

.check-card-icon {
	font-size: 2.5rem;
	margin-bottom: 0.75rem;
}

.quick-check-card h4 {
	color: #222830;
	font-size: 1.1rem;
	margin: 0 0 1rem 0;
}

.check-card-list {
	text-align: left;
	margin: 0;
	padding-left: 1.25rem;
	color: #555;
	font-size: 0.9rem;
	line-height: 1.7;
}

.check-card-list li {
	margin-bottom: 0.4rem;
}

/* Still Unsure Section */
.quick-check-still-unsure {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	text-align: center;
}

.quick-check-still-unsure h4 {
	color: #222830;
	font-size: 1rem;
	margin: 0 0 1rem 0;
}

.quick-check-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.flow-step {
	background: rgba(192, 184, 204, 0.25);
	color: #222830;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 500;
}

.flow-step.highlight {
	background: linear-gradient(135deg, #c0b8cc 0%, #dea93f 100%);
	color: #222830;
	font-weight: 600;
}

.flow-arrow {
	color: #c0b8cc;
	font-size: 1.2rem;
	font-weight: 700;
}

/* Reminder */
.quick-check-reminder {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: linear-gradient(135deg, rgba(222, 169, 63, 0.15) 0%, rgba(192, 184, 204, 0.15) 100%);
	padding: 1rem 1.5rem;
	border-radius: 10px;
	border: 2px dashed #dea93f;
}

.reminder-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.reminder-text {
	margin: 0;
	color: #222830;
	font-size: 1.05rem;
}

/* Easy Read Notice for Quick Check */
.quick-check-easy-read {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, rgba(142, 68, 173, 0.08) 0%, rgba(192, 184, 204, 0.1) 100%);
	border-radius: 10px;
	border: 1px solid rgba(142, 68, 173, 0.2);
	text-align: center;
}

.quick-check-easy-read .easy-read-icon {
	font-size: 1.5rem;
}

.quick-check-easy-read p {
	margin: 0;
	color: #555;
	font-size: 0.95rem;
	line-height: 1.5;
}

.quick-check-easy-read p strong {
	color: #222830;
}

/* Responsive */
@media (max-width: 768px) {
	.quick-check-section {
		padding: 1.5rem 1rem;
	}
	
	.quick-check-cards {
		grid-template-columns: 1fr;
	}
	
	.quick-check-flow {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.flow-arrow {
		transform: rotate(90deg);
	}
	
	.quick-check-reminder {
		flex-direction: column;
		text-align: center;
	}
}



/* ===================================
	 SOCIAL MODEL COMPARISON
	 =================================== */

.model-comparison {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.model-box {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 3px 12px rgba(34, 40, 48, 0.08);
	border: 2px solid;
}

.model-box.medical-model {
	border-color: #dc3545;
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.03) 0%, #fff 100%);
}

.model-box.social-model {
	border-color: #28a745;
	background: linear-gradient(135deg, rgba(40, 167, 69, 0.03) 0%, #fff 100%);
}

.model-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(34, 40, 48, 0.1);
}

.model-header .model-icon {
	font-size: 1.5rem;
}

.model-header h4 {
	margin: 0;
	font-size: 1.05rem;
	color: #222830;
}

.model-list {
	margin: 0;
	padding-left: 1.25rem;
	color: #555;
	line-height: 1.7;
}

.model-list li {
	margin-bottom: 0.5rem;
}

.model-box.medical-model .model-list li::marker {
	color: #dc3545;
}

.model-box.social-model .model-list li::marker {
	color: #28a745;
}

/* ===================================
	 EXAMPLE BOXES
	 =================================== */

.example-box {
	background: linear-gradient(135deg, rgba(222, 169, 63, 0.08) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	border-left: 4px solid #dea93f;
}

.example-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.example-header .example-icon {
	font-size: 1.25rem;
}

.example-header h4 {
	margin: 0;
	font-size: 1rem;
	color: #222830;
}

.example-content p {
	margin: 0.5rem 0;
	color: #444;
	line-height: 1.6;
}

.example-content ul {
	margin: 0.75rem 0;
	padding-left: 1.25rem;
	color: #555;
}

.example-content ul li {
	margin-bottom: 0.4rem;
}

.example-takeaway {
	background: rgba(222, 169, 63, 0.15);
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin-top: 1rem;
	font-weight: 500;
}

/* ===================================
	 ADJUSTMENTS GRID
	 =================================== */

.adjustments-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.adjustment-category {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 2px 10px rgba(34, 40, 48, 0.06);
	border: 2px solid rgba(192, 184, 204, 0.25);
}

.adjustment-category h4 {
	margin: 0 0 1rem 0;
	font-size: 1rem;
	color: #222830;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid rgba(192, 184, 204, 0.2);
}

.adjustment-category ul {
	margin: 0;
	padding-left: 1.25rem;
	color: #555;
	line-height: 1.7;
}

.adjustment-category ul li {
	margin-bottom: 0.4rem;
}

.adjustment-category ul li::marker {
	color: #dea93f;
}

/* ===================================
	 NDIS PRINCIPLES GRID
	 =================================== */

.ndis-principles {
	margin: 1.5rem 0;
}

.ndis-principles h4 {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	color: #222830;
}

.principles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.principle-card {
	background: linear-gradient(135deg, rgba(0, 48, 135, 0.05) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 10px;
	padding: 1.25rem;
	text-align: center;
	border: 1px solid rgba(0, 48, 135, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.principle-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 48, 135, 0.12);
}

.principle-card .principle-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 0.5rem;
}

.principle-card h5 {
	margin: 0 0 0.5rem 0;
	font-size: 0.95rem;
	color: #003087;
}

.principle-card p {
	margin: 0;
	font-size: 0.85rem;
	color: #555;
	line-height: 1.5;
}

/* ===================================
	 NDIS CODE OF CONDUCT
	 =================================== */

.ndis-code {
	background: linear-gradient(135deg, rgba(34, 40, 48, 0.03) 0%, rgba(192, 184, 204, 0.06) 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
	border: 1px solid rgba(34, 40, 48, 0.1);
}

.ndis-code h4 {
	margin: 0 0 0.75rem 0;
	font-size: 1.05rem;
	color: #222830;
}

.ndis-code > p {
	margin: 0 0 1rem 0;
	color: #555;
}

.code-list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.code-list li {
	padding: 0.6rem 0;
	padding-left: 1.5rem;
	position: relative;
	color: #444;
	line-height: 1.5;
	border-bottom: 1px solid rgba(192, 184, 204, 0.15);
}

.code-list li:last-child {
	border-bottom: none;
}

.code-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #28a745;
	font-weight: bold;
}

.code-list li strong {
	color: #222830;
}

/* ===================================
	 CULTURAL INTERSECTION SECTION
	 =================================== */

.cultural-intersection-section {
	margin: 2.5rem 0;
	padding: 2rem;
	background: linear-gradient(135deg, rgba(142, 68, 173, 0.06) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 16px;
	border: 2px solid rgba(142, 68, 173, 0.15);
}

.cultural-intersection-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.cultural-intersection-icon {
	font-size: 2rem;
}

.cultural-intersection-header h3 {
	margin: 0;
	color: #222830;
	font-size: 1.35rem;
}

.cultural-intersection-intro {
	color: #444;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.cultural-points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.cultural-point {
	background: #fff;
	border-radius: 10px;
	padding: 1.25rem;
	box-shadow: 0 2px 8px rgba(34, 40, 48, 0.06);
	border-left: 4px solid;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cultural-point:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(34, 40, 48, 0.1);
}

.cultural-point.identity { border-left-color: #8e44ad; }
.cultural-point.language { border-left-color: #3498db; }
.cultural-point.family { border-left-color: #27ae60; }
.cultural-point.barriers { border-left-color: #e67e22; }

.cultural-point-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.cultural-point-icon {
	font-size: 1.25rem;
}

.cultural-point-header h4 {
	margin: 0;
	font-size: 1rem;
	color: #222830;
}

.cultural-point p {
	margin: 0;
	color: #555;
	font-size: 0.9rem;
	line-height: 1.6;
}

.cultural-callout {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: rgba(142, 68, 173, 0.1);
	padding: 1.25rem;
	border-radius: 10px;
	border: 1px solid rgba(142, 68, 173, 0.2);
}

.cultural-callout-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.cultural-callout p {
	margin: 0;
	color: #333;
	line-height: 1.6;
}

.cultural-callout p strong {
	color: #8e44ad;
}

/* ===================================
	 ASSISTIVE TECHNOLOGY SECTION
	 =================================== */

.assistive-tech-section {
	margin: 2.5rem 0;
	padding: 2rem;
	background: linear-gradient(135deg, rgba(52, 152, 219, 0.06) 0%, rgba(192, 184, 204, 0.08) 100%);
	border-radius: 16px;
	border: 2px solid rgba(52, 152, 219, 0.15);
}

.assistive-tech-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.assistive-tech-icon {
	font-size: 2rem;
}

.assistive-tech-header h3 {
	margin: 0;
	color: #222830;
	font-size: 1.35rem;
}

.assistive-tech-intro {
	color: #444;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.assistive-tech-categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.tech-category {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 2px 10px rgba(34, 40, 48, 0.06);
	border-top: 4px solid;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tech-category:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(34, 40, 48, 0.1);
}

.tech-category.vision { border-top-color: #9b59b6; }
.tech-category.hearing { border-top-color: #3498db; }
.tech-category.communication { border-top-color: #e67e22; }
.tech-category.mobility { border-top-color: #27ae60; }
.tech-category.cognitive { border-top-color: #e74c3c; }

.tech-category-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(34, 40, 48, 0.1);
}

.tech-category-icon {
	font-size: 1.25rem;
}

.tech-category-header h4 {
	margin: 0;
	font-size: 1rem;
	color: #222830;
}

.tech-examples {
	margin: 0;
	padding-left: 1.25rem;
	color: #555;
	font-size: 0.9rem;
	line-height: 1.7;
}

.tech-examples li {
	margin-bottom: 0.35rem;
}

.tech-examples li::marker {
	color: #dea93f;
}

.tech-tip {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: rgba(52, 152, 219, 0.1);
	padding: 1.25rem;
	border-radius: 10px;
	border-left: 4px solid #3498db;
}

.tech-tip-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.tech-tip p {
	margin: 0;
	color: #333;
	line-height: 1.6;
}

.tech-tip p strong {
	color: #3498db;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.model-comparison,
	.adjustments-grid,
	.principles-grid,
	.cultural-points,
	.assistive-tech-categories {
		grid-template-columns: 1fr;
	}
	
	.cultural-intersection-section,
	.assistive-tech-section {
		padding: 1.5rem;
	}
}



/* ===================================
	 CERTIFICATE BANNER
	 =================================== */

.certificate-banner {
	margin: 3rem 0;
	padding: 2.5rem;
	background: linear-gradient(135deg, rgba(192, 184, 204, 0.06) 0%, rgba(222, 169, 63, 0.08) 50%, rgba(192, 184, 204, 0.06) 100%);
	border-radius: 20px;
	color: #222830;
	position: relative;
	overflow: hidden;
	box-shadow: 0 3px 16px rgba(192, 184, 204, 0.15);
	border: 2px solid rgba(192, 184, 204, 0.25);
}

.certificate-banner::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 60%;
	height: 200%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
	transform: rotate(-15deg);
	pointer-events: none;
}

.certificate-banner-content {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 2rem;
	align-items: start;
	position: relative;
	z-index: 1;
}

.certificate-icon-wrapper {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.certificate-icon {
	font-size: 2.5rem;
}

.certificate-text h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
}

.certificate-description {
	margin: 0 0 1.25rem 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.certificate-description strong {
	color: #dea93f;
}

.certificate-benefits {
	list-style: none;
	margin: 0 0 1.25rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

.certificate-benefits li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.95);
}

.certificate-benefits .benefit-icon {
	color: #4ade80;
	font-size: 1rem;
}

.certificate-note {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	font-style: italic;
}

.certificate-cta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-self: center;
}

.certificate-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, #dea93f 0%, #f5c542 100%);
	color: #1a237e;
	padding: 1rem 1.75rem;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(222, 169, 63, 0.4);
}

.certificate-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(222, 169, 63, 0.5);
	background: linear-gradient(135deg, #f5c542 0%, #dea93f 100%);
}

.certificate-btn-primary .btn-icon {
	font-size: 1.1rem;
}

.certificate-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 10px;
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.certificate-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateX(4px);
}

.certificate-btn-secondary .btn-icon {
	font-size: 0.9rem;
}

.certificate-progress {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	z-index: 1;
}

.progress-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.progress-label span {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.8);
}

.progress-fraction {
	font-weight: 600;
	color: #dea93f !important;
}

.progress-bar-certificate {
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	overflow: hidden;
}

.progress-fill-certificate {
	height: 100%;
	background: linear-gradient(90deg, #dea93f 0%, #4ade80 100%);
	border-radius: 4px;
	transition: width 0.5s ease;
}

.progress-message {
	margin: 0.5rem 0 0 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
	.certificate-banner-content {
		grid-template-columns: 1fr;
		text-align: center;
	}
	
	.certificate-icon-wrapper {
		margin: 0 auto;
	}
	
	.certificate-benefits {
		justify-content: center;
	}
	
	.certificate-cta {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	.certificate-banner {
		padding: 1.5rem;
	}
	
	.certificate-text h2 {
		font-size: 1.4rem;
	}
	
	.certificate-benefits {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
	
	.certificate-cta {
		flex-direction: column;
	}
	
	.certificate-btn-primary,
	.certificate-btn-secondary {
		width: 100%;
		justify-content: center;
	}
}