/*
Theme Name: it-jobs.net (employerkit-child)
Description: Experimental child theme — dark dev-tool aesthetic for it-jobs.net.
Template: employerkit
Version: 1.0.0
Author: itj
Text Domain: employerkit-child
*/

/* ============================================================
   it-jobs.net — Child Theme Stylesheet
   ------------------------------------------------------------
   Architecture: ITCSS (specificity rises top → bottom).
   Design tokens are NOT defined here — they live in PPG-Suite
   Design-Tokens (:root --ppg-color-*, set per-instance in the
   Design-System admin). We only consume them via var(--ppg-*).

   TABLE OF CONTENTS
     1. GENERIC / BASE   — html, body, resets, page surface
     2. ELEMENTS         — bare tags (headings, links, lists …)
     3. OBJECTS          — layout primitives (container, grid)
     4. COMPONENTS       — .itj-* blocks (cards, header, sidebar …)
     5. UTILITIES        — single-purpose helpers
   ============================================================ */


/* ============================================================
   1. GENERIC / BASE
   ============================================================ */

/* WP preset bridge — the parent theme generates theme.json presets
   from legacy ek_* options (light bg, red primary). Core blocks and
   the global element styles (h1 / links / buttons) consume
   --wp--preset--color--*. We remap them onto the PPG-Suite dark tokens.
   Child style.css loads after the global-styles block → this wins. */
:root {
	--wp--preset--color--primary:    var(--ppg-color-primary);
	--wp--preset--color--secondary:  var(--ppg-color-secondary);
	--wp--preset--color--accent:     var(--ppg-color-primary);
	--wp--preset--color--background: var(--ppg-color-background);
	--wp--preset--color--text:       var(--ppg-color-text);
	--wp--preset--color--light-gray: var(--ppg-color-surface);
	--wp--preset--color--border:     var(--ppg-color-border);
}

/* Catppuccin Mocha — full palette as tokens (single source for all accents). */
:root {
	--ctp-rosewater: #f5e0dc;
	--ctp-flamingo:  #f2cdcd;
	--ctp-pink:      #f5c2e7;
	--ctp-mauve:     #cba6f7;
	--ctp-red:       #f38ba8;
	--ctp-maroon:    #eba0ac;
	--ctp-peach:     #fab387;
	--ctp-yellow:    #f9e2af;
	--ctp-green:     #a6e3a1;
	--ctp-teal:      #94e2d5;
	--ctp-sky:       #89dceb;
	--ctp-sapphire:  #74c7ec;
	--ctp-blue:      #89b4fa;
	--ctp-lavender:  #b4befe;
	--ctp-text:      #cdd6f4;
	--ctp-subtext1:  #bac2de;
	--ctp-subtext0:  #a6adc8;
	--ctp-overlay2:  #9399b2;
	--ctp-overlay1:  #7f849c;
	--ctp-overlay0:  #6c7086;
	--ctp-surface2:  #585b70;
	--ctp-surface1:  #45475a;
	--ctp-surface0:  #313244;
	--ctp-base:      #1e1e2e;
	--ctp-mantle:    #181825;
	--ctp-crust:     #11111b;
}

/* Catppuccin governs the child theme. Redefine the PPG semantic color tokens as
   aliases onto --ctp-* → every component, the --wp--preset bridge and ContentKit
   blocks resolve to Catppuccin here, untouched. The PPG admin hex values remain
   ONLY as a fallback if this stylesheet ever fails to load. */
:root {
	--ppg-color-primary:        var(--ctp-green);
	/* Soft primary tint used by ContentKit behind badges / icon- and
	   avatar-fallbacks (green text sits on it). On the light PPG default this
	   is a pastel; on dark Crust we tint Mantle subtly green instead. */
	--ppg-color-primary-light:  color-mix(in srgb, var(--ctp-green) 16%, var(--ctp-mantle));
	--ppg-color-secondary:      var(--ctp-blue);
	--ppg-color-on-primary:     var(--ctp-crust);
	--ppg-color-text:           var(--ctp-text);
	--ppg-color-text-light:     var(--ctp-subtext0);
	--ppg-color-text-muted:     var(--ctp-overlay1);
	--ppg-color-background:     var(--ctp-crust);
	--ppg-color-background-alt: var(--ctp-mantle);
	--ppg-color-surface:        var(--ctp-base);
	--ppg-color-border:         var(--ctp-surface1);
	--ppg-color-border-light:   var(--ctp-surface0);
	--ppg-color-success:        var(--ctp-green);
	--ppg-color-error:          var(--ctp-red);
	--ppg-color-warning:        var(--ctp-yellow);
	--ppg-color-info:           var(--ctp-sky);
}

/* it-jobs.net local tokens — monospace UI font + syntax-highlight accents
   (mapped onto the Catppuccin palette above). */
:root {
	/* JetBrains Mono Variable is uploaded via PPG-Suite and served under PPG's
	   @font-face family "Body Font"/"Heading Font" (PPG has no dedicated mono
	   slot). Reference it so our mono UI uses the uploaded file. */
	--ij-font-mono: "Body Font", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ij-syn-comment: var(--ctp-overlay0);
	--ij-syn-keyword: var(--ctp-mauve);
	--ij-syn-string:  var(--ctp-green);
	--ij-accent-bg:     color-mix(in srgb, var(--ctp-green) 14%, transparent);
	--ij-accent-border: color-mix(in srgb, var(--ctp-green) 32%, transparent);
	--ij-info-bg:       color-mix(in srgb, var(--ctp-blue) 14%, transparent);

	/* Decorative highlight accent. Green is the "action/string" color (buttons);
	   mauve is the "keyword" color in our syntax metaphor → used for headline
	   highlights, badges and the stats counter, where pastel green sat too low
	   on contrast against both light text and the dark bands. */
	--ij-accent-hl:     var(--ctp-mauve);
	--ij-accent-hl-bg:  color-mix(in srgb, var(--ctp-mauve) 16%, transparent);
	--ij-accent-hl-bd:  color-mix(in srgb, var(--ctp-mauve) 40%, transparent);
}

/* The parent theme paints no page background, so we anchor the
   dark surface here. Colors resolve from PPG-Suite tokens. */
html,
body {
	background-color: var(--ppg-color-background);
	color: var(--ppg-color-text);
}

.site-main,
#main {
	background-color: var(--ppg-color-background);
}


/* ============================================================
   2. ELEMENTS
   Bare HTML element defaults (h1–h6, a, p, ul, …).
   ============================================================ */

/* Text-entry form controls — default to dark surface, not white.
   Wrapped in :where() → 0 specificity, so this only FILLS GAPS
   (background/color, which no component sets) while component
   classes (e.g. .jobboard-search-input's border + focus) always win.
   Scoped to text-like types so checkboxes/radios/range stay native. */
:where(
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	input[type="date"],
	textarea,
	select
) {
	background-color: var(--ppg-color-surface);
	color: var(--ppg-color-text);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-md, 8px);
}

:where(input, textarea)::placeholder {
	color: var(--ppg-color-text-muted);
	opacity: 1;
}

:where(
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	input[type="date"],
	textarea,
	select
):focus {
	outline: none;
	border-color: var(--ppg-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppg-color-primary) 25%, transparent);
}


/* ============================================================
   3. OBJECTS
   Layout primitives: container width, Fluchtlinie, grids.
   (empty — fill element-by-element)
   ============================================================ */


/* ============================================================
   4. COMPONENTS
   it-jobs.net building blocks (.itj-*): job card, detail header,
   sidebar, archive, etc. The bulk of the theme lives here.
   ============================================================ */

/* --- Single job: imported description ----------------------
   The Solr import dumps the whole ad (incl. its own <h1>/<h2>/<h3>)
   into _jobboard_introduction_text. The page title is already the
   one true <h1>, so demote the content headings to body-heading
   scale + readable text color (overrides the gigantic global h1). */
