:root {
	--sh-navy: #050b1f;
	--sh-navy-2: #0b1235;
	--sh-purple: #7c3aed;
	--sh-blue: #2563eb;
	--sh-cyan: #06b6d4;
	--sh-text: #0f172a;
	--sh-muted: #64748b;
	--sh-border: #e2e8f0;
	--sh-surface: #ffffff;
	--sh-bg: #f8fafc;
	--sh-radius: 14px;
	--sh-container: 1180px;
}

.sh-site {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--sh-text);
	background: var(--sh-bg);
	line-height: 1.6;
}

.sh-site *, .sh-site *::before, .sh-site *::after { box-sizing: border-box; }
.sh-site a { text-decoration: none; }
.sh-container { width: min(calc(100% - 40px), var(--sh-container)); margin: 0 auto; }

/* Header */
.sh-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(5, 11, 31, .96);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.sh-header.is-scrolled { box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.sh-header-inner { min-height:74px; display:flex; align-items:center; gap:18px; }
.sh-brand { display:flex; align-items:center; gap:10px; color:#fff; min-width:max-content; }
.sh-brand-mark {
	width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
	background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	font-weight:900; font-size:20px;
	box-shadow: 0 8px 25px rgba(59,130,246,.25);
}
.sh-brand-text { display:flex; flex-direction:column; line-height:1.05; }
.sh-brand-text strong { font-size:18px; letter-spacing:-.02em; }
.sh-brand-text small { color:#94a3b8; font-size:9px; margin-top:5px; letter-spacing:.02em; }
.sh-nav { display:flex; align-items:center; gap:2px; margin-left:auto; flex:0 1 auto; }
.sh-nav a { color:#cbd5e1; padding:10px 10px; border-radius:8px; font-size:14px; font-weight:600; }
.sh-nav a:hover { color:#fff; background:rgba(255,255,255,.06); }
.sh-header-search { display:flex; width:190px; flex:0 0 190px; border:1px solid rgba(255,255,255,.13); border-radius:9px; overflow:hidden; background:rgba(255,255,255,.05); }
.sh-header-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; padding:10px 12px; font-size:13px; }
.sh-header-search input::placeholder { color:#64748b; }
.sh-header-search button { width:40px; border:0; background:transparent; color:#94a3b8; font-size:19px; cursor:pointer; }
.sh-menu-toggle { display:none; margin-left:auto; border:0; background:transparent; color:#fff; font-size:24px; }

/* Hero */
.sh-hero {
	position:relative; overflow:hidden; color:#fff;
	background:
		radial-gradient(circle at 78% 22%, rgba(124,58,237,.28), transparent 28%),
		radial-gradient(circle at 15% 85%, rgba(37,99,235,.2), transparent 30%),
		linear-gradient(135deg, #050b1f 0%, #0b1235 58%, #26105a 100%);
}
.sh-hero::before {
	content:""; position:absolute; inset:0; opacity:.25; pointer-events:none;
	background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
	background-size:24px 24px;
	mask-image: linear-gradient(to bottom, black, transparent);
}
.sh-hero-grid { min-height:600px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; position:relative; z-index:1; padding:80px 0; }
.sh-eyebrow, .sh-kicker { color:#60a5fa; font-size:11px; font-weight:800; letter-spacing:.16em; }
.sh-hero h1 { font-size:clamp(48px, 6vw, 76px); line-height:.98; letter-spacing:-.055em; margin:16px 0 24px; font-weight:850; }
.sh-hero h1 span { background:linear-gradient(90deg,#60a5fa,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sh-hero-copy > p { max-width:620px; color:#cbd5e1; font-size:18px; line-height:1.75; margin:0 0 28px; }
.sh-hero-search { display:flex; max-width:620px; padding:5px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); border-radius:12px; box-shadow:0 18px 55px rgba(0,0,0,.22); }
.sh-hero-search span { display:grid; place-items:center; width:48px; color:#94a3b8; font-size:22px; }
.sh-hero-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; font-size:15px; }
.sh-hero-search input::placeholder { color:#94a3b8; }
.sh-hero-search button { border:0; border-radius:8px; background:#2563eb; color:#fff; padding:0 20px; font-weight:800; cursor:pointer; }
.sh-popular { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; color:#94a3b8; font-size:12px; }
.sh-popular a { color:#cbd5e1; border:1px solid rgba(255,255,255,.1); padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.04); }
.sh-popular a:hover { color:#fff; border-color:rgba(96,165,250,.4); }

/* Code preview */
.sh-code-window { border:1px solid rgba(255,255,255,.13); background:#081022; border-radius:18px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.4); transform:rotate(.5deg); }
.sh-window-bar { height:48px; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.08); color:#64748b; font-size:12px; }
.sh-window-dots { display:flex; gap:6px; }
.sh-window-dots i { width:9px; height:9px; border-radius:50%; background:#334155; }
.sh-code-body { padding:22px 20px; font:14px/2 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color:#cbd5e1; min-height:315px; }
.sh-code-line { display:grid; grid-template-columns:30px 1fr; }
.sh-code-line em { color:#334155; font-style:normal; user-select:none; }
.sh-code-line b { color:#c084fc; }
.sh-code-line mark { color:#67e8f9; background:transparent; }
.sh-code-status { padding:10px 18px; border-top:1px solid rgba(255,255,255,.07); color:#64748b; font-size:11px; }
.sh-code-status span { display:inline-block; width:7px; height:7px; border-radius:50%; background:#22c55e; margin-right:7px; }

/* Sections */
.sh-section { padding:90px 0; background:#fff; }
.sh-soft-section { background:#f8fafc; }
.sh-section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
.sh-section-heading h2 { margin:5px 0 0; font-size:36px; line-height:1.1; letter-spacing:-.04em; }
.sh-section-heading > p { color:var(--sh-muted); margin:0; max-width:480px; }
.sh-view-all { color:var(--sh-blue); font-weight:800; font-size:14px; white-space:nowrap; }
.sh-category-section { padding-top:70px; }
.sh-category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.sh-category-card {
	display:block; padding:22px; border:1px solid var(--sh-border); border-radius:14px; background:#fff;
	box-shadow:0 8px 25px rgba(15,23,42,.04); color:var(--sh-text); transition:.2s;
}
.sh-category-card:hover { transform:translateY(-4px); border-color:#bfdbfe; box-shadow:0 16px 40px rgba(37,99,235,.1); }
.sh-cat-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:#eff6ff; color:#2563eb; font-size:21px; margin-bottom:16px; }
.sh-category-card strong { display:block; font-size:16px; }
.sh-category-card p { color:var(--sh-muted); font-size:13px; line-height:1.55; min-height:60px; margin:8px 0 12px; }
.sh-category-card b { color:var(--sh-blue); font-size:12px; }

/* Cards */
.sh-card-grid, .sh-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.sh-project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.sh-card { background:#fff; border:1px solid var(--sh-border); border-radius:14px; overflow:hidden; box-shadow:0 8px 30px rgba(15,23,42,.05); transition:.2s; }
.sh-card:hover { transform:translateY(-4px); box-shadow:0 18px 45px rgba(15,23,42,.1); border-color:#cbd5e1; }
.sh-card-image { display:block; aspect-ratio:16/9; background:#eef2ff; overflow:hidden; }
.sh-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.sh-card:hover .sh-card-image img { transform:scale(1.03); }
.sh-card-icon { display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; background:linear-gradient(135deg,#eef2ff,#f5f3ff); font-size:46px; }
.sh-card-body { padding:20px; }
.sh-card-body h3 { margin:0 0 8px; font-size:19px; line-height:1.25; }
.sh-card-body h3 a { color:var(--sh-text); }
.sh-card-body p { color:var(--sh-muted); margin:0 0 17px; line-height:1.6; font-size:14px; }
.sh-card-link { color:var(--sh-blue); font-weight:800; font-size:13px; }
.sh-badge { display:inline-block; margin-bottom:9px; padding:4px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:800; }

/* Resource panels */
.sh-resource-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.sh-resource-panel { background:#fff; border:1px solid var(--sh-border); border-radius:18px; padding:28px; }
.sh-resource-panel-head { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.sh-resource-panel-head > div { display:flex; align-items:center; gap:12px; }
.sh-resource-panel-head h3 { margin:0; font-size:24px; }
.sh-resource-panel-head a { color:var(--sh-blue); font-weight:800; font-size:13px; }
.sh-panel-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:#eef2ff; color:#4f46e5; }
.sh-resource-panel > p { color:var(--sh-muted); margin:12px 0 20px; }
.sh-resource-panel .sh-card-grid { grid-template-columns:1fr 1fr; gap:14px; }
.sh-resource-panel .sh-card-body { padding:16px; }
.sh-resource-panel .sh-card-body h3 { font-size:16px; }

/* Tutorials */
.sh-tutorial-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sh-tutorial-card { border:1px solid var(--sh-border); border-radius:14px; overflow:hidden; background:#fff; }
.sh-tutorial-image { display:block; aspect-ratio:16/9; background:#e2e8f0; overflow:hidden; }
.sh-tutorial-image img { width:100%; height:100%; object-fit:cover; display:block; }
.sh-tutorial-body { padding:18px; }
.sh-tutorial-body > span { color:var(--sh-blue); font-size:11px; font-weight:800; }
.sh-tutorial-body h3 { font-size:18px; line-height:1.3; margin:8px 0; }
.sh-tutorial-body h3 a { color:var(--sh-text); }
.sh-tutorial-body p { color:var(--sh-muted); font-size:13px; }
.sh-tutorial-body > a { color:var(--sh-blue); font-weight:800; font-size:13px; }

/* CTA/footer */
.sh-cta { padding:72px 0; color:#fff; background:linear-gradient(135deg,#0b1235,#26105a); }
.sh-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.sh-cta h2 { margin:6px 0 8px; font-size:40px; letter-spacing:-.04em; }
.sh-cta p { color:#cbd5e1; margin:0; max-width:620px; }
.sh-button { display:inline-flex; align-items:center; justify-content:center; padding:13px 19px; border-radius:9px; font-weight:800; }
.sh-button-light { background:#fff; color:#1d4ed8; white-space:nowrap; }
.sh-footer { background:#050b1f; color:#cbd5e1; padding:65px 0 20px; }
.sh-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; }
.sh-footer .sh-brand { margin-bottom:18px; }
.sh-footer-brand p { max-width:340px; color:#64748b; font-size:13px; line-height:1.7; }
.sh-footer h4 { color:#fff; margin:0 0 15px; font-size:13px; }
.sh-footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:9px; }
.sh-footer-grid > div:not(:first-child) a { color:#64748b; font-size:13px; }
.sh-footer-grid > div:not(:first-child) a:hover { color:#fff; }
.sh-footer-bottom { margin-top:55px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:20px; color:#475569; font-size:11px; }


/* Technology project archives */
.sh-taxonomy-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:35px; }
.sh-taxonomy-project-grid .sh-card { min-width:0; height:100%; }
.sh-pagination { display:flex; justify-content:center; gap:8px; margin-top:36px; }
.sh-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0 12px; border:1px solid var(--sh-border); border-radius:9px; background:#fff; color:var(--sh-text); font-weight:700; }
.sh-pagination .page-numbers.current { background:var(--sh-text); color:#fff; border-color:var(--sh-text); }
.sh-pagination .page-numbers:hover { border-color:#94a3b8; }

/* Empty */
.sh-empty { padding:28px; border:1px dashed var(--sh-border); border-radius:14px; background:#fff; color:var(--sh-muted); }
.sh-full { grid-column:1/-1; }

/* Responsive */
@media (max-width:1100px) {
	.sh-category-grid { grid-template-columns:repeat(3,1fr); }
	.sh-project-grid { grid-template-columns:repeat(2,1fr); }
	.sh-taxonomy-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.sh-tutorial-grid { grid-template-columns:repeat(2,1fr); }
	.sh-header-search { width:170px; }
	.sh-nav { gap:0; }
}
@media (max-width:900px) {
	.sh-menu-toggle { display:block; }
	.sh-nav { display:none; position:absolute; top:74px; left:20px; right:20px; padding:10px; flex-direction:column; align-items:stretch; background:#071025; border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
	.sh-nav.is-open { display:flex; }
	.sh-nav a { padding:12px; }
	.sh-header-search { display:none; }
	.sh-hero-grid { grid-template-columns:1fr; gap:40px; min-height:auto; padding:70px 0; }
	.sh-code-window { max-width:720px; width:100%; }
	.sh-card-grid { grid-template-columns:repeat(2,1fr); }
	.sh-footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
	.sh-container { width:min(calc(100% - 28px),var(--sh-container)); }
	.sh-brand-text small { display:none; }
	.sh-hero { min-height:auto; }
	.sh-hero-grid { padding:58px 0; }
	.sh-hero h1 { font-size:48px; }
	.sh-hero-copy > p { font-size:16px; }
	.sh-hero-search button { padding:0 13px; }
	.sh-popular { align-items:flex-start; }
	.sh-category-grid, .sh-card-grid, .sh-project-grid, .sh-tutorial-grid, .sh-resource-columns, .sh-taxonomy-project-grid { grid-template-columns:1fr; }
	.sh-section { padding:65px 0; }
	.sh-section-heading { display:block; }
	.sh-section-heading h2 { font-size:30px; }
	.sh-section-heading > p { margin-top:12px; }
	.sh-view-all { display:inline-block; margin-top:12px; }
	.sh-resource-panel .sh-card-grid { grid-template-columns:1fr; }
	.sh-cta-inner { display:block; }
	.sh-cta h2 { font-size:32px; }
	.sh-button { margin-top:24px; }
	.sh-footer-grid { grid-template-columns:1fr 1fr; gap:32px 20px; }
	.sh-footer-brand { grid-column:1/-1; }
	.sh-footer-bottom { display:block; }
	.sh-footer-bottom span { display:block; margin-top:6px; }
}

.sh-card-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sh-download-button {
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	padding:8px 11px; border-radius:8px; background:#0f172a; color:#fff;
	font-size:12px; font-weight:800; border:1px solid #0f172a; cursor:pointer;
}
.sh-download-button:hover { background:#1e293b; color:#fff; }
.sh-download-button.is-loading { opacity:.85; cursor:wait; }
.sh-download-spinner {
	display:none; width:12px; height:12px; border:2px solid rgba(255,255,255,.35);
	border-top-color:#fff; border-radius:50%; animation:sh-spin .7s linear infinite;
}
.sh-download-button.is-loading .sh-download-spinner { display:inline-block; }
@keyframes sh-spin { to { transform:rotate(360deg); } }

.sh-download-overlay {
	position:fixed; inset:0; z-index:99999; display:none; place-items:center;
	background:rgba(2,6,23,.72); backdrop-filter:blur(5px); padding:20px;
}
.sh-download-overlay.is-visible { display:grid; }
.sh-download-modal {
	width:min(420px,100%); padding:30px; border-radius:18px; background:#fff;
	text-align:center; box-shadow:0 30px 100px rgba(0,0,0,.35);
}
.sh-download-modal-spinner {
	width:44px; height:44px; margin:0 auto 18px; border:4px solid #e2e8f0;
	border-top-color:#2563eb; border-radius:50%; animation:sh-spin .8s linear infinite;
}
.sh-download-modal h3 { margin:0 0 8px; color:#0f172a; font-size:21px; }
.sh-download-modal p { margin:0; color:#64748b; font-size:14px; }
.sh-download-progress { height:6px; margin:20px 0 0; overflow:hidden; border-radius:999px; background:#e2e8f0; }
.sh-download-progress span { display:block; width:0; height:100%; background:#2563eb; transition:width .1s linear; }


/* Shared SkillHost page layout */
.sh-page-shell { min-height: 55vh; background: var(--sh-bg); padding: 65px 0 85px; }
.sh-content-wrap > h1 { margin: 7px 0 16px; font-size: clamp(36px, 5vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.sh-content-wrap > p { color: var(--sh-muted); max-width: 760px; }
.sh-content-list { max-width: 900px; margin-top: 35px; }
.sh-content-card { background:#fff; border:1px solid var(--sh-border); border-radius:16px; overflow:hidden; margin-bottom:24px; box-shadow:0 10px 35px rgba(15,23,42,.05); }
.sh-content-thumb img { display:block; width:100%; height:auto; }
.sh-content-card-body { padding:28px; }
.sh-content-meta { color:#94a3b8; font-size:12px; margin-bottom:12px; }
.sh-content-card h2 { margin:0 0 12px; font-size:28px; line-height:1.2; }
.sh-content-card h2 a { color:var(--sh-text); }
.sh-entry-content, .sh-entry-excerpt { color:#475569; line-height:1.8; }
.sh-entry-content img { max-width:100%; height:auto; }
.sh-entry-content h2, .sh-entry-content h3 { color:var(--sh-text); margin-top:30px; }
.sh-page-cta { display:inline-block; margin-top:20px; }
@media(max-width:700px){ .sh-page-shell{padding:42px 0 60px}.sh-content-card-body{padding:21px}.sh-content-card h2{font-size:23px} }


/* -------------------------------------------------------------------------
   SkillHost frontend isolation
   The plugin renders its own site chrome, so theme CSS must not restyle it.
   ------------------------------------------------------------------------- */
.sh-site,
.sh-site *,
.sh-site *::before,
.sh-site *::after {
	box-sizing: border-box;
}

.sh-site {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--sh-text);
	background: var(--sh-bg);
	line-height: 1.6;
	text-align: left;
}

.sh-site h1,
.sh-site h2,
.sh-site h3,
.sh-site h4,
.sh-site h5,
.sh-site h6,
.sh-site p,
.sh-site ul,
.sh-site ol {
	margin-top: 0;
}

.sh-site img {
	max-width: 100%;
	height: auto;
}

.sh-site button,
.sh-site input,
.sh-site textarea,
.sh-site select {
	font: inherit;
}

.sh-site button {
	cursor: pointer;
}

.sh-site a {
	color: inherit;
}

.sh-site main {
	display: block;
	width: 100%;
}

.sh-site .sh-container {
	width: min(calc(100% - 40px), var(--sh-container));
	max-width: var(--sh-container);
	margin-left: auto;
	margin-right: auto;
}

.sh-site .sh-header,
.sh-site .sh-footer {
	width: 100%;
}

.sh-site .sh-header {
	position: sticky;
	top: 0;
	z-index: 9999;
}

.sh-site .sh-footer {
	clear: both;
}

/* Protect the JSON editor from theme textarea/button rules. */
.sh-site .sh-json-workspace textarea {
	box-sizing: border-box;
	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
	line-height: 1.7;
}

.sh-site .sh-page-shell {
	width: 100%;
	min-height: 55vh;
	padding: 64px 0 90px;
	background: var(--sh-bg);
}
.sh-site .sh-content-wrap {
	max-width: 980px;
}
.sh-site .sh-content-wrap > h1 {
	margin: 8px 0 18px;
	font-size: clamp(34px,5vw,56px);
	line-height: 1.05;
	letter-spacing: -.04em;
}

/* v1.3.4: protect SkillHost header branding from theme link-color rules */
.sh-site .sh-header .sh-brand,
.sh-site .sh-header .sh-brand:link,
.sh-site .sh-header .sh-brand:visited,
.sh-site .sh-header .sh-brand:hover,
.sh-site .sh-header .sh-brand:focus,
.sh-site .sh-header .sh-brand:active {
	color: #ffffff !important;
	text-decoration: none !important;
}

.sh-site .sh-header .sh-brand strong,
.sh-site .sh-header .sh-brand span,
.sh-site .sh-header .sh-brand * {
	color: inherit !important;
	text-decoration: none !important;
}

/* v1.3.5: explicit CTA button colors after the global SkillHost link reset */
.sh-site a.sh-button,
.sh-site a.sh-button:link,
.sh-site a.sh-button:visited,
.sh-site a.sh-button:hover,
.sh-site a.sh-button:focus,
.sh-site a.sh-button:active {
	text-decoration: none !important;
}

.sh-site a.sh-button.sh-button-light,
.sh-site a.sh-button.sh-button-light:link,
.sh-site a.sh-button.sh-button-light:visited {
	background: #ffffff !important;
	color: #1d4ed8 !important;
}

.sh-site a.sh-button.sh-button-light:hover,
.sh-site a.sh-button.sh-button-light:focus {
	background: #eff6ff !important;
	color: #1d4ed8 !important;
}

/* Keep the header brand white after global link inheritance. */
.sh-site .sh-header a.sh-brand,
.sh-site .sh-header a.sh-brand:link,
.sh-site .sh-header a.sh-brand:visited,
.sh-site .sh-header a.sh-brand:hover,
.sh-site .sh-header a.sh-brand:focus {
	color: #ffffff !important;
}

/* v1.3.9: protect header navigation text from WordPress theme link colors */
.sh-site .sh-header .sh-nav a,
.sh-site .sh-header .sh-nav a:link,
.sh-site .sh-header .sh-nav a:visited {
	color: #cbd5e1 !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.sh-site .sh-header .sh-nav a:hover,
.sh-site .sh-header .sh-nav a:focus,
.sh-site .sh-header .sh-nav a:active {
	color: #ffffff !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Search input/button in the header should also remain visible */
.sh-site .sh-header .sh-header-search input,
.sh-site .sh-header .sh-header-search input:focus {
	color: #0f172a !important;
	background: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.sh-site .sh-header .sh-header-search button,
.sh-site .sh-header .sh-header-search button:hover,
.sh-site .sh-header .sh-header-search button:focus {
	color: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* v1.4.0: universal WordPress page styling */
.sh-site .sh-wp-page {
	max-width: 980px;
}
.sh-site .sh-page-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	color: #64748b;
	font-size: 12px;
}
.sh-site .sh-page-breadcrumb a {
	color: #2563eb !important;
	text-decoration: none !important;
}
.sh-site .sh-wp-page > h1 {
	margin: 0 0 28px;
	font-size: clamp(36px, 6vw, 58px);
	line-height: 1.05;
	letter-spacing: -.04em;
	color: #0f172a !important;
}
.sh-site .sh-page-featured-image {
	margin: 0 0 30px;
	border-radius: 16px;
	overflow: hidden;
}
.sh-site .sh-page-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}
.sh-site .sh-wp-page-content {
	padding: 34px;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 16px;
	box-shadow: 0 14px 45px rgba(15,23,42,.06);
}
.sh-site .sh-wp-page-content > *:first-child {
	margin-top: 0 !important;
}
.sh-site .sh-wp-page-content > *:last-child {
	margin-bottom: 0 !important;
}
.sh-site .sh-wp-page-content h2 {
	margin: 30px 0 12px;
	font-size: 28px;
	line-height: 1.2;
	color: #0f172a !important;
}
.sh-site .sh-wp-page-content h3 {
	margin: 24px 0 10px;
	font-size: 21px;
	color: #0f172a !important;
}
.sh-site .sh-wp-page-content p,
.sh-site .sh-wp-page-content li {
	color: #475569 !important;
	line-height: 1.8;
}
.sh-site .sh-wp-page-content a {
	color: #2563eb !important;
	text-decoration: underline;
}
.sh-site .sh-wp-page-content img {
	max-width: 100%;
	height: auto;
}
.sh-site .sh-wp-page-content ul,
.sh-site .sh-wp-page-content ol {
	padding-left: 24px;
}
@media (max-width: 640px) {
	.sh-site .sh-wp-page-content {
		padding: 22px;
	}
}

/* v1.4.2: single project page */
.sh-site .sh-project-detail { max-width: 1180px; }
.sh-site .sh-project-hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 52px;
}
.sh-site .sh-project-hero-copy h1 {
	margin: 8px 0 18px;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.03;
	letter-spacing: -.045em;
	color: #0f172a !important;
}
.sh-site .sh-project-subtitle {
	max-width: 680px;
	margin: 0 0 22px;
	font-size: 18px;
	color: #475569 !important;
	line-height: 1.7;
}
.sh-site .sh-project-tags,
.sh-site .sh-project-side-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0;
}
.sh-site .sh-project-tags span,
.sh-site .sh-project-tags a,
.sh-site .sh-project-side-tags span,
.sh-site .sh-project-side-tags a {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3730a3 !important;
	font-size: 12px;
	font-weight: 700;
}
.sh-site .sh-project-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sh-site .sh-project-hero-media {
	overflow: hidden;
	border-radius: 22px;
	background: #f1f5f9;
	border: 1px solid #dbe4f0;
	box-shadow: 0 24px 70px rgba(15,23,42,.10);
}
.sh-site .sh-project-hero-media img {
	display: block;
	width: 100%;
	height: auto;
}
.sh-site .sh-project-placeholder {
	min-height: 360px;
	display: grid;
	place-items: center;
	font-size: 70px;
	color: #2563eb;
}
.sh-site .sh-project-content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}
.sh-site .sh-project-sidebar { position: sticky; top: 100px; }
.sh-site .sh-project-side-card {
	padding: 24px;
	background: #fff;
	border: 1px solid #dbe4f0;
	border-radius: 16px;
	box-shadow: 0 14px 45px rgba(15,23,42,.06);
}
.sh-site .sh-project-side-card h3 { margin: 8px 0; color: #0f172a !important; }
.sh-site .sh-button-full { width: 100%; text-align: center; }
.sh-site [data-sh-project-download][data-loading="1"] { pointer-events: none; opacity: .7; }
@media (max-width: 850px) {
	.sh-site .sh-project-hero,
	.sh-site .sh-project-content-grid { grid-template-columns: 1fr; }
	.sh-site .sh-project-sidebar { position: static; }
}

/* v1.4.3: project download button + 10-second loader */
.sh-site .sh-project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 26px;
}

.sh-site .sh-project-download-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 210px;
	min-height: 50px;
	padding: 14px 22px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #2563eb !important;
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	letter-spacing: .02em;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.sh-site .sh-project-download-button:hover {
	background: #1d4ed8 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.sh-site .sh-project-download-button[data-loading="1"] {
	background: #1e40af !important;
	color: #ffffff !important;
	cursor: wait;
	pointer-events: none;
	transform: none;
}

.sh-site .sh-download-default {
	display: inline;
}

.sh-site .sh-download-loading {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 9px;
	white-space: nowrap;
}

.sh-site .sh-download-spinner {
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: shDownloadSpin .75s linear infinite;
}

@keyframes shDownloadSpin {
	to { transform: rotate(360deg); }
}

/* v1.4.4: project demo links and video embeds */
.sh-site .sh-project-demos {
	margin: 0 0 52px;
}
.sh-site .sh-project-demos .sh-section-heading {
	margin-bottom: 24px;
}
.sh-site .sh-project-demo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.sh-site .sh-project-demo-card {
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #dbe4f0;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(15,23,42,.06);
}
.sh-site .sh-project-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0f172a;
	overflow: hidden;
}
.sh-site .sh-project-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.sh-site .sh-project-demo-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 16px;
}
.sh-site .sh-project-demo-info strong {
	color: #0f172a !important;
	font-size: 14px;
}
.sh-site .sh-project-demo-info a {
	color: #2563eb !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}
@media (max-width: 900px) {
	.sh-site .sh-project-demo-grid {
		grid-template-columns: 1fr;
		max-width: 700px;
	}
}

/* v1.4.5: bottom project download CTA */
.sh-site .sh-project-bottom-download {
	grid-column: 1 / -1;
	margin-top: 30px;
	padding: 28px;
	border: 1px solid #dbe4f0;
	border-radius: 18px;
	background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
	box-shadow: 0 14px 45px rgba(15,23,42,.06);
}

.sh-site .sh-project-bottom-download-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	max-width: 100%;
}

.sh-site .sh-project-bottom-download h2 {
	margin: 6px 0 6px;
	color: #0f172a !important;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
}

.sh-site .sh-project-bottom-download p {
	margin: 0;
	color: #64748b !important;
	line-height: 1.6;
}

@media (max-width: 700px) {
	.sh-site .sh-project-bottom-download-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.sh-site .sh-project-bottom-download .sh-project-download-button {
		width: 100%;
	}
}

/* Finance tool homepage card */
.sh-card-finance-tool .sh-card-image { background: #eef2ff; }
.sh-card-finance-tool .sh-card-link { font-weight: 850; }


/* SkillHost account/credit header */
.sh-header-logout{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.07);color:#fff!important;font-size:13px;font-weight:700;text-decoration:none!important;white-space:nowrap}.sh-header-logout:hover{background:#fff;color:#111827!important}
.sh-header-account{display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}.sh-header-credits,.sh-header-user,.sh-header-auth-links a{display:inline-flex;align-items:center;gap:7px;text-decoration:none}.sh-header-credits{padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.07);font-size:13px;font-weight:700;color:#fff!important}.sh-header-credits span,.sh-header-credits-icon{color:#fff!important}.sh-header-credits-icon{font-size:10px}.sh-header-user{padding:8px 4px;font-size:13px;font-weight:700;color:#fff!important}.sh-header-user span{color:#fff!important}.sh-header-premium{font-size:9px;letter-spacing:.08em;padding:4px 6px;border-radius:999px;background:#fff;color:#111827}.sh-header-auth-links{display:flex;align-items:center;gap:8px;flex:0 0 auto}.sh-header-auth-links a{color:#fff!important}.sh-header-register{padding:8px 12px;border-radius:8px;background:#fff;color:#111827!important}.sh-header-auth-links a.sh-header-register{color:#111827!important}.sh-header-credits:hover,.sh-header-user:hover{opacity:.82}@media(max-width:1100px){.sh-nav a{padding:9px 7px;font-size:13px}.sh-header-search{width:150px;flex-basis:150px}.sh-header-account{gap:5px}}@media(max-width:900px){.sh-header-account,.sh-header-auth-links{display:none}}

/* v2.9.4 header/account integration */
.sh-mobile-only-nav-item { display:none !important; }
@media (max-width:900px) {
  .sh-nav .sh-mobile-only-nav-item { display:flex !important; }
  .sh-nav .sh-mobile-only-nav-item { border-top:1px solid rgba(255,255,255,.06); }
}
@media (max-width:640px) {
  .sh-header-inner { gap:10px; }
  .sh-brand { min-width:0; }
  .sh-menu-toggle { flex:0 0 auto; }
}

/* v2.11.1: explicit desktop logout + guaranteed mobile account actions */
.sh-header .sh-mobile-only-nav-item{display:none!important}
@media (max-width:900px){
  .sh-header .sh-nav.is-open .sh-mobile-only-nav-item{display:flex!important;align-items:center!important;width:100%!important;visibility:visible!important;opacity:1!important;}
  .sh-header .sh-nav.is-open .sh-mobile-logout-item{color:#fff!important;background:rgba(239,68,68,.10)!important;border-top:1px solid rgba(255,255,255,.08)!important;}
  .sh-header .sh-nav.is-open .sh-mobile-logout-item:hover,
  .sh-header .sh-nav.is-open .sh-mobile-logout-item:focus{background:rgba(239,68,68,.20)!important;color:#fff!important;}
  .sh-header .sh-menu-toggle{position:relative;z-index:1002;cursor:pointer;}
  .sh-header .sh-nav{z-index:1001;}
}
@media (min-width:901px){
  .sh-header .sh-header-logout{display:inline-flex!important;}
}


/* v2.13.7: category-based homepage resource layout */
.sh-site .sh-project-category-section:nth-of-type(even) { background:#f8fafc; }
.sh-site .sh-section-heading-side { display:flex; align-items:end; gap:22px; max-width:520px; }
.sh-site .sh-section-heading-side p { color:var(--sh-muted); margin:0; line-height:1.6; }
.sh-site .sh-section-intro { color:var(--sh-muted); margin:-14px 0 28px; max-width:700px; line-height:1.65; }
@media (max-width:900px) {
	.sh-site .sh-section-heading-side { flex-direction:column; align-items:flex-start; gap:10px; }
	.sh-site .sh-section-heading > p { margin-top:8px; }
}
@media (max-width:700px) {
	.sh-site .sh-card-grid,
	.sh-site .sh-project-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
	.sh-site .sh-card-grid,
	.sh-site .sh-project-grid { grid-template-columns:1fr; }
}


/* v2.13.11: header/full-viewport layout fix
 *
 * Some WordPress themes constrain the body/content area. SkillHost owns its
 * own frontend shell, so keep the shell full viewport width and prevent the
 * desktop account controls from forcing horizontal overflow.
 */
.sh-site {
	width: 100vw !important;
	max-width: 100vw !important;
	min-width: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	overflow-x: clip;
}

.sh-site .sh-header-inner {
	width: min(calc(100% - 40px), 1400px);
	max-width: 1400px;
	min-width: 0;
}

/* Desktop: hamburger is strictly mobile-only. */
@media (min-width: 901px) {
	.sh-site .sh-menu-toggle {
		display: none !important;
	}

	.sh-site .sh-nav {
		display: flex !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.sh-site .sh-header-account,
	.sh-site .sh-header-auth-links {
		display: flex !important;
		flex: 0 0 auto;
	}

	.sh-site .sh-header-search {
		flex: 0 1 190px;
		min-width: 150px;
	}
}

/* v2.13.13: compact desktop header so every control stays inside the viewport.
 * This also handles browser zoom (125%/150%) without enabling the mobile menu. */
@media (min-width: 901px) and (max-width: 1650px) {
	.sh-site .sh-header-inner {
		width: calc(100% - 24px);
		max-width: none;
		gap: 8px;
	}

	.sh-site .sh-brand { gap: 7px; }
	.sh-site .sh-brand-mark { width: 36px; height: 36px; }
	.sh-site .sh-brand-text strong { font-size: 16px; }
	.sh-site .sh-brand-text small { font-size: 8px; }

	.sh-site .sh-nav {
		gap: 0;
		min-width: 0;
	}

	.sh-site .sh-nav a {
		padding: 8px 5px;
		font-size: 12px;
		line-height: 1.25;
		white-space: normal;
	}

	.sh-site .sh-header-search {
		min-width: 180px;
	}

	.sh-site .sh-header-account {
		gap: 4px;
	}

	.sh-site .sh-header-credits {
		padding: 7px 8px;
		font-size: 12px;
	}

	.sh-site .sh-header-user {
		padding: 7px 2px;
		font-size: 12px;
		max-width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sh-site .sh-header-premium {
		font-size: 8px;
		padding: 3px 5px;
	}

	.sh-site .sh-header-logout {
		padding: 7px 8px;
		font-size: 12px;
	}
}

/* Extra-compact desktop mode for narrow CSS viewports / high browser zoom.
 * Keep the desktop navigation; only reduce its footprint. */
@media (min-width: 901px) and (max-width: 1350px) {
	.sh-site .sh-header-inner { gap: 5px; width: calc(100% - 16px); }
	.sh-site .sh-brand-text small { display: none; }
	.sh-site .sh-brand-text strong { font-size: 15px; }
	.sh-site .sh-nav a { padding-left: 4px; padding-right: 4px; font-size: 11px; }
	.sh-site .sh-header-search { min-width: 180px; }
	.sh-site .sh-header-search input { padding-left: 7px; padding-right: 7px; font-size: 11px; }
	.sh-site .sh-header-search button { width: 30px; font-size: 16px; }
	.sh-site .sh-header-credits { padding: 6px 6px; font-size: 11px; }
	.sh-site .sh-header-user { max-width: 82px; font-size: 11px; }
	.sh-site .sh-header-logout { padding: 6px 7px; font-size: 11px; }
}

/* v2.13.21: balanced desktop header. Admin settings provide the dimensions. */
@media (min-width: 901px) {
  .sh-site .sh-header-inner {
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 18px !important;
  }
  .sh-site .sh-brand { justify-self: start; }
  .sh-site .sh-nav {
    justify-self: center;
    margin-left: 0 !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .sh-site .sh-header-search {
    justify-self: end;
    min-width: 180px !important;
  }
  .sh-site .sh-header-account,
  .sh-site .sh-header-auth-links { justify-self: end; }
}

/* Mobile: hamburger is the navigation trigger and desktop controls are hidden. */
@media (max-width: 900px) {
	.sh-site .sh-menu-toggle {
		display: block !important;
		margin-left: auto;
		flex: 0 0 auto;
	}

	.sh-site .sh-nav {
		display: none;
	}

	.sh-site .sh-nav.is-open {
		display: flex !important;
	}

	.sh-site .sh-header-account,
	.sh-site .sh-header-auth-links,
	.sh-site .sh-header-search {
		display: none !important;
	}
}

/* Do not let the browser/theme create a horizontal scrollbar from the
 * SkillHost shell. */
html:has(.sh-site),
body:has(.sh-site) {
	max-width: 100%;
	overflow-x: hidden;
}


/* v2.13.20: balanced desktop header layout.
 * Keep the logo at the left, center the primary navigation in the flexible
 * middle area, and reserve fixed space for search + account controls.
 * This prevents the header search from collapsing and removes the large
 * empty gap created by margin-left:auto on the navigation.
 */
@media (min-width: 901px) {
	.sh-site .sh-header-inner {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}

	.sh-site .sh-brand {
		flex: 0 0 auto;
		min-width: max-content;
	}

	.sh-site .sh-nav {
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 0;
		justify-content: center;
		gap: 2px;
		overflow: hidden;
	}

	.sh-site .sh-nav a {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.sh-site .sh-header-search {
		flex: 0 0 190px;
		width: 190px;
		min-width: 190px;
	}

	.sh-site .sh-header-account,
	.sh-site .sh-header-auth-links {
		flex: 0 0 auto;
		min-width: max-content;
	}
}

/* At medium desktop widths, reduce spacing before allowing the search box
 * to become smaller. The search remains large enough for its placeholder.
 */
@media (min-width: 901px) and (max-width: 1650px) {
	.sh-site .sh-header-inner { gap: 8px; }
	.sh-site .sh-nav { gap: 0; }
	.sh-site .sh-nav a { padding-left: 5px; padding-right: 5px; }
	.sh-site .sh-header-search {
		flex-basis: 155px;
		width: 155px;
		min-width: 155px;
	}
}

/* Narrow desktop / high zoom: preserve the desktop menu while keeping the
 * search field usable instead of collapsing it to a clipped input.
 */
@media (min-width: 901px) and (max-width: 1350px) {
	.sh-site .sh-header-inner { gap: 5px; }
	.sh-site .sh-nav a { padding-left: 4px; padding-right: 4px; }
	.sh-site .sh-header-search {
		flex-basis: 125px;
		width: 125px;
		min-width: 125px;
	}
	.sh-site .sh-header-search input {
		padding-left: 8px;
		padding-right: 6px;
		font-size: 12px;
	}
	.sh-site .sh-header-search button { width: 34px; font-size: 17px; }
}


/* v2.13.22: final desktop header architecture fix.
 * The previous grid had only three columns while the DOM contains four
 * desktop groups (brand, nav, search, account). The account therefore
 * wrapped onto a second row. Use four explicit columns and let navigation
 * consume the flexible middle space. Admin values are injected as CSS vars
 * by skillhost_core_assets().
 */
@media (min-width: 901px) {
  .sh-site .sh-header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) var(--sh-header-search-width, 300px) auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: calc(100% - (var(--sh-header-left-right, 28px) * 2)) !important;
    max-width: var(--sh-header-max-width, 1800px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sh-site .sh-brand {
    grid-column: 1;
    justify-self: start;
    transform: translateX(var(--sh-header-logo-offset, 8px));
    min-width: max-content;
  }

  .sh-site .sh-nav {
    grid-column: 2;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    min-width: 0 !important;
    margin-left: 0 !important;
    flex: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--sh-header-nav-gap, 6px) !important;
    overflow: visible;
  }

  .sh-site .sh-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .sh-site .sh-header-search {
    grid-column: 3;
    justify-self: stretch;
    width: var(--sh-header-search-width, 300px) !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  .sh-site .sh-header-search input {
    min-width: 0;
    font-size: 14px;
  }

  .sh-site .sh-header-account,
  .sh-site .sh-header-auth-links {
    grid-column: 4;
    justify-self: end;
    min-width: max-content;
    flex: none !important;
  }
}

/* Keep the four-column layout usable on smaller desktop widths. */
@media (min-width: 901px) and (max-width: 1500px) {
  .sh-site .sh-header-inner {
    column-gap: 10px !important;
  }
  .sh-site .sh-nav {
    gap: 1px !important;
  }
  .sh-site .sh-nav a {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
  }
  .sh-site .sh-header-search {
    width: min(var(--sh-header-search-width, 300px), 240px) !important;
  }
  .sh-site .sh-header-credits,
  .sh-site .sh-header-user,
  .sh-site .sh-header-logout {
    font-size: 12px;
  }
}

/* At narrow desktop/high zoom, prioritize keeping the account and search
 * on the same row rather than allowing the account block to wrap. */
@media (min-width: 901px) and (max-width: 1250px) {
  .sh-site .sh-header-inner {
    column-gap: 6px !important;
  }
  .sh-site .sh-brand-text small { display: none; }
  .sh-site .sh-brand-text strong { font-size: 15px; }
  .sh-site .sh-nav a {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 11px;
  }
  .sh-site .sh-header-search {
    width: 210px !important;
  }
  .sh-site .sh-header-account { gap: 3px; }
  .sh-site .sh-header-credits { padding-left: 7px; padding-right: 7px; }
  .sh-site .sh-header-user { padding-left: 2px; padding-right: 2px; }
  .sh-site .sh-header-logout { padding-left: 7px; padding-right: 7px; }
}


/* v2.13.23: zoom-safe desktop header + WordPress admin-bar separation.
 * Browser zoom reduces the CSS viewport width. The previous admin-configured
 * search width was injected as inline !important CSS, which prevented these
 * responsive rules from shrinking the search and caused the right-side account
 * controls to collide/overflow at 125% zoom. The admin bar also needs its own
 * vertical offset so its "Howdy" menu cannot sit on top of the SkillHost header.
 */
@media (min-width: 901px) {
	.sh-site .sh-header-inner {
		width: calc(100% - (var(--sh-header-left-right, 28px) * 2)) !important;
		max-width: var(--sh-header-max-width, 1800px) !important;
	}

	.sh-site .sh-header-search {
		width: var(--sh-header-search-width, 300px);
		flex: 0 0 var(--sh-header-search-width, 300px);
	}
}

/* At 125% on a typical 1920px monitor the CSS viewport is roughly 1536px.
 * Keep all four header groups on one row while reducing only the dimensions
 * that can safely shrink. The search remains large enough to be useful. */
@media (min-width: 901px) and (max-width: 1650px) {
	.sh-site .sh-header-inner {
		column-gap: 8px !important;
	}
	.sh-site .sh-nav {
		gap: 0 !important;
	}
	.sh-site .sh-nav a {
		padding-left: 3px;
		padding-right: 3px;
		font-size: 11.5px;
	}
	.sh-site .sh-header-search {
		width: min(var(--sh-header-search-width, 300px), 230px) !important;
		flex-basis: min(var(--sh-header-search-width, 300px), 230px) !important;
	}
	/* Keep credits, user/premium and logout as three non-overlapping items. */
	.sh-site .sh-header-account {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
		white-space: nowrap !important;
		min-width: max-content !important;
	}
	.sh-site .sh-header-credits {
		padding: 6px 8px;
		font-size: 11.5px;
		flex: 0 0 auto !important;
	}
	.sh-site .sh-header-user {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 5px !important;
		padding: 6px 2px;
		font-size: 11.5px;
		max-width: none !important;
		flex: 0 0 auto !important;
		overflow: visible !important;
	}
	.sh-site .sh-header-premium {
		display: inline-flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		font-size: 7px !important;
		line-height: 1 !important;
		padding: 3px 5px !important;
		white-space: nowrap !important;
	}
	.sh-site .sh-header-logout {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		padding: 6px 9px;
		font-size: 11.5px;
		white-space: nowrap !important;
	}
}

@media (min-width: 901px) and (max-width: 1350px) {
	.sh-site .sh-header-inner { column-gap: 5px !important; }
	.sh-site .sh-brand-text small { display: none; }
	.sh-site .sh-brand-text strong { font-size: 15px; }
	.sh-site .sh-nav a { padding-left: 2px; padding-right: 2px; font-size: 10.5px; }
	.sh-site .sh-header-search {
		width: min(var(--sh-header-search-width, 300px), 200px) !important;
		flex-basis: min(var(--sh-header-search-width, 300px), 200px) !important;
	}
	.sh-site .sh-header-account { gap: 4px !important; }
	.sh-site .sh-header-credits { padding-left: 6px; padding-right: 6px; font-size: 11px; }
	.sh-site .sh-header-user { padding-left: 1px; padding-right: 1px; font-size: 11px; }
	.sh-site .sh-header-premium { font-size: 6.5px !important; padding: 3px 4px !important; }
	.sh-site .sh-header-logout { padding-left: 7px; padding-right: 7px; font-size: 11px; }
}

/* WordPress admin bar: keep it above the page instead of overlaying the
 * SkillHost sticky header. This specifically fixes the "Howdy, email" overlap
 * visible when the user is logged in. */
body.admin-bar .sh-site .sh-header {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .sh-site .sh-header {
		top: 46px !important;
	}
}

/* Articles section - uses the same resource-card system as projects, templates and tools. */
.sh-articles-grid .sh-card-post .sh-card-link { font-weight: 700; }
.sh-articles-grid .sh-card-post .sh-card-image img { width: 100%; height: 100%; object-fit: cover; }