/*
 * Shinka — the styling layer theme.json can't express.
 *
 * Rules:
 *  - Every colour/radius/font comes from a design token, so style
 *    variations re-skin all of this automatically.
 *  - "Muted" text uses color-mix(currentColor) instead of a fixed colour, so
 *    it stays readable inside inverted and primary sections.
 *  - Low-specificity :where() for form defaults so plugins can override.
 */

:root {
	--shinka-primary: var(--wp--preset--color--primary);
	--shinka-secondary: var(--wp--preset--color--secondary);
	--shinka-border: var(--wp--preset--color--border);
	--shinka-surface: var(--wp--preset--color--surface);
	--shinka-ease: var(--wp--custom--transition, 200ms cubic-bezier(0.2, 0.7, 0.2, 1));
	--shinka-muted: color-mix(in srgb, currentcolor 72%, transparent);
	--shinka-tint: color-mix(in srgb, var(--shinka-primary) 12%, transparent);

	/* Primary pulled towards the text colour: readable on a primary tint. */
	--shinka-primary-strong: color-mix(in srgb, var(--shinka-primary) 78%, var(--wp--preset--color--contrast));
}

/* Muted text inside a primary section stays close to on-primary. The
   percentages above and here are read by tools/contrast-check.mjs. */
:where([class*="is-style-section-primary"]) {
	--shinka-muted: color-mix(in srgb, currentcolor 88%, transparent);
}

/* ---------------------------------------------------------------- Base */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

::selection {
	background: color-mix(in srgb, var(--shinka-primary) 30%, transparent);
	color: inherit;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentcolor 45%, transparent);
	transition: color var(--shinka-ease), text-decoration-color var(--shinka-ease), text-decoration-thickness var(--shinka-ease), text-underline-offset var(--shinka-ease);
}

a:hover {
	text-decoration-color: currentcolor;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.26em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--shinka-primary);
	outline-offset: 3px;
	border-radius: 3px;
}

/* The palette has a colour named "border", so core prints
   `.has-border-color { color: var(--…border) !important }` for it — and adds
   the same class to any block given a border colour. Without this, choosing a
   border colour recolours the block's text. A deliberate "Border" text colour
   also carries .has-text-color and keeps it. */
.has-border-color:not(.has-text-color) {
	color: inherit !important;
}

mark {
	border-radius: 3px;
	padding-inline: 0.15em;
}

kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	padding: 0.1em 0.45em;
	border: 1px solid var(--shinka-border);
	border-bottom-width: 2px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base-2);
}

/* Templates remove the root block gap around <main> so sections can butt
   against the sticky header and footer. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Header */

/* The header always stacks above page content so dropdowns and the drawer
   are never painted under later sections. */
.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 100;
}

