/*
Theme Name: shivukme
Theme URI:
Author: Goliath
Author URI:
Description: תבנית ורסטילית עבור אתר מנהלי שיווק מצייצים
Version: 1.27
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shivuk
Tags: rtl, translation-ready, custom-menu, featured-images, threaded-comments
*/

/* -----------------------------------------------------------------------
   Reset & base
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--shivuk-color-text: #1c1c1e;
	--shivuk-color-muted: #6b6b70;
	--shivuk-color-bg: #ffffff;
	--shivuk-color-surface: #f6f6f7;
	--shivuk-color-border: #e2e2e4;
	--shivuk-color-accent: #1a7dbe;
	--shivuk-color-accent-soft: #e8f2fa;
	--shivuk-color-accent-contrast: #ffffff;
	--shivuk-font-body: "Assistant", "Segoe UI", "Arial Hebrew", Arial, "Noto Sans Hebrew", sans-serif;
	--shivuk-container-width: 1120px;
	--shivuk-space: clamp(1rem, 1.5vw, 1.75rem);
	--shivuk-radius: 10px;
	--shivuk-radius-lg: 18px;
	--shivuk-shadow-sm: 0 1px 2px rgba(20, 20, 25, 0.06), 0 1px 1px rgba(20, 20, 25, 0.04);
	--shivuk-shadow-md: 0 8px 24px rgba(20, 20, 25, 0.08), 0 2px 6px rgba(20, 20, 25, 0.04);
	--shivuk-shadow-lg: 0 20px 45px rgba(20, 20, 25, 0.12), 0 4px 12px rgba(20, 20, 25, 0.05);
	/* A deliberately quiet lift for card hover states specifically — the
	   general-purpose shadow-md/lg above read as too heavy once the hover
	   border-color changes were removed from cards, so this is its own,
	   much softer variable rather than a broader edit to shadow-md/lg
	   (which are also used for unrelated resting shadows and button
	   hovers elsewhere that still want the stronger versions). */
	--shivuk-shadow-card-hover: 0 4px 14px rgba(20, 20, 25, 0.06), 0 1px 3px rgba(20, 20, 25, 0.03);
	--shivuk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--shivuk-color-bg);
	color: var(--shivuk-color-text);
	font-family: var(--shivuk-font-body);
	font-size: 1rem;
	line-height: 1.7;
	text-align: start;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--shivuk-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
	margin-block: 0 0.6em;
}

.container {
	max-width: var(--shivuk-container-width);
	margin-inline: auto;
	padding-inline: var(--shivuk-space);
}

/* -----------------------------------------------------------------------
   Accessibility helpers
   ----------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	inset-inline-start: -999px;
	position: absolute;
	top: 0;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	border-end-end-radius: var(--shivuk-radius);
}

.skip-link:focus {
	inset-inline-start: 0;
	width: auto;
	height: auto;
	clip-path: none;
}

*:focus-visible {
	outline: 2px solid var(--shivuk-color-accent);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------- */
/* Depth instead of a flat fill: a soft white glow at the top corner over
   a gently deepening accent gradient — the same surface language as the
   site's colored blocks (Facebook box, newsletter widget). */
