/* ==========================================================================
   Premium layout & components — header, hero, sections, footer
   Loaded after base.css. Owns all page-chrome and landing styling.
   ========================================================================== */

/* Reset list bullets inside chrome (nav, footer menus) */
.main-navigation ul,
.site-footer ul,
.site-footer-bottom ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body { letter-spacing: -0.01em; }

h1, h2, h3 { letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--color-border-soft);
}

.site-header-content {
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--space-md) var(--space-md);
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.site-header-content { padding-inline: var(--space-xl); }
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

/* When no custom logo, the text title is the brand */
.site-title {
	font-size: var(--font-size-xl);
	font-weight: 800;
	line-height: 1;
}

.site-title a {
	color: var(--color-primary);
}

.site-title a:hover { text-decoration: none; opacity: 0.85; }

/* Premium tricolor gradient wordmark (Sora) */
.brand-lockup {
	display: inline-flex;
	align-items: center;
}
.brand-lockup:hover { text-decoration: none; opacity: 0.9; }
.brand-word {
	font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1;
	color: #1E40AF; /* fallback if background-clip unsupported */
	background: linear-gradient(95deg, #1E40AF 0%, #2563EB 26%, #F2B705 52%, #F0641E 72%, #CE1126 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (max-width: 480px) {
	.brand-word { font-size: 1.25rem; }
}
@media (max-width: 480px) {
	.brand-word { font-size: 1.1rem; }
}

.custom-logo { max-height: 40px; width: auto; }

/* Primary nav */

.main-navigation {
	margin-left: auto;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.main-navigation a {
	display: inline-block;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	color: var(--color-text-soft);
	font-weight: 600;
	font-size: var(--font-size-sm);
	transition: all var(--transition-fast);
}

.main-navigation a:hover {
	color: var(--color-primary);
	background: var(--color-bg-alt);
	text-decoration: none;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--color-primary);
	background: var(--color-bg-alt);
}

.site-header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

/* Language switch (header pill) */
.lang-switch {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 10px; border-radius: var(--radius-full);
	border: 1px solid var(--color-border); background: #fff;
	font-weight: 700; font-size: 0.8rem; color: var(--color-text-soft);
	line-height: 1; transition: all var(--transition-fast);
}
.lang-switch:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.lang-switch .lang-flag { font-size: 1rem; }

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; padding: 0 9px; cursor: pointer;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--color-ink, #0F172A); border-radius: 2px; transition: all var(--transition-fast); }

/* Mobile slide-in drawer */
.mobile-drawer { position: fixed; inset: 0; z-index: var(--z-modal, 1000); visibility: hidden; }
.mobile-drawer.is-open { visibility: visible; }
.mobile-drawer-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); opacity: 0; transition: opacity .25s ease; }
.mobile-drawer.is-open .mobile-drawer-overlay { opacity: 1; }
.mobile-drawer-panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px);
	background: #fff; box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
	transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column; padding: 18px; overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--color-border-soft); margin-bottom: 8px; }
