/*
Theme Name: Viva
Theme URI: https://smartinnovationnorway.com/
Gitea Theme URI: https://gitea.sinter.ai/comms/wp-viva-theme
Primary Branch: main
Description: Block child theme of Twenty Twenty-Five for the Viva site.
Author: Smart Innovation Norway
Author URI: https://smartinnovationnorway.com/
Template: twentytwentyfive
Version: 0.7.2
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viva
*/

/* Prefer theme.json for design tokens (colors, fonts, spacing).
   This file is only for what theme.json can't express — mostly block styles. */

/* --- VIVA design-system effect tokens.
   Colors, fonts, spacing and the type scale live in theme.json; radii,
   warm shadows and motion have no theme.json equivalent, so they live here.
   Values mirror the design system's tokens/effects.css. --- */
:root {
	--viva-radius-sm: 8px;
	--viva-radius-md: 12px;
	--viva-radius-card: 16px;
	--viva-radius-lg: 18px;
	--viva-radius-pill: 999px;

	/* Shadows are cocoa-tinted, never neutral gray. */
	--viva-shadow-sm: 0 2px 6px rgba(36, 28, 16, 0.08), 0 1px 2px rgba(36, 28, 16, 0.06);
	--viva-shadow-md: 0 6px 18px rgba(36, 28, 16, 0.10), 0 2px 6px rgba(36, 28, 16, 0.06);
	--viva-shadow-lg: 0 14px 40px rgba(36, 28, 16, 0.14), 0 4px 12px rgba(36, 28, 16, 0.08);
	--viva-shadow-ember: 0 8px 22px rgba(234, 90, 43, 0.30);

	--viva-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--viva-dur-fast: 120ms;
	--viva-dur-base: 200ms;

	/* Focus is ember-400 — brighter than the ember-600 action colour. */
	--viva-focus: #ea5a2b;
}

/* --- Focus: a page-coloured gap then an ember ring. Always visible.
   The design system specifies 3px + 5px; at that weight the ring reads as an
   error state on a wide input, so it is tightened to 2px + 3px. Still an
   unmissable 5px double ring, and it never reaches for `outline: none` alone. --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--wp--preset--color--cream),
		0 0 0 5px var(--viva-focus);
}

/* --- Site header: sticky, with the logo replacing the site-title text.
   The background URL is relative to this stylesheet, so it resolves
   correctly whatever the theme folder is named. --- */
.wp-block-group.viva-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* The translucent blur lives on a pseudo-element, NOT on the header itself.
   An element carrying backdrop-filter becomes the containing block for its
   position:fixed descendants, and the navigation overlay is exactly that —
   putting the filter on .viva-header clipped the full-screen menu to the
   header's own box. The ::before has no descendants, so it cannot trap
   anything. Same visual result, no containing block. */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	.wp-block-group.viva-header {
		/* WordPress emits preset background classes with !important. */
		background-color: transparent !important;
	}

	.wp-block-group.viva-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(248, 241, 226, 0.82);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

/* --- Navigation: collapse to the overlay long before the row can wrap.
   Core hardcodes the switch at 600px, but seven top-level items plus the
   logo, search and newsletter button need roughly 1250px on one line, so
   everything between 600px and desktop wrapped into two or three rows. --- */
@media (max-width: 1199px) {
	/* Core's show rule is .wp-block-navigation__responsive-container:not(
	   .hidden-by-default):not(.is-menu-open) — 0,3,0. Matching that exactly
	   would leave the outcome to stylesheet order, which depends on whether
	   core block assets load separately. The extra .wp-block-navigation
	   makes this 0,4,0 and settles it either way. */
	.viva-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.viva-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Hamburger and close: real 44px targets, brand-tinted. */
.viva-header .wp-block-navigation__responsive-container-open,
.viva-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--viva-radius-pill);
}

