/**
 * Rotary District 2475 — design system.
 *
 * Ported from the approved Claude Design comp. Brand tokens follow
 * brandcenter.rotary.org: Royal Blue for headings and depth, Azure as the main
 * interactive blue, Sky as accent/hover, and Gold strictly as an accent — never
 * as text or as a filled button, which would fail WCAG AA at ~1.9:1.
 */

/* ============================================================ 1. TOKENS === */

:root {
	/* Brand */
	--rd-royal: #17458F;
	--rd-azure: #0067C8;
	--rd-azure-dark: #0056A8;
	--rd-sky: #00A2E0;
	--rd-gold: #F7A81B;
	--rd-deep: #0F2E63;
	/* The gear-wheel mark used as a small section/heading topper in place of
	   a plain gold rule (§ TYPOGRAPHY, ACT LABEL, NAV). */
	--rd-mark: url('https://d2475.hermit.website/wp-content/uploads/2026/09/rotary-logo-wheel.png');

	/* Neutrals */
	--rd-ink: #3A3F4A;
	--rd-muted: #5A6270;
	/* The comp's faint grey was #9AA6B6, which only reaches 2.5:1 on white and
	   fails AA everywhere it is used as a label. Darkened to the nearest tone
	   that clears 4.5:1 on white, off-white and pale-azure alike. */
	--rd-faint: #5F6E82;
	--rd-line: #E7EBF0;
	--rd-line-2: #E1EAF4;
	--rd-line-3: #D6E2F0;
	--rd-pale: #EAF3FB;
	--rd-offwhite: #F5F8FC;
	--rd-mist: #DCE6F2;
	--rd-canvas: #EEF1F5;
	--rd-white: #FFFFFF;
	--rd-success: #0A7A3C;
	--rd-error: #B3261E;

	/* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
	--rd-1: 4px;
	--rd-2: 8px;
	--rd-3: 12px;
	--rd-4: 16px;
	--rd-5: 24px;
	--rd-6: 32px;
	--rd-7: 48px;
	--rd-8: 64px;
	--rd-9: 96px;

	/* Header height — padding (--rd-4 × 2) + the 88px logo. Matches the
	   scroll-padding-top below that keeps anchors clear of the sticky header. */
	--rd-header-h: 120px;

	/* Radii */
	--rd-r-sm: 8px;
	--rd-r-md: 12px;
	--rd-r-lg: 16px;
	--rd-r-xl: 22px;
	--rd-r-2xl: 28px;
	--rd-r-frame: 20px;

	/* Shadows */
	--rd-shadow-frame: 0 30px 80px -30px rgba(23, 69, 143, .35);
	--rd-shadow-card: 0 1px 2px rgba(23, 69, 143, .04);
	--rd-shadow-lift: 0 22px 40px -20px rgba(0, 103, 200, .5);
	--rd-shadow-panel: 0 30px 70px -40px rgba(23, 69, 143, .4);

	/* Horizontal breathing room inside the frame; overridden per breakpoint.
	   Fixed px, not em — em resolved differently depending on the inherited
	   font-size at each of this token's 4 usage sites. */
	--cx: 68px;
}

/* ============================================================== 2. BASE === */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Keeps in-page anchors clear of the sticky header. */
	scroll-padding-top: var(--rd-header-h);
}

body {
	margin: 0;
	font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--rd-ink);
	background: var(--rd-canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--rd-azure);
	text-decoration: none;
}

a:hover {
	/* --rd-sky vs white is 2.9:1, fails AA; --rd-azure-dark (already used for
	   other hover states) is 7.2:1. */
	color: var(--rd-azure-dark);
}

h1, h2, h3, h4 {
	margin: 0 0 var(--rd-4);
	color: var(--rd-royal);
	letter-spacing: -.01em;
	text-wrap: balance;
}

p {
	margin: 0 0 var(--rd-4);
}

p:last-child {
	margin-bottom: 0;
}

/* Every interactive element gets the same visible focus ring. */
:focus-visible {
	outline: 3px solid var(--rd-sky);
	outline-offset: 2px;
	border-radius: 4px;
}

.rd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--rd-3) var(--rd-5);
	background: var(--rd-white);
	color: var(--rd-royal);
	font-weight: 700;
	border-radius: 0 0 var(--rd-r-md) 0;
}

.rd-skip:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================ 3. LAYOUT === */

.rd-page {
	width: 100%;
	background: var(--rd-canvas);
	padding-bottom: 2em;
}

/* The rounded white "sheet" the whole site sits on. */
.rd-frame {
	position: relative;
	margin: 2em;
	background: var(--rd-white);
	border-radius: var(--rd-r-frame);
	overflow: hidden;
	box-shadow: var(--rd-shadow-frame);
}

.rd-shell {
	max-width: 1600px;
	margin: 0 auto;
	padding-left: var(--cx);
	padding-right: var(--cx);
}

.rd-shell--narrow {
	max-width: 1500px;
}

.rd-shell--tight {
	max-width: 1200px;
}

.rd-shell--prose {
	max-width: 900px;
}

.rd-section {
	padding-top: var(--rd-9);
	padding-bottom: var(--rd-9);
}

.rd-section--tight {
	padding-top: var(--rd-8);
	padding-bottom: var(--rd-8);
}

.rd-section--flush-top {
	padding-top: 0;
}

.rd-section--flush-bottom {
	padding-bottom: 0;
}

.rd-section--pale {
	background: var(--rd-pale);
	border-top: 1px solid var(--rd-line-3);
}

.rd-section--offwhite {
	background: var(--rd-offwhite);
	border-top: 1px solid var(--rd-line);
}

/* Act 2 — «ΕΜΠΝΕΟΜΑΙ». A gentle pale-azure wash so the page reads as three
   breaths rather than eleven identical boxes. */
.rd-act2 {
	background: linear-gradient(180deg, var(--rd-offwhite) 0%, var(--rd-pale) 18%, var(--rd-pale) 82%, var(--rd-offwhite) 100%);
}

.rd-centered {
	margin-top: 44px;
	text-align: center;
}

.rd-rule {
	display: block;
	width: 36px;
	height: 36px;
	background-image: var(--rd-mark);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto var(--rd-5);
}

/* ========================================================= 4. TYPOGRAPHY === */

.rd-kicker {
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .16em;
	color: var(--rd-azure);
	text-transform: uppercase;
}

.rd-sectionhead {
	margin-bottom: var(--rd-7);
}

.rd-sectionhead--center {
	text-align: center;
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}

.rd-sectionhead__title {
	margin: 14px 0 0;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.12;
	font-weight: 800;
}

.rd-sectionhead__lead {
	margin: var(--rd-3) 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--rd-muted);
	max-width: 60ch;
}

.rd-sectionhead--center .rd-sectionhead__lead {
	margin-left: auto;
	margin-right: auto;
}

.rd-sectionhead__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rd-5);
	flex-wrap: wrap;
	margin-bottom: var(--rd-7);
}

.rd-sectionhead__row .rd-sectionhead {
	margin-bottom: 0;
	max-width: 620px;
}

.rd-sectionhead__actions {
	display: flex;
	align-items: center;
	gap: var(--rd-4);
	flex-shrink: 0;
}

.rd-tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--rd-azure);
	text-transform: uppercase;
}

.rd-intro {
	max-width: 900px;
}

.rd-intro__title {
	margin: var(--rd-4) 0 0;
	font-size: clamp(32px, 5.2vw, 52px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.02em;
}

.rd-intro__para {
	margin: var(--rd-5) 0 0;
	font-size: 19px;
	line-height: 1.7;
	color: var(--rd-ink);
}

/* Long-form body copy (legal pages, articles). */
.rd-prose {
	font-size: 17px;
	line-height: 1.75;
	color: var(--rd-ink);
}

.rd-prose h2 {
	margin: var(--rd-7) 0 var(--rd-3);
	font-size: 26px;
	font-weight: 800;
}

.rd-prose h2:first-child {
	margin-top: 0;
}

.rd-prose h3 {
	margin: var(--rd-6) 0 var(--rd-2);
	font-size: 20px;
	font-weight: 700;
}

/* Q&A page: every question in its own card instead of flowing prose. */
.rd-shell--qa {
	max-width: 820px;
}

.rd-qa-list {
	display: flex;
	flex-direction: column;
	gap: var(--rd-5);
}

.rd-qa-item {
	padding: var(--rd-6);
	border-radius: var(--rd-r-xl);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	box-shadow: var(--rd-shadow-card);
}

.rd-qa-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-4);
	cursor: pointer;
	list-style: none;
}

.rd-qa-item__q::-webkit-details-marker {
	display: none;
}

.rd-qa-item__qtext {
	margin: 0;
}

.rd-qa-item h2.rd-qa-item__qtext::before {
	content: none;
}

.rd-qa-item__toggle {
	display: flex;
	flex-shrink: 0;
	color: var(--rd-azure);
	transition: transform .2s ease;
}

.rd-qa-item[open] .rd-qa-item__toggle {
	transform: rotate(180deg);
}

.rd-qa-item__q:hover .rd-qa-item__qtext {
	color: var(--rd-azure);
}

.rd-qa-item__a {
	margin-top: var(--rd-4);
}

.rd-qa-item__a p:last-child {
	margin-bottom: 0;
}

.rd-prose ul,
.rd-prose ol {
	margin: 0 0 var(--rd-4);
	padding-left: 1.25em;
}

.rd-prose li {
	margin-bottom: var(--rd-2);
}

.rd-prose blockquote {
	margin: var(--rd-6) 0;
	padding: var(--rd-4) var(--rd-5);
	border-left: 3px solid var(--rd-gold);
	background: var(--rd-offwhite);
	font-size: 19px;
	line-height: 1.6;
	color: var(--rd-royal);
	font-weight: 600;
}

.rd-prose img {
	border-radius: var(--rd-r-lg);
	margin: var(--rd-5) 0;
}

.rd-prose table {
	width: 100%;
	margin: var(--rd-4) 0 var(--rd-5);
	border-collapse: collapse;
	font-size: 14.5px;
}

.rd-prose th,
.rd-prose td {
	padding: 10px var(--rd-3);
	border: 1px solid var(--rd-line-2);
	text-align: left;
	vertical-align: top;
}

.rd-prose th {
	background: var(--rd-pale);
	color: var(--rd-royal);
	font-weight: 700;
}

/* =========================================================== 5. BUTTONS === */

.rd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	min-height: 44px;
	border: 0;
	border-radius: var(--rd-r-md);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.rd-btn--primary {
	background: var(--rd-azure);
	color: var(--rd-white);
	box-shadow: 0 12px 28px -10px rgba(0, 103, 200, .8);
}

.rd-btn--primary:hover {
	background: var(--rd-azure-dark);
	color: var(--rd-white);
	transform: translateY(-2px);
}

.rd-btn:active {
	transform: translateY(0) scale(.99);
}

.rd-btn--ghost:active {
	background: rgba(255, 255, 255, .24);
}

.rd-btn--outline:active {
	background: #DCE9F7;
}

/* Ghost / outline over dark imagery. */
.rd-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border: 1.5px solid rgba(255, 255, 255, .8);
	color: var(--rd-white);
}

.rd-btn--ghost:hover {
	background: rgba(255, 255, 255, .16);
	border-color: var(--rd-white);
	color: var(--rd-white);
}

/* Outline on light backgrounds. */
.rd-btn--outline {
	background: var(--rd-white);
	border: 1.5px solid var(--rd-azure);
	color: var(--rd-azure);
}

.rd-btn--outline:hover {
	background: var(--rd-pale);
	color: var(--rd-azure-dark);
}

/* White button sitting on the blue climax band. */
.rd-btn--onblue {
	background: var(--rd-white);
	color: var(--rd-azure);
	padding: 17px 40px;
	font-size: 18px;
	font-weight: 800;
	border-radius: 14px;
	box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .5);
}

.rd-btn--onblue:hover {
	color: var(--rd-azure-dark);
	transform: translateY(-2px);
}

.rd-btn--small {
	padding: 11px 18px;
	font-size: 15px;
}

.rd-btn[disabled],
.rd-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.rd-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-2);
	min-height: 44px;
	font-size: 16px;
	font-weight: 700;
	color: var(--rd-azure);
}

.rd-arrowlink .rd-icon {
	transition: transform .2s ease;
}

.rd-arrowlink:hover .rd-icon {
	transform: translateX(3px);
}

/* ============================================================ 6. HEADER === */

.rd-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--rd-white);
	border-bottom: 1px solid var(--rd-line);
	box-shadow: 0 6px 24px -14px rgba(23, 69, 143, .12);
	transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.rd-header__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: var(--rd-4) var(--cx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-5);
}

.rd-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.rd-logo img {
	height: 88px;
	width: auto;
}

.rd-logo__white {
	display: none;
}

.rd-nav {
	display: flex;
	align-items: center;
	gap: var(--rd-2);
}

.rd-navlink {
	padding: 10px 14px;
	white-space: nowrap;
	border-radius: var(--rd-r-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--rd-ink);
	transition: color .2s ease, background .2s ease;
}

.rd-navlink:hover,
.rd-navlink:focus-visible {
	color: var(--rd-azure);
	background: var(--rd-pale);
}

