/* =========================================================
   VIKAND — page furniture measured off live.
   Loaded on pages only (inc/setup.php).
   ========================================================= */

/* Search + category widgets in the press-room sidebar. Live renders both
   388x34 with 13px text on white. */
/* The widgets sit tight under their headings on live: input at +43.6 from the
   heading top, category select 45 under the input. */
.vk-sidebar .wp-block-search,
.vk-sidebar .wp-block-categories { margin: 0; }
.vk-sidebar .wp-block-search__inside-wrapper { border: 0; }
.vk-sidebar .wp-block-search__input {
	box-sizing: border-box;
	height: 34px;
	padding: 0 8px 0 28px;
	border: 2px solid #ddd;
	border-radius: 0;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-1.4-.001a5 5 0 1 1-7.07-7.07 5 5 0 0 1 7.07 7.07z'/%3E%3C/svg%3E") no-repeat 8px 50%;
	background-size: 13px 13px;
	font-size: 13px;
	color: #555;
}
.vk-sidebar .wp-block-categories select {
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	padding: 0 8px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	color: #555;
}

/* Sections own their spacing on this site — each band's padding is measured
   from live — so the theme's blockGap must not stack on top of it.

   theme.json emits its rhythm at :where() specificity, so one plain rule
   replaces it. It cannot be dropped to :where() itself — that hands the gap
   back to theme.json on source order. */
.vk-page.is-layout-constrained > * + *,
.editor-styles-wrapper .block-editor-block-list__layout > * + * { margin-block-start: 0; }

/* …except a band, which sets its own. Bands on this site overlap: the
   statement band is pulled 45px over the one above it, and the first band 8px
   under the header. Those pulls are design, and the rule above outranks the
   block's own margin, so the exception has to live here where it can win. */
.vk-page.is-layout-constrained > .fw-banner,
.editor-styles-wrapper .block-editor-block-list__layout > .fw-banner {
	margin-block-start: var(--fw-banner-mt, 0);
}
/* …and inside the groups and columns those sections are built from, where the
   rhythm comes from explicit spacer blocks measured off live. */
.vk-page .wp-block-group > * + *,
.vk-page .wp-block-column > * + * { margin-block-start: 0; }


/* /news/ — the full-width search and the archive link list, measured off live:
   input 1200x34, links 12.78px/23px #88A6C3 in 42px rows. */
