/*
Theme Name: Συνεργασία Μετόχων ΟΑΣΘ
Theme URI: https://synmetohoioasth.gr/
Author: WIZSP
Description: Block theme for the association «Σωματείο Συνεργασία Μετόχων ΟΑΣΘ». Material You (MD3) skin — institutional blue seeded from the association logo, warm-neutral surfaces, pill controls and tonal containers. Built from the Claude Design mockup bundle.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smo
Tags: block-theme, full-site-editing, one-column, accessibility-ready, custom-colors, custom-logo, translation-ready
*/

/* ==========================================================================
   1. Fonts — self-hosted Roboto (variable). Greek + Latin subsets only.
   Bundled rather than loaded from the Google CDN so that no visitor IP is
   sent to a third party (GDPR).
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('./assets/fonts/roboto-greek-ext.woff2') format('woff2');
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('./assets/fonts/roboto-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('./assets/fonts/roboto-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('./assets/fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
	/* Colour — mirrors theme.json so plain CSS can use short names. */
	--smo-primary: #1959A8;
	--smo-primary-dark: #0B3A66;
	--smo-primary-container: #DCE6F9;
	--smo-on-primary-container: #14304C;
	--smo-secondary-container: #D7E6FB;
	--smo-accent: #2E86D8;
	--smo-tertiary: #5C6670;
	--smo-tertiary-container: #E4E7EC;
	--smo-on-tertiary-container: #2B3138;
	--smo-surface: #F6F9FD;
	--smo-surface-container: #EDF1F8;
	--smo-surface-container-high: #E2E8F1;
	--smo-on-surface: #1A1C1E;
	--smo-on-surface-variant: #44474E;
	--smo-body: #3A3D42;
	--smo-outline: #74777F;
	--smo-inverse-surface: #12233A;
	--smo-on-inverse-surface: #C9D6E8;
	--smo-inverse-muted: #7E97B5;
	--smo-inverse-body: #AEC0D8;
	--smo-topbar-text: #EAF1FB;
	--smo-hero-eyebrow: #CFE0F7;
	--smo-hero-body: #E6EEFA;
	--smo-error: #B3261E;
	--smo-error-container: #F9DEDC;
	--smo-success: #146C43;
	--smo-success-container: #D8EDE1;

	/* Shape — MD3 organic radii. */
	--smo-radius-xs: 4px;
	--smo-radius-sm: 12px;
	--smo-radius-md: 16px;
	--smo-radius-lg: 20px;
	--smo-radius-xl: 24px;
	--smo-radius-2xl: 28px;
	--smo-radius-3xl: 32px;
	--smo-radius-4xl: 48px;
	--smo-radius-full: 9999px;

	/* Elevation. */
	--smo-elev-1: 0 1px 2px rgba(0, 0, 0, .04);
	--smo-elev-2: 0 1px 3px rgba(0, 0, 0, .08);
	--smo-elev-primary: 0 1px 3px rgba(25, 89, 168, .35);
	--smo-elev-raised: 0 2px 8px rgba(0, 0, 0, .15);

	/* Layout. Body copy stays on the 1200px rail of the mockups; the header,
	   hero and footer run wider so the chrome frames the page. */
	--smo-page: 1200px;
	--smo-chrome-max: 1600px;
	--smo-gutter: 64px;
	--smo-gutter-tight: 24px;
	--smo-chrome-gutter: 48px;

	--smo-transition: 160ms cubic-bezier(.2, 0, 0, 1);

	/* Hero photograph. Swap the file to change it; set to `none` to go back to
	   flat blue. If the file is missing the layer simply does not paint and the
	   hero falls back to the solid primary below it. */
	--smo-hero-photo: url('./assets/images/hero.jpg');
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body {
	margin: 0;
	background: var(--smo-surface);
	color: var(--smo-body);
	font-family: 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	font-size: 14.5px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--smo-primary-container);
}

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

/* Visible, high-contrast focus for keyboard users on every interactive thing. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--smo-primary);
	outline-offset: 2px;
	border-radius: var(--smo-radius-xs);
}

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

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

/* Standard content rail: 1200px frame, 64px side padding → 1072px column. */
.smo-section {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--smo-page);
	margin-inline: auto;
	padding-inline: var(--smo-gutter);
}

/* Full-frame rail with only the 24px inset the mockup uses for the hero and
   the page-header band. */
.smo-section--flush {
	padding-inline: var(--smo-gutter-tight);
}

/* Chrome rail — header, hero and footer. */
.smo-section--wide {
	max-width: var(--smo-chrome-max);
}

.smo-stack > * + * {
	margin-block-start: var(--smo-flow, 20px);
}

.smo-grid {
	display: grid;
	gap: 20px;
}

.smo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.smo-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Editorial split columns used on About / Membership / Contact. */
.smo-split {
	display: grid;
	gap: 40px;
}

.smo-split--about { grid-template-columns: 1.3fr 1fr; }
.smo-split--form { grid-template-columns: 1fr 1.2fr; }
.smo-split--even { grid-template-columns: 1fr 1fr; }
.smo-split--doc { grid-template-columns: 280px 1fr; }
.smo-split--article { grid-template-columns: 1fr 320px; }