/* "Current page" reads by color alone — bolder and the same azure the rest
   of the nav already uses for hover/focus, rather than an underline. */
.rd-navlink.is-current {
	color: var(--rd-azure);
	background: var(--rd-pale);
	font-weight: 800;
}

/* The members-only documents entry, marked with a padlock. */
.rd-navdocs {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	gap: 7px;
	margin-left: var(--rd-1);
	padding: 10px 14px;
	min-height: 44px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--rd-ink);
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.rd-navdocs:hover {
	color: var(--rd-azure);
	border-color: var(--rd-azure);
}

.rd-navjoin {
	white-space: nowrap;
	margin-left: var(--rd-1);
	padding: 11px 20px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	border-radius: 10px;
	background: var(--rd-azure);
	color: var(--rd-white);
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 6px 16px -6px rgba(0, 103, 200, .6);
	transition: background .2s ease, transform .15s ease;
}

.rd-navjoin:hover {
	background: var(--rd-azure-dark);
	color: var(--rd-white);
	transform: translateY(-1px);
}

/* -- Transparent-over-hero variant, homepage only. */
.rd-has-transparent-header .rd-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* A soft scrim under the transparent header keeps the white nav readable even
   if the hero photo happens to be bright at the top. */
.rd-has-transparent-header .rd-header::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Behind the header's own background but still inside its stacking context,
	   so it sits over the hero without covering the nav. */
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(15, 46, 99, .55), rgba(15, 46, 99, 0));
	transition: opacity .3s ease;
}

.rd-has-transparent-header .rd-header.is-scrolled::before {
	opacity: 0;
}

.rd-has-transparent-header .rd-header .rd-navlink,
.rd-has-transparent-header .rd-header .rd-navdocs {
	color: var(--rd-white);
	border-color: rgba(255, 255, 255, .35);
}

.rd-has-transparent-header .rd-header .rd-navlink:hover,
.rd-has-transparent-header .rd-header .rd-navdocs:hover {
	color: var(--rd-white);
	background: rgba(255, 255, 255, .14);
}

.rd-has-transparent-header .rd-header .rd-logo__white {
	display: block;
}

.rd-has-transparent-header .rd-header .rd-logo__royal {
	display: none;
}

.rd-has-transparent-header .rd-header.is-scrolled {
	background: var(--rd-white);
	border-bottom-color: var(--rd-line);
	box-shadow: 0 6px 24px -14px rgba(23, 69, 143, .4);
}

.rd-has-transparent-header .rd-header.is-scrolled .rd-navlink,
.rd-has-transparent-header .rd-header.is-scrolled .rd-navdocs {
	color: var(--rd-royal);
	border-color: var(--rd-line);
}

.rd-has-transparent-header .rd-header.is-scrolled .rd-logo__white {
	display: none;
}

.rd-has-transparent-header .rd-header.is-scrolled .rd-logo__royal {
	display: block;
}

/* -- Mobile menu.
   The comp simply hid the nav links below 820px. That leaves a visitor with no
   way to reach the other pages, so the links move into a disclosure panel
   instead — same visual language, navigation intact. */
.rd-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--rd-line);
	border-radius: 10px;
	background: var(--rd-white);
	color: var(--rd-royal);
	cursor: pointer;
}

.rd-navtoggle__bars,
.rd-navtoggle__bars::before,
.rd-navtoggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.rd-navtoggle__bars::before,
.rd-navtoggle__bars::after {
	content: "";
	position: relative;
}

.rd-navtoggle__bars::before {
	top: -6px;
}

.rd-navtoggle__bars::after {
	top: 4px;
}

.rd-navtoggle[aria-expanded="true"] .rd-navtoggle__bars {
	background: transparent;
}

.rd-navtoggle[aria-expanded="true"] .rd-navtoggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.rd-navtoggle[aria-expanded="true"] .rd-navtoggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.rd-has-transparent-header .rd-header:not(.is-scrolled) .rd-navtoggle {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .45);
	color: var(--rd-white);
}

/* ============================================================== 7. HERO === */

.rd-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 92vh;
	overflow: hidden;
	background: var(--rd-deep);
	/* Pulled under the sticky header so the dark field covers the frame's top
	   corners evenly — no white notch. */
	margin-top: -124px;
	padding-top: 124px;
}

.rd-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rd-hero__bg img,
.rd-hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* 30–40% overlay, deepening top and bottom for text legibility. */
	background: linear-gradient(180deg, rgba(15, 46, 99, .55) 0%, rgba(15, 46, 99, .32) 45%, rgba(15, 46, 99, .62) 100%);
}

.rd-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: var(--rd-9);
	padding-bottom: var(--rd-9);
}

.rd-hero__content {
	max-width: 66.66%;
}

.rd-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-2);
	padding: 7px 14px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(247, 168, 27, .6);
	color: var(--rd-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	backdrop-filter: blur(4px);
}

.rd-hero__title {
	margin: var(--rd-5) 0 0;
	color: var(--rd-white);
	font-size: clamp(30px, 6.4vw, 60px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -.02em;
	text-shadow: 0 2px 24px rgba(15, 46, 99, .4);
}

.rd-hero__tagline {
	margin: 18px 0 0;
	/* Gold is legible here as a large 700-weight display line over a deep-blue
	   scrim, and it is never used at body size or as a control. */
	color: var(--rd-gold);
	font-size: 19px;
	font-weight: 700;
	text-shadow: 0 1px 12px rgba(15, 46, 99, .5);
}

.rd-hero__text {
	margin: 18px 0 0;
	max-width: 100%;
	color: rgba(255, 255, 255, .94);
	font-size: 20px;
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(15, 46, 99, .5);
}

.rd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-4);
	margin-top: 40px;
}

.rd-hero__scroll {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.rd-hero__mediactl {
	position: absolute;
	right: 24px;
	bottom: 26px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	background: rgba(15, 46, 99, .45);
	color: var(--rd-white);
	cursor: pointer;
	transition: background-color .2s ease;
}

.rd-hero__mediactl:hover {
	background: rgba(15, 46, 99, .7);
}

.rd-hero__mediactl-icon--play {
	display: none;
}

.rd-hero__mediactl.is-paused .rd-hero__mediactl-icon--pause {
	display: none;
}

.rd-hero__mediactl.is-paused .rd-hero__mediactl-icon--play {
	display: block;
}

/* Animated "scroll" mouse — the hero's sole scroll-down affordance. The
   wheel's fall-and-fade loop is muted to a single static frame by the
   sitewide prefers-reduced-motion rule above (wildcard selector, so it
   needs no repeating here). */
.rd-scrollmouse {
	display: block;
	width: 26px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: 100px;
}

.rd-scrollmouse__wheel {
	display: block;
	width: 4px;
	height: 8px;
	margin: 7px auto 0;
	border-radius: 100px;
	background: rgba(255, 255, 255, .9);
	animation: rd-scrollwheel 1.6s ease-in-out infinite;
}

@keyframes rd-scrollwheel {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	70% {
		transform: translateY(11px);
		opacity: 0;
	}

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

/* ============================================================= 8. MEDIA === */

.rd-media {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--rd-mist);
}

.rd-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stand-in for an unfilled photo slot — the comp's drop zones. */
.rd-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-4);
	background: repeating-linear-gradient(135deg, var(--rd-mist), var(--rd-mist) 12px, #D3DFEE 12px, #D3DFEE 24px);
}

/*
 * Where a placeholder sits *behind* page content — the hero, the feature-video
 * poster — the label moves into a corner. Centred, it lands straight on top of
 * the headline for as long as the real photograph is missing.
 */
.rd-hero .rd-media--empty,
.rd-videobtn .rd-media--empty {
	align-items: flex-end;
	justify-content: flex-end;
	padding: var(--rd-5);
}

/* Clear of the scroll cue that sits at the foot of the hero. */
.rd-hero .rd-media--empty {
	padding-bottom: var(--rd-8);
}

.rd-media__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	color: var(--rd-royal);
	background: rgba(255, 255, 255, .82);
	padding: var(--rd-2) var(--rd-3);
	border-radius: var(--rd-r-sm);
}

/* ====================================================== 9. ICON SURFACES === */

.rd-iconbox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--rd-r-lg);
	background: var(--rd-pale);
	border: 1px solid rgba(0, 103, 200, .15);
	color: var(--rd-gold);
	flex-shrink: 0;
}

.rd-iconbox--sm {
	width: 48px;
	height: 48px;
	border-radius: var(--rd-r-md);
}

.rd-iconbox--onblue {
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, .14);
	border: 0;
	color: var(--rd-gold);
}

/* ====================================================== 10. THREE COLUMNS == */

.rd-g3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-6);
}

.rd-sixty {
	text-align: center;
	padding: var(--rd-4);
}

.rd-sixty .rd-iconbox {
	margin: 0 auto var(--rd-5);
}

.rd-sixty__kicker {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--rd-royal);
}

.rd-sixty__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--rd-ink);
}

/* ========================================================= 11. CAUSE CARDS = */

.rd-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-5);
}

.rd-card {
	display: block;
	border-radius: var(--rd-r-lg);
	overflow: hidden;
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	box-shadow: var(--rd-shadow-card);
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rd-card:hover,
.rd-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--rd-shadow-lift);
	border-color: var(--rd-azure);
	color: inherit;
}

.rd-card__media {
	position: relative;
	height: 200px;
	background: var(--rd-mist);
}

.rd-card__icon {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--rd-r-md);
	background: rgba(255, 255, 255, .94);
	color: var(--rd-azure);
	box-shadow: 0 6px 16px -8px rgba(23, 69, 143, .5);
}

.rd-card__body {
	padding: 22px 22px 24px;
}

.rd-card__title {
	margin: 0 0 var(--rd-2);
	font-size: 21px;
	font-weight: 800;
}

.rd-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--rd-muted);
}

/* Explicit action links on a cause card (Δράσεις page + homepage «Άξονες»):
   the card itself is no longer a single giant link once it carries more than
   one destination, so these replace that with named links instead. */
.rd-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-4);
	margin-top: var(--rd-4);
}

/* Alternating story rows on the About page. */
.rd-story {
	display: flex;
	flex-direction: column;
	gap: var(--rd-5);
}

.rd-story__row {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--rd-7);
	align-items: center;
	padding: var(--rd-3) 0;
}

.rd-story__row:nth-child(even) .rd-story__media {
	order: 2;
}

.rd-story__media {
	height: 320px;
	border-radius: var(--rd-r-xl);
	overflow: hidden;
	background: var(--rd-mist);
}

.rd-story__title {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 800;
}

.rd-story__body p {
	margin: 0 0 var(--rd-3);
	font-size: 16px;
	line-height: 1.7;
}

.rd-story__body p:last-child {
	margin-bottom: 0;
	color: var(--rd-muted);
}

.rd-story .rd-iconbox {
	margin-bottom: 18px;
}

/* ========================================================== 12. NEWS CARDS = */

.rd-news {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rd-5);
}

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

.rd-newscard {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rd-newscard:hover,
.rd-newscard:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--rd-shadow-lift);
	border-color: var(--rd-azure);
	color: inherit;
}

/* Every card built by rd2475_news_card() — the Νέα index, the front-page
   teaser, Δράσεις, search, archives, related posts at the foot of an
   article — shares one photo frame, 4:3, rather than a fixed pixel height
   on some grids and a different crop on others. One frame means a photo
   takes up the same space relative to its card wherever the card appears.
   The article's own hero photo is a different case (single.php,
   .rd-article__hero--natural below) — it is the article's content, not a
   thumbnail representing it, so it is shown whole rather than cropped
   to this frame; a photo placed inside the article's own text keeps its
   own shape for the same reason (see .rd-prose img below). Filled, not
   letterboxed, is still right for THIS box: .rd-media__img's
   default object-fit: cover (see MEDIA above) is left in place here, so
   the photo is cropped to fill the frame. */
/* min-height: 0 is the fix, not decoration — .rd-newscard is a
   flex-direction: column container, this box is a flex item, and a flex
   item's automatic minimum height defaults to its CONTENT's min-content
   size. For a portrait photo, that content-derived floor is taller than
   4:3 and wins over aspect-ratio, so a tall photo silently ignored the
   4:3 frame and stretched the card to its own shape while photos in a
   landscape orientation sat at 4:3 as intended — cards next to each other
   in the same row ending up different heights depending on which way the
   photographer happened to be holding the camera. Confirmed by measuring
   the rendered box, not guessed: without this line a 900×1400 photo
   produced a 336×524 box (the photo's own 9:14), not 336×252 (4:3). */
.rd-newscard__media {
	height: auto;
	min-height: 0;
	aspect-ratio: 4 / 3;
	background: var(--rd-mist);
}

.rd-newscard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px;
}

.rd-newscard__title {
	margin: var(--rd-2) 0;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}

.rd-newscard__excerpt {
	flex: 1;
	margin: 0 0 var(--rd-4);
	font-size: 14px;
	line-height: 1.55;
	color: var(--rd-muted);
}

.rd-newscard__more {
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-azure);
}

/* ============================================================ 13. VIDEO === */

