/*
Theme Name:  VJH Theme
Theme URI:   https://vortexjobshub.com/
Author:      Vortex Jobs Hub
Description: Presentation layer for the VJH Jobs engine. A block theme: header, footer, homepage sections and every job template are editable in the Site Editor, and the brand is ten colour values in one block. Requires the VJH Jobs plugin for job data.
Version:     1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vjh-theme
Tags:        blog, one-column, two-columns, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, translation-ready, wide-blocks
*/

/* ===========================================================================
 * WHY THIS FILE IS SHORT
 *
 * The job cards, the filter panel, the single-job page and the search bar are
 * styled by the plugin (assets/css/jobs.css). This file does three things and
 * then stops:
 *
 *   1. Rebrands the plugin by redeclaring its --vjh-* custom properties. No
 *      plugin selector is overridden anywhere in this file. That is the entire
 *      contract between theme and engine, and it means a future redesign is an
 *      edit to one block of colour values, not a hunt through a stylesheet.
 *   2. Styles what the theme actually owns: the sticky header, the navy section
 *      bands, the hero, the footer, the archive furniture.
 *   3. Nothing else. Typography, spacing, buttons and link colours are in
 *      theme.json, where the Site Editor can reach them (§24).
 *
 * ---------------------------------------------------------------------------
 * THE ONE DESIGN DECISION WORTH ARGUING ABOUT: NAVY FRAME, WHITE PAGE
 *
 * The brand is dark navy with gold. The live site is dark end to end, and the
 * obvious move was to keep it that way.
 *
 * This theme does not. Navy is the *frame* — header, hero, section bands,
 * footer, CTA strips — and white is the *reading surface* for anything a visitor
 * has to scan or read: the job list, the filter panel, the job description.
 *
 * The reason is the content, not taste. A job board's core screen is twenty
 * cards, each with a title, an employer, a location, three chips and two lines
 * of description — that is roughly sixty text elements at four different weights
 * on one screen. On a dark surface every one of them needs its contrast tuned
 * individually, hairlines between cards either vanish or glow, and employer
 * logos (measured: 121 distinct files across the launch corpus, most PNGs on
 * white or transparent backgrounds) sit in
 * bright squares scattered across a dark page. Every serious board in this
 * market — Indeed, LinkedIn, Glassdoor, ZipRecruiter — reads dark-on-light for
 * exactly this reason, and they did not all arrive there by accident.
 *
 * Keeping navy for the frame keeps the brand instantly recognisable: the header,
 * the hero and the footer are the first and last thing seen, and they are the
 * brand. Gold then has somewhere to be the loudest thing on the page — the Apply
 * button — which it cannot be on a navy page where everything competes.
 *
 * If a fully dark board is wanted anyway, it is the same edit as any other
 * rebrand: change the values in the token block below. Nothing else in the
 * theme or the plugin needs to know.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. THE REBRAND SEAM
 *
 * Every value the plugin's stylesheet resolves through a custom property. It
 * derives its own hairlines and muted inks from --vjh-ink and --vjh-surface with
 * color-mix(), so setting those two correctly is most of the work.
 * ------------------------------------------------------------------------- */

