/**
 * Reusable components shared across the homepage and every section page.
 * Class names are new (the source design used inline styles throughout) but every
 * value below is carried over 1:1 from docs/design-analysis.md §3 for visual fidelity.
 */

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--safi-border);
}

/* The cream tint + blur live on a pseudo-element rather than directly on .site-header.
   filter/backdrop-filter on an element makes it the containing block for any
   position:fixed descendant — and .nav-drawer-backdrop / .nav-drawer (rendered inside
   .site-header via template-parts/navigation.php) are exactly that. Left on .site-header
   itself, the "fixed" backdrop would resolve inset:0 against the header's own ~76px box
   instead of the viewport, leaving everything below the header unshaded. A ::before with
   no DOM descendants of its own can't trap anything, so the same visual blur is safe here. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(245, 240, 231, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.site-header__inner {
	max-width: var(--safi-max-width-wide);
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.site-logo--drawer {
	min-width: 0;
}

/* Match the compact header lockup (old 42px mark + wordmark), sized up from the
   original 52px for better brand visibility. Same tight vertical rhythm as the
   reference header. */
.site-logo__img {
	display: block;
	width: 62px;
	height: 62px;
	object-fit: contain;
	flex-shrink: 0;
}

.site-logo__img--drawer {
	width: 56px;
	height: 56px;
}

.site-logo__img--footer {
	width: 66px;
	height: 66px;
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.site-logo__line1 {
	font-family: var(--safi-font-heading);
	font-weight: 700;
	font-size: 1.06rem;
	color: var(--safi-petrol);
}

.site-logo__line2 {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--safi-text-muted-1);
	text-transform: uppercase;
}

/* ---------- Desktop nav ---------- */

/* .nav is the <ul> that wp_nav_menu() outputs directly (container => false) —
   styled here without a custom link class so core's default markup just works. */
.nav {
	list-style: none;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.nav li {
	display: flex;
}

.nav a {
	padding: 8px 12px;
	border-radius: 9px;
	text-decoration: none;
	color: #3b4f5e;
	font-weight: 500;
	font-size: 0.95rem;
}

/* Phase 3.1: hover and current-page were both --safi-bg-alt (a warm sand) with petrol
   ink, which read as "slightly darker beige" and gave the header no brand colour at all.
   Both now use the teal tints with --safi-teal-hover ink — 5.79:1 on the hover tint and
   5.30:1 on the stronger current-page tint, so the extra colour costs nothing in contrast.
   Current-page keeps a second cue beyond colour (the 600 weight), so the state is not
   signalled by hue alone. */
.nav a:hover {
	background: var(--safi-teal-tint);
	color: var(--safi-teal-hover);
}

.nav li.current-menu-item > a,
.nav li.current_page_item > a {
	background: var(--safi-teal-tint-strong);
	color: var(--safi-teal-hover);
	font-weight: 600;
}

/* ---------- Language switcher ----------
   Sits immediately before the cross-audience CTA, so the two "leave this context" controls
   are adjacent (docs/i18n-plan.md §8). A segmented control rather than a dropdown: two
   options do not deserve a menu, and this shows the alternative without a click.

   No longer a stub — it switches the theme's UI strings server-side (inc/ui-lang.php).
   The inactive option is a real link and the pending/disabled treatment is gone with it.

   The active option is white on --safi-teal at 5.38:1. The inactive one is
   --safi-text-muted-2 on the cream header at 6.58:1 — it is a normal link, so it must
   clear 4.5:1 outright, and it does with room to spare. Current state is carried by
   aria-current plus the filled pill, so it is never signalled by colour alone (1.4.1). */

.lang-switch {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 3px;
	border-radius: var(--safi-radius-pill);
	background: var(--safi-bg-alt);
	border: 1px solid var(--safi-border-input);
}

.lang-switch__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 5px 10px;
	border: 0 !important;
	border-radius: var(--safi-radius-pill);
	background: transparent;
	font: 600 0.82rem/1.2 var(--safi-font-body);
	letter-spacing: 0.04em;
	color: var(--safi-text-muted-2);
	text-decoration: none;
}