.jobboard-section-text :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ppg-color-text);
	font-weight: 600;
	line-height: 1.3;
	margin: 1.5rem 0 0.5rem;
}
.jobboard-section-text h1,
.jobboard-section-text h2 {
	font-size: var(--ppg-font-size-h3, 1.5rem);
}
.jobboard-section-text h3,
.jobboard-section-text h4,
.jobboard-section-text h5,
.jobboard-section-text h6 {
	font-size: var(--ppg-font-size-h4, 1.25rem);
}

/* --- Single job: description body + lists (#6 content) -----
   The whole ad arrives as one HTML blob (intro/tasks/benefits as <h3>+<ul>).
   Style it as cohesive prose; lists get on-brand green check bullets
   (CSS mask in accent color — no Unicode, no data parsing). */
.jobboard-section {
	margin-bottom: 2.5rem;
}

.jobboard-section-headline {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ppg-color-text);
	margin: 0 0 0.75rem;
}

/* Section-heading marker hook — empty for now. Set `content` (e.g. "$_ ",
   ". ", "// ") to re-enable a green terminal-style prompt before each heading. */
.jobboard-section-headline::before,
.jobboard-section-text :is(h2, h3)::before {
	content: "";
	color: var(--ppg-color-primary);
	font-family: var(--ij-font-mono);
	font-weight: 700;
}

.jobboard-section-text :is(h2, h3) {
	margin-top: 1.75rem;
}

.jobboard-section-text {
	color: var(--ppg-color-text-light);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.jobboard-section-text p {
	margin: 0 0 1rem;
}

.jobboard-section-text a {
	color: var(--ppg-color-primary);
	text-decoration: none;
}

.jobboard-section-text a:hover {
	text-decoration: underline;
}

.jobboard-section-text ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 10px;
}

.jobboard-section-text ul li {
	position: relative;
	padding-left: 28px;
}

/* Uniform body typography — list items match paragraphs (size/line-height/color) */
.jobboard-section-text p,
.jobboard-section-text li {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ppg-color-text-light);
}

.jobboard-section-text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 16px;
	height: 16px;
	background-color: var(--ppg-color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jobboard-section-text ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.jobboard-section-text ol li {
	margin-bottom: 6px;
}

/* Company section (footer.php) adds no value for imported jobs — it only shows
   the logo + an empty "About the Company" heading (no company description text). */
.itj-job .jobboard-company-section {
	display: none;
}


/* --- Single job (MockupJobDetail): #1 layout shell ---------
   Two-column grid: main (1fr) + sticky aside (320px). Double class
   on the container beats the plugin's .jobboard-single layout. */
.jobboard-single.itj-job {
	/* Match the site's wide container (header/footer/other pages) instead of the
	   mockup's fixed 1100px artboard — otherwise the page looks narrow/misaligned. */
	max-width: var(--ppg-wide-width, 1440px);
	margin-inline: auto;
	padding: var(--ppg-space-xl, 64px) var(--ppg-space-lg, 48px);
	/* Subtle accent glow at the top — wide + soft (bright centre sits off-screen,
	   so only the gentle falloff shows) for depth without a hard edge. */
	background-image: radial-gradient(1100px 600px at 50% -200px,
		color-mix(in srgb, var(--ppg-color-primary) 12%, transparent) 0%,
		color-mix(in srgb, var(--ppg-color-primary) 5%, transparent) 38%,
		transparent 78%);
	background-repeat: no-repeat;
}

.itj-job__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	color: var(--ppg-color-text-muted);
	text-decoration: none;
	margin: 4px 0 32px;
	transition: color 0.12s ease;
}
.itj-job__back:hover { color: var(--ppg-color-primary); }
.itj-job__back svg { flex-shrink: 0; }

/* --- #4 Header — company logo/mark + title + meta row ------ */
.itj-job__head {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 24px;
}

.itj-job__logo,
.itj-job__mark {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: var(--ppg-radius-md, 8px);
}

.itj-job__logo {
	object-fit: contain;
	background: #fff;                       /* logos are usually on white — keep them legible */
	border: 1px solid var(--ppg-color-border);
	padding: 6px;
}

.itj-job__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ij-font-mono);
	font-weight: 600;
	font-size: 30px;
	color: var(--ppg-color-primary);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--ppg-color-primary) 20%, transparent),
		color-mix(in srgb, var(--ppg-color-primary) 6%, transparent));
	border: 1px solid color-mix(in srgb, var(--ppg-color-primary) 27%, transparent);
}

.itj-job__headmain {
	min-width: 0;
	flex: 1;
}

/* Bookmark/print/share (plugin partial) — squared off and flat like the rest. */
.itj-job .jobboard-header-actions {
	margin-left: auto;
	align-self: flex-start;
	flex-shrink: 0;
}

.itj-job .jobboard-header-actions .jobboard-bookmark-btn,
.itj-job .jobboard-header-actions .jobboard-print-btn,
.itj-job .jobboard-header-actions .jobboard-share-btn {
	border-radius: var(--ppg-radius-sm, 2px);
	background: var(--ppg-color-background-alt);
	border: 1px solid var(--ppg-color-border);
	color: var(--ppg-color-text-light);
	box-shadow: none;
}

.itj-job .jobboard-header-actions .jobboard-bookmark-btn:hover,
.itj-job .jobboard-header-actions .jobboard-print-btn:hover,
.itj-job .jobboard-header-actions .jobboard-share-btn:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--ppg-color-primary);
	color: var(--ppg-color-primary);
}

.itj-job .jobboard-header-actions .jobboard-bookmark-btn[aria-pressed="true"],
.itj-job .jobboard-header-actions .jobboard-bookmark-btn.jobboard-bookmarked {
	background: var(--ppg-color-primary);
	border-color: var(--ppg-color-primary);
	color: var(--ppg-color-on-primary);
}

.itj-job .jobboard-share-dropdown {
	border-radius: var(--ppg-radius-sm, 2px);
	font-family: var(--ij-font-mono);
}

@media (max-width: 767px) {
	.itj-job .jobboard-header-actions {
		margin-left: 0;
	}
}

.itj-job__company {
	font-size: 0.875rem;
	color: var(--ppg-color-text-light);
	margin-bottom: 4px;
}

.itj-job__title {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--ppg-color-text);
}

.itj-job__metarow {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-size: 0.875rem;
	color: var(--ppg-color-text-light);
}

.itj-job__metaitem {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.itj-job__metaitem--accent {
	color: var(--ppg-color-primary);
	font-family: var(--ij-font-mono);
}

/* #5 Tags — categories as mono badges */
.itj-job__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.itj-tag {
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	line-height: 1.6;
	padding: 3px 8px;
	border-radius: var(--ppg-radius-sm, 4px);
	background-color: var(--ppg-color-background-alt);
	color: var(--ppg-color-text-light);
	border: 1px solid var(--ppg-color-border);
}

/* Status badges — informational only, no hover/interactive cues. */
.itj-tag--new {
	background-color: var(--ij-accent-bg);
	color: var(--ppg-color-primary);
	border-color: var(--ij-accent-border);
}

.itj-tag--info {
	background-color: var(--ij-info-bg);
	color: var(--ppg-color-secondary);
	border-color: transparent;
}

/* Section divider below the header */
.itj-job__divider {
	border: 0;
	border-top: 1px solid var(--ppg-color-border);
	margin: 20px 0 28px;
}

.itj-job__grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
}

.itj-job__aside {
	min-width: 0;            /* let content shrink within the column */
	overflow-wrap: anywhere; /* long category strings wrap instead of poking out */
}

.itj-job__sticky {
	position: sticky;
	top: 24px;
}

/* ============================================================
   Archive (/jobs) — #1 layout shell
   Scoped under .itj-archive (child template adds the class) so the
   single-class .jobboard-* plugin rules are reliably overridden.
   ============================================================ */