.rd-videobtn {
	position: relative;
	width: 100%;
	border-radius: var(--rd-r-xl);
	overflow: hidden;
	background: var(--rd-deep);
	box-shadow: 0 40px 80px -40px rgba(23, 69, 143, .6);
}

/* The trigger covers the whole poster; the poster itself is plain markup so a
   <div> never ends up inside a <button>. */
.rd-videobtn__trigger {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.rd-videobtn__trigger:focus-visible {
	outline-offset: -6px;
}

.rd-videobtn__media {
	display: block;
	height: 560px;
}

.rd-videobtn__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(15, 46, 99, .15), rgba(15, 46, 99, .45));
}

.rd-videobtn__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	color: var(--rd-azure);
	animation: rd-pulse 2.6s infinite;
}

.rd-videobtn__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 32px;
	text-align: left;
	color: var(--rd-white);
	font-size: 22px;
	font-weight: 800;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
	pointer-events: none;
}

@keyframes rd-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
	70% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* A lightweight lightbox for the feature video. */
.rd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-5);
	background: rgba(15, 46, 99, .88);
}

.rd-lightbox[hidden] {
	display: none;
}

.rd-lightbox__inner {
	position: relative;
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	border-radius: var(--rd-r-lg);
	overflow: hidden;
	background: #000;
}

.rd-lightbox__inner iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.rd-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	min-height: 44px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--rd-r-sm);
	background: var(--rd-white);
	color: var(--rd-royal);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ============================================================ 14. STATS === */

.rd-statgrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.rd-stat {
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-lg);
	padding: 28px 22px;
	text-align: center;
	box-shadow: 0 12px 30px -22px rgba(23, 69, 143, .4);
}

.rd-stat__num {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--rd-royal);
	font-variant-numeric: tabular-nums;
}

.rd-stat__label {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rd-muted);
}

/* The "not yet verified" state — designed, and shown to editors only. */
.rd-statplaceholder {
	border: 1.5px dashed #B9CBE2;
	border-radius: var(--rd-r-lg);
	padding: 44px 32px;
	background: rgba(255, 255, 255, .6);
	text-align: center;
}

.rd-statplaceholder .rd-iconbox {
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 14px;
}

.rd-statplaceholder h3 {
	margin: 0 0 var(--rd-2);
	font-size: 20px;
	font-weight: 800;
}

.rd-statplaceholder p {
	max-width: 460px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rd-muted);
}

/* ========================================================= 15. GOVERNOR === */

.rd-gov {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 340px) 1fr;
	gap: var(--rd-7);
	align-items: center;
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: 24px;
	padding: 40px;
	box-shadow: var(--rd-shadow-panel);
}

.rd-gov__year {
	position: absolute;
	top: var(--rd-4);
	right: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--rd-faint);
}

.rd-gov__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	overflow: hidden;
	background: var(--rd-mist);
}

.rd-gov__quote {
	margin: var(--rd-3) 0 18px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 800;
}

.rd-gov__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

.rd-gov__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rd-4);
	margin-top: 22px;
}

.rd-gov__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--rd-royal);
}

/* ============================================================= 16. JOIN === */

.rd-joinband {
	position: relative;
	border-radius: var(--rd-r-2xl);
	overflow: hidden;
	background: linear-gradient(135deg, var(--rd-royal) 0%, var(--rd-azure) 60%, #0A5AB0 100%);
	padding: var(--rd-8) var(--rd-7);
	color: var(--rd-white);
}

.rd-joinband::after {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 162, 224, .5), transparent 70%);
	pointer-events: none;
}

.rd-joinband__head {
	position: relative;
	text-align: center;
	max-width: 90%;
	margin: 0 auto var(--rd-7);
}

.rd-joinband__title {
	margin: 0;
	color: var(--rd-white);
	font-size: clamp(30px, 5.2vw, 44px);
	line-height: 1.1;
	font-weight: 800;
}

.rd-joinband__lead {
	margin: var(--rd-4) 0 0;
	font-size: 19px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

.rd-join {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

.rd-joincard {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 18px;
	padding: 28px 22px;
	text-align: center;
	color: var(--rd-white);
	transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

a.rd-joincard:hover,
a.rd-joincard:focus-visible {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .45);
	transform: translateY(-4px);
	color: var(--rd-white);
}

.rd-joincard .rd-iconbox {
	margin: 0 auto 18px;
}

.rd-joincard__title {
	margin: 0 0 var(--rd-2);
	color: var(--rd-white);
	font-size: 19px;
	font-weight: 800;
}

.rd-joincard__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

.rd-joinband__foot {
	position: relative;
	text-align: center;
}

/* The same gradient band, used as a page-closing CTA. */
.rd-ctaband {
	position: relative;
	border-radius: var(--rd-r-2xl);
	overflow: hidden;
	background: linear-gradient(135deg, var(--rd-royal) 0%, var(--rd-azure) 60%, #0A5AB0 100%);
	padding: var(--rd-8) var(--rd-7);
	color: var(--rd-white);
	text-align: center;
}

.rd-ctaband__title {
	margin: 0;
	color: var(--rd-white);
	font-size: clamp(28px, 4.6vw, 40px);
	line-height: 1.15;
	font-weight: 800;
}

.rd-ctaband__lead {
	max-width: 90%;
	margin: var(--rd-4) auto var(--rd-6);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

/* ============================================================== 17. MAP === */

.rd-map {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: var(--rd-5);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-xl);
	padding: var(--rd-5);
	background: var(--rd-offwhite);
}

.rd-map__canvas {
	position: relative;
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-frame);
	overflow: hidden;
	/* Matches the SVG's own viewBox ratio (800 / 560), so the map always
	   fills the box exactly instead of leaving blank space below it once
	   the canvas goes single-column and its width — but not a fixed
	   min-height — shrinks with the viewport. */
	aspect-ratio: 800 / 560;
}

.rd-map__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rd-map__hint {
	position: absolute;
	left: var(--rd-4);
	bottom: 14px;
	padding: 5px 10px;
	border-radius: var(--rd-r-sm);
	background: rgba(255, 255, 255, .82);
	font-size: 12px;
	color: var(--rd-muted);
}

.rd-map__land {
	fill: var(--rd-mist);
	stroke: #B9CBE2;
	stroke-width: .7;
	stroke-linejoin: round;
}

.rd-pin {
	cursor: pointer;
}

/* Invisible, larger-than-the-dot hit area — the visible dot alone is far too
   small to tap once the map scales down on tablet/phone widths. */
.rd-pin__hit {
	r: 20px;
	fill: transparent;
	pointer-events: all;
}

.rd-pin__dot {
	fill: var(--rd-azure);
	stroke: var(--rd-white);
	stroke-width: 2;
	transition: fill .15s ease;
}

.rd-pin:hover .rd-pin__dot {
	fill: var(--rd-sky);
}

.rd-pin.is-selected .rd-pin__dot {
	fill: var(--rd-royal);
	stroke: var(--rd-gold);
	stroke-width: 3;
}

.rd-pin:focus {
	outline: none;
}

.rd-pin:focus-visible .rd-pin__dot {
	stroke: var(--rd-sky);
	stroke-width: 4;
}

.rd-pin__label {
	font-size: 11px;
	font-weight: 700;
	fill: var(--rd-royal);
	paint-order: stroke;
	stroke: var(--rd-white);
	stroke-width: 3px;
	stroke-linejoin: round;
	pointer-events: none;
	opacity: 0;
	transition: opacity .12s ease;
}

.rd-pin:hover .rd-pin__label,
.rd-pin:focus-visible .rd-pin__label,
.rd-pin.is-selected .rd-pin__label {
	opacity: 1;
}

.rd-mappanel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-frame);
	padding: 26px;
	box-shadow: 0 20px 50px -34px rgba(23, 69, 143, .5);
}

.rd-mappanel__city {
	margin: var(--rd-2) 0 var(--rd-1);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 800;
}

.rd-mappanel__sub {
	margin: 0 0 var(--rd-4);
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-muted);
}

.rd-mappanel__sub b {
	color: var(--rd-azure);
}

.rd-mappanel__listlabel {
	margin-bottom: 10px;
	padding-top: var(--rd-4);
	border-top: 1px solid #EDF1F6;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--rd-faint);
	text-transform: uppercase;
}

.rd-mappanel__clubs {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: -4px -6px 0;
	padding: 0 6px;
	max-height: 340px;
}

.rd-club {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: var(--rd-2) 6px;
	border: 0;
	border-radius: var(--rd-r-sm);
	background: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--rd-royal);
	text-align: left;
	cursor: pointer;
}

.rd-club:hover,
.rd-club:focus-visible {
	background: var(--rd-pale);
}

.rd-club::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rd-gold);
	flex-shrink: 0;
}

.rd-clubdialog {
	width: min(420px, calc(100vw - 48px));
	padding: 30px;
	border: 0;
	border-radius: var(--rd-r-lg);
	box-shadow: var(--rd-shadow-card);
}

.rd-clubdialog::backdrop {
	background: rgba(10, 20, 40, .55);
}

.rd-clubdialog__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--rd-pale);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.rd-clubdialog__type {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rd-azure);
}

.rd-clubdialog__name {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 800;
}

.rd-clubdialog__city {
	margin: 0 0 var(--rd-3);
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-clubdialog__note {
	margin: 0 0 var(--rd-4);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rd-muted);
}

.rd-clubdialog__meta {
	margin: 0 0 var(--rd-3);
	padding: var(--rd-3);
	border-radius: var(--rd-r-sm);
	background: var(--rd-pale);
}

.rd-clubdialog__meta div + div {
	margin-top: var(--rd-2);
}

.rd-clubdialog__meta dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rd-azure);
}

.rd-clubdialog__meta dd {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--rd-royal);
}

.rd-clubdialog__form .rd-field {
	margin-bottom: var(--rd-3);
}

/* ---------------------------------------------------- Cookie consent. */

.rd-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	padding: var(--rd-4) var(--cx);
	background: var(--rd-deep);
	box-shadow: 0 -10px 30px rgba(10, 20, 40, .25);
}

.rd-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-4);
	max-width: 1100px;
	margin: 0 auto;
}

.rd-consent__text {
	margin: 0;
	max-width: 640px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

.rd-consent__text a {
	color: var(--rd-white);
	text-decoration: underline;
}

.rd-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-2);
}

.rd-consentdialog {
	width: min(480px, calc(100vw - 48px));
	max-height: calc(100vh - 64px);
	padding: 30px;
	border: 0;
	border-radius: var(--rd-r-lg);
	box-shadow: var(--rd-shadow-card);
}

.rd-consentdialog::backdrop {
	background: rgba(10, 20, 40, .55);
}

.rd-consentdialog__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--rd-pale);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.rd-consentdialog__title {
	margin: 0 0 var(--rd-2);
	padding-right: 32px;
	font-size: 22px;
	font-weight: 800;
}

.rd-consentdialog__lead {
	margin: 0 0 var(--rd-4);
	font-size: 14px;
	line-height: 1.5;
	color: var(--rd-muted);
}

.rd-consentdialog__list {
	display: flex;
	flex-direction: column;
	gap: var(--rd-3);
	margin-bottom: var(--rd-4);
}

.rd-consenttoggle {
	padding: var(--rd-3);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-sm);
	background: var(--rd-offwhite);
}

.rd-consenttoggle__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-3);
}

.rd-consenttoggle__label {
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-consenttoggle__desc {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rd-muted);
}

.rd-consentdialog__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--rd-2);
}

/* A real checkbox, visually a track + thumb — stays in the accessible
   tree (focus-visible, Space/Enter to toggle) instead of a div standing
   in for one. */
.rd-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 44px;
	height: 24px;
	cursor: pointer;
}

.rd-switch input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.rd-switch input:disabled {
	cursor: not-allowed;
}

.rd-switch__track {
	display: block;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: var(--rd-line-3);
	transition: background-color .15s ease;
}

.rd-switch__thumb {
	display: block;
	width: 18px;
	height: 18px;
	margin: 3px;
	border-radius: 50%;
	background: var(--rd-white);
	box-shadow: 0 1px 2px rgba(23, 69, 143, .3);
	transition: transform .15s ease;
}

.rd-switch input:checked ~ .rd-switch__track {
	background: var(--rd-azure);
}

.rd-switch input:checked ~ .rd-switch__track .rd-switch__thumb {
	transform: translateX(20px);
}

.rd-switch input:disabled ~ .rd-switch__track {
	background: var(--rd-azure);
	opacity: .5;
}

.rd-switch input:focus-visible ~ .rd-switch__track {
	outline: 3px solid var(--rd-sky);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.rd-consent__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.rd-consent__actions {
		justify-content: stretch;
	}

	.rd-consent__actions .rd-btn {
		flex: 1;
	}
}

.rd-clubdialog__msg {
	margin: var(--rd-3) 0 0;
	min-height: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rd-success);
}

.rd-clubdialog__msg.is-error {
	color: var(--rd-error);
}

.rd-club:hover {
	background: var(--rd-offwhite);
}

/* The full club directory on the Όμιλοι page. */
.rd-citygrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-5);
}

.rd-clubs-note {
	margin: 0 0 var(--rd-5);
	font-size: 15px;
	line-height: 1.6;
	color: var(--rd-muted);
}