.shinka-header-sticky .wp-site-blocks > header.wp-block-template-part,
.shinka-header-shrink .wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar.shinka-header-sticky .wp-site-blocks > header.wp-block-template-part,
.admin-bar.shinka-header-shrink .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {

	/* The admin bar scrolls away below 600px. */
	.admin-bar.shinka-header-sticky .wp-site-blocks > header.wp-block-template-part,
	.admin-bar.shinka-header-shrink .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.shinka-header {
	padding-block: var(--wp--preset--spacing--30);
	background: var(--wp--custom--header--background);
	-webkit-backdrop-filter: saturate(1.4) blur(var(--wp--custom--header--blur, 14px));
	backdrop-filter: saturate(1.4) blur(var(--wp--custom--header--blur, 14px));
	border-bottom: 1px solid transparent;
	transition: border-color var(--shinka-ease), box-shadow var(--shinka-ease), background-color var(--shinka-ease), color var(--shinka-ease), padding var(--shinka-ease);
}

/* backdrop-filter makes the header the containing block for position:fixed
   descendants, which would trap core's full-screen navigation overlay inside
   the header bar. Drop the blur while the drawer is open. */
.shinka-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.shinka-header .wp-block-site-title,
.shinka-header .wp-block-button__link {
	white-space: nowrap;
}

/* Header slots (Shinka Kit, REQ-HDR-4): search, social icons, account link,
   scheme toggle and a call to action arrive as one group after the
   navigation, so a layout gains a single flex item wherever it puts its nav. */
.shinka-header-slots {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

/* A header row that spreads its items (logo | nav) must keep the nav and the
   slots together on the right instead of scattering them across the bar. */
.shinka-header .is-content-justification-space-between > .wp-block-navigation:has(+ .shinka-header-slots) {
	margin-inline-start: auto;
}

.shinka-header-slots .wp-block-button__link {
	padding: 0.55em 1.1em;
}

/* Phones: the slots take their own line under the identity row, so the call to
   action is never cut off. Social icons and the account link stay out of the
   bar there (both are in the footer); search, scheme and the CTA remain. */
@media (max-width: 600px) {

	.shinka-header .is-layout-flex:has(> .shinka-header-slots) {
		flex-wrap: wrap;
	}

	/* Wrap only when the slots do not fit beside the menu button: a lone
	   scheme toggle stays on the identity row and keeps the header short. */
	.shinka-header-slots {
		margin-inline-start: auto;
		gap: var(--wp--preset--spacing--10);
	}

	.shinka-header-slots :is(.shinka-header-social, .shinka-header-account) {
		display: none;
	}

	/* A wrapped slot line must still shrink with the header (REQ-HDR-2): the
	   row gap and the controls tighten, not just the header padding. */
	.shinka-header-shrunk .shinka-header-shrink .is-layout-flex:has(> .shinka-header-slots) {
		row-gap: 0.25rem;
	}

	.shinka-header-shrunk .shinka-header-shrink .shinka-header-slots :is(.wp-block-button__link, .wp-block-search__button) {
		padding-block: 0.3em;
	}
}

.shinka-scrolled .shinka-header {
	border-bottom-color: color-mix(in srgb, var(--shinka-border) 85%, transparent);
	box-shadow: 0 10px 30px -22px rgb(0 0 0 / 0.45);
}

/* Transparent header that floats over a full-bleed hero (Landing template, or
   the Kit's page/site behaviour). Only with JavaScript, which turns it solid
   once the page scrolls; without JS it stays an ordinary header in the flow. */
.shinka-js .shinka-header-transparent .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
}

.shinka-js .admin-bar.shinka-header-transparent .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

html.shinka-js:not(.shinka-scrolled) .shinka-header-transparent .shinka-header {
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent) 60%, transparent 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

.shinka-header-shrunk .shinka-header-shrink .shinka-header {
	padding-block: var(--wp--preset--spacing--10);
}

@media (max-width: 600px) {

	.shinka-js .admin-bar.shinka-header-transparent .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Header scheme (REQ-HDR-2, REQ-PGC-1). Re-points every preset colour inside
   the header at one scheme's generated set, whatever the page scheme is:
    - body.shinka-header-scheme-dark|light — per-page/site choice (Shinka Kit);
    - header[data-shinka-scheme="dark|light"] — the Kit's section-swap script;
    - an unscrolled transparent header defaults to the dark set, so its text
      reads over the hero it floats on (unless the swap script measured the
      section under it). */
.shinka-header-scheme-dark .wp-site-blocks > header.wp-block-template-part,
html.shinka-js:not(.shinka-scrolled) .shinka-header-transparent:not(.shinka-header-scheme-light) .wp-site-blocks > header.wp-block-template-part:not([data-shinka-scheme]),
body .wp-site-blocks > header.wp-block-template-part[data-shinka-scheme="dark"] {
	--wp--preset--color--primary: var(--wp--custom--scheme--dark--primary);
	--wp--preset--color--on-primary: var(--wp--custom--scheme--dark--on-primary);
	--wp--preset--color--secondary: var(--wp--custom--scheme--dark--secondary);
	--wp--preset--color--accent: var(--wp--custom--scheme--dark--accent);
	--wp--preset--color--base: var(--wp--custom--scheme--dark--base);
	--wp--preset--color--base-2: var(--wp--custom--scheme--dark--base-2);
	--wp--preset--color--surface: var(--wp--custom--scheme--dark--surface);
	--wp--preset--color--contrast: var(--wp--custom--scheme--dark--contrast);
	--wp--preset--color--contrast-2: var(--wp--custom--scheme--dark--contrast-2);
	--wp--preset--color--border: var(--wp--custom--scheme--dark--border);
	--wp--preset--color--success: var(--wp--custom--scheme--dark--success);
	--wp--preset--color--warning: var(--wp--custom--scheme--dark--warning);
	--wp--preset--color--danger: var(--wp--custom--scheme--dark--danger);
	--wp--preset--color--info: var(--wp--custom--scheme--dark--info);
	--shinka-primary: var(--wp--preset--color--primary);
	--shinka-secondary: var(--wp--preset--color--secondary);
	--shinka-border: var(--wp--preset--color--border);
	--shinka-surface: var(--wp--preset--color--surface);
	--shinka-tint: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	--shinka-primary-strong: color-mix(in srgb, var(--wp--preset--color--primary) 78%, var(--wp--preset--color--contrast));
	--wp--custom--header--background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	color-scheme: dark;
	color: var(--wp--preset--color--contrast);
}

.shinka-header-scheme-light .wp-site-blocks > header.wp-block-template-part,
body .wp-site-blocks > header.wp-block-template-part[data-shinka-scheme="light"] {
	--wp--preset--color--primary: var(--wp--custom--scheme--light--primary);
	--wp--preset--color--on-primary: var(--wp--custom--scheme--light--on-primary);
	--wp--preset--color--secondary: var(--wp--custom--scheme--light--secondary);
	--wp--preset--color--accent: var(--wp--custom--scheme--light--accent);
	--wp--preset--color--base: var(--wp--custom--scheme--light--base);
	--wp--preset--color--base-2: var(--wp--custom--scheme--light--base-2);
	--wp--preset--color--surface: var(--wp--custom--scheme--light--surface);
	--wp--preset--color--contrast: var(--wp--custom--scheme--light--contrast);
	--wp--preset--color--contrast-2: var(--wp--custom--scheme--light--contrast-2);
	--wp--preset--color--border: var(--wp--custom--scheme--light--border);
	--wp--preset--color--success: var(--wp--custom--scheme--light--success);
	--wp--preset--color--warning: var(--wp--custom--scheme--light--warning);
	--wp--preset--color--danger: var(--wp--custom--scheme--light--danger);
	--wp--preset--color--info: var(--wp--custom--scheme--light--info);
	--shinka-primary: var(--wp--preset--color--primary);
	--shinka-secondary: var(--wp--preset--color--secondary);
	--shinka-border: var(--wp--preset--color--border);
	--shinka-surface: var(--wp--preset--color--surface);
	--shinka-tint: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	--shinka-primary-strong: color-mix(in srgb, var(--wp--preset--color--primary) 78%, var(--wp--preset--color--contrast));
	--wp--custom--header--background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	color-scheme: light;
	color: var(--wp--preset--color--contrast);
}

.shinka-account-link a {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1.5px solid color-mix(in srgb, currentcolor 38%, transparent);
	border-radius: var(--wp--custom--radius--button);
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.shinka-account-link a:hover {
	border-color: currentcolor;
}

/* ---------------------------------------------------------------- Navigation */

/* Active page and ancestor (REQ-NAV-1): colour plus an underline bar that
   also animates in on hover for top-level links. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--shinka-primary);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.3em;
	height: 2px;
	border-radius: 2px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--shinka-ease);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, [aria-current="page"])::after,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Dropdowns: a surface panel that eases in. Core toggles visibility/size; the
   transform animates on top and waits for visibility before resetting. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--shinka-border) !important;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
	padding: 0.4rem;
	background: var(--shinka-surface);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	transform: translateY(0.4rem);
	transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	transform: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.5rem 0.75rem;
	transition: background-color var(--shinka-ease), color var(--shinka-ease);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--shinka-tint);
}

.wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	transition: transform var(--shinka-ease);
}

/* Wide dropdown (REQ-NAV-2): Styles → "Wide" on a Submenu block. A two-column
   grid with link descriptions and optional inline-image icons in labels. */
.wp-block-navigation .wp-block-navigation-submenu.is-style-wide > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	flex-direction: column;
	align-items: stretch;
}

.wp-block-navigation .wp-block-navigation-submenu.is-style-wide > .wp-block-navigation__submenu-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	padding: 0.6rem;
}

.wp-block-navigation .is-style-wide.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .is-style-wide.has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .is-style-wide.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: min(34rem, calc(100vw - 2rem));
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	height: 100%;
	padding: 0.65rem 0.8rem;
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-weight: 600;
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__label img {
	width: 1.25em;
	height: 1.25em;
	margin-inline-end: 0.5em;
	vertical-align: -0.2em;
	object-fit: contain;
}

.wp-block-navigation .is-style-wide > .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	margin-block-start: 0.15rem;
	color: var(--shinka-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
}

/* Mobile drawer (REQ-HDR-5). Shinka's navigation-overlay part provides the
   panel; core provides the focus trap, Escape and focus return (spike S-2). */
.wp-block-navigation__responsive-container.is-menu-open {
	animation: shinka-drawer-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: var(--wp--preset--font-size--large);
	gap: 0.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	transform: none;
	border: 0 !important;
	box-shadow: none;
	background: transparent;
	padding: 0.25rem 0 0 1rem;
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-navigation__responsive-container.is-menu-open .is-style-wide > .wp-block-navigation__submenu-container {
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
}

.shinka-nav-overlay {
	min-height: 100%;
	min-height: 100dvh;
}

.shinka-nav-overlay .wp-block-navigation__container {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.shinka-nav-overlay .wp-block-navigation-overlay-close {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: inherit;
	transition: background-color var(--shinka-ease);
}

.shinka-nav-overlay .wp-block-navigation-overlay-close:hover {
	background: color-mix(in srgb, currentcolor 10%, transparent);
}

@keyframes shinka-drawer-in {

	from {
		opacity: 0;
		transform: translateX(8%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------- Breadcrumbs */

/* REQ-NAV-4: core Breadcrumbs. Core renders nav > ol with aria-current on the
   last item and no schema (spike S-3); Shinka Kit adds BreadcrumbList JSON-LD
   only when no SEO plugin is active. */
.wp-block-breadcrumbs {
	color: var(--shinka-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

.wp-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	color: var(--shinka-primary);
	text-decoration: underline;
}

.wp-block-breadcrumbs li:not(:last-child)::after {
	opacity: 0.55;
}

.wp-block-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ---------------------------------------------------------------- Footer */

.shinka-footer a:not(.wp-element-button) {
	color: inherit;
	text-decoration: none;
}

.shinka-footer a:not(.wp-element-button):hover {
	color: var(--shinka-primary);
}

.shinka-footer .shinka-muted,
.shinka-muted {
	color: var(--shinka-muted);
}

/* ---------------------------------------------------------------- Buttons */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--shinka-ease), color var(--shinka-ease), border-color var(--shinka-ease), box-shadow var(--shinka-ease), transform var(--shinka-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -14px color-mix(in srgb, currentcolor 60%, transparent);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Unconfigured links (inc/links.php): a button without a link and a social
   icon without a URL render nothing, so a row left empty is hidden too. Only
   on the front end: in the editor the empty block keeps its appender. */
.wp-site-blocks .wp-block-buttons:not(:has(.wp-block-button)),
.wp-site-blocks .wp-block-social-links:not(:has(.wp-social-link)) {
	display: none;
}

/* Outline: transparent, inherits the section's text colour so it works on
   light, dark, inverted and primary backgrounds alike. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1.5px solid color-mix(in srgb, currentcolor 38%, transparent);
	padding: calc(0.8em - 1.5px) calc(1.45em - 1.5px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentcolor 8%, transparent);
	border-color: currentcolor;
	color: inherit;
}

.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: transparent;
	color: inherit;
	padding-inline: 0.7em;
	box-shadow: none;
}

.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentcolor 10%, transparent);
	color: inherit;
	transform: none;
}

.wp-block-button.is-style-arrow > .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 0.55em;
	transition: transform var(--shinka-ease);
}

.wp-block-button.is-style-arrow > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- Text styles */

p.is-style-eyebrow {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--shinka-primary);
}

:where([class*="is-style-section-primary"]) p.is-style-eyebrow {
	color: var(--shinka-muted);
}

/* Over a Cover overlay the block sets its own text colour; the eyebrow follows
   it. Inside a callout the eyebrow uses the tint-safe strong primary. */
.wp-block-cover p.is-style-eyebrow {
	color: inherit;
}

:where([class*="is-style-callout-"]) p.is-style-eyebrow {
	color: var(--shinka-primary-strong);
}

p.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--shinka-muted);
}

p.is-style-badge {
	width: fit-content;
	padding: 0.35em 0.9em;
	border: 1px solid color-mix(in srgb, var(--shinka-primary) 30%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--shinka-tint);
	color: var(--shinka-primary-strong);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
}

p.is-style-badge.has-text-align-center {
	margin-inline: auto;
}

.is-style-gradient-text {
	background: linear-gradient(120deg, var(--shinka-primary) 0%, var(--shinka-secondary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------------------------------------------------------------- Surfaces */

.is-style-card {
	transition: transform var(--shinka-ease), box-shadow var(--shinka-ease), border-color var(--shinka-ease);
}

.shinka-hover-lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
	border-color: color-mix(in srgb, var(--shinka-primary) 40%, var(--shinka-border));
}

.shinka-featured {
	border-color: var(--shinka-primary) !important;
	box-shadow: var(--wp--preset--shadow--glow) !important;
}

.wp-block-group.is-style-glass {
	background: color-mix(in srgb, var(--shinka-surface) 62%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--40);
}

/* HUD panel: RPG status-window frame with corner brackets and scanlines. */
.wp-block-group.is-style-hud {
	position: relative;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--shinka-primary) 38%, transparent);
	border-radius: var(--wp--custom--radius--sm);
	background:
		repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--shinka-primary) 3.5%, transparent) 3px 4px),
		linear-gradient(180deg, color-mix(in srgb, var(--shinka-primary) 8%, var(--shinka-surface)) 0%, var(--shinka-surface) 100%);
	box-shadow:
		inset 0 0 40px -12px color-mix(in srgb, var(--shinka-primary) 30%, transparent),
		0 0 36px -14px color-mix(in srgb, var(--shinka-primary) 55%, transparent);
}

.wp-block-group.is-style-hud::before,
.wp-block-group.is-style-hud::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid var(--shinka-primary);
	pointer-events: none;
}

