/* JLK Staffing — component styles theme.json can't express. Keep this file small. */

:root {
	--jlk-ink: var(--wp--preset--color--ink);
	--jlk-paper: var(--wp--preset--color--paper);
	--jlk-brass: var(--wp--preset--color--brass);
	--jlk-line: var(--wp--preset--color--line);
	--jlk-radius: var(--wp--custom--radius--md, 10px);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--jlk-brass); outline-offset: 2px; }
.screen-reader-text:focus { clip: auto; height: auto; width: auto; padding: .6rem 1rem; background: #fff; z-index: 1000; }

/* ── Header ─────────────────────────────────────────── */
.jlk-topbar { font-size: var(--wp--preset--font-size--xs); letter-spacing: .02em; }
.jlk-topbar a { color: inherit; text-decoration: none; }
.jlk-topbar a:hover { text-decoration: underline; }
.jlk-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(15,31,58,.08); backdrop-filter: saturate(140%) blur(6px); }
.admin-bar .jlk-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .jlk-header { top: 46px; } .jlk-topbar .jlk-hide-sm { display: none; } }
.jlk-header .wp-block-site-logo img { max-height: 44px; width: auto; }
.jlk-header .wp-block-navigation__submenu-container { border: 1px solid var(--jlk-line) !important; border-radius: var(--jlk-radius); box-shadow: var(--wp--preset--shadow--card); padding: .4rem 0; min-width: 230px !important; }
.jlk-header .wp-block-navigation__submenu-container a { padding: .5rem 1rem !important; }
@media (max-width: 899px) { .jlk-header .jlk-header-cta { display: none; } }

/* ── Type helpers ───────────────────────────────────── */
.is-style-jlk-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 500;
	color: var(--wp--preset--color--brass-dark);
}
.has-ink-background-color .is-style-jlk-eyebrow,
.has-ink-2-background-color .is-style-jlk-eyebrow { color: var(--wp--preset--color--brass-light); }
.jlk-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.55; }
.has-ink-background-color .jlk-lede { color: #D6DCE6; }

/* ── Buttons ────────────────────────────────────────── */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-jlk-brass .wp-block-button__link { background: var(--wp--preset--color--brass-light); color: var(--jlk-ink); }
.wp-block-button.is-style-jlk-brass .wp-block-button__link:hover { background: #F1D592; color: var(--jlk-ink); }
.wp-block-button.is-style-jlk-ghost .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.wp-block-button.is-style-jlk-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.08); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; color: var(--jlk-ink); }