.site-header {
	background:
		radial-gradient(60% 130% at 88% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
		linear-gradient(165deg, var(--shivuk-color-accent), color-mix(in srgb, var(--shivuk-color-accent) 78%, #0c2f4c));
	color: #ffffff;
	/* Anchors the mobile dropdown nav (position: absolute) so it overlays
	   below the header instead of taking up its own row in the flex bar —
	   that's what keeps logo/toggle/CTA on a single row on mobile. */
	position: relative;
}

.site-header--sticky {
	position: sticky;
	inset-block-start: 0;
	z-index: 1000;
	transition: box-shadow 0.25s ease;
	/* The padding-block and grid-template-rows transitions below are
	   layout-affecting, not compositor-only — without containment every
	   frame of that animation forces a layout pass on the rest of the
	   page too, competing with the scroll itself for main-thread time.
	   Layout containment scopes that reflow to the header's own subtree.
	   (Not `paint`/`strict` — that would clip the dropdown submenus,
	   which intentionally overflow below the header.) */
	contain: layout;
}

/* navigation.js promotes the sticky header to fixed (html gets
   .js-fixed-header): out of the scroll flow, the compact/expand height
   animation reflows only the header's own subtree — the document below
   never moves, so there's no per-frame page reflow, nothing for scroll
   anchoring to "correct", and no scroll-event echo fighting the
   direction tracking (the old trembling). The page reserves the
   header's expanded height via the JS-measured --shivuk-header-h.
   Without JS the header simply stays sticky and never compacts
   (is-compact is JS-set), so the upgrade degrades cleanly. */
.js-fixed-header .site-header--sticky {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
}

.js-fixed-header body {
	padding-block-start: var(--shivuk-header-h, 0px);
}

/* Under the WP admin bar the viewport top isn't the page top. */
.js-fixed-header body.admin-bar .site-header--sticky {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.js-fixed-header body.admin-bar .site-header--sticky {
		inset-block-start: 46px;
	}
}

.site-header--sticky.is-scrolled {
	box-shadow: 0 6px 24px rgba(10, 40, 65, 0.28);
}

/* Smart mode shrinks the header on scroll-down instead of hiding it
   entirely: the inner padding collapses and the title/description
   (site-branding__text) folds away, leaving just the logo and nav.
   The text collapse uses the grid 1fr/0fr trick — it animates to the
   content's real height instead of a guessed max-height, so it never
   clips or jumps mid-transition the way a max-height guess would. */
.site-header--smart.is-compact .site-header__inner {
	padding-block: 5px;
}

.site-header--smart.is-compact .site-branding__text {
	grid-template-rows: 0fr;
}

.site-header--smart.is-compact .site-branding__text-inner {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.site-header--sticky,
	.site-header__inner,
	.site-branding__text,
	.site-branding__text-inner {
		transition: none;
	}
}

.site-header *:focus-visible {
	outline-color: #ffffff;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--shivuk-space);
	padding-block: 1rem;
	flex-wrap: nowrap;
	transition: padding-block 0.25s ease;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-inline-size: 0;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-inline-size: 0;
}

.custom-logo-link img,
.site-branding img {
	max-height: 56px;
	max-inline-size: 100%;
	width: auto;
	height: auto;
}

.site-branding__text {
	display: grid;
	grid-template-rows: 1fr;
	min-inline-size: 0;
	transition: grid-template-rows 0.25s ease;
}

.site-branding__text-inner {
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	overflow: hidden;
	/* Optical nudge: flex centers the text block's geometric box, but the
	   bold title reads visually heavier than the logo image, making the
	   mathematically-centered result look a hair low. */
	position: relative;
	inset-block-start: -2px;
	transition: opacity 0.25s ease;
}

.site-title {
	margin: 0;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
}

.site-title a {
	color: #ffffff;
	text-decoration: none;
}

/* Title effect: an icy gradient clipped into the letters, sweeping across
   them on hover/focus — the white-and-blue sibling of the branded
   section's gold shimmer. Scoped to @supports so browsers without
   background-clip: text simply keep the solid white above. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.site-title a {
		background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #bfe1f7 50%, #ffffff 60%, #ffffff 100%);
		background-size: 250% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		transition: background-position 0.9s var(--shivuk-ease);
	}

	.site-title a:hover,
	.site-title a:focus-visible {
		background-position: 0 0;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-title a {
			transition: none;
		}
	}
}

.site-description {
	margin: 0.1em 0 0;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8125rem;
	line-height: 1;
}

/* Hidden on the wrapper, not just the <summary> inside it — otherwise the
   empty <details> box would still consume a flex gap between the logo
   and the nav at desktop even with its only child hidden. */
.mobile-nav {
	display: none;
}

.menu-toggle {
	display: none;
	/* The bars used to just be block children stacked from the top of this
	   box (only horizontally centered, via margin: auto, on each bar) —
	   with no flex/grid there was nothing centering them vertically, so
	   they sat flush at the top of the 44px square instead of in its
	   middle. Flex column + center/center fixes both axes at once. */
	flex-shrink: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	/* Matches .header-search-toggle's own size exactly (see its rules and
	   the ≤900px override below) — the two round header buttons should
	   read as one family, not one visibly bigger than the other. */
	inline-size: 40px;
	block-size: 40px;
	/* A soft inset ring reads lighter than a hard border on a filled
	   circle — no outer drop shadow (that read as too heavy next to the
	   plain .header-search-toggle beside it, which has none at all). */
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
	cursor: pointer;
	list-style: none;
	transition: background 0.2s var(--shivuk-ease), box-shadow 0.2s var(--shivuk-ease), transform 0.2s var(--shivuk-ease);
}

.menu-toggle::-webkit-details-marker {
	display: none;
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.26);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
	transform: scale(1.05);
}

/* :hover never fires on touch, so without this a tap on mobile — where
   this button actually lives — gave no visual feedback at all. */
.menu-toggle:active {
	background: rgba(255, 255, 255, 0.34);
	transform: scale(0.9);
}

/* Reinforces the open state visually, on top of the bars already having
   animated into an X — a filled, brighter ring reads as "expanded"
   instead of relying on the icon shape change alone. */
.mobile-nav[open] > .menu-toggle {
	background: rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.menu-toggle {
		transition: background 0.2s ease, box-shadow 0.2s ease;
	}

	.menu-toggle:hover,
	.menu-toggle:active {
		transform: none;
	}
}

.menu-toggle__bar {
	/* Spacing between bars now comes from the flex container's `gap`
	   (kept in step with the hamburger→X translateY values below, which
	   need to match bar-height + gap so the bars land exactly on top of
	   each other when they close into an X), not margin. */
	inline-size: 22px;
	block-size: 2px;
	flex-shrink: 0;
	border-radius: 2px;
	background: #ffffff;
	transition: transform 0.3s var(--shivuk-ease), opacity 0.2s ease, inline-size 0.2s ease;
}

.menu-toggle:hover .menu-toggle__bar {
	inline-size: 24px;
}

/* Hamburger → X when open — driven entirely by the native <details> [open]
   state, not a JS-toggled class, so it can never drift out of sync. */
.mobile-nav[open] > .menu-toggle .menu-toggle__bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.mobile-nav[open] > .menu-toggle .menu-toggle__bar:nth-child(3) {
	opacity: 0;
}

.mobile-nav[open] > .menu-toggle .menu-toggle__bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

.primary-navigation {
	margin-inline-start: auto;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.primary-navigation .primary-menu,
.primary-navigation ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Safety net: if the menu has more items than a mid-width desktop/laptop
   viewport can fit, scroll the strip horizontally instead of breaking the
   one-line layout or forcing content off-screen. Invisible until needed. */
@media (min-width: 901px) {
	.primary-navigation {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.primary-navigation::-webkit-scrollbar {
		display: none;
	}

	/* The scroll strip clips the absolutely-positioned dropdowns (any
	   overflow value other than visible on one axis clips the other axis
	   too). When the menu actually has submenus, dropdowns beat the
	   overflow safety net. */
	.primary-navigation:has(.menu-item-has-children) {
		overflow-x: visible;
		overflow-y: visible;
	}

	.primary-navigation .primary-menu,
	.primary-navigation ul {
		flex-wrap: nowrap;
	}
}

.header-cta {
	display: inline-flex;
	align-items: center;
	min-inline-size: 0;
	padding: 0.55em 1.1em;
	border-radius: 999px;
	background: #ffffff;
	color: var(--shivuk-color-accent);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 4px 12px rgba(8, 40, 96, 0.22);
	transition: transform 0.2s var(--shivuk-ease), box-shadow 0.2s var(--shivuk-ease);
}

/* A real state change — lift and deepen — instead of an opacity fade. */
.header-cta:hover,
.header-cta:focus {
	color: var(--shivuk-color-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(8, 40, 96, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.header-cta:hover,
	.header-cta:focus {
		transform: none;
	}
}

/* Round glass icon button opening the full-screen search layer — frosted
   white over the header's accent gradient, same surface language as the
   white CTA pill next to it. */
.header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	transition: background 0.2s ease, transform 0.2s var(--shivuk-ease);
}

.header-search-toggle:hover,
.header-search-toggle:focus {
	background: rgba(255, 255, 255, 0.26);
	transform: translateY(-2px);
}

.header-search-toggle svg {
	inline-size: 19px;
	block-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
	.header-search-toggle:hover,
	.header-search-toggle:focus {
		transform: none;
	}
}

@media (max-width: 900px) {
	.header-search-toggle {
		inline-size: 36px;
		block-size: 36px;
	}
}

/* Nav links carry the site's underline-grow language (the article body's
   link effect, in white): a hairline sweeping in from the reading start
   instead of the old fade-to-gray hover. background-position: 100% is the
   physical right — the reading start in RTL. */
.primary-navigation a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 500;
	padding-block: 0.3em;
	background-image: linear-gradient(#ffffff, #ffffff);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 2px;
	transition: background-size 0.25s var(--shivuk-ease);
}

.primary-navigation a:hover,
.primary-navigation a:focus {
	color: #ffffff;
	background-size: 100% 2px;
}

/* The current page keeps its underline — a quiet "you are here". */
.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a {
	background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
	.primary-navigation a {
		transition: none;
	}
}

/* Desktop dropdown submenus. */
.primary-navigation li {
	position: relative;
}

.primary-navigation ul ul {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 200px;
	max-inline-size: min(320px, calc(100vw - 2rem));
	flex-direction: column;
	gap: 0;
	padding: 0.5rem;
	/* Matches the deep end of the header's gradient, not its raw accent. */
	background: color-mix(in srgb, var(--shivuk-color-accent) 78%, #0c2f4c);
	border-radius: 0 0 var(--shivuk-radius) var(--shivuk-radius);
	box-shadow: var(--shivuk-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 10;
}

.primary-navigation li:hover > ul,
.primary-navigation li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Submenu links are block rows — a soft fill highlight fits them better
   than the top-level links' growing underline. */
.primary-navigation ul ul a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--shivuk-radius) - 4px);
	font-size: 0.92rem;
	background-image: none;
	transition: background-color 0.18s ease;
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus {
	background-color: rgba(255, 255, 255, 0.14);
}

/* Hover-reveal only makes sense where hover actually exists. On a touch
   device at desktop-nav widths (a tablet or 2-in-1 in landscape, between
   901–1024px) there's no hover — a tap on the parent link would just
   navigate away without the submenu ever appearing. Render it inline and
   already-expanded there instead, the same treatment the ≤900px mobile
   nav uses. */
@media (hover: none) and (min-width: 901px), (pointer: coarse) and (min-width: 901px) {
	/* The horizontal-scroll safety net below clips overflow-y too — an
	   inline-expanded submenu is now taller than the nav row, so it would
	   get cut off without this. */
	.primary-navigation {
		overflow-y: visible;
	}

	/* Flex's default align-items: stretch would otherwise stretch every
	   top-level item to match whichever one has its submenu expanded. */
	.primary-navigation .primary-menu,
	.primary-navigation ul {
		align-items: flex-start;
	}

	.primary-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 0;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.1);
		margin-block-start: 0.25rem;
		border-radius: calc(var(--shivuk-radius) - 4px);
		min-inline-size: 0;
		max-inline-size: 100%;
	}
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul a:focus {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

/* The follow section (CTA buttons + social icons) rendered inside the nav
   belongs to the mobile drawer only — the desktop menu bar hides it. */
.primary-navigation__extras {
	display: none;
}

@media (max-width: 900px) {
	/* Logo, toggle, and CTA stay on one nowrap row (same as desktop) — the
	   nav is pulled out of the flex flow entirely (it becomes the fixed
	   side drawer below) instead of wrapping onto its own line, so it can
	   never push or squeeze the rest of the row. */
	.site-header__inner {
		flex-wrap: nowrap;
	}

	.mobile-nav {
		display: block;
		/* Pulls the toggle closer to the CTA button (its neighbor on this
		   side of the row) without touching the wider gap the container's
		   `gap` still gives it on the branding side. */
		margin-inline-end: calc(8px - var(--shivuk-space));
	}

	.menu-toggle {
		display: flex;
		/* Same 36px shrink .header-search-toggle takes at this breakpoint. */
		inline-size: 36px;
		block-size: 36px;
	}

	.custom-logo-link img,
	.site-branding img {
		max-height: 44px;
	}

	/* --- Mobile menu: side drawer -------------------------------------
	   The nav becomes a full-height panel sliding in from the inline-
	   start (right, in RTL) edge over a dimmed backdrop. Open/close is
	   still pure CSS off <details>' [open]; navigation.js only layers
	   Escape / backdrop-click / link-click closing on top. */

	/* contain: layout on the sticky header would make every fixed
	   descendant position itself relative to the header box instead of
	   the viewport — the drawer needs the real viewport. The reflow
	   scoping it bought matters least at phone widths anyway. */
	.site-header--sticky {
		contain: none;
	}

	/* Page behind the drawer doesn't scroll while it's open. */
	body:has(.mobile-nav[open]) {
		overflow: hidden;
	}

	/* While the drawer is open the toggle leaves the header row and pins
	   itself over the panel's top corner — the same <summary>, natively
	   doubling as the drawer's close button, still zero JS. */
	.mobile-nav[open] {
		position: fixed;
		inset-block-start: 0.9rem;
		inset-inline-start: 0.9rem;
		z-index: 1160;
		margin: 0;
	}

	.primary-navigation {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: min(340px, 86vw);
		z-index: 1150;
		margin: 0;
		display: block;
		padding: 4.5rem 0.9rem max(1.5rem, env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background:
			radial-gradient(120% 45% at 50% 0%, color-mix(in srgb, var(--shivuk-color-accent) 36%, transparent), transparent 72%),
			linear-gradient(200deg, #0e2c46, #081522 75%);
		border-start-end-radius: 22px;
		border-end-end-radius: 22px;
		box-shadow: -20px 0 50px rgba(4, 14, 24, 0.45);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.38s var(--shivuk-ease), visibility 0.38s;
	}

	.mobile-nav[open] ~ .primary-navigation {
		transform: none;
		visibility: visible;
	}

	/* Dimmed backdrop + click-catcher. While the panel is mid-slide its
	   transform makes this fixed pseudo track the panel; the moment the
	   slide lands (transform: none) it snaps to the real viewport and
	   fades over the page. A tap on it targets the nav element itself —
	   navigation.js closes on that. */
	.primary-navigation::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgba(5, 16, 26, 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.mobile-nav[open] ~ .primary-navigation::after {
		opacity: 1;
		pointer-events: auto;
	}

	/* Small kicker label at the panel's top — pure CSS, no markup. */
	.primary-navigation::before {
		content: "תפריט" / "";
		display: block;
		padding-inline: 0.95rem;
		margin-block-end: 0.8rem;
		color: color-mix(in srgb, var(--shivuk-color-accent) 40%, #ffffff);
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.14em;
	}

	.primary-navigation .primary-menu,
	.primary-navigation > ul {
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Rows glide in from the drawer's own edge, one beat apart — the
	   delays live only on the [open] selectors, so closing is instant. */
	.primary-navigation > ul > li {
		opacity: 0;
		transform: translateX(18px);
		transition: opacity 0.3s ease, transform 0.36s var(--shivuk-ease);
	}

	.mobile-nav[open] ~ .primary-navigation > ul > li {
		opacity: 1;
		transform: none;
	}

	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(1) { transition-delay: 0.06s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(2) { transition-delay: 0.1s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(3) { transition-delay: 0.14s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(4) { transition-delay: 0.18s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(5) { transition-delay: 0.22s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(6) { transition-delay: 0.26s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(7) { transition-delay: 0.3s; }
	.mobile-nav[open] ~ .primary-navigation > ul > li:nth-child(n+8) { transition-delay: 0.34s; }

	/* Soft rounded rows — no dividers, the spacing does the separating.
	   Kills the desktop underline-grow background on every drawer link. */
	.primary-navigation a {
		background-image: none;
	}

	.primary-navigation > ul > li > a {
		display: block;
		padding: 0.78rem 0.95rem;
		border-radius: 12px;
		font-size: 1.04rem;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.88);
		transition: background-color 0.16s ease, color 0.16s ease;
	}

	.primary-navigation > ul > li > a:hover,
	.primary-navigation > ul > li > a:focus,
	.primary-navigation > ul > li > a:active {
		color: #ffffff;
		background-color: rgba(255, 255, 255, 0.09);
	}

	/* Current page: a solid accent pill with a soft glow. Placed after
	   the hover rule so its equal-specificity background wins on the
	   current item. */
	.primary-navigation > ul > li.current-menu-item > a,
	.primary-navigation > ul > li.current-menu-ancestor > a {
		color: #ffffff;
		font-weight: 700;
		background-color: var(--shivuk-color-accent);
		box-shadow: 0 6px 18px color-mix(in srgb, var(--shivuk-color-accent) 45%, transparent);
	}

	/* Submenus flow inline under their parent — indented, smaller,
	   quieter. */
	.primary-navigation ul ul {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0.15rem 0.6rem 0.5rem;
		min-inline-size: 0;
		max-inline-size: 100%;
	}

	.primary-navigation ul ul a {
		display: block;
		padding: 0.5rem 0.95rem;
		border-radius: 10px;
		font-size: 0.92rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.62);
	}

	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul a:focus {
		background: rgba(255, 255, 255, 0.07);
		color: #ffffff;
	}

	/* --- Follow section at the drawer's foot --------------------------
	   Separated from the menu by a hairline; slides in as the last beat
	   of the row stagger above. */
	.primary-navigation__extras {
		display: block;
		margin-block-start: 1.4rem;
		padding-block-start: 1.4rem;
		border-block-start: 1px solid rgba(255, 255, 255, 0.12);
		opacity: 0;
		transform: translateX(18px);
		transition: opacity 0.3s ease, transform 0.36s var(--shivuk-ease);
	}

	.mobile-nav[open] ~ .primary-navigation .primary-navigation__extras {
		opacity: 1;
		transform: none;
		transition-delay: 0.34s;
	}

	.primary-navigation__ctas {
		display: grid;
		gap: 0.6rem;
	}

	/* Join-the-group: solid accent pill (primary action); the page
	   button: quiet ghost pill beneath it. */
	.primary-navigation__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		padding: 0.7rem 1rem;
		border-radius: 999px;
		border: 1px solid rgba(255, 255, 255, 0.25);
		color: #ffffff;
		font-size: 0.95rem;
		font-weight: 700;
		transition: background-color 0.18s ease, border-color 0.18s ease;
	}

	.primary-navigation__cta svg {
		inline-size: 18px;
		block-size: 18px;
		flex-shrink: 0;
	}

	.primary-navigation__cta:hover,
	.primary-navigation__cta:focus {
		color: #ffffff;
		background-color: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.45);
	}

	.primary-navigation__cta--solid {
		background-color: var(--shivuk-color-accent);
		border-color: transparent;
		box-shadow: 0 6px 18px color-mix(in srgb, var(--shivuk-color-accent) 45%, transparent);
	}

	.primary-navigation__cta--solid:hover,
	.primary-navigation__cta--solid:focus {
		background-color: color-mix(in srgb, var(--shivuk-color-accent) 82%, #ffffff);
		border-color: transparent;
	}

	.primary-navigation__social-label {
		display: block;
		margin-block-start: 1.15rem;
		text-align: center;
		color: rgba(255, 255, 255, 0.5);
		font-size: 0.78rem;
		font-weight: 600;
	}

	.primary-navigation__social {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.55rem;
		margin-block-start: 0.6rem;
	}

	.primary-navigation__social-link {
		display: grid;
		place-items: center;
		inline-size: 40px;
		block-size: 40px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.14);
		color: #ffffff;
		transition: background-color 0.18s ease, border-color 0.18s ease;
	}

	.primary-navigation__social-link:hover,
	.primary-navigation__social-link:focus {
		color: #ffffff;
		background-color: rgba(255, 255, 255, 0.18);
		border-color: rgba(255, 255, 255, 0.35);
	}

	.primary-navigation__social-link svg {
		inline-size: 17px;
		block-size: 17px;
	}

	.header-cta {
		flex-shrink: 1;
		min-inline-size: 0;
		white-space: normal;
		text-align: center;
		padding: 0.5em 0.85em;
		font-size: 0.85rem;
	}

	@media (prefers-reduced-motion: reduce) {
		.primary-navigation,
		.primary-navigation::after,
		.primary-navigation > ul > li,
		.primary-navigation__extras {
			transition: none;
		}

		.primary-navigation > ul > li,
		.primary-navigation__extras {
			transform: none;
		}
	}
}

/* -----------------------------------------------------------------------
   Content
   ----------------------------------------------------------------------- */
.site-content {
	padding-block: var(--shivuk-space);
	min-block-size: 60vh;
}

.site-main {
	display: grid;
	gap: var(--shivuk-space);
}

/* Horizontal media cards for archive/index streams — thumb beside text,
   separated by hairlines rather than boxed, in the site's editorial
   language. :last-of-type, not :last-child: the pagination <nav> follows
   the cards inside the same column. */
.post-card {
	display: grid;
	/* The thumb column scales with the stream's own width via container
	   units — each cq line is preceded by its static fallback for
	   browsers without container-query support. */
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	grid-template-columns: clamp(150px, 34cqw, 270px) minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 1.6rem);
	gap: clamp(0.9rem, 3cqw, 1.6rem);
	align-items: center;
	padding-block-end: var(--shivuk-space);
	border-block-end: 1px solid var(--shivuk-color-border);
}

/* Breathing room above every card after the first — without this the next
   card's thumb sat flush against the previous card's divider hairline. */
.post-card + .post-card {
	margin-block-start: var(--shivuk-space);
}

.post-card:last-of-type {
	border-block-end: 0;
	padding-block-end: 0;
}

.post-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--shivuk-radius);
	overflow: hidden;
	background: var(--shivuk-color-surface);
}

.post-card__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--shivuk-ease);
}

.post-card:hover .post-card__thumb img {
	transform: scale(1.04);
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 0.5rem;
}

.post-card__date {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--shivuk-color-muted);
	font-size: 0.82rem;
}

/* Same accent dot the home tiles' dates carry — one shared meta language. */
.post-card__date::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
	opacity: 0.55;
}

.entry-title {
	margin: 0;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem);
	font-size: clamp(1.1rem, 0.95rem + 1.6cqw, 1.45rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	/* Uniform two-line rows regardless of title length. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--shivuk-color-accent);
}

.entry-summary {
	margin-block-start: 0.5rem;
	color: var(--shivuk-color-muted);
	font-size: 0.95rem;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Compact "news-app" rows — a small side thumb, tighter type. Driven by
   the STREAM's own width (see the container registration in the sidebar
   layout section), so the cards also compact in the 860–1000px window
   where the sidebar still sits beside a narrow column — a case a
   viewport query can't see. */
@container shivuk-stream (max-width: 600px) {
	.post-card {
		grid-template-columns: clamp(96px, 30cqw, 150px) minmax(0, 1fr);
		gap: 0.9rem;
	}

	.post-card__thumb {
		aspect-ratio: 4 / 3;
		border-radius: calc(var(--shivuk-radius) - 2px);
	}

	.post-card__meta {
		gap: 0.5rem;
		margin-block-end: 0.3rem;
	}

	.post-card__meta .home-cat {
		font-size: 0.7rem;
	}

	.post-card__date {
		font-size: 0.78rem;
	}

	.entry-title {
		font-size: 1.02rem;
		line-height: 1.35;
		-webkit-line-clamp: 3;
	}

	.entry-summary {
		font-size: 0.86rem;
		margin-block-start: 0.35rem;
	}
}

/* Tightest rows (small phones): the excerpt goes, a square thumb and
   the title carry the card. */
@container shivuk-stream (max-width: 400px) {
	.post-card__thumb {
		aspect-ratio: 1 / 1;
	}

	.entry-summary {
		display: none;
	}
}

/* Same compact treatment for browsers without container queries,
   approximated from the viewport instead. */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.post-card {
			grid-template-columns: clamp(96px, 30vw, 150px) minmax(0, 1fr);
			gap: 0.9rem;
		}

		.post-card__thumb {
			aspect-ratio: 4 / 3;
			border-radius: calc(var(--shivuk-radius) - 2px);
		}

		.post-card__meta {
			gap: 0.5rem;
			margin-block-end: 0.3rem;
		}

		.entry-title {
			font-size: 1.02rem;
			line-height: 1.35;
			-webkit-line-clamp: 3;
		}

		.entry-summary {
			font-size: 0.86rem;
			margin-block-start: 0.35rem;
		}
	}
}

/* -----------------------------------------------------------------------
   Page / archive / search headers
   ----------------------------------------------------------------------- */
.page-header {
	margin-block-end: var(--shivuk-space);
}

.page-title {
	font-size: 1.75rem;
}

.page-title span {
	color: var(--shivuk-color-accent);
}

.archive-description {
	color: var(--shivuk-color-muted);
}

/* Archive hero — a tinted band spanning the full grid width above the
   content + sidebar columns: kicker, big term name, description, count. */
.archive-hero {
	grid-column: 1 / -1;
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
	border-radius: var(--shivuk-radius-lg);
	border: 1px solid color-mix(in srgb, var(--shivuk-color-accent) 16%, transparent);
	background:
		radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--shivuk-color-accent) 13%, transparent), transparent 55%),
		linear-gradient(165deg, var(--shivuk-color-accent-soft), var(--shivuk-color-bg) 72%);
}

.archive-hero__kicker {
	display: inline-flex;
	padding: 0.25em 0.9em;
	border-radius: 999px;
	background: var(--shivuk-color-bg);
	border: 1px solid color-mix(in srgb, var(--shivuk-color-accent) 30%, transparent);
	color: var(--shivuk-color-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.archive-hero__title {
	margin: 0.45em 0 0;
	font-size: clamp(1.8rem, 1.1rem + 3vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.archive-hero__desc {
	margin-block-start: 0.6em;
	max-inline-size: 62ch;
	color: var(--shivuk-color-muted);
}

.archive-hero__desc p {
	margin: 0;
}

.archive-hero__count {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 1.1em;
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
	font-weight: 600;
}

.archive-hero__count::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
	opacity: 0.55;
}

/* Load-more — an accent pill centered under the stream. Without JS it's
   a plain link to the next paged URL; navigation.js turns it into
   fetch-and-append and shows the spinner while a batch loads. */
.load-more {
	display: flex;
	justify-content: center;
	margin-block-start: var(--shivuk-space);
}

.load-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-inline-size: 230px;
	padding: 0.75em 2.2em;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--shivuk-color-accent) 35%, transparent);
	transition: transform 0.2s var(--shivuk-ease), box-shadow 0.2s var(--shivuk-ease), opacity 0.2s ease;
}

.load-more__btn:hover,
.load-more__btn:focus {
	color: var(--shivuk-color-accent-contrast);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--shivuk-color-accent) 45%, transparent);
}