.wp-block-group.is-style-hud::before {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.wp-block-group.is-style-hud::after {
	right: -1px;
	bottom: -1px;
	border-left: 0;
	border-top: 0;
}

/* Progress meter: a Group (row) holding one Spacer whose width = progress. */
.wp-block-group.is-style-meter {
	height: 0.625rem;
	min-height: 0;
	padding: 0 !important;
	gap: 0;
	flex-wrap: nowrap;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, currentcolor 13%, transparent);
}

.wp-block-group.is-style-meter > * {
	height: 100% !important;
	margin: 0 !important;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--shinka-primary) 0%, var(--shinka-secondary) 100%);
	box-shadow: 0 0 14px color-mix(in srgb, var(--shinka-primary) 55%, transparent);
}

/* ---------------------------------------------------------------- Media */

/* A full-width Cover keeps the page's side gutters (the root padding) instead
   of core's 1em, so its content lines up with the header and the sections
   around it; padding set on the block (inline) still wins. */
.wp-block-cover.alignfull {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
}

.wp-block-image.is-style-frame img {
	padding: 0.5rem;
	background: var(--shinka-surface);
	border: 1px solid var(--shinka-border);
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-image.is-style-glow img {
	box-shadow: var(--wp--preset--shadow--glow);
}

.shinka-float {
	animation: shinka-float 7s ease-in-out infinite;
}

@keyframes shinka-float {

	0%,
	100% {
		transform: translateY(0);
	}

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

.shinka-logos img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: opacity var(--shinka-ease), filter var(--shinka-ease);
}

.shinka-logos img:hover {
	filter: none;
	opacity: 1;
}

/* ---------------------------------------------------------------- Lists */

ul.is-style-checklist {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-checklist > li {
	position: relative;
	padding-inline-start: 2em;
}

ul.is-style-checklist > li + li {
	margin-block-start: 0.55em;
}

ul.is-style-checklist > li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	display: grid;
	place-items: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: var(--shinka-tint);
	color: var(--shinka-primary);
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1;
}

ol.is-style-steps {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: shinka-step;
}

ol.is-style-steps > li {
	position: relative;
	min-height: 2.25rem;
	padding-inline-start: 3.1rem;
	counter-increment: shinka-step;
}

ol.is-style-steps > li + li {
	margin-block-start: 1.1rem;
}

ol.is-style-steps > li::before {
	content: counter(shinka-step);
	position: absolute;
	inset-inline-start: 0;
	top: -0.15em;
	display: grid;
	place-items: center;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 50%;
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--custom--font--heading);
	font-size: 0.9rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------- Blocks */

hr.wp-block-separator.is-style-gradient {
	height: 2px;
	border: 0;
	background: linear-gradient(90deg, transparent 0%, var(--shinka-primary) 25%, var(--shinka-secondary) 75%, transparent 100%);
	opacity: 1;
}

.wp-block-quote.is-style-testimonial {
	position: relative;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--40) + 1.75rem) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--shinka-surface);
	box-shadow: var(--wp--preset--shadow--sm);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
}