.jobboard-archive.itj-archive {
	max-width: var(--ppg-wide-width, 1440px);
	margin-inline: auto;
	padding: var(--ppg-space-xl, 64px) var(--ppg-space-lg, 48px);
	/* same soft accent glow as the detail page — page-to-page consistency */
	background-image: radial-gradient(1100px 600px at 50% -200px,
		color-mix(in srgb, var(--ppg-color-primary) 12%, transparent) 0%,
		color-mix(in srgb, var(--ppg-color-primary) 5%, transparent) 38%,
		transparent 78%);
	background-repeat: no-repeat;
}

.itj-archive .jobboard-archive-header {
	margin-bottom: 2rem;
}

/* Count → terminal comment style (was a circular badge) */
.itj-archive .jobboard-archive-count {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ij-font-mono);
	font-size: 0.5em;
	font-weight: 400;
	color: var(--ppg-color-primary);
	vertical-align: middle;
	margin-left: 0.4em;
}

.itj-archive .jobboard-archive-count::before {
	content: "// ";
	color: var(--ij-syn-comment);
}

/* --- #2 Job cards -------------------------------------------
   Surface card (elevated above the crust page), subtle accent-border hover
   (no lift), mono company row + logo, category as a mono badge. */
.itj-archive .jobboard-card {
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-lg, 12px);
	padding: 18px;
	transition: border-color 0.12s ease;
}

.itj-archive .jobboard-card:hover {
	border-color: var(--ppg-color-primary);
	transform: none;
	box-shadow: none;
}

/* Company identity row (logo + name) */
.itj-archive .jobboard-card-company-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.itj-archive .jobboard-card-logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--ppg-radius-sm, 4px);
	background: #fff;                 /* logos are usually on white */
	border: 1px solid var(--ppg-color-border);
	padding: 4px;
	object-fit: contain;
}

.itj-archive .jobboard-card-company {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	color: var(--ppg-color-text-light);
}

/* Category → mono badge (matches .itj-tag) */
.itj-archive .jobboard-card-category {
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	padding: 3px 8px;
	border-radius: var(--ppg-radius-sm, 4px);
	background-color: var(--ppg-color-background-alt);
	color: var(--ppg-color-text-light);
	border: 1px solid var(--ppg-color-border);
}

/* "Details →" link in mono */
.itj-archive .jobboard-card-detail-link {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
}

/* --- #3 Filter sidebar -------------------------------------
   Plugin already token-themes the sidebar (accent active pills, etc.) — this is
   the terminal flavour: a // filters label, mono group titles + pills, and a
   clearer accent active fill. */
.itj-archive .jobboard-sidebar-filters::before {
	content: "// filters";
	display: block;
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	color: var(--ij-syn-comment);
	margin-bottom: 0.5rem;
}

.itj-archive .jobboard-sidebar-group-title {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	letter-spacing: -0.01em;
}

.itj-archive .jobboard-sidebar-pill {
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	border-width: 1px;
	border-radius: var(--ppg-radius-sm, 4px);   /* crisp, matches card badges (was fully round) */
	/* Long category names (e.g. "Datenbankentwicklung/Administration") have no
	   natural break point — hyphenate (lang=de-DE) instead of hard mid-word cuts;
	   break-word is the gentle fallback for tokens too long even hyphenated. */
	white-space: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	max-width: 100%;
	text-align: left;
	align-items: flex-start;
	line-height: 1.4;
}

.itj-archive .jobboard-sidebar-pill.is-active {
	background-color: var(--ij-accent-bg);
	border-color: var(--ij-accent-border);
	color: var(--ppg-color-primary);
}

.itj-archive .jobboard-sidebar-reset {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
}

/* --- #4 Search ---------------------------------------------
   Mono input (terminal feel; dark surface comes from the :where() base),
   accent button with DARK icon (white was unreadable on pastel-green), no lift. */
.itj-archive .jobboard-search-input {
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
}

.itj-archive .jobboard-search-button {
	color: var(--ppg-color-on-primary);
}

.itj-archive .jobboard-search-button:hover {
	transform: none;
	box-shadow: none;
	background-color: var(--ppg-color-primary-hover, #00b86a);
}

/* --- #6 Pagination -----------------------------------------
   Mono links, dark text on the accent active/hover state (white was unreadable
   on pastel-green), no lift, crisp square-ish buttons. */
.itj-archive .jobboard-pagination a,
.itj-archive .jobboard-pagination span {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	min-width: 40px;
	height: 40px;
	border-width: 1px;
	border-radius: var(--ppg-radius-sm, 4px);
}

.itj-archive .jobboard-pagination a:hover {
	background-color: var(--ppg-color-primary);
	border-color: var(--ppg-color-primary);
	color: var(--ppg-color-on-primary);
	transform: none;
	box-shadow: none;
}

.itj-archive .jobboard-pagination .current,
.itj-archive .jobboard-pagination span.current {
	background-color: var(--ppg-color-primary);
	border-color: var(--ppg-color-primary);
	color: var(--ppg-color-on-primary);
}

/* ============================================================
   ContentKit blocks — homepage
   Coherence layer so the Gutenberg sections match the archive/detail look.
   ContentKit's frontend CSS resolves var(--block, var(--ppg-color-*)); the
   --ppg→--ctp aliases above already tint most of it. Two things still need
   correcting here: the "inverted" bands and the button language.
   ============================================================ */

/* --- Width unification --------------------------------------
   ContentKit ships its section containers at max-width:1200px / 1.5rem
   padding. Archive, detail and the guide pages use --ppg-wide-width
   (1440px) + --ppg-space-lg padding. Widen the homepage containers to
   match exactly so content edges line up across the whole site. Desktop
   only (>=992px) — below that the plugin's mobile padding already fits. */
@media (min-width: 992px) {
	body .ck-hero__container,
	body .ck-stats-bar__grid,
	body .ck-jobs__container,
	body .ck-benefits__container,
	body .ck-cta__container {
		max-width: var(--ppg-wide-width, 1440px);
		padding-inline: var(--ppg-space-lg, 48px);
	}
}

/* --- Inverted bands -----------------------------------------
   stats-bar & cta paint their section background from --ppg-color-text. In the
   light PPG design that is near-black (dark band, light text). In our theme
   --ppg-color-text is LIGHT (--ctp-text) → the band turned light and the
   pastel-green accent text was unreadable. Re-anchor both to an elevated dark
   surface (base) and restore light foreground text. Vertical rhythm becomes
   mantle → base → crust → mantle → base, every adjacent pair distinct. */
body .ck-stats-bar,
body .ck-cta {
	background-color: var(--ctp-base);
}

body .ck-stats-bar__label { color: var(--ctp-subtext0); }
body .ck-cta__headline    { color: var(--ctp-text); }
body .ck-cta__text        { color: var(--ctp-subtext0); }

/* --- Buttons ------------------------------------------------
   Match the archive/detail terminal button: flat, crisp 4px, mono, dark text
   on the green accent, hover = darker green, NO lift (the rounded radius-lg +
   translateY/shadow from the plugin breaks the "aus einem Guss" feel). */
body .ck-hero__btn,
body .ck-cta__btn,
body .ck-jobs__footer-btn,
body .ck-jobs__search-btn {
	font-family: var(--ij-font-mono);
	border-radius: var(--ppg-radius-sm, 4px);
	font-weight: 600;
}

body .ck-hero__btn--primary,
body .ck-cta__btn--primary,
body .ck-jobs__footer-btn,
body .ck-jobs__search-btn {
	color: var(--ppg-color-on-primary);
}

body .ck-hero__btn--primary:hover,
body .ck-cta__btn--primary:hover,
body .ck-jobs__footer-btn:hover,
body .ck-jobs__search-btn:hover {
	/* Explicit hover so it matches the archive button exactly (darker green,
	   dark text) instead of ContentKit's lighter/white-on-hover default. */
	background-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	border-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	color: var(--ppg-color-on-primary);
	transform: none;
	box-shadow: none;
}

/* The page template recolors + underlines every entry-content link on hover
   (.static-page__content .entry-content a:hover {color: text}, spec 0,3,1) and
   hijacked the CTA button — an <a> inside .entry-content — so its text went
   light. The hero button sits outside .entry-content, hence the mismatch.
   Re-assert the button look with matching specificity → 1:1 with the hero. */
.static-page__content .entry-content a.ck-cta__btn,
.static-page__content .entry-content a.ck-cta__btn:hover {
	text-decoration: none;
	color: var(--ppg-color-on-primary);
}

/* Category filter tabs + search field → crisp + mono like the archive */
body .ck-jobs__tab {
	font-family: var(--ij-font-mono);
	border-radius: var(--ppg-radius-sm, 4px);
}

body .ck-jobs__tab--active,
body .ck-jobs__tab--active:hover {
	color: var(--ppg-color-on-primary);
}

body .ck-jobs__search-input {
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
}

/* --- Decorative accent → mauve --------------------------------
   Headline highlights, badges and the stats counter switch from green to the
   mauve "keyword" accent (green stays the action color). Pops against both the
   white headline text and the dark bands. */
body .ck-hero__highlight,
body .ck-cta__highlight,
body .ck-stats-bar__value {
	color: var(--ij-accent-hl);
}

body .ck-hero__badge,
body .ck-jobs__badge,
body .ck-benefits__badge,
body .ck-cta__badge {
	color: var(--ij-accent-hl);
	background-color: var(--ij-accent-hl-bg);
	border-color: var(--ij-accent-hl-bd);
}

body .ck-hero__badge-dot,
body .ck-jobs__badge-dot,
body .ck-benefits__badge-dot,
body .ck-cta__badge-dot {
	background-color: var(--ij-accent-hl);
}

/* Headline count → same terminal comment style as the archive ("// 40") */
body .ck-jobs__count-badge {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ij-font-mono);
	font-size: 0.5em;
	font-weight: 400;
	color: var(--ppg-color-primary);
	vertical-align: middle;
	margin-left: 0.4em;
}