.viva-header .wp-block-navigation__responsive-container-open:hover {
	background-color: var(--wp--preset--color--marigold-tint);
}

/* --- The open overlay.
   Colours come from the block's own overlayBackgroundColor/overlayTextColor
   (dark + cream, 16.22:1), so the surface carries .has-dark-background-color
   and the dark-surface rules below apply to it for free. This block only
   handles layout and type. --- */
.viva-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 5vw, 2.25rem);
}

.viva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.viva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}

.viva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(248, 241, 226, 0.18);
}

/* Display face, big tap targets. Cream reads 16.22:1 on cocoa; marigold 7.37:1. */
.viva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.5em 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--cream);
}

.viva-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--marigold);
}

/* The focus gap must match the overlay, not the page. */
.viva-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
.viva-header .wp-block-navigation__responsive-container.is-menu-open button:focus-visible {
	border-radius: var(--viva-radius-sm);
	box-shadow:
		0 0 0 2px var(--wp--preset--color--dark),
		0 0 0 5px var(--viva-focus);
}

/* --- Header actions: two ghost icon buttons, 44px each.
   The search button was a heavy filled ember circle and the newsletter a wide
   outlined pill; together they crowded the row. Both are now quiet icons that
   only pick up colour on hover.

   Icon-only is a weak affordance, so each carries a `title` tooltip and a
   visually-hidden label. The label — not an aria-label — is the accessible
   name, so it stays translatable and degrades to readable text if the
   stylesheet ever fails to load. --- */
.viva-header__actions {
	flex-wrap: nowrap;
}

.viva-iconlink,
.viva-header .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--viva-radius-pill);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--viva-dur-fast) var(--viva-ease-out),
		color var(--viva-dur-fast) var(--viva-ease-out);
}

.viva-iconlink:hover,
.viva-header .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--marigold-tint);
	color: var(--wp--preset--color--accent);
}

.viva-iconlink svg,
.viva-header .wp-block-search__button svg {
	width: 20px;
	height: 20px;
}

/* Core's magnifier is a filled path; the inlined Lucide envelope is stroked
   and carries fill="none" inline, so it must not be given a fill here. */
.viva-header .wp-block-search__button svg {
	fill: currentColor;
}

.viva-iconlink__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

/* The search field once it has expanded. */
.viva-header .wp-block-search__input {
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--viva-radius-pill);
	background-color: var(--wp--preset--color--base);
}

/* --- Small screens: drop the eyebrow. The action row is two icons already. --- */
@media (max-width: 781px) {
	.viva-header .has-mono-font-family {
		display: none;
	}
}

@media (max-width: 600px) {
	/* An expanded search must not push the row wider than the viewport. */
	.viva-header .wp-block-search__inside-wrapper {
		max-width: 100%;
	}
}

/* The title text stays in the accessibility tree; only its glyphs are hidden. */
.viva-header .wp-block-site-title {
	font-size: 0;
	line-height: 0;
}

.viva-header .wp-block-site-title a {
	display: block;
	width: 4.75rem;
	aspect-ratio: 819.6 / 404.5;
	background: url("assets/logo.svg") no-repeat center / contain;
}

/* --- Coloured surfaces.
   The warm neutral ramp is tuned for reading on cream and collapses on a
   saturated band: `faint` measures 2.85:1 on cocoa and the ember link colour
   2.97:1. The patterns keep using the semantic classes -- muted, faint,
   accent -- and each surface remaps them to values measured against ITS OWN
   background, so a section stays legible whichever style variation is applied
   to it. WordPress emits preset colour classes with !important, so the remaps
   need it too. Alphas below are over the band colour, and every ratio was
   computed rather than eyeballed. --- */

/* Cocoa: primary cream 16.22:1, muted 8.76:1, faint 7.37:1, marigold 7.37:1. */
.has-dark-background-color .has-muted-color,
.is-style-viva-cocoa .has-muted-color {
	color: rgba(248, 241, 226, 0.72) !important;
}

