/* ---------------------------------------------------------
   AAC Pictogram Icon Styles
   Matches the sizing & alignment used in aac-card.css
   --------------------------------------------------------- */

/* Base icon element */
.aac-icon {
  display: block;
  width: 64px;           /* scalable base size */
  height: 64px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

/* SVG icons: ensure uniform scaling */
.aac-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Raster fallback */
.aac-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tile wrapper inside AAC cards */
.aac-card__symbol-inner .aac-icon {
  width: 72%;
  height: 72%;
  margin: auto;
  display: block;
}

/* ---------------------------------------------------------
   Color filters (token-based)
   These match the AAC strip colours and DS palette
   --------------------------------------------------------- */

.aac-icon--red    { filter: drop-shadow(0 0 2px rgba(242, 91, 61, 0.4)); }
.aac-icon--amber  { filter: drop-shadow(0 0 2px rgba(244, 191, 58, 0.4)); }
.aac-icon--green  { filter: drop-shadow(0 0 2px rgba(154, 196, 60, 0.4)); }
.aac-icon--teal   { filter: drop-shadow(0 0 2px rgba(53, 182, 166, 0.4)); }
.aac-icon--blue   { filter: drop-shadow(0 0 2px rgba(59, 115, 217, 0.4)); }

/* High contrast mode */
@media (prefers-contrast: more) {
  .aac-icon--red    { filter: none; }
  .aac-icon--amber  { filter: none; }
  .aac-icon--green  { filter: none; }
  .aac-icon--teal   { filter: none; }
  .aac-icon--blue   { filter: none; }
}

/* ---------------------------------------------------------
   Mobile scaling
   --------------------------------------------------------- */

@media (max-width: 640px) {
  .aac-icon {
    width: 52px;
    height: 52px;
  }

  .aac-card__symbol-inner .aac-icon {
    width: 60%;
    height: 60%;
  }
}
/* /media/snippets/pillar-styles.html */
/* Pillar grid (AAC / autism-friendly) */
.pillar-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:1rem;
	align-items:start;
	margin:1rem 0;
	list-style:none;
	padding:0;
}

/* Card */
.pillar-card {
	background:var(--surface);
	padding:0;
	border-radius:14px;
	box-shadow:0 6px 18px rgba(15,36,64,.06);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	min-height:260px;
}

/* Image area */
.pillar-image {
	position:relative;
	width:100%;
	height:140px;
	overflow:hidden;
	background:#f4f6f9;
}
.pillar-bg {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* Overlay to reduce sensory load and keep icon readable */
.pillar-image::after {
	content:'';
	position:absolute;
	inset:0;
	background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(0,0,0,0.08) 100%);
	pointer-events:none;
}

/* Icon: rounded motif, centered and high-contrast */
.pillar-icon {
	position:absolute;
	left:16px;
	bottom:12px;
	width:64px;
	height:64px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,0.95);
	box-shadow:0 6px 18px rgba(15,36,64,.06);
	border:2px solid rgba(15,36,64,0.03);
	font-size:28px;
}

/* Title & copy */
.pillar-card h3 {
	margin:12px 16px 6px;
	font-size:1.05rem;
	color:var(--text-primary);
}
.pillar-card p { margin:0 16px 12px; color:var(--text-secondary); font-size:0.95rem; }

/* Pillar value (accent gradient or solid) */
.pillar-value {
	margin-top:auto;
	padding:12px 16px;
	font-size:1rem;
	font-weight:700;
	color:var(--text-primary);
	background:linear-gradient(90deg, rgba(0,74,173,0.06), rgba(218,163,63,0.02));
}

/* Accessibility: focus ring and keyboard behaviour */
.pillar-card:focus-within {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
}

/* Mobile tweaks */
@media (max-width:640px) {
	.pillar-image { height:120px; }
	.pillar-icon { left:12px; bottom:10px; width:56px; height:56px; font-size:24px; }
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
	.pillar-card, .pillar-image, .pillar-icon { transition: none !important; }
}
/* Blog Post Content Styling */
.blog-post-content {
	max-width: 900px;
	margin: 0 auto;
	line-height: 1.6;
	color: #333;

	/* 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;
				}
			}
		}
	}

	/* 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;
			}
		}
	}
}