.load-more__btn.is-loading {
	pointer-events: none;
	opacity: 0.85;
	transform: none;
}

.load-more__spinner {
	display: none;
	inline-size: 16px;
	block-size: 16px;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-block-start-color: #ffffff;
	border-radius: 50%;
	animation: shivuk-spin 0.7s linear infinite;
}

.load-more__btn.is-loading .load-more__spinner {
	display: inline-block;
}

@keyframes shivuk-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.load-more__btn:hover,
	.load-more__btn:focus {
		transform: none;
	}
}

/* Hot-tags cloud in the archive sidebar — the shared category chips,
   wrapping; the term being browsed is filled solid. */
.widget-tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.home-cat--current {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

/* -----------------------------------------------------------------------
   Sidebar layout
   ----------------------------------------------------------------------- */
.site-main.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--shivuk-space) clamp(2.5rem, 4.5vw, 5rem);
	align-items: start;
}

/* The post streams are size containers, so the archive cards can adapt
   to their own column's width (which the sidebar narrows until it
   collapses at 860px) rather than to the viewport. */
.site-main.has-sidebar > .content-area,
.site-main:not(.has-sidebar) {
	container: shivuk-stream / inline-size;
}

/* A stack of individual white cards rather than one flat gray slab — each
   widget reads as its own unit, matching the card language used everywhere
   else in the theme (related posts, home tiles, author box). */
.widget-area {
	display: grid;
	gap: calc(var(--shivuk-space) * 0.85);
	align-content: start;
}

.widget {
	background: var(--shivuk-color-bg);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	padding: calc(var(--shivuk-space) * 0.9) var(--shivuk-space) var(--shivuk-space);
	box-shadow: var(--shivuk-shadow-sm);
}

/* Same accent-bar language as the article body's h2s, scaled down. */
.widget-title {
	position: relative;
	padding-inline-start: 0.75em;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-block-end: 1rem;
}

.widget-title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.12em;
	bottom: 0.12em;
	inline-size: 4px;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
}

.widget-default .search-form {
	max-width: none;
}

.widget-default__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget-default__list li + li {
	margin-block-start: 0.6rem;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--shivuk-color-border);
}

.widget-default__list a {
	color: var(--shivuk-color-text);
	text-decoration: none;
	font-size: 0.9rem;
}

.widget-default__list a:hover,
.widget-default__list a:focus {
	color: var(--shivuk-color-accent);
}

.widget-cta__button {
	display: inline-flex;
	align-items: center;
	padding: 0.55em 1.1em;
	border-radius: var(--shivuk-radius);
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
}

.widget-cta__button:hover,
.widget-cta__button:focus {
	background: color-mix(in srgb, var(--shivuk-color-accent) 85%, #0c2f4c);
	color: var(--shivuk-color-accent-contrast);
}

/* -----------------------------------------------------------------------
   Sidebar post-list widgets — three variants (plain, ranked, thumbs) share
   one base list so "different ways to display posts" stay visually related
   instead of each reinventing spacing/typography from scratch.
   ----------------------------------------------------------------------- */
.widget-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.widget-posts__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.widget-posts__list:not(.widget-posts__list--thumbs) .widget-posts__item + .widget-posts__item {
	padding-block-start: 0.85rem;
	border-block-start: 1px solid var(--shivuk-color-border);
}

.widget-posts__link {
	flex-grow: 1;
	min-inline-size: 0;
	color: var(--shivuk-color-text);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.2s var(--shivuk-ease), transform 0.2s var(--shivuk-ease);
}

/* Titles nudge toward the reading direction (RTL: left) on hover — the
   sidebar's version of the homepage cards' sliding accent bars. */
.widget-posts__link:hover,
.widget-posts__link:focus {
	color: var(--shivuk-color-accent);
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.widget-posts__link:hover,
	.widget-posts__link:focus {
		transform: none;
	}
}

.widget-posts__date {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--shivuk-color-muted);
	font-size: 0.78rem;
}

/* The shared accent meta-dot carried by every card on the site. */
.widget-posts__date::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
	opacity: 0.55;
}

/* Ranked variant: solid accent badge — same hierarchy jump the category
   chips got across the site. */
.widget-posts__rank {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	font-size: 0.78rem;
	font-weight: 800;
	box-shadow: 0 3px 8px color-mix(in srgb, var(--shivuk-color-accent) 35%, transparent);
}

/* Thumbs variant: small square cover beside the title. */
.widget-posts__thumb {
	display: block;
	flex-shrink: 0;
	inline-size: 56px;
	block-size: 56px;
	border-radius: calc(var(--shivuk-radius) - 4px);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(20, 20, 25, 0.06);
}

.widget-posts__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--shivuk-ease);
}

.widget-posts__item:hover .widget-posts__thumb img {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	.widget-posts__item:hover .widget-posts__thumb img {
		transform: none;
	}
}

/* Profiles variant: a stories-tray of profile circles — each avatar sits
   inside an Instagram-style gradient ring (built from the brand accent),
   with a small white gap between ring and image, title clamped below. A
   3-up grid rather than flex-wrap so rows stay aligned even when titles
   wrap to different heights. */
.widget-posts__list--profiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem 0.5rem;
	justify-items: center;
}

.widget-posts__list.widget-posts__list--profiles .widget-posts__item + .widget-posts__item {
	padding-block-start: 0;
	border-block-start: 0;
}

.widget-posts__item--profile {
	inline-size: 100%;
}

.widget-posts__profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	inline-size: 100%;
	text-align: center;
	text-decoration: none;
	color: var(--shivuk-color-text);
}

/* The story ring: a conic gradient circle with the avatar floated inside on
   a bg-colored gap, so it reads as ring → gap → photo like a real story. */
.widget-posts__profile-avatar {
	display: grid;
	place-items: center;
	inline-size: 72px;
	block-size: 72px;
	padding: 3px;
	border-radius: 50%;
	background: conic-gradient(
		var(--shivuk-color-accent),
		color-mix(in srgb, var(--shivuk-color-accent) 45%, #ffffff),
		var(--shivuk-color-accent-soft),
		color-mix(in srgb, var(--shivuk-color-accent) 45%, #ffffff),
		var(--shivuk-color-accent)
	);
	transition: transform 0.25s var(--shivuk-ease), box-shadow 0.25s var(--shivuk-ease);
}

.widget-posts__profile-avatar img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	border: 2px solid var(--shivuk-color-bg);
	object-fit: cover;
}

.widget-posts__profile-avatar--placeholder::after {
	content: attr(data-initial);
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	border: 2px solid var(--shivuk-color-bg);
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	font-size: 1.5rem;
	font-weight: 800;
}

.widget-posts__profile:hover .widget-posts__profile-avatar,
.widget-posts__profile:focus .widget-posts__profile-avatar {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--shivuk-color-accent) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.widget-posts__profile:hover .widget-posts__profile-avatar,
	.widget-posts__profile:focus .widget-posts__profile-avatar {
		transform: none;
	}
}

.widget-posts__profile-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.2s var(--shivuk-ease);
}

.widget-posts__profile:hover .widget-posts__profile-title,
.widget-posts__profile:focus .widget-posts__profile-title {
	color: var(--shivuk-color-accent);
}

/* -----------------------------------------------------------------------
   Community + social box (.home-fb-mini) — a quiet, airy card: a whisper
   of Facebook blue over near-white, one solid-blue primary button, and
   everything else kept light. Shared, not homepage-only: the homepage
   hero renders it inline (page-homepage.php) and the sidebar renders the
   same markup/classes via SHIVUK_Widget_Community_Social (inc/widgets.php),
   so it lives here in the global stylesheet rather than home.css. The
   border/box-shadow below override the generic .widget wrapper's gray
   border and shadow when used as a widget, and stand on their own on the
   homepage, which doesn't nest it inside a .widget at all.
   ----------------------------------------------------------------------- */