.wp-block-quote.is-style-testimonial::before {
	content: "“";
	position: absolute;
	top: 0.6rem;
	inset-inline-start: var(--wp--preset--spacing--40);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	color: var(--shinka-primary);
}

.wp-block-quote.is-style-testimonial cite {
	display: block;
	margin-block-start: 1rem;
	color: var(--shinka-muted);
}

/* Details → accordion. Also powers "reveal the answer" knowledge checks. */
.wp-block-details {
	border-bottom: 1px solid var(--shinka-border);
	padding-block: 1rem;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1;
	color: var(--shinka-primary);
	transition: transform var(--shinka-ease);
}

.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-block-start: 0.75rem;
}

.wp-block-details.is-style-card {
	padding: 1rem 1.25rem;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--shinka-surface);
}

.wp-block-details.is-style-card + .wp-block-details.is-style-card {
	margin-block-start: 0.75rem;
}

/* Core Accordion (REQ-DS-11). Core animates the icon and panel height; Shinka
   adds dividers, a tinted icon, hover colour and a visible focus ring. */
.wp-block-accordion {
	border-block-start: 1px solid var(--shinka-border);
}

.wp-block-accordion > .wp-block-accordion-item {
	margin-block-start: 0;
	border-block-end: 1px solid var(--shinka-border);
}