body .ck-jobs__count-badge::before {
	content: "// ";
	color: var(--ij-syn-comment);
}

/* --- Hero layout --------------------------------------------
   Decoration is off → drop the empty second grid column so the content isn't
   stranded in a half-width column. Single left-aligned column suits the
   terminal look. */
body .ck-hero__container {
	grid-template-columns: 1fr;
}

/* --- Search bar + category dropdown -------------------------
   Match the archive search field: 2px border, md radius, and a single green
   focus glow on the whole bar (:focus-within) — the parent theme otherwise
   paints its own focus ring "inside" the input. Widen the custom-select menu so
   the long category names (28 of them) don't wrap into a squished list. */
body .ck-jobs__search-bar {
	border-width: 2px;
	border-radius: var(--ppg-radius-md, 8px);
	box-shadow: none;
	transition: border-color var(--ppg-transition-normal), box-shadow var(--ppg-transition-normal);
}

body .ck-jobs__search-bar:focus-within {
	border-color: var(--ppg-color-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ppg-color-primary) 10%, transparent);
}

/* Kill the parent theme's inner focus ring on the field + dropdown triggers;
   the bar glow above is the single focus indicator. */
body .ck-jobs__search-input:focus,
body .ck-jobs__search-input:focus-visible,
body .ck-jobs__custom-select-trigger:focus,
body .ck-jobs__custom-select-trigger:focus-visible {
	outline: none;
	border-color: transparent;
	box-shadow: none;
}

body .ck-jobs__custom-select-menu {
	right: auto;
	min-width: 260px;
	border-radius: var(--ppg-radius-sm, 4px);
}

body .ck-jobs__custom-select-menu li {
	border-radius: var(--ppg-radius-sm, 4px);
}

/* --- Card company row (logo + name) -------------------------
   Mirrors the archive card: small white-padded logo + mono company name,
   sitting above the card title. */
body .ck-jobs__card-company-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

body .ck-jobs__card-logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--ppg-radius-sm, 4px);
	background: #fff;                 /* logos are usually on white */
	border: 1px solid var(--ppg-color-border);
	padding: 4px;
	object-fit: contain;
}

body .ck-jobs__card-company {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	color: var(--ppg-color-text-light);
}

/* Category badge → neutral mono chip like the archive card (was a green pill) */
body .ck-jobs__card-category {
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	padding: 3px 8px;
	border-radius: var(--ppg-radius-sm, 4px);
	background-color: var(--ppg-color-background-alt);
	color: var(--ppg-color-text-light);
	border: 1px solid var(--ppg-color-border);
}

/* --- Mobile: stack everything ---------------------------------
   The job grid (cols-2) and the stats grid have no single-column fallback, so
   on phones they stay multi-column and look cramped. Force one column. */
@media (max-width: 768px) {
	body .ck-jobs__grid,
	body .ck-stats-bar__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Ratgeber / Guide pages
   ------------------------------------------------------------
   Long-form content pages (/ratgeber/*). Scoped under .itj-guide
   (the page content wraps in a group with that class) so we only
   touch these pages, never global page content. The parent theme
   already centers entry-content children to --ppg-content-width;
   here we add the terminal/Catppuccin flavour on top.
   ============================================================ */

/* --- Container: exact same content width as archive/detail.
   The parent .site-main wrapper already supplies max-width:--ppg-wide-width
   + --ppg-space-lg horizontal gutter (the SAME gutter the archive has). So
   here we only add vertical rhythm — adding horizontal padding too would
   double the gutter and make the column ~96px narrower than /jobs. */
.itj-guide {
	padding-block: var(--ppg-space-xl, 64px);
}

/* --- Two-column body: reading column (left) + sticky TOC (right) */
.itj-guide__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15rem;
	gap: var(--ppg-space-xl, 64px);
	align-items: start;
}

.itj-guide__main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;          /* fill the column next to the TOC (no narrow cap) */
}

/* First heading flush to the top, so the reading column lines up with the
   top of the TOC sidebar (parent theme gives every h2 a large top margin). */
.entry-content .itj-guide__main > :first-child {
	margin-top: 0;
}

/* The PPG-Suite design-system adds large top+bottom padding to EVERY
   .wp-block-group (:root :where(.wp-block-group), 0,1,0 specificity). On the
   guide that top padding pushed the structural groups down and knocked the
   reading column out of line with the TOC. Drop the top padding on the layout
   groups only (the TOC/crosslink boxes keep their own box padding). Higher
   specificity than the design-system rule, so it wins regardless of order. */
.entry-content .itj-guide__header,
.entry-content .itj-guide__body,
.entry-content .itj-guide__main {
	padding-top: 0;
}

/* --- Header: prompt eyebrow + big title + lead ------------- */
.itj-guide__header {
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed var(--ppg-color-border);
}

/* zsh-style prompt: "➜  ~/ratgeber/lebenslauf" */
.itj-guide__eyebrow {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	color: var(--ctp-sky);
	margin: 0 0 1rem;
	word-break: break-all;
}

.itj-guide__eyebrow::before {
	content: "➜  ";
	color: var(--ppg-color-primary);
}

.itj-guide__title {
	font-family: var(--ppg-font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ppg-color-text);
	margin: 0 0 1rem;
}

.itj-guide__lead {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--ppg-color-text-light);
	margin: 0;
}

/* --- Section headings: terminal "#" anchor marker ---------- */
.entry-content .itj-guide h2 {
	font-family: var(--ij-font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	scroll-margin-top: 90px;        /* offset for sticky header on anchor jumps */
}

.entry-content .itj-guide h2::before {
	content: "# ";
	color: var(--ij-syn-comment);
}

/* --- Table of contents / cross-links: boxed terminal block - */
.itj-guide__toc,
.itj-guide__crosslinks {
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-md, 8px);
	padding: 1.25rem 1.5rem;
	margin-block: 2rem;
}

