/*
Theme Name: Wazef
Theme URI:
Author: Wazef
Description: قالب وظائف ومنح وتدريبات - مبني على Twenty Twenty-Five
Template: twentytwentyfive
Version: 1.0.6
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wazef
Tags: rtl-language-support, translation-ready, blog
*/

/*
 * Color strategy: Committed.
 * Primary (dominant): warm professional blue — trust, action, identity.
 * Semantic: success green, warning amber, error rose.
 * Neutrals: warm-tinted, never pure gray/black/white.
 */

:root {
	/* Primary — vivid professional blue */
	--c-primary: oklch(48% 0.24 250);
	--c-primary-hover: oklch(40% 0.24 250);
	--c-primary-soft: oklch(93% 0.05 250);
	--c-primary-mist: oklch(96% 0.03 250);

	/* Semantic */
	--c-success: oklch(55% 0.19 155);
	--c-success-soft: oklch(93% 0.05 155);
	--c-warning: oklch(44% 0.11 70);
	--c-warning-soft: oklch(94% 0.04 70);
	--c-danger: oklch(46% 0.16 25);
	--c-danger-soft: oklch(92% 0.05 25);

	/* Neutrals — warm-tinted toward primary hue */
	--c-text: oklch(18% 0.015 250);
	--c-text-secondary: oklch(40% 0.015 250);
	--c-text-muted: oklch(42% 0.012 250);
	--c-bg: oklch(97% 0.008 250);
	--c-surface: oklch(99.5% 0.003 250);
	--c-border: oklch(88% 0.012 250);
	--c-border-light: oklch(92% 0.008 250);

	/* Spacing scale */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* Type scale */
	--text-xs: 0.875rem;
	--opm-bottom-nav: 0px;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;

	/* Tokens */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-full: 9999px;
	--shadow-xs: 0 1px 2px oklch(0% 0 0 / 4%);
	--shadow-sm: 0 1px 3px oklch(0% 0 0 / 5%), 0 1px 2px oklch(0% 0 0 / 3%);
	--shadow-md: 0 4px 8px -2px oklch(0% 0 0 / 6%);
	--shadow-hover: 0 6px 16px -4px oklch(50% 0.22 250 / 16%);
	--font: 'Cairo', sans-serif;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Z-index scale */
	--z-sticky: 100;
	--z-bar: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;
}

*, *::before, *::after { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }

body.opm-template {
	margin: 0; padding: 0;
	font-family: var(--font);
	font-size: var(--text-base); line-height: 1.7;
	color: var(--c-text);
	background: var(--c-bg);
	direction: rtl; text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
	font-kerning: normal;
	font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6, .opm-card-title, .opm-hero-title, .opm-single-title, .opm-section-heading {
	text-wrap: balance;
}

p, .opm-card-excerpt, .opm-tip-excerpt {
	text-wrap: pretty;
}

a { color: var(--c-primary); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--c-primary-hover); }
img { max-width: 100%; height: auto; }