.drawer-close { font-size: 2rem; line-height: 1; background: none; border: none; color: var(--color-muted); cursor: pointer; padding: 0 6px; }
.mobile-drawer-nav { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; }
.mobile-drawer-nav a { display: block; padding: 14px 8px; font-weight: 700; font-size: 1.05rem; color: var(--color-ink, #0F172A); border-bottom: 1px solid var(--color-border-soft); }
.mobile-drawer-nav a:hover { color: var(--color-primary); text-decoration: none; }
.mobile-drawer-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mobile-drawer-actions .btn-block { width: 100%; text-align: center; }
.mobile-drawer-lang { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-soft); }

/* Mobile: hide inline nav + show hamburger */
@media (max-width: 860px) {
	.site-header-content { gap: var(--space-sm); }
	.main-navigation { display: none; }
	.site-header-actions > .btn { display: none; }
	.site-header-actions .lang-switch { display: inline-flex; }
	.nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   Buttons (premium upgrade — layered on base.css)
   -------------------------------------------------------------------------- */

.btn {
	border-radius: var(--radius-full);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.btn-primary {
	background-color: var(--color-primary); /* blue (solid fallback) */
	background-image: var(--gradient-primary);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(30, 64, 175, 0.6);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(30, 64, 175, 0.7);
}

.btn-secondary {
	background-color: var(--color-red); /* red (solid fallback) */
	background-image: var(--gradient-cta);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(206, 17, 38, 0.5);
}
.btn-secondary:hover { transform: translateY(-2px); }

.btn-outline {
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.btn-large { padding: 14px 28px; font-size: var(--font-size-base); }

/* --------------------------------------------------------------------------
   Cards (premium upgrade)
   -------------------------------------------------------------------------- */

.card {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero-section {
	position: relative;
	background:
		radial-gradient(900px 380px at 50% -20%, rgba(30, 64, 175, 0.12), transparent 70%),
		linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-alt) 100%);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-xl);
	padding: var(--space-3xl) var(--space-lg);
	margin-top: var(--space-xl);
	overflow: hidden;
}

.hero-section h1 {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.05;
	max-width: 16ch;
	margin-inline: auto;
	margin-bottom: var(--space-md);
}

.hero-section > p {
	font-size: var(--font-size-lg);
	color: var(--color-text-soft);
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--space-xl);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Generic sections
   -------------------------------------------------------------------------- */

.stats-section,
.featured-jobs,
.cta-section { margin-top: var(--space-3xl); }

.featured-jobs > h2,
.section-title {
	font-size: var(--font-size-3xl);
	text-align: center;
}
.featured-jobs > p { text-align: center; }

/* Stats grid */

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

@media (max-width: 720px) {
	.stats-grid { grid-template-columns: 1fr; }
}

.stat-card { text-align: center; padding-block: var(--space-2xl); }

.stat-number {
	font-size: var(--font-size-4xl);
	font-weight: 800;
	line-height: 1;
	color: var(--color-primary);
	margin-bottom: var(--space-sm);
}

.stat-label { color: var(--color-muted); font-weight: 600; }

/* Jobs grid */

.jobs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}

.job-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.job-card .job-title,
.job-card-title { font-size: var(--font-size-lg); font-weight: 700; }
.job-card-title a { color: var(--color-text); }
.job-card-title a:hover { color: var(--color-primary); text-decoration: none; }
.job-card .btn { margin-top: auto; align-self: flex-start; }

/* CTA */

.cta-section {
	background-color: var(--color-primary) !important; /* solid fallback */
	background-image: var(--gradient-cta) !important;
	border: none !important;
	border-radius: var(--radius-xl);
	padding: var(--space-3xl) var(--space-lg);
	box-shadow: var(--shadow-xl);
}
.cta-section:hover { transform: none; }
.cta-section h2 { color: #fff; font-size: var(--font-size-3xl); }
.cta-section p { color: rgba(255, 255, 255, 0.9); }
.cta-section .btn-secondary { background: #fff; color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Archive / listings
   -------------------------------------------------------------------------- */

.jobs-archive {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-xl);
	align-items: start;
}

@media (max-width: 900px) {
	.jobs-archive { grid-template-columns: 1fr; }
}

.archive-sidebar .card { position: sticky; top: 96px; }
.filter-group label { font-weight: 400; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.jobs-list { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Listings as an image grid */
.jobs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-lg);
}
.jobs-grid .job-card { padding: 0; overflow: hidden; gap: 0; }
.job-card-media {
	position: relative; display: block; aspect-ratio: 16 / 9; background: #EEF2F7; overflow: hidden;
}
.job-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.job-card:hover .job-card-media img { transform: scale(1.04); }
.job-card-media-fallback {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #EAF0FB 0%, #F8FAFC 100%);
}
.job-card-media-fallback .brand-word { font-size: 1.2rem; opacity: .7; }
.job-card-media-badge { position: absolute; top: 10px; left: 10px; }
.job-card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-lg); flex: 1; }
.job-card-company { font-weight: 600; }
.job-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); }
.jobs-grid .job-card .btn { margin-top: 0; align-self: auto; }
.job-card-foot .job-salary-preview { font-size: 1.05rem; }

.job-meta { color: var(--color-muted); }

.salary-badge,
.badge {
	border-radius: var(--radius-full);
	padding: 4px 12px;
}

/* Pagination */

.pagination,
.nav-links {
	display: flex;
	gap: var(--space-xs);
	justify-content: center;
	margin-top: var(--space-2xl);
	flex-wrap: wrap;
}

.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-md);
	background: #fff;
	border: 1px solid var(--color-border);
	font-weight: 600;
	color: var(--color-text-soft);
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--gradient-cta);
	color: #fff;
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--space-4xl);
	background: #0F172A;
	color: #CBD5E1;
}