/* TOC becomes the sticky right sidebar; crosslinks stay inline at the
   bottom of the reading column. */
.itj-guide__toc {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 96px;
	align-self: start;
	margin: 0;
}

.itj-guide__toc-label {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	color: var(--ij-syn-comment);
	margin: 0 0 0.75rem;
}

.itj-guide__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.itj-guide__toc-list li {
	margin: 0;
}

.itj-guide__toc-list a {
	font-family: var(--ij-font-mono);
	font-size: 0.9375rem;
	color: var(--ppg-color-text-light);
	text-decoration: none;
	transition: color 0.12s ease;
}

.itj-guide__toc-list a::before {
	content: "› ";
	color: var(--ppg-color-primary);
}

.itj-guide__toc-list a:hover {
	color: var(--ppg-color-primary);
}

/* --- Ordered steps: mono leading-zero counter -------------- */
.itj-guide__steps {
	list-style: none;
	counter-reset: itj-step;
	margin: 1.5rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.itj-guide__steps li {
	counter-increment: itj-step;
	position: relative;
	padding-left: 2.75rem;
	line-height: 1.65;
}

.itj-guide__steps li::before {
	content: counter(itj-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.05em;
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ppg-color-primary);
}

/* --- Data table: terminal grid ----------------------------- */
.itj-guide__table {
	margin: 1.5rem 0;
}

.itj-guide__table table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--ppg-color-border);
	font-size: 0.9375rem;
}

.itj-guide__table th,
.itj-guide__table td {
	border: 1px solid var(--ppg-color-border);
	padding: 0.6rem 0.9rem;
	text-align: left;
}

.itj-guide__table thead th {
	background-color: var(--ppg-color-background-alt);
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ppg-color-text);
	text-transform: lowercase;
}

.itj-guide__table tbody tr:nth-child(even) {
	background-color: color-mix(in srgb, var(--ctp-surface0) 35%, transparent);
}

.itj-guide__table td:last-child {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	color: var(--ppg-color-text-light);
}

/* --- Do / Don't columns ------------------------------------ */
.itj-guide__dodont {
	gap: 1rem;
	margin: 1.5rem 0;
}

.itj-guide__do,
.itj-guide__dont {
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-left-width: 3px;
	border-radius: var(--ppg-radius-md, 8px);
	padding: 1rem 1.25rem;
}

.itj-guide__do  { border-left-color: var(--ppg-color-success); }
.itj-guide__dont { border-left-color: var(--ppg-color-error); }

.itj-guide__dodont-head {
	font-family: var(--ij-font-mono);
	font-weight: 700;
	font-size: 0.9375rem;
	margin: 0 0 0.5rem;
}

.itj-guide__do  .itj-guide__dodont-head { color: var(--ppg-color-success); }
.itj-guide__dont .itj-guide__dodont-head { color: var(--ppg-color-error); }

.itj-guide__dodont ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Pillar topic cards (ratgeber overview) ---------------- */
.itj-guide__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 2rem 0;
}

.itj-guide__card {
	display: block;
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-lg, 12px);
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	transition: border-color 0.12s ease;
}

.itj-guide__card:hover {
	border-color: var(--ppg-color-primary);
}

.itj-guide__card-title {
	font-family: var(--ij-font-mono);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ppg-color-text);
	margin: 0 0 0.4rem;
}

.itj-guide__card-title::before {
	content: "\203A  ";
	color: var(--ppg-color-primary);
}

.itj-guide__card-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ppg-color-text-light);
	margin: 0;
}

@media (max-width: 767px) {
	.itj-guide__cards {
		grid-template-columns: 1fr;
	}
}

/* --- Example callout (blockquote) -------------------------- */
.itj-guide__example {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background-color: var(--ppg-color-surface);
	border-left: 3px solid var(--ij-accent-hl);
	border-radius: var(--ppg-radius-md, 8px);
}

.itj-guide__example p {
	margin: 0;
	color: var(--ppg-color-text-light);
	font-style: italic;
	line-height: 1.7;
}

/* --- FAQ: native details, terminal styling ----------------- */
.itj-guide__faq {
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-md, 8px);
	padding: 0 1.25rem;
	margin: 0.6rem 0;
	transition: border-color 0.12s ease;
}

.itj-guide__faq[open] {
	border-color: color-mix(in srgb, var(--ppg-color-primary) 45%, var(--ppg-color-border));
}

.itj-guide__faq summary {
	font-family: var(--ij-font-mono);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ppg-color-text);
	cursor: pointer;
	padding: 1rem 0;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.itj-guide__faq summary::-webkit-details-marker { display: none; }

.itj-guide__faq summary::before {
	content: "$";
	color: var(--ppg-color-primary);
	font-weight: 700;
}

.itj-guide__faq[open] summary::before { content: "~"; }

.itj-guide__faq summary:hover { color: var(--ppg-color-primary); }

.itj-guide__faq > p {
	margin: 0;
	padding: 0 0 1rem 1.5rem;
	color: var(--ppg-color-text-light);
	line-height: 1.7;
}

/* --- Theme's auto parent/sibling/children nav (static-page) ---
   Each guide page carries its own curated "// Weiterlesen" crosslinks box and
   the pillar has its own topic cards, so the theme's auto navs are redundant
   (the children grid also trims raw block markup). Hide both. */
.static-page__siblings,
.static-page__children {
	display: none;
}

/* --- Mobile: collapse to one column, TOC moves on top (not sticky),
   padding steps follow the archive/detail breakpoints. */
@media (max-width: 991px) {
	.itj-guide {
		padding-block: var(--ppg-space-lg, 48px);
	}
	.itj-guide__body {
		display: block;
	}
	.itj-guide__main {
		max-width: none;
	}
	.itj-guide__toc {
		position: static;
		margin: 0 0 2rem;
	}
}

@media (max-width: 767px) {
	.itj-guide {
		padding-block: var(--ppg-space-md, 24px);
	}
}

/* ============================================================
   Für Unternehmen — pricing & packages
   ------------------------------------------------------------
   Employer section (/fuer-unternehmen/*). Reuses the .itj-guide
   page shell (header, h2, faq, crosslinks, cards) and adds the
   pricing / bundle / form components below.
   ============================================================ */

/* --- Shared primary button (matches hero "Offene Stellen").
   The parent rule .static-page__content .entry-content a:hover (0,3,1)
   recolours links inside entry-content, so the button needs an equal-or-
   higher specificity override for color/decoration. */
.itj-btn,
.static-page__content .entry-content a.itj-btn {
	display: inline-block;
	font-family: var(--ij-font-mono);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	background-color: var(--ppg-color-primary);
	color: var(--ppg-color-on-primary);
	border: 1px solid var(--ppg-color-primary);
	border-radius: var(--ppg-radius-md, 8px);
	padding: 0.7rem 1.4rem;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.itj-btn:hover,
.static-page__content .entry-content a.itj-btn:hover {
	background-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	border-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	color: var(--ppg-color-on-primary);
}

.itj-cta-row {
	margin: 2rem 0;
}

/* --- Single-listing price cards ---------------------------- */
.itj-pricegrid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1.25rem;
	margin: 2rem 0;
	align-items: start;
}

.itj-price {
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-lg, 12px);
	padding: 1.75rem;
}

.itj-price--accent {
	border-color: color-mix(in srgb, var(--ppg-color-primary) 55%, var(--ppg-color-border));
}

.itj-price__tag {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	color: var(--ij-syn-comment);
	margin: 0 0 0.75rem;
}

.itj-price__name {
	font-family: var(--ij-font-mono);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ppg-color-text);
	margin: 0 0 0.75rem;
}