/* === Layout === */
.opm-container { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-5); }
.opm-content-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding: var(--sp-6) 0; }
@media (min-width: 900px) {
	.opm-content-area:has(> .opm-sidebar .opm-ad-slot:has(*)) { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 768px) {
	.opm-container { padding: 0 var(--sp-4); }
	.opm-content-area { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* === Header === */
.opm-header {
	background: var(--c-surface);
	border-bottom: 3px solid var(--c-primary);
	position: sticky; top: 0; z-index: var(--z-sticky);
}
.opm-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; height: auto; gap: var(--sp-3); flex-wrap: wrap; padding-block: var(--sp-2); }
.opm-logo { font-size: var(--text-2xl); font-weight: 800; flex: 0 0 auto; }
.opm-logo a { color: var(--c-primary); }
.opm-nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.opm-nav a {
	color: var(--c-text); font-size: 0.875rem; font-weight: 600;
	padding: 8px 14px; border-radius: var(--radius-sm);
	min-height: 44px; display: inline-flex; align-items: center;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.opm-nav a:hover { color: var(--c-primary); background: var(--c-primary-mist); }
.opm-nav a.current { color: var(--c-primary); background: var(--c-primary-soft); }

.opm-header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.opm-mobile-toggle { display: none; background: none; border: none; font-size: var(--text-2xl); cursor: pointer; color: var(--c-text); padding: 8px; }

/* Header Clock */
.opm-header-clock {
	display: flex; align-items: center; gap: var(--sp-2);
	background: var(--c-primary-mist);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: 4px 12px; height: 36px;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}
.opm-clock-time {
	font-size: var(--text-base); font-weight: 700;
	color: var(--c-text);
	letter-spacing: 0.05em;
	min-width: 48px; text-align: center;
}
.opm-clock-date {
	font-size: var(--text-xs); font-weight: 500;
	color: var(--c-text-secondary);
	border-right: 1px solid var(--c-border);
	padding-right: var(--sp-2);
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.opm-header-clock { display: none; }
}
@media (max-width: 768px) {
	:root { --opm-bottom-nav: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 769px) {
	.opm-bottom-nav, .opm-bottom-more { display: none !important; }
}
@media (max-width: 768px) {
	.opm-nav { display: none; position: absolute; top: 60px; right: 0; left: 0; background: var(--c-surface); flex-direction: column; padding: 8px 16px; border-bottom: 3px solid var(--c-primary); gap: 2px; z-index: var(--z-sticky); }
	.opm-nav.active { display: flex; }
}

/* === Ticker Bar === */
.opm-ticker {
	display: flex; align-items: center;
	background: var(--c-primary-mist); color: var(--c-text);
	border-bottom: 1px solid var(--c-border);
	overflow: hidden; height: 38px;
	font-size: var(--text-sm); font-weight: 600;
	position: relative;
}
.opm-ticker-label {
	background: var(--c-primary);
	color: oklch(99% 0.003 248);
	padding: 0 var(--sp-5) 0 var(--sp-4);
	height: 100%; display: flex; align-items: center;
	font-weight: 700; font-size: var(--text-xs);
	white-space: nowrap;
	z-index: 1; position: relative;
	order: -1;
}
.opm-ticker-label::before {
	content: ''; position: absolute; left: -6px; top: 0; bottom: 0;
	width: 12px; background: var(--c-primary);
	transform: skewX(-8deg);
}
.opm-ticker-track {
	flex: 1; overflow: hidden; height: 100%;
	display: flex; align-items: center;
	direction: rtl;
	mask-image: linear-gradient(to left, transparent 0%, black 3%, black 97%, transparent 100%);
	-webkit-mask-image: linear-gradient(to left, transparent 0%, black 3%, black 97%, transparent 100%);
}
.opm-ticker-content {
	display: flex; gap: var(--sp-6);
	flex-shrink: 0; width: max-content;
	animation: opm-ticker-scroll var(--ticker-speed, 35s) linear infinite;
	white-space: nowrap;
}
.opm-ticker-item {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	color: var(--c-text); text-decoration: none;
	white-space: nowrap; padding: 0 var(--sp-2);
	transition: color 0.2s var(--ease);
}
.opm-ticker-item:hover { color: var(--c-primary); }
.opm-ticker-item::after {
	content: '•'; margin-right: var(--sp-4);
	opacity: 0.3; font-size: 0.6em;
}
.opm-ticker-item:last-child::after { display: none; }
.opm-ticker-emoji { font-size: var(--text-base); }

/* Ticker pause on hover */
.opm-ticker:hover .opm-ticker-content { animation-play-state: paused; }

@keyframes opm-ticker-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(50%); }
}

/* === Mobile Bottom Navigation === */
.opm-bottom-nav {
	display: none;
	position: fixed; bottom: 0; left: 0; right: 0;
	z-index: var(--z-bar);
	background: var(--c-surface);
	border-top: 1px solid var(--c-border-light);
	padding: var(--sp-1) 0 env(safe-area-inset-bottom, 0);
	justify-content: space-around; align-items: stretch;
	box-shadow: 0 -2px 12px oklch(0% 0 0 / 6%);
}

.opm-bottom-nav-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; flex: 1;
	min-height: 48px;
	padding: var(--sp-2) var(--sp-1);
	background: none; border: none;
	color: var(--c-text-muted); font-family: var(--font);
	text-decoration: none; cursor: pointer;
	transition: color 0.2s var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.opm-bottom-nav-icon { font-size: 1.25rem; line-height: 1; }
.opm-bottom-nav-label { font-size: 0.875rem; font-weight: 600; line-height: 1.2; }

.opm-bottom-nav-item.active { color: var(--c-primary); }
.opm-bottom-nav-item.active .opm-bottom-nav-label { font-weight: 700; }

/* More popup menu */
.opm-bottom-more {
	display: none;
	position: fixed; bottom: calc(var(--opm-bottom-nav) + 8px); left: var(--sp-4); right: var(--sp-4);
	z-index: var(--z-bar);
	background: var(--c-surface);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-md);
	padding: var(--sp-2);
	box-shadow: 0 -4px 24px oklch(0% 0 0 / 12%);
	flex-direction: column; gap: 0;
	transform: translateY(8px); opacity: 0;
	transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.opm-bottom-more.active {
	display: flex;
	transform: translateY(0); opacity: 1;
}
.opm-bottom-more-item {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm); font-weight: 600; font-family: var(--font);
	color: var(--c-text); text-decoration: none;
	background: none; border: none; width: 100%;
	cursor: pointer; text-align: right;
	transition: background 0.15s var(--ease);
}
.opm-bottom-more-item:hover,
.opm-bottom-more-item:active { background: var(--c-primary-mist); }
.opm-bottom-more-item span { font-size: 1.1rem; }

@media (max-width: 768px) {
	.opm-bottom-nav { display: flex; }
	body.opm-template { padding-bottom: var(--opm-bottom-nav); }
	.opm-footer { margin-bottom: 0; }
	.opm-mobile-toggle { display: none; }
	.opm-nav { display: none; }
}

/* === Breadcrumbs === */
.opm-breadcrumbs { font-size: var(--text-xs); color: var(--c-text-muted); padding: 14px 0 4px; }
.opm-breadcrumbs a { color: var(--c-text-secondary); }
.opm-breadcrumbs a:hover { color: var(--c-primary); }
.opm-breadcrumbs .sep { margin: 0 6px; opacity: 0.4; }

/* === Badges === */
.opm-badge {
	display: inline-flex; align-items: center;
	padding: 4px 12px; border-radius: var(--radius-full);
	font-size: var(--text-xs); font-weight: 700;
	border: 1px solid transparent;
}
.opm-badge-remote { background: oklch(92% 0.06 155); color: oklch(40% 0.16 155); border-color: oklch(85% 0.08 155); }
.opm-badge-featured { background: oklch(92% 0.06 70); color: oklch(42% 0.14 70); border-color: oklch(85% 0.08 70); }
.opm-badge-type { background: oklch(92% 0.06 250); color: oklch(40% 0.20 250); border-color: oklch(85% 0.08 250); }
.opm-badge-deadline { background: oklch(92% 0.06 25); color: oklch(45% 0.20 25); border-color: oklch(85% 0.08 25); }

/* === Cards === */
.opm-cards { display: flex; flex-direction: column; gap: var(--sp-3); }
.opm-card {
	background: var(--c-surface); border-radius: var(--radius-md);
	padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-border);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	display: flex; flex-direction: column;
	min-width: 0;
}
.opm-card:hover { border-color: oklch(70% 0.10 250); box-shadow: var(--shadow-hover); }
@media (hover: hover) {
	.opm-card:hover { transform: translateY(-2px); }
}
.opm-card-badges { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.opm-card-title {
	font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--sp-1); line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden; overflow-wrap: anywhere;
}
.opm-card-title a { color: var(--c-text); }
.opm-card-title a:hover { color: var(--c-primary); }
.opm-card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--text-sm); font-weight: 400; color: var(--c-text-secondary); font-variant-numeric: tabular-nums; margin-top: auto; }
.opm-card-excerpt { font-size: var(--text-sm); font-weight: 400; color: var(--c-text-secondary); line-height: 1.65; margin-top: var(--sp-2); }