.site-footer-content { padding-block: var(--space-3xl) var(--space-xl); }

.footer-widgets {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: var(--space-2xl);
}
.footer-brand { max-width: 340px; }
.footer-brand-lockup { margin-bottom: var(--space-md); }
.footer-brand .brand-word { font-size: 1.4rem; }

@media (max-width: 980px) {
	.footer-widgets { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
	.footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
	.footer-widgets { grid-template-columns: 1fr; }
}

.footer-column h3 {
	color: #fff;
	font-size: var(--font-size-base);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-md);
}

.footer-column p { color: #94A3B8; line-height: 1.7; }
.footer-column ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-column a { color: #CBD5E1; }
.footer-column a:hover { color: #fff; text-decoration: none; }

.site-footer-bottom {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: #94A3B8;
	font-size: var(--font-size-sm);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-sm);
}
.site-footer-bottom p { margin: 0; }
.footer-made { color: #CBD5E1; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
	font-size: var(--font-size-sm);
	color: var(--color-muted);
	margin-bottom: var(--space-lg);
}
.breadcrumbs a { color: var(--color-text-soft); }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: none; }

.breadcrumbs-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
}
.breadcrumbs-list .breadcrumb-item {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
}
.breadcrumbs-list .breadcrumb-item:not(:last-child)::after {
	content: "/";
	color: var(--color-border);
}
.breadcrumbs-list .breadcrumb-item.active { color: var(--color-text); font-weight: 600; }

/* Main spacing so content clears the sticky header nicely */
.site-main { min-height: 60vh; }
.site-main > .container:first-child { padding-top: var(--space-xl); }

/* Entry / blog list */
.posts-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.entry-title { font-size: var(--font-size-xl); }
.entry-title a { color: var(--color-text); }
.entry-title a:hover { color: var(--color-primary); text-decoration: none; }

/* --------------------------------------------------------------------------
   Prose (page.php / single.php content)
   -------------------------------------------------------------------------- */

.page-title { font-size: var(--font-size-3xl); }
.page-header { margin-bottom: var(--space-lg); }
.entry-featured img { border-radius: var(--radius-lg); width: 100%; }

.entry-content {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: var(--color-text-soft);
}
.entry-content > * + * { margin-top: var(--space-md); }
.entry-content h2 {
	font-size: var(--font-size-2xl);
	color: var(--color-text);
	margin-top: var(--space-2xl);
}
.entry-content h3 {
	font-size: var(--font-size-xl);
	color: var(--color-text);
	margin-top: var(--space-xl);
}
.entry-content ul,
.entry-content ol { margin-left: 1.25rem; }
.entry-content li { margin-bottom: var(--space-xs); }
.entry-content a { color: var(--color-primary); text-decoration: underline; }
.entry-content a:hover { color: var(--color-primary-dark); }
.entry-content img { border-radius: var(--radius-lg); margin-block: var(--space-lg); }
.entry-content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-lg);
	margin-block: var(--space-lg);
	color: var(--color-muted);
	font-style: italic;
}
.entry-content hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin-block: var(--space-2xl);
}

