/* ==========================================================================
   KOR4E — Design tokens
   Palette: deep space navy base, electric cyan + violet accents (global
   network feel), amber used sparingly for "featured/premium" signals.
   Display: Space Grotesk (geometric, technical). Body: Inter. Data/meta: JetBrains Mono.
   ========================================================================== */
:root{
	--bg:#0B0E17;
	--bg-alt:#0E1220;
	--surface:#141926;
	--surface-2:#1A2033;
	--glass: rgba(20,25,38,.55);
	--border: rgba(255,255,255,.08);
	--border-strong: rgba(255,255,255,.16);
	--text:#E7ECF5;
	--text-dim:#9AA5B8;
	--muted:#6B7280;
	--cyan:#00E5C7;
	--violet:#7B61FF;
	--amber:#FFB84D;
	--success:#22C55E;
	--danger:#FF6B6B;
	--font-display:'Space Grotesk', sans-serif;
	--font-body:'Inter', sans-serif;
	--font-mono:'JetBrains Mono', monospace;
	--radius-sm:10px;
	--radius:16px;
	--radius-lg:24px;
	--container: 1240px;
	--shadow-glow: 0 0 0 1px rgba(0,229,199,.15), 0 8px 32px rgba(0,0,0,.4);
	--kor4e-header-h: 72px; /* kept in sync with the header's real rendered height by main.js */
}

/* ---- Light mode ---- */
:root[data-theme="light"]{
	--bg:#F6F8FB;
	--bg-alt:#FFFFFF;
	--surface:#FFFFFF;
	--surface-2:#EEF1F6;
	--glass: rgba(255,255,255,.7);
	--border: rgba(11,14,23,.09);
	--border-strong: rgba(11,14,23,.18);
	--text:#12151F;
	--text-dim:#565F72;
	--muted:#8A93A3;
	--cyan:#00A38B;
	--violet:#6947E0;
	--amber:#B8790A;
	--success:#16A34A;
	--danger:#DC2626;
	--shadow-glow: 0 0 0 1px rgba(0,163,139,.15), 0 8px 32px rgba(17,20,30,.08);
}
:root[data-theme="light"] .kor4e-bg-grid{
	background-image:
		linear-gradient(rgba(11,14,23,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11,14,23,.04) 1px, transparent 1px);
}
:root[data-theme="light"] .btn-primary{color:#F6F8FB;}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
h1,h2,h3,h4{
	font-family:var(--font-display);
	font-weight:700;
	line-height:1.15;
	margin:0 0 .5em;
	letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4vw,3.2rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem);}
p{color:var(--text-dim);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:var(--font-mono);font-size:.82em;letter-spacing:.02em;}
button{font-family:inherit;cursor:pointer;}

/* WordPress core outputs labels like "Search for:" wrapped in this class,
   expecting the active theme to hide them off-screen for assistive tech.
   Without it, that text was rendering visibly (e.g. the plain "Search"
   label above the footer search box). */
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
	height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;
	width:1px;word-wrap:normal!important;
}

/* Animated ambient background grid */
.kor4e-bg-grid{
	position:fixed;inset:0;z-index:-1;
	background-image:
		linear-gradient(rgba(0,229,199,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,229,199,.05) 1px, transparent 1px);
	background-size:48px 48px;
	mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 40%, transparent 100%);
}

.kor4e-container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.kor4e-narrow{max-width:640px;}

/* ---- Header ---- */
.kor4e-header{
	position:sticky;top:0;z-index:220;
	background:var(--glass);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid var(--border);
}
.kor4e-header-inner{display:flex;align-items:center;gap:24px;height:72px;}
.kor4e-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:1.25rem;flex-shrink:0;}
.kor4e-logo-mark{color:var(--cyan);font-size:1.4em;}
.kor4e-nav{flex:1;}
.kor4e-nav-list{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.kor4e-nav-list a{color:var(--text-dim);font-weight:500;font-size:.95rem;transition:color .2s;}
.kor4e-nav-list a:hover{color:var(--cyan);}
.kor4e-search{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 16px;flex:1;max-width:340px;}
.kor4e-search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.9rem;}
.kor4e-search button{background:none;border:none;color:var(--text-dim);padding:4px 8px;}
.kor4e-header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}