.wp-block-accordion-heading {
	margin: 0;
}

.wp-block-accordion-heading__toggle {
	gap: 1rem;
	padding-block: 1.05rem;
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 600;
	transition: color var(--shinka-ease);
}

.wp-block-accordion-heading__toggle:hover {
	color: var(--shinka-primary);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--shinka-primary);
	outline-offset: 2px;
}

.wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--shinka-tint);
	color: var(--shinka-primary-strong);
	font-size: 1.15em;
	line-height: 1;
}

.wp-block-accordion-panel:not([hidden]) {
	padding-block-end: 1.1rem;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
		animation: shinka-fade-down 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}

/* Core Tabs (REQ-DS-11): a hairline tab list, primary active indicator,
   hover tint, visible focus and a short panel fade. Many tabs scroll inside
   the list instead of widening the page on small screens. */
.wp-block-tab-list {
	flex-wrap: nowrap;
	gap: 0.25rem;
	overflow-x: auto;
	border-block-end: 1px solid var(--shinka-border);
	scrollbar-width: thin;
}

.wp-block-tab-list button[role="tab"] {
	flex: none;
	border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0 0;
	color: var(--shinka-muted);
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--shinka-ease), background-color var(--shinka-ease);
}

.wp-block-tab-list button[role="tab"]:hover {
	background: color-mix(in srgb, currentcolor 7%, transparent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-tab-list button[role="tab"][aria-selected="true"] {
	color: var(--shinka-primary);
}

.wp-block-tab-list button[role="tab"][aria-selected="true"]::before {
	bottom: 0;
	border-bottom-width: 3px;
	border-radius: 3px 3px 0 0;
}

.wp-block-tab-list button[role="tab"]:focus-visible {
	outline: 2px solid var(--shinka-primary);
	outline-offset: -2px;
}

.wp-block-tab-panel {
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-tab-panel:focus-visible {
	border-radius: var(--wp--custom--radius--sm);
	outline: 2px solid var(--shinka-primary);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-tab-panel:not([hidden]) {
		animation: shinka-fade 220ms ease both;
	}
}

@keyframes shinka-fade {

	from {
		opacity: 0;
	}
}

@keyframes shinka-fade-down {

	from {
		opacity: 0;
		transform: translateY(-0.35rem);
	}
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--shinka-border);
	padding: 0.7em 0.9em;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--shinka-primary);
}

.wp-block-table th {
	background: var(--wp--preset--color--base-2);
	font-weight: 600;
	text-align: start;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: color-mix(in srgb, var(--wp--preset--color--base-2) 70%, transparent);
}

.wp-block-table.is-style-stripes :where(th, td) {
	border-color: transparent;
}

.wp-block-pullquote p {
	margin-block: 0;
}

.wp-block-code code {
	white-space: pre-wrap;
}

/* Post cards in query loops */
.shinka-post-card .wp-block-post-featured-image {
	overflow: hidden;
}

.shinka-post-card .wp-block-post-featured-image img {
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shinka-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.035);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---------------------------------------------------------------- Forms */

:where(label, .ff-el-input--label label, .gfield_label) {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"], [type="hidden"]), textarea, select),
body .fluentform .ff-el-form-control,
body .wpcf7 .wpcf7-form-control:not(.wpcf7-submit),
body .gform_wrapper :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"]), textarea, select) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.9em;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--shinka-surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: border-color var(--shinka-ease), box-shadow var(--shinka-ease), background-color var(--shinka-ease);
}

:where(input, textarea, select):focus,
body .fluentform .ff-el-form-control:focus,
body .wpcf7 .wpcf7-form-control:focus {
	border-color: var(--shinka-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--shinka-primary) 22%, transparent);
	outline: none;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--shinka-primary);
}