/* ── Cards & lists ──────────────────────────────────── */
.is-style-jlk-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jlk-line);
	border-radius: var(--jlk-radius);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--card);
}
.has-ink-background-color .is-style-jlk-card { background: var(--wp--preset--color--ink-2); border-color: rgba(255,255,255,.12); box-shadow: none; color: #E5E9F0; }
.has-ink-background-color .is-style-jlk-card :where(h2,h3,h4,h5) { color: #fff; }
.wp-block-columns.jlk-equal > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-columns.jlk-equal > .wp-block-column > .is-style-jlk-card { flex: 1; }
.is-style-jlk-card .wp-block-buttons:last-child { margin-top: auto; padding-top: .5rem; }

ul.is-style-jlk-checks { list-style: none; padding-left: 0; }
ul.is-style-jlk-checks li { position: relative; padding-left: 1.75rem; margin-bottom: .45rem; }
ul.is-style-jlk-checks li::before {
	content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: 1rem; border-radius: 50%;
	background: var(--wp--preset--color--teal-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230E6E6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.has-ink-background-color ul.is-style-jlk-checks li::before { background-color: rgba(255,255,255,.14); }

/* Numbered step/index chip used in cards */
.jlk-index { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; color: var(--wp--preset--color--brass-dark); }

/* ── Hero ───────────────────────────────────────────── */
.jlk-hero { position: relative; overflow: hidden; }
.jlk-hero::after { /* subtle grid texture, no image request */
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.jlk-hero > * { position: relative; z-index: 1; }
.jlk-hero h1 { color: #fff; }
.jlk-hero .wp-block-image img { border-radius: var(--wp--custom--radius--lg); aspect-ratio: 1 / 1; object-fit: cover; object-position: 100% 35%; }
/* Crop focus for hero/card photos: pick in the Image block's Styles panel */
.wp-block-image.is-style-jlk-focus-left img { object-position: 0% 35% !important; }
.wp-block-image.is-style-jlk-focus-center img { object-position: 50% 35% !important; }
.wp-block-image.is-style-jlk-focus-right img { object-position: 100% 35% !important; }
@media (max-width: 781px) { .jlk-hero .jlk-hero-media { display: none; } }

/* Stat strip — real numbers in the HTML, no animated zeros */
.jlk-stats { border-top: 1px solid rgba(255,255,255,.14); }
.jlk-stat-num { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); line-height: 1; color: var(--wp--preset--color--brass-light); margin: 0; }
.jlk-stat-label { font-size: var(--wp--preset--font-size--xs); color: #C5CEDB; margin-top: .4rem; }
.jlk-stats-light .jlk-stat-num { color: var(--jlk-ink); }
.jlk-stats-light .jlk-stat-label { color: var(--wp--preset--color--slate); }

/* Sector strip (Private / Government) */
.jlk-badge {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .06em; text-transform: uppercase;
	padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--jlk-line); background: var(--wp--preset--color--white);
}

/* ── Leader card ────────────────────────────────────── */
.jlk-leader img { border-radius: var(--wp--custom--radius--lg); aspect-ratio: 1; object-fit: cover; }

/* ── Footer ─────────────────────────────────────────── */
.jlk-footer a { color: #D6DCE6; text-decoration: none; }
.jlk-footer a:hover { color: #fff; text-decoration: underline; }
.jlk-footer .wp-block-social-links .wp-social-link { background: rgba(255,255,255,.08) !important; }
.jlk-footer h2, .jlk-footer h3 { color: #fff; }
.jlk-footer .jlk-fine { color: #9AA6B8; }

/* ── Blog cards ─────────────────────────────────────── */
.jlk-post-card .wp-block-post-featured-image img { border-radius: var(--jlk-radius); aspect-ratio: 16 / 9; object-fit: cover; }
.jlk-post-card .wp-block-post-title a { text-decoration: none; color: var(--jlk-ink); }
.jlk-post-card .wp-block-post-title a:hover { text-decoration: underline; }

/* ── Forms (Ninja Forms + Simple Job Board) inherit the theme ─── */
.nf-form-cont input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.nf-form-cont textarea, .nf-form-cont select,
.sjb-page input[type=text], .sjb-page input[type=email], .sjb-page input[type=tel], .sjb-page textarea, .sjb-page select {
	width: 100%; border: 1px solid var(--jlk-line) !important; border-radius: var(--wp--custom--radius--sm) !important;
	padding: .75rem .9rem !important; background: #fff !important; font: inherit !important; color: var(--jlk-ink);
}
.nf-form-cont input[type=submit], .nf-form-cont input[type=button],
.sjb-page .btn, .sjb-page button[type=submit], .sjb-page input[type=submit] {
	background: var(--jlk-ink) !important; color: #fff !important; border: 0 !important; border-radius: var(--wp--custom--radius--sm) !important;
	padding: .8rem 1.4rem !important; font: 600 var(--wp--preset--font-size--small)/1.2 var(--wp--preset--font-family--body) !important; cursor: pointer;
}
.nf-form-cont label, .sjb-page label { font-weight: 600; font-size: var(--wp--preset--font-size--small); }

/* Simple Job Board single job — tidy its legacy markup inside our layout */
.jlk-job-detail .sjb-page { width: 100% !important; max-width: none; }
.jlk-job-detail .sjb-job-info, .jlk-job-detail .sjb-company-wrapper-details > .row > .sjb-with-logo .job-detail { display: none; } /* title shown by the template */
.jlk-job-detail .row { margin: 0; }
.jlk-job-detail .sjb-job-characteristics { display: none; } /* shown above by the Job Highlights block */
.jlk-job-detail .sjb-job-type-location-date .row { display: flex; flex-wrap: wrap; gap: .5rem; }
.jlk-job-detail .sjb-job-type-location-date [class*=col-] { width: auto; padding: 0; float: none; }
.jlk-job-detail .job-type, .jlk-job-detail .job-location, .jlk-job-detail .job-date {
	display: inline-flex; gap: .4rem; align-items: center; padding: .35rem .75rem; border-radius: 999px; background: var(--wp--preset--color--teal-light); font-size: var(--wp--preset--font-size--xs); font-weight: 600;
}
.jlk-job-detail .job-description { margin-top: var(--wp--preset--spacing--40); }
.jlk-job-detail .job-features, .jlk-job-detail .sjb-apply-now, .jlk-job-detail #sjb-application-form {
	background: #fff; border: 1px solid var(--jlk-line); border-radius: var(--jlk-radius); padding: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40);
}
.jlk-job-detail table { width: 100%; border-collapse: collapse; }
.jlk-job-detail td { border-bottom: 1px solid var(--jlk-line); padding: .6rem .4rem; vertical-align: top; }

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

ul.jlk-plain-list { list-style: none; padding-left: 0; }
ul.jlk-plain-list li { margin-bottom: .45rem; }

/* Headings on dark bands inherit white (theme.json sets ink for light pages) */
.has-ink-background-color :is(h1, h2, h3, h4, h5, h6), .has-ink-2-background-color :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
/* No gaps between header, page bands and footer */
:where(.wp-site-blocks) > * { margin-block-start: 0; }
/* Cards stack content and pin their buttons to the bottom */
.is-style-jlk-card { display: flex; flex-direction: column; }
.is-style-jlk-card > .wp-block-buttons:last-child { margin-top: auto; padding-top: .75rem; }

/* Stats: 2 × 2 on phones */
@media (max-width: 781px) {
	.jlk-stats-cols { flex-wrap: wrap !important; gap: 1.5rem 1rem !important; }
	.jlk-stats-cols > .wp-block-column { flex: 1 1 40% !important; }
}

/* Article text (blog posts, policies, job descriptions): calmer heading scale */
.wp-block-post-content :where(h2) { font-size: var(--wp--preset--font-size--x-large); margin-top: 2rem; }
.wp-block-post-content :where(h3) { font-size: var(--wp--preset--font-size--large); margin-top: 1.6rem; }
.wp-block-post-content table, .jlk-job-detail .job-description table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: var(--wp--preset--font-size--small); }
.wp-block-post-content :is(td, th), .jlk-job-detail .job-description :is(td, th) { border: 1px solid var(--jlk-line); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.jlk-job-detail .job-description :where(h1, h2) { font-size: var(--wp--preset--font-size--x-large); margin-top: 2rem; }
.jlk-job-detail .job-description :where(h3, h4) { font-size: var(--wp--preset--font-size--large); margin-top: 1.6rem; }
.jlk-job-detail .job-description > :first-child { margin-top: 0; }