a.lang-switch__option:hover,
a.lang-switch__option:focus-visible {
	background: var(--safi-teal-tint);
	color: var(--safi-teal-hover); /* 5.79:1 on the tint — same pair as .nav a:hover */
}

.lang-switch__option.is-current {
	background: var(--safi-teal);
	color: #fff;
}

/* ---------- Cross-audience nav CTA ----------
   The bridge between the visitor and business experiences (docs/audience-split-plan.md).
   A sibling of .nav rather than an item inside it — .nav takes margin-left:auto, so this
   sits after the menu at the end of the header row. Deliberately styled as a filled
   button, not a nav link: it's a jump to the other site, not another section of this one.
   Its drawer variant is sized in nav-drawer.css but inherits its colours from here.

   Phase 3.1: was --safi-petrol / --safi-footer-bg-hover, i.e. a navy pill that read as
   more chrome. It now shares .btn--primary's exact colour pair so the one element that
   bridges the two audiences is also the most colourful thing in the header. White on
   --safi-teal is 5.38:1 and on --safi-teal-hover 7.06:1; the pill against the cream header
   is 4.74:1, well past the 3:1 that 1.4.11 asks of a control boundary. */

.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 9px 16px;
	border-radius: var(--safi-radius-pill);
	background: var(--safi-teal);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	border: 0 !important;
}

.nav-cta:hover,
.nav-cta:focus-visible {
	background: var(--safi-teal-hover);
	color: #fff;
}

.nav-cta svg {
	flex-shrink: 0;
	opacity: 0.85;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 26px;
	border-radius: var(--safi-radius-sm);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	border: 0 !important; /* belt-and-suspenders vs. reset.css's button{border:1px solid #c36} — see inc/enqueue.php's handle-mismatch fix, which should stop that stylesheet from loading at all now */
	cursor: pointer;
}