.home-fb-mini {
	position: relative;
	overflow: hidden;
	flex-grow: 1;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	padding: 1.4rem 1.1rem;
	border-radius: var(--shivuk-radius-lg);
	border: 1px solid #dce8f7;
	background:
		radial-gradient(85% 110% at 100% 0%, rgba(24, 119, 242, 0.09), transparent 55%),
		linear-gradient(165deg, #f9fbfe, #eff5fc);
	color: var(--shivuk-color-text);
	box-shadow: var(--shivuk-shadow-sm);
}

/* Large Facebook glyph bleeding off the corner as a soft watermark, instead
   of a standalone badge icon competing with the title for attention. */
.home-fb-mini::before {
	content: "";
	position: absolute;
	inset-block-end: -1.75rem;
	inset-inline-end: -1.75rem;
	inline-size: 9rem;
	block-size: 9rem;
	background-color: #1877f2;
	opacity: 0.05;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.02 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.09 24 12.07z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.02 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.09 24 12.07z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	z-index: 0;
}

.home-fb-mini__title {
	margin: 0;
	position: relative;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.home-fb-mini__sub {
	margin: 0;
	position: relative;
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
	line-height: 1.6;
	max-inline-size: 30ch;
	text-wrap: pretty;
}

.home-fb-mini__actions {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	inline-size: 100%;
	max-inline-size: 320px;
	margin-block-start: 0.3rem;
}

.home-fb-mini .home-btn {
	padding: 0.6em 0.9em;
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* Primary: the box's single spot of solid Facebook blue. */
.home-fb-mini .home-btn--light {
	background: #1877f2;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(24, 119, 242, 0.22);
}

.home-fb-mini .home-btn--light:hover,
.home-fb-mini .home-btn--light:focus {
	background: #0f66d6;
	color: #ffffff;
}

/* Secondary: quiet white pill with a soft blue outline. */
.home-fb-mini .home-btn--outline {
	background: #ffffff;
	border: 1px solid #c9dcf5;
	color: #1465c9;
}

.home-fb-mini .home-btn--outline:hover,
.home-fb-mini .home-btn--outline:focus {
	background: #f3f8fe;
	border-color: #1877f2;
	color: #1465c9;
}

.home-fb-mini__cta-icon {
	flex-shrink: 0;
	inline-size: 1em;
	block-size: 1em;
}

/* Buttons inside the social box only change color on hover — no lift, no
   added shadow (the resting depth shadow above simply carries through). */
.home-fb-mini .home-btn:hover,
.home-fb-mini .home-btn:focus {
	transform: none;
}

/* Secondary, icon-only links for the lower-priority networks — keeps the
   two primary Facebook CTAs visually dominant. */
.home-fb-mini__social {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-block-start: 0.15rem;
}

.home-fb-mini__social-link {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #dce8f7;
	color: var(--shivuk-color-muted);
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.home-fb-mini__social-link svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.home-fb-mini__social-link:hover,
.home-fb-mini__social-link:focus {
	color: #ffffff;
	border-color: transparent;
	transform: translateY(-2px);
}

.home-fb-mini__social-link--instagram:hover,
.home-fb-mini__social-link--instagram:focus {
	background: linear-gradient(135deg, #4f5bd5, #962fbf 30%, #d62976 55%, #fa7e1e 78%, #feda75);
}

.home-fb-mini__social-link--linkedin:hover,
.home-fb-mini__social-link--linkedin:focus {
	background: #0a66c2;
}

.home-fb-mini__social-link--x:hover,
.home-fb-mini__social-link--x:focus {
	background: #000000;
}

.home-fb-mini__social-link--tiktok:hover,
.home-fb-mini__social-link--tiktok:focus {
	background: linear-gradient(135deg, #25f4ee, #000000 50%, #fe2c55);
}

.home-fb-mini__social-link--youtube:hover,
.home-fb-mini__social-link--youtube:focus {
	background: #ff0000;
}

@media (prefers-reduced-motion: reduce) {
	.home-fb-mini__social-link:hover,
	.home-fb-mini__social-link:focus {
		transform: none;
	}
}

/* Focus ring in the box's own blue, on the light surface. */
.home-fb-mini *:focus-visible {
	outline-color: #1877f2;
}

@media (max-width: 420px) {
	/* The two Facebook/Group buttons were a fixed 2-column grid with
	   nowrap labels all the way down — stack them instead of squeezing. */
	.home-fb-mini__actions {
		grid-template-columns: 1fr;
		max-inline-size: 100%;
	}
}

@media (max-width: 860px) {
	/* .hero-entry__body.has-sidebar is NOT collapsed here — its base rule
	   is defined further down the file, so an equal-specificity override
	   this early would lose the source-order battle and leave singles stuck
	   in a two-column grid on phones. Its own media query sits right after
	   the base rule instead. */
	.site-main.has-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -----------------------------------------------------------------------
   Single post / page
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.single-entry {
		animation: shivuk-fade-in-up 0.5s ease both;
	}
}

@keyframes shivuk-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.breadcrumbs {
	margin-block: var(--shivuk-space) 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.breadcrumbs::-webkit-scrollbar {
	display: none;
}

.breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* A plain slash rather than a directional chevron/arrow glyph — this site
   is always RTL, but a "/" carries no left/right connotation to get wrong
   either way. */
.breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--shivuk-color-border);
	font-weight: 400;
}

.breadcrumbs__item a {
	color: var(--shivuk-color-muted);
	text-decoration: none;
	transition: color 0.2s var(--shivuk-ease);
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus {
	color: var(--shivuk-color-accent);
}

.breadcrumbs__item [aria-current="page"] {
	/* .breadcrumbs__item is itself a flex container, so this span is
	   blockified into a flex item regardless of its own display value —
	   inline-block is set only so max-inline-size/ellipsis actually apply. */
	display: inline-block;
	color: var(--shivuk-color-text);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 32ch;
}

.category-badge {
	display: inline-block;
	margin-block-end: 1.1rem;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(8px) saturate(160%);
	-webkit-backdrop-filter: blur(8px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.category-badge:hover,
.category-badge:focus {
	background: rgba(255, 255, 255, 0.28);
	border-color: rgba(255, 255, 255, 0.5);
	color: #ffffff;
}

.single-entry .entry-title {
	font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
	line-height: 1;
}

.entry-meta a {
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s var(--shivuk-ease);
}

.entry-meta a:hover,
.entry-meta a:focus {
	color: var(--shivuk-color-accent-soft);
}

.entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.entry-meta__item + .entry-meta__item::before {
	content: "";
	inline-size: 3px;
	block-size: 3px;
	margin-inline: 0.75em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
}

.entry-meta__avatar {
	border-radius: 50%;
	inline-size: 28px;
	block-size: 28px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.entry-meta__icon {
	inline-size: 15px;
	block-size: 15px;
	flex-shrink: 0;
	opacity: 0.75;
}

.entry-share {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.entry-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	/* The copy-link control is a <button>, the rest are <a> — browsers give
	   buttons default padding/border/cursor that links don't have, which
	   otherwise makes it render a hair off from its siblings despite the
	   shared width/height. Reset uniformly so both variants are identical. */
	padding: 0;
	border: none;
	font: inherit;
	cursor: pointer;
	border-radius: 50%;
	background: var(--shivuk-color-surface);
	color: var(--shivuk-color-muted);
	transition: background-color 0.2s var(--shivuk-ease), color 0.2s var(--shivuk-ease), transform 0.2s var(--shivuk-ease);
}

.entry-share__btn svg {
	inline-size: 15px;
	block-size: 15px;
}

.entry-share__btn:hover,
.entry-share__btn:focus {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	transform: translateY(-2px);
}

.entry-share__btn--copy.is-copied {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

/* -----------------------------------------------------------------------
   Reading progress bar — fixed at the very top of the viewport, above the
   sticky header, so it stays visible regardless of the header's own
   sticky/smart scroll behavior.
   ----------------------------------------------------------------------- */
.reading-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	z-index: 2000;
	pointer-events: none;
}

.reading-progress__bar {
	block-size: 100%;
	inline-size: 0%;
	background: linear-gradient(90deg, var(--shivuk-color-accent), color-mix(in srgb, var(--shivuk-color-accent) 55%, #8fd0f5));
	box-shadow: 0 0 8px color-mix(in srgb, var(--shivuk-color-accent) 60%, transparent);
	transition: inline-size 0.1s linear;
}

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

/* -----------------------------------------------------------------------
   Floating action buttons (shivuk_floating_actions()) — structure/styling
   only for now, every button is inert pending its own JS (see the function
   docblock in inc/template-tags.php).
   ----------------------------------------------------------------------- */
.floating-actions {
	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 1.75rem);
	inset-inline-end: clamp(1rem, 3vw, 1.75rem);
	z-index: 1500;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: opacity 0.25s var(--shivuk-ease), transform 0.25s var(--shivuk-ease), visibility 0.25s;
}

/* single.js adds this once the footer scrolls into view — the stack fades
   out instead of covering the footer's links. visibility (not display) so
   the fade still animates. */
.floating-actions.is-footer-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
}

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

.floating-actions__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	padding: 0;
	border: 1px solid var(--shivuk-color-border);
	border-radius: 50%;
	background: var(--shivuk-color-bg);
	color: var(--shivuk-color-text);
	/* The cookies/top actions are real <a> links now — keep them visually
	   identical to their <button> siblings. */
	text-decoration: none;
	box-shadow: var(--shivuk-shadow-md);
	cursor: pointer;
	transition: transform 0.2s var(--shivuk-ease), box-shadow 0.2s var(--shivuk-ease), background-color 0.2s var(--shivuk-ease), color 0.2s var(--shivuk-ease);
}

.floating-actions__btn svg {
	inline-size: 20px;
	block-size: 20px;
}

.floating-actions__btn:hover,
.floating-actions__btn:focus-visible {
	background: var(--shivuk-color-accent);
	border-color: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	transform: translateY(-2px);
	box-shadow: var(--shivuk-shadow-lg);
}

/* Back-to-top starts hidden and fades in only after real scrolling (JS
   toggles is-visible). Without JS the anchor just stays visible — the
   no-JS fallback keeps it functional. */
html.js-enabled .floating-actions__btn--top {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s var(--shivuk-ease), visibility 0.25s, transform 0.25s var(--shivuk-ease);
}

html.js-enabled .floating-actions__btn--top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Clipboard-fallback feedback on the share button. */
.floating-actions__btn--share.is-copied {
	background: var(--shivuk-color-accent);
	border-color: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

/* The accessibility panel — a small light card popping beside the stack. */
.a11y-panel {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: calc(100% + 0.75rem);
	inline-size: max-content;
	min-inline-size: 200px;
	display: grid;
	gap: 0.25rem;
	padding: 0.85rem;
	background: var(--shivuk-color-bg);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	box-shadow: var(--shivuk-shadow-lg);
}

/* display: grid above would silently defeat the hidden attribute (the
   UA's [hidden]{display:none} loses to any author display) — restate it
   at author level so the closed state actually closes. */
.a11y-panel[hidden] {
	display: none;
}

.a11y-panel__title {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--shivuk-color-muted);
	letter-spacing: 0.03em;
}

/* Plain-text panels (e.g. the cookies notice) — cap the line length so the
   max-content sizing above doesn't stretch one long sentence across the
   screen. */
.a11y-panel__text {
	margin: 0;
	max-inline-size: 24ch;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--shivuk-color-text);
}

/* Cookies-policy variant: a slightly wider notice with a terms link and an
   accept button (auto-opened for new visitors — see single.js). */
.a11y-panel--cookies {
	gap: 0.5rem;
}

.a11y-panel--cookies .a11y-panel__title {
	color: var(--shivuk-color-text);
	font-size: 0.9rem;
}

.a11y-panel--cookies .a11y-panel__text {
	max-inline-size: 30ch;
}

.cookies-panel__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--shivuk-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cookies-panel__link:hover,
.cookies-panel__link:focus {
	text-decoration: none;
}

.cookies-panel__accept {
	margin-block-start: 0.25rem;
	padding: 0.5em 1.5em;
	border: 0;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	justify-self: start;
	transition: filter 0.18s ease, transform 0.18s var(--shivuk-ease);
}

.cookies-panel__accept:hover,
.cookies-panel__accept:focus {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.cookies-panel__accept:hover,
	.cookies-panel__accept:focus {
		transform: none;
	}
}

/* --- The full a11y menu variant: header, tile grid, footer. --- */
.a11y-panel--menu {
	inline-size: 264px;
	gap: 0.6rem;
}

.a11y-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.a11y-panel__head .a11y-panel__title {
	margin: 0;
}

.a11y-panel__close {
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--shivuk-color-surface);
	color: var(--shivuk-color-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.a11y-panel__close svg {
	inline-size: 13px;
	block-size: 13px;
}

.a11y-panel__close:hover,
.a11y-panel__close:focus-visible {
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
}

.a11y-panel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

/* Visual toggle tiles: icon over label, accent-filled when active, with
   the state driven by aria-pressed so the visual can never disagree with
   the accessibility tree. */
.a11y-panel__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 0.4rem 0.65rem;
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius);
	background: var(--shivuk-color-bg);
	color: var(--shivuk-color-text);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.a11y-panel__tile svg {
	inline-size: 22px;
	block-size: 22px;
	color: var(--shivuk-color-accent);
}

.a11y-panel__tile:hover,
.a11y-panel__tile:focus-visible {
	border-color: var(--shivuk-color-accent);
	background: var(--shivuk-color-accent-soft);
}

.a11y-panel__tile[aria-pressed="true"] {
	background: var(--shivuk-color-accent);
	border-color: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

.a11y-panel__tile[aria-pressed="true"] svg {
	color: var(--shivuk-color-accent-contrast);
}

/* Corner check badge on active tiles — the mark is drawn in CSS (a
   rotated two-border corner) so its color stays on the accent variable
   instead of being frozen into a data-URI. */
.a11y-panel__tile-check {
	display: none;
	position: absolute;
	inset-block-start: 5px;
	inset-inline-start: 5px;
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	background: #ffffff;
}

.a11y-panel__tile-check::after {
	content: "";
	position: absolute;
	inset-block-start: 3.5px;
	inset-inline-start: 4px;
	inline-size: 7px;
	block-size: 4px;
	border-inline-start: 2px solid var(--shivuk-color-accent);
	border-block-end: 2px solid var(--shivuk-color-accent);
	transform: rotate(-45deg);
}

.a11y-panel__tile[aria-pressed="true"] .a11y-panel__tile-check {
	display: block;
}

/* Text-size tile: three step dots filled up to the current data-level. */
.a11y-panel__dots {
	display: flex;
	gap: 4px;
}

.a11y-panel__dots i {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--shivuk-color-border);
	transition: background-color 0.15s ease;
}

.a11y-panel__tile[aria-pressed="true"] .a11y-panel__dots i {
	background: rgba(255, 255, 255, 0.45);
}

.a11y-panel__tile[data-level="1"] .a11y-panel__dots i:nth-child(1),
.a11y-panel__tile[data-level="2"] .a11y-panel__dots i:nth-child(-n+2),
.a11y-panel__tile[data-level="3"] .a11y-panel__dots i {
	background: currentColor;
}

.a11y-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--shivuk-color-border);
}

.a11y-panel__reset {
	padding: 0.35em 0.9em;
	border: 1px solid var(--shivuk-color-border);
	border-radius: 999px;
	background: transparent;
	color: var(--shivuk-color-text);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.a11y-panel__reset:hover,
.a11y-panel__reset:focus-visible {
	background: var(--shivuk-color-accent-soft);
	border-color: var(--shivuk-color-accent);
}

.a11y-panel__statement {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--shivuk-color-accent);
	text-decoration: underline;
}

/* -----------------------------------------------------------------------
   Accessibility modes — toggled on <html> by the floating a11y panel
   (single.js) and restored on every page by navigation.js.
   ----------------------------------------------------------------------- */

/* Stepped text size (the browser scales every rem/em from the root). */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 137.5%; }

/* Everything already flows through the theme variables, so high contrast
   is a variable override, not a rule-by-rule repaint. */
html.a11y-contrast {
	--shivuk-color-text: #000000;
	--shivuk-color-muted: #2c2c30;
	--shivuk-color-border: #55555c;
	--shivuk-color-accent: #0b5c8f;
	--shivuk-color-surface: #ffffff;
}

/* Grayscale via variables + media desaturation, NOT filter on <html> —
   a root filter would turn the viewport into the containing block for
   position: fixed, detaching the floating stack and progress bar. */
html.a11y-grayscale {
	--shivuk-color-accent: #4a4a4f;
	--shivuk-color-accent-soft: #e9e9eb;
}

html.a11y-grayscale img,
html.a11y-grayscale video,
html.a11y-grayscale iframe {
	filter: grayscale(1);
}

html.a11y-underline a {
	text-decoration: underline !important;
}

/* System sans-serif everywhere — simpler letterforms than the webfont. */
html.a11y-readable body,
html.a11y-readable button,
html.a11y-readable input,
html.a11y-readable textarea,
html.a11y-readable select {
	font-family: Arial, Helvetica, sans-serif !important;
}

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Oversized cursor (40px, white-outlined for both light and dark). */
html.a11y-cursor,
html.a11y-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10-7 1.2-3.2 6.8z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

@media (max-width: 640px) {
	.floating-actions {
		gap: 0.5rem;
	}

	.floating-actions__btn {
		inline-size: 42px;
		block-size: 42px;
	}

	/* No room beside the stack on phones — the panel opens above it. */
	.a11y-panel {
		inset-inline-end: 0;
		inset-block-end: calc(100% + 0.75rem);
	}
}

/* -----------------------------------------------------------------------
   Auto-generated table of contents (shivuk_table_of_contents()).
   ----------------------------------------------------------------------- */
/* A quiet divider block, not a bordered card — reads like a magazine's
   "in this piece" list rather than a boxed sidebar widget. */
.toc {
	margin: 0 0 2.5rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--shivuk-color-border);
}

.toc__title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--shivuk-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* The site-wide accent meta-dot in front of the kicker. */
.toc__title::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
}

.toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
	counter-reset: toc;
}

.toc__item a {
	color: var(--shivuk-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: color 0.2s var(--shivuk-ease);
}

/* Editorial numbering — accent "01 02 03" in front of each section. */
.toc__item:not(.toc__item--h3) {
	counter-increment: toc;
}

.toc__item:not(.toc__item--h3) a::before {
	content: counter(toc, decimal-leading-zero);
	margin-inline-end: 0.6em;
	color: var(--shivuk-color-accent);
	font-weight: 800;
	font-size: 0.78em;
	font-variant-numeric: tabular-nums;
}

.toc__item a:hover,
.toc__item a:focus {
	color: var(--shivuk-color-accent);
}

.toc__item--h3 {
	padding-inline-start: 1.75rem;
}

.toc__item--h3 a {
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--shivuk-color-muted);
}

.single-entry__thumb {
	margin: 0 0 var(--shivuk-space);
	border-radius: var(--shivuk-radius-lg);
	overflow: hidden;
	box-shadow: var(--shivuk-shadow-lg);
}

.single-entry__thumb img {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
}

/* The magazine drop cap belongs to articles; on a contact/privacy page it
   reads as a typo. Neutralize it for static pages (body.page). */
.page .entry-content > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0;
}