/* === Single === */
.opm-single-main {
	background: var(--c-surface); border-radius: var(--radius-lg);
	padding: var(--sp-7); border: 1px solid var(--c-border-light);
}
.opm-single-title { font-size: var(--text-4xl); font-weight: 800; margin: var(--sp-3) 0 var(--sp-5); line-height: 1.3; overflow-wrap: anywhere; }

.opm-meta-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--sp-3); margin-bottom: var(--sp-6); padding: var(--sp-4);
	background: var(--c-primary-mist); border-radius: var(--radius-md);
	border: 1px solid var(--c-border-light);
}
.opm-meta-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
.opm-meta-label { font-weight: 700; color: var(--c-text-secondary); white-space: nowrap; font-size: var(--text-xs); }
.opm-deadline-passed { color: var(--c-danger); font-weight: 700; }
.opm-deadline-soon { color: var(--c-warning); font-weight: 600; }

.opm-section { margin-top: var(--sp-6); }
.opm-section-title {
	font-size: var(--text-lg); font-weight: 800; margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-primary-soft);
	color: var(--c-text);
}
.opm-section-content { font-size: var(--text-sm); line-height: 1.85; max-width: 70ch; }
.opm-section-content ul, .opm-section-content ol { padding-right: var(--sp-4); }