.btn--primary {
	/* Was --safi-teal-hover, because the old --safi-teal gave white text only 4.26:1 here
	   (button text is 16.8px/600, which doesn't meet WCAG's "large text" exemption). The
	   Phase 3 palette makes --safi-teal itself 5.38:1 with white, so the primary button now
	   carries the brighter brand blue at rest and the tokens finally mean what they're
	   named: base at rest, -hover on hover. */
	background: var(--safi-teal);
	color: #fff;
	box-shadow: var(--safi-shadow-cta);
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary:focus-visible {
	background: var(--safi-teal-hover) !important; /* 7.06:1 with white */
	color: #fff !important;
}

.btn--secondary {
	background: rgba(255, 253, 248, 0.92);
	color: var(--safi-petrol);
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	padding: 15px 24px;
}

.btn--secondary:hover,
.btn--secondary:focus,
.btn--secondary:focus-visible {
	background: var(--safi-surface) !important;
	color: var(--safi-petrol) !important;
}

/* Outline: the second action when two brand CTAs sit side by side. Unlike .btn--secondary
   (a near-white fill built for dark hero backgrounds) this stays unmistakably a button on
   a light card or popup — 2px teal border at 5.29:1 against --safi-surface carries 1.4.11,
   and the --safi-teal-hover label is 6.94:1. Hover fills to solid teal, white at 5.38:1. */
.btn--outline {
	background: transparent;
	color: var(--safi-teal-hover);
	border: 2px solid var(--safi-teal) !important;
	padding: 13px 24px; /* 2px less than .btn, so the border keeps the same outer height */
}

.btn--outline:hover,
.btn--outline:focus,
.btn--outline:focus-visible {
	background: var(--safi-teal) !important;
	border-color: var(--safi-teal) !important;
	color: #fff !important;
}

.btn--dark {
	background: var(--safi-petrol);
	color: #fff;
	padding: 14px 24px;
}

.btn--dark:hover,
.btn--dark:focus,
.btn--dark:focus-visible {
	background: var(--safi-footer-bg-hover) !important;
	color: #fff !important;
}

.btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ---------- Section header pattern ---------- */

.section {
	padding: var(--safi-section-padding-y) var(--safi-section-padding-x);
}

.section--alt {
	background: var(--safi-bg-alt);
}

.section__container {
	max-width: var(--safi-max-width);
	margin: 0 auto;
}

.section__container--narrow {
	max-width: var(--safi-max-width-narrow);
}

.section-header__kicker {
	margin: 0 0 12px;
	color: var(--safi-teal-hover); /* stays on -hover: this label is 13px uppercase, and while the Phase 3 --safi-teal now reaches 4.74:1 on --safi-bg, -hover's 6.22:1 is the right margin for text this small */
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.section-header__title {
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	line-height: 1.18;
	margin: 0 0 18px;
	color: var(--safi-petrol);
	max-width: 22ch;
}

.section-header__intro {
	font-size: 1.08rem;
	line-height: 1.74;
	color: var(--safi-text-muted-2);
	max-width: 66ch;
	margin: 0;
}

/* ---------- Cards ---------- */

.card {
	background: var(--safi-surface);
	border: 1px solid var(--safi-border-card);
	border-radius: var(--safi-radius-md);
	box-shadow: var(--safi-shadow-card);
}

.feature-card {
	padding: 28px 26px;
}

/* Icon containers are filled with the brand teal→green lockup and a white glyph, matching
   .site-logo__mark / .program-mark__disc / .peek-steps__number / .step-card__number. They were
   light tint + teal glyph, which read washed out next to the Phase 3.1 header CTA. The
   rule across the theme is now: gradient fill = icon container or brand mark, flat
   --safi-teal = interactive control (.btn--primary, .nav-cta, .accordion__tag).
   White on the gradient is 5.38:1 at the teal end and 5.99:1 at the green end, both well
   past the 3:1 that 1.4.11 asks of a non-text glyph. One shared rule — no audience fork. */
.feature-card__icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--safi-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin-bottom: 16px;
}

.feature-card__title {
	font-size: 1.22rem;
	margin: 0 0 8px;
	color: var(--safi-petrol);
}

.feature-card__text {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--safi-text-muted-3);
	margin: 0;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
}

/* ---------- Program mark (σήμα) ----------
   The certification mark businesses receive — NOT the site logo, which stays in the
   header, drawer and footer. Rendered by safi_program_mark() in inc/theme-setup.php.

   Lives here rather than in section.css because both the «Το σήμα» pages (section.css) and
   the visitor/business homepage hubs (home.css) use it, and those two stylesheets are
   mutually exclusive — same reasoning as .cross-audience-band below.

   Geometry follows the source design (circular surface, dashed inner ring, gradient disc,
   wordmark). The COLOURS deliberately do not: the design's gradient ends on #6fa792, which
   measures 2.76:1 under the white checkmark and is the exact failure
   docs/accessibility-audit.md §1 fixed. On --safi-teal → --safi-green the same glyph is
   5.38:1 at the teal end and 5.99:1 at the green end.

   Sized by --program-mark-size, set inline per call site, so the same component serves the
   206px seal on the label pages and the ~104px peek in the hub. */

.program-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	--program-mark-size: 206px;
}

.program-mark__seal {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: var(--program-mark-size);
	height: var(--program-mark-size);
	max-width: 100%;
	padding: calc(var(--program-mark-size) * 0.12);
	border-radius: 50%;
	background: var(--safi-surface);
	border: 2px solid #dfe7df;
	box-shadow: 0 16px 36px rgba(28, 52, 60, 0.12);
}

.program-mark__ring {
	position: absolute;
	inset: calc(var(--program-mark-size) * 0.053);
	border-radius: 50%;
	border: 1.5px dashed #b9c8c1; /* 3.06:1 on --safi-surface — decorative, but kept over 3:1 so it survives a low-contrast screen */
}