:root {
	/* Ink is navy-tinted rather than neutral grey — the cheapest way to make a
	   white page feel like it belongs to a navy brand. 17:1 on white. */
	--vjh-ink: #0d1524;
	--vjh-surface: #ffffff;

	/* Primary: the brand navy. Used for the search submit, pagination, links. */
	--vjh-accent: #071530;
	--vjh-accent-ink: #ffffff;
	--vjh-accent-hover: #14264a;

	/* Apply — the one button that has to win (§10).
	   Gold cannot carry white text: #f2c855 behind #ffffff is 1.7:1, unreadable.
	   Gold behind navy is 11:1. So the CTA is gold with navy text, which is both
	   the accessible pairing and the brand's own pairing. */
	--vjh-cta: #f2c855;
	--vjh-cta-ink: #071530;
	--vjh-cta-hover: #ffd873;

	--vjh-link: #0f2a55;

	/* Focus is navy, not gold: a gold ring on white is 2.8:1, under the 3:1 a
	   focus indicator needs to be seen at all. */
	--vjh-focus: #0f2a55;

	/* Geometry from the brand tokens: 8 / 12 / 14 / pill. */
	--vjh-radius: 12px;
	--vjh-radius-sm: 8px;
	--vjh-radius-pill: 999px;

	/* Sticky offset: the plugin's filter panel sticks below the site header
	   rather than under it. --vjh-header is redeclared when the header shrinks. */
	--vjh-header: 72px;
	--vjh-sticky-top: calc(var(--vjh-header) + 1rem);

	/* Theme-owned tokens. Named --vjh-t-* so they can never collide with a
	   plugin token, present or future. */
	--vjh-t-navy: #071530;
	--vjh-t-navy-deep: #060c1a;
	--vjh-t-navy-soft: #1b2a4a;
	--vjh-t-gold: #f2c855;
	--vjh-t-gold-deep: #c8981f;
	--vjh-t-live: #4ade80;
	--vjh-t-on-navy: rgba(255, 255, 255, .74);
	--vjh-t-on-navy-dim: rgba(255, 255, 255, .5);
	--vjh-t-navy-line: rgba(255, 255, 255, .1);
	--vjh-t-container: 1200px;
}

/* ---------------------------------------------------------------------------
 * 2. THE STICKY HEADER (§3)
 *
 * `position: sticky`, not `fixed`. Fixed takes the header out of flow, which
 * means every page needs padding-top to compensate and every in-page anchor
 * lands underneath it. Sticky needs neither.
 *
 * The shrink-on-scroll is driven by `data-vjh-scroll` on <html>, which the
 * plugin's script publishes. The theme adds no JavaScript of its own for this —
 * one rAF-throttled scroll listener on the site, not two.
 * ------------------------------------------------------------------------- */

.vjh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--vjh-t-navy);
	color: #fff;
	border-bottom: 1px solid var(--vjh-t-navy-line);
	transition: box-shadow .2s ease, background-color .2s ease;
}

/* Raised only once the page has moved. A shadow under a header at rest is a
   shadow with nothing to cast onto. */
[data-vjh-scroll="past"] .vjh-header {
	background: rgba(6, 12, 26, .92);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.vjh-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	max-width: var(--vjh-t-container);
	min-height: var(--vjh-header);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* The brand takes the slack, which is what pushes the navigation and the button to
   the right edge. Done with a margin rather than `flex: 1` on the nav, because a
   growing nav centres its own items inside a box wider than they are. */
.vjh-header__brand {
	margin-inline-end: auto;
}

/* The site title and every nav link are white here regardless of what
   theme.json set for links on a white page. Scoped to the header so it cannot
   leak into content. */
.vjh-header a,
.vjh-header .wp-block-site-title a {
	color: #fff;
	text-decoration: none;
}

.vjh-header a:hover,
.vjh-header .wp-block-site-title a:hover {
	color: var(--vjh-t-gold);
	text-decoration: none;
}

.vjh-header .wp-block-navigation {
	gap: clamp(.75rem, 2vw, 1.75rem);
}

/* The gold underline on the current section — the only thing on the header
   that is not white, so it reads as position rather than decoration. */
.vjh-header .wp-block-navigation-item.current-menu-item > a,
.vjh-header .wp-block-navigation-item.current-menu-parent > a {
	color: #fff;
	box-shadow: inset 0 -2px 0 0 var(--vjh-t-gold);
}

/* The header's own call to action: gold, small, and the only gold in the bar. */
.vjh-header .wp-block-button__link {
	background: var(--vjh-t-gold);
	color: var(--vjh-t-navy);
	border-radius: var(--vjh-radius-sm);
	padding: .55em 1.05em;
	font-size: .875rem;
	font-weight: 700;
}

.vjh-header .wp-block-button__link:hover,
.vjh-header .wp-block-button__link:focus {
	background: var(--vjh-cta-hover);
	color: var(--vjh-t-navy);
}

/* Core renders the mobile navigation overlay dark-on-light by default, which on
   a navy header appears as a white flash. */
.vjh-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--vjh-t-navy-deep);
	color: #fff;
	padding: clamp(1.5rem, 6vw, 3rem);
}