.has-dark-background-color .has-faint-color,
.is-style-viva-cocoa .has-faint-color {
	color: rgba(248, 241, 226, 0.65) !important;
}

.has-dark-background-color .has-accent-color,
.has-dark-background-color .has-accent-strong-color,
.is-style-viva-cocoa .has-accent-color,
.is-style-viva-cocoa .has-accent-strong-color {
	color: var(--wp--preset--color--marigold) !important;
}

.has-dark-background-color a:not(.wp-element-button),
.is-style-viva-cocoa a:not(.wp-element-button) {
	color: var(--wp--preset--color--marigold);
}

.has-dark-background-color a:not(.wp-element-button):hover,
.is-style-viva-cocoa a:not(.wp-element-button):hover {
	color: #e9b048;
}

/* Ember is a saturated mid-tone: white itself is only 6.14:1, so there is
   very little room beneath it. 0.90 alpha is the last step that clears AA at
   5.26:1 -- the hierarchy is shallow because the surface allows no more. */
.is-style-viva-ember .has-muted-color,
.is-style-viva-ember .has-faint-color {
	color: rgba(255, 255, 255, 0.90) !important;
}

.is-style-viva-ember .has-accent-color,
.is-style-viva-ember .has-accent-strong-color {
	color: var(--wp--preset--color--cream) !important;
}

/* Marigold takes dark text: ink 7.37:1, muted at 0.80 alpha 5.19:1. A link
   here is the same hue as body text, so it carries an underline. */
.is-style-viva-marigold .has-muted-color,
.is-style-viva-marigold .has-faint-color {
	color: rgba(27, 20, 11, 0.80) !important;
}

.is-style-viva-marigold .has-accent-color,
.is-style-viva-marigold .has-accent-strong-color {
	color: var(--wp--preset--color--dark) !important;
}

.is-style-viva-marigold a:not(.wp-element-button) {
	color: var(--wp--preset--color--dark);
	text-decoration: underline;
}

/* A light island nested inside a coloured band -- a white domain card on a
   cocoa section, say -- must NOT inherit that band's remap, or its ink text
   would be painted cream on white. WordPress writes the variation's own
   heading colour at :root :where(...), which is only 0,1,0, so these rules
   outrank it as well as the 0,2,0 remaps above.

   The island is matched by .has-background rather than by a list of light
   surface slugs: WordPress emits that class for ANY background, preset or
   custom, so a card someone colours by hand is covered too. The :not() then
   removes the surfaces that really are dark. Outlined is deliberately absent
   from the island list -- it is transparent, so it does sit on the band. */
:is(.has-dark-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(.has-background, .is-style-viva-paper, .is-style-viva-cream, .is-style-viva-ember-tint):not(.has-dark-background-color, .has-contrast-background-color, .has-accent-background-color, .has-accent-strong-background-color, .has-ember-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--contrast);
}