/* === CTA === */
.opm-cta { margin-top: var(--sp-6); text-align: center; }
.opm-cta-btn {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	background: var(--c-primary); color: oklch(99% 0.003 248);
	padding: var(--sp-4) var(--sp-8); border-radius: var(--radius-sm);
	font-size: var(--text-lg); font-weight: 800;
	transition: all 0.2s var(--ease);
}
.opm-cta-btn:hover { background: var(--c-primary-hover); color: oklch(99% 0.003 248); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.opm-post-dates { margin-top: var(--sp-6); font-size: var(--text-xs); color: var(--c-text-muted); padding-top: var(--sp-4); border-top: 1px solid var(--c-border-light); font-variant-numeric: tabular-nums; }

/* === Archive === */
.opm-archive-title { font-size: var(--text-3xl); font-weight: 800; margin: 0 0 24px; color: var(--c-text); overflow-wrap: anywhere; }
.opm-archive-title::after {
	content: ''; display: block; width: 48px; height: 3px;
	background: var(--c-primary); border-radius: 2px; margin-top: var(--sp-3);
}

/* === Pagination === */
.opm-pagination { display: flex; justify-content: center; gap: 6px; padding: 32px 0; }
.opm-pagination a, .opm-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; height: auto; padding: 0 12px;
	border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
	background: var(--c-surface); color: var(--c-text-secondary);
	border: 1px solid var(--c-border); transition: all 0.2s var(--ease);
}
.opm-pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.opm-pagination .current { background: var(--c-primary); color: oklch(99% 0 0); border-color: var(--c-primary); font-weight: 700; }

/* === Sidebar === */
.opm-sidebar { display: flex; flex-direction: column; gap: 20px; }
.opm-ad-slot:not(:has(*)) { display: none; }
.opm-ad-slot:has(*) {
	background: var(--c-surface); border: 1px dashed var(--c-border);
	border-radius: var(--radius-md); padding: 12px; text-align: center;
	font-size: var(--text-xs); color: var(--c-text-muted);
	min-height: 90px; margin-block: var(--sp-4);
	display: flex; align-items: center; justify-content: center;
}
.opm-sidebar .opm-ad-slot:has(*) { min-height: 250px; margin-block: 0; }
.opm-sidebar:not(:has(.opm-ad-active)) { display: none; }
.opm-ad-active { border-style: solid; border-color: var(--c-border-light); }

/* === Related === */
.opm-related { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-border-light); }
.opm-related-title {
	font-size: var(--text-xl); font-weight: 800; margin: 0 0 14px;
	color: var(--c-primary);
}
.opm-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* === Footer === */
.opm-footer {
	background: var(--c-surface); color: var(--c-text-secondary);
	padding: 32px 0; margin-top: var(--sp-5); font-size: var(--text-sm); text-align: center;
	border-top: 1px solid var(--c-border);
}
.opm-footer a { color: var(--c-primary); }
.opm-footer a:hover { color: var(--c-primary-hover); }