.vjh-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 3. NAVY BANDS
 *
 * A full-width dark section. Applied by the pattern, not by a template, so an
 * editor can reorder or delete any band without touching CSS.
 * ------------------------------------------------------------------------- */

.vjh-band {
	background: var(--vjh-t-navy);
	color: #fff;
}

.vjh-band--deep {
	background: var(--vjh-t-navy-deep);
}

.vjh-band--gradient {
	background: linear-gradient(160deg, #060c1a 0%, #071530 55%, #0d2350 100%);
}

.vjh-band h1,
.vjh-band h2,
.vjh-band h3,
.vjh-band h4,
.vjh-band .wp-block-heading {
	color: #fff;
}

.vjh-band p {
	color: var(--vjh-t-on-navy);
}

.vjh-band a:not(.wp-block-button__link) {
	color: #fff;
	text-decoration-color: var(--vjh-t-gold-deep);
}

.vjh-band a:not(.wp-block-button__link):hover {
	color: var(--vjh-t-gold);
}

/*
 * A band that contains job cards is the one case where the frame/surface split
 * needs help: the cards stay white, so their own hairlines and shadows work
 * unchanged, and the band reads as a tray they sit in.
 */
.vjh-band .vjh-card {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

/* ---------------------------------------------------------------------------
 * 4. THE HERO (§3, §4)
 *
 * The search bar inside it is the plugin's, unstyled from here. Only the frame
 * around it belongs to the theme.
 * ------------------------------------------------------------------------- */

.vjh-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #060c1a 0%, #071530 52%, #0d2350 100%);
	color: #fff;
}

/*
 * A single soft gold light behind the heading. Decorative and cheap: one radial
 * gradient on a pseudo-element, no image request, nothing to load, nothing to
 * shift the layout. `will-change` is deliberately absent — this never animates.
 */
.vjh-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 130%;
	background: radial-gradient(52% 46% at 22% 8%, rgba(242, 200, 85, .16) 0%, rgba(242, 200, 85, 0) 70%);
	pointer-events: none;
}

.vjh-hero > * {
	position: relative;
}

.vjh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .35rem .8rem .35rem .6rem;
	border: 1px solid var(--vjh-t-navy-line);
	border-radius: var(--vjh-radius-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--vjh-t-on-navy);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
}

/* The live dot. Steady, not blinking: a pulsing dot next to a job count is a
   claim of real-time updating that a six-hourly import does not support. */
.vjh-hero__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vjh-t-live);
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}

.vjh-hero__title {
	max-width: 22ch;
	margin: 0 0 .6rem;
	text-wrap: balance;
}

.vjh-hero__title em {
	font-style: normal;
	color: var(--vjh-t-gold);
}

.vjh-hero__lede {
	max-width: 56ch;
	margin: 0 0 2rem;
	color: var(--vjh-t-on-navy);
	font-size: 1.0625rem;
}

/* The "popular searches" row under the search bar. Real links to real archives,
   so it is internal linking (§29) rather than decoration. */
.vjh-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin-top: 1.25rem;
	font-size: .875rem;
	color: var(--vjh-t-on-navy-dim);
}

.vjh-hero__quick a {
	padding: .3rem .7rem;
	border: 1px solid var(--vjh-t-navy-line);
	border-radius: var(--vjh-radius-pill);
	background: rgba(255, 255, 255, .03);
	color: var(--vjh-t-on-navy);
	text-decoration: none;
}