:is(.has-dark-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(.has-background, .is-style-viva-paper, .is-style-viva-cream, .is-style-viva-ember-tint):not(.has-dark-background-color, .has-contrast-background-color, .has-accent-background-color, .has-accent-strong-background-color, .has-ember-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	.has-muted-color {
	color: var(--wp--preset--color--muted) !important;
}

:is(.has-dark-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(.has-background, .is-style-viva-paper, .is-style-viva-cream, .is-style-viva-ember-tint):not(.has-dark-background-color, .has-contrast-background-color, .has-accent-background-color, .has-accent-strong-background-color, .has-ember-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	.has-faint-color {
	color: var(--wp--preset--color--faint) !important;
}

:is(.has-dark-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(.has-background, .is-style-viva-paper, .is-style-viva-cream, .is-style-viva-ember-tint):not(.has-dark-background-color, .has-contrast-background-color, .has-accent-background-color, .has-accent-strong-background-color, .has-ember-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(.has-accent-color, .has-accent-strong-color) {
	color: var(--wp--preset--color--accent) !important;
}

:is(.has-dark-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	:is(.has-background, .is-style-viva-paper, .is-style-viva-cream, .is-style-viva-ember-tint):not(.has-dark-background-color, .has-contrast-background-color, .has-accent-background-color, .has-accent-strong-background-color, .has-ember-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold)
	a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* The island itself, when it carries no colour class of its own. */
:is(.has-dark-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold) :is(.has-background, .is-style-viva-paper, .is-style-viva-cream, .is-style-viva-ember-tint):not(.has-dark-background-color, .has-contrast-background-color, .has-accent-background-color, .has-accent-strong-background-color, .has-ember-background-color, .is-style-viva-cocoa, .is-style-viva-ember, .is-style-viva-marigold) {
	color: var(--wp--preset--color--contrast);
}

/* The focus gap must match the surface it sits on, not the page. */
.has-dark-background-color a:focus-visible,
.has-dark-background-color button:focus-visible,
.has-dark-background-color .wp-element-button:focus-visible,
.is-style-viva-cocoa a:focus-visible,
.is-style-viva-cocoa button:focus-visible,
.is-style-viva-cocoa .wp-element-button:focus-visible {
	box-shadow:
		0 0 0 2px var(--wp--preset--color--dark),
		0 0 0 5px var(--viva-focus);
}

.is-style-viva-ember a:focus-visible,
.is-style-viva-ember button:focus-visible,
.is-style-viva-ember .wp-element-button:focus-visible {
	box-shadow:
		0 0 0 2px var(--wp--preset--color--accent),
		0 0 0 5px var(--wp--preset--color--cream);
}

.is-style-viva-marigold a:focus-visible,
.is-style-viva-marigold button:focus-visible,
.is-style-viva-marigold .wp-element-button:focus-visible {
	box-shadow:
		0 0 0 2px var(--wp--preset--color--marigold),
		0 0 0 5px var(--wp--preset--color--dark);
}

/* --- Motion: hover lift and press are decorative, so opt out on request. --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Flush layout: remove the default vertical gap between the top-level
   header, main and footer. Each template's <main> provides its own padding,
   and full-width sections (hero, newsletter band) carry their own padding,
   so they should sit flush against the header and footer. --- */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* --- Plain list (used in the footer nav columns) --- */
.wp-block-list.is-style-no-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Pill term/category styles (news categories, event types, tags) --- */
.is-style-pills .wp-block-post-terms__separator,
.is-style-pill .wp-block-post-terms__separator {
	display: none;
}

.is-style-pills a,
.wp-block-categories.is-style-pills li a {
	display: inline-block;
	margin: 0 0.375rem 0.375rem 0;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.wp-block-categories.is-style-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.is-style-pill a {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.is-style-pill-accent a {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-weight: 700;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-strong);
	text-decoration: none;
}

/* --- Outline button variant tuned to the VIVA ink colour --- */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --- Share row (single post).
   The links themselves are built in templates/single.html and resolved to the
   current post by viva_resolve_share_urls() — no platform integration, just a
   URL each service accepts.

   Core's logos-only style paints every mark in its own brand colour, so a
   LinkedIn blue and a pure black land next to a cream page. The marks stay
   recognisable in a single ink, so they take the body colour and pick up the
   action colour on hover. The class is doubled to outrank core's per-service
   rules, which already sit at three classes. --- */
.wp-block-social-links.viva-share.viva-share .wp-social-link {
	color: var(--wp--preset--color--contrast-soft);
	transition: color var(--viva-dur-fast) var(--viva-ease-out);
}

.wp-block-social-links.viva-share.viva-share .wp-social-link:hover,
.wp-block-social-links.viva-share.viva-share .wp-social-link:focus-within {
	color: var(--wp--preset--color--accent);
}

/* --- Featured-image placeholders sit flush with rounded card corners --- */
.wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Publications table (archive-publication) --- */
.viva-pub-head,
.viva-pub-row {
	display: grid;
	grid-template-columns: 1fr 130px 100px 110px;
	gap: 1rem;
	align-items: center;
}

.viva-pub-head > *,
.viva-pub-row > * {
	margin: 0;
}

.viva-pub-title > * {
	margin: 0;
}

.viva-pub-row {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.viva-pub-title a {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
}

.viva-pub-excerpt {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--faint);
}

.viva-pub-typepill {
	display: inline-block;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-strong);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.6875rem;
	font-weight: 700;
}

.viva-pub-wp {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.viva-pub-date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--faint);
}

.viva-pub-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.viva-pub-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--viva-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.viva-pub-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.viva-pub-head {
		display: none;
	}

	.viva-pub-row {
		grid-template-columns: 1fr;
		gap: 0.4rem;
		align-items: start;
	}
}

/* --- Publications filter bar --- */
.viva-pub-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1.75rem 0 0.5rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--border-strong);
}

.viva-pub-filters__q {
	flex: 1 1 220px;
	min-width: 180px;
}

.viva-pub-filters__q,
.viva-pub-filters__select {
	padding: 0.55rem 0.8rem;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-soft);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--viva-radius-md);
}

.viva-pub-filters__submit {
	padding: 0.55rem 1.3rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border: none;
	border-radius: var(--viva-radius-pill);
	cursor: pointer;
	transition: background var(--viva-dur-fast) var(--viva-ease-out);
}

.viva-pub-filters__submit:hover {
	background: var(--wp--preset--color--accent-strong);
}

.viva-pub-filters__clear {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.viva-pub-filters__q,
	.viva-pub-filters__select,
	.viva-pub-filters__submit {
		flex: 1 1 100%;
	}
}

/* --- Event details card (single-event) --- */
.viva-event-meta__row {
	margin-bottom: 1rem;
}

.viva-event-meta__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}