/* -----------------------------------------------------------------------
   Single post — everything on this template sits inside one comfortable
   article width, narrower than the site's normal 1120px container.
   ----------------------------------------------------------------------- */
.hero-entry-page {
	/* One shared measure for the excerpt, share row, and article body — a
	   plain 70ch on each independently looked identical on paper, but "ch"
	   is relative to each element's OWN font-size, and the three don't
	   share one (the excerpt and lede paragraph are deliberately larger
	   than the body). That silently gave each a different pixel width. */
	--single-measure: 42rem;
}

.hero-entry-page .container {
	max-width: 860px;
}

/* Rows that need to span the content + sidebar width (the hero image, the
   body row) grow back to the site's normal container width; the reading
   column itself stays capped via entry-content. */
.hero-entry-page .container--wide {
	max-width: var(--shivuk-container-width);
}

/* Hero card — image/gradient with overlaid title, in the same visual
   language as the homepage hero card, but contained (not full-bleed). */
.hero-entry__hero {
	position: relative;
	overflow: hidden;
	/* Tighter above than below — with the breadcrumbs gone this is the
	   only thing separating the header from the post image, and the full
	   --shivuk-space read as too much air right under the header. */
	margin-block: 0.6rem 0.75rem;
	border-radius: var(--shivuk-radius-lg);
	box-shadow: var(--shivuk-shadow-lg);
	color: #ffffff;
	background:
		radial-gradient(700px 420px at 88% -15%, rgba(255, 255, 255, 0.18), transparent 60%),
		linear-gradient(155deg, var(--shivuk-color-accent) 0%, #0e4d75 100%);
	/* A more cinematic, consistent presence regardless of title length —
	   the hero used to be exactly as tall as the badge+title+meta content
	   needed, so a short title made for a cramped, un-magazine-like hero.
	   Column flex (not row) so the single in-flow child (.hero-entry__inner)
	   both stretches to full width (cross-axis default) and sits at the
	   bottom (justify-content, the main/vertical axis in column mode). */
	min-block-size: min(56vh, 460px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Phones get a shorter hero — 56vh of a tall narrow screen is mostly
   empty scrim above a squeezed title. */
@media (max-width: 560px) {
	.hero-entry__hero {
		min-block-size: min(42vh, 320px);
	}
}

/* Hairline glass ring just inside the edge — the same finishing touch the
   homepage hero card carries. */
.hero-entry__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	pointer-events: none;
	z-index: 2;
}

.hero-entry__media,
.hero-entry__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.hero-entry__media img {
	object-fit: cover;
}

.hero-entry__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.5) 45%, rgba(8, 10, 14, 0.1) 75%, transparent 100%),
		linear-gradient(to top, color-mix(in srgb, var(--shivuk-color-accent) 20%, transparent), transparent 45%);
}

.hero-entry__inner {
	position: relative;
	z-index: 1;
	padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
}

.hero-entry__title {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 0.9rem + 3.4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: #ffffff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
	text-wrap: balance;
}

/* -----------------------------------------------------------------------
   Reading column
   ----------------------------------------------------------------------- */
.hero-entry__body {
	/* Less air above than below — this padding-block-start used to stack
	   on top of .hero-entry__hero's own bottom margin, doubling up the
	   gap under the hero image. */
	padding-block: 1.25rem clamp(2rem, 4vw, 3.5rem);
}

.hero-entry__body.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--shivuk-space) clamp(2.5rem, 4.5vw, 5rem);
	align-items: start;
}

/* Must live AFTER the base rule above: same specificity, so source order
   decides. When this sat in the shared 860px block earlier in the file the
   base rule won, and singles kept the 300px sidebar column on phones —
   squeezing the article column to a few pixels. */
@media (max-width: 860px) {
	.hero-entry__body.has-sidebar {
		/* minmax(0, 1fr), not bare 1fr: a plain 1fr track can't shrink below
		   its content's min-width, and WP captions carry a fixed inline
		   `width` — on phones that propped the track at the image's original
		   width and pushed the whole page into horizontal scroll. */
		grid-template-columns: minmax(0, 1fr);
	}
}

.hero-entry__body .entry-content {
	max-inline-size: var(--single-measure);
	margin-inline: auto;
}

/* Deck — the hand-written excerpt, shown as a subtitle between the
   headline and the body. Only rendered when a real excerpt was written
   (has_excerpt() in single.php); WP's auto-generated fallback would just
   repeat the article's own opening words immediately above itself. */
.entry-excerpt {
	margin-block: 0 1.75rem;
	margin-inline: auto;
	max-inline-size: var(--single-measure);
	padding-inline-start: 1.1rem;
	border-inline-start: 3px solid var(--shivuk-color-accent);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--shivuk-color-muted);
}

.hero-entry__share {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1rem;
	padding-block-end: 1rem;
	/* Same divider language as .toc and .related-posts below — separates
	   the excerpt+share intro block from the article body that follows. */
	border-block-end: 1px solid var(--shivuk-color-border);
	max-inline-size: var(--single-measure);
	margin-inline: auto;
}

.hero-entry__share-label {
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
	font-weight: 600;
}


.entry-content {
	max-width: 70ch;
	font-size: 1.15rem;
	color: var(--shivuk-color-text);
}

/* Brand-tinted text selection inside the article — a tiny finishing touch
   readers actually see while marking up quotes. */
.entry-content ::selection {
	background: var(--shivuk-color-accent);
	color: #ffffff;
}

.entry-content > * + * {
	margin-block-start: 1.6em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-block-start: 1.75em;
	font-weight: 700;
	letter-spacing: -0.01em;
	/* TOC links jump to these via #anchor — without this, a heading lands
	   right under the sticky header and gets hidden behind it. */
	scroll-margin-block-start: 90px;
}

.entry-content h2 {
	position: relative;
	padding-inline-start: 0.9em;
	font-size: 1.65rem;
}

.entry-content h2::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.15em;
	bottom: 0.15em;
	inline-size: 4px;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
}

.entry-content h3 {
	font-size: 1.3rem;
}

.entry-content p {
	line-height: 1.85;
}

/* Magazine drop cap on the article's opening paragraph — the one place
   the accent gets to be typographic rather than decorative. */
.entry-content > p:first-of-type::first-letter {
	float: inline-start;
	font-size: 3.3em;
	line-height: 0.85;
	font-weight: 800;
	color: var(--shivuk-color-accent);
	margin-inline-end: 0.14em;
	margin-block-start: 0.05em;
}

.entry-content a {
	color: var(--shivuk-color-accent);
	font-weight: 500;
	text-decoration: none;
	background-image: linear-gradient(var(--shivuk-color-accent), var(--shivuk-color-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1.5px;
	transition: background-size 0.25s ease;
}

.entry-content a:hover,
.entry-content a:focus {
	background-size: 100% 1.5px;
}

.entry-content blockquote {
	position: relative;
	margin-inline: 0;
	padding-block: 1.15em;
	padding-inline-start: 2.75em;
	padding-inline-end: 1.75em;
	border-inline-start: 3px solid var(--shivuk-color-accent);
	background: var(--shivuk-color-surface);
	/* Logical, not the physical "0 radius radius 0" this used to be —
	   that rounded the corners on the same side as the accent border
	   instead of the far side, regardless of writing direction. */
	border-start-end-radius: var(--shivuk-radius);
	border-end-end-radius: var(--shivuk-radius);
	font-size: 1.2rem;
	font-style: italic;
	line-height: 1.65;
	color: var(--shivuk-color-text);
}

.entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	inset-inline-start: 0.55em;
	inset-block-start: 0.05em;
	font-size: 2.75rem;
	font-style: normal;
	font-weight: 800;
	line-height: 1;
	color: var(--shivuk-color-accent);
	opacity: 0.3;
}

.entry-content blockquote p:last-child {
	margin-block-end: 0;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4em;
}

.entry-content li + li {
	margin-block-start: 0.4em;
}

.entry-content ul li::marker {
	color: var(--shivuk-color-accent);
}

.entry-content img {
	border-radius: var(--shivuk-radius);
	box-shadow: var(--shivuk-shadow-md);
}

.entry-content figure {
	margin-inline: 0;
}

/* A small centered accent rule above the caption instead of plain gray
   text floating under the image — echoes the accent-colored touches
   used elsewhere in the article body (h2's bar, the blockquote mark). */
.entry-content figcaption,
.entry-content .wp-caption-text {
	position: relative;
	margin-block-start: 0.9em;
	padding-block-start: 0.6em;
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
}

.entry-content figcaption::before,
.entry-content .wp-caption-text::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 28px;
	block-size: 2px;
	border-radius: 1px;
	background: var(--shivuk-color-accent);
	opacity: 0.5;
}

/* Classic editor / [caption] shortcode wraps the image in a div with an
   inline `style="width: <img-width>px"` written by WordPress core itself
   (img_caption_shortcode()) — a fixed pixel width with no regard for the
   viewport. The image inside already respects the theme's global
   `img { max-width: 100% }` reset, but that wrapper div doesn't, so on
   any viewport narrower than the original upload it overflowed the
   reading column and broke the layout instead of scaling down with it. */
.entry-content .wp-caption {
	max-inline-size: 100%;
}

.entry-content .wp-caption img {
	max-inline-size: 100%;
	block-size: auto;
}

/* Self-hosted <video>/<audio> and embeds ([embed], the Gutenberg embed
   block, oEmbeds) ship with hardcoded width/height attributes on the
   element itself — unlike <img>, the theme's global reset never covered
   these, so they were never constrained to the content column at all. */
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-inline-size: 100%;
}

.entry-content video {
	block-size: auto;
}