/* ==========================================================================
   5. Surfaces & type helpers
   ========================================================================== */

.smo-card {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	box-shadow: var(--smo-elev-1);
}

.smo-eyebrow {
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--smo-tertiary);
	text-transform: uppercase;
}

.smo-breadcrumbs {
	font-size: 12px;
	line-height: 1.6;
	color: var(--smo-tertiary);
}

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

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

.smo-breadcrumbs__sep {
	padding-inline: 8px;
}

/* MD3 tonal badges. */
.smo-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .04em;
	padding: 4px 12px;
	border-radius: var(--smo-radius-full);
	background: var(--smo-primary-container);
	color: var(--smo-on-primary-container);
}

.smo-badge--announcement {
	background: var(--smo-secondary-container);
	color: var(--smo-primary-dark);
}

.smo-badge--press {
	background: var(--smo-tertiary-container);
	color: var(--smo-on-tertiary-container);
}

/* ==========================================================================
   6. Buttons & chips (MD3 pills)
   ========================================================================== */

.smo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	padding: 13px 30px;
	border: 0;
	border-radius: var(--smo-radius-full);
	cursor: pointer;
	transition: background-color var(--smo-transition), color var(--smo-transition), box-shadow var(--smo-transition);
}

.smo-btn--filled {
	background: var(--smo-primary);
	color: #fff;
	box-shadow: var(--smo-elev-primary);
}

.smo-btn--filled:hover,
.smo-btn--filled:focus-visible {
	background: var(--smo-primary-dark);
	color: #fff;
}

.smo-btn--on-primary {
	background: #fff;
	color: var(--smo-primary);
	box-shadow: var(--smo-elev-raised);
	padding: 14px 28px;
}

.smo-btn--on-primary:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.smo-btn--outline-inverse {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
	padding: 13px 27px;
}

.smo-btn--outline-inverse:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.smo-btn--tonal {
	background: #fff;
	color: var(--smo-primary);
	font-size: 13px;
	padding: 12px 22px;
	box-shadow: var(--smo-elev-2);
}

.smo-btn--tonal:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.smo-btn--text {
	background: #fff;
	color: var(--smo-primary);
	font-size: 13px;
	padding: 9px 18px;
	box-shadow: none;
}

.smo-btn--text:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.smo-btn__icon {
	flex: none;
}

/* Filter chip row. */
.smo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.smo-chip {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: var(--smo-radius-full);
	background: var(--smo-surface-container);
	color: var(--smo-body);
	transition: background-color var(--smo-transition), color var(--smo-transition);
}

.smo-chip:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
	text-decoration: none;
}

.smo-chip.is-active,
.smo-chip[aria-current='page'] {
	background: var(--smo-primary);
	color: #fff;
	font-weight: 700;
}

.smo-chip.is-active:hover {
	background: var(--smo-primary-dark);
	color: #fff;
}

/* ==========================================================================
   7. Site header
   ========================================================================== */

.smo-header {
	background: var(--smo-surface);
	position: relative;
	z-index: 20;
}

.smo-topbar {
	background: var(--smo-primary);
	color: var(--smo-topbar-text);
	font-size: 12.5px;
	line-height: 1.6;
	letter-spacing: .01em;
}

.smo-topbar__inner {
	box-sizing: border-box;
	max-width: var(--smo-chrome-max);
	margin-inline: auto;
	padding: 7px var(--smo-chrome-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.smo-topbar__group {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.smo-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.smo-topbar__item:hover {
	color: #fff;
	text-decoration: underline;
}

.smo-topbar__item svg {
	flex: none;
}

.smo-topbar__item a {
	color: inherit;
	text-decoration: none;
}

.smo-topbar__item a:hover {
	color: #fff;
	text-decoration: underline;
}

.smo-topbar__org {
	opacity: .9;
}

.smo-header__bar {
	box-sizing: border-box;
	max-width: var(--smo-chrome-max);
	margin-inline: auto;
	padding: 12px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.smo-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	white-space: nowrap;
	text-decoration: none;
}

.smo-brand:hover {
	text-decoration: none;
}

/* The logo carries the association's wordmark inside the artwork, so with the
   site title removed it has to be big enough to read on its own. */
.smo-brand .wp-block-site-logo img,
.smo-brand__logo {
	height: 52px;
	width: auto;
	display: block;
}

.smo-brand .wp-block-site-title,
.smo-footer__brand .wp-block-site-title {
	margin: 0;
}

.smo-brand__name,
.smo-brand .wp-block-site-title a {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--smo-on-surface);
	text-decoration: none;
}

/* Core navigation restyled as the MD3 pill nav from the mockup. */
.smo-header .wp-block-navigation {
	flex: none;
	white-space: nowrap;
	gap: 3px;
	font-size: 11.5px;
}

.smo-header .wp-block-navigation .wp-block-navigation__container {
	gap: 3px;
	align-items: center;
}

.smo-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--smo-on-surface);
	background: transparent;
	padding: 8px 11px;
	border-radius: var(--smo-radius-full);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--smo-transition), color var(--smo-transition);
}

.smo-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--smo-surface-container);
	color: var(--smo-primary-dark);
	text-decoration: none;
}

