/**
 * ICpEP-Qatar shared design system — sitewide.
 *
 * The reusable primitives (buttons, section rhythm, cards, tags) and the
 * design tokens they're built from (type scale, shadows, mist/border
 * neutrals). Originally lived only in front-page.css; extracted here so
 * every other page (page.php, the Contact page, and anything else) draws
 * from the same system instead of the homepage being a one-off. Enqueued
 * sitewide, as a dependency of front-page.css/page.css/contact.css.
 *
 * Colors read Elementor's live Global Color custom properties (Site
 * Settings > Global Colors, wired up in
 * wp-content/migrations/apply-design-system.php): Primary #0B132B (Navy),
 * Secondary #00A3E0 (Electric Cyan), Accent #8A1538 (Maroon, tag accents
 * only), Text #1F2937. Mist #F8FAFC is a local alternation background, not
 * a Kit color. Fallback hex always matches the current Kit value, per
 * CLAUDE.md Token Alignment.
 *
 * Typography scale, shadow layers, and interactive states follow this
 * project's ui-ux-pro-max skill (modular clamp() scale, 44px touch
 * targets, multi-layer soft shadows, complete hover/active/focus-visible
 * states on every interactive element).
 */

:root {
	--icpep-mist: #f8fafc;
	--icpep-card-border: #e2e8f0;
	/*
	 * Secondary (#00A3E0) itself is a WCAG AA failure wherever it carries
	 * text: 2.87:1 as text-on-white, 2.87:1 as white-text-on-cyan — both
	 * short of the 4.5:1 normal-text minimum (measured against this
	 * project's actual button/link weight and size, which don't clear the
	 * "large text" 3:1 exception). --icpep-cyan-deep is that same hue
	 * darkened to 4.58:1, used everywhere Secondary carries text, a button
	 * label, an icon glyph, or a focus ring on a light surface. Pure
	 * Secondary stays reserved for large decorative surfaces — gradients,
	 * the hero wave, borders, glows — and for text/icons already sitting on
	 * Navy, where the pairing clears 6.4:1 on its own.
	 */
	--icpep-cyan-deep: #007ead;
	/* One step further down the same hue (5.6:1) — the hover/active shade
	   for anything whose resting state already sits at --icpep-cyan-deep,
	   so hover still reads as a visible step down, not a repeat. */
	--icpep-cyan-deeper: #006f99;
	/* Section-grid content width. Named distinctly from header-footer.css's
	   --icpep-content-max-width (1200px, header/footer inner alignment) —
	   the two are deliberately different widths for different purposes, so
	   they can't share one custom property name without one silently
	   overriding the other depending on stylesheet load order. */
	--icpep-section-max-width: 1280px;

	/* Type scale — clamp(min, preferred, max), Major-Third-ish steps */
	--icpep-fs-xs: clamp( 0.75rem, 0.72rem + 0.15vw, 0.8125rem );
	--icpep-fs-sm: clamp( 0.875rem, 0.84rem + 0.18vw, 0.9375rem );
	--icpep-fs-base: clamp( 1rem, 0.96rem + 0.2vw, 1.0625rem );
	--icpep-fs-md: clamp( 1.15rem, 1.05rem + 0.5vw, 1.375rem );
	--icpep-fs-lg: clamp( 1.75rem, 1.5rem + 1.25vw, 2.25rem );
	--icpep-fs-xl: clamp( 2.25rem, 1.7rem + 2.75vw, 3.75rem );

	/* Shadows — tinted to Navy at low opacity, layered near/far, per
	   ui-ux-pro-max §4. Resting cards use sm/md; hover elevates to lg. */
	--icpep-shadow-sm:
		0 1px 2px rgba( 11, 19, 43, 0.04 ),
		0 1px 1px rgba( 11, 19, 43, 0.03 );
	--icpep-shadow-md:
		0 2px 4px rgba( 11, 19, 43, 0.04 ),
		0 8px 16px rgba( 11, 19, 43, 0.06 ),
		0 1px 2px rgba( 11, 19, 43, 0.04 );
	--icpep-shadow-lg:
		0 6px 12px rgba( 11, 19, 43, 0.06 ),
		0 20px 32px -8px rgba( 11, 19, 43, 0.16 ),
		0 2px 6px rgba( 11, 19, 43, 0.05 );
}