.kor4e-theme-toggle{
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;flex-shrink:0;
	background:var(--surface);border:1px solid var(--border);border-radius:50%;
	font-size:1.05rem;line-height:1;
	transition:border-color .2s,transform .15s ease;
}
.kor4e-theme-toggle:hover{border-color:var(--cyan);}
.kor4e-theme-toggle:active{transform:scale(.92);}
.kor4e-theme-icon-moon{display:none;}
:root[data-theme="light"] .kor4e-theme-icon-sun{display:none;}
:root[data-theme="light"] .kor4e-theme-icon-moon{display:inline;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:999px;font-weight:600;font-size:.92rem;border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .2s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#08101a;box-shadow:0 4px 20px rgba(0,229,199,.25);}
.btn-primary:hover{box-shadow:0 6px 28px rgba(123,97,255,.35);}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-lg{padding:15px 30px;font-size:1rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* ---- Profile dropdown (sitewide, top right) ---- */
.kor4e-avatar-sm{display:inline-block;width:40px;height:40px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--surface-2);border:2px solid var(--border-strong);flex-shrink:0;}
.kor4e-avatar-lg{display:inline-block;width:120px;height:120px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--surface-2);border:3px solid var(--cyan);flex-shrink:0;}
.kor4e-profile-menu{position:relative;}
.kor4e-profile-trigger{background:none;border:none;padding:0;border-radius:50%;}
.kor4e-profile-dropdown{
	position:absolute;top:52px;right:0;width:240px;
	background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
	padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);
	transition:all .2s ease;box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.kor4e-profile-menu.is-open .kor4e-profile-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.kor4e-profile-dropdown-head{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.kor4e-profile-dropdown-head span.mono{color:var(--text-dim);}
.kor4e-profile-dropdown a{display:block;padding:9px 10px;border-radius:8px;font-size:.9rem;color:var(--text-dim);}
.kor4e-profile-dropdown a:hover{background:var(--surface);color:var(--text);}

.kor4e-mobile-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:6px;}
.kor4e-mobile-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;}

/* ---- Hero ---- */
.kor4e-hero{position:relative;padding:80px 0 40px;overflow:hidden;}
.kor4e-hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse, rgba(0,229,199,.18), rgba(123,97,255,.08) 45%, transparent 70%);pointer-events:none;}
.kor4e-hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;}
/* Grid/flex items default to min-width:auto (won't shrink below their own
   content's width). Without this, a long button label like "Search
   Candidates" refuses to shrink and drags the whole column wider than the
   viewport on mobile — clipping the heading text too, since it shares the
   same oversized column. min-width:0 lets both size to the track/row
   they're actually given instead of their content's natural width. */
.kor4e-hero-copy{min-width:0;}
.kor4e-hero-copy h1,.kor4e-hero-copy p{overflow-wrap:break-word;word-break:break-word;}
.kor4e-eyebrow{display:inline-block;color:var(--cyan);letter-spacing:.08em;margin-bottom:14px;}
.text-gradient{background:linear-gradient(135deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.kor4e-hero-copy p{font-size:1.1rem;max-width:520px;margin-bottom:28px;}
/* min-width:0 here too: this is itself a flex container nested inside the
   grid item above, so it needs its own reset or a long, unbroken button
   label (e.g. "Search Candidates") can still force this specific box wider
   than the column it was given, even though the parent is already fixed. */
.kor4e-hero-search{display:flex;flex-wrap:wrap;gap:8px;background:var(--surface);border:1px solid var(--border);padding:8px;border-radius:16px;margin-bottom:20px;min-width:0;max-width:100%;}
.kor4e-hero-search input{flex:1;min-width:120px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);outline:none;}
.kor4e-hero-search input:focus{border-color:var(--cyan);}
.kor4e-hero-search button{flex:1 1 auto;white-space:nowrap;}
.kor4e-hero-tags{display:flex;flex-wrap:wrap;gap:8px;}
.kor4e-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.85rem;color:var(--text-dim);transition:all .2s;}
.kor4e-chip:hover{border-color:var(--cyan);color:var(--cyan);}