.smo-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.smo-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.smo-header .wp-block-navigation .smo-nav-current > .wp-block-navigation-item__content {
	font-weight: 700;
	color: var(--smo-primary-dark);
	background: var(--smo-primary-container);
}

.smo-header__cta {
	flex: none;
	margin-left: 6px;
}

.smo-header__cta .wp-block-button__link {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 10px 16px;
	white-space: nowrap;
}

/* ==========================================================================
   8. Hero (home)
   ========================================================================== */

.smo-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--smo-radius-4xl);
	color: #fff;
	padding: 88px 64px 96px;
	text-align: center;
	isolation: isolate;

	/* The photograph is multiplied into the primary blue, then a blue veil is
	   composited over the result. Multiply can only darken, and every colour in
	   the veil is at or below the primary, so the rendered backdrop is never
	   lighter than the flat blue of the approved design — the headline keeps its
	   contrast whatever photograph is dropped in, while the image still reads
	   through as tonal depth. */
	background-color: var(--smo-primary);
	background-image:
		linear-gradient(168deg, rgba(25, 89, 168, .60) 0%, rgba(17, 71, 130, .70) 55%, rgba(11, 58, 102, .78) 100%),
		var(--smo-hero-photo, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: normal, multiply;
}

/* Two layered blur shapes, drawn as pseudo-elements so the template markup
   stays pure blocks. */
.smo-hero::before,
.smo-hero::after {
	content: '';
	position: absolute;
	border-radius: var(--smo-radius-full);
	pointer-events: none;
	z-index: -1;
}

.smo-hero::before {
	top: -100px;
	left: -80px;
	width: 340px;
	height: 340px;
	background: var(--smo-tertiary);
	opacity: .35;
	filter: blur(70px);
}

.smo-hero::after {
	bottom: -120px;
	right: -60px;
	width: 360px;
	height: 360px;
	background: var(--smo-accent);
	opacity: .28;
	filter: blur(80px);
}

.smo-hero__eyebrow {
	font-size: 12.5px;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--smo-hero-eyebrow);
	margin: 0 0 18px;
}

.smo-hero__title {
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	max-width: 780px;
	margin: 0 auto 22px;
}

.smo-hero__lede {
	font-size: 17px;
	line-height: 1.7;
	color: var(--smo-hero-body);
	max-width: 640px;
	margin: 0 auto 34px;
}

.smo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* ==========================================================================
   9. Page-header band
   ========================================================================== */

.smo-page-header {
	border-radius: var(--smo-radius-3xl);
	background: var(--smo-surface-container);
	padding: 40px 48px;
}

.smo-page-header__title {
	font-size: clamp(26px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--smo-on-surface);
	margin: 8px 0 0;
}

.smo-page-header__lede {
	font-size: 14px;
	line-height: 1.7;
	color: var(--smo-on-surface-variant);
	max-width: 640px;
	margin: 10px 0 0;
}

/* Statute variant: title left, download action right. */
.smo-page-header--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* ==========================================================================
   10. Home sections
   ========================================================================== */

.smo-pillar {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 32px 28px;
	box-shadow: var(--smo-elev-1);
}

.smo-pillar__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--smo-on-surface);
	margin: 0 0 8px;
}

.smo-pillar__text {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--smo-on-surface-variant);
	margin: 0;
}

.smo-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.smo-section-head__title {
	font-size: clamp(22px, 2.2vw, 26px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--smo-on-surface);
	margin: 0;
}

.smo-section-head__link {
	font-size: 13px;
	font-weight: 700;
	color: var(--smo-primary);
	text-decoration: none;
	white-space: nowrap;
}

.smo-section-head__link:hover {
	text-decoration: underline;
}

.smo-quote.smo-quote {
	border-radius: var(--smo-radius-xl);
	background: var(--smo-primary-container);
	padding: 40px 48px;
	margin: 0;
	border: 0;
}

.smo-quote p {
	font-style: italic;
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.6;
	color: var(--smo-primary-dark);
	margin: 0;
}

.smo-cta-band {
	border-radius: var(--smo-radius-xl);
	background: var(--smo-surface-container);
	padding: 36px 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.smo-cta-band__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--smo-on-surface);
	margin: 0;
}

.smo-cta-band__text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smo-on-surface-variant);
	margin: 4px 0 0;
}

/* ==========================================================================
   11. About / Σύσταση
   ========================================================================== */

/* Direct children only — nested components (timeline rows, benefit rows) carry
   their own type and colour and must not inherit the prose treatment. */
.smo-prose > p,
.smo-prose > .wp-block-post-content > p {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--smo-body);
}

.smo-prose > :first-child { margin-top: 0; }
.smo-prose > :last-child { margin-bottom: 0; }

.smo-timeline {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
}

/* Rows must span the column; core's vertical flex layout would shrink-wrap
   them to their content. */
.smo-timeline.smo-timeline,
.smo-board.smo-board,
.smo-benefits.smo-benefits,
.smo-contact-list.smo-contact-list {
	align-items: stretch;
}

.smo-timeline__item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-md);
	padding: 16px 20px;
}