/* === WhatsApp === */
.opm-whatsapp {
	position: fixed; bottom: calc(var(--opm-bottom-nav, 0px) + 16px); left: 24px; z-index: calc(var(--z-bar) + 1);
	width: 54px; height: 54px; background: oklch(62% 0.18 155); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px oklch(62% 0.18 155 / 35%);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.opm-whatsapp:hover { transform: scale(1.08); box-shadow: 0 6px 20px oklch(62% 0.18 155 / 45%); }
.opm-whatsapp svg { width: 26px; height: 26px; fill: oklch(99% 0.003 155); }

/* === Hero === */
.opm-hero {
	background: linear-gradient(135deg, var(--c-primary-mist), oklch(98% 0.02 250));
	color: var(--c-text); padding: 64px 0 52px; text-align: center;
	border-bottom: 1px solid var(--c-border-light);
}
.opm-hero-title { font-size: var(--text-4xl); font-weight: 800; margin: 0 0 10px; line-height: 1.2; overflow-wrap: anywhere; }
.opm-hero-desc { font-size: var(--text-lg); color: var(--c-text-secondary); margin: 0 0 32px; font-weight: 400; }

.opm-hero-search {
	display: flex; max-width: 540px; margin: 0 auto 28px;
	border-radius: var(--radius-md); overflow: hidden;
	box-shadow: 0 8px 32px oklch(0% 0 0 / 25%);
}
.opm-search-input {
	flex: 1; border: none; padding: 16px 20px;
	font-size: var(--text-base); font-family: var(--font); direction: rtl;
	background: oklch(99.5% 0.003 250); color: var(--c-text);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	min-height: 48px;
}
.opm-search-input::placeholder { color: var(--c-text-muted); }
.opm-search-btn {
	background: oklch(55% 0.24 250); color: oklch(100% 0 0);
	border: none; padding: 0 32px; min-height: 48px;
	font-size: var(--text-base); font-family: var(--font); font-weight: 700; cursor: pointer;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	transition: background 0.2s var(--ease);
}
.opm-search-btn:hover { background: oklch(48% 0.24 250); }

.opm-hero-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.opm-hero-quick span { font-size: var(--text-sm); color: var(--c-text-secondary); margin-left: 8px; }
.opm-hero-link {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--c-surface); color: var(--c-primary);
	padding: 10px 18px; border-radius: var(--radius-full);
	font-size: var(--text-sm); font-weight: 600;
	border: 1px solid var(--c-border);
	min-height: 44px;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.opm-hero-link-icon { font-size: var(--text-base); }
.opm-hero-link:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-hover); transform: translateY(-1px); }

@media (max-width: 768px) {
	.opm-hero { padding: 40px 0 32px; }
	.opm-hero-title { font-size: var(--text-3xl); }
	.opm-hero-desc { font-size: var(--text-base); margin-bottom: var(--sp-5); }
	.opm-hero-search { flex-direction: column; margin: 0 8px 24px; border-radius: var(--radius-sm); }
	.opm-search-input { border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 14px 16px; }
	.opm-search-btn { border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 12px 16px; }
	.opm-card { padding: var(--sp-3) var(--sp-4); }
	.opm-card-title { font-size: var(--text-base); }
}

/* === Home Sections === */
.opm-home-section { padding: var(--sp-5) 0; }
.opm-home-section:first-of-type { padding-top: var(--sp-6); }
.opm-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.opm-section-heading { font-size: var(--text-2xl); font-weight: 800; margin: 0; }
.opm-view-all {
	font-size: var(--text-sm); font-weight: 700; color: var(--c-primary);
	padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm);
	transition: background 0.2s var(--ease);
}
.opm-view-all:hover { background: var(--c-primary-soft); }
.opm-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); align-items: stretch; }
@media (max-width: 768px) { .opm-home-grid { grid-template-columns: 1fr; } }

/* === Filters === */
.opm-filters {
	display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
	margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5);
	background: var(--c-surface); border-radius: var(--radius-md);
	border: 1px solid var(--c-border-light);
}
.opm-filter-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: min(100%, 160px); }
.opm-filter-label { font-size: var(--text-sm); font-weight: 700; color: var(--c-text); }
.opm-filters select {
	padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	font-family: var(--font); font-size: var(--text-sm); font-weight: 500;
	background: var(--c-surface); color: var(--c-text); cursor: pointer;
	width: 100%; min-height: 44px;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.opm-filters select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-soft); }

.opm-filter-check { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; min-height: 44px; }
.opm-filter-check input { width: 20px; height: 20px; accent-color: var(--c-primary); }
.opm-filter-submit {
	min-height: 44px; padding: 0 var(--sp-5);
	border: none; border-radius: var(--radius-sm); cursor: pointer;
	background: var(--c-primary); color: oklch(99% 0.003 248);
	font-family: var(--font); font-size: var(--text-sm); font-weight: 700;
}
.opm-filter-submit:hover { background: var(--c-primary-hover); }
.opm-filter-reset {
	font-size: var(--text-sm); color: var(--c-danger); font-weight: 700;
	margin-inline-start: auto; min-height: 44px;
	display: inline-flex; align-items: center;
}
.opm-filter-reset:hover { color: oklch(38% 0.16 25); }

@media (max-width: 768px) {
	.opm-filters { flex-direction: column; align-items: stretch; }
	.opm-filters select { width: 100%; }
}

/* ===========================
   Delight: Micro-interactions
   =========================== */