/* Signature hero visual: job-type labels curve along orbit arcs and travel
   around the ring, always staying upright. Rotation is driven entirely by
   JS in front-page.php recalculating each label's <path> "d" attribute
   every frame — NOT by a CSS or SMIL transform on an ancestor of the
   <textPath>. A CSS transform animating on a <textPath> ancestor breaks
   the text curve in Safari/WebKit, and merely translating a label around
   the ring (rather than recomputing its arc) leaves it carrying its
   original position's tilt to the new spot. Do not add "animation" or
   "transform" rules targeting the orbit groups — see front-page.php. */
.kor4e-hero-visual{display:flex;align-items:center;justify-content:center;}
.kor4e-orbit-svg{width:380px;height:380px;max-width:100%;overflow:visible;}

.kor4e-orbit-track{fill:none;stroke:var(--cyan);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:2 6;}
.kor4e-orbit-label-text{font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.09em;fill:var(--text);}

.kor4e-orbit-core-group{transform-box:view-box;transform-origin:200px 200px;animation:kor4e-orbit-breathe 4.5s ease-in-out infinite;}
.kor4e-orbit-core-glow{filter:drop-shadow(0 0 46px rgba(0,229,199,.45));}

@keyframes kor4e-orbit-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}

.kor4e-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;padding-top:32px;border-top:1px solid var(--border);}
.kor4e-stats div{text-align:center;}
.kor4e-stats strong{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--cyan);}
.kor4e-stats span{color:var(--muted);font-size:.85rem;}

/* ---- Sections ---- */
.kor4e-section{padding:64px 0;}
.kor4e-section-alt{background:var(--bg-alt);}
.kor4e-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;}
.kor4e-link-arrow{color:var(--cyan);font-weight:600;font-size:.9rem;}
.kor4e-page-head{padding:56px 0 32px;background:linear-gradient(180deg, rgba(123,97,255,.08), transparent);border-bottom:1px solid var(--border);}

/* ---- Job/Candidate Grid: 2 cols mobile / 3 tablet / 4 desktop (as required) ---- */
.kor4e-grid{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);}
@media (min-width:640px){.kor4e-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1024px){.kor4e-grid{grid-template-columns:repeat(4,1fr);}}
.kor4e-grid-candidates{grid-template-columns:repeat(2,1fr);}
@media (min-width:640px){.kor4e-grid-candidates{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1024px){.kor4e-grid-candidates{grid-template-columns:repeat(4,1fr);}}

/* ---- Cards ---- */
.kor4e-card{
	background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
	overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.kor4e-card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow-glow);}
.kor4e-card-media{height:120px;background:linear-gradient(135deg, var(--surface-2), var(--bg-alt));background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end;}
.kor4e-card-media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;color:var(--border-strong);}
.kor4e-tag{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:var(--cyan);font-size:.7rem;font-family:var(--font-mono);padding:4px 10px;border-radius:999px;border:1px solid rgba(0,229,199,.3);}
.kor4e-tag-alt{color:var(--violet);border-color:rgba(123,97,255,.3);}
.kor4e-card-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:6px;}
.kor4e-card-body h3{font-size:1rem;margin:0;}
.kor4e-card-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--text-dim);margin:0;}
.kor4e-card-time{color:var(--muted);margin:auto 0 0;font-size:.72rem;}

.kor4e-cand-card{align-items:center;text-align:center;padding:24px 16px;position:relative;}
.kor4e-cand-avatar{width:72px;height:72px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--surface-2);margin-bottom:12px;border:2px solid var(--border-strong);}
.kor4e-cand-card.is-featured{border-color:var(--amber);}
.kor4e-featured-badge{position:absolute;top:10px;right:10px;background:rgba(255,184,77,.15);color:var(--amber);border:1px solid rgba(255,184,77,.4);font-size:.68rem;padding:4px 10px;border-radius:999px;font-family:var(--font-mono);}