.smo-timeline__year {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--smo-primary);
	width: 56px;
	flex: none;
	margin: 0;
}

.smo-timeline__text {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--smo-body);
	margin: 0;
}

.smo-board {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.smo-board__row {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-md);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.smo-board__role {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--smo-on-surface);
	margin: 0;
}

.smo-board__name {
	font-size: 13px;
	line-height: 1.5;
	color: var(--smo-tertiary);
	margin: 0;
}

.smo-note {
	font-size: 12px;
	line-height: 1.6;
	color: var(--smo-tertiary);
	margin-top: 10px;
}

/* ==========================================================================
   12. Statute (document page + TOC)
   ========================================================================== */

.smo-toc {
	position: sticky;
	top: 24px;
	align-self: start;
}

.smo-toc__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13.5px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.smo-toc__link {
	display: block;
	color: var(--smo-body);
	text-decoration: none;
	padding: 9px 14px;
	border-radius: var(--smo-radius-full);
	line-height: 1.4;
	transition: background-color var(--smo-transition), color var(--smo-transition);
}

.smo-toc__link:hover {
	background: var(--smo-surface-container);
	color: var(--smo-primary-dark);
	text-decoration: none;
}

.smo-toc__link.is-active {
	color: var(--smo-primary-dark);
	font-weight: 700;
	background: var(--smo-primary-container);
}

.smo-doc {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 36px 40px;
}

.smo-doc > * + *,
.smo-doc .wp-block-post-content > * + * {
	margin-top: 26px;
}

.smo-doc .wp-block-post-content > h2,
.smo-doc .wp-block-post-content > h3 {
	margin-top: 26px;
	margin-bottom: 8px;
}

.smo-doc .wp-block-post-content > :first-child {
	margin-top: 0;
}

.smo-doc .wp-block-post-content > h2 + p,
.smo-doc .wp-block-post-content > h3 + p {
	margin-top: 0;
}

.smo-doc h2,
.smo-doc h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--smo-on-surface);
	margin: 0 0 8px;
	scroll-margin-top: 24px;
}

.smo-doc h2 + p,
.smo-doc h3 + p {
	margin-top: 0;
}

.smo-doc p,
.smo-doc li {
	font-size: 14px;
	line-height: 1.8;
	color: var(--smo-body);
}

.smo-doc p {
	margin: 0;
}

/* ==========================================================================
   13. Listings (activities, news, letters)
   ========================================================================== */

.smo-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smo-list__item {
	display: flex;
	gap: 24px;
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 24px 28px;
	transition: box-shadow var(--smo-transition);
}

.smo-list__item:hover {
	box-shadow: var(--smo-elev-2);
}

.smo-list__date {
	width: 100px;
	flex: none;
	font-size: 13px;
	line-height: 1.7;
	color: var(--smo-tertiary);
}

.smo-list__body {
	flex: 1;
	min-width: 0;
}

.smo-list__title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--smo-on-surface);
	margin: 10px 0 0;
}

.smo-list__title a {
	color: inherit;
	text-decoration: none;
}

.smo-list__title a:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

.smo-list__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smo-on-surface-variant);
	margin: 6px 0 0;
}

/* News cards (2-up grid). */
.smo-news-card {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 28px;
	transition: box-shadow var(--smo-transition);
}

.smo-news-card:hover {
	box-shadow: var(--smo-elev-2);
}

.smo-news-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--smo-on-surface);
	margin: 14px 0 8px;
}

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

.smo-news-card__title a:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

.smo-news-card__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smo-on-surface-variant);
	margin: 0;
}

/* Compact teaser used on the home page (3-up). */
.smo-teaser {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 24px;
	box-shadow: var(--smo-elev-1);
	transition: box-shadow var(--smo-transition);
}

.smo-teaser:hover {
	box-shadow: var(--smo-elev-2);
}

.smo-teaser__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--smo-on-surface);
	margin: 14px 0 0;
}

.smo-teaser__title a {
	color: inherit;
	text-decoration: none;
}

.smo-teaser__title a:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

/* Letters — single-line rows with a trailing action. */
.smo-letters {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smo-letter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-lg);
	padding: 20px 24px;
}

.smo-letter__title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--smo-on-surface);
	margin: 0;
}

.smo-letter__title a {
	color: inherit;
	text-decoration: none;
}

.smo-letter__title a:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

.smo-letter__meta {
	font-size: 13px;
	line-height: 1.6;
	color: var(--smo-tertiary);
	margin: 4px 0 0;
}

/* Pagination. */
.smo-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 36px 0 48px;
	flex-wrap: wrap;
}

.smo-pagination .page-numbers {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 12px;
	box-sizing: border-box;
	background: var(--smo-surface-container);
	color: var(--smo-body);
	font-size: 13px;
	border-radius: var(--smo-radius-full);
	text-decoration: none;
	transition: background-color var(--smo-transition), color var(--smo-transition);
}

.smo-pagination .page-numbers:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.smo-pagination .page-numbers.current {
	background: var(--smo-primary);
	color: #fff;
}

/* ==========================================================================
   14. Article (news detail)
   ========================================================================== */

.smo-article__title {
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--smo-on-surface);
	margin: 16px 0 10px;
}