.rd-citycard {
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-lg);
	padding: 22px 24px;
	box-shadow: var(--rd-shadow-card);
}

.rd-citycard__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-4);
	cursor: pointer;
	list-style: none;
}

.rd-citycard__summary::-webkit-details-marker {
	display: none;
}

.rd-citycard__head {
	display: flex;
	flex-direction: column;
}

.rd-citycard__name {
	margin: 0 0 var(--rd-1);
	font-size: 22px;
	font-weight: 800;
}

.rd-citycard__meta {
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-azure);
}

.rd-citycard__toggle {
	display: flex;
	flex-shrink: 0;
	color: var(--rd-azure);
	transition: transform .2s ease;
}

.rd-citycard[open] .rd-citycard__toggle {
	transform: rotate(180deg);
}

.rd-citycard__summary:hover .rd-citycard__name {
	color: var(--rd-azure);
}

.rd-citycard ul {
	margin: var(--rd-4) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rd-line);
	padding-top: var(--rd-3);
}

/* ========================================================= 18. CALENDAR === */

.rd-events {
	display: flex;
	flex-direction: column;
	gap: var(--rd-3);
}

.rd-event {
	display: flex;
	align-items: center;
	gap: var(--rd-5);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: 14px;
	padding: 18px 22px;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.rd-event:hover {
	border-color: var(--rd-line-3);
	box-shadow: 0 12px 28px -22px rgba(23, 69, 143, .5);
}

.rd-event__date {
	flex-shrink: 0;
	width: 72px;
	padding: 10px 6px;
	text-align: center;
	background: var(--rd-pale);
	border: 1px solid var(--rd-line-3);
	border-radius: var(--rd-r-md);
}

/* Spans, so stacked explicitly — inline they share a line whenever the
   month abbreviation happens to fit beside the day («06 ΔΕΚ»). */
.rd-event__day,
.rd-event__mon,
.rd-event__pre {
	display: block;
}

/* «έως» over the last day of an action already under way. */
.rd-event__pre {
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--rd-muted);
}

.rd-event__day {
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: var(--rd-royal);
}

.rd-event__mon {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--rd-azure);
	text-transform: uppercase;
}

.rd-event__body {
	flex: 1;
	min-width: 0;
}

.rd-event__title {
	margin: 0 0 var(--rd-1);
	font-size: 18px;
	font-weight: 700;
}

.rd-event__meta {
	margin: 0;
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-event__add {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--rd-2);
	padding: 11px 16px;
	min-height: 44px;
	border: 1.5px solid var(--rd-line-3);
	border-radius: 10px;
	background: var(--rd-white);
	color: var(--rd-azure);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	transition: border-color .2s ease, background .2s ease;
}

.rd-event__add:hover {
	background: var(--rd-pale);
	border-color: var(--rd-azure);
}

/* ============================================================ 19. FORMS === */

.rd-form {
	display: grid;
	gap: var(--rd-4);
}

.rd-form--2col {
	grid-template-columns: 1fr 1fr;
}

.rd-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rd-field--full {
	grid-column: 1 / -1;
}

.rd-field label {
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-input,
.rd-select,
.rd-textarea {
	width: 100%;
	padding: 14px 16px;
	min-height: 44px;
	border: 1.5px solid #C7D6E8;
	border-radius: 11px;
	background: var(--rd-white);
	color: var(--rd-royal);
	font-family: inherit;
	font-size: 16px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.rd-textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

.rd-input:focus,
.rd-select:focus,
.rd-textarea:focus {
	border-color: var(--rd-azure);
	box-shadow: 0 0 0 4px rgba(0, 103, 200, .16);
}

/* Only after the visitor has touched the field: a required field without a
   placeholder would otherwise load red, before anything was typed. */
.rd-input:user-invalid {
	border-color: var(--rd-error);
}

/* Honeypot — hidden from people, visible to naive bots. */
.rd-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rd-notice {
	margin-bottom: var(--rd-5);
	padding: var(--rd-4) var(--rd-5);
	border-radius: var(--rd-r-md);
	font-size: 15px;
	font-weight: 600;
}

.rd-notice--ok {
	background: #E7F5ED;
	border: 1px solid #B7E0C9;
	color: var(--rd-success);
}

.rd-notice--error {
	background: #FDECEA;
	border: 1px solid #F3C2BD;
	color: var(--rd-error);
}

/* ------ Newsletter strip. */
.rd-nl {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--rd-7);
	align-items: center;
}

.rd-nl__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	color: var(--rd-azure);
}

.rd-nl__title {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 800;
}

.rd-nl__lead {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--rd-muted);
}

.rd-nl__note {
	margin: var(--rd-3) 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--rd-muted);
}

.rd-nl__form {
	display: flex;
	gap: var(--rd-3);
	flex-wrap: wrap;
}

.rd-nl__form .rd-input {
	flex: 1;
	min-width: 220px;
}

.rd-nl__msg {
	margin: var(--rd-3) 0 0;
	min-height: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rd-success);
}

.rd-nl__msg.is-error {
	color: var(--rd-error);
}

.rd-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-3);
}

.rd-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rd-2);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--rd-4);
	border-radius: 14px;
	background: var(--rd-white);
	border: 1px solid var(--rd-line-3);
	color: var(--rd-azure);
	font-size: 14px;
	font-weight: 700;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.rd-social__link:hover {
	background: var(--rd-azure);
	border-color: var(--rd-azure);
	color: var(--rd-white);
}

/* =========================================================== 20. FOOTER === */

.rd-footer {
	background: var(--rd-deep);
	color: var(--rd-white);
}

.rd-footer__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 56px var(--cx) 32px;
}

.rd-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.rd-footer__logo img {
	height: 96px;
	width: auto;
	margin-bottom: var(--rd-4);
}

.rd-footer__tagline {
	max-width: 280px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}

.rd-footer__head {
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--rd-gold);
	text-transform: uppercase;
}

.rd-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rd-footer__menu a {
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
}

.rd-footer__menu a:hover {
	color: var(--rd-white);
	text-decoration: underline;
}

.rd-footer__bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--rd-3);
	margin-top: 44px;
	padding-top: var(--rd-5);
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}

.rd-footer__legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

.rd-footer__legal a {
	color: rgba(255, 255, 255, .7);
}

.rd-footer__barleft {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rd-footer__a11y {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.rd-footer__a11y a {
	color: rgba(255, 255, 255, .7);
	text-decoration: underline;
}

.rd-footer__sponsor {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.rd-footer__sponsorlink {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: rgba(255, 255, 255, .85);
	transition: color .2s;
}

.rd-footer__sponsorlink:hover,
.rd-footer__sponsorlink:focus-visible {
	color: var(--rd-white);
}

.rd-footer__sponsorlink svg {
	display: block;
	width: auto;
	height: 17px;
}

.rd-footer__legal a:hover {
	color: var(--rd-white);
}

.rd-footer__docs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	font: inherit;
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
	cursor: pointer;
}

.rd-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.rd-footer__social svg {
	width: 16px;
	height: 16px;
}

/* ========================================================== 21. ARTICLE === */

.rd-article__hero {
	height: 480px;
	border-radius: var(--rd-r-xl);
	overflow: hidden;
	background: var(--rd-mist);
	margin-bottom: var(--rd-7);
}

/* Only single.php's hero carries this second class — the article's own
   photo, shown whole, at its own proportions, no crop. Unlike the card
   thumbnail above, this is not a navigational thumbnail that needs to
   line up with siblings in a grid; it is the one moment on the page
   where the photo IS the content — a governor's letter graphic, an event
   poster with its own text laid out top to bottom, are exactly the case
   where a 4:3 crop would cut off information the photo was made to
   carry. Width still fills the content column like every other photo on
   the page; only the height is let go, so whatever shape the photo has
   is the shape it keeps — the same courtesy .rd-prose img already gives
   a photo placed in the article's own text. page.php and
   single-rd_cause.php keep the plain .rd-article__hero above at its own
   fixed height — their hero photos are not "article photos" and this
   rule must not reach them. The combined selector's higher specificity
   wins over the mobile height:240px rule below at every width, so
   nothing needs repeating there. */
.rd-article__hero.rd-article__hero--natural {
	height: auto;
	overflow: visible;
	background: transparent;
	display: flex;
	justify-content: center;
}

.rd-article__hero.rd-article__hero--natural .rd-media {
	width: auto;
	height: auto;
	max-width: 100%;
	overflow: visible;
	background: transparent;
}

.rd-article__hero.rd-article__hero--natural .rd-media__img {
	width: auto;
	height: auto;
	max-width: 100%;
	border-radius: var(--rd-r-xl);
}

.rd-article__meta {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	flex-wrap: wrap;
	margin-bottom: var(--rd-4);
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-share {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	flex-wrap: wrap;
	margin-top: var(--rd-7);
	padding-top: var(--rd-5);
	border-top: 1px solid var(--rd-line);
}

.rd-share__label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--rd-faint);
	text-transform: uppercase;
}

/* ========================================================= 21b. COMMENTS === */

.rd-comments {
	margin-top: var(--rd-7);
	padding-top: var(--rd-7);
	border-top: 1px solid var(--rd-line);
}

.rd-comments__title {
	margin: 0 0 var(--rd-5);
	font-size: 24px;
	font-weight: 800;
}

.rd-comments__list,
.rd-comments__list .children {
	list-style: none;
	margin: 0 0 var(--rd-6);
	padding: 0;
}

.rd-comments__list .children {
	margin: var(--rd-4) 0 0 var(--rd-5);
	padding-left: var(--rd-5);
	border-left: 2px solid var(--rd-line);
}

.rd-comments__list .comment-body {
	padding: var(--rd-5);
	margin-bottom: var(--rd-4);
	background: var(--rd-offwhite);
	border: 1px solid var(--rd-line);
	border-radius: 14px;
}

.rd-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-comments__list .comment-author img {
	border-radius: 50%;
}

.rd-comments__list .comment-metadata,
.rd-comments__note,
.rd-comments__closed {
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-comments .comment-reply-link {
	font-weight: 700;
}

.rd-comments .comment-form {
	display: grid;
	gap: var(--rd-4);
}

.rd-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-comments .comment-form input[type="text"],
.rd-comments .comment-form input[type="email"],
.rd-comments .comment-form input[type="url"] {
	width: 100%;
	padding: 14px 16px;
	min-height: 44px;
	border: 1.5px solid #C7D6E8;
	border-radius: 11px;
	font-family: inherit;
	font-size: 16px;
	color: var(--rd-royal);
}

.rd-comments .comment-form input:focus,
.rd-comments .comment-form textarea:focus {
	border-color: var(--rd-azure);
	box-shadow: 0 0 0 4px rgba(0, 103, 200, .16);
	outline: none;
}

/* ======================================================== 22. DOCUMENTS === */

.rd-locknote {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-4);
	padding: var(--rd-5);
	border: 1px solid var(--rd-line-3);
	border-radius: var(--rd-r-lg);
	background: var(--rd-pale);
	color: var(--rd-royal);
}

.rd-locknote__icon {
	flex-shrink: 0;
	color: var(--rd-azure);
}

/* Following the sign-in box, it reads as a footnote to it — so it takes the
   box's width rather than the full column. */
.rd-memberlogin + .rd-locknote {
	max-width: 560px;
	margin: var(--rd-5) auto 0;
}

/* Club Portal sign-in: the passwordless form a logged-out member lands on. */
.rd-memberlogin {
	max-width: 560px;
	margin: var(--rd-6) auto 0;
	padding: var(--rd-7) var(--rd-6);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-xl);
	box-shadow: var(--rd-shadow-card);
	text-align: center;
}

.rd-memberlogin__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--rd-4);
	border-radius: var(--rd-r-lg);
	background: var(--rd-pale);
	color: var(--rd-gold);
}

.rd-memberlogin__title {
	margin: 0 0 var(--rd-2);
	font-size: 24px;
	font-weight: 800;
	color: var(--rd-royal);
}

.rd-memberlogin__lead {
	margin: 0 0 var(--rd-5);
	font-size: 16px;
	line-height: 1.6;
	color: var(--rd-muted);
}

.rd-memberlogin__notice {
	margin: 0 0 var(--rd-5);
	padding: 12px 16px;
	border-radius: var(--rd-r-md);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.rd-memberlogin__notice--ok {
	background: var(--rd-pale);
	border: 1px solid var(--rd-line-3);
	color: var(--rd-royal);
}

.rd-memberlogin__notice--error {
	background: #fdf0f0;
	border: 1px solid #f0c9c9;
	color: #8a2220;
}

.rd-memberlogin__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-3);
	justify-content: center;
}

.rd-memberlogin__form input[type="email"] {
	flex: 1 1 260px;
	min-width: 0;
	padding: 13px 16px;
	font: inherit;
	font-size: 16px;
	color: var(--rd-ink);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-md);
}

.rd-memberlogin__form input[type="email"]:focus {
	outline: none;
	border-color: var(--rd-azure);
	box-shadow: 0 0 0 3px rgba(0, 103, 200, .15);
}

.rd-memberlogin__note {
	margin: var(--rd-4) 0 0;
	font-size: 13px;
	color: var(--rd-faint);
}