.kor4e-empty{grid-column:1/-1;text-align:center;padding:48px;color:var(--text-dim);}
.kor4e-empty a{color:var(--cyan);font-weight:600;}

/* ---- Filters sidebar ---- */
.kor4e-with-filters{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;}
.kor4e-filters h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:24px;}
.kor4e-filters h4:first-child{margin-top:0;}
.kor4e-filter-list{display:flex;flex-direction:column;gap:8px;}
.kor4e-filter-list .kor4e-chip{justify-content:space-between;}

/* ---- CTA band ---- */
.kor4e-cta{padding:64px 0;background:linear-gradient(135deg, rgba(0,229,199,.08), rgba(123,97,255,.08));border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.kor4e-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.kor4e-cta h2{margin-bottom:6px;}

/* ---- Forms ---- */
.kor4e-form{display:flex;flex-direction:column;gap:18px;}
.kor4e-form label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:600;color:var(--text-dim);}
.kor4e-form input[type=text],.kor4e-form input[type=email],.kor4e-form input[type=password],.kor4e-form input[type=file],.kor4e-form select,.kor4e-form textarea{
	background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:.95rem;outline:none;font-weight:400;
}
.kor4e-form input:focus,.kor4e-form select:focus,.kor4e-form textarea:focus{border-color:var(--cyan);}
.kor4e-password-wrap{position:relative;display:flex;}
.kor4e-password-wrap input[type=password],.kor4e-password-wrap input[type=text]{flex:1;padding-right:44px;}
.kor4e-password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;padding:6px 8px;font-size:1rem;line-height:1;cursor:pointer;color:var(--text-dim);border-radius:8px;}
.kor4e-password-toggle:hover{color:var(--text);background:var(--bg-alt);}
.kor4e-forgot-link{margin:-8px 0 0;text-align:right;font-size:.85rem;}
.kor4e-forgot-link a{color:var(--cyan);font-weight:600;}
.kor4e-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.kor4e-checkbox-inline{flex-direction:row !important;align-items:center;gap:10px !important;}
.kor4e-checkbox-inline input{width:auto;}
.kor4e-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;}
.kor4e-auth-panel h1{margin-bottom:6px;}
.kor4e-auth-switch{margin-top:18px;text-align:center;font-size:.9rem;}
.kor4e-auth-switch a{color:var(--cyan);font-weight:600;}
.kor4e-auth-gate{text-align:center;}
.kor4e-role-toggle{display:flex;gap:8px;margin-bottom:20px;background:var(--bg-alt);padding:6px;border-radius:12px;}
.kor4e-role-btn{flex:1;background:none;border:none;color:var(--text-dim);padding:10px;border-radius:8px;font-weight:600;font-size:.85rem;}
.kor4e-role-btn.is-active{background:var(--surface-2);color:var(--cyan);}

/* ---- Payment page ---- */
.kor4e-payment-grid{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;margin-top:24px;}
.kor4e-qr{background:#fff;padding:12px;border-radius:12px;}
.kor4e-payment-details{display:flex;flex-direction:column;gap:16px;}
.kor4e-copy-field{display:flex;gap:8px;}
.kor4e-copy-field input{flex:1;background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-family:var(--font-mono);font-size:.8rem;}
.kor4e-copy-btn{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);border-radius:8px;padding:0 14px;font-size:.8rem;font-weight:600;}
.kor4e-copy-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.kor4e-payment-note{color:var(--amber);}
.kor4e-payment-status{display:flex;align-items:center;gap:10px;background:var(--bg-alt);padding:12px 16px;border-radius:10px;color:var(--text-dim);font-size:.85rem;}
.kor4e-pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:kor4e-pulse 1.4s ease infinite;}
@keyframes kor4e-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,229,199,.5);}50%{opacity:.5;box-shadow:0 0 0 8px rgba(0,229,199,0);}}
.kor4e-payment-success{text-align:center;padding:24px 0;}
.kor4e-payment-check{width:64px;height:64px;border-radius:50%;background:rgba(34,197,94,.15);color:var(--success);border:2px solid var(--success);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 16px;}

