/*
Theme Name: StackOrPros
Theme URI: https://getseo.tools/plugins
Description: A precision-crafted editorial theme for StackOrPros.com — built for speed, readability, and conversion.
Version: 2.0.0
Author: Maged Fayez
Author URI: https://getseo.tools
Text Domain: stackorpros
Tags: blog, custom-menu, featured-images, rtl-language-support
*/

/* ============================================================
   DESIGN TOKENS — LIGHT
   ============================================================ */
:root {
	--accent:       #0057ff;
	--accent-dark:  #0040cc;
	--accent-light: #eaf0ff;
	--accent-rgb:   0,87,255;

	--bg:       #ffffff;
	--bg-2:     #f6f8fb;
	--bg-3:     #eef1f6;
	--bg-card:  #ffffff;

	--text:   #0d1117;
	--text-2: #3d4c63;
	--text-3: #6b7a99;

	--border:   #e2e6ef;
	--border-2: #c8cfde;

	--green:        #0f9b58;
	--green-bg:     #eafaf3;
	--green-border: #a7e9c7;
	--blue-bg:      #eaf0ff;
	--blue-border:  #b8cdff;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

	--container:  1240px;
	--content:    760px;
	--content-w:  920px;
	--header-h:   64px;

	--s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
	--s5:1.25rem;--s6:1.5rem; --s8:2rem;   --s10:2.5rem;
	--s12:3rem;  --s16:4rem;  --s20:5rem;

	--r-sm:4px; --r:8px; --r-lg:14px; --r-xl:20px; --r-full:9999px;

	--sh-xs: 0 1px 2px rgba(0,0,0,.06);
	--sh-sm: 0 1px 4px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
	--sh-md: 0 4px 16px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.05);
	--sh-lg: 0 12px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
	--sh-acc: 0 4px 20px rgba(var(--accent-rgb),.25);

	--t-f: 120ms ease;
	--t:   200ms ease;
	--t-s: 350ms ease;
}

/* ============================================================
   DARK MODE TOKENS
   ============================================================ */