.vjh-hero__quick a:hover {
	border-color: var(--vjh-t-gold-deep);
	background: rgba(242, 200, 85, .08);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 5. SECTION FURNITURE
 * ------------------------------------------------------------------------- */

/* A section head: title on the left, "see all" on the right, aligned on the
   baseline rather than centred, so a two-line title on mobile still lines up. */
.vjh-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: 1.5rem;
}

.vjh-sectionhead h2 {
	margin: 0;
}

/* The optional sub-line. `:not()` because the "see all" link is also a paragraph
   and must stay on the first row, right-aligned, rather than being pushed to a
   full-width third row with the description. */
.vjh-sectionhead p:not(.vjh-sectionhead__more) {
	margin: .35rem 0 0;
	color: var(--vjh-ink-soft);
	font-size: .9375rem;
	flex: 1 1 100%;
	order: 3;
}

.vjh-sectionhead__more {
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.vjh-sectionhead__more::after {
	content: " \2192";
}

/* The archive header: H1, result count, and the term description if the term
   has one. On a listing page this is the block that tells a visitor and a
   crawler what they are looking at. */
.vjh-archivehead {
	padding: 2rem 0 1.5rem;
	border-bottom: 1px solid var(--vjh-line);
	margin-bottom: 2rem;
}

.vjh-archivehead h1 {
	margin: 0 0 .5rem;
}

/* The plugin's Listing Title block emits this class on whichever level it was
   set to, so the rule is on the class rather than on `h1` — the same heading
   demoted to an h2 inside a landing page should still sit tight to whatever
   follows it. */
.vjh-archivehead__title {
	margin: 0 0 .5rem;
	text-wrap: balance;
}

.vjh-archivehead__desc {
	max-width: 70ch;
	margin: .75rem 0 0;
	color: var(--vjh-ink-soft);
}

/* ---------------------------------------------------------------------------
 * 6. THE ARCHIVE LAYOUT (§18)
 *
 * Filters left, results right, at the same 1200px as everything else. A grid
 * rather than floats or flex so the sidebar can be sticky without the results
 * column changing height.
 * ------------------------------------------------------------------------- */

.vjh-layout {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

@media (min-width: 861px) {
	.vjh-layout {
		grid-template-columns: 300px minmax(0, 1fr);
	}
}

/* minmax(0, 1fr) above and min-width: 0 here are the same fix twice: a grid
   item's default minimum is its content, so one long job title without it
   widens the column and the page scrolls sideways (§25). */
.vjh-layout > * {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 7. THE FOOTER (§23)
 *
 * Columns are a core Columns block in parts/footer.html, so an editor adds or
 * removes one in the Site Editor. This styles what the block cannot: the link
 * lists inside it.
 * ------------------------------------------------------------------------- */

.vjh-footer {
	background: var(--vjh-t-navy-deep);
	color: var(--vjh-t-on-navy);
	border-top: 3px solid var(--vjh-t-gold-deep);
}

/* The container lives here rather than in the part's layout attribute. A core
   constrained layout would clamp the footer columns to the 760px reading measure
   from theme.json, which is right for an article and wrong for four columns. */
.vjh-footer__inner {
	max-width: var(--vjh-t-container);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2rem) 2rem;
}

.vjh-footer h2,
.vjh-footer h3,
.vjh-footer .wp-block-heading {
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.vjh-footer a {
	color: var(--vjh-t-on-navy);
	text-decoration: none;
}

.vjh-footer a:hover {
	color: var(--vjh-t-gold);
	text-decoration: underline;
}

.vjh-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
	font-size: .9375rem;
}

/* The term-link clusters the plugin renders in the footer are pill rows
   everywhere else on the site; in a footer column they read better as a list. */
.vjh-footer .vjh-termlinks {
	display: grid;
	gap: .55rem;
}

.vjh-footer .vjh-termlinks a {
	padding: 0;
	border: 0;
	background: none;
	font-size: .9375rem;
}

.vjh-footer .vjh-termlinks a:hover {
	background: none;
}

.vjh-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--vjh-t-navy-line);
	font-size: .875rem;
	color: var(--vjh-t-on-navy-dim);
}