.itj-price__amount {
	font-family: var(--ppg-font-heading);
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--ppg-color-text);
}

.itj-price__period {
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
	color: var(--ppg-color-text-light);
	margin-left: 0.4rem;
}

.itj-price__note {
	font-size: 0.8125rem;
	color: var(--ij-syn-comment);
	margin: 0.4rem 0 1.25rem;
}

.itj-price__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.itj-price__features li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ppg-color-text-light);
}

.itj-price__features li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ppg-color-success);
	font-weight: 700;
}

/* --- Multiposting bundle cards ----------------------------- */
.itj-pkggrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin: 2rem 0;
	align-items: stretch;
}

.itj-pkg {
	display: flex;
	flex-direction: column;
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-lg, 12px);
	padding: 1.5rem 1.5rem 1.25rem;
	transition: border-color 0.12s ease;
}

.itj-pkg:hover {
	border-color: var(--ppg-color-primary);
}

.itj-pkg--featured {
	border-color: var(--ij-accent-hl);
}

.itj-pkg__badge {
	align-self: flex-start;
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ij-accent-hl);
	background-color: var(--ij-accent-hl-bg);
	border: 1px solid var(--ij-accent-hl-bd);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	margin: 0 0 0.85rem;
}

.itj-pkg__name {
	font-family: var(--ij-font-mono);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ppg-color-text);
	margin: 0 0 1rem;
}

.itj-pkg__portals {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 auto;            /* equal-height cards: pricing sticks to bottom */
}

.itj-pkg__portals li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ppg-color-text-light);
}

.itj-pkg__portals li::before {
	content: "\203A";
	position: absolute;
	left: 0;
	color: var(--ppg-color-primary);
}

.itj-pkg__pricing {
	border-top: 1px dashed var(--ppg-color-border);
	padding-top: 1rem;
}

.itj-pkg__uvp {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	color: var(--ij-syn-comment);
	text-decoration: line-through;
}

.itj-pkg__price {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0.25rem 0 0.7rem;
}

.itj-pkg__price-amount {
	font-family: var(--ppg-font-heading);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ppg-color-text);
}

.itj-pkg__price-note {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	color: var(--ppg-color-text-light);
}

.itj-pkg__save {
	display: inline-block;
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ppg-color-success);
	background-color: var(--ij-accent-bg);
	border: 1px solid var(--ij-accent-border);
	border-radius: 6px;
	padding: 0.25rem 0.6rem;
}

/* --- Contact form (Contact Form 7) ------------------------- */
.itj-guide__form {
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-lg, 12px);
	padding: 2rem;
	margin: 2rem 0;
	scroll-margin-top: 90px;
}

.itj-guide__form .wpcf7-form p {
	margin: 0 0 1rem;
}

.itj-guide__form label {
	display: block;
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
	color: var(--ppg-color-text);
}

.itj-guide__form input[type="text"],
.itj-guide__form input[type="email"],
.itj-guide__form input[type="tel"],
.itj-guide__form select,
.itj-guide__form textarea {
	width: 100%;
	margin-top: 0.4rem;
	background-color: var(--ppg-color-background, var(--ctp-base));
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-md, 8px);
	padding: 0.65rem 0.85rem;
	color: var(--ppg-color-text);
	font-family: inherit;
	font-size: 0.9375rem;
}

.itj-guide__form input:focus,
.itj-guide__form select:focus,
.itj-guide__form textarea:focus {
	outline: none;
	border-color: var(--ppg-color-primary);
}

.itj-guide__form textarea {
	min-height: 8rem;
	resize: vertical;
}

.itj-guide__form .wpcf7-submit {
	font-family: var(--ij-font-mono);
	font-weight: 700;
	font-size: 0.9375rem;
	background-color: var(--ppg-color-primary);
	color: var(--ppg-color-on-primary);
	border: 1px solid var(--ppg-color-primary);
	border-radius: var(--ppg-radius-md, 8px);
	padding: 0.75rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.itj-guide__form .wpcf7-submit:hover {
	background-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	border-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
}

/* DSGVO consent: checkbox left, text wrapping cleanly beside it (not under). */
.itj-guide__form .itj-form-consent {
	margin-top: 0.5rem;
}

.itj-guide__form .itj-form-consent .wpcf7-list-item {
	display: block;
	margin: 0;
}

.itj-guide__form .itj-form-consent .wpcf7-list-item > label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ppg-color-text-light);
}

.itj-guide__form .itj-form-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: auto;
	margin-top: 0.15rem;
	accent-color: var(--ppg-color-primary);
}

.itj-guide__form .itj-form-consent a {
	color: var(--ppg-color-primary);
	text-decoration: underline;
}

/* Bundle cards already feel tight at 2-up on small tablets — collapse a
   touch earlier than the phone breakpoint so the portal lists keep room. */