.rd-doclist {
	display: flex;
	flex-direction: column;
	gap: var(--rd-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-doc {
	display: flex;
	align-items: center;
	gap: var(--rd-4);
	padding: 18px 22px;
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: 14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.rd-doc:hover {
	border-color: var(--rd-azure);
	box-shadow: 0 12px 28px -22px rgba(23, 69, 143, .5);
}

.rd-doc__icon {
	flex-shrink: 0;
	color: var(--rd-azure);
}

.rd-doc__body {
	flex: 1;
	min-width: 0;
}

.rd-doc__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.rd-doc__meta {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--rd-muted);
}

/* ======================================================== 23. PAGINATION === */

.rd-pagination {
	margin-top: var(--rd-7);
}

.rd-pagination__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--rd-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--rd-3);
	border: 1px solid var(--rd-line-3);
	border-radius: 10px;
	background: var(--rd-white);
	color: var(--rd-azure);
	font-weight: 700;
}

.rd-pagination .page-numbers:hover {
	border-color: var(--rd-azure);
	background: var(--rd-pale);
}

.rd-pagination .page-numbers.current {
	background: var(--rd-azure);
	border-color: var(--rd-azure);
	color: var(--rd-white);
}

/* ========================================================= 24. CONTACT ==== */

/* Επικοινωνία: one column, paired with the form as the other half of .rd-2col. */
.rd-contactgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rd-4);
}

.rd-contactcard {
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-lg);
	padding: 18px 16px;
	box-shadow: var(--rd-shadow-card);
}

.rd-contactcard .rd-iconbox {
	margin-bottom: var(--rd-3);
	width: 36px;
	height: 36px;
	border-radius: var(--rd-r-md);
}

.rd-contactcard__label {
	margin: 0 0 var(--rd-1);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--rd-faint);
	text-transform: uppercase;
}

.rd-contactcard__value {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-royal);
	overflow-wrap: anywhere;
}

/* Same card, on the district's social channels — blue with a gold icon,
   grouped visually apart from the two white contact-info boxes above it. */
.rd-contactcard--social {
	background: var(--rd-royal);
	border-color: var(--rd-royal);
}

.rd-contactcard--social .rd-iconbox {
	background: rgba(255, 255, 255, .14);
	color: var(--rd-gold);
}

.rd-contactcard--social .rd-iconbox svg {
	width: 18px;
	height: 18px;
}

.rd-contactcard--social .rd-contactcard__label {
	color: rgba(255, 255, 255, .7);
}

.rd-contactcard--social .rd-contactcard__value,
.rd-contactcard--social .rd-contactcard__value a {
	color: var(--rd-white);
}

/* Numbered "how it works" steps on the join page. */
.rd-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-5);
	counter-reset: rd-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rd-step {
	position: relative;
	padding: 32px 26px 26px;
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-lg);
	counter-increment: rd-step;
}

.rd-step::before {
	content: counter(rd-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--rd-4);
	border-radius: var(--rd-r-md);
	background: var(--rd-pale);
	color: var(--rd-royal);
	font-size: 18px;
	font-weight: 800;
}

.rd-step h3 {
	margin: 0 0 var(--rd-2);
	font-size: 19px;
	font-weight: 800;
}

.rd-step p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rd-muted);
}

/* =================================================== 24b. PAGE PIECES ===== */

.rd-intro__body {
	margin-top: var(--rd-5);
	font-size: 19px;
	line-height: 1.7;
}

/* Governor's greeting, moved into the intro section in place of the old
   photo-placeholder hero — .rd-gov itself is shared with the homepage
   teaser (template-parts/home/governor.php), so only the spacing that's
   specific to sitting under the intro text lives here. */
.rd-intro__gov {
	margin-top: var(--rd-7);
}

/* Τετραπλός Ροταριανός Έλεγχος — the four questions as steps side by side,
   each its own gradient, deepening left to right into the 4th (blue). */
.rd-fourtest {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rd-4);
	margin: var(--rd-6) 0;
}

.rd-fourtest__item {
	padding: 28px 20px 24px;
	border-radius: var(--rd-r-lg);
}

.rd-fourtest__item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.rd-fourtest__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: var(--rd-3);
	border-radius: 50%;
	font-size: 15px;
	font-weight: 800;
}

.rd-fourtest__item--1 {
	background: linear-gradient(135deg, var(--rd-white), var(--rd-pale));
	border: 1px solid var(--rd-line-2);
}

.rd-fourtest__item--1 .rd-fourtest__num {
	background: var(--rd-mist);
	color: var(--rd-royal);
}

.rd-fourtest__item--2 {
	background: linear-gradient(135deg, var(--rd-pale), var(--rd-mist));
	border: 1px solid var(--rd-line-3);
}

.rd-fourtest__item--2 .rd-fourtest__num {
	background: var(--rd-white);
	color: var(--rd-royal);
}

.rd-fourtest__item--3 {
	background: linear-gradient(135deg, var(--rd-sky), var(--rd-azure));
	color: var(--rd-white);
}

.rd-fourtest__item--3 .rd-fourtest__num {
	background: rgba(255, 255, 255, .25);
	color: var(--rd-white);
}

.rd-fourtest__item--4 {
	background: linear-gradient(135deg, var(--rd-azure), var(--rd-royal));
	color: var(--rd-white);
}

.rd-fourtest__item--4 .rd-fourtest__num {
	background: rgba(255, 255, 255, .25);
	color: var(--rd-white);
}

/* Ροταριανό Ίδρυμα (About page): πόροι / επιχορηγήσεις as icon cards
   instead of running "label — text" paragraphs. */
.rd-idrygrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-5);
	margin: var(--rd-5) 0 var(--rd-7);
}

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

.rd-idrycard {
	padding: var(--rd-5);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
}

.rd-idrycard .rd-iconbox {
	margin-bottom: var(--rd-3);
}

.rd-idrycard__title {
	margin: 0 0 var(--rd-2);
	font-size: 17px;
	font-weight: 800;
}

.rd-idrycard__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rd-muted);
}

.rd-idrycard--wide .rd-idrycard__head {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	margin-bottom: var(--rd-3);
}

.rd-idrycard--wide .rd-iconbox {
	margin-bottom: 0;
}

.rd-idrycard--wide .rd-idrycard__title {
	margin: 0;
}

/* Λογοδοσία / Αναγνώριση: single-point callouts, same shape as .rd-locknote. */
.rd-idrynotes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rd-5);
	margin: var(--rd-6) 0 var(--rd-7);
}

.rd-idrynote {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-4);
	padding: var(--rd-5);
	background: var(--rd-pale);
	border: 1px solid var(--rd-line-3);
	border-radius: var(--rd-r-lg);
}

.rd-idrynote__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--rd-r-md);
	background: var(--rd-white);
	color: var(--rd-azure);
	flex-shrink: 0;
}

.rd-idrynote__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	color: var(--rd-royal);
}

.rd-idrynote p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.rd-idryma-closing {
	max-width: 640px;
	margin: var(--rd-7) auto 0;
	padding-top: var(--rd-6);
	border-top: 1px solid var(--rd-line);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--rd-royal);
	text-align: center;
}

/* Two columns of running text (Τι κάνουμε / Γιατί το κάνουμε, form + ways). */
.rd-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rd-8);
}

.rd-2col__title {
	margin: 14px 0 20px;
	font-size: 32px;
	line-height: 1.18;
	font-weight: 800;
}

.rd-2col__lead {
	margin: 0 0 var(--rd-5);
	font-size: 17px;
	line-height: 1.6;
	color: var(--rd-muted);
}

.rd-2col p {
	font-size: 17px;
	line-height: 1.7;
}

/* Cause cards on the Δράσεις page: non-interactive, with a quote, 16:9 photo. */
.rd-card--static:hover {
	transform: none;
	box-shadow: var(--rd-shadow-card);
	border-color: var(--rd-line);
}

.rd-card--static .rd-card__media {
	height: auto;
	aspect-ratio: 16 / 9;
}

.rd-pullquote {
	margin: var(--rd-4) 0 0;
	padding-left: var(--rd-4);
	border-left: 3px solid var(--rd-gold);
	font-size: 16px;
	line-height: 1.6;
	font-style: italic;
	color: var(--rd-royal);
}

.rd-waylist {
	display: flex;
	flex-direction: column;
	gap: var(--rd-4);
	margin: 0 0 var(--rd-6);
	padding: 0;
	list-style: none;
}

.rd-way {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-4);
	padding: 18px 20px;
	background: var(--rd-white);
	border: 1px solid var(--rd-line-2);
	border-radius: 14px;
}

.rd-way__title {
	margin: 0 0 var(--rd-1);
	font-size: 18px;
	font-weight: 800;
}

.rd-way__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--rd-muted);
}

.rd-docgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rd-6);
}

.rd-doccat__head {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	margin-bottom: var(--rd-4);
}

.rd-doccat__title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
}

.rd-doclist li {
	list-style: none;
}

a.rd-doc {
	color: inherit;
}

.rd-doc__body {
	display: block;
}

.rd-doc__title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-doc__meta {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-doccat--letters {
	margin-bottom: var(--rd-6);
}

.rd-letterthumbs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--rd-5);
}

.rd-letterthumb {
	display: flex;
	flex-direction: column;
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

a.rd-letterthumb {
	color: inherit;
}

.rd-letterthumb:hover {
	border-color: var(--rd-azure);
	box-shadow: 0 12px 28px -22px rgba(23, 69, 143, .5);
}

.rd-letterthumb__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background: var(--rd-pale);
	color: var(--rd-azure);
	overflow: hidden;
}

.rd-letterthumb__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rd-letterthumb__title {
	display: block;
	margin: var(--rd-3);
	font-size: 15px;
	font-weight: 700;
	color: var(--rd-royal);
}

/* Σχέδιο Δράσης — the year's plan, with its booklet leading it.

   A sixth of PDF and five sixths of text, in that order: the cover is what
   tells a member at a glance that there is a document here, and the text is
   what they then read. The aside sticks as the text scrolls, so the way into
   the PDF never leaves the screen on a long read. */
.rd-plan {
	display: grid;
	grid-template-columns: 1fr 5fr;
	gap: var(--rd-6);
	align-items: start;
}

/* Only one side has anything in it — no empty three quarters. */
.rd-plan--solo {
	grid-template-columns: minmax(0, 1fr);
}

.rd-plan__aside {
	position: sticky;
	top: var(--rd-6);
}

.rd-plan--solo .rd-plan__aside {
	position: static;
	max-width: 280px;
}

/* Deliberately the same card as a governor's letter: it is the same kind of
   object — a PDF with a cover — and inventing a second look for it would say
   the two are different things. */
.rd-plan__doc {
	display: flex;
	flex-direction: column;
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

a.rd-plan__doc {
	color: inherit;
}

.rd-plan__doc:hover {
	border-color: var(--rd-azure);
	box-shadow: 0 12px 28px -22px rgba(23, 69, 143, .5);
}

.rd-plan__cover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background: var(--rd-pale);
	color: var(--rd-azure);
	overflow: hidden;
}

.rd-plan__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The file's own name on the card. */
.rd-plan__name {
	display: block;
	margin: var(--rd-2) var(--rd-2) 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--rd-royal);
}

.rd-plan__open {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 6px var(--rd-2) var(--rd-2);
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-azure);
}

/* A grid item will not shrink below its content without this, and a long
   unbroken string in the text would then push the booklet off the row. */
.rd-plan__text {
	min-width: 0;
}

/* The heading of the text itself, which is not the heading of the section:
   the section says what this is, this says what the document is called. */
.rd-plan__title {
	margin: 0 0 var(--rd-4);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--rd-royal);
}

.rd-plan__para {
	margin: 0 0 var(--rd-4);
	font-size: 17px;
	line-height: 1.75;
	color: var(--rd-ink);
}

.rd-plan__para:last-child {
	margin-bottom: 0;
}

/* Lines, not a paragraph — a name, a role and a district, one under the
   other, the way they are signed. */
.rd-plan__sign {
	margin: var(--rd-5) 0 0;
	padding-top: var(--rd-4);
	border-top: 1px solid var(--rd-line);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--rd-royal);
}

/* --- Επιτροπές Περιφέρειας --------------------------------------------- */

.rd-comm {
	display: grid;
	gap: var(--rd-5);
}

.rd-comm__name {
	margin: 0 0 var(--rd-3);
	padding-bottom: var(--rd-2);
	border-bottom: 2px solid var(--rd-gold);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--rd-royal);
}

/* A subcommittee is inside its committee, and the rule on the left is what
   says so without repeating the parent's name on every line. */
.rd-comm__sub {
	margin-top: var(--rd-4);
	padding-left: var(--rd-4);
	border-left: 2px solid var(--rd-line-3);
}

.rd-comm__subname {
	margin: 0 0 var(--rd-2);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--rd-ink);
}

.rd-comm__people {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rd-1);
}

/* Name, seat and club on one line where there is room; the seat is what the
   eye is looking for, so it keeps the colour. */
.rd-comm__person {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rd-1) var(--rd-3);
	padding: var(--rd-2) 0;
	border-bottom: 1px solid var(--rd-line);
	font-size: 15px;
	line-height: 1.5;
}