.program-mark__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--program-mark-size) * 0.252);
	height: calc(var(--program-mark-size) * 0.252);
	border-radius: 50%;
	background: linear-gradient(150deg, var(--safi-teal), var(--safi-green));
	color: #fff;
}

.program-mark__disc svg {
	width: 50%;
	height: 50%;
}

.program-mark__wordmark {
	font-family: var(--safi-font-heading);
	font-weight: 700;
	font-size: clamp(0.78rem, calc(var(--program-mark-size) * 0.078), 1rem);
	line-height: 1.2;
	color: var(--safi-petrol);
	margin-top: calc(var(--program-mark-size) * 0.058);
}

/* Provisional while the final artwork is outstanding — see safi_program_mark(). */
.program-mark__caption {
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--safi-text-muted-1); /* 5.86:1 on --safi-surface */
	text-align: center;
	max-width: 22ch;
}

/* ---------- Category dots (business_category taxonomy slug → color) ---------- */

/* Colour now arrives as an inline --safi-cat custom property from safi_category_style_attr()
   (inc/categories.php), so there is no list of known slugs in CSS for a new taxonomy term
   to be missing from. Unset falls back to the neutral default rather than another
   category's colour. */
.cat-dot {
	background: var(--safi-cat, var(--safi-cat-default));
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex-shrink: 0;
}


/* ---------- Filter chips / segmented toggle ---------- */

.chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	cursor: pointer;
	padding: 9px 16px;
	border-radius: var(--safi-radius-pill);
	font-weight: 600;
	font-size: 0.92rem;
	border: 1px solid var(--safi-border-chip) !important;
	background: var(--safi-surface);
	color: var(--safi-text-muted-2);
	transition: all 0.15s;
}

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

.chip:hover,
.chip:focus,
.chip:focus-visible {
	border-color: var(--safi-teal) !important;
	background: var(--safi-bg-alt) !important;
	color: var(--safi-text-muted-2) !important;
}

.chip[aria-pressed='true'] {
	/* Tracks .btn--primary above: the Phase 3 --safi-teal is 5.38:1 with white, so the
	   pressed chip uses the base token at rest (it previously had to use -hover, since the
	   old teal was 4.26:1 and failed AA at this size/weight). */
	border-color: var(--safi-teal);
	background: var(--safi-teal);
	color: #fff;
}

.chip[aria-pressed='true']:hover,
.chip[aria-pressed='true']:focus,
.chip[aria-pressed='true']:focus-visible {
	background: var(--safi-teal-hover) !important;
	border-color: var(--safi-teal-hover) !important;
	color: #fff !important;
}

/* ---------- Business directory cards ---------- */

.business-card {
	padding: 24px;
	display: flex;
	flex-direction: column;
}

/* Category on its own line, status pill on the next — always, not by accident.
   Relying on flex-wrap meant the layout depended on how long the category name happened
   to be: «Εστίαση» left both on one row while «Ξενοδοχεία & Διαμονή» pushed the badge
   down, so cards in the same grid disagreed with each other. A column removes the
   competition for horizontal space entirely. align-items:flex-start keeps both pills at
   their natural width instead of stretching them across the card. */
.business-card__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
}

.business-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--safi-text-muted-1);
}

/* The awarded label («Έχει λάβει το σήμα») is roughly twice the length of the assessing
   one. Without nowrap it wrapped inside the pill, and because the dot is a flex child of
   a centre-aligned row it then sat against the middle of a two-line block — reading as a
   crooked, broken badge. line-height is pinned too: inheriting the body's 1.7 made the
   pill tall and the dot float. flex-shrink:0 stops .business-card__top squeezing it. */
.business-card__status {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 7px;
	padding: 6px 13px;
	border-radius: var(--safi-radius-pill);
	font-weight: 600;
	font-size: 0.82rem;
	line-height: 1.2;
	white-space: nowrap;
}

.business-card__status--awarded {
	background: var(--safi-success-bg);
	color: var(--safi-success-strong);
}

.business-card__status--assessing {
	background: var(--safi-warning-bg);
	color: var(--safi-warning-strong);
}