[data-theme="dark"] {
	--bg:      #0d1117;
	--bg-2:    #161b22;
	--bg-3:    #1c2330;
	--bg-card: #161b22;

	--text:   #e6edf3;
	--text-2: #8b949e;
	--text-3: #6e7681;

	--border:   #21262d;
	--border-2: #30363d;

	--accent-light: rgba(0,87,255,.15);
	--blue-bg:     rgba(0,87,255,.12);
	--blue-border: rgba(0,87,255,.30);
	--green-bg:    rgba(15,155,88,.12);
	--green-border:rgba(15,155,88,.30);

	--sh-xs: 0 1px 2px rgba(0,0,0,.4);
	--sh-sm: 0 1px 4px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
	--sh-md: 0 4px 16px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.35);
	--sh-lg: 0 12px 40px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.45);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	font-family:var(--font);font-size:1rem;line-height:1.7;
	background:var(--bg);color:var(--text);
	-webkit-font-smoothing:antialiased;
	transition:background var(--t-s),color var(--t-s);
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{cursor:pointer;font-family:inherit}
ul,ol{list-style:none}
input,textarea{font-family:inherit}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link{
	position:absolute;top:-120%;left:1rem;
	background:var(--accent);color:#fff;
	padding:.5rem 1rem;border-radius:var(--r);
	font-size:.875rem;font-weight:600;
	z-index:9999;text-decoration:none;
}
.skip-link:focus{top:1rem}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress{
	position:fixed;top:0;left:0;right:0;
	height:3px;z-index:9998;pointer-events:none;
}
.reading-progress__fill{
	height:100%;width:0%;
	background:linear-gradient(90deg,var(--accent),#6c8fff);
	transition:width 80ms linear;
}
body:not(.single) .reading-progress{display:none}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap         {max-width:var(--container);margin:0 auto;padding:0 var(--s6)}
.wrap--content{max-width:var(--content);  margin:0 auto;padding:0 var(--s6)}
.wrap--wide   {max-width:var(--content-w);margin:0 auto;padding:0 var(--s6)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
	background:var(--bg);
	border-bottom:1px solid var(--border);
	z-index:200;position:relative;
	transition:background var(--t-s),border-color var(--t-s);
}
.site-header.is-sticky{
	position:sticky;top:0;
	backdrop-filter:blur(16px) saturate(180%);
	-webkit-backdrop-filter:blur(16px) saturate(180%);
	background:rgba(255,255,255,.88);
}
[data-theme="dark"] .site-header.is-sticky{background:rgba(13,17,23,.88)}

.site-header__inner{
	display:flex;align-items:center;
	gap:var(--s4);height:var(--header-h);
}

/* Brand */
.site-branding{flex-shrink:0}
.site-title{font-size:1.0625rem;font-weight:800;letter-spacing:-.025em;line-height:1}
.site-title a{text-decoration:none;color:var(--text)}
.site-title a:hover{color:var(--accent)}
.site-tagline{font-size:.6875rem;color:var(--text-3);margin-top:2px}

/* ============================================================
   PRIMARY NAV + DROPDOWNS
   ============================================================ */
.header-nav{display:flex;align-items:center;gap:var(--s2);flex:1;justify-content:flex-end}
.nav-primary{display:flex;align-items:center}
.nav-primary > ul{display:flex;align-items:center;gap:0}
.nav-primary > ul > li{position:relative}

/* Top-level */
.nav-primary > ul > li > a{
	display:flex;align-items:center;gap:var(--s1);
	padding:var(--s2) var(--s3);
	font-size:.875rem;font-weight:500;
	color:var(--text-2);text-decoration:none;
	border-radius:var(--r-sm);
	transition:color var(--t),background var(--t);
	white-space:nowrap;
}
.nav-primary > ul > li > a:hover,
.nav-primary > ul > li.current-menu-item > a,
.nav-primary > ul > li.current-menu-ancestor > a{
	color:var(--accent);background:var(--accent-light);
}

/* Caret */
.nav-primary .menu-item-has-children > a::after{
	content:'';display:inline-block;
	width:0;height:0;
	border-left:4px solid transparent;border-right:4px solid transparent;
	border-top:5px solid currentColor;
	margin-left:var(--s1);opacity:.6;
	transition:transform var(--t);
}
.nav-primary .menu-item-has-children:hover > a::after,
.nav-primary .menu-item-has-children:focus-within > a::after{transform:rotate(180deg)}

/* Dropdown */
.nav-primary .sub-menu{
	position:absolute;top:calc(100% + 8px);left:0;
	min-width:220px;
	background:var(--bg-card);
	border:1px solid var(--border);
	border-radius:var(--r-lg);
	box-shadow:var(--sh-lg);
	padding:var(--s2);
	opacity:0;visibility:hidden;pointer-events:none;
	transform:translateY(-6px);
	transition:opacity var(--t),transform var(--t),visibility var(--t);
	z-index:300;
}
.nav-primary .menu-item-has-children:hover .sub-menu,
.nav-primary .menu-item-has-children:focus-within .sub-menu{
	opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
.nav-primary .sub-menu li a{
	display:flex;align-items:center;gap:var(--s3);
	padding:var(--s2) var(--s3);
	font-size:.875rem;color:var(--text-2);
	text-decoration:none;border-radius:var(--r-sm);
	transition:background var(--t),color var(--t);
}
.nav-primary .sub-menu li a:hover{background:var(--accent-light);color:var(--accent)}

/* Mega menu — add class "has-mega" to li in WordPress */
.nav-primary .has-mega .sub-menu{
	min-width:500px;
	display:grid;grid-template-columns:1fr 1fr;
	left:50%;transform:translateX(-50%) translateY(-6px);
	gap:0;
}
.nav-primary .has-mega:hover .sub-menu,
.nav-primary .has-mega:focus-within .sub-menu{
	opacity:1;visibility:visible;pointer-events:auto;
	transform:translateX(-50%) translateY(0);
}
.nav-primary .mega-col{padding:var(--s5);border-right:1px solid var(--border)}
.nav-primary .mega-col:last-child{border-right:none}
.nav-primary .mega-col__label{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.08em;
	color:var(--text-3);margin-bottom:var(--s3);
	padding:0 var(--s3);
}
.nav-primary .mega-col ul{display:flex;flex-direction:column}
.nav-primary .mega-col li a{
	border-radius:var(--r-sm);
	padding:var(--s2) var(--s3);
	font-size:.875rem;color:var(--text-2);
	text-decoration:none;
	display:block;
	transition:background var(--t),color var(--t);
}
.nav-primary .mega-col li a:hover{background:var(--accent-light);color:var(--accent)}

/* ============================================================
   HEADER ACTIONS
   ============================================================ */
.header-actions{display:flex;align-items:center;gap:var(--s1);margin-left:var(--s3)}

.icon-btn{
	display:flex;align-items:center;justify-content:center;
	width:36px;height:36px;
	background:none;border:none;
	border-radius:var(--r-sm);color:var(--text-2);
	transition:background var(--t),color var(--t);
}
.icon-btn:hover{background:var(--bg-3);color:var(--accent)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Dark toggle */
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* Mobile toggle */
.menu-toggle{
	display:none;flex-direction:column;gap:5px;
	background:none;border:none;
	padding:var(--s2);border-radius:var(--r-sm);
	color:var(--text);
}
.menu-toggle span{
	display:block;width:22px;height:2px;
	background:currentColor;border-radius:2px;
	transition:transform var(--t),opacity var(--t);
	transform-origin:center;
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media(max-width:900px){
	.menu-toggle{display:flex}
	.nav-primary{display:none;position:absolute;top:var(--header-h);left:0;right:0;
		background:var(--bg-card);border-bottom:1px solid var(--border);
		padding:var(--s4) var(--s6);box-shadow:var(--sh-lg);z-index:199}
	.nav-primary.is-open{display:block}
	.nav-primary > ul{flex-direction:column;gap:0}
	.nav-primary > ul > li > a{padding:var(--s3) var(--s2)}
	.nav-primary .sub-menu,
	.nav-primary .has-mega .sub-menu{
		position:static;opacity:1;visibility:visible;pointer-events:auto;
		transform:none;box-shadow:none;border:none;border-radius:0;
		background:var(--bg-3);margin:var(--s1) 0 var(--s3) var(--s4);
		display:none;min-width:0;grid-template-columns:1fr;padding:var(--s2);
	}
	.nav-primary .menu-item-has-children.is-open .sub-menu,
	.nav-primary .has-mega.is-open .sub-menu{display:block}
	.nav-primary .mega-col{padding:var(--s3);border:none}
	.nav-primary .mega-col ul{display:block}
}

/* ============================================================
   HEADER SEARCH
   ============================================================ */
.header-search{
	display:none;position:absolute;
	top:var(--header-h);left:0;right:0;
	background:var(--bg-card);border-bottom:1px solid var(--border);
	padding:var(--s5) 0;box-shadow:var(--sh-md);z-index:198;
}
.header-search.is-open{display:block}
.header-search__form{
	display:flex;gap:var(--s2);
	max-width:600px;margin:0 auto;padding:0 var(--s6);
}
.header-search__input{
	flex:1;padding:.75rem var(--s5);
	border:2px solid var(--border);border-radius:var(--r-full);
	font-size:1rem;background:var(--bg);color:var(--text);
	transition:border-color var(--t);
}
.header-search__input:focus{outline:none;border-color:var(--accent)}
.header-search__submit{
	padding:.75rem var(--s6);background:var(--accent);color:#fff;
	border:none;border-radius:var(--r-full);
	font-size:.9375rem;font-weight:700;
	transition:background var(--t);
}
.header-search__submit:hover{background:var(--accent-dark)}

/* ============================================================
   HERO
   ============================================================ */
.site-hero{
	background:var(--bg-2);border-bottom:1px solid var(--border);
	padding:var(--s20) 0 var(--s16);
	position:relative;overflow:hidden;
}
.site-hero::before{
	content:'';position:absolute;inset:0;
	background-image:
		linear-gradient(var(--border) 1px,transparent 1px),
		linear-gradient(90deg,var(--border) 1px,transparent 1px);
	background-size:40px 40px;opacity:.4;
}
.site-hero::after{
	content:'';position:absolute;inset:0;
	background:radial-gradient(ellipse 70% 60% at 50% 0%,var(--bg) 0%,transparent 100%);
}
.site-hero__inner{
	position:relative;z-index:1;
	text-align:center;max-width:780px;
	margin:0 auto;padding:0 var(--s6);
}
.site-hero__eyebrow{
	display:inline-flex;align-items:center;gap:var(--s2);
	font-size:.75rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--accent);margin-bottom:var(--s5);
	background:var(--accent-light);
	padding:var(--s1) var(--s4);border-radius:var(--r-full);
}
.site-hero__title{
	font-size:clamp(2rem,5vw,3.375rem);
	font-weight:900;letter-spacing:-.045em;
	line-height:1.1;color:var(--text);
	margin-bottom:var(--s5);
}
.site-hero__title em{font-style:normal;color:var(--accent)}
.site-hero__subtitle{
	font-size:clamp(1rem,2vw,1.1875rem);
	color:var(--text-2);max-width:560px;
	margin:0 auto var(--s8);line-height:1.65;
}
.site-hero__ctas{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
	display:inline-flex;align-items:center;gap:var(--s2);
	padding:.625rem 1.375rem;
	font-size:.9375rem;font-weight:700;
	border-radius:var(--r-full);
	text-decoration:none;border:2px solid transparent;
	transition:all var(--t);line-height:1.4;white-space:nowrap;
}
.btn--primary{
	background:var(--accent);color:#fff;border-color:var(--accent);
	box-shadow:var(--sh-acc);
}
.btn--primary:hover{
	background:var(--accent-dark);border-color:var(--accent-dark);
	transform:translateY(-1px);
	box-shadow:0 6px 24px rgba(var(--accent-rgb),.35);
}
.btn--outline{
	background:transparent;color:var(--text);border-color:var(--border-2);
}
.btn--outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.btn--sm{padding:.4rem 1rem;font-size:.875rem}
.btn--ghost{background:transparent;color:var(--accent);border-color:transparent;padding-left:0}
.btn--ghost:hover{text-decoration:underline}

/* ============================================================
   SPLIT CARDS (HOMEPAGE)
   ============================================================ */
.split-section{padding:var(--s16) 0}
.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:640px){.split-cards{grid-template-columns:1fr}}

.split-card{
	display:block;text-decoration:none;color:inherit;
	background:var(--bg-card);border:1px solid var(--border);
	border-radius:var(--r-xl);padding:var(--s8);
	transition:box-shadow var(--t),transform var(--t),border-color var(--t);
	position:relative;overflow:hidden;
}
.split-card::before{
	content:'';position:absolute;top:0;left:0;right:0;
	height:3px;background:var(--accent);
	transform:scaleX(0);transform-origin:left;
	transition:transform var(--t-s);
}
.split-card:hover{box-shadow:var(--sh-lg);transform:translateY(-3px);border-color:var(--border-2)}
.split-card:hover::before{transform:scaleX(1)}
.split-card__icon{
	width:48px;height:48px;background:var(--accent-light);
	border-radius:var(--r-lg);display:flex;align-items:center;
	justify-content:center;font-size:1.375rem;margin-bottom:var(--s5);
}
.split-card__tag{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--accent);margin-bottom:var(--s3);
}
.split-card__title{
	font-size:1.375rem;font-weight:800;
	letter-spacing:-.025em;line-height:1.2;
	color:var(--text);margin-bottom:var(--s3);
}
.split-card__desc{
	font-size:.9375rem;color:var(--text-2);
	line-height:1.65;margin-bottom:var(--s6);
}
.split-card__pills{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.pill{
	font-size:.75rem;font-weight:600;
	padding:var(--s1) var(--s3);
	background:var(--bg-3);color:var(--text-2);
	border-radius:var(--r-full);
}
.split-card__cta{
	display:inline-flex;align-items:center;gap:var(--s2);
	font-size:.875rem;font-weight:700;color:var(--accent);text-decoration:none;
}
.split-card__cta::after{content:'→';transition:transform var(--t)}
.split-card:hover .split-card__cta::after{transform:translateX(4px)}

/* ============================================================
   POSTS SECTION
   ============================================================ */
.posts-section{padding:var(--s16) 0;border-top:1px solid var(--border)}
.section-header{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s8);
}
.section-label{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--accent);margin-bottom:var(--s2);
}
.section-title{font-size:1.25rem;font-weight:800;letter-spacing:-.025em}
.section-link{font-size:.875rem;font-weight:700;color:var(--accent);text-decoration:none}
.section-link:hover{text-decoration:underline}