.viva-event-meta__value {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.9375rem;
	font-weight: 700;
}

.viva-event-register {
	display: block;
	margin-top: 0.5rem;
	padding: 0.8rem 1rem;
	text-align: center;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-radius: var(--viva-radius-pill);
	text-decoration: none;
	transition: background var(--viva-dur-fast) var(--viva-ease-out),
		box-shadow var(--viva-dur-base) var(--viva-ease-out);
}

.viva-event-register:hover {
	background: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--base);
	box-shadow: var(--viva-shadow-ember);
}

.viva-event-cal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1rem;
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.viva-event-register-form {
	scroll-margin-top: 90px;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.viva-event-register-form h2 {
	margin: 0 0 1.25rem;
}

/* --- Upcoming events list (front page) — native Query Loop + flex blocks.
   Layout (flex rows/columns) comes from the blocks; CSS only adds sizing
   and the small visual touches the block UI can't express. --- */
.viva-upcoming__date {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: var(--viva-radius-md);
	align-items: center;
	justify-content: center;
	text-align: center;
}

.viva-upcoming__date .m {
	font-family: var(--wp--preset--font-family--mono);
}

.viva-upcoming__body {
	flex: 1;
	min-width: 0;
}

.viva-upcoming__meta .badge {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--muted);
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.viva-upcoming__meta .badge a {
	color: inherit;
	text-decoration: none;
}

.viva-upcoming__meta .when {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--faint);
}

/* --- Breadcrumbs (page templates) --- */
.viva-breadcrumbs {
	margin-bottom: 1.25rem;
}

.viva-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.5;
}

.viva-breadcrumbs li {
	color: var(--wp--preset--color--muted);
}

/* The separator is generated content on purpose: it is decoration, and a
   screen reader should not read a slash between every crumb. */
.viva-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--faint);
}

.viva-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	transition: color var(--viva-dur-fast) var(--viva-ease-out);
}