.smo-article__meta {
	font-size: 13px;
	line-height: 1.7;
	color: var(--smo-tertiary);
	margin: 0 0 28px;
}

.smo-article__meta p,
.smo-article__meta .wp-block-post-date,
.smo-article__meta time {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

.smo-list__date,
.smo-list__date time {
	margin: 0;
}

/* Featured image. Renders nothing when a post has no thumbnail, so the layout
   closes up on its own.

   Deliberately no forced aspect ratio: much of what this association publishes
   is scanned documents and press clippings, where a crop would cut the text
   out of the picture. */
.smo-article__figure {
	margin: 0 0 24px;
	border-radius: var(--smo-radius-xl);
	overflow: hidden;
	background: var(--smo-surface-container-high);
	line-height: 0;
}

.smo-article__figure img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: inherit;
}

.smo-article__body {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 32px 36px;
}

.smo-article__body > :first-child,
.smo-article__body .wp-block-post-content > :first-child { margin-top: 0; }
.smo-article__body > :last-child,
.smo-article__body .wp-block-post-content > :last-child { margin-bottom: 0; }

.smo-article__body p {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--smo-body);
}

.smo-article__body ol,
.smo-article__body ul {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--smo-body);
	padding-left: 22px;
}

.smo-article__body h2 {
	font-size: 20px;
	margin: 28px 0 10px;
}

.smo-article__body h3 {
	font-size: 17px;
	margin: 24px 0 8px;
}

.smo-article__body blockquote {
	margin: 24px 0;
	padding: 20px 24px;
	background: var(--smo-primary-container);
	border-radius: var(--smo-radius-md);
	color: var(--smo-primary-dark);
	font-style: italic;
}

.smo-related {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.smo-related__item {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-md);
	padding: 16px 18px;
}

.smo-related__date {
	font-size: 12px;
	line-height: 1.5;
	color: var(--smo-tertiary);
	margin-bottom: 4px;
}

.smo-related__title {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--smo-on-surface);
	text-decoration: none;
	display: block;
}

.smo-related__title:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

/* ==========================================================================
   15. Forms (MD3 filled fields)
   ========================================================================== */

.smo-benefits {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.smo-benefit {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--smo-primary-container);
	border-radius: var(--smo-radius-md);
	padding: 14px 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smo-on-primary-container);
}

/* Icon drawn from a data URI so the pattern markup stays pure core blocks. */
.smo-benefit::before {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.smo-benefit p {
	margin: 0;
}

.smo-contact-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.smo-contact-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-lg);
	padding: 18px 20px;
}

.smo-contact-item::before {
	content: '';
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.smo-contact-item--phone::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231959A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.smo-contact-item--mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231959A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

.smo-contact-item--place::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231959A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 1 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.smo-contact-item p {
	margin: 0;
}

.smo-download .wp-block-button__link::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231959A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M6 9l6 6 6-6M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.smo-contact-item__primary {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--smo-on-surface);
}

.smo-contact-item__primary a {
	color: inherit;
	text-decoration: none;
}

.smo-contact-item__primary a:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

.smo-contact-item__secondary {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--smo-tertiary);
}

.smo-form-card {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-2xl);
	padding: 36px;
}

.smo-form-card--contact {
	padding: 32px;
}

.smo-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.smo-field--wide {
	grid-column: span 2;
}

.smo-field__label {
	display: block;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--smo-on-surface-variant);
	margin-bottom: 6px;
}

.smo-field__required {
	color: var(--smo-error);
	margin-left: 2px;
}

/* MD3 filled text field: tonal box, single bottom indicator line. */
.smo-input,
.smo-textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: var(--smo-on-surface);
	background: var(--smo-surface-container-high);
	border: 0;
	border-bottom: 2px solid var(--smo-outline);
	border-radius: var(--smo-radius-sm) var(--smo-radius-sm) 0 0;
	padding: 10px 14px;
	transition: border-color var(--smo-transition), background-color var(--smo-transition);
}

.smo-input {
	height: 44px;
}

.smo-textarea {
	height: 120px;
	min-height: 120px;
	resize: vertical;
	padding-top: 12px;
}

.smo-input:hover,
.smo-textarea:hover {
	background: #DAE2EE;
}

.smo-input:focus,
.smo-textarea:focus {
	outline: none;
	border-bottom-color: var(--smo-primary);
	border-bottom-width: 2px;
	box-shadow: inset 0 -1px 0 0 var(--smo-primary);
}

.smo-input:focus-visible,
.smo-textarea:focus-visible {
	outline: 3px solid var(--smo-primary);
	outline-offset: 2px;
}

.smo-input[aria-invalid='true'],
.smo-textarea[aria-invalid='true'] {
	border-bottom-color: var(--smo-error);
}

.smo-field__error {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: var(--smo-error);
	margin-top: 6px;
}

/* File drop zone. */
.smo-dropzone {
	position: relative;
	background: var(--smo-surface-container-high);
	border: 1px dashed var(--smo-outline);
	border-radius: var(--smo-radius-md);
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--smo-on-surface-variant);
	cursor: pointer;
	transition: background-color var(--smo-transition), border-color var(--smo-transition);
}