.vk-wide-search .wp-block-search__input {
	box-sizing: border-box;
	height: 34px;
	padding: 0 8px;
	border: 2px solid #ddd;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	color: #555;
}
.vk-archive-list { margin: 0; padding: 0; list-style: none; }
.vk-archive-list li { margin: 0; padding: 9.5px 0; line-height: 23px; }
.vk-archive-list li a {
	display: block;
	color: #88a6c3;
	font-size: 12.78px;
	line-height: 23px;
	text-decoration: none;
}
.vk-archive-list li a:hover { color: #b0c4db; }

/* Bullet spacing is per band on live (20px on the job pages, none elsewhere);
   the generator measures it and the band passes it down as --vk-li-gap. */
/* The measured gap reaches nested items too: live sets its nested duties on a
   45px pitch, a 24px line plus the band's own 21px. */
.vk-list--spaced > li + li,
.fw-banner .wp-block-list > li + li { margin-top: var(--vk-li-gap, 0); }
/* …and a nested list on its own, measured pitch. */
.fw-banner .vk-list--sub > li + li { margin-top: var(--vk-li-subgap, var(--vk-li-gap, 0)); }

/* Live wraps each bullet in a <p>, so the item stands a few pixels taller than
   its own line. A core list item holds inline content and cannot carry a
   paragraph without producing invalid block markup, so the difference is
   reproduced as padding and the line height stays live's. */
.wp-block-list:not(.vk-list--sub) > li { padding-block: var(--vk-li-pad, 0); }

/* A nested list: the markers live uses, no indent of its own, and an item that
   only holds children shows no marker. */
.entry-content .vk-list--sub { padding-left: 0; margin: 0; }
.entry-content .vk-list--circle { list-style: circle; }
.entry-content .vk-list--square { list-style: square; }
.entry-content .vk-li--bare { list-style: none; }

/* WordPress's password form (the VHN1 page). Live sets it in the page body at
   14px with the input and button on one line. */
/* Live puts the gate 21px under the header and leaves 196px before the
   footer, which is what makes that page 900px tall. */
.post-password-form { max-width: 1200px; margin: 0 auto; padding: 21px 20px 196px; }
.post-password-form p { color: #808080; font-size: 14px; line-height: 25px; margin: 0 0 21px; }
.post-password-form label { display: inline-block; color: #808080; font-size: 14px; }
.post-password-form input[type="password"] {
	box-sizing: border-box;
	height: 34px;
	width: 170px;
	margin-left: 8px;
	padding: 6px 8px;
	border: 2px solid #ddd;
	border-radius: 0;
	font: 13px/16px Arial, sans-serif;
}
.post-password-form input[type="submit"] {
	height: 30px;
	margin-left: 8px;
	padding: 0 18px;
	background: #2a2c37;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	cursor: pointer;
}

/* Archive pagination — measured off live /archives/: 116px below the last
   card, a 38px line, 86px of air above the footer, and the links centred.
   Nothing styled it before, so it sat tight against the footer. */
.navigation.pagination {
	margin: 31px 0 86px;
	text-align: center;
}
.navigation.pagination .nav-links {
	display: block;
	color: #999;
	font-size: 14px;
	line-height: 38px;
}
.navigation.pagination a { color: #88a6c3; text-decoration: none; }
.navigation.pagination a:hover { color: #b0c4db; }
.navigation.pagination .page-numbers { padding: 0 6px; }

/* Cornerstone accordion, rebuilt on core/details — <details>/<summary>, so it
   opens and closes with no script and is keyboard accessible. The measurements
   come off live per page and arrive as custom properties on the wrapper,
   because live sizes these differently from one page to the next. */
/* The same treatment whether the rows sit in a .vk-acc wrapper or carry the
   class themselves — the composer puts it on each row, because a wrapper group
   brings core layout classes that have to match core's save() exactly. */
.vk-acc-item,
.vk-acc .wp-block-details {
	background: var(--vk-acc-bg, #fff);
	border-radius: var(--vk-acc-radius, 6.3px);
	box-shadow: var(--vk-acc-shadow, rgba(0, 0, 0, 0.25) 0 2.7px 11.7px);
	margin: 0 0 var(--vk-acc-gap, 25px);
	padding: 0;
}
.vk-acc-item:last-child,
.vk-acc .wp-block-details:last-child { margin-bottom: 0; }
.vk-acc-item > summary,
.vk-acc .wp-block-details > summary {
	display: flex;
	align-items: center;
	/* Live: indicator 373-388, label starts 397. */
	gap: 9px;
	padding: var(--vk-acc-pad, 15px 20px);
	color: var(--vk-acc-colour, #000);
	/* Measured on a desktop and set in em on live, so they ride the root
	   scale: 18/23.4 → 16/20.8 on a phone. */
	font-size: calc(var(--vk-acc-size, 18px) * var(--vk-scale, 1));
	line-height: calc(var(--vk-acc-line, 23.4px) * var(--vk-scale, 1));
	cursor: pointer;
	list-style: none;
}
.vk-acc-item > summary::-webkit-details-marker,
.vk-acc .wp-block-details > summary::-webkit-details-marker { display: none; }
/* The indicator live draws before the label. */
/* Live draws a filled triangle, not a chevron. Measured 2026-09-10 at 1920 on
   /case-management/ and /mental-health-solutions/, which are identical: the
   indicator is U+25B8 in the maven face at 18px on an 18px line, black, in a
   15x18 box, and it ROTATES 90deg when the row opens (matrix(0,1,-1,0,0,0)).
   Ours was an 8px box with two 2px borders turned -45deg, hard-coded #88a6c3.
   The colour is currentColor so the indicator follows its own header's colour,
   which is how live behaves -- both are black there. */
.vk-acc-item > summary::before,
.vk-acc .wp-block-details > summary::before {
	content: "\25B8";
	flex: 0 0 auto;
	width: 15px;
	height: 18px;
	border: 0;
	/* Black, not the label's colour. Re-measured on live 2026-09-10: the labels
	   are #88a6c3 and the triangle beside them is rgb(0,0,0). currentColor was
	   tried here and reverted -- it turned the triangle pale blue the moment the
	   labels went back to the colour live actually uses. */
	color: #000;
	font-size: 18px;
	line-height: 18px;
	transform: none;
	transition: transform 0.2s ease;
}
.vk-acc-item[open] > summary::before,
.vk-acc .wp-block-details[open] > summary::before { transform: rotate(90deg); }
.vk-acc-item > :not(summary),
.vk-acc .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 20px 20px;
	font-size: 14px;
	line-height: 19.6px;
	color: #808080;
}

/* Live marks its icon rows with a tick before the text. The row's left padding
   is the space it measured on live, so the tick is drawn inside that. */
p.vk-tick { position: relative; }
p.vk-tick::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.42em;
	width: 6px;
	height: 11px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Live's numbered list: a 36px circle in #2a3b5a with the number centred in
   white, the text 45px in. Styled off its own class, which the generator
   carries through from live's markup. */
ol.vikand-list {
	list-style: none;
	padding-left: 0;
	counter-reset: item 0;
}
ol.vikand-list > li {
	position: relative;
	list-style: none;
	padding-left: 45px;
	margin: 0 0 18px;
}
ol.vikand-list > li::before {
	counter-increment: item;
	content: counter(item);
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #2a3b5a;
	color: #fff;
	font-size: 18px;
	line-height: 36px;
	text-align: center;
}

/* Lists the source marks its own way.
   A tick list draws a check inside each item and hides the bullet; a numbered
   list on these pages suppresses the marker and draws its own. Falling back to
   a disc put a stray bullet in front of every tick and every accordion row. */
/* `.entry-content ol` sets the marker and the indent at (0,1,1), so a bare
   class loses to it and every one of these lists kept a stray marker and a
   22.5px indent on top of its own. */
.entry-content .vk-list--tick,
.entry-content .vk-list--num,
.entry-content .vk-list--bare { list-style: none; padding-left: 0; }

/* Numbers drawn in a disc rather than as a marker. The source counts the items
   itself so that it can put each number in a 36px circle of the dark tone,
   which a list-style marker cannot do. */
.entry-content .vk-list--num { counter-reset: vk-num; }
/* The gap between items is the band's measured one, exactly as for every other
   list here. Giving these their own margin as well doubled it. */
.entry-content .vk-list--num > li {
	position: relative;
	padding-left: 45px;
	counter-increment: vk-num;
}
.entry-content .vk-list--num > li::before {
	content: counter(vk-num);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #2a3b5a;
	color: #fff;
	font-size: 18px;
	line-height: 36px;
	text-align: center;
}
/* How far the words sit in from the item's edge, measured: live insets its
   ticked lists 30px and leaves its plain ones alone, and one value for both put
   four bullets 84px too far right. */
.entry-content .vk-list--tick > li { position: relative; padding-left: var(--vk-li-indent, 30px); }
/* The tick itself. Live draws a FontAwesome check glyph, which we do not load,
   and the obvious substitute -- a box with two borders turned 45deg -- comes out
   squat: compared side by side at 6x, live's long arm rises about twice the drop
   of its short arm, where the border version is nearer 1.3 and sits much flatter.
   Shaped as a masked SVG instead, so the proportions are explicit and the colour
   still follows `currentColor` (white on these bands, ink elsewhere). */
.entry-content .vk-list--tick > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	border: 0;
	background-color: currentColor;
	-webkit-mask: var(--vk-tick-mark) no-repeat center / contain;
	mask: var(--vk-tick-mark) no-repeat center / contain;
}
.entry-content .vk-list--tick {
	--vk-tick-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.6 L7 14.2 L15.5 2.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ---- Scroll reveal, shared --------------------------------------------------
   The states for the reveal in assets/js/vk-reveal.js. `vk-reveal` is added by
   that script and never by the markup, so without JavaScript -- or with reduced
   motion -- the content simply renders instead of staying invisible.
   Values measured on live: opacity 0 -> 1, translateY(9px) -> none, 0.65s
   cubic-bezier(0.4, 0, 0.2, 1) after 0.001s, once per element. */
.vk-reveal {
	opacity: 0;
	transform: translateY(9px);
	transition:
		opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.001s,
		transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.001s;
}
.vk-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.vk-reveal,
	.vk-reveal.is-in { opacity: 1; transform: none; transition: none; }
}


/* ---- 404 ---- measured on live 2026-09-11 at 1920 ---------------------------
   X's default not-found page. A 750px centred paragraph in #999, 27px on a
   48.6 line, 128px under the header; a 500px search box 36px under that with
   a 12px glyph 15px inside its left edge; 152px of white before the footer.
   The column is the ordinary 1200 content column, so the widths centre on it
   (paragraph x=578, search x=703). */
.vk-404 {
	padding: 128px 0 152px;
}
.vk-404__message {
	box-sizing: border-box;
	width: 750px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	color: #999;
	font-size: 27px;
	line-height: 1.8;
}
.vk-404__search {
	width: 500px;
	max-width: 100%;
	margin: 36px auto 0;
}
/* Live's .search-query: 34 tall, 2px #ddd, 13px #555, placeholder #999, no
   corners, FontAwesome search glyph in #272727 at 15px. The glyph is drawn as
   an SVG so no icon font is loaded for one page. */
.vk-404__input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 8px 0 28px;
	border: 2px solid #ddd;
	border-radius: 0;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23272727'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-1.4-.001a5 5 0 1 1-7.07-7.07 5 5 0 0 1 7.07 7.07z'/%3E%3C/svg%3E") no-repeat 15px 50% / 12px 12px;
	color: #555;
	font-size: 13px;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}
.vk-404__input::placeholder { color: #999; opacity: 1; }
.vk-404__input::-webkit-search-decoration,
.vk-404__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vk-404__input:focus { outline: 2px solid #2a3b5a; outline-offset: 2px; }

@media (max-width: 979px) {
	.vk-404 { padding: 64px 0 76px; }
	.vk-404__message { font-size: 21px; }
}

/* Phones: the press room's search and category filters come BEFORE the
   releases, as live orders them once its two columns stack (the filter is
   the right-hand column on a desktop). Core stacks columns below 782px. */
@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column:has(.wp-block-framework-posts-filter) { order: -1; }
}