/* ---- Dashboard ---- */
.kor4e-dashboard{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;}
.kor4e-dash-nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:2px;position:sticky;top:96px;min-width:0;}
.kor4e-dash-profile-mini{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:16px;}
.kor4e-dash-profile-mini strong{font-size:.9rem;}
.kor4e-dash-nav-links{display:flex;flex-direction:column;gap:2px;}
.kor4e-dash-nav a{padding:10px 12px;border-radius:8px;font-size:.88rem;color:var(--text-dim);font-weight:500;white-space:nowrap;}
.kor4e-dash-nav a:hover{background:var(--bg-alt);color:var(--text);}
.kor4e-dash-nav a.is-active{background:linear-gradient(135deg, rgba(0,229,199,.12), rgba(123,97,255,.12));color:var(--cyan);}
.kor4e-dash-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;min-height:400px;min-width:0;}
.kor4e-dash-stats{display:flex;flex-wrap:wrap;gap:24px;margin:20px 0 28px;}
.kor4e-dash-stats div{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:16px 24px;}
.kor4e-dash-stats strong{display:block;font-size:1.6rem;color:var(--cyan);}
.kor4e-dash-stats span{color:var(--muted);font-size:.8rem;}
.kor4e-dash-list{display:flex;flex-direction:column;gap:8px;}
.kor4e-dash-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;font-size:.9rem;}
.kor4e-dash-row:hover{border-color:var(--cyan);}
.kor4e-status-pill{font-family:var(--font-mono);font-size:.7rem;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-dim);}
.kor4e-status-publish{color:var(--success);background:rgba(34,197,94,.12);}
.kor4e-status-pending{color:var(--amber);background:rgba(255,184,77,.12);}
.kor4e-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;}
.kor4e-plan-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;}
.kor4e-plan-card strong{font-size:1.6rem;font-family:var(--font-display);}

/* ---- Single listing ---- */
.kor4e-single-header{display:flex;gap:24px;align-items:center;margin-bottom:32px;}
.kor4e-single-media{width:120px;height:120px;border-radius:var(--radius);background-size:cover;background-position:center;flex-shrink:0;}
.kor4e-single-tags{display:flex;gap:8px;margin-bottom:10px;}
.kor4e-single-tags .kor4e-tag{position:static;}
.kor4e-single-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
.kor4e-single-body{color:var(--text);}
.kor4e-single-body p{color:var(--text-dim);}
.kor4e-single-side{display:flex;flex-direction:column;gap:20px;}
.kor4e-employer{display:flex;gap:10px;align-items:center;margin-bottom:16px;}
.kor4e-share{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:.8rem;color:var(--muted);}
.kor4e-share a{background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:4px 10px;}
.kor4e-profile-hero{display:flex;gap:24px;align-items:center;margin-bottom:32px;}

/* ---- Footer ---- */
.kor4e-footer{background:var(--bg-alt);border-top:1px solid var(--border);margin-top:40px;}
.kor4e-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-top:56px;padding-bottom:32px;}
.kor4e-footer-brand p{max-width:280px;margin-top:10px;}
.kor4e-footer h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.kor4e-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.kor4e-footer ul a{color:var(--text-dim);font-size:.9rem;}
.kor4e-footer ul a:hover{color:var(--cyan);}
.kor4e-footer-bottom{border-top:1px solid var(--border);padding:20px 0;text-align:center;color:var(--muted);font-size:.82rem;}