.viva-breadcrumbs a:hover,
.viva-breadcrumbs a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.viva-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--faint);
}

/* --- Hero media placeholder (front page) --- */
.viva-hero__media {
	min-height: 330px;
	border-radius: var(--viva-radius-lg);
	border: 1px solid var(--wp--preset--color--border-strong);
	align-items: center;
}

/* --- Consortium logo strip (front page) --- */
.viva-consortium__item {
	min-height: 104px;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--viva-radius-md);
}

/* The featured-image block defaults to scale: cover, which crops a wordmark.
   These two spots set scale: contain in the template instead, which emits
   object-fit: contain inline and so beats the blanket cover rule further up
   this file. The only thing left to CSS is keeping a wide logo off the frame
   it sits in — and on the single-partner header that frame is the image's own
   border, so the padding has to be on the image, not the figure. */
.viva-partner-logo img {
	padding: 0.5rem;
}

.viva-consortium__logo {
	margin: 0;
}

/* --- Partners archive --- */
.viva-partner-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.viva-partner-filters__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.viva-partner-filters__pills .pill {
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.viva-partner-filters__pills .pill.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.viva-partner-filters__country select {
	padding: 0.5rem 0.8rem;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-soft);
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--viva-radius-md);
}

.viva-partners {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.375rem;
}

.viva-partner-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.375rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--viva-radius-card);
	box-shadow: var(--viva-shadow-sm);
	transition: transform var(--viva-dur-base) var(--viva-ease-out),
		box-shadow var(--viva-dur-base) var(--viva-ease-out);
}

.viva-partner-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--viva-shadow-md);
}

.viva-partner-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	padding: 0.85rem;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--viva-radius-md);
	overflow: hidden;
}

/* Logos must show in full — fit inside the box, never crop. */
.viva-partner-card__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.viva-partner-card__placeholder {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--faint);
}

/* --- Partner contact card (single-partner) --- */
.viva-partner-contact > * {
	margin: 0;
}

.viva-partner-contact__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	margin-bottom: 0.75rem;
}

.viva-partner-contact__key {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.75rem;
}

.viva-partner-contact__val {
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 0.15rem;
	word-break: break-word;
}

.viva-partner-card__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
}

.viva-partner-card__loc {
	margin-top: 0.3rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--faint);
}

.viva-partner-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.viva-partner-card__wp {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-strong);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.6875rem;
	font-weight: 700;
}

.viva-partner-card__view {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-strong);
	text-decoration: none;
}

.viva-partners__pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2.25rem;
}

.viva-partners__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--viva-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.viva-partners__pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.viva-partners {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.viva-partners {
		grid-template-columns: 1fr;
	}
}

/* --- Media.
   The design system ships no image component and no imagery guideline card
   (17 guideline cards, none about pictures), so what applies to media is its
   general surface rules: warm shadows opt-in through the Soft / Lifted / Deep
   presets in theme.json, no gradients anywhere, and captions in the label
   face — the role Space Grotesk already carries for dates and eyebrows.

   Corners are deliberately NOT imposed. Earlier versions rounded every image,
   featured image, cover and video, which was far too broad a brush: an EU
   flag 50px wide in the footer does not want an 18px radius. Core already
   ships Default and Rounded style variations for the image block, so the
   right move is to leave Default square and give Rounded our value instead
   of core's 9999px pill. Every one of these blocks also exposes a border
   radius control per instance, so nothing is lost by not defaulting. --- */

/* Core's rule is .wp-block-image.is-style-rounded img at 0,2,1 and paints a
   9999px pill. The doubled class outranks it so the outcome does not depend
   on stylesheet order. */
.wp-block-image.is-style-rounded.is-style-rounded img {
	border-radius: var(--viva-radius-lg);
}

/* A featured image that is the flush top of a card still has to be clipped:
   the card carries the radius and sets blockGap:0, so square image corners
   would otherwise poke out past the card's rounded ones. */