.business-card__status-dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0; /* a flex child at 8px will otherwise be shrunk to nothing */
	border-radius: 50%;
	background: currentColor; /* follows the status label's own text color */
}

/* ---------- Filtered-out cards ----------
   ROOT CAUSE of the broken /epixeiriseis/ filter: main.js sets `card.hidden = true`, but
   `.business-card { display: flex }` is an AUTHOR rule and the `[hidden] { display: none }`
   that would hide it comes from the UA stylesheet — author beats UA regardless of
   specificity, so the attribute was set and the card stayed visible. The chips looked
   dead even though aria-pressed was updating correctly.

   Declared once here for every element in the theme that gets hidden by the `hidden`
   property, so the same bug cannot reappear in the map list or anywhere else. */
[hidden] {
	display: none !important;
}

/* «Μάθετε περισσότερα» on a directory card. Now the same .btn--primary treatment as its
   /xartis/ counterpart (.map-point__cta in map.css) — same brand button, same reduced
   padding/font-size for a card-width control — so the two listings read as one system.
   Lives here rather than profile.css because the directory loads components.css +
   section.css and never profile.css — the same trap that caught .cross-audience-band. */
.business-card__profile {
	padding: 11px 18px;
	font-size: 0.96rem;
	/* margin-top moved to .business-card__actions, which is rendered whether or not this
	   link is — that is what reserves the space and keeps footers aligned across a row. */
}

/* Section 12a — second card action, now the same .btn--outline treatment as /xartis/'s
   second link (.map-point__cta--maps in map.css): still deliberately quieter than the solid
   .business-card__profile button beside it, but a real outline button rather than a plain
   text link — same size override so the two sit level in .business-card__actions. */
.business-card__feedback-link {
	padding: 11px 18px;
	font-size: 0.96rem;
}

.business-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 22px;
	margin-top: 34px;
}

.directory-empty {
	margin: 34px 0 0;
	color: var(--safi-text-muted-3);
}

.business-card__name {
	font-size: 1.26rem;
	margin: 0 0 16px;
	color: var(--safi-petrol);
	line-height: 1.25;
}

.business-card__details {
	margin: 0 0 18px;
	display: grid;
	gap: 11px;
}

.business-card__detail-row {
	display: flex;
	gap: 10px;
}

.business-card__detail-row svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--safi-text-muted-7);
}

.business-card__detail-row span {
	font-size: 0.97rem;
	color: var(--safi-text-muted-2);
}

.business-card__detail-label {
	color: var(--safi-text-muted-5);
}

/* The em dash standing in for a field with no value, on directory cards and map cards
   alike. Lives here rather than in map.css because the directory loads components.css and
   never map.css, while map.css chains off components.css and so still inherits this —
   the same trap that caught .cross-audience-band and .business-card__profile.

   Muted, but it is real text carrying real meaning ("we do not have this"), so it holds
   --safi-text-muted-6 at 5.34:1 rather than fading to a decorative grey. The em dash alone
   would be announced as nothing useful, so each one carries a visually-hidden explanation. */
.business-card__detail-empty {
	color: var(--safi-text-muted-6);
}

/* Contact-person sentence (template-parts/business-card.php). Reuses the detail-row text
   treatment — font-size and muted color — so it reads as part of the contact information
   rather than a new visual element; margin-top gives it the same breathing room as a detail
   row without disturbing .business-card__details' own gap. */
.business-card__contact-person {
	margin-top: 12px;
	font-size: 0.97rem;
	line-height: 1.5;
	color: var(--safi-text-muted-2);
}

/* .business-card__advance / --advance-value--yes / --no were removed together with the
   «Εκ των προτέρων επικοινωνία: Ναι/Όχι» line on directory cards. The business profile
   page still states it, in prose, where the answer can be explained rather than reduced
   to a two-word verdict — see single-business.php's "Πριν την επίσκεψη" callout, which
   does not use these classes. */