/* Video-provider embeds (YouTube/Vimeo/VideoPress) render as a fixed-size
   iframe inside this wrapper — max-inline-size alone would shrink its
   width but leave the hardcoded height untouched, squashing the video.
   The standard responsive-embed trick: force the wrapper to a 16:9 box
   and stretch the iframe to fill it, ignoring its own width/height attrs.
   Left off other embed types (Twitter/Instagram/etc.) since those aren't
   16:9 video and manage their own sizing via the provider's own script. */
/* Classic-editor oEmbeds are a BARE iframe with hardcoded width/height
   attributes — no block wrapper for the rules below to catch. Shrinking
   only the width (max-inline-size above) left the pixel height untouched,
   so on phones videos rendered narrow-but-tall. aspect-ratio + auto
   height re-derives the height from the actual width. */
.entry-content > iframe[src*="youtube.com"],
.entry-content > iframe[src*="youtube-nocookie.com"],
.entry-content > iframe[src*="youtu.be"],
.entry-content > iframe[src*="vimeo.com"],
.entry-content p > iframe[src*="youtube.com"],
.entry-content p > iframe[src*="youtube-nocookie.com"],
.entry-content p > iframe[src*="youtu.be"],
.entry-content p > iframe[src*="vimeo.com"] {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--shivuk-radius);
}

.entry-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.entry-content .wp-block-embed-vimeo .wp-block-embed__wrapper,
.entry-content .wp-block-embed-videopress .wp-block-embed__wrapper {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.entry-content .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed-vimeo .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed-videopress .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.entry-content pre {
	padding: 1em 1.25em;
	border-radius: var(--shivuk-radius);
	background: #16181d;
	color: #e6e6e8;
	overflow-x: auto;
	font-size: 0.9rem;
	direction: ltr;
	text-align: start;
}

.entry-content code {
	padding: 0.15em 0.4em;
	border-radius: 4px;
	background: var(--shivuk-color-surface);
	font-size: 0.9em;
}

.entry-content pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.entry-content hr {
	margin-block: 2em;
	border: 0;
	border-block-start: 1px solid var(--shivuk-color-border);
}

.entry-tags {
	max-inline-size: var(--single-measure);
	margin-inline: auto;
	margin-block-start: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.entry-tags__label {
	color: var(--shivuk-color-muted);
}

.entry-tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.85em;
	border-radius: 999px;
	background: var(--shivuk-color-surface);
	color: var(--shivuk-color-text);
	font-size: 0.8rem;
	text-decoration: none;
	transition: background-color 0.2s var(--shivuk-ease), color 0.2s var(--shivuk-ease);
}

.entry-tags a:hover,
.entry-tags a:focus {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

/* -----------------------------------------------------------------------
   Dream Job banner (shivuk_dreamjob_banner() in inc/home.php) — a self
   contained grid tile reused as-is between the homepage's "more articles"
   grid and every single post's related-articles grid below. Global (not in
   home.css/singles.css) since both contexts need it.
   ----------------------------------------------------------------------- */
.home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.5em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 0.3s var(--shivuk-ease), box-shadow 0.3s var(--shivuk-ease), opacity 0.18s ease;
}

.home-btn:hover,
.home-btn:focus {
	transform: translateY(-3px);
	box-shadow: var(--shivuk-shadow-md);
}

.home-btn--dark {
	background: #14141b;
	color: #ffffff;
}

.home-btn--dark:hover,
.home-btn--dark:focus {
	color: var(--shivuk-color-accent);
}

/* The Dream Job banner occupies one card slot inside whichever grid it's
   placed in. A deep brand-navy card — the same accent-glow-over-ink
   surface language as the mobile drawer and search overlay — rather than
   the old generic near-black, so the one saturated tile in the light
   article grids still reads as part of the brand. */
.home-dreamjob {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.55rem;
	min-block-size: 100%;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--shivuk-radius);
	background:
		radial-gradient(85% 100% at 100% 0%, color-mix(in srgb, var(--shivuk-color-accent) 55%, transparent), transparent 62%),
		radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--shivuk-color-accent) 22%, transparent), transparent 55%),
		linear-gradient(165deg, #0e3a5f, #081c2e 80%);
	color: #ffffff;
	box-shadow: 0 14px 30px color-mix(in srgb, var(--shivuk-color-accent) 22%, rgba(10, 25, 40, 0.25)), var(--shivuk-shadow-sm);
	transition: box-shadow 0.3s var(--shivuk-ease);
}

/* Hairline glass ring just inside the edge. */
.home-dreamjob::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

/* Large briefcase glyph bleeding off the corner as a soft watermark. */
.home-dreamjob::before {
	content: "";
	position: absolute;
	inset-block-end: -1.5rem;
	inset-inline-end: -1.5rem;
	inline-size: 8.5rem;
	block-size: 8.5rem;
	background-color: #ffffff;
	opacity: 0.05;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm0 4h4V4h-4v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm0 4h4V4h-4v2z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	z-index: 0;
}

.home-dreamjob:hover,
.home-dreamjob:focus-within {
	box-shadow: 0 18px 40px color-mix(in srgb, var(--shivuk-color-accent) 30%, rgba(10, 25, 40, 0.3)), var(--shivuk-shadow-sm);
}

/* Frosted glass pill — quieter on the dark card than a solid block. */
.home-dreamjob__kicker {
	position: relative;
	z-index: 1;
	padding: 0.25em 0.9em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}

.home-dreamjob__title {
	margin: 0;
	position: relative;
	z-index: 1;
	font-size: clamp(1.8rem, 3vw, 2.3rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.home-dreamjob__text {
	margin: 0 0 0.75rem;
	align-self: stretch;
	position: relative;
	z-index: 1;
	font-size: 1.02rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

/* On the navy card an accent-blue button would sink into the surface —
   the CTA is solid white instead, the brightest thing in the card. */
.home-dreamjob__cta {
	position: relative;
	z-index: 1;
	align-self: stretch;
	justify-content: center;
	overflow: hidden;
	background: #ffffff;
	color: color-mix(in srgb, var(--shivuk-color-accent) 80%, #0c2f4c);
	box-shadow: 0 8px 20px rgba(4, 16, 28, 0.35);
	transition: transform 0.3s var(--shivuk-ease), box-shadow 0.3s var(--shivuk-ease), background-color 0.3s var(--shivuk-ease), color 0.3s var(--shivuk-ease);
}

.home-dreamjob__cta:hover,
.home-dreamjob__cta:focus {
	background: #ffffff;
	color: var(--shivuk-color-accent);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(4, 16, 28, 0.45);
}

/* Diagonal shine sweeping across the button on hover/focus — accent-
   tinted, since a white shine would vanish on the white button. */
.home-dreamjob__cta::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 45%;
	background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--shivuk-color-accent) 16%, transparent), transparent);
	transform: translateX(-180%) skewX(-12deg);
	transition: transform 0.65s var(--shivuk-ease);
	pointer-events: none;
}

.home-dreamjob__cta:hover::after,
.home-dreamjob__cta:focus::after {
	transform: translateX(280%) skewX(-12deg);
}

.home-dreamjob__arrow {
	display: inline-block;
	line-height: 1;
	transition: transform 0.3s var(--shivuk-ease);
}

.home-dreamjob__cta:hover .home-dreamjob__arrow,
.home-dreamjob__cta:focus .home-dreamjob__arrow {
	/* The arrow now leads the text (rightmost), so the hover nudge pushes
	   it further right, away from the text, instead of into it. */
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.home-dreamjob__cta::after {
		display: none;
	}

	.home-dreamjob__cta:hover,
	.home-dreamjob__cta:focus {
		transform: none;
	}
}

/* The theme's accent focus ring disappears on the dark card — go white. */
.home-dreamjob *:focus-visible {
	outline-color: #ffffff;
}

.home-dreamjob__badges {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}

.home-dreamjob__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}

.home-dreamjob__badge::before {
	content: "";
	flex-shrink: 0;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	/* Lightened accent — the raw accent sinks into the navy surface. */
	background: color-mix(in srgb, var(--shivuk-color-accent) 45%, #ffffff);
	box-shadow: 0 0 8px color-mix(in srgb, var(--shivuk-color-accent) 70%, transparent);
}

/* -----------------------------------------------------------------------
   Related posts
   ----------------------------------------------------------------------- */
.related-posts {
	margin-block-start: calc(var(--shivuk-space) * 1.5);
	padding-block-start: var(--shivuk-space);
	border-block-start: 1px solid var(--shivuk-color-border);
}

.related-posts__title {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-block-end: var(--shivuk-space);
}

.related-posts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--shivuk-space);
}

/* Reusable card atoms — shivuk_home_card()'s 'tile' variant is used both by
   the homepage's "more articles" grid and, right here, by every single
   post's related-articles grid, so it (and the category chip / empty-thumb
   placeholder it depends on) lives globally rather than only in home.css. */
.home-cat {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	font-size: 0.75rem;
	font-weight: 700;
}

/* The chip is usually a plain span (home tiles), but archive cards link
   it to the category — same look, minus the default anchor underline,
   plus a filled hover. */
a.home-cat {
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

a.home-cat:hover,
a.home-cat:focus {
	background-color: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

.home-thumb-empty {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 80px;
	background: linear-gradient(135deg, var(--shivuk-color-accent-soft), var(--shivuk-color-surface));
	color: var(--shivuk-color-accent);
}

.home-thumb-empty svg {
	inline-size: 34px;
	block-size: 34px;
	opacity: 0.55;
}

.home-tile {
	display: flex;
	flex-direction: column;
	background: var(--shivuk-color-bg);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius);
	overflow: hidden;
	box-shadow: var(--shivuk-shadow-sm);
	transition: box-shadow 0.3s var(--shivuk-ease);
}

.home-tile:hover {
	box-shadow: var(--shivuk-shadow-card-hover);
}

.home-tile__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--shivuk-color-surface);
}

/* Faint fade at the photo's foot, so the category chip floating across
   the boundary below always sits on a readable edge. */
.home-tile__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 20, 27, 0.18), transparent 30%);
	pointer-events: none;
}

.home-tile__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.home-tile__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.9rem 1rem 1.1rem;
	flex-grow: 1;
}

/* The category chip bridges the photo and the body: pulled up over the
   image edge, with a bg-colored ring so it reads as its own layer. */
.home-tile__body .home-cat {
	position: relative;
	z-index: 1;
	margin-block-start: -1.6rem;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	border: 2px solid var(--shivuk-color-bg);
	padding: 0.2em 0.85em;
	box-shadow: var(--shivuk-shadow-sm);
}

.home-tile__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
}

.home-tile__title a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.18s ease;
}

.home-tile__title a:hover,
.home-tile__title a:focus {
	color: var(--shivuk-color-accent);
}

.home-tile__date {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: auto;
	color: var(--shivuk-color-muted);
	font-size: 0.8rem;
}

/* Same accent dot the hero's small cards carry — one shared meta language. */
.home-tile__date::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
	opacity: 0.55;
}

@media (max-width: 720px) {
	.related-posts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* First card and the Dream Job banner each take their own full-width
	   row; the remaining two cards share the row after them. */
	.related-posts__grid > :first-child,
	.related-posts__grid > .home-dreamjob {
		grid-column: 1 / -1;
	}
}

/* -----------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------- */
.pagination,
.comment-navigation {
	margin-block-start: var(--shivuk-space);
}

.pagination .nav-links {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.25rem;
	block-size: 2.25rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius);
	text-decoration: none;
	color: var(--shivuk-color-text);
}

.pagination .page-numbers.current {
	background: var(--shivuk-color-accent);
	border-color: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

/* -----------------------------------------------------------------------
   Comments
   ----------------------------------------------------------------------- */
.comments-area {
	margin-block-start: calc(var(--shivuk-space) * 1.5);
	padding-block-start: var(--shivuk-space);
	border-block-start: 1px solid var(--shivuk-color-border);
}

/* "Comments are closed" — a quiet card instead of a bare paragraph. */
.no-comments {
	margin: 0;
	padding: 0.85em 1.1em;
	border-radius: var(--shivuk-radius);
	background: var(--shivuk-color-surface);
	border: 1px solid var(--shivuk-color-border);
	color: var(--shivuk-color-muted);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
}

/* Same accent-bar mark as the widget titles and homepage section heads. */
.comments-title {
	position: relative;
	padding-inline-start: 0.75rem;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-block-end: var(--shivuk-space);
}

.comments-title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0.18em;
	inline-size: 4px;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--shivuk-space);
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

/* Thread line in a fading accent instead of flat gray — reads as one
   conversation branch. */
.comment-list .children {
	list-style: none;
	margin-block-start: 1.25rem;
	margin-inline-start: 1.1rem;
	padding: 0;
	padding-inline-start: 1.6rem;
	display: grid;
	gap: 1.25rem;
	border-inline-start: 2px solid transparent;
	border-image: linear-gradient(to bottom, color-mix(in srgb, var(--shivuk-color-accent) 45%, transparent), var(--shivuk-color-border)) 1;
}

.comment-body {
	display: flex;
	gap: 0.75rem;
}

.comment-avatar {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--shivuk-color-bg);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--shivuk-color-accent) 30%, var(--shivuk-color-border)),
		var(--shivuk-shadow-sm);
}

.comment-main {
	flex: 1;
	min-inline-size: 0;
}

/* Chat bubble as a light card: white with a hairline border. */
.comment-bubble {
	display: inline-block;
	max-inline-size: 100%;
	padding: 0.7rem 1.05rem 0.8rem;
	background: var(--shivuk-color-bg);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	border-start-start-radius: 6px;
	box-shadow: var(--shivuk-shadow-sm);
	overflow-wrap: anywhere;
}