.wp-block-group:has(> .wp-block-post-featured-image:first-child) {
	overflow: hidden;
}

/* A cover's background image has to be clipped by the block's own radius. */
.wp-block-cover,
.wp-block-cover-image {
	overflow: hidden;
}

/* Overlays are cocoa, never neutral black — there is no pure grey in this
   system. Only applies when the editor has not chosen an overlay colour. */
.wp-block-cover:not(.has-background-dim-0) .wp-block-cover__background:not([class*="-background-color"]) {
	background-color: var(--wp--preset--color--dark);
}

/* Captions are meta, not body copy. */
.wp-element-caption,
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption {
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--faint);
}

/* --- Core blocks.
   Editors reach for Table, Quote and Media & Text straight from the inserter,
   so these carry the design system's rules by default rather than needing a
   variant to be chosen. Typography and colour that should also surface in the
   editor sidebar live in theme.json; structure lives here. --- */

/* Table. Hairline rules, label-face headers, no vertical grid — the design
   system has no boxed-table idiom, only warm horizontal separators. */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table thead {
	border-bottom: 1px solid var(--wp--preset--color--border-strong);
}

/* Core sets `border: 1px solid` on every cell. Overriding only border-bottom
   left the other three sides in place, which is the boxed grid this design
   does not use -- and with no left padding the text sat against that border. */
.wp-block-table th,
.wp-block-table td {
	border: 0;
}

.wp-block-table th {
	padding: 0.625rem 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--faint);
}

.wp-block-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}

/* The outer edges stay flush with the column of text around the table. */
.wp-block-table th:first-child,
.wp-block-table td:first-child {
	padding-left: 0;
}

.wp-block-table th:last-child,
.wp-block-table td:last-child {
	padding-right: 0;
}

/* Core already ships a Stripes variant; it just paints #f0f0f0, which is a
   neutral grey this system does not contain. The doubled class is a
   deliberate specificity bump — core's own rule is an exact selector match,
   so without it the winner would be decided by stylesheet order. */
.wp-block-table.is-style-stripes.is-style-stripes {
	border-bottom-color: var(--wp--preset--color--border);
}

.wp-block-table.is-style-stripes.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface-alt);
}

.wp-block-table.is-style-stripes.is-style-stripes th,
.wp-block-table.is-style-stripes.is-style-stripes td {
	padding-left: 1rem;
	border-bottom-color: transparent;
}

/* Quote. A marigold rule rather than a quotation glyph — the brand reserves
   the " device for pull-quotes. */
.wp-block-quote {
	padding-left: 1.5rem;
	border-left: 3px solid var(--wp--preset--color--marigold);
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}

.wp-block-pullquote {
	padding: 2rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Separator. Hairline, warm, never the default short dark rule. */
.wp-block-separator:not(.is-style-dots) {
	height: 0;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	opacity: 1;
}

/* Media & text: match the column rhythm to the spacing scale. */
.wp-block-media-text {
	grid-template-columns: 50% 1fr;
	gap: 0;
}

.wp-block-media-text > .wp-block-media-text__content {
	padding: 0 0 0 var(--wp--preset--spacing--50);
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding: 0 var(--wp--preset--spacing--50) 0 0;
}

@media (max-width: 600px) {
	.wp-block-media-text:not(.is-stacked-on-mobile) > .wp-block-media-text__content,
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--40) 0 0;
	}
}

/* Code and preformatted need a REAL monospace stack. The `mono` preset slug
   is Space Grotesk — the design system's label face, which is proportional —
   so inheriting it here would set code in a non-aligning font. */
.wp-block-code code,
.wp-block-preformatted,
code,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.875em;
}

.wp-block-code {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--viva-radius-md);
}

/* Details: a bordered disclosure, summary in the label face. */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--viva-radius-md);
	background-color: var(--wp--preset--color--base);
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}