.rd-comm__person:last-child {
	border-bottom: 0;
}

.rd-comm__who {
	font-weight: 700;
	color: var(--rd-ink);
}

.rd-comm__role {
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-royal);
}

.rd-comm__club {
	font-size: 13px;
	color: var(--rd-muted);
}

.rd-comm__empty {
	margin: 0;
	font-size: 14px;
	color: var(--rd-muted);
}

/* --- Πτυσσόμενες ενότητες του Club Portal ------------------------------ */

/* Three long sections on one page — letters, plan, visits. Folded, all three
   headings fit on one screen and a member picks; unfolded, two of them are
   something to scroll past. Built on <details>, so it keeps working with the
   stylesheet half-loaded and without a line of JavaScript. */
.rd-fold {
	margin-bottom: var(--rd-5);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
	background: var(--rd-white);
}

.rd-fold:last-child {
	margin-bottom: 0;
}

.rd-fold__head {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	padding: var(--rd-4);
	cursor: pointer;
	list-style: none;
	user-select: none;
	/* Its own corners rather than overflow:hidden on the fold, which would
	   also kill the sticky booklet column inside the action plan. */
	border-radius: calc(var(--rd-r-lg) - 1px);
}

.rd-fold[open] .rd-fold__head {
	border-radius: calc(var(--rd-r-lg) - 1px) calc(var(--rd-r-lg) - 1px) 0 0;
}

/* Safari still paints its own triangle through the default marker. */
.rd-fold__head::-webkit-details-marker {
	display: none;
}

.rd-fold__head:hover {
	background: var(--rd-offwhite);
}

/* The keyboard has to be able to see where it is: the row is the control. */
.rd-fold:not([open]) .rd-fold__head:focus-visible,
.rd-fold__head:focus-visible {
	outline: 2px solid var(--rd-royal);
	outline-offset: -2px;
}

.rd-fold__title {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
}

/* How much is inside, said before it is opened. */
.rd-fold__count {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-muted);
	white-space: nowrap;
}

.rd-fold__chevron {
	display: inline-flex;
	flex: none;
	margin-left: var(--rd-2);
	color: var(--rd-royal);
	transition: transform .25s ease;
}

/* No count to push it over: the chevron takes the right edge itself. */
.rd-fold__head > .rd-fold__chevron:nth-child(3) {
	margin-left: auto;
}

.rd-fold[open] .rd-fold__chevron {
	transform: rotate(180deg);
}

.rd-fold__body {
	padding: var(--rd-4);
	border-top: 1px solid var(--rd-line);
}

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

/* --- Πρόγραμμα επισκέψεων Διοικητή ------------------------------------- */

/* Λίστα ή ημερολόγιο. Two radios and a `:has()` rule — no JavaScript. The
   list is the default in the markup and the calendar is hidden by default,
   so a browser without `:has()` degrades to exactly the page as it was
   before the calendar existed, rather than to both views at once. */
.rd-viewswitch {
	display: inline-flex;
	gap: 2px;
	margin: 0 0 var(--rd-4);
	padding: 3px;
	border: 1px solid var(--rd-line);
	border-radius: 999px;
	background: var(--rd-offwhite);
}

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

.rd-viewswitch__label {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-2);
	padding: 7px var(--rd-4);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--rd-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.rd-viewswitch__label:hover {
	color: var(--rd-royal);
}

.rd-viewswitch__radio:checked + .rd-viewswitch__label {
	background: var(--rd-royal);
	color: var(--rd-white);
}

/* The radio is off-screen, so its focus ring has to be drawn on the label. */
.rd-viewswitch__radio:focus-visible + .rd-viewswitch__label {
	outline: 2px solid var(--rd-royal);
	outline-offset: 2px;
}

.rd-visits__pane--cal {
	display: none;
}

.rd-visits:has(.rd-viewswitch__radio--cal:checked) .rd-visits__pane--list {
	display: none;
}

.rd-visits:has(.rd-viewswitch__radio--cal:checked) .rd-visits__pane--cal {
	display: block;
}

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

/* --- Το ημερολόγιο ------------------------------------------------------ */

.rd-cal {
	width: 100%;
	margin: 0 0 var(--rd-6);
	border-collapse: collapse;
	table-layout: fixed;
}

.rd-cal:last-child {
	margin-bottom: 0;
}

.rd-cal__caption {
	padding-bottom: var(--rd-2);
	margin-bottom: var(--rd-3);
	border-bottom: 2px solid var(--rd-gold);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--rd-royal);
}

.rd-cal__head {
	padding: var(--rd-2) var(--rd-1);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--rd-muted);
}

/* The abbreviation is already the heading; the dotted underline browsers add
   only makes a two-letter word look misspelled. */
.rd-cal__head abbr {
	text-decoration: none;
	border-bottom: 0;
	cursor: help;
}

.rd-cal__cell {
	height: 84px;
	padding: var(--rd-2);
	border: 1px solid var(--rd-line);
	vertical-align: top;
	/* Long club names must not stretch a fixed-width column. */
	overflow-wrap: anywhere;
}

.rd-cal__cell--blank {
	border-color: transparent;
	background: transparent;
}

.rd-cal__day {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--rd-ink);
	font-variant-numeric: tabular-nums;
}

/* A day already gone stays in the grid — a calendar with a hole where the
   first fortnight was is not a calendar — but it steps back. */
.rd-cal__cell--past {
	background: var(--rd-offwhite);
}

.rd-cal__cell--past .rd-cal__day {
	color: var(--rd-muted);
	font-weight: 400;
}

.rd-cal__cell--today {
	box-shadow: inset 0 0 0 2px var(--rd-gold);
}

.rd-cal__cell--has {
	background: var(--rd-pale);
}

.rd-cal__event {
	display: block;
	margin-top: var(--rd-1);
	padding-top: var(--rd-1);
	border-top: 1px solid var(--rd-line-3);
	font-size: 12px;
	line-height: 1.35;
}

.rd-cal__event:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.rd-cal__club {
	display: block;
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-cal__ag {
	display: block;
	color: var(--rd-muted);
}

.rd-visits__note {
	margin: 0 0 var(--rd-5);
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rd-muted);
}

.rd-visits {
	display: grid;
	gap: var(--rd-5);
}

/* The month is a heading over its own dates, not a card: a border under it
   separates the groups without drawing fifty boxes. */
.rd-visits__monthname {
	margin: 0 0 var(--rd-3);
	padding-bottom: var(--rd-2);
	border-bottom: 2px solid var(--rd-gold);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rd-royal);
}

.rd-visits__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

/* The date is a fixed column so the club names line up down the whole month
   — a ragged left edge on a schedule is what makes it hard to scan. */
.rd-visits__item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: var(--rd-4);
	align-items: baseline;
	padding: var(--rd-3) var(--rd-3) var(--rd-3) 0;
	border-bottom: 1px solid var(--rd-line);
}

.rd-visits__item:last-child {
	border-bottom: 0;
}

.rd-visits__when {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
}

.rd-visits__daynum {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--rd-royal);
	font-variant-numeric: tabular-nums;
}

.rd-visits__weekday {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rd-muted);
}

.rd-visits__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rd-visits__club {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--rd-ink);
}

.rd-visits__ag {
	font-size: 14px;
	line-height: 1.5;
	color: var(--rd-muted);
}

.rd-breadcrumb {
	margin: 0 0 var(--rd-4);
}

.rd-legal__updated {
	margin: var(--rd-3) 0 var(--rd-6);
	font-size: 14px;
	font-weight: 600;
	color: var(--rd-muted);
}

.rd-empty {
	padding: var(--rd-8) var(--rd-5);
	text-align: center;
	font-size: 17px;
	color: var(--rd-muted);
	border: 1.5px dashed var(--rd-line-3);
	border-radius: var(--rd-r-lg);
}

.rd-searchform {
	display: flex;
	gap: var(--rd-3);
	flex-wrap: wrap;
}

.rd-searchform .rd-input {
	flex: 1;
	min-width: 220px;
}

.rd-searchform-wrap {
	max-width: 560px;
	margin-top: var(--rd-6);
}

.rd-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-3);
	margin-top: var(--rd-7);
}

/* ==================================================== 24c. TOUCH SIZE ===== */

/*
 * Two tiers, both met:
 *   - every pointer gets WCAG 2.2 AA's 24px minimum (SC 2.5.8);
 *   - coarse pointers get the 44px the brief asks for, where it matters.
 * Applying 44px to every inline link would wreck the footer's density on a
 * mouse-driven desktop for no accessibility gain.
 */
.rd-footer__menu a,
.rd-footer__legal a,
.rd-footer__docs,
.rd-contactcard__value a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (pointer: coarse) {
	.rd-footer__menu a,
	.rd-footer__legal a,
	.rd-footer__docs,
	.rd-contactcard__value a,
	.rd-prose a,
	.rd-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.rd-footer__menu {
		gap: 0;
	}

	.rd-footer__legal {
		gap: var(--rd-3) 20px;
	}

	.rd-clubdialog__close {
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
	}

	.rd-microbanner__close {
		top: -18px;
		right: -18px;
		width: 44px;
		height: 44px;
	}

	/* That button is a touch target now, and it hangs 18px above its own
	   card — so the column opens up enough for it to clear the bar above. */
	.rd-fixedstack {
		gap: var(--rd-5);
	}
}

/* =================================================== 24e. MICRO BANNER === */

/*
 * One fixed column at the bottom-left holding the signed-in bar and the
 * promo card, newest concern on top. Sharing a column rather than each
 * being fixed on its own is what keeps them from overlapping — and what
 * lets the bar drop into the promo card's place when it is dismissed.
 *
 * Lives outside .rd-frame in footer.php — that wrapper has overflow: hidden,
 * which would otherwise clip a position: fixed child instead of letting it
 * float above the page.
 */
/*
 * The cookie consent banner (rd-consent, §… below) is another independent
 * fixed-to-the-bottom element, built later and never told about this one.
 * Both anchor to the viewport's bottom edge, so a visitor who is also a
 * signed-in member or hasn't dismissed the micro banner — and has not yet
 * answered the cookie prompt — got this column sitting z-index above the
 * banner and covering its Αποδοχή/Απόρριψη buttons, on every viewport
 * width, not only small ones. The banner starts `hidden` in the markup and
 * JS only ever toggles that one attribute (assets/js/consent.js), so
 * :has() here reacts to the same state without either file knowing about
 * the other.
 */
body:has(#rd-consent-banner:not([hidden])) .rd-fixedstack {
	display: none;
}

.rd-fixedstack {
	position: fixed;
	left: var(--rd-5);
	bottom: var(--rd-5);
	z-index: 190;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rd-4);
	max-width: 320px;
}

/* The signed-in member's bar. Solid royal against the promo card's white,
   because it reports a state rather than offering somewhere to go. */
.rd-memberbar {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	margin: 0;
	padding: 8px var(--rd-4);
	border-radius: var(--rd-r-lg);
	background: var(--rd-royal);
	color: var(--rd-white);
	font-size: 13px;
	line-height: 1.3;
	box-shadow: var(--rd-shadow-panel);
}

.rd-memberbar__who {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-memberbar__out {
	flex-shrink: 0;
	color: var(--rd-white);
	font-weight: 700;
	text-decoration: underline;
}

.rd-memberbar__out:hover,
.rd-memberbar__out:focus {
	text-decoration: none;
}

/* A small, sitewide, dismissible promo card. Relative, not static: the close
   button is absolutely positioned against it. */
.rd-microbanner {
	position: relative;
}

.rd-microbanner__close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rd-line-3);
	border-radius: 50%;
	background: var(--rd-white);
	color: var(--rd-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--rd-shadow-card);
}

.rd-microbanner__close:hover {
	color: var(--rd-azure);
	border-color: var(--rd-azure);
}

.rd-microbanner__link {
	display: flex;
	align-items: center;
	gap: var(--rd-3);
	padding: var(--rd-3) var(--rd-4);
	border-radius: var(--rd-r-lg);
	border-left: 3px solid var(--rd-gold);
	background: var(--rd-white);
	box-shadow: var(--rd-shadow-panel);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.rd-microbanner__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--rd-shadow-lift);
}

.rd-microbanner__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rd-microbanner__heading {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rd-royal);
}

.rd-microbanner__text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rd-ink);
}

.rd-microbanner__link svg {
	flex-shrink: 0;
	color: var(--rd-azure);
}

/* Reserves room at the foot of the page so the fixed cards never sit on top
   of real footer content once a visitor scrolls all the way down. The
   two-class rule is deliberately more specific: with both cards stacked the
   column is taller than either alone. */
body.has-memberbar .rd-footer {
	padding-bottom: 96px;
}

body.has-microbanner .rd-footer {
	padding-bottom: 140px;
}

body.has-memberbar.has-microbanner .rd-footer {
	padding-bottom: 200px;
}

@media print {
	.rd-fixedstack {
		display: none;
	}
}

/* ========================================================== 25. MOTION === */

[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s ease;
}

[data-reveal].is-revealed,
.rd-no-reveal [data-reveal] {
	opacity: 1;
	transform: none;
}