.business-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 14px 0;
	border-top: 1px solid var(--safi-border-soft);
	margin-top: auto;
}

.business-card__updated {
	font-size: 0.86rem;
	color: var(--safi-text-muted-6);
}

/* Always rendered, even when the completeness gate withholds the profile link, so the
   footer above it lands at the same height on every card in a row. 44px is
   .business-card__profile's own rendered height now that it's a .btn--primary button (11px
   padding + ~0.96rem line box on each side); the wrapper owns the top margin the link used
   to carry, so the reserved space is identical either way. Now also holds the Section 12a
   feedback button beside it — flex-wrap/gap match .map-point__actions on /xartis/, so two
   buttons wrap the same way a card narrows. */
.business-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	min-height: 44px;
	margin-top: 14px;
}

/* ---------- Accordion (criteria groups) ---------- */

.accordion {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.accordion__item {
	background: var(--safi-surface);
	border: 1px solid var(--safi-border-strong);
	border-radius: var(--safi-radius-md);
	overflow: hidden;
	box-shadow: var(--safi-shadow-card);
}

/* Wraps .accordion__trigger per the WAI-ARIA APG accordion pattern, so screen-reader
   users can jump between criteria groups via heading navigation — purely structural,
   no visual styling of its own (the button and its child spans carry all the visuals). */
.accordion__heading {
	margin: 0;
	font: inherit;
}

.accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: transparent;
	border: 0 !important;
	cursor: pointer;
	text-align: left;
}

.accordion__trigger:hover,
.accordion__trigger:focus,
.accordion__trigger:focus-visible {
	/* !important: see base.css's note on the same reset.css tie-and-win pattern —
	   button:hover/:focus in that stylesheet would otherwise paint this pink while
	   the panel is focused (e.g. right after opening it). */
	background: #f7f1e6 !important;
	color: inherit !important;
}

.accordion__tag {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--safi-radius-pill);
	/* Flat --safi-teal rather than the gradient: this pill holds text ("Μέρος Α"), not a
	   glyph, so it follows the control convention. White at 13.1px/700 is normal text
	   under WCAG (below the 18.66px bold threshold) and needs 4.5:1 — it gets 5.38:1. */
	background: var(--safi-teal);
	color: #fff;
	font-weight: 700;
	font-size: 0.82rem;
}

.accordion__title {
	font-family: var(--safi-font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--safi-petrol);
	flex: 1;
}

.accordion__chevron {
	display: inline-flex;
	font-size: 20px;
	color: var(--safi-teal);
	transition: transform 0.18s ease;
}

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

.accordion__trigger[aria-expanded='true'] .accordion__chevron {
	transform: rotate(180deg);
}

.accordion__panel {
	padding: 4px 24px 26px;
	border-top: 1px solid var(--safi-border-soft);
}

.accordion__panel-label {
	margin: 18px 0 10px;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--safi-text-muted-5);
	font-weight: 600;
}

.accordion__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.accordion__list-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--safi-text-muted-4);
}

.accordion__list-item svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.accordion__list-item--basic svg {
	stroke: var(--safi-green);
}

.accordion__list-item--extra svg {
	stroke: var(--safi-gold);
}

/* ---------- Checklist (visitors page) ---------- */

.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 15px;
}

.checklist__item {
	display: flex;
	gap: 13px;
	align-items: flex-start;
}

.checklist__item svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--safi-teal);
}

.checklist__item span {
	font-size: 1.04rem;
	line-height: 1.5;
	color: var(--safi-text-muted-4);
}

/* ---------- Download / material rows ---------- */

.material-row {
	display: flex;
	align-items: center;
	gap: 15px;
	background: var(--safi-surface);
	border: 1px solid var(--safi-border-card);
	border-radius: 14px;
	padding: 15px 18px;
	text-decoration: none;
}

.material-row:hover {
	border-color: #ccd8e0;
	background: #fbf7ee;
}

.material-row__icon {
	/* Same gradient + white glyph as .feature-card__icon — see the note there. */
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--safi-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	flex-shrink: 0;
}