input[type="checkbox"][role="switch"] {
	appearance: none;
	position: relative;
	width: 2.8rem;
	height: 1.55rem;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base-2);
	vertical-align: middle;
	transition: background-color var(--shinka-ease), border-color var(--shinka-ease);
}

input[type="checkbox"][role="switch"]::before {
	content: "";
	position: absolute;
	top: 0.18rem;
	left: 0.18rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast-2);
	transition: transform var(--shinka-ease), background-color var(--shinka-ease);
}

input[type="checkbox"][role="switch"]:checked {
	border-color: var(--shinka-primary);
	background: var(--shinka-primary);
}

input[type="checkbox"][role="switch"]:checked::before {
	background: var(--wp--preset--color--on-primary);
	transform: translateX(1.25rem);
}

input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.45rem;
	border: 1px dashed var(--shinka-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base-2);
	color: var(--shinka-muted);
	font: inherit;
}

input[type="file"]::file-selector-button {
	margin-inline-end: 0.75rem;
	padding: 0.55em 0.8em;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fluentform .ff-el-group,
.wpcf7-form > p,
.gform_wrapper .gfield {
	margin-block: 0 1.15rem;
}

:where(form) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class]), input[type="reset"]:not([class])),
.fluentform .ff-btn-submit,
.wpcf7 input.wpcf7-submit,
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button) {
	padding: 0.75em 1.15em;
	border: 1px solid var(--shinka-primary);
	border-radius: var(--wp--custom--radius--button);
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform var(--shinka-ease), box-shadow var(--shinka-ease), opacity var(--shinka-ease);
}

:where(form) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])):hover,
.fluentform .ff-btn-submit:hover,
.wpcf7 input.wpcf7-submit:hover,
.gform_wrapper :where(.gform_button, .gform_next_button, .gform_previous_button):hover {
	box-shadow: var(--wp--preset--shadow--sm);
	transform: translateY(-1px);
}

:where(input, textarea, select)[aria-invalid="true"],
.ff-el-is-error .ff-el-form-control,
.wpcf7 .wpcf7-not-valid,
.gform_wrapper .gfield_error :where(input, textarea, select) {
	border-color: var(--wp--preset--color--danger) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--danger) 18%, transparent);
}

:where(.ff-el-is-error .text-danger, .wpcf7-not-valid-tip, .gfield_validation_message, .validation_message) {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 650;
}

:where(.ff-message-success, .gform_confirmation_message, .gform_confirmation_wrapper),
.wpcf7 form.sent .wpcf7-response-output {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--success);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--success) 10%, var(--shinka-surface));
}

:where(.ff-errors-in-stack, .gform_validation_errors),
.wpcf7 form.invalid .wpcf7-response-output {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--danger);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--shinka-surface));
}

:where(.ff-btn-loading, .wpcf7-spinner, .gform_ajax_spinner) {
	color: var(--shinka-primary);
	accent-color: var(--shinka-primary);
}

:where(.ff-step-titles, .gf_page_steps) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--40);
}

:where(.ff-step-title, .gf_step) {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--shinka-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

:where(.ff-step-active, .gf_step_active) {
	border-color: var(--shinka-primary);
	color: var(--shinka-primary);
}

:where(.ff-el-progress, .gf_progressbar) {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base-2);
}

:where(.ff-el-progress-bar, .gf_progressbar_percentage) {
	background: var(--shinka-primary);
	color: var(--wp--preset--color--on-primary);
}