/* No JS? Nothing should ever stay invisible. */
.no-js [data-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ====================================================== 26. RESPONSIVE ==== */

/*
 * Header breakpoints, set by measurement rather than by eye.
 *
 * The client asked for a large masterbrand (88px tall, ~252px wide). With that
 * logo and seven nav items, the horizontal row measures 1041px, so it needs
 * ~1280px to sit on one line — and only ~36px would be left over, which the
 * next renamed menu item would eat. So: full spacing from 1400px, a compacted
 * row down to 1100px with ~290px of slack for longer labels, and the
 * disclosure panel below that — the burger the design guide calls for.
 */
@media (max-width: 1399px) {
	.rd-logo img {
		height: 64px;
	}

	.rd-navlink,
	.rd-navdocs {
		padding: 9px 10px;
		font-size: 14.5px;
	}

	.rd-navjoin {
		padding: 11px 16px;
		font-size: 14.5px;
	}

	.rd-nav {
		gap: var(--rd-1);
	}

	.rd-header__inner {
		gap: var(--rd-4);
	}
}

@media (max-width: 1100px) {
	.rd-navtoggle {
		display: inline-flex;
	}

	/* Without JS there is nothing to open the panel with, so the links simply
	   stack in the flow and the toggle is withdrawn. */
	.no-js .rd-navtoggle {
		display: none;
	}

	.no-js .rd-nav {
		position: static;
		padding-left: 0;
		padding-right: 0;
		box-shadow: none;
		border-bottom: 0;
		background: transparent;
	}

	.no-js .rd-header__inner {
		flex-wrap: wrap;
	}

	/* Nav collapses into a disclosure panel. */
	.rd-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--rd-1);
		padding: var(--rd-4) var(--cx) var(--rd-5);
		background: var(--rd-white);
		border-bottom: 1px solid var(--rd-line);
		box-shadow: 0 20px 40px -24px rgba(23, 69, 143, .5);
	}

	/* Collapsed by default once scripting is available; the head bootstrap adds
	   `.js` before first paint so the panel never flashes open. */
	.js .rd-nav {
		display: none;
	}

	.js .rd-nav.is-open {
		display: flex;
	}

	.rd-nav .rd-navlink,
	.rd-nav .rd-navdocs,
	.rd-nav .rd-navjoin {
		margin-left: 0;
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: var(--rd-ink);
		/* The desktop row relies on nowrap to stay compact; the vertical
		   panel has the full width to work with, so a longer label (added
		   later in wp-admin) wraps instead of overflowing past the edge. */
		white-space: normal;
	}

	.rd-nav .rd-navjoin {
		justify-content: center;
		margin-top: var(--rd-2);
		color: var(--rd-white);
	}

	.rd-has-transparent-header .rd-header .rd-nav .rd-navlink,
	.rd-has-transparent-header .rd-header .rd-nav .rd-navdocs {
		color: var(--rd-ink);
		border-color: var(--rd-line);
	}

	.rd-logo img {
		height: 60px;
	}
}

@media (max-width: 1199px) {
	:root {
		--cx: 34px;
	}
}

@media (max-width: 1100px) {
	.rd-statgrid {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

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

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

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

@media (max-width: 1024px) {
	.rd-map {
		grid-template-columns: 1fr;
	}

	.rd-story__row {
		grid-template-columns: 1fr;
		gap: var(--rd-5);
	}

	/* Image always leads on a single-column story row. */
	.rd-story__row:nth-child(even) .rd-story__media {
		order: -1;
	}

	.rd-videobtn__media {
		height: 420px;
	}
}

@media (max-width: 900px) {
	.rd-g3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* A quarter of a phone is not a column, it is a stamp. The booklet goes
	   under the text and stops sticking — there is nothing to stick to once
	   the two are in one column. */
	.rd-plan {
		grid-template-columns: minmax(0, 1fr);
	}

	.rd-plan__aside {
		position: static;
		max-width: 280px;
	}

	/* Two columns leave a club name three words wide on a phone. The date
	   goes above it instead, still on one line. */
	.rd-visits__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rd-1);
	}

	.rd-visits__when {
		flex-direction: row;
		align-items: baseline;
		gap: var(--rd-2);
	}

	.rd-visits__daynum {
		font-size: 17px;
	}

	/* Seven columns still fit on a phone — that is what makes it a calendar —
	   but only just. The cells give up their height and the assistant
	   governor's name, which the list view still carries in full. */
	.rd-cal__cell {
		height: auto;
		min-height: 56px;
		padding: var(--rd-1);
	}

	.rd-cal__head {
		padding: var(--rd-1);
		font-size: 10px;
		text-align: center;
	}

	.rd-cal__day {
		font-size: 11px;
	}

	.rd-cal__event {
		font-size: 10px;
	}

	.rd-cal__ag {
		display: none;
	}

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

	.rd-steps {
		grid-template-columns: 1fr;
	}

	.rd-docgrid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.rd-2col {
		grid-template-columns: 1fr;
		gap: var(--rd-7);
	}

	.rd-idrygrid--2,
	.rd-idrynotes {
		grid-template-columns: 1fr;
	}

	/* Raised from the old 820px cutoff: real 11" tablets in portrait
	   (iPad Air/Pro 11" at 834px CSS width) sat just above it, squeezing
	   the governor's text into a narrow column next to the fixed photo. */
	.rd-gov {
		grid-template-columns: 1fr;
		gap: 28px;
		text-align: center;
		padding: 32px 24px;
	}

	.rd-gov__photo {
		max-width: 320px;
		margin: 0 auto;
	}

	.rd-gov__foot {
		align-items: center;
	}
}

@media (max-width: 820px) {
	.rd-hero {
		min-height: 560px;
		margin-top: -104px;
		padding-top: 104px;
	}

	.rd-nl {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.rd-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--rd-6);
	}

	.rd-logo img {
		height: 60px;
	}

	.rd-section {
		padding-top: var(--rd-8);
		padding-bottom: var(--rd-8);
	}
}

@media (max-width: 768px) {
	:root {
		--cx: 32px;
	}

	.rd-frame {
		margin: 1em;
	}
}

@media (max-width: 720px) {
	.rd-join {
		grid-template-columns: 1fr 1fr;
	}

	.rd-form--2col {
		grid-template-columns: 1fr;
	}

	.rd-joinband,
	.rd-ctaband {
		padding: var(--rd-7) var(--rd-5);
	}
}

@media (max-width: 640px) {
	body {
		font-size: 16px;
	}

	/* The map's SVG scales down with its container, so the pins' hit-circle
	   (r:20 in the 800x560 viewBox) renders well under a usable touch target
	   on a phone-width canvas. Bump it in the same coordinate space to
	   compensate. */
	.rd-pin__hit {
		r: 30px;
	}

	.rd-g3,
	.rd-cards,
	.rd-news,
	.rd-citygrid,
	.rd-fourtest,
	.rd-letterthumbs,
	.rd-idrygrid {
		grid-template-columns: 1fr;
	}

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

	.rd-footer__cols {
		grid-template-columns: 1fr;
	}

	.rd-logo img {
		height: 50px;
	}

	.rd-fixedstack {
		left: var(--rd-3);
		right: var(--rd-3);
		bottom: var(--rd-3);
		align-items: stretch;
		max-width: none;
	}

	.rd-microbanner__text {
		font-size: 13px;
	}

	body.has-microbanner .rd-footer {
		padding-bottom: 120px;
	}

	body.has-memberbar.has-microbanner .rd-footer {
		padding-bottom: 180px;
	}

	.rd-footer__logo img {
		height: 72px;
	}

	.rd-hero {
		min-height: 520px;
	}

	.rd-hero__content {
		max-width: 100%;
	}

	.rd-hero__text {
		font-size: 17px;
	}

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

	.rd-videobtn__media {
		height: 260px;
	}

	.rd-videobtn__play {
		width: 68px;
		height: 68px;
	}

	.rd-videobtn__caption {
		padding: 18px 20px;
		font-size: 17px;
	}

	/* The event row stacks so the date chip and button keep their touch size. */
	.rd-event {
		flex-wrap: wrap;
		gap: var(--rd-4);
	}

	.rd-event__body {
		flex-basis: calc(100% - 96px);
	}

	.rd-event__add {
		width: 100%;
		justify-content: center;
	}

	.rd-article__hero {
		height: 240px;
	}

	/* Keep the lightbox's close button on screen once the viewport is short. */
	.rd-lightbox__close {
		top: auto;
		bottom: -52px;
		right: 50%;
		transform: translateX(50%);
	}

	.rd-gov__quote {
		font-size: 24px;
	}

	.rd-stat__num {
		font-size: 34px;
	}

	.rd-qa-item {
		padding: var(--rd-4);
	}

	.rd-qa-item h2 {
		font-size: 22px;
	}
}

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

@media (max-width: 420px) {
	.rd-join {
		grid-template-columns: 1fr;
	}
}

/* ========================================================= 27. PROJECTS === */

.rd-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rd-badge--gg { background: var(--rd-azure); color: var(--rd-white); }
.rd-badge--drg { background: var(--rd-royal); color: var(--rd-white); }
.rd-badge--polio { background: var(--rd-sky); color: var(--rd-white); }
/* Gold never carries text on its own fill (§ TYPOGRAPHY note in TOKENS) — an
   outline treatment keeps it as an accent only. */
.rd-badge--own { background: var(--rd-white); color: var(--rd-ink); border: 1.5px solid var(--rd-gold); }
.rd-badge--legacy { background: var(--rd-canvas); color: var(--rd-muted); border: 1px solid var(--rd-line-3); }

.rd-projecthero__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rd-3);
	margin-bottom: var(--rd-4);
}

.rd-axischip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 8px;
	border-radius: 999px;
	background: var(--rd-pale);
	color: var(--rd-royal);
	font-size: 13.5px;
	font-weight: 700;
}

a.rd-axischip:hover,
a.rd-axischip:focus-visible {
	background: var(--rd-mist);
	color: var(--rd-royal);
}

.rd-axischip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--rd-white);
	color: var(--rd-azure);
	flex-shrink: 0;
}

/* Έργα archive filtered by Άξονας Δράσης (?axis=): a bar above the grid
   naming the active filter, reusing .rd-axischip rather than a new pill. */
.rd-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-4);
	margin: 0 0 var(--rd-5);
}

.rd-projecthero__photo {
	position: relative;
	height: 460px;
	border-radius: var(--rd-r-xl);
	overflow: hidden;
	background: var(--rd-mist);
	box-shadow: var(--rd-shadow-panel);
}

.rd-projecthero__photo img,
.rd-projecthero__photo .rd-media {
	width: 100%;
	height: 100%;
}

.rd-projecthero__photo img {
	object-fit: cover;
}

/* A standalone block, not an overlay on the photo — a card straddling the
   photo's bottom edge relied on the photo wrapper's overflow being visible
   there while everything else about it stayed clipped to the rounded
   corners, which broke as soon as the two needs collided. */
.rd-projectcost {
	display: flex;
	align-items: center;
	gap: var(--rd-4);
	margin-top: var(--rd-5);
	background: var(--rd-pale);
	border-radius: var(--rd-r-lg);
	padding: var(--rd-4) var(--rd-5);
}

.rd-projectcost__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--rd-white);
	color: var(--rd-azure);
	flex-shrink: 0;
}

.rd-projectcost__label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rd-muted);
}

.rd-projectcost__value {
	display: block;
	font-size: 26px;
	font-weight: 800;
	color: var(--rd-royal);
	line-height: 1.2;
}

.rd-projectbody {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: var(--rd-7);
	margin-top: var(--rd-7);
	align-items: start;
}

.rd-projectbody__text p {
	font-size: 16.5px;
	line-height: 1.75;
}

.rd-factpanel {
	background: var(--rd-offwhite);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
	padding: var(--rd-5);
}

.rd-factpanel__row {
	padding: var(--rd-3) 0;
	border-bottom: 1px solid var(--rd-line-2);
}

.rd-factpanel__row:first-child {
	padding-top: 0;
}

.rd-factpanel__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.rd-factpanel__label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rd-muted);
	margin-bottom: 8px;
}

.rd-locpills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rd-locpill {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: var(--rd-pale);
	color: var(--rd-azure-dark);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
}

.rd-iconfeat {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rd-5);
	margin-top: var(--rd-7);
}

.rd-iconfeat__item {
	text-align: center;
	padding: var(--rd-5) var(--rd-3);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
}

.rd-iconfeat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--rd-3);
	border-radius: 50%;
	color: var(--rd-white);
	background: var(--rd-azure);
}

.rd-iconfeat__text {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--rd-royal);
	line-height: 1.4;
}

.rd-projects {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rd-5);
}

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

/* Έργα page only (template-projects.php) — not the homepage's 4-up teaser.
   A strict 16:9 frame: the photo is pinned inside it and cropped (object-fit
   on .rd-media__img), so a 3:2 or near-square upload can no longer stretch
   the box to its own proportions — aspect-ratio alone only sets a minimum
   when the content is taller. */
.rd-projects--3 .rd-projectcard__media {
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.rd-projects--3 .rd-projectcard__media > .rd-media {
	position: absolute;
	inset: 0;
}

.rd-projectcard {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rd-projectcard:hover,
.rd-projectcard:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--rd-shadow-lift);
	border-color: var(--rd-azure);
	color: inherit;
}