.comment-author-name {
	display: block;
	margin-block-end: 0.15rem;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--shivuk-color-accent);
}

/* Soft accent pill instead of a bare italic line. */
.comment-awaiting-moderation {
	display: inline-block;
	margin: 0.2rem 0;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	font-size: 0.78rem;
	font-weight: 600;
	font-style: normal;
}

.comment-content {
	font-size: 0.95rem;
	line-height: 1.6;
}

.comment-content p {
	margin-block: 0;
}

.comment-content > * + * {
	margin-block-start: 0.75em;
}

.comment-actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-block-start: 0.4rem;
	padding-inline-start: 0.85rem;
	font-size: 0.8rem;
}

/* The shared accent meta-dot in front of the comment's timestamp. */
.comment-actions .comment-date {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.comment-actions .comment-date::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--shivuk-color-accent);
	opacity: 0.55;
}

.comment-actions a,
.comment-reply-login {
	color: var(--shivuk-color-muted);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

/* "Reply" is the one action worth promoting. */
.comment-actions .comment-reply a {
	color: var(--shivuk-color-accent);
	font-weight: 700;
}

.comment-actions a:hover,
.comment-actions a:focus,
.comment-reply-login:hover,
.comment-reply-login:focus {
	color: var(--shivuk-color-accent);
}

.comment-actions .comment-reply a:hover,
.comment-actions .comment-reply a:focus {
	text-decoration: underline;
}

/* Comment form — the light-panel language of the homepage's community
   section: a soft accent gradient with the site-wide dot texture. */
.comment-respond {
	padding: var(--shivuk-space);
	background:
		radial-gradient(color-mix(in srgb, var(--shivuk-color-accent) 8%, transparent) 1px, transparent 1.5px),
		linear-gradient(165deg, var(--shivuk-color-accent-soft), #ffffff 85%);
	background-size: 16px 16px, auto;
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	box-shadow: var(--shivuk-shadow-sm);
}

/* Inline reply form (inside a thread): plain white so it doesn't compete
   with the conversation around it. */
.comment-list .comment-respond {
	margin-block-start: 1rem;
	background: var(--shivuk-color-bg);
}

.comment-reply-title {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-inline-start: 0.75rem;
	font-size: 1.05rem;
	font-weight: 700;
	margin-block: 0 1rem;
}

/* The same accent bar every heading on the site carries. */
.comment-reply-title::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0.18em;
	inline-size: 4px;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
}

.comment-reply-title small a {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--shivuk-color-muted);
	text-decoration: none;
}

.comment-reply-title small a:hover,
.comment-reply-title small a:focus {
	color: var(--shivuk-color-accent);
}

.comment-form input[type="text"],
.comment-form textarea {
	width: 100%;
	padding: 0.7em 1em;
	border: 1px solid var(--shivuk-color-border);
	border-radius: 14px;
	font: inherit;
	background: var(--shivuk-color-bg);
	color: var(--shivuk-color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form textarea {
	resize: none;
	min-block-size: 104px;
}

.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
	border-color: var(--shivuk-color-accent);
	box-shadow: 0 0 0 3px var(--shivuk-color-accent-soft);
	outline: none;
}

.comment-form input[type="text"]::placeholder,
.comment-form textarea::placeholder {
	color: var(--shivuk-color-muted);
}

.comment-form p {
	margin-block: 0 0.9rem;
}

.comment-form-author {
	max-inline-size: 320px;
}

/* Rejected-submission message (see inc/comment-errors.php) — replaces
   WordPress's default wp_die() screen, shown inline above the fields with
   the visitor's name/comment already restored. In brand blue rather than a
   generic red so it reads as "shivukme telling you something" instead of a
   scary system error. */
.comment-form-error {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.9rem;
	padding: 0.85em 1.1em;
	background: var(--shivuk-color-accent);
	border-radius: var(--shivuk-radius);
	box-shadow: var(--shivuk-shadow-md);
	color: var(--shivuk-color-accent-contrast);
	font-weight: 700;
	font-size: 0.95rem;
}

.comment-form-error::before {
	content: "!";
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.4em;
	block-size: 1.4em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	font-weight: 800;
}

/* The internal comment CAPTCHA — a playful little card rather than a bare
   label + input: a branded heading, a small "proof of life" tagline, then
   the actual question set apart in its own soft-accent box so it reads as
   the one thing that actually needs answering. The answer input itself
   already matches .comment-form input[type="text"] above, no extra rule
   needed for it. */
.captcha-box {
	margin-block-end: 1.1rem;
	padding: 1rem 1.1rem;
	border-radius: var(--shivuk-radius-lg);
	background: var(--shivuk-color-surface);
	border: 1px solid var(--shivuk-color-border);
}

/* ".captcha-box .captcha-box__x" rather than the bare class — these are
   <p> elements, and the generic ".comment-form p" reset above is a
   type+class selector that would otherwise win the specificity tie against
   a single class and silently override these margins regardless of
   source order. */
.captcha-box .captcha-box__heading {
	margin: 0 0 0.2em;
	font-weight: 800;
	font-size: 0.98rem;
	color: var(--shivuk-color-accent);
}

.captcha-box .captcha-box__subtext {
	display: flex;
	align-items: center;
	gap: 0.35em;
	margin: 0 0 0.9em;
	color: var(--shivuk-color-muted);
	font-size: 0.8rem;
}

.captcha-box__pulse {
	flex-shrink: 0;
	inline-size: 14px;
	block-size: 14px;
	color: var(--shivuk-color-accent);
}

/* One of four background variants (picked at random server-side in
   shivuk_comment_captcha_markup()) plus a dotted texture — the "different
   pattern every time, on a varied background" look of classic captchas,
   minus actually being unreadable. */
.captcha-box__question {
	position: relative;
	overflow: hidden;
	margin: 0 0 0.75em;
	padding: 0.7em 1em;
	border-radius: var(--shivuk-radius);
	background-size: 14px 14px, auto;
}

.captcha-box__question--v1 {
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px),
		linear-gradient(135deg, #cfe6f7, #9fcdec);
}

.captcha-box__question--v2 {
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px),
		linear-gradient(135deg, #ffe4b8, #ffc978);
}

.captcha-box__question--v3 {
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px),
		linear-gradient(135deg, #ffd3e6, #ffa7cb);
}

.captcha-box__question--v4 {
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.5px),
		linear-gradient(135deg, #cdf1de, #93ddb4);
}

.captcha-box__question label {
	position: relative;
	z-index: 1;
	display: block;
}

/* The visible, decorative "wobbly" text — aria-hidden, since the real
   accessible name comes from the .screen-reader-text sibling instead. */
.captcha-box__question-text {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--shivuk-color-text);
}

.captcha-box__letter {
	display: inline-block;
}

.captcha-box .captcha-box__answer {
	margin: 0;
}

.comment-form .form-submit {
	margin-block-end: 0;
}

/* The publish button gets the site's CTA treatment: accent pill with a
   colored glow, deepening (not fading) on hover. Overrides the generic
   input[type="submit"] opacity/lift rule below. */
.comment-form .form-submit input {
	width: auto;
	padding: 0.6em 1.9em;
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--shivuk-color-accent) 35%, transparent);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.comment-form .form-submit input:hover,
.comment-form .form-submit input:focus {
	opacity: 1;
	background: color-mix(in srgb, var(--shivuk-color-accent) 85%, #0c2f4c);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--shivuk-color-accent) 45%, transparent);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.comment-form .form-submit input:hover,
	.comment-form .form-submit input:focus {
		transform: none;
	}
}

/* -----------------------------------------------------------------------
   Search form
   ----------------------------------------------------------------------- */
.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
}

.search-form .search-field {
	flex: 1 1 auto;
	padding: 0.6em 0.9em;
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius);
	font: inherit;
}

/* (.comment-form .form-submit input is intentionally absent — its pill
   styling above must not be overridden by this later, equal-specificity
   group; it still inherits background/color via input[type="submit"].) */
.search-form .search-submit,
input[type="submit"] {
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: var(--shivuk-radius);
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-form .search-submit:hover,
input[type="submit"]:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* -----------------------------------------------------------------------
   Search overlay — full-screen layer opened from the header toggle.
   :target is the no-JS fallback (the toggle is an <a href="#shivuk-search">);
   navigation.js drives the .search-overlay--open class on top of it.
   ----------------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	place-items: center;
	padding: var(--shivuk-space);
	/* The header's dark-blue surface language, deepened for a modal layer:
	   an accent glow bleeding in from the top corner over near-black ink. */
	background:
		radial-gradient(70% 90% at 85% 0%, rgba(26, 125, 190, 0.35), transparent 60%),
		linear-gradient(165deg, rgba(10, 34, 52, 0.97), rgba(6, 20, 31, 0.97));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #ffffff;
}

.search-overlay:target,
.search-overlay--open {
	display: grid;
}

.search-overlay--open {
	animation: shivuk-overlay-fade 0.25s var(--shivuk-ease);
}

.search-overlay--open .search-overlay__inner {
	animation: shivuk-overlay-rise 0.35s var(--shivuk-ease);
}

@keyframes shivuk-overlay-fade {
	from {
		opacity: 0;
	}
}

@keyframes shivuk-overlay-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* JS adds this on <html> while the layer is open. */
.search-overlay-locked {
	overflow: hidden;
}

.search-overlay *:focus-visible {
	outline-color: #ffffff;
}

.search-overlay__close {
	position: absolute;
	inset-block-start: calc(var(--shivuk-space) * 0.75);
	inset-inline-end: calc(var(--shivuk-space) * 0.75);
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.25s var(--shivuk-ease);
}

.search-overlay__close:hover,
.search-overlay__close:focus {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
	transform: rotate(90deg);
}

.search-overlay__inner {
	inline-size: 100%;
	max-inline-size: 720px;
	text-align: center;
}

.search-overlay__kicker {
	color: #8fc4e8;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.search-overlay__title {
	margin: 0.15em 0 0.9em;
	font-size: clamp(1.9rem, 5vw, 2.9rem);
	font-weight: 800;
	line-height: 1.15;
}

/* The theme's search form, restyled as one glass pill on the dark layer. */
.search-overlay .search-form {
	max-inline-size: 560px;
	margin-inline: auto;
	padding: 0.4rem;
	gap: 0.4rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.search-overlay .search-form:focus-within {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.55);
}

.search-overlay .search-field {
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 1.15rem;
	padding-inline: 1.1em;
}

.search-overlay .search-field::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.search-overlay .search-field:focus {
	outline: none;
}

.search-overlay .search-submit {
	border-radius: 999px;
	padding-inline: 1.5em;
	font-weight: 700;
}

.search-overlay__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 1.7rem;
}

.search-overlay__cats-label {
	inline-size: 100%;
	margin-block-end: 0.15rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
}

.search-overlay__cat {
	padding: 0.3em 1em;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.search-overlay__cat:hover,
.search-overlay__cat:focus {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.search-overlay--open,
	.search-overlay--open .search-overlay__inner {
		animation: none;
	}

	.search-overlay__close:hover,
	.search-overlay__close:focus {
		transform: none;
	}
}

/* -----------------------------------------------------------------------
   Search results page
   ----------------------------------------------------------------------- */
.search-page {
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.search-page__head {
	max-inline-size: 760px;
	margin-inline: auto;
	margin-block-end: clamp(1.75rem, 4vw, 3rem);
	text-align: center;
}

.search-page__kicker {
	color: var(--shivuk-color-accent);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.search-page__title {
	margin-block: 0.15em 0.1em;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

.search-page__count {
	margin-block: 0 1.2rem;
	color: var(--shivuk-color-muted);
}

.search-page__form .search-form {
	margin-inline: auto;
}

/* Named __results (not .search-results) on purpose: WordPress puts the bare
   "search-results" class on <body> on this very page, so that selector would
   clamp the whole page — header and footer included — to 900px. */
.search-page__results {
	display: grid;
	gap: var(--shivuk-space);
	max-inline-size: 900px;
	margin-inline: auto;
	inline-size: 100%;
}

.search-card {
	position: relative;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
	align-items: center;
	padding: 0.9rem;
	background: var(--shivuk-color-bg);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	box-shadow: var(--shivuk-shadow-sm);
	transition: box-shadow 0.3s var(--shivuk-ease);
}

.search-card:hover {
	box-shadow: var(--shivuk-shadow-card-hover);
}

.search-card--no-thumb {
	grid-template-columns: 1fr;
}

.search-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--shivuk-radius);
	overflow: hidden;
	background: var(--shivuk-color-surface);
}

.search-card__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.search-card__body .home-cat {
	margin-block-end: 0.5rem;
}

.search-card__title {
	margin-block: 0 0.35em;
	font-size: 1.25rem;
}

.search-card__title a {
	color: inherit;
	text-decoration: none;
}

.search-card__title a:hover,
.search-card__title a:focus {
	color: var(--shivuk-color-accent);
}

.search-card__excerpt {
	margin: 0 0 0.6rem;
	color: var(--shivuk-color-muted);
	font-size: 0.95rem;
}

.search-card__date {
	color: var(--shivuk-color-muted);
	font-size: 0.85rem;
}

/* The query, lit inside titles and excerpts. */
.search-card mark {
	padding: 0 0.15em;
	border-radius: 4px;
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	font-weight: 700;
}

.search-page .pagination .nav-links {
	justify-content: center;
}

.search-page__empty {
	max-inline-size: 640px;
	margin-inline: auto;
	text-align: center;
	color: var(--shivuk-color-muted);
}

.search-page__popular {
	max-inline-size: 900px;
	margin: clamp(2rem, 5vw, 3.5rem) auto 0;
	padding-block-start: calc(var(--shivuk-space) * 1.25);
	border-block-start: 1px solid var(--shivuk-color-border);
	text-align: center;
}

.search-page__popular-title {
	margin-block-end: var(--shivuk-space);
	font-size: 1.25rem;
	font-weight: 700;
}

.search-page__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--shivuk-space);
	text-align: start;
}

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

	.search-card {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
   404 / no-results
   ----------------------------------------------------------------------- */
.no-results h2 {
	font-size: 1.75rem;
}

.no-results {
	padding-block: var(--shivuk-space);
}

.error-404 {
	padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 4rem);
	text-align: center;
}