/* ============================================================
   POST CARD
   ============================================================ */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s5)}

.post-card{
	background:var(--bg-card);border:1px solid var(--border);
	border-radius:var(--r-lg);overflow:hidden;
	display:flex;flex-direction:column;
	transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.post-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--border-2)}
.post-card__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-3);flex-shrink:0}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card__thumb img{transform:scale(1.04)}
.post-card__body{padding:var(--s5);flex:1;display:flex;flex-direction:column}
.post-card__cat{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--accent);text-decoration:none;margin-bottom:var(--s3);
}
.post-card__title{
	font-size:1.0625rem;font-weight:700;
	letter-spacing:-.015em;line-height:1.35;
	margin-bottom:var(--s3);flex:1;
}
.post-card__title a{color:var(--text);text-decoration:none}
.post-card__title a:hover{color:var(--accent)}
.post-card__excerpt{font-size:.875rem;color:var(--text-2);line-height:1.6;margin-bottom:var(--s4)}
.post-card__meta{
	font-size:.75rem;color:var(--text-3);
	display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
}
.post-card__meta .sep{opacity:.3}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-band{
	background:var(--bg-2);
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	padding:var(--s12) 0;
}
.newsletter-band__inner{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--s8);flex-wrap:wrap;
}
.newsletter-band__copy{max-width:380px}
.newsletter-band__title{
	font-size:1.375rem;font-weight:800;
	letter-spacing:-.025em;margin-bottom:var(--s2);
}
.newsletter-band__desc{font-size:.9375rem;color:var(--text-2);line-height:1.6}
.newsletter-form{
	display:flex;gap:var(--s2);
	flex:1;min-width:280px;max-width:440px;
}
.newsletter-form input[type="email"]{
	flex:1;padding:.75rem var(--s5);
	border:2px solid var(--border);border-radius:var(--r-full);
	font-size:.9375rem;background:var(--bg);color:var(--text);
	transition:border-color var(--t);
}
.newsletter-form input[type="email"]:focus{outline:none;border-color:var(--accent)}
@media(max-width:640px){
	.newsletter-band__inner{flex-direction:column}
	.newsletter-form{flex-direction:column;min-width:100%;max-width:100%}
}