.vjh-footer__bar p {
	margin: 0;
}

/* The feed licence credit, once, in the footer — not repeated inside 1,300 job
   descriptions. The importer strips the copy the feed injects into each one. */
.vjh-footer .vjh-attribution {
	margin: 0;
	font-size: .8125rem;
	color: var(--vjh-t-on-navy-dim);
}

/* ---------------------------------------------------------------------------
 * 8. STAT STRIP ON NAVY
 *
 * The plugin renders .vjh-stats without a box of its own precisely so it can sit
 * on any background. On navy it needs light text and a divider.
 * ------------------------------------------------------------------------- */

.vjh-band .vjh-stats,
.vjh-hero .vjh-stats {
	gap: clamp(1.5rem, 5vw, 4rem);
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--vjh-t-navy-line);
}

.vjh-band .vjh-stat__value,
.vjh-hero .vjh-stat__value {
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, inherit);
}

.vjh-band .vjh-stat__label,
.vjh-hero .vjh-stat__label {
	color: var(--vjh-t-on-navy-dim);
}

/* ---------------------------------------------------------------------------
 * 9. TERM PILLS ON NAVY
 *
 * The plugin's category and location links are pills built for a white page:
 * white fill, hairline border, dark ink. On the hero and the navy bands that is
 * a white blob, so they are re-skinned here rather than in the plugin — the
 * plugin cannot know what colour it is being placed on.
 *
 * The selectors carry `.vjh-termlinks__list` rather than just `a` because the
 * plugin's own rule is `.vjh-termlinks__list a`, and a shorter selector would
 * lose on specificity no matter which stylesheet loads last.
 * ------------------------------------------------------------------------- */

.vjh-hero .vjh-termlinks__list a,
.vjh-band .vjh-termlinks__list a {
	border-color: var(--vjh-t-navy-line);
	background: rgba(255, 255, 255, .04);
	color: #fff;
}

.vjh-hero .vjh-termlinks__list a:hover,
.vjh-band .vjh-termlinks__list a:hover {
	border-color: var(--vjh-t-gold-deep);
	background: rgba(242, 200, 85, .1);
}

.vjh-hero .vjh-termlinks__count,
.vjh-band .vjh-termlinks__count {
	color: var(--vjh-t-on-navy-dim);
}

/* The label in front of a pill row: "Popular right now". Sits on the same
   baseline as the pills, so it is a flex item, not a paragraph above them. */
.vjh-hero__quick > .wp-block-heading,
.vjh-band .vjh-hero__quick > .wp-block-heading {
	margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vjh-t-on-navy-dim);
}

/* ---------------------------------------------------------------------------
 * 10. SINGLE JOB PAGE
 *
 * The plugin owns the apply button, the meta list and the related strip. The
 * theme owns the two-column shell and the description's typography.
 * ------------------------------------------------------------------------- */