/* ---- Footer "Footer Column" widget area (Appearance → Widgets) ----
   Whatever an admin drops in here — classic widgets or blocks — needs to
   inherit the dark theme instead of rendering with raw browser/Gutenberg
   defaults (white search boxes, unbounded-width inputs). min-width:0 stops
   a wide default input from forcing this grid column past the mobile
   viewport, which was the direct cause of the site feeling "oversized" on
   phones. */
.kor4e-footer-widget-col{min-width:0;}
.kor4e-footer-widget{margin-bottom:20px;min-width:0;}
.kor4e-footer-widget:last-child{margin-bottom:0;}
.kor4e-footer-widget .widget-title,
.kor4e-footer-widget .wp-block-heading,
.kor4e-footer-widget .wp-block-search__label{
	font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
	font-family:var(--font-display);font-weight:700;margin:0 0 12px;display:block;
}
.kor4e-footer-widget input[type="search"],
.kor4e-footer-widget input[type="text"]{
	width:100%;max-width:100%;box-sizing:border-box;
	background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;
	padding:10px 12px;color:var(--text);font-family:inherit;font-size:.9rem;outline:none;
}
.kor4e-footer-widget input[type="search"]:focus,
.kor4e-footer-widget input[type="text"]:focus{border-color:var(--cyan);}
.kor4e-footer-widget .search-form,
.kor4e-footer-widget .wp-block-search__inside-wrapper{
	display:flex;flex-wrap:wrap;gap:8px;max-width:100%;
}
.kor4e-footer-widget button,
.kor4e-footer-widget input[type="submit"],
.kor4e-footer-widget .wp-block-search__button{
	background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);
	border-radius:8px;padding:10px 16px;font-size:.85rem;font-weight:600;flex-shrink:0;
}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
	.reveal{opacity:1;transform:none;transition:none;}
	.kor4e-orbit-core-group{animation:none;}
	/* Orbit label rotation is frozen by the JS in front-page.php checking
	   prefers-reduced-motion directly, since it isn't a CSS animation. */
	.kor4e-pulse-dot{animation:none;}
	html{scroll-behavior:auto;}
}