/* ==========================================================
   Section rhythm
   ========================================================== */

.icpep-section__inner {
	max-width: var( --icpep-section-max-width );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

.icpep-section {
	position: relative;
	padding-block: clamp( 60px, 8vw, 100px );
}

.icpep-section--mist {
	background-color: var( --icpep-mist );
}

/*
 * Faint ambient texture so glass cards (.icpep-card below) have something
 * to actually blur against — a flat mist fill alone reads as glass on
 * glass. z-index:-1 keeps it behind all in-flow content regardless of
 * the content's own stacking (same technique as the hero/footer mesh).
 */
.icpep-section--mist::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient( circle at 15% 10%, rgba( 0, 163, 224, 0.07 ) 0%, rgba( 0, 163, 224, 0 ) 45% ),
		radial-gradient( circle at 85% 90%, rgba( 138, 21, 56, 0.05 ) 0%, rgba( 138, 21, 56, 0 ) 45% );
}

.icpep-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: clamp( 2rem, 5vw, 3rem );
}

.icpep-section__heading {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-lg );
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary, #0b132b );
	margin: 0;
}

.icpep-section__subheading {
	max-width: 60ch;
	color: var( --e-global-color-text, #1f2937 );
	font-size: var( --icpep-fs-base );
	line-height: 1.6;
	margin: 0.75rem 0 0;
}

.icpep-section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	/* --icpep-cyan-deep, not raw Secondary — this is text on a light
	   surface, and pure #00A3E0 only clears 2.87:1 there. See the token's
	   definition above. */
	color: var( --icpep-cyan-deep );
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, gap 0.15s ease;
}

.icpep-section__link::after {
	content: '\2192';
	transition: transform 0.15s ease;
}

.icpep-section__link:hover,
.icpep-section__link:focus-visible {
	color: var( --icpep-cyan-deeper );
}

.icpep-section__link:hover::after,
.icpep-section__link:focus-visible::after {
	transform: translateX( 3px );
}

.icpep-section__link:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 4px;
	border-radius: 2px;
}

/* ==========================================================
   Buttons
   ========================================================== */

.icpep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	font-family: var( --e-global-typography-accent-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-base );
	padding: 0.9em 2em;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/*
 * Double-classed (.icpep-btn.icpep-btn--primary, not just
 * .icpep-btn--primary) deliberately, even though every usage already
 * carries both classes together: Hello Elementor's reset.css defines
 * `[type="submit"], button { background-color: transparent; border: 1px
 * solid #cc3366; color: #cc3366; }`, which is also (0,1,0) specificity —
 * a tie that reset.css can win on real <button> elements (like the
 * contact form's submit) whenever it happens to load after this
 * stylesheet. The compound selector is (0,2,0), so it wins unconditionally
 * regardless of load order.
 */
.icpep-btn.icpep-btn--primary {
	/* --icpep-cyan-deep, not raw Secondary — white button-label text on
	   #00A3E0 clears only 2.87:1 (fails 4.5:1); cyan-deep clears 4.58:1. */
	background-color: var( --icpep-cyan-deep );
	color: #ffffff;
	border: 2px solid transparent;
	box-shadow: var( --icpep-shadow-md ), 0 8px 20px -6px rgba( 0, 163, 224, 0.45 );
}

.icpep-btn.icpep-btn--primary:hover {
	background-color: var( --icpep-cyan-deeper );
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: var( --icpep-shadow-lg ), 0 12px 24px -6px rgba( 0, 163, 224, 0.5 );
}

.icpep-btn.icpep-btn--primary:active {
	transform: translateY( 0 ) scale( 0.98 );
	box-shadow: var( --icpep-shadow-sm );
}

