/**
 * Theme component aliases and layout helpers (v3 tokens live in tokens.css).
 */

.category-label {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-navy-text);
	background: var(--color-navy-light);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-bottom: var(--space-2);
}

.category-label a {
	color: inherit;
	text-decoration: none;
}

.category-label a:hover {
	opacity: 0.85;
}

.article-meta,
.meta {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.article-meta {
	margin-top: var(--space-3);
}

.article-meta .sep,
.meta .sep {
	opacity: 0.4;
}

.article-meta a,
.meta a {
	color: var(--color-link);
	transition: color 150ms ease;
}

.article-meta a:hover,
.meta a:hover {
	color: var(--color-link-hover);
}

.geometric-rule,
.rule {
	height: 2px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2'%3E%3Cpath d='M0 1 L3 0 L6 1 L9 0 L12 1' stroke='%23B8922A' stroke-width='0.75' fill='none'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 12px 2px;
	border: none;
	opacity: 0.85;
	margin: 0;
}

.section-eyebrow,
.eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	display: block;
	margin-bottom: var(--space-3);
}

.section-eyebrow--courses {
	color: var(--color-courses);
}

.section-header {
	margin-bottom: var(--space-8);
}

.section-header--flex,
.section-header-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.view-all {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: 0.02em;
	color: var(--color-link);
	border-bottom: 1px solid currentColor;
	transition: opacity 150ms ease;
	text-decoration: none;
}

.view-all:hover {
	opacity: 0.55;
}

.view-all--courses {
	color: var(--color-courses);
}

.iqraonline [lang="ar"] {
	font-family: var(--font-arabic);
}

/* Newsletter — global pre-footer section */
.section-newsletter {
	background: var(--color-bg-subtle);
	padding-block: var(--space-16);
}

.newsletter-inner {
	max-width: var(--max-width-narrow);
	margin-inline: auto;
	text-align: center;
}

.newsletter-heading {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	color: var(--color-text-primary);
	margin-bottom: var(--space-3);
}

.newsletter-sub {
	font-family: var(--font-serif);
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-8);
}

.newsletter-form__row {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-medium);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-5);
	width: min(280px, 100%);
	outline: none;
	transition: border-color 150ms ease;
}

.newsletter-form input[type="email"]:focus {
	border-color: var(--color-accent);
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.newsletter-form button {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	border: none;
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-6);
	cursor: pointer;
	transition: filter 150ms ease;
}

.newsletter-form button:hover {
	filter: brightness(0.9);
}

.newsletter-notice {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	margin: 0 0 var(--space-6);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
}

.newsletter-notice--success {
	color: var(--color-accent-text);
	background: var(--color-accent-light);
	border: 1px solid var(--color-accent);
}

.newsletter-notice--error {
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-medium);
}

.newsletter-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}