.rd-projectcard__media {
	position: relative;
	height: 190px;
	background: var(--rd-mist);
}

.rd-projectcard__media .rd-badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

.rd-projectcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px;
}

.rd-projectcard__title {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}

.rd-projectcard__excerpt {
	flex: 1;
	margin: 0 0 var(--rd-4);
	font-size: 14px;
	line-height: 1.55;
	color: var(--rd-muted);
}

.rd-projectcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--rd-3);
	border-top: 1px solid var(--rd-line-2);
	font-size: 14px;
}

.rd-projectcard__cost {
	font-weight: 800;
	color: var(--rd-royal);
}

.rd-projectcard__more {
	font-weight: 700;
	color: var(--rd-azure);
}

.rd-ministats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-5);
	margin: var(--rd-7) 0 var(--rd-8);
}

.rd-ministats__item {
	text-align: center;
	padding: var(--rd-5);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
}

.rd-ministats__value {
	display: block;
	font-size: 36px;
	font-weight: 800;
	color: var(--rd-azure);
	line-height: 1.15;
}

.rd-ministats__label {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rd-muted);
}

@media (max-width: 1100px) {
	.rd-projects {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.rd-projectbody {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 900px) {
	.rd-projects--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.rd-ministats {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.rd-projects,
	.rd-projects--3 {
		grid-template-columns: 1fr;
	}

	.rd-iconfeat {
		grid-template-columns: 1fr;
	}

	.rd-projecthero__photo {
		height: 280px;
	}

	.rd-projectcost {
		flex-wrap: wrap;
	}
}

/* =========================================== 27b. ΕΡΓΑ — BOOKLET SECTIONS === */

/* The Έργα page follows the district's «Τα Μεγάλα Έργα Μας» booklet: the
   cover's subtitle under the <h1>, «Το Ρόταρυ στην Ελλάδα» (photo + story +
   the governor's quote), the two project groups, and the closing summary,
   which reuses the governor card (.rd-gov) from Ποιοι Είμαστε. */

.rd-intro__subtitle {
	margin: var(--rd-4) 0 0;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.4;
	font-weight: 700;
	font-style: italic;
	color: var(--rd-royal);
}

.rd-intro__subtitle + div .rd-intro__para:first-child {
	margin-top: var(--rd-3);
}

.rd-sectionhead--wide .rd-sectionhead__lead {
	max-width: 80ch;
}

.rd-history {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--rd-7);
	align-items: start;
}

.rd-history__figure {
	position: sticky;
	top: calc(var(--rd-header-h) + var(--rd-5));
	margin: 0;
}

.rd-history__photo {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--rd-r-frame);
	overflow: hidden;
	background: var(--rd-mist);
	box-shadow: var(--rd-shadow-frame);
}

.rd-history__photo > .rd-media {
	position: absolute;
	inset: 0;
}

.rd-history__caption {
	margin-top: var(--rd-5);
	padding: var(--rd-4) var(--rd-5);
	background: var(--rd-white);
	border: 1px solid var(--rd-line);
	border-left: 3px solid var(--rd-gold);
	border-radius: var(--rd-r-md);
	font-size: 15px;
	line-height: 1.6;
	font-style: italic;
	color: var(--rd-muted);
}

.rd-history__text p {
	margin: 0 0 1.1em;
}

.rd-history__text p:last-child {
	margin-bottom: 0;
}

.rd-history__quote {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--rd-6) var(--rd-7);
	align-items: end;
	margin: var(--rd-8) 0 0;
	padding: var(--rd-7);
	border-radius: var(--rd-r-2xl);
	background: linear-gradient(135deg, var(--rd-royal) 0%, var(--rd-azure) 100%);
	color: var(--rd-white);
}

.rd-history__quote > p {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.45;
	font-weight: 700;
	font-style: italic;
}

.rd-history__sign {
	margin: 0;
	padding-left: var(--rd-5);
	border-left: 3px solid var(--rd-gold);
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
}

.rd-history__sign::first-line {
	font-weight: 700;
	color: var(--rd-white);
}

.rd-gov--summary .rd-gov__text p {
	margin: 0 0 1em;
}

.rd-gov__sign {
	margin: 0;
	line-height: 1.6;
	font-weight: 500;
	color: var(--rd-muted);
}

.rd-gov__sign::first-line {
	font-weight: 700;
	color: var(--rd-royal);
}

@media (max-width: 1024px) {
	.rd-history {
		grid-template-columns: 1fr;
	}

	.rd-history__figure {
		position: static;
	}

	.rd-history__quote {
		grid-template-columns: 1fr;
		padding: var(--rd-6);
	}

	.rd-history__sign {
		white-space: normal;
	}
}

/* =================================== 27c. CLUB PORTAL — SUBMISSIONS === */

/* «Υποβολές Ομίλων» on the Club Portal (template-parts/parts/club-submit.php):
   two action cards that open the announcement / event dialogs, the member's
   own submissions with their status, and the dialogs' form controls. */

.rd-submitcards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rd-5);
}

.rd-submitcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rd-3);
	padding: var(--rd-6);
	border: 1px solid var(--rd-line-2);
	border-radius: var(--rd-r-xl);
	background: var(--rd-white);
	box-shadow: var(--rd-shadow-card);
	color: var(--rd-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rd-submitcard:hover,
.rd-submitcard:focus-visible {
	transform: translateY(-2px);
	border-color: var(--rd-azure);
	box-shadow: var(--rd-shadow-lift);
}

.rd-submitcard:focus-visible {
	outline: 3px solid var(--rd-sky);
	outline-offset: 3px;
}

.rd-submitcard__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--rd-royal);
}

.rd-submitcard__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--rd-muted);
}

.rd-submitcard__cta {
	margin-top: auto;
	font-weight: 700;
	color: var(--rd-azure);
}

.rd-mysubs {
	margin-top: var(--rd-7);
}

.rd-mysubs__title {
	margin: 0 0 var(--rd-4);
	font-size: 20px;
	font-weight: 800;
}

.rd-mysubs__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
	background: var(--rd-white);
}

.rd-mysubs__item {
	display: grid;
	grid-template-columns: 110px 1fr auto auto;
	gap: var(--rd-4);
	align-items: center;
	padding: var(--rd-4) var(--rd-5);
	border-top: 1px solid var(--rd-line);
	font-size: 15px;
}

.rd-mysubs__item:first-child {
	border-top: 0;
}

.rd-mysubs__kind {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rd-azure);
}

.rd-mysubs__name {
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-mysubs__reason {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 14px;
	color: var(--rd-muted);
}

.rd-mysubs__date {
	color: var(--rd-faint);
	white-space: nowrap;
}

.rd-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.rd-status--pending {
	background: #FFF4DE;
	color: #7A4B00;
}

.rd-status--published {
	background: #E3F4EA;
	color: var(--rd-success);
}

.rd-status--rejected {
	background: #FBE9E8;
	color: var(--rd-error);
}

/* The dialogs: wider than the club-contact one, and scrollable inside. */
.rd-submitdialog {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}

.rd-submitform {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rd-4);
	margin-top: var(--rd-5);
}

.rd-submitform.rd-form--2col {
	grid-template-columns: 1fr 1fr;
}

.rd-submitform .rd-field,
.rd-submitform .rd-btn,
.rd-submitform .rd-clubdialog__msg {
	margin: 0;
}

.rd-submitform > .rd-btn,
.rd-submitform > .rd-clubdialog__msg,
.rd-submitform > .rd-submitform__club {
	grid-column: 1 / -1;
}

.rd-submitform > .rd-btn {
	justify-self: start;
}

.rd-submitform.is-sent .rd-field,
.rd-submitform.is-sent .rd-submitform__club,
.rd-submitform.is-sent .rd-btn {
	display: none;
}

.rd-submitform__club {
	display: flex;
	align-items: center;
	gap: var(--rd-2);
	margin: 0;
	padding: var(--rd-3) var(--rd-4);
	border-radius: var(--rd-r-md);
	background: var(--rd-pale);
	color: var(--rd-royal);
}

.rd-field__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-field__optional {
	font-weight: 400;
	color: var(--rd-faint);
}

.rd-field__hint {
	margin: 0;
	font-size: 13px;
	color: var(--rd-muted);
}

.rd-field--times {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rd-3);
}

.rd-field--times > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rd-tagpick {
	margin: 0;
	padding: 0;
	border: 0;
}

.rd-tagpick legend {
	margin-bottom: var(--rd-2);
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--rd-royal);
}

.rd-tagpick__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-2);
}

.rd-tagpick__item {
	position: relative;
}

.rd-tagpick__item input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.rd-tagpick__item span {
	display: inline-block;
	padding: 8px 14px;
	border: 1.5px solid #C7D6E8;
	border-radius: 999px;
	background: var(--rd-white);
	font-size: 14px;
	font-weight: 600;
	color: var(--rd-royal);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rd-tagpick__item input:checked + span {
	border-color: var(--rd-azure);
	background: var(--rd-azure);
	color: var(--rd-white);
}

.rd-tagpick__item input:focus-visible + span {
	outline: 3px solid var(--rd-sky);
	outline-offset: 2px;
}

.rd-submitform .rd-check {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-2);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rd-ink);
}

.rd-submitform .rd-check input {
	margin-top: 3px;
	flex-shrink: 0;
}

.rd-photopick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-3);
}

.rd-photopick__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.rd-photopick__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 120px;
	height: 120px;
	padding: var(--rd-2);
	border: 2px dashed #C7D6E8;
	border-radius: var(--rd-r-md);
	background: var(--rd-offwhite);
	color: var(--rd-azure);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

.rd-photopick__drop:hover,
.rd-photopick__input:focus-visible + .rd-photopick__list,
.rd-photopick:focus-within .rd-photopick__drop {
	border-color: var(--rd-azure);
}

.rd-photopick.is-full .rd-photopick__drop {
	display: none;
}

.rd-photopick__list {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-photopick__item {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: var(--rd-r-md);
	overflow: hidden;
	background: var(--rd-mist);
}

.rd-photopick__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rd-photopick__main {
	position: absolute;
	left: 6px;
	bottom: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--rd-royal);
	color: var(--rd-white);
	font-size: 11px;
	font-weight: 700;
}

.rd-photopick__remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 46, 99, .85);
	color: var(--rd-white);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* Announcement photos after the first, and «σκοποί» chips (single.php,
   single-rd_event.php). */
.rd-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--rd-3);
	margin: var(--rd-6) 0 0;
}

.rd-gallery__item {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--rd-r-md);
	overflow: hidden;
	background: var(--rd-mist);
}

.rd-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.rd-gallery__item:hover .rd-gallery__img {
	transform: scale(1.04);
}

.rd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-2);
	margin: var(--rd-6) 0 0;
	padding: 0;
	list-style: none;
}

.rd-chip {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--rd-pale);
	color: var(--rd-royal);
	font-size: 13px;
	font-weight: 700;
}

/* Events: linked titles and club line in the shared list, the single event
   page's facts, and the month headings on /ekdiloseis/. */
.rd-event__link {
	color: inherit;
	text-decoration: none;
}

.rd-event__link:hover,
.rd-event__link:focus-visible {
	color: var(--rd-azure);
	text-decoration: underline;
}

.rd-event__club {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--rd-azure);
}

.rd-eventmonth {
	margin: var(--rd-7) 0 var(--rd-4);
	font-size: 22px;
	font-weight: 800;
}

.rd-eventmonth:first-child {
	margin-top: 0;
}

.rd-eventfacts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rd-4);
	margin: var(--rd-6) 0 0;
}

.rd-eventfacts__item {
	padding: var(--rd-4) var(--rd-5);
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-r-lg);
	background: var(--rd-white);
}

.rd-eventfacts dt {
	display: flex;
	align-items: center;
	gap: var(--rd-2);
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rd-azure);
}

.rd-eventfacts dt svg {
	color: var(--rd-gold);
}

.rd-eventfacts dd {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--rd-royal);
}

.rd-eventfacts__sub {
	font-weight: 400;
	color: var(--rd-muted);
}

.rd-eventfacts__map {
	font-size: 14px;
	font-weight: 700;
}

.rd-eventpage__actions {
	margin: var(--rd-5) 0 0;
}

@media (max-width: 900px) {
	.rd-submitcards,
	.rd-eventfacts {
		grid-template-columns: 1fr;
	}

	.rd-mysubs__item {
		grid-template-columns: 1fr auto;
	}

	.rd-mysubs__kind,
	.rd-mysubs__date {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.rd-submitform.rd-form--2col,
	.rd-field--times {
		grid-template-columns: 1fr;
	}

	.rd-submitdialog {
		padding: 24px 18px;
	}

	.rd-photopick__drop,
	.rd-photopick__item {
		width: 96px;
		height: 96px;
	}
}

/* ============================================================ 28. PRINT === */

@media print {
	.rd-header,
	.rd-navtoggle,
	.rd-hero__scroll,
	.rd-nl,
	.rd-footer__legal,
	.rd-videobtn__play {
		display: none !important;
	}

	.rd-page,
	.rd-frame {
		margin: 0;
		padding: 0;
		box-shadow: none;
		background: #fff;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}