.material-row__title {
	flex: 1;
	font-size: 1.02rem;
	font-weight: 500;
	color: #324150;
}

.material-row__type {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--safi-text-muted-6);
	border: 1px solid var(--safi-border-chip);
	border-radius: 6px;
	padding: 3px 8px;
}

/* ---------- Map ----------
   The decorative .map-placeholder art and the .map-legend rules that lived here were
   retired when /xartis/ became a real Leaflet map (docs/map-plan.md). Both now live in
   assets/css/map.css, which loads only on that template — they were page-specific rules
   sitting in the global stylesheet. */

/* ---------- News cards ---------- */

.news-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.news-card__image {
	height: 172px;
	background: linear-gradient(150deg, #b5d0de, #c9dce9 55%, #e6dcc9);
	position: relative;
}

.news-card__image-badge {
	position: absolute;
	bottom: 12px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(20, 40, 46, 0.32);
	color: #edf3f6;
	padding: 5px 11px;
	border-radius: var(--safi-radius-pill);
	font-size: 0.74rem;
}

.news-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.news-card__date {
	font-size: 0.86rem;
	color: var(--safi-text-muted-6);
	font-weight: 500;
}

.news-card__title {
	font-size: 1.2rem;
	line-height: 1.32;
	margin: 8px 0 10px;
	color: var(--safi-petrol);
}

.news-card__excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--safi-text-muted-3);
	margin: 0 0 16px;
}

.news-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--safi-teal-hover);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
}

.news-card__link:hover {
	color: var(--safi-petrol);
}

/* ---------- Numbered step cards ---------- */

.step-card {
	padding: 24px 22px;
}

.step-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--safi-teal);
	color: #fff;
	font-family: var(--safi-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	margin-bottom: 14px;
}

.step-card__title {
	font-size: 1.1rem;
	margin: 0 0 7px;
	color: var(--safi-petrol);
	line-height: 1.25;
}

.step-card__text {
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--safi-text-muted-3);
	margin: 0;
}

/* ---------- Form ---------- */

.form-field {
	display: grid;
	gap: 7px;
}

.form-field label {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--safi-text-muted-4);
}

.form-field input,
.form-field select,
.form-field textarea {
	font: inherit;
	font-size: 1rem;
	padding: 13px 15px;
	border: 1px solid var(--safi-border-input);
	border-radius: var(--safi-radius-sm);
	background: var(--safi-surface-input);
	color: var(--safi-petrol);
}

.form-field textarea {
	resize: vertical;
}

.form-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 30px 10px;
}

.form-success__icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--safi-success-bg);
	color: var(--safi-success);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.form-success__text {
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--safi-text-muted-4);
	margin: 0;
	max-width: 36ch;
}

.form-error {
	background: var(--safi-warning-bg);
	color: var(--safi-warning-strong);
	border-radius: var(--safi-radius-sm);
	padding: 14px 18px;
	font-size: 0.98rem;
}

/* ---------- Contact panel (dark) ---------- */

.contact-panel {
	background: var(--safi-footer-bg);
	border-radius: var(--safi-radius-lg);
	padding: 34px 32px;
	color: var(--safi-text-on-dark);
	/* The default focus-ring color (--safi-focus-ring-color) is tuned for light
	   backgrounds and fails 3:1 here — restore --safi-gold, which passes on this
	   dark surface. See variables.css's Focus ring comment. */
	--safi-focus-ring-color: var(--safi-gold);
}

.contact-panel__title {
	font-size: 1.4rem;
	margin: 0 0 22px;
	color: #fff;
}

.contact-panel__row {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.contact-panel__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--safi-radius-sm);
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #a4cbd8;
}

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