@media (max-width: 880px) {
	.itj-pkggrid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.itj-pricegrid,
	.itj-pkggrid {
		grid-template-columns: 1fr;
	}

	/* Tighten the boxed panels and make the CTA a full-width tap target. */
	.itj-guide__form {
		padding: 1.5rem 1.25rem;
	}

	.itj-price,
	.itj-pkg {
		padding: 1.25rem;
	}

	.itj-btn,
	.static-page__content .entry-content a.itj-btn {
		display: block;
		text-align: center;
	}
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet & below — stack the two columns, tighten the page padding.
   Breakpoints follow the parent theme (EmployerKit): < 992px = tablet/mobile,
   <= 767px = phone. */
@media (max-width: 991px) {
	.jobboard-single.itj-job,
	.jobboard-archive.itj-archive {
		padding: var(--ppg-space-lg, 48px) var(--ppg-space-md, 24px);
	}

	.itj-job__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.itj-job__sticky {
		position: static;
	}
}

/* Phones (parent breakpoint: <= 767px) */
@media (max-width: 767px) {
	.jobboard-single.itj-job,
	.jobboard-archive.itj-archive {
		padding: var(--ppg-space-md, 24px) var(--ppg-space-sm, 16px);
	}

	.itj-job__back {
		margin-bottom: 24px;
	}

	.itj-job__head {
		gap: 14px;
	}

	.itj-job__logo,
	.itj-job__mark {
		width: 56px;
		height: 56px;
	}

	.itj-job__mark {
		font-size: 24px;
	}

	.itj-job__metarow {
		gap: 8px 14px;
		margin-top: 12px;
	}
}

/* --- #3 Similar jobs — compact list (title + category) ----- */
.itj-similar {
	margin-top: 16px;
}

.itj-similar__label {
	display: block;
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	color: var(--ij-syn-comment);
	margin-bottom: 8px;
}

.itj-similar__item {
	display: block;
	padding: 12px;
	border-bottom: 1px solid var(--ppg-color-border-light);
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.itj-similar__item:hover {
	background-color: var(--ppg-color-background-alt);
}

.itj-similar__title {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ppg-color-text);
	line-height: 1.35;
}

.itj-similar__cat {
	display: block;
	margin-top: 3px;
	font-family: var(--ij-font-mono);
	font-size: 0.6875rem;
	color: var(--ppg-color-text-muted);
}

/* --- #2 Meta card — restyle the plugin sidebar (.jobboard-meta) into
   the design card: apply button on top, compact mono key-value below.
   Scoped to the aside so the plugin sidebar elsewhere is untouched. */
/* Terminal panel — flat, SQUARE corners, near-black bg, mono. NOT a card:
   no border-radius, no drop shadow. No window chrome (no traffic-light dots) —
   a path-style title bar conveys "terminal" instead. */
.itj-job__aside .jobboard-meta {
	display: flex;
	flex-direction: column;
	background-color: var(--ppg-color-surface);
	border: 1px solid var(--ppg-color-border);
	border-radius: 0;
	padding: 0 14px 14px;
	font-family: var(--ij-font-mono);
}

/* Title bar (full-bleed, order -2 → very top) */
.itj-job__aside .jobboard-meta::before {
	content: "~/stellenanzeige/meta";
	order: -2;
	margin: 0 -14px;
	padding: 8px 12px;
	font-size: 0.6875rem;
	color: var(--ij-syn-comment);
	background-color: var(--ppg-color-background-alt);
}

/* Apply button block (order -1 → just below the title bar). No border lines —
   the darker title-bar bg already separates it; cleaner. */
.itj-job__aside .jobboard-meta-apply {
	order: -1;
	margin: 0 0 14px;
	padding: 16px 0;
	border: none;   /* override plugin's border-top */
	text-align: left;
}

/* Apply button: plugin hardcodes white text — unreadable on the pastel-green
   primary. Use dark on-primary instead (site-wide, beats the plugin rule via
   the body-scoped selector). */
body .jobboard-apply-button,
body .jobboard-apply-button:hover {
	color: var(--ppg-color-on-primary);
}

/* Meta rows → compact mono key-value */
.itj-job__aside .jobboard-meta-icon {
	display: none;
}

.itj-job__aside .jobboard-meta-item {
	font-family: var(--ij-font-mono);
	font-size: 0.75rem;
	line-height: 1.9;
}

.itj-job__aside .jobboard-meta-text {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.itj-job__aside .jobboard-meta-label {
	color: var(--ij-syn-keyword);   /* syntax-key purple → config/terminal feel */
	font-weight: 400;
}

.itj-job__aside .jobboard-meta-value {
	color: var(--ppg-color-text);
}

.itj-job__aside .jobboard-meta-value a {
	color: var(--ppg-color-text);
	text-decoration: none;
}

.itj-job__aside .jobboard-meta-value a:hover {
	color: var(--ppg-color-primary);
}

/* Deadline urgency badges keep a status color */
.itj-job__aside .jobboard-meta-urgency {
	font-family: var(--ij-font-mono);
	color: var(--ppg-color-warning);
}

.itj-job__aside .jobboard-meta-urgency--critical {
	color: var(--ppg-color-error);
}

/* --- #7 Archive responsive polish --------------------------
   Plugin already collapses the sidebar (≤1023px) + shows the toggle/overlay,
   all token-themed. Two fixes here: mono toggle, and a DARK overlay backdrop
   (plugin tints it with the light text color → too bright on the dark theme). */
.itj-archive .jobboard-mobile-filter-toggle {
	font-family: var(--ij-font-mono);
	font-size: 0.8125rem;
}

.itj-archive .jobboard-list-layout-sidebar.is-open {
	background-color: color-mix(in srgb, #000 65%, transparent);
}

/* ============================================================
   SITE HEADER — .itj-header (terminal / Catppuccin)
   Standalone custom header (own header.php + assets/itj-header.js),
   independent of the parent header CSS/JS. Three zones on desktop:
   logo (left) · primary menu (centered) · action buttons (right).
   Collapses to a slide-in panel below 900px.
   ============================================================ */
.itj-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--ctp-mantle);
	border-bottom: 1px solid var(--ppg-color-border);
	font-family: var(--ij-font-mono);
}

.itj-header__bar {
	max-width: var(--ppg-wide-width, 1440px);
	margin: 0 auto;
	padding: 0 var(--ppg-space-lg, 48px);
	height: 64px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;   /* true optical centering of the menu */
	align-items: center;
	gap: var(--ppg-space-md, 24px);
}

/* --- Logo ------------------------------------------------- */
.itj-logo {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

.itj-logo svg {
	height: 30px;
	width: auto;
	display: block;
}

.itj-logo__text {
	font-weight: 700;
	color: var(--ctp-text);
}

/* --- Primary menu (centered) ------------------------------ */
.itj-header__nav {
	justify-self: center;
}

.itj-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.itj-header__menu li {
	margin: 0;
}

.itj-header__menu a {
	position: relative;
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--ctp-subtext1);
	font-family: var(--ij-font-mono);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.12s ease;
}

.itj-header__menu a:hover,
.itj-header__menu .current-menu-item > a {
	color: var(--ctp-text);
}

/* terminal-style underline that wipes in from the left on hover */
.itj-header__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	background-color: var(--ij-accent-hl);
	transition: right 0.18s ease;
}

.itj-header__menu a:hover::after,
.itj-header__menu .current-menu-item > a::after {
	right: 0;
}

/* --- Action buttons --------------------------------------- */
.itj-header__actions--bar {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.itj-navbtn {
	display: inline-flex;
	align-items: center;
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--ppg-radius-md, 8px);
	padding: 0.55rem 1rem;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.itj-navbtn--accent {
	background-color: var(--ppg-color-primary);
	color: var(--ppg-color-on-primary);
	border-color: var(--ppg-color-primary);
}

.itj-navbtn--accent:hover {
	background-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	border-color: var(--ppg-color-primary-hover, color-mix(in srgb, var(--ppg-color-primary) 85%, #000));
	color: var(--ppg-color-on-primary);
}

.itj-navbtn--ghost {
	background-color: transparent;
	color: var(--ctp-subtext1);
	border-color: var(--ppg-color-border);
}

.itj-navbtn--ghost:hover {
	color: var(--ctp-text);
	border-color: var(--ij-accent-hl);
}

/* --- Mobile toggle (hidden on desktop) -------------------- */
.itj-header__toggle {
	display: none;
	position: relative;
	z-index: 1110;            /* stay above the slide-in panel (1100) so the X is visible + clickable */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.itj-header__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--ctp-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.itj-header.is-open .itj-header__toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.itj-header.is-open .itj-header__toggle span:nth-child(2) {
	opacity: 0;
}
.itj-header.is-open .itj-header__toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Panel-only action block + overlay are desktop-hidden */
.itj-header__actions--panel {
	display: none;
}

.itj-header__overlay {
	display: none;
}

/* --- Mobile: slide-in panel (< 900px) --------------------- */
@media (max-width: 899px) {
	.itj-header__bar {
		grid-template-columns: 1fr auto;   /* logo · (toggle); nav is fixed/out of flow */
		padding: 0 var(--ppg-space-md, 24px);
	}

	/* Hide the in-bar buttons; only the toggle stays */
	.itj-header__actions--bar .itj-navbtn {
		display: none;
	}

	.itj-header__toggle {
		display: flex;
	}

	.itj-header__nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: min(360px, 88vw);
		height: 100vh;
		justify-self: auto;
		z-index: 1100;
		display: flex;
		flex-direction: column;
		padding: calc(64px + 1.5rem) 1.5rem 1.5rem;
		background-color: var(--ctp-mantle);
		border-left: 1px solid var(--ppg-color-border);
		box-shadow: var(--ppg-shadow-lg, -8px 0 24px rgba(0, 0, 0, 0.4));
		overflow-y: auto;
		transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.itj-header.is-open .itj-header__nav {
		right: 0;
	}

	.itj-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.itj-header__menu li {
		border-bottom: 1px solid var(--ppg-color-border);
	}

	.itj-header__menu a {
		display: block;
		padding: 1rem 0;
		font-size: 1.05rem;
	}

	.itj-header__menu a::after {
		display: none;   /* no underline-wipe in the panel */
	}

	.itj-header__actions--panel {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin-top: auto;
		padding-top: 1.5rem;
	}

	.itj-header__actions--panel .itj-navbtn {
		justify-content: center;
		padding: 0.85rem 1rem;
		font-size: 1rem;
	}

	.itj-header__overlay {
		position: fixed;
		inset: 0;
		z-index: 1090;
		background-color: color-mix(in srgb, var(--ctp-crust) 70%, transparent);
	}

	/* Only blocks the page while the panel is open — never otherwise. */
	.itj-header.is-open .itj-header__overlay {
		display: block;
	}
}

body.itj-nav-lock {
	overflow: hidden;
}

/* ============================================================
   SITE FOOTER — .itj-footer (terminal / Catppuccin)
   Standalone custom footer (own footer.php). Brand column +
   three editable menu columns, then a bottom bar.
   ============================================================ */
.itj-footer {
	background-color: var(--ctp-mantle);
	border-top: 1px solid var(--ppg-color-border);
	font-family: var(--ij-font-mono);
	color: var(--ctp-subtext0);
}

.itj-footer__inner {
	max-width: var(--ppg-wide-width, 1440px);
	margin: 0 auto;
	padding: 3rem var(--ppg-space-lg, 48px) 2.25rem;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2.5rem;
}

/* --- Brand column ----------------------------------------- */
.itj-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.itj-footer__brand .itj-logo svg {
	height: 28px;
	width: auto;
	display: block;
}

.itj-footer__tagline {
	margin: 0;
	max-width: 30ch;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ctp-overlay1);
}

/* --- Link columns ----------------------------------------- */
.itj-footer__col-label {
	margin: 0 0 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ij-syn-comment);   /* // marker tone */
}

.itj-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.itj-footer__menu li {
	margin: 0;
}

.itj-footer__menu a {
	color: var(--ctp-subtext0);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.12s ease;
}

.itj-footer__menu a:hover,
.itj-footer__menu .current-menu-item > a {
	color: var(--ctp-text);
}

/* --- Bottom bar ------------------------------------------- */
.itj-footer__bottom {
	max-width: var(--ppg-wide-width, 1440px);
	margin: 0 auto;
	padding: 1.1rem var(--ppg-space-lg, 48px);
	border-top: 1px solid var(--ppg-color-border-light, var(--ctp-surface0));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.8rem;
	color: var(--ctp-overlay1);
}

.itj-footer__bottom p {
	margin: 0;
}

.itj-footer__powered a {
	color: var(--ctp-subtext0);
	text-decoration: none;
	transition: color 0.12s ease;
}

.itj-footer__powered a:hover {
	color: var(--ij-accent-hl);   /* mauve accent */
}

/* --- Footer responsive ------------------------------------ */
@media (max-width: 899px) {
	.itj-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.5rem;
		padding: 2.5rem var(--ppg-space-md, 24px) 2rem;
	}

	.itj-footer__brand {
		grid-column: 1 / -1;   /* brand spans full width on top */
	}

	.itj-footer__bottom {
		padding: 1.1rem var(--ppg-space-md, 24px);
	}
}

@media (max-width: 519px) {
	.itj-footer__inner {
		grid-template-columns: 1fr;
	}

	.itj-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}
}