/* ============================================================
   SINGLE POST HEADER
   ============================================================ */
.single-wrap{padding:var(--s10) 0 var(--s16)}
.post-header{margin-bottom:var(--s8)}
.post-header__badges{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.cat-badge{
	display:inline-flex;align-items:center;gap:var(--s1);
	padding:.3rem .75rem;
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.08em;
	border-radius:var(--r-full);text-decoration:none;
	background:var(--accent);color:#fff;
	transition:background var(--t);
}
.cat-badge:hover{background:var(--accent-dark)}
.cat-badge--pros{background:var(--green)}
.cat-badge--pros:hover{background:#0a7a46}

.post-header__title{
	font-size:clamp(1.75rem,4vw,2.875rem);
	font-weight:900;letter-spacing:-.045em;
	line-height:1.13;color:var(--text);margin-bottom:var(--s5);
}
.post-header__meta{
	display:flex;gap:var(--s4);align-items:center;
	font-size:.875rem;color:var(--text-3);flex-wrap:wrap;
}
.post-header__meta a{color:var(--text-3);text-decoration:none}
.post-header__meta a:hover{color:var(--accent)}
.post-header__meta .sep{opacity:.3}
.meta-pill{
	display:inline-flex;align-items:center;gap:var(--s1);
	padding:.2rem .625rem;
	background:var(--bg-3);border-radius:var(--r-full);
	font-size:.75rem;font-weight:600;color:var(--text-2);
}
.post-hero-image{
	width:100%;height:auto;border-radius:var(--r-xl);
	margin-bottom:var(--s8);box-shadow:var(--sh-md);
}

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.post-toc{
	background:var(--bg-2);
	border:1px solid var(--border);
	border-left:3px solid var(--accent);
	border-radius:0 var(--r-lg) var(--r-lg) 0;
	padding:var(--s5) var(--s6);
	margin-bottom:var(--s8);
}
.post-toc__title{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--text-3);margin-bottom:var(--s4);
}
.post-toc ol{counter-reset:toc;padding:0}
.post-toc > ol > li{
	counter-increment:toc;
	display:flex;gap:var(--s3);align-items:baseline;
	margin-bottom:var(--s2);
}
.post-toc > ol > li::before{
	content:counter(toc);
	font-size:.75rem;font-weight:700;color:var(--accent);
	min-width:1.25rem;text-align:center;
	background:var(--accent-light);border-radius:var(--r-sm);
	padding:1px 5px;
}
.post-toc a{
	font-size:.9rem;color:var(--text-2);
	text-decoration:none;line-height:1.4;
	transition:color var(--t);
}
.post-toc a:hover{color:var(--accent)}

/* ============================================================
   POST CONTENT TYPOGRAPHY
   ============================================================ */
.post-content{font-size:1.0625rem;line-height:1.82;color:var(--text)}
.post-content > *+*{margin-top:1.5em}
.post-content > *+h2{margin-top:2.5em}
.post-content > *+h3{margin-top:2em}

.post-content h2{
	font-size:1.5625rem;font-weight:800;
	letter-spacing:-.03em;line-height:1.2;
	padding-bottom:var(--s3);
	border-bottom:1px solid var(--border);
}
.post-content h3{
	font-size:1.1875rem;font-weight:700;
	letter-spacing:-.02em;line-height:1.3;
}
.post-content h4{font-size:1rem;font-weight:700}

.post-content p{margin:0}
.post-content a{
	color:var(--accent);
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-thickness:1px;
}
.post-content a:hover{color:var(--accent-dark);text-decoration-thickness:2px}
.post-content strong{font-weight:700;color:var(--text)}

.post-content ul{list-style:none;padding-left:0}
.post-content ul li{position:relative;padding-left:var(--s6)}
.post-content ul li::before{
	content:'';position:absolute;left:var(--s2);top:.65em;
	width:6px;height:6px;
	border-radius:50%;background:var(--accent);
}
.post-content ol{list-style:decimal;padding-left:var(--s6)}
.post-content ol li{padding-left:var(--s2)}
.post-content li+li{margin-top:var(--s2)}

.post-content blockquote{
	border-left:4px solid var(--accent);
	padding:var(--s5) var(--s6);
	background:var(--bg-2);
	border-radius:0 var(--r-lg) var(--r-lg) 0;
	font-size:1.125rem;font-style:italic;color:var(--text-2);
}
.post-content blockquote p{margin:0}

.post-content code{
	font-family:var(--mono);font-size:.875em;
	background:var(--bg-3);color:var(--text);
	padding:.15em .4em;border-radius:var(--r-sm);
	border:1px solid var(--border);
}
.post-content pre{
	background:#0d1117;
	border-radius:var(--r-lg);overflow-x:auto;
	padding:var(--s6);box-shadow:var(--sh-md);
}
[data-theme="dark"] .post-content pre{background:#010409;border:1px solid var(--border)}
.post-content pre code{
	background:none;border:none;padding:0;
	font-size:.875rem;color:#e6edf3;line-height:1.65;
}
.post-content img{max-width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.post-content figcaption{
	text-align:center;font-size:.8125rem;
	color:var(--text-3);margin-top:var(--s2);font-style:italic;
}
.post-content table{
	width:100%;border-collapse:collapse;
	font-size:.9375rem;
	overflow:hidden;
	box-shadow:0 0 0 1px var(--border);
	border-radius:var(--r-lg);
}
.post-content th,.post-content td{
	padding:var(--s3) var(--s5);
	border-bottom:1px solid var(--border);text-align:left;
}
.post-content th{background:var(--bg-2);font-weight:700;font-size:.875rem;color:var(--text-2)}
.post-content tr:last-child td{border-bottom:none}
.post-content tr:nth-child(even) td{background:var(--bg-2)}
.post-content hr{border:none;border-top:1px solid var(--border);margin:var(--s10) 0}

/* ============================================================
   CONVERSION BOXES
   ============================================================ */
.conv-box{
	border-radius:var(--r-xl);padding:var(--s6) var(--s6);
	margin:var(--s10) 0;
	display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap;
}
.conv-box--tool{background:var(--blue-bg);border:1px solid var(--blue-border)}
.conv-box--pro{background:var(--green-bg);border:1px solid var(--green-border)}
.conv-box__icon{font-size:2rem;flex-shrink:0}
.conv-box__body{flex:1;min-width:200px}
.conv-box__title{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;margin-bottom:var(--s1)}
.conv-box__desc{font-size:.9rem;color:var(--text-2);margin-bottom:var(--s4);line-height:1.55}

/* ============================================================
   POST SERIES
   ============================================================ */
.post-series{
	background:var(--bg-2);border:1px solid var(--border);
	border-radius:var(--r-xl);padding:var(--s6);margin-bottom:var(--s8);
}
.post-series__header{
	display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);
}
.series-badge{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	background:var(--accent);color:#fff;
	padding:var(--s1) var(--s3);border-radius:var(--r-full);
	white-space:nowrap;
}
.post-series__name{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.post-series__list{display:flex;flex-direction:column;gap:var(--s2)}
.series-item{
	display:flex;align-items:center;gap:var(--s3);
	padding:var(--s3) var(--s4);border-radius:var(--r);
	transition:background var(--t);
}
.series-item:hover{background:var(--bg-3)}
.series-item.is-current{background:var(--accent-light);font-weight:700}
.series-item a{text-decoration:none;color:var(--text-2);flex:1;font-size:.9rem}
.series-item a:hover{color:var(--accent)}
.series-item.is-current a{color:var(--accent);pointer-events:none}
.series-num{
	width:22px;height:22px;border-radius:50%;
	background:var(--bg-3);color:var(--text-3);
	font-size:.75rem;font-weight:700;
	display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.series-item.is-current .series-num{background:var(--accent);color:#fff}

/* ============================================================
   RELATED POSTS
   ============================================================ */
.related-posts{
	margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--border);
}
.related-posts__label{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--text-3);margin-bottom:var(--s6);
}
.related-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
}
@media(max-width:700px){.related-grid{grid-template-columns:1fr}}
.related-item{display:flex;flex-direction:column;gap:var(--s2)}
.related-item__cat{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;color:var(--accent);text-decoration:none;
}
.related-item__title{font-size:.9375rem;font-weight:700;line-height:1.4}
.related-item__title a{color:var(--text);text-decoration:none}
.related-item__title a:hover{color:var(--accent)}
.related-item__meta{font-size:.75rem;color:var(--text-3)}

/* ============================================================
   POST NAV
   ============================================================ */
.post-nav{
	display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);
	margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--border);
}
@media(max-width:480px){.post-nav{grid-template-columns:1fr}}
.post-nav__prev,.post-nav__next{display:flex;flex-direction:column;gap:var(--s1)}
.post-nav__next{text-align:right;align-items:flex-end}
.post-nav__dir{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);
}
.post-nav__title{font-size:.9375rem;font-weight:700;line-height:1.4}
.post-nav__title a{color:var(--text);text-decoration:none}
.post-nav__title a:hover{color:var(--accent)}

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-wrap{padding:var(--s10) 0 var(--s16)}
.archive-head{padding-bottom:var(--s8);border-bottom:1px solid var(--border);margin-bottom:var(--s8)}
.archive-head__type{
	font-size:.6875rem;font-weight:700;text-transform:uppercase;
	letter-spacing:.1em;color:var(--accent);margin-bottom:var(--s3);
}
.archive-head__title{
	font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;
	letter-spacing:-.035em;
}
.archive-head__desc{color:var(--text-2);margin-top:var(--s3);max-width:560px;line-height:1.65}