.site-footer {
	/* 4px brand bar across the top, then the flat navy. It reuses the same teal→green
	   lockup as .site-logo__mark, so the footer picks up brand colour without repainting
	   the block — which matters because the background itself can't go much lighter
	   before the gold cross-link drops under 4.5:1 (see variables.css). Purely
	   decorative and above all the padding, so no text sits on it. */
	background:
		linear-gradient(90deg, var(--safi-teal), var(--safi-green)) top / 100% 4px no-repeat,
		var(--safi-footer-bg);
	color: var(--safi-text-on-dark);
	padding: 64px 24px 30px;
	--safi-focus-ring-color: var(--safi-gold); /* see .contact-panel's identical note above */
}

.site-footer__inner {
	max-width: var(--safi-max-width);
	margin: 0 auto;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.site-footer__tagline {
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--safi-text-on-dark-muted);
	max-width: 40ch;
	margin: 0;
}

.site-footer__col-title {
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9db1bd;
	margin: 0 0 14px;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.site-footer__links a {
	text-decoration: none;
	color: var(--safi-text-on-dark-link);
	font-size: 0.98rem;
}

.site-footer__links a:hover {
	color: #fff;
}

/* ---------- Cross-audience band ----------
   Persuasion panel linking from the business experience into the visitor directory.
   Lives in components.css rather than home.css because it appears on both the business
   homepage (home.css) and the signup page (section.css) — those two stylesheets are
   mutually exclusive, so anything shared between them belongs here. */

.cross-audience-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
	padding: 30px 32px;
	border-radius: var(--safi-radius-lg);
	border: 1px solid var(--safi-border-card);
	background: var(--safi-surface);
	box-shadow: var(--safi-shadow-card);
}

.cross-audience-band__title {
	font-family: var(--safi-font-heading);
	font-size: 1.32rem;
	color: var(--safi-petrol);
	margin: 0 0 8px;
}

.cross-audience-band__text {
	margin: 0;
	max-width: 56ch;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--safi-text-muted-4);
}

/* Reciprocal cross-audience link — a second exit alongside the header CTA, separated
   from the menu above it by a rule so it doesn't read as another nav item. */
.site-footer__cross-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	text-decoration: none;
	color: var(--safi-gold);
	font-size: 0.96rem;
	font-weight: 600;
}

.site-footer__cross-link:hover {
	color: #fff;
}

/* ---------- Footer partners ----------
   A titleless <dl>: role as the term, organisation as the description. No column heading
   (client request) — the roles carry the grouping instead, which is why this is a
   description list rather than three loose lines.

   The logo chip is the load-bearing part. Partner logos are almost always dark ink on
   transparent, and dropped straight onto --safi-footer-bg two of the three would vanish.
   Putting every logo on a light chip makes contrast a property of the container, so the
   real files drop in later with no CSS change and nothing to re-measure. 1.4.11's 3:1
   applies to the chip edge against the footer (~10:1 here), not to the logo interior. */

.site-footer__partners {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.site-footer__partner {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.site-footer__partner-role {
	font-size: 0.76rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 600;
	color: #9db1bd; /* 4.72:1 on --safi-footer-bg — same token value as .site-footer__col-title */
	margin: 0;
}

.site-footer__partner-party {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.site-footer__partner-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--safi-surface);
	border-radius: 8px;
	padding: 6px 10px;
}

.site-footer__partner-logo img {
	display: block;
	width: auto;
	max-width: 84px;
	max-height: 32px;
}

.site-footer__partner-name {
	font-size: 0.94rem;
	line-height: 1.4;
	color: #e4edf2;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: space-between;
	align-items: center;
	padding-top: 26px;
}

.site-footer__credit {
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--safi-text-on-dark-muted);
	margin: 0;
	max-width: 78ch;
}

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

.breadcrumbs {
	margin: 0 0 18px;
}

.breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.92rem;
	color: var(--safi-text-muted-5);
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: '/';
	margin-right: 6px;
	color: var(--safi-text-muted-7);
}

.breadcrumbs__item a {
	text-decoration: none;
	color: var(--safi-teal-hover);
}

.breadcrumbs__item a:hover {
	color: var(--safi-petrol);
}

.breadcrumbs__item.is-current span {
	color: var(--safi-text-muted-2);
}