/* ============================================================
   HOMEPAGE EXTRAS — .itj-home-paths + .itj-home-seo
   Two full-bleed sections appended to the contentkit homepage:
   a two-paths block (Ratgeber / Arbeitgeber) before the CTA, and
   a keyword-rich SEO text block at the very bottom. Sections span
   the full entry-content width (home is unconstrained); __inner
   centers the content like the contentkit __container.
   ============================================================ */
.itj-home-paths {
	background-color: var(--ctp-crust);
	padding: var(--ppg-space-xl, 5rem) 0;
}

.itj-home-paths__inner {
	max-width: var(--ppg-wide-width, 1440px);
	margin: 0 auto;
	padding: 0 var(--ppg-space-lg, 48px);
}

/* Centered header, matching the contentkit section pattern (badge pill + dot) */
.itj-home-paths__header {
	margin-bottom: 3rem;
	text-align: center;
}

.itj-home-paths__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding: 0.5rem 1rem;
	background-color: var(--ppg-color-primary-light);
	border: 1px solid var(--ppg-color-primary);
	border-radius: 100px;
	color: var(--ppg-color-primary);
	font-family: var(--ppg-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.itj-home-paths__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ppg-color-primary);
	animation: ck-pulse 2s ease-in-out infinite;   /* keyframes from contentkit (loaded on home) */
}

.itj-home-paths__headline {
	margin: 0 0 0.75rem;
	font-family: var(--ppg-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--ctp-text);
}

.itj-home-paths__subtitle {
	max-width: 600px;
	margin: 0 auto;
	font-family: var(--ppg-font-body);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--ctp-subtext0);
}

.itj-home-paths__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
}

.itj-home-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.75rem;
	background-color: var(--ctp-base);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-md, 8px);
	text-decoration: none;
	transition: border-color 0.14s ease, background-color 0.14s ease;
}

.itj-home-card:hover {
	border-color: var(--ij-accent-hl);
	background-color: var(--ctp-surface0);
}

.itj-home-card__tag {
	font-family: var(--ij-font-mono);
	font-size: 0.78rem;
	color: var(--ij-accent-hl);
}

.itj-home-card__title {
	font-family: var(--ij-font-mono);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ctp-text);
}

.itj-home-card__desc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--ctp-subtext0);
}

.itj-home-card__cta {
	margin-top: 0.4rem;
	font-family: var(--ij-font-mono);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ppg-color-primary);
}

/* --- SEO text band --------------------------------------- */
.itj-home-seo {
	background-color: var(--ctp-crust);
}

.itj-home-seo__inner {
	max-width: var(--ppg-wide-width, 1440px);
	margin: 0 auto;
	padding: clamp(2.75rem, 5vw, 4rem) var(--ppg-space-lg, 48px);
}

/* Two columns: SEO text left, top-categories panel right */
.itj-home-seo__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	align-items: start;
}

.itj-home-seo__text > :first-child {
	margin-top: 0;
}

.itj-home-seo__aside {
	padding: 1.5rem;
	background-color: var(--ctp-base);
	border: 1px solid var(--ppg-color-border);
	border-radius: var(--ppg-radius-md, 8px);
}

.itj-home-seo__aside-label {
	margin: 0 0 0.9rem;
	font-family: var(--ij-font-mono);
	font-size: 0.8rem;
	color: var(--ij-syn-comment);
}

.itj-home-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itj-home-cats__item {
	border-bottom: 1px solid var(--ppg-color-border-light, var(--ctp-surface0));
}

.itj-home-cats__item:last-child {
	border-bottom: none;
}

.entry-content .itj-home-cats__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	font-family: var(--ij-font-mono);
	font-size: 0.9rem;
	color: var(--ctp-subtext0);
	text-decoration: none;
	transition: color 0.12s ease;
}

.entry-content .itj-home-cats__item a:hover {
	color: var(--ctp-text);
}

.itj-home-cats__count {
	flex-shrink: 0;
	color: var(--ppg-color-primary);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.itj-home-seo h2 {
	margin: 0 0 1rem;
	font-family: var(--ij-font-mono);
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ctp-text);
}

.itj-home-seo h3 {
	margin: 2rem 0 0.75rem;
	font-family: var(--ij-font-mono);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ctp-subtext1);
}

.itj-home-seo p {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--ctp-subtext0);
}

/* Scoped to beat the parent .static-page__content .entry-content a:hover (0,3,1) */
.entry-content .itj-home-seo a {
	color: var(--ctp-text);
	text-decoration: underline;
	text-decoration-color: var(--ij-accent-hl);
	text-underline-offset: 2px;
	transition: color 0.12s ease;
}

.entry-content .itj-home-seo a:hover {
	color: var(--ij-accent-hl);
}

@media (max-width: 899px) {
	.itj-home-seo__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (max-width: 767px) {
	.itj-home-paths__cards {
		grid-template-columns: 1fr;
	}

	.itj-home-paths__inner {
		padding-left: var(--ppg-space-md, 24px);
		padding-right: var(--ppg-space-md, 24px);
	}

	.itj-home-seo__inner {
		padding-left: var(--ppg-space-md, 24px);
		padding-right: var(--ppg-space-md, 24px);
	}
}

/* ============================================================
   5. UTILITIES
   Single-purpose helpers (highest specificity, may use !important).
   (empty — fill element-by-element)
   ============================================================ */