.smo-dropzone:hover,
.smo-dropzone.is-dragover {
	background: var(--smo-primary-container);
	border-color: var(--smo-primary);
	color: var(--smo-primary-dark);
}

.smo-dropzone input[type='file'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.smo-dropzone:focus-within {
	outline: 3px solid var(--smo-primary);
	outline-offset: 2px;
}

.smo-dropzone__hint {
	display: block;
	font-size: 11.5px;
	color: var(--smo-tertiary);
	margin-top: 4px;
}

/* Consent checkbox. */
.smo-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--smo-on-surface-variant);
}

.smo-check input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	border: 1px solid var(--smo-outline);
	border-radius: var(--smo-radius-xs);
	background: transparent;
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color var(--smo-transition), border-color var(--smo-transition);
}

.smo-check input[type='checkbox']::after {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}

.smo-check input[type='checkbox']:checked {
	background: var(--smo-primary);
	border-color: var(--smo-primary);
}

.smo-check input[type='checkbox']:checked::after {
	opacity: 1;
}

.smo-form__actions {
	grid-column: span 2;
	margin-top: 6px;
}

/* Honeypot — hidden from humans, reachable by dumb bots. */
.smo-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submission feedback. */
.smo-notice {
	border-radius: var(--smo-radius-md);
	padding: 16px 20px;
	font-size: 13.5px;
	line-height: 1.7;
	margin-bottom: 24px;
}

.smo-notice--success {
	background: var(--smo-success-container);
	color: var(--smo-success);
}

.smo-notice--error {
	background: var(--smo-error-container);
	color: var(--smo-error);
}

.smo-notice__title {
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
}

.smo-notice ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* ==========================================================================
   16. Site footer
   ========================================================================== */

.smo-footer {
	background: var(--smo-inverse-surface);
	color: var(--smo-on-inverse-surface);
	border-radius: var(--smo-radius-3xl) var(--smo-radius-3xl) 0 0;
	position: relative;
	overflow: hidden;
	margin-top: 40px;
}

.smo-footer::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 280px;
	height: 280px;
	border-radius: var(--smo-radius-full);
	background: var(--smo-accent);
	opacity: .18;
	filter: blur(64px);
	pointer-events: none;
}

.smo-footer__inner {
	box-sizing: border-box;
	max-width: var(--smo-chrome-max);
	margin-inline: auto;
	padding: 52px var(--smo-chrome-gutter) 32px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	position: relative;
}

.smo-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	text-decoration: none;
}

.smo-footer__brand img,
.smo-footer__brand .wp-block-site-logo img {
	height: 48px;
	width: auto;
	/* Knock the logo back to a single white mark on the dark surface. */
	filter: brightness(0) invert(1);
	opacity: .9;
}

.smo-footer__brand .wp-block-site-title a,
.smo-footer__brand-name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
}

.smo-footer__brand-name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.smo-footer__about {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--smo-inverse-body);
	max-width: 320px;
	margin: 0;
}

.smo-footer__heading {
	font-size: 12px;
	letter-spacing: .08em;
	line-height: 1.5;
	color: var(--smo-inverse-muted);
	margin: 0 0 14px;
	text-transform: uppercase;
}

.smo-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smo-footer__links a,
.smo-footer__links span {
	color: var(--smo-on-inverse-surface);
	text-decoration: none;
}

.smo-footer__links a:hover {
	color: #fff;
	text-decoration: underline;
}