/* Fluent Forms exposes separate label and input wrappers, so floating labels
   are safe as an explicit opt-in. CF7's stock label is a raw wrapping text
   node; Gravity Forms remains documented-only until a licensed lab copy. */
.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) {
	position: relative;
}

.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) .ff-el-input--label {
	position: absolute;
	z-index: 1;
	top: 0.72rem;
	left: 0.72rem;
	padding-inline: 0.22rem;
	background: var(--shinka-surface);
	pointer-events: none;
	transition: color var(--shinka-ease), font-size var(--shinka-ease), transform var(--shinka-ease);
}

.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) .ff-el-form-control {
	padding-block: 1.25rem 0.45rem;
}

.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(select)) .ff-el-form-control::placeholder {
	color: transparent;
}

.shinka-floating-labels .fluentform .ff-el-group:focus-within .ff-el-input--label,
.shinka-floating-labels .fluentform .ff-el-group:has(.ff-el-form-control:not(:placeholder-shown)) .ff-el-input--label {
	color: var(--shinka-primary);
	font-size: 0.68rem;
	transform: translateY(-0.62rem);
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--button) !important;
}

/* ---------------------------------------------------------------- Long-form */

/* REQ-DS-7: rhythm, lists, quotes, code, tables and footnotes for articles.
   Scoped to direct children of post content so pattern-built pages keep
   their own section spacing. */
.wp-block-post-content > :where(h2, h3, h4, h5, h6) {
	margin-block-start: 2em;
}

.wp-block-post-content > :where(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.65em;
}

.wp-block-post-content > :where(ul, ol):not([class*="is-style-"]),
.wp-block-post-content :where(li) > :where(ul, ol) {
	padding-inline-start: 1.35em;
}

/* Prose rhythm only: lists that are part of a Shinka Kit block's own UI
   (section navigation, share buttons) lay out in rows and keep no gap. */
.wp-block-post-content :where(ul, ol):not([class*="is-style-"], [class*="wp-block-shinka-"] *) > li + li {
	margin-block-start: 0.4em;
}

.wp-block-post-content :where(ul, ol):not([class*="is-style-"]) > li::marker {
	color: var(--shinka-primary);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wp-block-post-content :where(li) > :where(ul, ol) {
	margin-block: 0.4em 0;
}

.wp-block-quote:not(.is-style-testimonial) {
	font-style: normal;
}

.wp-block-quote:not(.is-style-testimonial) cite,
.wp-block-pullquote cite {
	display: block;
	margin-block-start: 0.6em;
	color: var(--shinka-muted);
}

.wp-block-pullquote {
	text-wrap: balance;
}

:where(p, li, td, th, figcaption, dd) > code,
:where(p, li, td, th, figcaption, dd) > :where(a, strong, em) > code {
	padding: 0.1em 0.38em;
	border-radius: var(--wp--custom--radius--sm);
	background: color-mix(in srgb, currentcolor 9%, transparent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
}

.wp-block-preformatted {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--shinka-border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base-2);
}

.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-embed figcaption {
	margin-block-start: 0.6em;
	color: var(--shinka-muted);
}

mark:not([class]) {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent);
	color: inherit;
}