/* ---- Responsive ---- */
.kor4e-hide-mobile{display:inline-flex;}
@media (max-width:1023px){
	.kor4e-with-filters{grid-template-columns:1fr;}
	.kor4e-filters{display:flex;flex-wrap:wrap;gap:8px;}
	.kor4e-filters h4{width:100%;}
	.kor4e-dashboard{grid-template-columns:1fr;}
	.kor4e-dash-nav{position:static;}
	.kor4e-dash-profile-mini{margin-bottom:12px;padding-bottom:12px;}
	.kor4e-dash-nav-links{
		flex-direction:row;
		gap:6px;
		overflow-x:auto;
		scroll-snap-type:x proximity;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		margin:0 -16px;
		padding:0 16px 2px;
		mask-image:linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
		-webkit-mask-image:linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
	}
	.kor4e-dash-nav-links::-webkit-scrollbar{display:none;}
	.kor4e-dash-nav-links a{flex:0 0 auto;scroll-snap-align:start;}
	.kor4e-single-grid{grid-template-columns:1fr;}
	.kor4e-plan-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
	.kor4e-hero{padding-top:32px;}
	.kor4e-hero-inner{grid-template-columns:1fr;}
	.kor4e-hero-visual{order:-1;}
	.kor4e-orbit-svg{width:280px;height:280px;}
	.kor4e-stats{grid-template-columns:repeat(2,1fr);}
	.kor4e-footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
	/* backdrop-filter on the header creates a new containing block for any
	   position:fixed descendant in it (the nav drawer lives inside the
	   header markup so it renders inline on desktop). That was collapsing
	   the drawer's top/bottom offsets down to the header's own small box
	   instead of the real viewport, shrinking it to almost nothing. Drop
	   the blur on mobile and use a solid header background instead. */
	.kor4e-header{
		background:var(--surface);
		backdrop-filter:none;
		-webkit-backdrop-filter:none;
	}

	.kor4e-search{display:none;}
	.kor4e-hide-mobile{display:none;}
	.kor4e-mobile-toggle{display:flex;}
	.kor4e-form-row{grid-template-columns:1fr;}
	.kor4e-payment-grid{grid-template-columns:1fr;}
	.kor4e-plan-grid{grid-template-columns:1fr 1fr;}
	.kor4e-footer-grid{grid-template-columns:1fr;}

	/* Hero search: stack into a clean full-width column instead of
	   squeezing input + button into one row and wrapping mid-word. */
	.kor4e-hero-search{flex-direction:column;}
	.kor4e-hero-search input,
	.kor4e-hero-search button{width:100%;min-width:0;}

	/* Header: stack into two rows so title, Sign In, Get Started and the
	   menu icon never get squeezed onto one line and clipped off-screen. */
	.kor4e-header-inner{
		flex-wrap:wrap;
		height:auto;
		padding-top:14px;
		padding-bottom:14px;
		row-gap:10px;
	}
	.kor4e-logo{flex:1 1 auto;}
	.kor4e-header-actions{
		flex:1 1 100%;
		order:3;
		justify-content:flex-end;
		flex-wrap:wrap;
	}
	.kor4e-header-actions .btn{padding:9px 16px;font-size:.88rem;}

	/* Dashboard: desktop padding (32px) feels oversized on a narrow phone
	   screen and the stat row needs to wrap instead of forcing width. */
	.kor4e-dash-content{padding:20px;}
	.kor4e-dash-nav{padding:12px;}
	.kor4e-dash-nav-links{
		margin:0 -12px;
		padding:0 12px 2px;
		mask-image:linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
		-webkit-mask-image:linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
	}
	.kor4e-dash-stats{gap:12px;}
	.kor4e-dash-stats div{padding:12px 16px;}
	.kor4e-panel{padding:20px;}

	/* Hamburger nav: half-width slide-in panel that hugs its own content
	   height instead of stretching to the bottom of the screen. The dim
	   overlay (below) still covers the full remaining page so the rest of
	   the site stays visually "closed off" while it's open. */
	.kor4e-nav{
		position:fixed;
		top:var(--kor4e-header-h);
		right:0;
		width:50%;
		max-width:320px;
		max-height:calc(100vh - var(--kor4e-header-h) - 24px);
		background:var(--surface-2);
		border-left:1px solid var(--border);
		border-bottom:1px solid var(--border);
		border-bottom-left-radius:16px;
		box-shadow:-16px 16px 40px rgba(0,0,0,.5);
		padding:20px 20px 20px;
		overflow-y:auto;
		z-index:210;
		transform:translateX(100%);
		transition:transform .28s ease;
	}
	body.kor4e-mobile-nav-open .kor4e-nav{transform:translateX(0);}
	.kor4e-nav-list{flex-direction:column;gap:2px;}
	.kor4e-nav-list a{display:block;padding:12px 4px;border-top:1px solid var(--border);}
	.kor4e-nav-list li:first-child a{border-top:none;}

	.kor4e-nav-close{
		position:absolute;
		top:14px;right:16px;
		width:36px;height:36px;
		display:flex;align-items:center;justify-content:center;
		background:var(--surface);border:1px solid var(--border);border-radius:50%;
		color:var(--text);font-size:1.1rem;line-height:1;
	}
	.kor4e-nav-close:hover{border-color:var(--cyan);}

	/* Dims the rest of the site below the header while the drawer is open —
	   the header itself is left uncovered. */
	.kor4e-nav-overlay{
		position:fixed;
		top:var(--kor4e-header-h);
		left:0;right:0;bottom:0;
		background:rgba(0,0,0,.55);
		z-index:205;
		opacity:0;visibility:hidden;
		transition:opacity .25s ease;
	}
	body.kor4e-mobile-nav-open .kor4e-nav-overlay{opacity:1;visibility:visible;}
	body.kor4e-mobile-nav-open{overflow:hidden;}
}
@media (min-width:768px){
	.kor4e-nav-overlay,.kor4e-nav-close{display:none;}
}