/*
Theme Name: Geek 4 Hire National Smart Hands
Theme URI: https://geek4hire.tech/
Author: C. Evan Solutions
Author URI: https://cevansolutions.com/
Description: Source-controlled Phase 0 theme for the Geek 4 Hire nationwide smart-hands service.
Version: 0.1.20
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: geek4hire-national
*/

:root {
	--g4h-night: #07111f;
	--g4h-navy: #0d1d33;
	--g4h-panel: #132b48;
	--g4h-ink: #132238;
	--g4h-muted: #5b6c80;
	--g4h-line: #dce5ee;
	--g4h-soft: #f3f7fb;
	--g4h-white: #fff;
	--g4h-cyan: #36d8e8;
	--g4h-cyan-dark: #087d8b;
	--g4h-green: #66e5ac;
	--g4h-amber: #ffd16e;
	--g4h-shadow: 0 24px 60px rgb(7 17 31 / 16%);
	--g4h-radius: 24px;
	--g4h-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	color: var(--g4h-ink);
	background: var(--g4h-white);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow-x: hidden;
}
button { font: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; line-height: 1.7; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; }
h1 { font-size: clamp(3rem, 5vw, 5.2rem); line-height: .96; }
h2 { font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.04; }
h3 { font-size: 1.22rem; line-height: 1.2; }
.g4h-wrap { width: min(var(--g4h-max), calc(100% - 40px)); margin-inline: auto; }
.g4h-skip-link { position: absolute; left: -999px; top: 12px; z-index: 100; padding: 10px 16px; color: var(--g4h-night); background: var(--g4h-cyan); }
.g4h-skip-link:focus { left: 12px; }
.g4h-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--g4h-cyan-dark); font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.g4h-eyebrow::before { width: 26px; height: 2px; background: currentcolor; content: ""; }
.g4h-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border: 1px solid var(--g4h-cyan); border-radius: 999px; color: var(--g4h-night); background: var(--g4h-cyan); font-weight: 900; transition: transform .2s ease, background .2s ease; }
.g4h-button:hover, .g4h-button:focus-visible { background: #7deef6; transform: translateY(-2px); }
.g4h-button--ghost { border-color: rgb(255 255 255 / 38%); color: var(--g4h-white); background: transparent; }
.g4h-button--ghost:hover, .g4h-button--ghost:focus-visible { border-color: var(--g4h-cyan); color: var(--g4h-white); background: rgb(54 216 232 / 10%); }
.g4h-text-link { color: var(--g4h-cyan-dark); font-weight: 900; }
.g4h-text-link::after { margin-left: 8px; content: "\2192"; }

.g4h-phase-banner { padding: 9px 20px; color: #332300; background: var(--g4h-amber); text-align: center; font-size: .78rem; font-weight: 850; }
.g4h-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgb(255 255 255 / 9%); color: var(--g4h-white); background: rgb(7 17 31 / 94%); backdrop-filter: blur(18px); }
.g4h-nav-shell { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.g4h-brand { display: inline-flex; align-items: center; }
.g4h-brand-logo { display: block; width: 228px; height: auto; border-radius: 12px; background: var(--g4h-white); box-shadow: 0 10px 28px rgb(0 0 0 / 18%); }
.g4h-nav { display: flex; justify-content: center; gap: 22px; color: #cfdae7; font-size: .88rem; font-weight: 750; }
.g4h-nav a:hover, .g4h-nav a:focus-visible { color: var(--g4h-cyan); }
.g4h-header-actions { display: flex; gap: 9px; }
.g4h-header-actions .g4h-button { min-height: 42px; padding: 9px 15px; font-size: .82rem; }
.g4h-menu-toggle { display: none; border: 0; color: var(--g4h-white); background: transparent; font-weight: 850; }

.g4h-hero { position: relative; min-height: 740px; display: grid; align-items: center; color: var(--g4h-white); background: radial-gradient(circle at 78% 20%, rgb(54 216 232 / 17%), transparent 29%), radial-gradient(circle at 18% 100%, rgb(102 229 172 / 10%), transparent 35%), linear-gradient(135deg, var(--g4h-night), #0b1c31 55%, #092135); overflow: hidden; }
.g4h-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 14%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 14%) 1px, transparent 1px); background-size: 64px 64px; opacity: .13; content: ""; mask-image: linear-gradient(to right, #000, transparent 82%); }
.g4h-hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding: 88px 0 104px; }
.g4h-hero .g4h-eyebrow { color: var(--g4h-cyan); }
.g4h-hero h1 { margin-top: 20px; }
.g4h-hero h1 em { color: var(--g4h-cyan); font-style: normal; }
.g4h-hero-copy > p { max-width: 690px; margin-top: 26px; color: #c8d6e7; font-size: clamp(1.05rem, 1.6vw, 1.28rem); }
.g4h-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.g4h-fine { display: flex; gap: 11px; align-items: center; margin-top: 22px; color: #9bb0c7; font-size: .84rem; }
.g4h-fine::before { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; color: var(--g4h-night); background: var(--g4h-green); font-weight: 950; content: "\2713"; }
.g4h-control-card { min-height: 450px; padding: 29px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 34px; background: linear-gradient(160deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)); box-shadow: 0 42px 90px rgb(0 0 0 / 28%); }
.g4h-control-card small { color: #93abc4; text-transform: uppercase; letter-spacing: .12em; font-weight: 850; }
.g4h-control-card h2 { margin-top: 10px; font-size: 2rem; }
.g4h-evidence-flow { display: grid; gap: 10px; margin-top: 28px; }
.g4h-evidence-flow div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 15px; border: 1px solid rgb(255 255 255 / 11%); border-radius: 15px; color: #aebfd2; background: rgb(7 17 31 / 46%); }
.g4h-evidence-flow b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--g4h-night); background: var(--g4h-cyan); }
.g4h-evidence-flow strong { display: block; color: var(--g4h-white); }

.g4h-trust-strip { position: relative; z-index: 2; margin-top: -38px; }
.g4h-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--g4h-line); border-radius: 22px; background: var(--g4h-white); box-shadow: var(--g4h-shadow); overflow: hidden; }
.g4h-trust-grid article { min-height: 126px; padding: 24px; border-right: 1px solid var(--g4h-line); }
.g4h-trust-grid article:last-child { border-right: 0; }
.g4h-trust-grid small { color: var(--g4h-cyan-dark); font-size: .67rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.g4h-trust-grid strong { display: block; margin-top: 9px; }
.g4h-trust-grid p { margin-top: 7px; color: var(--g4h-muted); font-size: .82rem; line-height: 1.5; }

.g4h-section { padding: 112px 0; }
.g4h-section--soft { background: var(--g4h-soft); }
.g4h-section--dark { color: var(--g4h-white); background: var(--g4h-night); }
.g4h-section-head { max-width: 780px; }
.g4h-section-head h2 { margin-top: 17px; }
.g4h-section-head p { margin-top: 20px; color: var(--g4h-muted); font-size: 1.05rem; }
.g4h-section--dark .g4h-section-head p { color: #a8bbd0; }
.g4h-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.g4h-card { min-height: 285px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--g4h-line); border-radius: var(--g4h-radius); background: var(--g4h-white); }
.g4h-card--dark { border-color: var(--g4h-panel); color: var(--g4h-white); background: linear-gradient(145deg, var(--g4h-panel), var(--g4h-night)); }
.g4h-card-label { color: var(--g4h-cyan-dark); font-size: .72rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.g4h-card--dark .g4h-card-label, .g4h-card--dark .g4h-text-link { color: var(--g4h-cyan); }
.g4h-card h3 { margin-top: 23px; }
.g4h-card p { margin: 13px 0 24px; color: var(--g4h-muted); }
.g4h-card--dark p { color: #b8cada; }
.g4h-card .g4h-text-link { margin-top: auto; }

.g4h-process { display: grid; grid-template-columns: .76fr 1.24fr; gap: 70px; }
.g4h-process-intro { position: sticky; top: 118px; align-self: start; }
.g4h-process-intro h2 { margin-top: 17px; }
.g4h-process-intro p { margin-top: 20px; color: var(--g4h-muted); }
.g4h-process-step { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--g4h-line); }
.g4h-process-step:first-child { padding-top: 0; }
.g4h-step-number { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 50%; color: var(--g4h-night); background: var(--g4h-cyan); font-weight: 950; }
.g4h-process-step p { margin-top: 8px; color: var(--g4h-muted); }
.g4h-process-step small { display: block; margin-top: 9px; color: var(--g4h-cyan-dark); font-weight: 850; }

.g4h-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 46px; }
.g4h-service-card { min-height: 210px; padding: 24px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 21px; background: rgb(255 255 255 / 4%); }
.g4h-service-card b { color: var(--g4h-cyan); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.g4h-service-card h3 { margin-top: 19px; }
.g4h-service-card p { margin-top: 11px; color: #9eb2c8; font-size: .88rem; }
.g4h-boundary { display: grid; grid-template-columns: auto 1fr; gap: 16px; max-width: 850px; margin-top: 34px; padding: 21px 24px; border: 1px solid rgb(255 209 110 / 30%); border-radius: 18px; color: #d6e0eb; background: rgb(255 209 110 / 7%); }
.g4h-boundary strong { color: var(--g4h-amber); }

.g4h-split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.g4h-split-copy h2 { margin-top: 17px; }
.g4h-split-copy > p { margin-top: 22px; color: var(--g4h-muted); }
.g4h-policy { display: grid; gap: 12px; margin-top: 28px; }
.g4h-policy div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.g4h-policy span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--g4h-cyan-dark); background: #dff7fa; font-weight: 950; }
.g4h-policy small { color: var(--g4h-muted); }
.g4h-readiness { padding: 30px; border: 1px solid var(--g4h-line); border-radius: 28px; background: var(--g4h-white); box-shadow: var(--g4h-shadow); }
.g4h-readiness-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--g4h-line); }
.g4h-readiness-row:last-child { border-bottom: 0; }
.g4h-readiness-row small { display: block; margin-top: 4px; color: var(--g4h-muted); }
.g4h-status { padding: 7px 10px; border-radius: 999px; color: #71500e; background: #fff0c6; font-size: .7rem; font-weight: 900; }
.g4h-status--base { color: #106a47; background: #dff8ec; }
.g4h-status--closed { color: #5c6875; background: #edf1f5; }

.g4h-network-panel { display: grid; grid-template-columns: 1fr auto; gap: 52px; align-items: center; padding: 54px; border-radius: 34px; color: var(--g4h-white); background: linear-gradient(135deg, #102642, #091523); box-shadow: var(--g4h-shadow); }
.g4h-network-panel h2 { margin-top: 17px; }
.g4h-network-panel p { max-width: 720px; margin-top: 20px; color: #b8c9db; }
.g4h-network-panel .g4h-fine { max-width: 760px; }
.g4h-network-actions { display: grid; gap: 10px; min-width: 250px; }

.g4h-faq { max-width: 900px; margin: 44px auto 0; }
.g4h-faq details { border-bottom: 1px solid var(--g4h-line); }
.g4h-faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; cursor: pointer; font-weight: 900; list-style: none; }
.g4h-faq summary::-webkit-details-marker { display: none; }
.g4h-faq summary::after { color: var(--g4h-cyan-dark); font-size: 1.3rem; content: "+"; }
.g4h-faq details[open] summary::after { content: "\2212"; }
.g4h-faq p { max-width: 760px; padding: 0 0 24px; color: var(--g4h-muted); }

.g4h-final { padding: 105px 0; color: var(--g4h-white); background: linear-gradient(135deg, var(--g4h-panel), var(--g4h-night)); }
.g4h-final-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.g4h-final h2 { margin-top: 17px; }
.g4h-final p { max-width: 720px; margin-top: 20px; color: #aebfd1; }
.g4h-footer { padding: 40px 0 92px; color: #94a8bd; background: var(--g4h-night); }
.g4h-footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 9%); }
.g4h-footer p { max-width: 720px; margin-top: 16px; font-size: .78rem; }
.g4h-footer-links { display: flex; flex-wrap: wrap; gap: 16px; color: #c8d5e2; font-size: .78rem; font-weight: 800; }
.g4h-footer .g4h-brand-logo { width: 280px; }
.g4h-mobile-bar { display: none; }
.g4h-content { min-height: 60vh; padding: 90px 0; }
.g4h-content > * { max-width: 780px; }
.g4h-article-shell { padding: 80px 0 110px; background: var(--g4h-soft); }
.g4h-article { max-width: 860px; }
.g4h-article-header { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--g4h-line); }
.g4h-article-byline { margin-top: 12px; color: var(--g4h-muted); font-size: .9rem; font-weight: 800; }
.g4h-article-body { padding: 44px clamp(22px, 5vw, 64px); border: 1px solid var(--g4h-line); border-radius: 28px; background: var(--g4h-white); box-shadow: 0 18px 55px rgb(17 38 63 / 7%); }
.g4h-article-body h1 { margin-bottom: 28px; font-size: clamp(2.45rem, 6vw, 4.8rem); letter-spacing: -.055em; }
.g4h-article-body h2 { margin: 52px 0 18px; font-size: clamp(1.65rem, 3vw, 2.4rem); }
.g4h-article-body h3 { margin: 34px 0 12px; font-size: 1.3rem; }
.g4h-article-body p, .g4h-article-body li { color: #33465a; font-size: 1.04rem; line-height: 1.8; }
.g4h-article-body p + p { margin-top: 20px; }
.g4h-article-body ul, .g4h-article-body ol { display: grid; gap: 10px; margin: 18px 0 26px 24px; }
.g4h-article-body code { padding: 2px 6px; border-radius: 6px; background: #eaf0f5; font-size: .92em; }
.g4h-article-cta { margin-top: 28px; padding: 34px; border-radius: 24px; color: var(--g4h-white); background: linear-gradient(135deg, var(--g4h-panel), var(--g4h-night)); }
.g4h-article-cta p { max-width: 680px; margin: 12px 0 22px; color: #bdd0e1; }

@media (max-width: 1040px) {
	.g4h-nav { display: none; }
	.g4h-nav[data-open="true"] { position: absolute; inset: 76px 12px auto; display: flex; flex-direction: column; padding: 18px; border-radius: 16px; background: var(--g4h-navy); }
	.g4h-menu-toggle { display: block; }
	.g4h-hero-grid, .g4h-split { grid-template-columns: 1fr; }
	.g4h-control-card { max-width: 720px; }
	.g4h-card-grid { grid-template-columns: 1fr 1fr; }
	.g4h-service-grid { grid-template-columns: 1fr 1fr; }
	.g4h-trust-grid { grid-template-columns: 1fr 1fr; }
	.g4h-trust-grid article:nth-child(2) { border-right: 0; }
	.g4h-trust-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--g4h-line); }
	.g4h-process { grid-template-columns: 1fr; }
	.g4h-process-intro { position: static; }
	.g4h-network-panel { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.g4h-wrap { width: min(calc(100% - 26px), var(--g4h-max)); }
	.g4h-nav-shell { min-height: 66px; grid-template-columns: 1fr auto; }
	.g4h-header .g4h-brand-logo { width: 188px; }
	.g4h-nav[data-open="true"] { inset-block-start: 66px; }
	.g4h-header-actions { display: none; }
	.g4h-hero { min-height: auto; }
	.g4h-hero-grid { gap: 46px; padding: 66px 0 80px; }
	.g4h-hero h1 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
	.g4h-actions .g4h-button { width: 100%; }
	.g4h-control-card { min-height: 0; padding: 22px; }
	.g4h-trust-strip { margin-top: -28px; }
	.g4h-trust-grid, .g4h-card-grid, .g4h-service-grid { grid-template-columns: 1fr; }
	.g4h-trust-grid article { border-right: 0; border-bottom: 1px solid var(--g4h-line); }
	.g4h-trust-grid article:last-child { border-bottom: 0; }
	.g4h-section { padding: 82px 0; }
	.g4h-boundary { grid-template-columns: 1fr; }
	.g4h-network-panel { padding: 30px 22px; }
	.g4h-network-actions { min-width: 0; }
	.g4h-final-grid, .g4h-footer-grid { grid-template-columns: 1fr; }
	.g4h-final-grid .g4h-actions { margin-top: 0; }
	.g4h-mobile-bar { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 7px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 18px; background: rgb(7 17 31 / 95%); box-shadow: 0 18px 45px rgb(0 0 0 / 35%); backdrop-filter: blur(16px); }
	.g4h-mobile-bar .g4h-button { min-height: 44px; padding: 8px; font-size: .72rem; }
	.g4h-footer { padding-bottom: 112px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}