sup.fn a,
sup[data-fn] a {
	padding-inline: 0.12em;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-footnotes {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	padding-inline-start: 1.35em;
	border-block-start: 1px solid var(--shinka-border);
	color: var(--shinka-muted);
}

.wp-block-footnotes li + li {
	margin-block-start: 0.35em;
}

.wp-block-footnotes li:target {
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------- Blog */

/* Archive loops (REQ-TPL-2): parts/loop.html (grid), loop-list.html and
   loop-magazine.html. Cards share one treatment; media keeps a fixed ratio so
   the grid never shifts while images load. */
.shinka-loop .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.shinka-loop .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

.shinka-loop .wp-block-post-featured-image :where(img, a) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shinka-loop .wp-block-post-title {
	margin: 0;
}

/* Category terms use compact eyebrow type, but every linked term still needs
   a complete WCAG 2.2 target rather than a 16px-high text-only hit area. */
.shinka-loop .wp-block-post-terms.is-style-eyebrow a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.shinka-loop--list .wp-block-post {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--shinka-border);
}

.shinka-loop--list .wp-block-post-featured-image {
	flex: 0 0 min(15rem, 34%);
}

.shinka-loop--list .shinka-loop__body {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {

	.shinka-loop--list .wp-block-post {
		flex-direction: column;
	}

	.shinka-loop--list .wp-block-post-featured-image {
		flex-basis: auto;
		width: 100%;
	}
}

/* Magazine: the newest post on the first page spans two columns, and two
   rows when it has an image to fill them. Preset font-size classes are
   !important in core, so the featured title needs the same weight. */
@media (min-width: 782px) {

	body:not(.paged) .shinka-loop--magazine .wp-block-post-template > .wp-block-post:first-child {
		grid-column: span 2;
	}

	body:not(.paged) .shinka-loop--magazine .wp-block-post-template > .wp-block-post:first-child:has(.wp-block-post-featured-image) {
		grid-row: span 2;
	}

	body:not(.paged) .shinka-loop--magazine .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}
}

.shinka-author-box {
	gap: var(--wp--preset--spacing--30);
}

.shinka-author-box .wp-block-post-author-name {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.shinka-author-box .wp-block-post-author-biography {
	color: var(--shinka-muted);
}

/* Related posts hide themselves when no post shares a term. */
.shinka-related-posts:not(:has(.wp-block-post)) {
	display: none;
}

.shinka-sticky {
	position: sticky;
	top: var(--shinka-sticky-top, 6.5rem);
	align-self: flex-start;
}

.admin-bar .shinka-sticky {
	top: calc(var(--shinka-sticky-top, 6.5rem) + var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 781px) {

	.shinka-sticky {
		position: static;
	}
}

/* ---------------------------------------------------------------- Comments */

.shinka-comments .wp-block-comment-template {
	padding-inline-start: 0;
	list-style: none;
}

.shinka-comments .wp-block-comment-template ol {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--shinka-border);
	list-style: none;
}

.shinka-comments .wp-block-comment-template li {
	margin-block-start: var(--wp--preset--spacing--30);
}

.shinka-comments .wp-block-comment-content {
	margin-block: 0.4rem;
}

.shinka-comments .comment-form :where(input:not([type="checkbox"], [type="submit"]), textarea) {
	margin-block-start: 0.35rem;
}

/* ---------------------------------------------------------------- Announcement */

/* REQ-HDR-3: parts/announcement.html. The dismiss button hides the bar and
   remembers that text in localStorage (theme/assets/js/shinka.js); the
   pre-paint bootstrap hides remembered bars before first paint. */
.shinka-announcement {
	padding-block: 0.55rem;
	text-align: center;
}

.shinka-announcement a {
	color: inherit;
	font-weight: 700;
}

.shinka-announcement .shinka-announcement__dismiss .wp-block-button__link {
	padding: 0.25em 0.6em;
	color: inherit;
	font-size: var(--wp--preset--font-size--x-small);
}

.shinka-announcement-off .shinka-announcement,
.shinka-announcement[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- Feedback */

/* REQ-DS-8 components for Shinka Kit's interactive blocks: a loading spinner
   (also on any busy button), a toast and a copy-confirmed state. */
.shinka-spinner,
:where(.wp-block-button__link, button)[aria-busy="true"]::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
	border-block-start-color: currentcolor;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: shinka-spin 700ms linear infinite;
}

:where(.wp-block-button__link, button)[aria-busy="true"]::after {
	margin-inline-start: 0.55em;
}

.shinka-toast {
	position: fixed;
	inset-inline: 0;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 1000;
	width: fit-content;
	max-width: calc(100vw - 2rem);
	margin-inline: auto;
	padding: 0.7rem 1.1rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--lg);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	animation: shinka-fade-up 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.shinka-toast[hidden] {
	display: none;
}

/* In-flow toast for demos and inline confirmations. */
.shinka-toast.is-inline {
	position: static;
	margin-inline: 0;
	animation: none;
}

.is-copied {
	color: var(--wp--preset--color--success) !important;
}

.is-copied::before {
	content: "✓ ";
}

@keyframes shinka-spin {

	to {
		transform: rotate(1turn);
	}
}

@keyframes shinka-fade-up {

	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/* ---------------------------------------------------------------- Portal */

.shinka-portal__sidebar {
	position: sticky;
	top: 6.5rem;
	align-self: flex-start;
}

.admin-bar .shinka-portal__sidebar {
	top: calc(6.5rem + var(--wp-admin--admin-bar--height, 32px));
}

.shinka-portal__sidebar .wp-block-navigation__container {
	width: 100%;
	gap: 0.15rem;
}

.shinka-portal__sidebar .wp-block-navigation-item {
	width: 100%;
}

.shinka-portal__sidebar .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color var(--shinka-ease), color var(--shinka-ease);
}

.shinka-portal__sidebar .wp-block-navigation-item__content:hover,
.shinka-portal__sidebar .current-menu-item > .wp-block-navigation-item__content {
	background: var(--shinka-tint);
	color: var(--shinka-primary);
}

@media (max-width: 781px) {

	.shinka-portal__sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------- Motion */

.shinka-scheme-transition,
.shinka-scheme-transition * {
	transition-property: background-color, border-color, color, fill, stroke;
	transition-duration: 250ms;
}

.shinka-js .shinka-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--shinka-delay, 0ms);
}

.shinka-js .shinka-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.shinka-js .shinka-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Never hide content while editing. */
.editor-styles-wrapper .shinka-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------------------------------------------------------------- Utilities */

.shinka-nowrap {
	white-space: nowrap;
}

.shinka-balance :where(h1, h2, h3, h4, p),
:where(h1, h2, h3).wp-block-heading {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.shinka-tabular {
	font-variant-numeric: tabular-nums;
}

@media print {

	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > footer.wp-block-template-part {
		display: none;
	}
}