.archive-list{display:flex;flex-direction:column}
.archive-item{
	display:grid;grid-template-columns:130px 1fr;gap:var(--s6);
	padding:var(--s6) 0;border-bottom:1px solid var(--border);
}
@media(max-width:520px){.archive-item{grid-template-columns:1fr}}
.archive-thumb{
	width:130px;height:88px;flex-shrink:0;
	border-radius:var(--r);overflow:hidden;background:var(--bg-3);
}
.archive-thumb img{width:100%;height:100%;object-fit:cover}
.archive-item__cat{
	font-size:.6875rem;font-weight:700;text-transform:uppercase;
	letter-spacing:.1em;color:var(--accent);text-decoration:none;
	margin-bottom:var(--s2);display:block;
}
.archive-item__title{
	font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;
	line-height:1.35;margin-bottom:var(--s2);
}
.archive-item__title a{color:var(--text);text-decoration:none}
.archive-item__title a:hover{color:var(--accent)}
.archive-item__excerpt{font-size:.875rem;color:var(--text-2);line-height:1.6;margin-bottom:var(--s3)}
.archive-item__meta{font-size:.75rem;color:var(--text-3)}

/* ============================================================
   SEARCH / PAGE / 404
   ============================================================ */
.search-wrap,.page-wrap{padding:var(--s10) 0 var(--s16)}
.search-hero{
	background:var(--bg-2);border:1px solid var(--border);
	border-radius:var(--r-xl);padding:var(--s8);margin-bottom:var(--s10);
}
.search-hero__title{font-size:1.25rem;font-weight:800;letter-spacing:-.025em;margin-bottom:var(--s5)}
.search-hero__form{display:flex;gap:var(--s2)}
.search-hero__input{
	flex:1;padding:.75rem var(--s5);
	border:2px solid var(--border);border-radius:var(--r-full);
	font-size:1rem;background:var(--bg);color:var(--text);
	transition:border-color var(--t);
}
.search-hero__input:focus{outline:none;border-color:var(--accent)}
.search-hero__btn{
	padding:.75rem var(--s6);background:var(--accent);color:#fff;
	border:none;border-radius:var(--r-full);
	font-size:.9375rem;font-weight:700;transition:background var(--t);
}
.search-hero__btn:hover{background:var(--accent-dark)}