.icpep-btn.icpep-btn--outline {
	background-color: transparent;
	color: var( --e-global-color-primary, #0b132b );
	border: 2px solid var( --e-global-color-primary, #0b132b );
}

.icpep-btn.icpep-btn--outline:hover {
	background-color: var( --e-global-color-primary, #0b132b );
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: var( --icpep-shadow-md );
}

.icpep-btn.icpep-btn--outline:active {
	transform: translateY( 0 ) scale( 0.98 );
}

.icpep-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.icpep-btn:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-btn,
	.icpep-section__link,
	.icpep-section__link::after {
		transition: none;
	}

	.icpep-btn:hover,
	.icpep-btn:active {
		transform: none;
	}
}

/* ==========================================================
   Cards (shared: pillars, events, news, contact)
   ========================================================== */

.icpep-card {
	background-color: rgba( 255, 255, 255, 0.72 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 20px;
	box-shadow: var( --icpep-shadow-sm ), inset 0 1px 0 rgba( 255, 255, 255, 0.5 );
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}

.icpep-card:hover {
	transform: translateY( -6px );
	background-color: rgba( 255, 255, 255, 0.85 );
	box-shadow: var( --icpep-shadow-lg ), inset 0 1px 0 rgba( 255, 255, 255, 0.6 );
	border-color: rgba( 0, 163, 224, 0.35 );
}

@media ( prefers-reduced-transparency: reduce ) {
	.icpep-card {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: var( --icpep-card-border );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-card {
		transition: none;
	}

	.icpep-card:hover {
		transform: none;
	}
}

/* ==========================================================
   Tags — Maroon accent, reserved for small badges
   ========================================================== */

.icpep-tag {
	display: inline-block;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xs );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	background-color: var( --e-global-color-accent, #8a1538 );
	padding: 0.35em 0.85em;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

.icpep-tag--upcoming {
	/* cyan-deep, not raw Secondary — same white-on-cyan contrast reasoning
	   as .icpep-btn.icpep-btn--primary above. */
	background-color: var( --icpep-cyan-deep );
}

.icpep-tag--past {
	background-color: #64748b;
}

/* ==========================================================
   Dynamic feed cards — events, officers, news
   ========================================================== */

/*
 * Grid/card markup for these three feeds is generated once, in
 * inc/dynamic-feeds.php's shortcodes ([icpep_events_feed],
 * [icpep_leadership_feed], [icpep_news_feed]), and embedded via
 * Elementor's Shortcode widget wherever it's needed — the Home page feed
 * sections, plus the dedicated Events Archive / Leadership / News pages.
 * Styling lives here, not in a per-page stylesheet, so it looks identical
 * everywhere the shortcode appears.
 */

.icpep-events-feed__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: clamp( 1.25rem, 3vw, 1.75rem );
}

@media ( max-width: 700px ) {
	.icpep-events-feed__grid {
		grid-template-columns: 1fr;
	}
}

.icpep-event-card {
	display: flex;
	gap: 1.35rem;
	padding: 1.75rem;
	align-items: flex-start;
}

.icpep-event-card__date-badge {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient( 155deg, var( --e-global-color-primary, #0b132b ) 0%, #1c2b4a 100% );
	color: #ffffff;
	box-shadow: var( --icpep-shadow-sm );
}

.icpep-event-card__day {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1;
}

.icpep-event-card__month {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 0.25rem;
	/* #4dceff, not raw Secondary (#00a3e0) — the badge's own gradient
	   background lightens toward #1c2b4a at its lower-right, where raw
	   cyan drops to 4.9:1 (fails even AA at that point) and #4dceff
	   holds 7.76:1 (clears AAA). */
	color: #4dceff;
}

.icpep-event-card__body {
	min-width: 0;
}

.icpep-event-card__title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}

.icpep-event-card__title a {
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
}

.icpep-event-card__title a:hover,
.icpep-event-card__title a:focus-visible {
	color: var( --icpep-cyan-deep );
}

.icpep-event-card__title a:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 3px;
	border-radius: 2px;
}

.icpep-event-card__venue {
	color: var( --e-global-color-text, #1f2937 );
	font-size: var( --icpep-fs-sm );
	margin: 0;
}

.icpep-leadership-feed__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 1.5rem, 3vw, 2rem );
	text-align: center;
}

@media ( max-width: 900px ) {
	.icpep-leadership-feed__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.icpep-leadership-feed__grid {
		grid-template-columns: 1fr;
	}
}

.icpep-officer-preview {
	padding: 1.5rem 1rem;
	border-radius: 20px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.icpep-officer-preview:hover {
	background-color: var( --icpep-mist );
	transform: translateY( -4px );
}

.icpep-officer-preview__photo {
	position: relative;
	width: 104px;
	height: 104px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	overflow: hidden;
	background-color: var( --icpep-mist );
	box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px var( --icpep-card-border ), var( --icpep-shadow-sm );
}

.icpep-officer-preview__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.icpep-officer-preview__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 155deg, var( --e-global-color-primary, #0b132b ) 0%, #1c2b4a 100% );
}

.icpep-officer-preview__initials {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	/* #4dceff, not raw Secondary (#00a3e0) — same fix, same reasoning as
	   .icpep-event-card__month above: the placeholder's own gradient
	   background lightens toward #1c2b4a, where raw cyan drops to 4.9:1. */
	color: #4dceff;
}

.icpep-officer-preview__name {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-base );
	color: var( --e-global-color-primary, #0b132b );
	margin: 0 0 0.35rem;
}

.icpep-officer-preview__position {
	color: var( --e-global-color-text, #1f2937 );
	font-size: var( --icpep-fs-sm );
	line-height: 1.5;
	margin: 0;
}

.icpep-news-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.icpep-news-feed__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 1.25rem, 3vw, 1.75rem );
}

@media ( max-width: 1024px ) {
	.icpep-news-feed__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	.icpep-news-feed__grid {
		grid-template-columns: 1fr;
	}
}

.icpep-news-card__thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.icpep-news-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.icpep-news-card:hover .icpep-news-card__thumb img {
	transform: scale( 1.06 );
}

/*
 * Fallback for posts with no featured image — the same navy-gradient
 * block already used for the officer-photo placeholder and the event
 * date badge, so a post without a photo still carries the same visual
 * weight as one that has it, instead of the card silently losing its
 * entire top half.
 */
.icpep-news-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 155deg, var( --e-global-color-primary, #0b132b ) 0%, #1c2b4a 100% );
	cursor: pointer;
}

.icpep-news-card__thumb--placeholder svg {
	width: 30%;
	height: 30%;
	max-width: 56px;
	max-height: 56px;
	color: rgba( 255, 255, 255, 0.35 );
	transition: color 0.35s ease, transform 0.35s ease;
}

.icpep-news-card:hover .icpep-news-card__thumb--placeholder svg {
	color: rgba( 255, 255, 255, 0.5 );
	transform: scale( 1.06 );
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-news-card:hover .icpep-news-card__thumb--placeholder svg {
		transform: none;
	}
}

.icpep-news-card__body {
	padding: 1.75rem;
}

.icpep-news-card__title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 0 0 0.5rem;
}

.icpep-news-card__title a {
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
}

.icpep-news-card__title a:hover,
.icpep-news-card__title a:focus-visible {
	color: var( --icpep-cyan-deep );
}

.icpep-news-card__title a:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 3px;
	border-radius: 2px;
}

.icpep-news-card__date {
	color: #64748b;
	font-size: var( --icpep-fs-xs );
	margin: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-officer-preview,
	.icpep-news-card__thumb img {
		transition: none;
	}

	.icpep-officer-preview:hover,
	.icpep-news-card:hover .icpep-news-card__thumb img {
		transform: none;
	}
}