.smo-footer__bottom {
	box-sizing: border-box;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 18px var(--smo-chrome-gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: var(--smo-chrome-max);
	margin-inline: auto;
	font-size: 12px;
	line-height: 1.6;
	color: var(--smo-inverse-muted);
	position: relative;
}

.smo-footer__legal {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smo-footer__legal a {
	color: var(--smo-inverse-muted);
	text-decoration: none;
}

.smo-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   17. Core block bridges
   The templates are built from core blocks; these rules map core's markup onto
   the visual language of the mockups.
   ========================================================================== */

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

.wp-block-button__link {
	box-shadow: var(--smo-elev-primary);
	transition: background-color var(--smo-transition), color var(--smo-transition);
}

.wp-block-button.is-style-smo-tonal .wp-block-button__link {
	background: #fff;
	color: var(--smo-primary);
	font-size: 13px;
	padding: 12px 22px;
	box-shadow: var(--smo-elev-2);
}

.wp-block-button.is-style-smo-tonal .wp-block-button__link:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.wp-block-button.is-style-smo-on-primary .wp-block-button__link {
	background: #fff;
	color: var(--smo-primary);
	padding: 14px 28px;
	box-shadow: var(--smo-elev-raised);
}

.wp-block-button.is-style-smo-on-primary .wp-block-button__link:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.wp-block-button.is-style-smo-outline-inverse .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
	padding: 13px 27px;
	box-shadow: none;
}

.wp-block-button.is-style-smo-outline-inverse .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* --- Query loops -------------------------------------------------------- */

/* Badges are assembled from post-terms + post-date inside a flex group. */
.smo-badge {
	text-transform: uppercase;
}

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

.smo-badge a:hover {
	text-decoration: underline;
}

.smo-badge .wp-block-post-date,
.smo-badge .wp-block-post-terms {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/* Core's flex layout would make the badge a full-width block; two classes beat
   its single-class container rule regardless of source order. */
.smo-posts .smo-badge,
.smo-list__body .smo-badge {
	display: inline-flex;
	align-items: center;
	width: auto;
	gap: 4px;
}

/* Press coverage reads as neutral rather than institutional blue. */
.category-dimosievmata .smo-badge,
.category-radiofono-tv .smo-badge {
	background: var(--smo-tertiary-container);
	color: var(--smo-on-tertiary-container);
}

.smo-posts .wp-block-post-template {
	gap: 20px;
}

/* 3-up teasers (home). */
.smo-posts--teaser .wp-block-post {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 24px;
	box-shadow: var(--smo-elev-1);
	transition: box-shadow var(--smo-transition);
}

.smo-posts--teaser .wp-block-post:hover {
	box-shadow: var(--smo-elev-2);
}

/* 2-up cards (news listing). */
.smo-posts--cards .wp-block-post {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 28px;
	transition: box-shadow var(--smo-transition);
}

.smo-posts--cards .wp-block-post:hover {
	box-shadow: var(--smo-elev-2);
}

.smo-posts .wp-block-post-title {
	margin: 14px 0 8px;
}

.smo-posts .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.smo-posts .wp-block-post-title a:hover {
	color: var(--smo-primary);
	text-decoration: underline;
}

.smo-posts--teaser .wp-block-post-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	margin: 14px 0 0;
}

.smo-posts--cards .wp-block-post-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.smo-posts--cards .wp-block-post-excerpt,
.smo-posts--cards .wp-block-post-excerpt__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smo-on-surface-variant);
	margin: 0;
}

/* List rows (activities). */
.smo-posts--rows .wp-block-post-template {
	gap: 14px;
}

.smo-posts--rows .wp-block-post-title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	margin: 10px 0 0;
}

.smo-posts--rows .wp-block-post-excerpt,
.smo-posts--rows .wp-block-post-excerpt__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smo-on-surface-variant);
	margin: 6px 0 0;
}

.smo-posts .wp-block-post-excerpt__more-link {
	display: none;
}

/* Letters listing. */
.smo-posts--letters .wp-block-post-template {
	gap: 12px;
}

.smo-posts--letters .wp-block-post {
	background: none;
	padding: 0;
}

.smo-posts--letters .wp-block-post-title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

/* Cards carry no image: the association publishes announcements as text.
   Grid items still stretch to their row, so centre the content and the slack
   reads as balanced padding instead of a hole under the excerpt. */
.smo-posts--cards .wp-block-post,
.smo-posts--teaser .wp-block-post {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.smo-posts--cards .wp-block-post > *,
.smo-posts--teaser .wp-block-post > * {
	max-width: 100%;
}

.smo-posts--cards .wp-block-post-title,
.smo-posts--cards .wp-block-post-excerpt,
.smo-posts--teaser .wp-block-post-title {
	align-self: stretch;
}

/* Empty-state paragraph inside a query. */
.wp-block-query-no-results p {
	background: var(--smo-surface-container);
	border-radius: var(--smo-radius-xl);
	padding: 28px;
	margin: 0;
	color: var(--smo-on-surface-variant);
}

/* --- Pagination --------------------------------------------------------- */

.smo-pagination {
	justify-content: center;
}

.smo-pagination .wp-block-query-pagination-previous,
.smo-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding-inline: 18px;
	background: var(--smo-surface-container);
	color: var(--smo-body);
	font-size: 13px;
	border-radius: var(--smo-radius-full);
	text-decoration: none;
}

.smo-pagination .wp-block-query-pagination-previous:hover,
.smo-pagination .wp-block-query-pagination-next:hover {
	background: var(--smo-primary-container);
	color: var(--smo-primary-dark);
}

.smo-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* --- Search ------------------------------------------------------------- */

.wp-block-search__input {
	font-family: inherit;
	font-size: 14px;
	color: var(--smo-on-surface);
	background: var(--smo-surface-container-high);
	border: 0;
	border-bottom: 2px solid var(--smo-outline);
	border-radius: var(--smo-radius-sm) var(--smo-radius-sm) 0 0;
	padding: 12px 14px;
}

.wp-block-search__input:focus {
	outline: none;
	border-bottom-color: var(--smo-primary);
}

.wp-block-search__button {
	background: var(--smo-primary);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	border-radius: var(--smo-radius-full);
	padding: 12px 26px;
	cursor: pointer;
}

.wp-block-search__button:hover {
	background: var(--smo-primary-dark);
}

/* --- Post content injected via wp:post-content -------------------------- */

.smo-doc .wp-block-heading,
.smo-article__body .wp-block-heading {
	scroll-margin-top: 24px;
}

/* ==========================================================================
   18. Vertical rhythm between sections
   ========================================================================== */

.smo-pt-0 { padding-top: 0; }
.smo-pt-24 { padding-top: 24px; }
.smo-pt-32 { padding-top: 32px; }
.smo-pt-40 { padding-top: 40px; }
.smo-pt-44 { padding-top: 44px; }
.smo-pt-56 { padding-top: 56px; }