/* Lead paragraph helper for marketing pages */
.lead { font-size: var(--font-size-xl); color: var(--color-text-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Auth pages (login / register / lost password)
   -------------------------------------------------------------------------- */

/* Two-column auth layout (form + sales/benefits aside) */
.auth-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: center;
	max-width: 980px;
	margin-inline: auto;
}
.auth-aside {
	background: linear-gradient(150deg, #1E3A8A 0%, #1E40AF 55%, #2563EB 100%);
	color: #fff;
	border-radius: var(--radius-xl, 18px);
	padding: var(--space-2xl);
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.auth-aside-brand { margin-bottom: var(--space-lg); }
.auth-aside-brand .brand-word { -webkit-text-fill-color: #fff; background: none; color: #fff; }
.auth-aside-title { color: #fff; font-size: 1.6rem; line-height: 1.25; margin-bottom: var(--space-lg); }
.auth-benefits { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-benefits li { position: relative; padding-left: 30px; line-height: 1.45; color: #E0E7FF; }
.auth-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: rgba(255,255,255,.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: #fff; }
.auth-aside-trust { color: #C7D2FE; font-size: .9rem; margin: 0; }
.auth-aside-trust a { color: #fff; font-weight: 700; text-decoration: underline; }

@media (max-width: 820px) {
	.auth-split { grid-template-columns: 1fr; max-width: 460px; gap: var(--space-lg); }
	.auth-aside { display: none; }
}

.auth-card {
	max-width: 460px;
	width: 100%;
	margin-inline: auto;
	padding: var(--space-2xl);
}
.auth-head { margin-bottom: var(--space-xl); }
.auth-head h1 { font-size: var(--font-size-2xl); }
.auth-head p { color: var(--color-muted); }

.auth-form .form-group { margin-bottom: var(--space-md); }

.btn-block { display: flex; width: 100%; justify-content: center; }

.auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	font-size: var(--font-size-sm);
}
.auth-remember {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 500;
	color: var(--color-text-soft);
}
.auth-remember input { width: auto; }
.auth-link { color: var(--color-primary); font-weight: 600; }

.auth-alt { margin-top: var(--space-lg); color: var(--color-text-soft); }
.auth-alt a { font-weight: 700; }
.auth-legal { margin-top: var(--space-md); }
.auth-legal a { color: var(--color-text-soft); text-decoration: underline; }

/* Upsell pill in the header (tricolor yellow accent — dark text for contrast) */
.btn-upsell {
	background: linear-gradient(135deg, #FFD21E 0%, #F2B705 100%);
	color: #3B2A00;
	box-shadow: 0 8px 20px -8px rgba(242, 183, 5, 0.6);
}
.btn-upsell:hover { transform: translateY(-2px); color: #3B2A00; }

/* Contact form (form-only page) */
.contact-card { max-width: 560px; }
.contact-form textarea { min-height: 150px; }
.dtuk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pricing cross-sell card */
.pricing-crosslink { max-width: 640px; margin-inline: auto; }
.pricing-crosslink h3 { font-size: var(--font-size-xl); }

/* Single job — premium salary card (blue gradient, white text) */
.job-salary {
	background: var(--gradient-primary);
	border: none !important;
	color: #fff;
}
.job-salary:hover { transform: none; box-shadow: var(--shadow-md); }
.job-salary .text-sm { color: rgba(255, 255, 255, 0.85); }

/* Semantic background utilities (restored) */
.bg-success { background-color: var(--color-success); }
.bg-danger  { background-color: var(--color-danger); }
.bg-warning { background-color: var(--color-warning); }

/* --------------------------------------------------------------------------
   Landing sections (front-page.php)
   -------------------------------------------------------------------------- */

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-soft);
	margin-bottom: var(--space-lg);
}

.hero-trust {
	margin-top: var(--space-lg);
	color: var(--color-muted);
	font-size: var(--font-size-sm);
}

.section-head { text-align: center; max-width: 56ch; margin-inline: auto; margin-bottom: var(--space-2xl); }
.section-head h2 { font-size: var(--font-size-3xl); }
.section-head p { color: var(--color-text-soft); font-size: var(--font-size-lg); }

.steps-grid,
.features-grid {
	display: grid;
	gap: var(--space-lg);
}
.steps-grid { grid-template-columns: repeat(3, 1fr); }
.features-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 760px) {
	.steps-grid { grid-template-columns: 1fr; }
}

.step { text-align: center; }
.step-num,
.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
	color: var(--color-primary);
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: var(--space-md);
}
.feature-card h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-xs); }
.feature-card p { color: var(--color-muted); font-size: var(--font-size-sm); margin: 0; }

/* Split: candidates vs employers */
.split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}
@media (max-width: 820px) { .split-grid { grid-template-columns: 1fr; } }

.split-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-2xl); }
.split-card h3 { font-size: var(--font-size-2xl); }
.split-card ul { list-style: none; margin: var(--space-sm) 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.split-card li { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--color-text-soft); }
.split-card li::before { content: "✓"; color: var(--color-success); font-weight: 800; }
.split-card .btn { margin-top: auto; align-self: flex-start; }
.split-card--accent { background: var(--gradient-cta); border: none; }
.split-card--accent h3,
.split-card--accent li { color: #fff; }
.split-card--accent li::before { color: #fff; }
.split-card--accent .btn-secondary { background: #fff; color: var(--color-primary); }

/* ── Registration account-type picker ─────────────────────────── */

.account-types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm, 8px);
}

@media (max-width: 560px) {
	.account-types { grid-template-columns: 1fr; }
}

.account-type { display: block; cursor: pointer; margin: 0; }
.account-type input { position: absolute; opacity: 0; pointer-events: none; }

.account-type-card {
	display: block;
	height: 100%;
	border: 2px solid var(--color-border, #E2E8F0);
	border-radius: 14px;
	padding: 14px 12px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

.account-type:hover .account-type-card { border-color: var(--color-primary, #1E40AF); transform: translateY(-2px); }

.account-type input:checked + .account-type-card {
	border-color: var(--color-primary, #1E40AF);
	box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
	background: var(--color-bg-alt, #EAF0FB);
}

.account-type-title { display: block; font-weight: 700; margin-bottom: 2px; }
.account-type-desc { display: block; font-size: 0.82rem; color: var(--color-muted, #64748B); line-height: 1.3; }

/* ── Premium single listing (job / service) ───────────────────── */

.listing-single { max-width: 1100px; margin: 0 auto; }
.listing-hero { margin-bottom: var(--space-lg); }
.listing-title { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; margin-bottom: 10px; }
.listing-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--color-muted, #64748B); font-size: 0.9rem; margin-bottom: 10px; }

.listing-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: var(--space-xl, 32px);
	align-items: start;
}
@media (max-width: 880px) { .listing-layout { grid-template-columns: 1fr; } }

.listing-image {
	border-radius: var(--radius-xl, 20px);
	overflow: hidden;
	box-shadow: 0 18px 40px -20px rgba(15,23,42,0.35);
	margin-bottom: var(--space-lg);
}
.listing-image img { display: block; width: 100%; height: auto; }
.listing-content { font-size: 1.02rem; }
.listing-block { padding-top: var(--space-lg); margin-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.listing-block-title { font-size: 1.15rem; margin-bottom: var(--space-sm); }
.listing-requirements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.listing-requirements li { position: relative; padding-left: 28px; line-height: 1.5; }
.listing-requirements li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-primary, #1E40AF); font-weight: 800; }

.listing-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-md); }
@media (max-width: 880px) { .listing-aside { position: static; } }
.listing-aside .job-salary { margin: 0; }
.listing-apply { padding: var(--space-lg); text-align: center; }

/* Company / self-employed card */
.company-card { padding: var(--space-lg); }
.company-card-head { display: flex; gap: 14px; align-items: center; }
.company-logo {
	width: 60px; height: 60px; border-radius: 14px; object-fit: cover;
	border: 1px solid var(--color-border); background: #fff; flex-shrink: 0;
}
.company-logo-fallback {
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 1.5rem; color: #fff;
	background: var(--gradient-primary, linear-gradient(135deg,#2853C4,#1E40AF));
	border: none;
}
.company-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted, #64748B); }
.company-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.company-tagline { font-size: 0.85rem; color: var(--color-muted, #64748B); margin-top: 2px; }
.company-contacts { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.company-contact {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.92rem; color: var(--color-ink, #0F172A); text-decoration: none;
	word-break: break-word;
}
.company-contact:hover { color: var(--color-primary, #1E40AF); }
.company-contact-primary { font-weight: 700; font-size: 1.05rem; color: var(--color-primary, #1E40AF); }
.company-contact-whatsapp { color: #128C7E; font-weight: 600; }

/* ── Company social icons row ─────────────────────────────────── */
.company-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.company-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px;
	border: 1px solid var(--color-border); background: #fff;
	font-size: 1.15rem; text-decoration: none; line-height: 1;
	transition: transform .12s, box-shadow .12s, border-color .12s;
}
.company-social:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,.12); border-color: var(--color-primary, #1E40AF); }

/* ── Share buttons (single listing) ───────────────────────────── */
.share-card { padding: var(--space-md) var(--space-lg); }
.share-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted, #64748B); margin-bottom: 10px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 12px; border-radius: 10px; border: 1px solid var(--color-border);
	background: #fff; color: var(--color-ink, #0F172A); font-size: 0.86rem; font-weight: 600;
	text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}
.share-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(15,23,42,0.35); }
.share-btn span { font-weight: 800; }
.share-wa:hover { background: #25D366; color: #fff; border-color: #25D366; }
.share-fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.share-tw:hover { background: #000; color: #fff; border-color: #000; }
.share-li:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.share-em:hover { background: #475569; color: #fff; border-color: #475569; }
.share-copy:hover { background: var(--color-primary, #1E40AF); color: #fff; border-color: var(--color-primary, #1E40AF); }