.vjh-single {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

@media (min-width: 961px) {
	.vjh-single {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.vjh-single__aside {
		position: sticky;
		top: var(--vjh-sticky-top);
	}
}

.vjh-single > * {
	min-width: 0;
}

/*
 * THE APPLY BUTTON APPEARS TWICE IN THE MARKUP AND ONCE ON SCREEN.
 *
 * On a laptop it belongs in the sticky sidebar, which follows the description
 * down the page. On a phone there is no sidebar — the aside stacks *below* a job
 * description that is routinely two thousand words, which would put the only
 * Apply button several screens down.
 *
 * So the template renders it in both places and exactly one is displayed at any
 * width. `display: none` rather than `visibility` or an off-screen shift because
 * the hidden one must not be reachable by keyboard: two Apply buttons in the tab
 * order, one of them invisible, is a worse bug than the one being solved. It also
 * keeps the expired notice — which the same block renders in place of the button
 * when a job has closed — from appearing twice on one page.
 */
@media (min-width: 961px) {
	.vjh-single__cta {
		display: none;
	}
}

@media (max-width: 960px) {
	.vjh-single__aside .vjh-aside__card--apply {
		display: none;
	}
}

/* The sidebar's own stack. Two cards, deliberately — a third pushes the Apply
   button past the fold on a laptop, and a sticky column taller than the viewport
   cannot stick. */
.vjh-aside {
	display: grid;
	gap: 1rem;
}

.vjh-aside__card {
	padding: 1.25rem;
	border: 1px solid var(--vjh-line);
	border-radius: var(--vjh-radius);
	background: var(--vjh-surface);
}

.vjh-aside__card > *:first-child {
	margin-top: 0;
}

.vjh-aside__card h2 {
	margin: 0 0 .5rem;
	font-size: 1.0625rem;
}

.vjh-aside__card p {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: var(--vjh-ink-soft);
}

/* The apply card is the one gold-framed thing on the page, and it carries no
   heading: the button says what it does, and a "How to apply" label above a button
   marked Apply Now is a word nobody needs to read. */
.vjh-aside__card--apply {
	border-color: var(--vjh-t-gold-deep);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(7, 21, 48, .08);
}

/*
 * The description comes from the feed as HTML. It is sanitised on import, but its
 * *structure* is whatever the employer wrote — sometimes a single paragraph,
 * sometimes nine nested lists. Constraining measure and spacing here is what
 * makes 1,300 differently-written descriptions read as one site.
 */
.vjh-jobbody {
	max-width: 72ch;
	font-size: 1rem;
	line-height: 1.7;
}

.vjh-jobbody h2,
.vjh-jobbody h3,
.vjh-jobbody h4,
.vjh-jobbody strong:only-child {
	margin: 2rem 0 .75rem;
	font-size: 1.0625rem;
}

.vjh-jobbody > *:first-child {
	margin-top: 0;
}

.vjh-jobbody ul,
.vjh-jobbody ol {
	margin: 0 0 1.25rem;
	padding-left: 1.35rem;
}

.vjh-jobbody li {
	margin-bottom: .4rem;
}

.vjh-jobbody li::marker {
	color: var(--vjh-t-gold-deep);
}

/* Feed descriptions arrive with inline widths and colours often enough to be
   worth defending against — an inline `width: 800px` on a table is a horizontal
   scrollbar on a phone (§25). */
.vjh-jobbody img,
.vjh-jobbody table,
.vjh-jobbody iframe {
	max-width: 100%;
	height: auto;
}

.vjh-jobbody table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
}

/* ---------------------------------------------------------------------------
 * 11. SMALL THINGS
 * ------------------------------------------------------------------------- */

/* A skip link that is actually reachable. Core prints one for block themes, but
   only if the theme opts in — see functions.php. */
.skip-link:focus {
	background: var(--vjh-surface);
	color: var(--vjh-ink);
	outline: 2px solid var(--vjh-focus);
	outline-offset: 2px;
}

/* Anchored scroll lands below the sticky header rather than behind it. */
:target {
	scroll-margin-top: calc(var(--vjh-header) + 1rem);
}

/* The body scroll lock the plugin's filter drawer sets. Declared here as well
   because the plugin cannot know the theme uses a sticky header, and a sticky
   header inside a locked page keeps its own scrollbar without it. */
html.vjh-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.vjh-header {
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}
}

@media print {
	.vjh-header,
	.vjh-footer,
	.vjh-hero,
	.vjh-band {
		background: none !important;
		color: #000 !important;
	}

	.vjh-header {
		position: static;
	}
}