/* Button press feedback */
.opm-cta-btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; transition-duration: 0.08s; }
.opm-hero-link:active { transform: scale(0.96); transition-duration: 0.08s; }

/* Search input: subtle expansion on focus */
.opm-hero-search { transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.opm-hero-search:focus-within { box-shadow: 0 6px 28px oklch(0% 0 0 / 20%); transform: scale(1.01); }

/* Card: satisfying click press */
.opm-card:active { transform: translateY(0); box-shadow: var(--shadow-xs); transition-duration: 0.08s; }

.opm-deadline-soon { animation: none; font-weight: 800; }

/* Pagination press */
.opm-pagination a:active { transform: scale(0.94); transition-duration: 0.08s; }

/* WhatsApp: remove excessive pulse, keep only hover */
.opm-whatsapp { animation: none; }

/* ===========================
   Career Tips
   =========================== */

/* Category filter tabs */
.opm-tip-cats {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.opm-tip-cat-link {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 8px 16px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
	color: var(--c-text-secondary); background: var(--c-surface);
	border: 1px solid var(--c-border-light);
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.opm-tip-cat-link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.opm-tip-cat-link.active { background: var(--c-primary); color: oklch(99% 0 0); border-color: var(--c-primary); }

/* Tips grid */
.opm-tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
@media (max-width: 768px) { .opm-tips-grid { grid-template-columns: 1fr; } }

/* Tip card */
.opm-tip-card {
	background: var(--c-surface); border-radius: var(--radius-md);
	border: 1px solid var(--c-border-light); overflow: hidden;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.opm-tip-card:hover { border-color: var(--c-border); box-shadow: var(--shadow-hover); }
@media (hover: hover) {
	.opm-tip-card:hover { transform: translateY(-1px); }
}
.opm-tip-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.opm-tip-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--ease); }
.opm-tip-card:hover .opm-tip-thumb img { transform: scale(1.03); }
.opm-tip-body { padding: 16px 20px 20px; }
.opm-tip-title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 6px; line-height: 1.45; }
.opm-tip-title a { color: var(--c-text); }
.opm-tip-title a:hover { color: var(--c-primary); }
.opm-tip-excerpt { font-size: var(--text-sm); font-weight: 400; color: var(--c-text-secondary); line-height: 1.6; margin: 0 0 10px; }
.opm-tip-meta { display: flex; gap: 12px; font-size: var(--text-xs); font-weight: 400; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* Single tip */
.opm-tip-hero-img { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; }
.opm-tip-hero-img img { width: 100%; height: auto; display: block; }
.opm-tip-content { font-size: var(--text-base); line-height: 1.9; max-width: 68ch; }
.opm-tip-content h2 { font-size: var(--text-xl); font-weight: 800; margin: 28px 0 12px; }
.opm-tip-content h3 { font-size: var(--text-lg); font-weight: 700; margin: 24px 0 10px; }
.opm-tip-content p { margin: 0 0 16px; }
.opm-tip-content ul, .opm-tip-content ol { padding-right: 20px; margin: 0 0 16px; }
.opm-tip-content blockquote {
	margin: 20px 0; padding: 16px 20px;
	background: var(--c-primary-mist); border-radius: var(--radius-sm);
	font-style: italic; color: var(--c-text-secondary);
}

/* Share buttons */
.opm-tip-share {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-border-light);
}
.opm-tip-share-label { font-size: var(--text-sm); font-weight: 700; color: var(--c-text-secondary); }
.opm-tip-share-btn {
	min-height: 44px; padding: 8px 14px; border-radius: var(--radius-sm);
	font-size: var(--text-sm); font-weight: 600; font-family: var(--font);
	background: var(--c-surface); color: var(--c-text-secondary);
	border: 1px solid var(--c-border); cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.opm-tip-share-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Empty state encouragement */
.opm-empty-state { text-align: center; padding: 48px 24px; }
.opm-empty-state p { font-size: 1rem; color: var(--c-text-secondary); line-height: 1.7; margin: 0 0 16px; }

/* ===========================
   Compare Feature
   =========================== */
.opm-cmp-btn {
	background: var(--c-primary-mist); border: 1px solid var(--c-border);
	border-radius: var(--radius-sm); cursor: pointer;
	min-height: 44px; padding: 8px 14px; font-size: var(--text-sm); font-weight: 700;
	font-family: var(--font); color: var(--c-text-secondary);
	margin-top: 10px; align-self: flex-start;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.opm-cmp-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.opm-card.opm-cmp-selected .opm-cmp-btn {
	background: var(--c-primary-soft); border-color: var(--c-primary);
	color: var(--c-primary);
}
.opm-card.opm-cmp-selected { border-color: var(--c-primary); background: var(--c-primary-mist); }

/* Floating compare bar */
.opm-cmp-bar {
	position: fixed; bottom: var(--opm-bottom-nav); left: 0; right: 0; z-index: calc(var(--z-bar) + 2);
	background: var(--c-surface); border-top: 1px solid var(--c-border);
	padding: 12px 24px; display: none; align-items: center;
	justify-content: center; flex-wrap: wrap; gap: 12px;
	box-shadow: 0 -4px 16px oklch(18% 0.02 250 / 8%);
}
.opm-cmp-bar.active { display: flex; }
.opm-cmp-bar-count { font-size: var(--text-sm); font-weight: 600; color: var(--c-text); margin: 0; text-align: center; }
.opm-cmp-bar-go {
	background: var(--c-primary); color: oklch(99% 0.003 248);
	border: 1px solid var(--c-primary); border-radius: var(--radius-sm); cursor: pointer;
	min-height: 44px; padding: 8px 24px; font-size: var(--text-sm); font-weight: 700;
	font-family: var(--font);
}
.opm-cmp-bar-go:hover { background: var(--c-primary-hover); }
.opm-cmp-bar-go:disabled {
	background: transparent; color: var(--c-text-muted);
	border-color: var(--c-border); cursor: not-allowed;
}
.opm-cmp-bar-clear {
	background: none; border: none; cursor: pointer;
	min-height: 44px; font-size: var(--text-sm); font-weight: 700; font-family: var(--font);
	color: var(--c-danger); padding: 8px 12px;
}
body.opm-cmp-open .opm-whatsapp { bottom: calc(var(--opm-bottom-nav, 0px) + 8.5rem); }
body.opm-template.opm-cmp-open { padding-bottom: calc(var(--opm-bottom-nav) + 8rem); }

/* Comparison modal */
.opm-cmp-overlay {
	position: fixed; inset: 0; z-index: var(--z-modal);
	background: oklch(0% 0 0 / 50%);
	display: none; align-items: center; justify-content: center;
	padding: 24px;
}
.opm-cmp-overlay.active { display: flex; }
.opm-cmp-modal {
	background: var(--c-surface); border-radius: var(--radius-lg);
	max-width: 900px; width: 100%; max-height: 85vh;
	overflow-y: auto; padding: 28px;
}
.opm-cmp-modal-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 20px;
}
.opm-cmp-modal-title { font-size: var(--text-xl); font-weight: 800; margin: 0; }
.opm-cmp-close {
	background: none; border: none; cursor: pointer;
	font-size: var(--text-2xl); color: var(--c-text-muted); padding: 4px;
	line-height: 1; transition: color 0.2s;
}
.opm-cmp-close:hover { color: var(--c-danger); }
.opm-cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.opm-cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.opm-cmp-table th {
	text-align: right; padding: 10px 12px; font-weight: 700;
	color: var(--c-text-secondary); background: var(--c-primary-mist);
	white-space: nowrap; width: 100px;
	border-bottom: 1px solid var(--c-border-light);
}
.opm-cmp-table td {
	padding: 10px 12px; border-bottom: 1px solid var(--c-border-light);
	vertical-align: top;
}
.opm-cmp-table td a { font-weight: 700; }

@media (max-width: 768px) {
	.opm-cmp-modal { padding: 20px 16px; max-height: 90vh; }
	.opm-cmp-table { font-size: var(--text-xs); }
	.opm-cmp-table th, .opm-cmp-table td { padding: 8px 6px; }
}

/* ===========================
   Delight Pass 2
   =========================== */

/* Smooth theme transition on surfaces */
.opm-header, .opm-card, .opm-single-main, .opm-tip-card, .opm-filters,
.opm-cmp-bar, .opm-cmp-modal, .opm-footer {
	transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.3s var(--ease);
}

.opm-cmp-dialog {
	margin: auto;
	padding: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
	color: var(--c-text);
	width: min(56rem, calc(100% - 2rem));
	max-height: min(85dvh, calc(100% - 2rem));
	overflow: auto;
}
.opm-cmp-dialog:modal,
.opm-cmp-dialog[open] { overscroll-behavior: contain; }
.opm-cmp-dialog::backdrop {
	background: oklch(18% 0.02 250 / 55%);
	overflow: hidden;
	overscroll-behavior: contain;
}
.opm-cmp-modal-header { padding: var(--sp-4) var(--sp-5) 0; }
.opm-cmp-modal-close {
	min-width: 44px; min-height: 44px;
	background: none; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
	cursor: pointer; font-size: var(--text-xl); line-height: 1;
	color: var(--c-text); font-family: var(--font);
}
.opm-cmp-modal-close:hover { border-color: var(--c-danger); color: var(--c-danger); }
.opm-cmp-table-wrap { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.opm-cmp-grid {
	display: grid;
	grid-template-columns: 8rem repeat(var(--cmp-cols, 2), minmax(0, 1fr));
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.opm-cmp-key, .opm-cmp-val {
	padding: 12px;
	border-bottom: 1px solid var(--c-border-light);
	overflow-wrap: anywhere;
	min-width: 0;
}
.opm-cmp-key { font-weight: 700; background: var(--c-primary-mist); color: var(--c-text-secondary); }
.opm-cmp-name { font-weight: 800; }
@media (max-width: 700px) {
	.opm-cmp-grid { grid-template-columns: 1fr; }
}

.opm-skip {
	position: absolute;
	inset-inline-start: var(--sp-4);
	top: var(--sp-3);
	z-index: var(--z-toast);
	transform: translateY(-160%);
	background: var(--c-surface);
	color: var(--c-text);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	min-height: 44px;
	font-weight: 700;
}
.opm-skip:focus { transform: none; }

.opm-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.opm-cta-btn { min-height: 44px; }
.opm-cta-btn-secondary {
	background: var(--c-surface);
	color: var(--c-primary);
	border: 1px solid var(--c-border);
}
.opm-cta-btn-secondary:hover { background: var(--c-primary-soft); color: var(--c-primary-hover); }
.opm-empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.opm-result-count { font-weight: 700; color: var(--c-text-secondary); margin: 0 0 var(--sp-4); }
.opm-archive-desc { color: var(--c-text-secondary); margin: calc(var(--sp-3) * -1) 0 var(--sp-5); max-width: 65ch; }
.opm-tip-meta-lead { color: var(--c-text-muted); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.opm-view-all { min-height: 44px; display: inline-flex; align-items: center; }
.opm-bottom-more-item { min-height: 44px; }

.opm-map {
	height: min(480px, 70vh);
	min-height: 280px;
	border-radius: var(--radius-md);
	border: 1px solid var(--c-border);
	margin-bottom: var(--sp-5);
	z-index: 0;
	overflow: hidden;
}
.opm-map[hidden] { display: none; }
.opm-map:not([hidden]) + .opm-map-fallback { display: none; }
.leaflet-container img { max-width: none; }
.opm-map .leaflet-control-zoom a {
	width: 44px; height: 44px; line-height: 44px; font-size: 1.25rem;
}
.opm-map .leaflet-control-attribution,
.opm-map .leaflet-control-attribution a { font-size: var(--text-xs); }
.opm-map .leaflet-popup-close-button { width: 44px; height: 44px; font-size: 1.25rem; }
.opm-map-lead, .opm-map-fallback { color: var(--c-text-secondary); }
.opm-map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.opm-map-list a {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
	min-height: 44px; padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface); border: 1px solid var(--c-border-light);
	border-radius: var(--radius-sm); color: var(--c-text); font-weight: 700;
}
.opm-map-list a:hover { border-color: var(--c-primary); }
.opm-map-list p { margin: 6px 0 0; color: var(--c-text-muted); font-size: var(--text-sm); }
.opm-map-popup { color: var(--c-text); line-height: 1.5; }

/* Category tab press */
.opm-tip-cat-link:active { transform: scale(0.95); transition-duration: 0.08s; }

/* Reading progress bar */
.opm-read-progress {
	position: fixed; top: 60px; left: 0; right: 0; z-index: calc(var(--z-sticky) - 1);
	height: 3px; background: transparent;
}
.opm-read-progress-bar {
	height: 100%; width: 0%; background: var(--c-primary);
	transition: width 0.1s linear;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.opm-ticker-content {
		animation-duration: var(--ticker-speed, 35s) !important;
		animation-iteration-count: infinite !important;
	}
	.opm-tip-card { opacity: 1; transform: none; }
}