.page-404{text-align:center;padding:var(--s20) 0}
.page-404__num{
	font-size:7rem;font-weight:900;letter-spacing:-.05em;
	color:var(--border);line-height:1;margin-bottom:var(--s4);
}
.page-404__title{font-size:1.5rem;font-weight:800;letter-spacing:-.025em;margin-bottom:var(--s4)}
.page-404__desc{color:var(--text-2);margin-bottom:var(--s8)}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{
	display:flex;gap:var(--s1);justify-content:center;
	margin-top:var(--s10);flex-wrap:wrap;
}
.pagination a,.pagination span{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:2.25rem;height:2.25rem;padding:0 var(--s2);
	border:1px solid var(--border);border-radius:var(--r);
	font-size:.875rem;text-decoration:none;color:var(--text-2);
	transition:background var(--t),color var(--t),border-color var(--t);
}
.pagination a:hover,.pagination .current{
	background:var(--accent);color:#fff;border-color:var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
	background:var(--bg-2);border-top:1px solid var(--border);
	padding:var(--s12) 0 var(--s8);margin-top:var(--s16);
}
.footer-grid{
	display:grid;
	grid-template-columns:1.5fr repeat(3,1fr);
	gap:var(--s8);margin-bottom:var(--s10);
}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}

.footer-brand__name{font-size:1.0625rem;font-weight:800;letter-spacing:-.025em;margin-bottom:var(--s2)}
.footer-brand__desc{font-size:.875rem;color:var(--text-3);line-height:1.65;margin-bottom:var(--s4)}
.footer-col__title{
	font-size:.6875rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--text-3);margin-bottom:var(--s4);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--s2)}