.smo-pb-0 { padding-bottom: 0; }
.smo-pb-24 { padding-bottom: 24px; }
.smo-pb-32 { padding-bottom: 32px; }
.smo-pb-40 { padding-bottom: 40px; }
.smo-pb-56 { padding-bottom: 56px; }

/* ==========================================================================
   19. Responsive
   The mockups are desktop-only at 1200px; everything below is derived.
   ========================================================================== */

@media (max-width: 1200px) {
	:root {
		--smo-gutter: 48px;
		--smo-chrome-gutter: 40px;
	}

	.smo-hero {
		padding: 72px 48px 80px;
	}
}

/* Nav has 7 items plus a CTA — collapse to the overlay well before 600px. */
@media (max-width: 1080px) {
	.smo-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.smo-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.smo-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		background: var(--smo-surface);
	}

	/* The desktop nav is right-justified; core reuses that alignment inside the
	   overlay, which would push the stacked links against the right edge. */
	.smo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
	}

	.smo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.smo-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 16px;
		padding: 10px 16px;
	}
}

@media (max-width: 1024px) {
	:root {
		--smo-gutter: 40px;
		--smo-gutter-tight: 20px;
		--smo-chrome-gutter: 32px;
	}

	.smo-split--doc,
	.smo-split--article {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.smo-toc {
		position: static;
	}

	/* On one column the TOC becomes a horizontal chip rail. */
	.smo-toc__list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.smo-toc__link {
		background: var(--smo-surface-container);
	}

	.smo-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.smo-footer__brand-col {
		grid-column: span 3;
	}

	.smo-footer__about {
		max-width: none;
	}
}

@media (max-width: 900px) {
	.smo-grid--3 {
		grid-template-columns: 1fr 1fr;
	}

	.smo-split--about,
	.smo-split--form,
	.smo-split--even {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.smo-hero {
		border-radius: var(--smo-radius-3xl);
		padding: 64px 32px 72px;
	}

	.smo-page-header {
		padding: 32px 28px;
	}

	.smo-quote {
		padding: 32px 28px;
	}

	.smo-cta-band {
		padding: 28px;
	}


	.smo-doc {
		padding: 28px 24px;
	}

	.smo-article__body {
		padding: 28px 24px;
	}

	.smo-form-card,
	.smo-form-card--contact {
		padding: 28px 24px;
	}
}

@media (max-width: 640px) {
	:root {
		--smo-gutter: 20px;
		--smo-gutter-tight: 16px;
		--smo-chrome-gutter: 20px;
	}

	body {
		font-size: 15px;
	}

	.smo-grid--3,
	.smo-grid--2 {
		grid-template-columns: 1fr;
	}

	.smo-topbar__inner {
		justify-content: center;
		text-align: center;
		row-gap: 6px;
	}

	.smo-topbar__group {
		gap: 14px;
		justify-content: center;
	}

	.smo-topbar__org {
		display: none;
	}

	.smo-header__bar {
		padding: 12px 20px;
	}

	.smo-brand__name,
	.smo-brand .wp-block-site-title a {
		font-size: 13.5px;
		white-space: normal;
	}

	.smo-brand {
		white-space: normal;
	}

	.smo-brand .wp-block-site-logo img,
	.smo-brand__logo {
		height: 34px;
	}

	/* No room for the CTA beside the logo and the menu button at this size.
	   Membership stays one tap away via the hero button, the CTA band and the
	   footer link. Scoped to two classes to outrank core's
	   `.wp-block-buttons > .wp-block-button` rule. */
	.smo-header__bar .smo-header__cta-wrap {
		display: none;
	}

	.smo-hero {
		padding: 48px 22px 56px;
		border-radius: var(--smo-radius-xl);
	}

	.smo-hero__actions .smo-btn {
		width: 100%;
	}

	.smo-list__item {
		flex-direction: column;
		gap: 10px;
		padding: 20px;
	}

	.smo-list__date {
		width: auto;
	}




	.smo-posts--teaser .wp-block-post {
		padding: 20px;
	}

	.smo-posts--cards .wp-block-post {
		padding: 24px;
	}

	.smo-letter {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.smo-cta-band {
		flex-direction: column;
		align-items: flex-start;
	}

	.smo-page-header--split {
		flex-direction: column;
		align-items: flex-start;
	}

	.smo-form__grid {
		grid-template-columns: 1fr;
	}

	.smo-field--wide,
	.smo-form__actions {
		grid-column: span 1;
	}

	.smo-form__actions .smo-btn {
		width: 100%;
	}

	.smo-footer {
		border-radius: var(--smo-radius-xl) var(--smo-radius-xl) 0 0;
	}

	.smo-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.smo-footer__brand-col {
		grid-column: span 1;
	}

	.smo-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   20. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.smo-topbar,
	.smo-header .wp-block-navigation,
	.smo-header__cta,
	.smo-footer__blob,
	.smo-toc,
	.smo-chips,
	.smo-pagination,
	.smo-cta-band {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.smo-doc,
	.smo-article__body,
	.smo-card {
		background: #fff;
		box-shadow: none;
	}
}