.error-404__hero {
	position: relative;
	max-inline-size: 640px;
	margin-inline: auto;
}

/* Soft accent halo behind the big number — same light-blue wash the theme
   uses for accent-soft surfaces, so the giant digits sit on a glow instead
   of floating on bare white. */
.error-404__hero::before {
	content: "";
	position: absolute;
	inset-block-start: -14%;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: min(420px, 90%);
	block-size: 300px;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--shivuk-color-accent-soft), transparent);
	z-index: -1;
	pointer-events: none;
}

.error-404__code {
	margin: 0;
	font-size: clamp(5.5rem, 20vw, 10.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--shivuk-color-accent);
	animation: shivuk-404-drift 5s ease-in-out infinite;
}

/* The zero drawn as an outline only — the "hole" in the middle of the code,
   which is the whole joke of a 404. */
.error-404__zero {
	color: transparent;
	-webkit-text-stroke: 0.045em var(--shivuk-color-accent);
}

@keyframes shivuk-404-drift {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.error-404__code {
		animation: none;
	}
}

.error-404 .page-title {
	font-size: clamp(1.6rem, 3.5vw, 2.1rem);
	margin-block: 0.3em 0.4em;
}

.error-404__text {
	max-inline-size: 46ch;
	margin: 0 auto 1.6rem;
	color: var(--shivuk-color-muted);
}

.error-404__search .search-form {
	margin-inline: auto;
}

.error-404__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-block-start: 1.4rem;
}

.error-404__btn {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

.error-404__btn:hover,
.error-404__btn:focus {
	color: var(--shivuk-color-accent-contrast);
}

.error-404__popular {
	max-inline-size: 900px;
	margin: clamp(2.5rem, 6vw, 4rem) auto 0;
	padding-block-start: calc(var(--shivuk-space) * 1.25);
	border-block-start: 1px solid var(--shivuk-color-border);
}

.error-404__popular-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-block-end: var(--shivuk-space);
}

.error-404__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--shivuk-space);
	text-align: start;
}

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

/* -----------------------------------------------------------------------
   Footer — brand-blue, three columns + copyright strip
   ----------------------------------------------------------------------- */
.site-footer {
	--footer-bg: #10334d;
	--footer-bg-deep: #0b2438;
	--footer-text: rgba(255, 255, 255, 0.78);
	/* Light tint of the brand accent — #1a7dbe itself is too dark to read
	   as an accent on the navy bg, so on-dark accents use this instead. */
	--footer-accent: #6cb9e8;
	--footer-link-hover: #6cb9e8;
	--footer-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	overflow: hidden;
	/* One quiet brand-blue glow — a single color family, no competing hues
	   or textures fighting the content. */
	background:
		radial-gradient(900px 380px at 50% -10%, rgba(26, 125, 190, 0.35), transparent 65%),
		var(--footer-bg);
	color: var(--footer-text);
}

/* Brand-blue hairline. */
.site-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--shivuk-color-accent), var(--footer-accent) 50%, var(--shivuk-color-accent));
}

.site-footer a {
	color: var(--footer-text);
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--footer-link-hover);
}

.site-footer *:focus-visible {
	outline-color: #ffffff;
}

/* Fun-fact banner linking to the stats page, sitting above the main grid.
   The number IS the design: display-size gradient digits on a quiet glass
   card, one sentence beside them, a solid white CTA. Nothing else. */
.site-footer__stat {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 3vw, 1.75rem);
	/* Not wrapped in .container, so the side gutter is reserved in the
	   width calc itself — otherwise below the cap the card would sit flush
	   against the screen edges. */
	max-inline-size: min(760px, calc(100% - 2 * var(--shivuk-space)));
	margin: 2.25rem auto 0;
	padding: clamp(1.25rem, 3vw, 1.6rem) clamp(1.25rem, 3.5vw, 2rem);
	border-radius: var(--shivuk-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.055);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: transform 0.3s var(--footer-ease), border-color 0.3s var(--footer-ease), background-color 0.3s var(--footer-ease);
}

.site-footer__stat:hover,
.site-footer__stat:focus {
	transform: translateY(-3px);
	border-color: rgba(108, 185, 232, 0.45);
	background: rgba(255, 255, 255, 0.08);
}

/* The hero digits: display-size, gradient-filled, tight leading. */
.site-footer__stat-num {
	flex-shrink: 0;
	font-size: clamp(2.9rem, 7vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: linear-gradient(160deg, #ffffff 30%, var(--footer-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--footer-accent); /* fallback when background-clip:text is unsupported */
	/* Own compositor layer — without it, Chrome intermittently flashes
	   clip-to-text elements while (re)painting, e.g. right after a page
	   refresh, because the parent card carries transform/color transitions. */
	transform: translateZ(0);
}

.site-footer__stat-pct {
	font-size: 0.55em;
	font-weight: 800;
}

.site-footer__stat-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-inline-size: 0;
	/* Hairline separating the digits from the sentence, RTL-aware. */
	padding-inline-start: clamp(1.1rem, 3vw, 1.75rem);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__stat-text {
	color: #ffffff;
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: 700;
	line-height: 1.45;
	text-wrap: balance;
}

.site-footer__stat-kicker {
	color: var(--footer-accent);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* Solid white CTA — the one high-contrast element on the card. */
.site-footer__stat-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-inline-start: auto;
	flex-shrink: 0;
	padding: 0.65em 1.25em;
	border-radius: 999px;
	background: #ffffff;
	color: var(--footer-bg);
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
	transition: transform 0.25s var(--footer-ease), box-shadow 0.25s var(--footer-ease);
}

.site-footer__stat:hover .site-footer__stat-cta,
.site-footer__stat:focus .site-footer__stat-cta {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.55);
}

/* Keep the button text navy even though .site-footer a:hover recolors links. */
.site-footer__stat:hover .site-footer__stat-cta,
.site-footer__stat:focus .site-footer__stat-cta,
.site-footer__stat .site-footer__stat-cta {
	color: var(--footer-bg);
}

.site-footer__stat-cta svg {
	inline-size: 0.95em;
	block-size: 0.95em;
	transition: transform 0.25s var(--footer-ease);
}

.site-footer__stat:hover .site-footer__stat-cta svg,
.site-footer__stat:focus .site-footer__stat-cta svg {
	/* Inline-forward nudge (leftwards in RTL). */
	transform: translateX(-3px);
}

@media (max-width: 600px) {
	.site-footer__stat {
		flex-direction: column;
		gap: 0.9rem;
		text-align: center;
		padding: 1.5rem 1.25rem;
	}

	.site-footer__stat-body {
		align-items: center;
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.site-footer__stat-cta {
		margin-inline-start: 0;
	}
}

/* Flex, not grid with a fixed track count — the number of nav columns
   depends on how many footer menus are configured in the admin, and a
   fixed `repeat(3, ...)` left a dead empty gap whenever fewer than 3 were
   set. Flex-wrap sizes to however many columns actually exist. */
.site-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.site-footer__col {
	min-inline-size: 0;
	flex: 1 1 180px;
}

/* Invisible above the mobile breakpoint — the nav columns stay direct flex
   children of .site-footer__grid, same as before this wrapper existed. It
   only becomes a real (centering) flex container on mobile, below. */
.site-footer__nav-group {
	display: contents;
}

/* About column — logo, blurb, socials as one measured vertical rhythm:
   consistent gaps instead of per-element margins, and a hairline separating
   the identity block (logo + text) from the social row. */
.site-footer__about {
	flex: 1.3 1 260px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
}

/* The logo is white-on-transparent — it sits directly on the navy, no
   backing plate. */
.site-footer__logo-link {
	display: inline-block;
}

.site-footer__logo,
.site-footer__logo-link img {
	display: block;
	max-block-size: 64px;
	width: auto;
}

.site-footer__name {
	margin: 0;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
}

.site-footer__about-text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.75;
	max-inline-size: 36ch;
	color: rgba(255, 255, 255, 0.68);
}

/* Fixed 4-per-row grid of social buttons. */
.site-footer__social {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	gap: 0.55rem;
	/* Hairline separating identity from the social row. */
	padding-block-start: 1.1rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	align-self: stretch;
}

.site-footer__social-link {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #ffffff;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus {
	color: #ffffff;
	transform: translateY(-3px);
	border-color: transparent;
}

/* Each platform lights up in its own brand color on hover. */
.site-footer__social-link--facebook:hover,
.site-footer__social-link--facebook:focus {
	background: #1877f2;
	box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);
}

.site-footer__social-link--facebook_group:hover,
.site-footer__social-link--facebook_group:focus {
	background: #0b4dbb;
	box-shadow: 0 8px 20px rgba(11, 77, 187, 0.4);
}

.site-footer__social-link--instagram:hover,
.site-footer__social-link--instagram:focus {
	background: linear-gradient(135deg, #4f5bd5, #962fbf 30%, #d62976 55%, #fa7e1e 78%, #feda75);
	box-shadow: 0 8px 20px rgba(214, 41, 118, 0.4);
}

.site-footer__social-link--linkedin:hover,
.site-footer__social-link--linkedin:focus {
	background: #0a66c2;
	box-shadow: 0 8px 20px rgba(10, 102, 194, 0.4);
}

.site-footer__social-link--x:hover,
.site-footer__social-link--x:focus {
	background: #000000;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.site-footer__social-link--tiktok:hover,
.site-footer__social-link--tiktok:focus {
	background: linear-gradient(135deg, #25f4ee, #000000 50%, #fe2c55);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.site-footer__social-link--youtube:hover,
.site-footer__social-link--youtube:focus {
	background: #ff0000;
	box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4);
}

.site-footer__social-link svg {
	inline-size: 18px;
	block-size: 18px;
}

.site-footer__title {
	margin: 0 0 1rem;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	position: relative;
	padding-block-end: 0.6rem;
}

.site-footer__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 32px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--footer-accent);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.site-footer__menu a {
	display: inline-flex;
	align-items: center;
	font-size: 0.92rem;
	transition: color 0.15s ease, transform 0.15s ease;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus {
	/* Inline-forward nudge (leftwards in RTL). */
	transform: translateX(-3px);
}

/* Small chevron that slides in on hover, at the inline-forward (left) end. */
.site-footer__menu a::after {
	content: "‹";
	display: inline-block;
	max-inline-size: 0;
	overflow: hidden;
	color: var(--footer-accent);
	opacity: 0;
	transition: max-inline-size 0.2s var(--footer-ease), opacity 0.2s var(--footer-ease), margin-inline-start 0.2s var(--footer-ease);
}

.site-footer__menu a:hover::after,
.site-footer__menu a:focus::after {
	max-inline-size: 14px;
	margin-inline-start: 0.35rem;
	opacity: 1;
}

/* Copyright strip. */
.site-footer__strip {
	background: var(--footer-bg-deep);
	border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__strip-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	padding-block: 1rem;
}

.site-footer__to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-inline-start: auto;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--footer-text);
	font-size: 0.82rem;
	font-weight: 600;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.site-footer__to-top:hover,
.site-footer__to-top:focus {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	transform: translateY(-2px);
}

.site-footer__to-top span {
	transition: transform 0.18s ease;
}

.site-footer__to-top:hover span,
.site-footer__to-top:focus span {
	transform: translateY(-2px);
}

.site-footer__copy {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

.site-footer__credit {
	margin-inline-start: 0.5em;
	padding-inline-start: 0.6em;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.8rem;
}

@media (max-width: 1080px) {
	.site-footer__about {
		flex-basis: 100%;
	}
}

@media (max-width: 860px) {
	/* Below this, the about column and every nav column used to stack
	   into one full-width column each — a long single-file scroll. Grid
	   instead: about keeps its own full-width row (tidied up and
	   centered, since a left-aligned block looks off spanning the whole
	   width on its own), and the nav columns flow beneath it as a
	   centered cluster (see .site-footer__nav-group below), each sized
	   to its own content instead of stretched edge-to-edge. */
	.site-footer__grid {
		display: grid;
		gap: 2rem clamp(1.25rem, 4vw, 2rem);
	}

	.site-footer__about {
		text-align: center;
		align-items: center;
	}

	/* .site-footer__logo-link is inline-block, so the text-align: center
	   above already centers it — only the about-text paragraph, capped at
	   34ch, needs its own box centered rather than just its text. */
	.site-footer__about-text {
		margin-inline: auto;
	}

	/* Icons spread across the full row instead of staying in a fixed
	   4-per-row grid, which wrapped into a second line once more than
	   four social platforms were configured. */
	.site-footer__social {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		inline-size: 100%;
	}

	/* The nav columns (however many are configured) become a real flex
	   row here — wrapping and centered as a group in the section, each
	   column sized to its own content rather than stretched to fill a
	   grid track. The text inside each column still reads right-aligned. */
	.site-footer__nav-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem clamp(1.25rem, 4vw, 2rem);
	}

	.site-footer__nav {
		flex: 0 1 auto;
		text-align: right;
	}

	.site-footer__strip-inner {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}

	.site-footer__to-top {
		margin-inline-start: 0;
	}
}