.footer-col a{
	font-size:.875rem;color:var(--text-2);
	text-decoration:none;transition:color var(--t);
}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
	padding-top:var(--s5);border-top:1px solid var(--border);
	display:flex;align-items:center;justify-content:space-between;
	flex-wrap:wrap;gap:var(--s3);
}
.footer-bottom__copy{font-size:.8125rem;color:var(--text-3)}
.footer-bottom__copy .heart{color:#ef4444}
.footer-bottom__copy a{color:var(--text-2);text-decoration:none;font-weight:600}
.footer-bottom__copy a:hover{color:var(--accent)}
.footer-bottom__links{display:flex;gap:var(--s5)}
.footer-bottom__links a{font-size:.8125rem;color:var(--text-3);text-decoration:none}
.footer-bottom__links a:hover{color:var(--text)}

/* ============================================================
   AD ZONES
   ============================================================ */
.ad-zone{min-height:1px}

/* ============================================================
   FOCUS
   ============================================================ */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ============================================================
   RTL
   ============================================================ */
[dir="rtl"] .site-header__inner,[dir="rtl"] .header-nav{flex-direction:row-reverse}
[dir="rtl"] .post-toc{border-left:none;border-right:3px solid var(--accent);border-radius:var(--r-lg) 0 0 var(--r-lg)}
[dir="rtl"] .post-content ul li{padding-left:0;padding-right:var(--s6)}
[dir="rtl"] .post-content ul li::before{left:auto;right:var(--s2)}
[dir="rtl"] .post-content blockquote{border-left:none;border-right:4px solid var(--accent);border-radius:var(--r-lg) 0 0 var(--r-lg)}
[dir="rtl"] .split-card::before{transform-origin:right}
[dir="rtl"] .nav-primary .sub-menu{left:auto;right:0}
[dir="rtl"] .split-card__cta::after{content:'←'}

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
	.site-header,.site-footer,.reading-progress,.conv-box,.related-posts,.post-nav,.comments-area{display:none!important}
	.post-content{font-size:11pt;line-height:1.6}
}