/* ==========================================================================
   Μ.Ι.Π. — Flagship πρότυπο. Editorial · Καθολικός σχεδιασμός · WCAG 2.2 AA/AAA
   «Paper & ink» παλέτα + τερακότα/sage από την αφίσα, Commissioner (self-hosted, OFL) για
   τίτλους + συστημική sans για κείμενο, light/dark/high-contrast.
   ========================================================================== */

/* ---------- Γραμματοσειρά τίτλων: Commissioner (variable, ελληνικά + λατινικά), χωρίς εξωτερικά requests ---------- */
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/commissioner-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/commissioner-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Design tokens (light) ---------- */
:root {
  --font-scale: 1;

  /* Χρώμα */
  --paper: #faf8f4;
  --paper-2: #f2eee6;     /* tinted surface */
  --card: #ffffff;
  --ink: #191813;         /* body, ~16:1 σε paper (AAA) */
  --ink-soft: #4b4840;    /* ~8.5:1 (AAA small) */
  --ink-faint: #6b6659;   /* meta ~5.3:1 (AA) */
  --accent: #0e5a4e;      /* deep teal-green, ~8.9:1 σε paper (AAA link) */
  --accent-ink: #0a463d;
  --accent-soft: #e2efe9;
  --gold: #9a5b12;        /* warm secondary, ~5.1:1 (AA) */
  --line: #e0dccf;        /* hairlines */
  --line-strong: #cfc9b8;

  /* Σχήμα */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 22px;      /* κάρτες, λωρίδα, γεμάτα πλαίσια */
  --shadow-1: 0 1px 2px rgba(25,24,19,.05), 0 6px 20px rgba(25,24,19,.05);
  --shadow-2: 0 2px 6px rgba(25,24,19,.06), 0 18px 40px rgba(25,24,19,.09);

  /* Ρυθμός */
  --shell: 1140px;
  --space: clamp(1rem, 2.4vw, 2rem);
  --section-y: clamp(3rem, 7vw, 6rem);

  /* Τυπογραφία — συστημική sans-serif για το κείμενο (μέγιστη αναγνωσιμότητα), Commissioner μόνο για τίτλους */
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --display: "Commissioner", var(--sans);

  --f-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --f-lede: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --f-h3: clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  --f-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --f-h1: clamp(2rem, 1.4rem + 3vw, 3.3rem);

  --focus: #b0300f;       /* focus ring, ~5:1 σε paper */

  /* Χρώματα λογοτύπου: πράσινο, μεσαίο πράσινο, χρυσό (γραφικά ≥3:1· τα κείμενα σκουραίνουν με color-mix) */
  --tone-1: #0e5a4e; --tone-2: #3f8f78; --tone-3: #9a5b12;
  --on-tone: #ffffff;
  --fill: #0e5a4e;        /* γεμάτες κάρτες Υπηρεσιών */
  --on-fill: #ffffff;

  /* Ζωντανό (από την αφίσα): τερακότα για κουμπιά (4,65:1 με λευκό)· ως ΚΕΙΜΕΝΟ μόνο το --terra-ink.
     Απαλά γεμίσματα + το «μελάνι» τους (≥4,5:1), sage για ενότητες, μαρκαδοράκι, διακοσμητικά, footer */
  --terra: #b85a1c; --on-terra: #ffffff; --terra-ink: #8a4f0e;
  --blue-ink: #0b3f55; --leaf-ink: #2e6e5c;
  --soft-teal: #d9efe4; --soft-terra: #fde6c4; --soft-blue: #dcecf2; --soft-sand: #f1e7d8; --soft-leaf: #e3efe3;
  --sage: #e1f0e8;
  --mark: #f2c14e; --on-mark: #191813;
  --deco-terra: #d9823a; --deco-sage: #cfe6db; --deco-peach: #fde6c4; --deco-alpha: 1; --dots: #d9823a;
  --deco-deep: #0e5a4e;   /* σκούρα κηλίδα κάτω αριστερά στο hero (όπως στο πρότυπο)· ποτέ κάτω από κείμενο */
  --foot-bg: #0e5a4e; --foot-ink: #dcebe5; --foot-strong: #ffffff; --foot-blob: #2e6e5c;
  --tone-4: #0b3f55;
}

/* System dark (μόνο όταν θέμα = auto) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14161a;
    --paper-2: #1b1e24;
    --card: #1e2128;
    --ink: #f3f0e9;
    --ink-soft: #cdc9c0;
    --ink-faint: #a29d92;
    --accent: #63d3b6;     /* light teal σε σκούρο, AAA */
    --accent-ink: #8fe4cd;
    --accent-soft: #17322c;
    --gold: #e6b45e;
    --line: #2c313a;
    --line-strong: #3a414c;
    --shadow-1: none;
    --shadow-2: 0 18px 40px rgba(0,0,0,.4);
    --focus: #ffb4a0;
    --tone-1: #63d3b6; --tone-2: #a3d98b; --tone-3: #e6b45e; --on-tone: #08110e;
    --fill: #17463c; --on-fill: #f3f0e9;
    --terra: #e8945c; --on-terra: #1a0f06; --terra-ink: #f0b07a; --blue-ink: #8fd0ec; --leaf-ink: #a3d98b;
    --soft-teal: #17322c; --soft-terra: #3a2510; --soft-blue: #14303b; --soft-sand: #2b2721; --soft-leaf: #1d2e22; --sage: #121e1a;
    --mark: #6b5410; --on-mark: #f3f0e9;
    --deco-terra: #b86a2e; --deco-sage: #1f3a33; --deco-peach: #3a2510; --deco-alpha: .6; --dots: #d9823a;
    --deco-deep: #17463c;
    --foot-bg: #0b3d35; --foot-ink: #dcebe5; --foot-strong: #ffffff; --foot-blob: #17463c;
    --tone-4: #8fd0ec;
  }
}
/* Ρητό σκοτεινό (ανεξάρτητα από σύστημα) */
:root[data-theme="dark"] {
  --paper: #14161a; --paper-2: #1b1e24; --card: #1e2128;
  --ink: #f3f0e9; --ink-soft: #cdc9c0; --ink-faint: #a29d92;
  --accent: #63d3b6; --accent-ink: #8fe4cd; --accent-soft: #17322c;
  --gold: #e6b45e; --line: #2c313a; --line-strong: #3a414c;
  --shadow-1: none; --shadow-2: 0 18px 40px rgba(0,0,0,.4); --focus: #ffb4a0;
  --tone-1: #63d3b6; --tone-2: #a3d98b; --tone-3: #e6b45e; --on-tone: #08110e;
  --fill: #17463c; --on-fill: #f3f0e9;
  --terra: #e8945c; --on-terra: #1a0f06; --terra-ink: #f0b07a; --blue-ink: #8fd0ec; --leaf-ink: #a3d98b;
  --soft-teal: #17322c; --soft-terra: #3a2510; --soft-blue: #14303b; --soft-sand: #2b2721; --soft-leaf: #1d2e22; --sage: #121e1a;
  --mark: #6b5410; --on-mark: #f3f0e9;
  --deco-terra: #b86a2e; --deco-sage: #1f3a33; --deco-peach: #3a2510; --deco-alpha: .6; --dots: #d9823a;
  --deco-deep: #17463c;
  --foot-bg: #0b3d35; --foot-ink: #dcebe5; --foot-strong: #ffffff; --foot-blob: #17463c;
  --tone-4: #8fd0ec;
}
/* Υψηλή αντίθεση */
:root[data-contrast="more"] {
  --paper: #ffffff; --paper-2: #ffffff; --card: #ffffff;
  --ink: #000000; --ink-soft: #000000; --ink-faint: #1a1a1a;
  --accent: #005a3c; --accent-ink: #003c28; --accent-soft: #d9f2e8;
  --gold: #7a3d00; --line: #000000; --line-strong: #000000; --focus: #b0000f;
  --tone-1: #005a3c; --tone-2: #005a3c; --tone-3: #7a3d00; --on-tone: #ffffff;
  --fill: #003c28; --on-fill: #ffffff;
  --terra: #7a3d00; --on-terra: #ffffff; --terra-ink: #7a3d00; --blue-ink: #003c55; --leaf-ink: #005a3c;
  --soft-teal: #ffffff; --soft-terra: #ffffff; --soft-blue: #ffffff; --soft-sand: #ffffff; --soft-leaf: #ffffff; --sage: #ffffff;
  --mark: transparent; --on-mark: #000000; --deco-alpha: 0;
  --foot-bg: #ffffff; --foot-ink: #000000; --foot-strong: #000000; --foot-blob: transparent; --tone-4: #003c55;
}
:root[data-contrast="more"][data-theme="dark"] {
  --paper: #000; --paper-2: #000; --card: #000;
  --ink: #fff; --ink-soft: #fff; --ink-faint: #eaeaea;
  --accent: #7de9c8; --accent-ink: #a6f0d8; --accent-soft: #062a22;
  --gold: #ffd166; --line: #fff; --line-strong: #fff; --focus: #ffd166;
  --tone-1: #7de9c8; --tone-2: #7de9c8; --tone-3: #ffd166; --on-tone: #000000;
  --fill: #000000; --on-fill: #ffffff;
  --terra: #ffb380; --on-terra: #000000; --terra-ink: #ffb380; --blue-ink: #8fd0ec; --leaf-ink: #7de9c8;
  --soft-teal: #000000; --soft-terra: #000000; --soft-blue: #000000; --soft-sand: #000000; --soft-leaf: #000000; --sage: #000000;
  --mark: transparent; --on-mark: #ffffff; --deco-alpha: 0;
  --foot-bg: #000000; --foot-ink: #ffffff; --foot-strong: #ffffff; --foot-blob: transparent; --tone-4: #8fd0ec;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* το attribute υπερισχύει display-classes */
html { font-size: calc(100% * var(--font-scale)); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--f-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.wrap-narrow { max-width: 760px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; }
h1 { font-size: var(--f-h1); font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: var(--f-h2); font-weight: 800; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-size: var(--f-h3); margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
:where(.prose, .lede, address) { max-width: 65ch; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; }

/* Focus: διακριτικό αλλά πολύ ορατό (2.4.7 / 2.4.13) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

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

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--accent); color: #fff; padding: .8rem 1.1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; font-weight: 600; transition: top .15s ease; }
.skip-link:focus { top: 0; }

/* ---------- Κοινά controls (target ≥ 44px, 2.5.8) ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .65rem 1.25rem;
  background: var(--accent); color: #fff; font-weight: 600;
  border: 2px solid var(--accent); border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
:root[data-theme="dark"] .cta { color: #08110e; }
/* Οι κανόνες «σκοτεινό από το σύστημα» δεν ισχύουν σε υψηλή αντίθεση με θέμα Αυτόματο: εκεί τα tokens είναι του HC φωτεινού */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-contrast="more"]) .cta { color: #08110e; } }
.cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); transform: translateY(-1px); }
.cta--lg { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.05rem; }
.cta { white-space: nowrap; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ghost { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .8rem; min-height: 36px; cursor: pointer; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }
.ghost[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
:root[data-theme="dark"] .ghost[aria-pressed="true"] { color: #08110e; }

/* ---------- Ζωντανό: διακοσμητικά & επιφάνειες ---------- */
/* Ρυθμός ενοτήτων: κρεμ (paper) → λευκό → sage. Κάθε ενότητα κόβει τις κηλίδες της (overflow) */
.section, .hero { position: relative; overflow: hidden; }
.section > .shell, .hero > .shell { position: relative; }
.section--white { background: var(--card); }
.section--sage { background: var(--sage); border-block: 1px solid var(--line); }
/* Κηλίδες & κουκκίδες από την αφίσα: καθαρά διακοσμητικά (aria-hidden), ποτέ κάτω από κείμενο· σκούρες μόνο στο footer */
.deco { position: absolute; inset: 0; pointer-events: none; opacity: var(--deco-alpha); }
.blob { position: absolute; border-radius: 50%; }
.blob--terra { background: var(--deco-terra); }
.blob--sage { background: var(--deco-sage); }
.blob--peach { background: var(--deco-peach); }
.dots { position: absolute; background-image: radial-gradient(var(--dots) 1.8px, transparent 2px); background-size: 16px 16px; opacity: .55; }
/* Μεγέθη/θέσεις κηλίδων ανά ενότητα (χαμηλή ειδικότητα, ώστε ο κανόνας κινητού να τις μικραίνει) */
.blob--lg { width: 420px; height: 420px; } .blob--md { width: 320px; height: 320px; } .blob--sm { width: 260px; height: 260px; }
.pos-tr { right: -150px; top: -200px; } .pos-br { right: -160px; bottom: -220px; } .pos-bl { left: -140px; bottom: -160px; }
.dots--tr { width: 160px; height: 120px; right: 40px; top: 70px; } .dots--bl { width: 140px; height: 100px; left: 40px; bottom: 60px; }
:root[data-contrast="more"] .deco { display: none; }
/* Μαρκαδοράκι κάτω από λέξεις-κλειδιά· σε υψηλή αντίθεση γίνεται υπογράμμιση */
.mark { background: linear-gradient(transparent 60%, var(--mark) 60%); color: var(--on-mark); padding: 0 .08em; font-style: normal; }
:root[data-contrast="more"] .mark { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .12em; }
/* Κουμπιά σε τερακότα / κίτρινο / λευκό (το κίτρινο μένει σταθερό σε όλα τα θέματα: σκούρο κείμενο, 9,9:1) */
.cta--terra { background: var(--terra); border-color: var(--terra); color: var(--on-terra); }
.cta--terra:hover { background: var(--terra); border-color: var(--terra); filter: brightness(.92); }
.cta--mark { background: #f2c14e; border-color: #f2c14e; color: #191813; }
.cta--mark:hover { background: #f2c14e; border-color: #f2c14e; filter: brightness(.94); }
:root[data-contrast="more"] .cta--mark { background: #ffd166; border-color: #ffd166; color: #000; }
.cta--light { background: #fff; border-color: #fff; color: #8a4f0e; }   /* σταθερό: λευκό φόντο σε κάθε θέμα, 6,2:1 */
.cta--light:hover { background: #fff; border-color: #fff; filter: brightness(.94); }
:root[data-contrast="more"] .cta--light { color: #7a3d00; }
/* Focus πάνω σε χρωματιστά φόντα: λευκό δαχτυλίδι + σκούρα σκιά, ώστε να φαίνεται και σε τερακότα/πράσινο */
.on-fill :focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px rgba(0,0,0,.65); }
:root[data-contrast="more"]:not([data-theme="dark"]) .foot :focus-visible { outline-color: var(--focus); box-shadow: none; }   /* λευκό footer σε HC */
/* Αυτοκόλλητο «Νέο» (μπαίνει από το app.js) και αρχικά-avatar */
.sticker { position: absolute; top: .9rem; left: .9rem; z-index: 1; background: var(--mark); color: var(--on-mark); font-weight: 800; font-size: .8rem; line-height: 1.2; padding: .3rem .75rem; border-radius: 999px; transform: rotate(-4deg); }
:root[data-contrast="more"] .sticker { background: var(--card); border: 2px solid var(--line); }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--display); font-weight: 800; background: var(--tone, var(--accent)); color: var(--on-tone); }

/* ---------- Utility strip ---------- */
.strip { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.strip__inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; flex-wrap: wrap; }
.switch { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.switch__label { color: var(--ink-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-right: .2rem; }
.switch a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .85rem; padding: .3rem .55rem; border-radius: 999px; border: 1px solid transparent; }
.switch a:hover { border-color: var(--line-strong); }
.switch a[aria-current="page"] { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .switch a[aria-current="page"] { color: #08110e; }
.strip__tools { display: flex; align-items: center; gap: .6rem; }
.strip__org { margin: 0; color: var(--ink-faint); font-size: .82rem; }
.strip__org a { color: var(--ink-soft); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.lang { color: var(--ink-faint); font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center; }
.lang a { text-decoration: none; font-weight: 600; }
.lang a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* ---------- Masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--line); }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .6rem 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand__mark { color: var(--accent); display: inline-flex; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-family: var(--display); font-size: 1rem; }
.brand__text small { color: var(--ink-faint); font-size: .74rem; }
.brand__logo { height: 52px; width: auto; display: block; }
.brand__logo--sm { height: 46px; padding: 3px 6px; }
.brand__fallback { display: none; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }

.nav { order: 3; flex-basis: 100%; margin: .45rem 0 0; border-top: 1px solid var(--line); padding-top: .35rem; }
.nav ul { display: flex; flex-wrap: wrap; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .75rem; border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.nav a:hover { color: var(--accent); background: var(--accent-soft); }

.masthead__actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
.burger { display: none; align-items: center; gap: .5rem; font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: .45rem .8rem; min-height: 40px; cursor: pointer; }
.burger__box, .burger__box::before, .burger__box::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.burger__box::before { position: absolute; top: -6px; } .burger__box::after { position: absolute; top: 6px; }

/* Preferences popover */
.prefs { position: relative; }
.prefs__btn { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .8rem; min-height: 40px; cursor: pointer; }
.prefs__btn:hover { border-color: var(--accent); color: var(--accent); }
.prefs__menu { position: absolute; right: 0; top: calc(100% + .5rem); width: max-content; min-width: 260px; max-width: calc(100vw - 2rem); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 1rem; z-index: 120; display: grid; gap: .9rem; }
.prefs__menu fieldset { border: 0; margin: 0; padding: 0; }
.prefs__menu legend { font-weight: 700; font-size: .85rem; margin-bottom: .4rem; color: var(--ink-soft); }
/* Τα κουμπιά απλώνουν το μενού ώστε να χωράει το κείμενο (και σε Α++)· σε στενή οθόνη αναδιπλώνονται */
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg button { flex: 1 0 auto; white-space: nowrap; font: inherit; font-weight: 600; padding: .45rem .7rem; min-height: 38px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { color: #08110e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-contrast="more"]) .seg button[aria-pressed="true"] { color: #08110e; } }
.row { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.row input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space); align-items: center; }
.kicker { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1rem; padding: .35rem .8rem; background: var(--soft-teal); border-radius: 999px; }
.lede { font-size: var(--f-lede); color: var(--ink-soft); }
.hero__cta { margin: 1.25rem 0 0; }
/* Πλακίδια πρόθεσης «Θέλω να…» (τρία απαλά χρώματα, εικονίδιο σε γεμάτο κύκλο) */
.intents { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.intent { display: flex; flex-direction: column; gap: .6rem; min-height: 120px; height: 100%; padding: 1.25rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--soft-teal); transition: transform .15s ease; }
.intent:hover { transform: translateY(-2px); }
.intent .ico { width: 2.5rem; height: 2.5rem; padding: .55rem; border: 0; background: var(--accent); color: var(--on-tone); }
.intent strong { font-family: var(--display); font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.intent span { font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }
.intent--terra { background: var(--soft-terra); }
.intent--terra .ico { background: var(--terra); color: var(--on-terra); }
.intent--blue { background: var(--soft-blue); }
.intent--blue .ico { background: var(--blue-ink); color: var(--soft-blue); }
/* Λωρίδα «Σπουδές για όλους, χωρίς εμπόδια» (η φράση της αφίσας), κολλητά στην επόμενη ενότητα */
.band { margin-top: clamp(2rem, 5vw, 3.5rem); background: var(--terra); color: var(--on-terra); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.band__t { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; color: var(--ink-soft); }
.trust li { position: relative; padding-left: 1.4rem; font-weight: 600; }
.trust li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

/* Λογότυπο σε λευκό δίσκο (δίσκος στο χρώμα της κάρτας στο σκοτεινό θέμα, ώστε να φαίνεται η ανοιχτή εκδοχή) */
.hero__art { display: grid; place-items: center; width: min(400px, 100%); margin-inline: auto; }
.hero__disc { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 1px solid transparent; display: grid; place-items: center; box-shadow: 0 20px 50px rgba(14,90,78,.16); }
:root[data-theme="dark"] .hero__disc { background: var(--card); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-contrast="more"]) .hero__disc { background: var(--card); box-shadow: none; } }
.hero__logo { width: 75%; height: auto; }
/* Κηλίδες του hero: τερακότα πάνω δεξιά (πίσω από τον δίσκο), sage και κουκκίδες δίπλα του */
.hero .deco > :nth-child(1) { width: 520px; height: 520px; right: -150px; top: -220px; }
.hero .deco > :nth-child(2) { width: 300px; height: 300px; right: 240px; top: 320px; }
.hero .deco > :nth-child(3) { width: 150px; height: 110px; right: 60px; top: 360px; }
/* Σκούρα κηλίδα κάτω αριστερά: φαίνεται μόνο στο περιθώριο και πίσω από τη λωρίδα, όχι πίσω από κείμενο */
.blob--deep { background: var(--deco-deep); }
.hero .deco > :nth-child(4) { width: 360px; height: 360px; left: -200px; bottom: -215px; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section:focus { outline: none; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.overline { font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
/* Τίτλοι ενοτήτων σε δύο ισορροπημένες γραμμές, όπως στο πρότυπο */
.section h2 { max-width: 14em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* Απόφθεγμα: γεμάτη πράσινη κάρτα, μεγάλα κίτρινα εισαγωγικά (διακοσμητικά) και κουκκίδες κάτω δεξιά */
.pull { margin: 0; align-self: start; position: relative; overflow: hidden; font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1vw, 1.65rem); font-weight: 600; line-height: 1.3; color: var(--on-fill); background: var(--fill); border: 1px solid transparent; border-radius: 26px; padding: 2.9rem 2.25rem 2.25rem; }
.pull blockquote { margin: 0; }
.pull p { margin: 0; position: relative; z-index: 1; }
.pull figcaption { position: relative; margin-top: 1.1rem; font-family: var(--sans); font-size: .9rem; font-weight: 400; line-height: 1.4; color: var(--on-fill); }
.pull::before { content: "\201C" / ""; position: absolute; top: -.1em; left: .2em; font-size: 4em; line-height: 1; font-weight: 800; color: #f2c14e; }
.pull::after { content: ""; position: absolute; right: 1rem; top: .75rem; width: 120px; height: 28px; background-image: radial-gradient(var(--dots) 1.8px, transparent 2px); background-size: 16px 16px; opacity: .45; }   /* μέσα στο πάνω padding, όχι κάτω από κείμενο */
/* Η Μονάδα: πιο φαρδύ κείμενο, στενότερη κάρτα απόφθεγματος στο ύψος του τίτλου (όπως στο πρότυπο) */
@media (min-width: 901px) { #about .grid-2 { grid-template-columns: 1.2fr .8fr; gap: 3.5rem; } }
:root[data-contrast="more"] .pull::before, :root[data-contrast="more"] .pull::after { display: none; }

/* Services cards */
.cards { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); counter-reset: none; }
.card { position: relative; background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card__n { font-family: var(--display); font-size: 1.1rem; color: var(--accent); font-weight: 700; }
.card h4 { font-size: var(--f-h3); line-height: 1.2; margin: .6rem 0 .4rem; }
.card p { margin: 0; color: var(--ink-soft); }
.card .card__link { margin-top: .8rem; font-weight: 600; }
.card__links { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-weight: 600; }

/* Α. Υπηρεσίες: γεμάτο πράσινο πλαίσιο, κυκλάκι λευκό / κίτρινο / ροδακινί εναλλάξ (σταθερά χρώματα, εικονίδιο στο πράσινο) */
.cards--fill .card { background: var(--fill); color: var(--on-fill); padding: 1.75rem 1.5rem; min-height: 200px; }
.cards--fill .card h4 { color: var(--on-fill); }
.cards--fill .card p { color: var(--on-fill); opacity: .92; }
.cards--fill .ico { background: var(--on-fill); color: var(--fill); border: 0; }
.cards--fill .card:nth-child(3n+2) .ico { background: #f2c14e; }
.cards--fill .card:nth-child(3n+3) .ico { background: #f5b58a; }
:root[data-contrast="more"] .cards--fill .ico { background: var(--on-fill); }
/* Β. Άλλες δομές: λευκή κάρτα, ροδακινί κυκλάκι */
.cards--gold .ico { background: var(--soft-terra); color: var(--terra-ink); border: 0; }

/* Εξωτερικός σύνδεσμος / νέα καρτέλα (το εικονίδιο μπαίνει από το app.js) */
.nowrap { white-space: nowrap; }
.ext { width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Εικονίδια (sprite + κύκλος σε accent-soft) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 3rem; height: 3rem; padding: .7rem; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.sub-h { margin: 2.5rem 0 0; }
.muted { color: var(--ink-faint); }
.ticks { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .45rem; }
/* Οι τρεις «πυλώνες» της Μονάδας: ίδιο κείμενο, σε τρεις μίνι κάρτες με εικονίδιο σε γεμάτο κύκλο */
.pillars { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; }
.pillars li { position: relative; padding: 1rem 1.1rem 1rem 4.25rem; background: var(--soft-teal); border: 1px solid transparent; border-radius: var(--radius); color: var(--ink-soft); line-height: 1.5; }
.pillars .ico { position: absolute; left: .9rem; top: .9rem; width: 2.5rem; height: 2.5rem; padding: .55rem; border: 0; background: var(--accent); color: var(--on-tone); }
.pillars li:nth-child(2) { background: var(--soft-terra); }
.pillars li:nth-child(2) .ico { background: var(--terra); color: var(--on-terra); }
.pillars li:nth-child(3) { background: var(--soft-blue); }
.pillars li:nth-child(3) .ico { background: var(--blue-ink); color: var(--soft-blue); }

/* Σε ποιους απευθύνεται */
.tiles { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.sub-h + .docs { margin-top: 1rem; }
.tiles li { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .75rem; background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-1); font-weight: 700; line-height: 1.35; }
/* Κυκλάκι σε τέσσερα απαλά χρώματα, εναλλάξ */
.tiles .ico { width: 3.25rem; height: 3.25rem; padding: .75rem; border: 0; background: var(--soft-teal); color: var(--accent); }
.tiles li:nth-child(4n+2) .ico { background: var(--soft-terra); color: var(--terra-ink); }
.tiles li:nth-child(4n+3) .ico { background: var(--soft-blue); color: var(--blue-ink); }
.tiles li:nth-child(4n+4) .ico { background: var(--soft-sand); color: var(--leaf-ink); }

/* Steps */
/* Τέσσερις κάρτες σε μία σειρά (όπως στο πρότυπο): αριθμός σε γεμάτο κύκλο, τίτλος, σύντομο κείμενο */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Τέσσερις στήλες μόνο όταν χωράνε ~14rem η καθεμία στο τρέχον μέγεθος κειμένου (Α / Α+ / Α++)· αλλιώς δύο */
#start > .shell { container-type: inline-size; }
@container (max-width: 59rem) { .steps { grid-template-columns: 1fr 1fr; } }
/* Κάθε βήμα σε δικό του απαλό χρώμα (teal → φύλλο → τερακότα → μπλε) */
.steps > li { --tone: var(--tone-1); --soft: var(--soft-teal); --on: var(--on-tone); display: flex; flex-direction: column; gap: .6rem; min-width: 0; background: var(--soft); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 1.6rem 1.35rem; overflow-wrap: break-word; }
.steps > li:nth-child(4n+2) { --tone: var(--leaf-ink); --soft: var(--soft-leaf); }
.steps > li:nth-child(4n+3) { --tone: var(--terra); --soft: var(--soft-terra); --on: var(--on-terra); }
.steps > li:nth-child(4n+4) { --tone: var(--tone-4); --soft: var(--soft-blue); }
.steps__num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; background: var(--tone); color: var(--on); font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1; }
.steps h3 { font-size: 1.3rem; margin: .25rem 0 0; }
.steps p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.docs-needed { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; display: grid; gap: .45rem; }
.docs-needed ul { margin: .3rem 0 0; padding-left: 1rem; display: grid; gap: .3rem; }
/* «Δες περισσότερα» με <details>: δουλεύει και χωρίς JavaScript */
.more > summary { display: inline-block; min-height: 44px; padding: .55rem 0; cursor: pointer; list-style: none; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ""; display: inline-block; margin-left: .55em; vertical-align: .1em; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .15s ease; }
.more[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }
.more > summary:hover { text-decoration-thickness: 2px; }
.cta-row { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
/* «Χρειάζεσαι βοήθεια;»: γεμάτο πράσινο πλαίσιο, κίτρινο κουμπί δεξιά, κουκκίδες στο κενό ανάμεσά τους */
.help-box { margin-top: 2rem; position: relative; overflow: hidden; background: var(--fill); color: var(--on-fill); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 1.75rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.help-box > div { position: relative; min-width: 0; max-width: 60ch; }
.help-box h3 { margin: 0 0 .25rem; color: inherit; }
.help-box p { margin: 0; color: inherit; }
.help-box .cta { position: relative; }
.help-box::after { content: ""; position: absolute; right: 260px; top: -10px; width: 140px; height: 100px; background-image: radial-gradient(var(--dots) 1.8px, transparent 2px); background-size: 16px 16px; opacity: .3; }
:root[data-contrast="more"] .help-box::after { display: none; }

/* Εθελοντισμός: δύο κάρτες δίπλα δίπλα (όπως στο πρότυπο), κουμπιά στο ίδιο ύψος στο κάτω μέρος */
.vol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.vol__card { display: flex; flex-direction: column; gap: .85rem; min-width: 0; background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 1.9rem); box-shadow: var(--shadow-1); }
.vol__card > * { margin: 0; }
.vol__card .ico { width: 3.25rem; height: 3.25rem; padding: .75rem; border: 0; background: var(--soft-terra); color: var(--terra-ink); }
.vol__card + .vol__card .ico { background: var(--soft-teal); color: var(--accent); }
.vol__card h3 { font-size: 1.5rem; }
.vol__card > p { color: var(--ink-soft); }
.vol__card h4 { font-size: 1rem; margin-top: .35rem; }
.vol__card .ticks { margin: 0; color: var(--ink-soft); }
.vol__card .cta-row { margin-top: auto; padding-top: .5rem; }
.chips-static { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips-static li { padding: .3rem .8rem; border: 1px solid transparent; border-radius: 999px; background: var(--soft-teal); color: var(--accent-ink); font-weight: 700; font-size: .85rem; line-height: 1.3; }
.offer { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.offer li { padding: .75rem 1rem; background: var(--soft-teal); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.offer strong { color: var(--ink); }
/* Διαδικασία: αριθμός σε μικρό γεμάτο κύκλο */
.process { list-style: none; padding: 0; counter-reset: proc; display: grid; gap: .6rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.process li { counter-increment: proc; display: grid; grid-template-columns: 28px 1fr; gap: .7rem; align-items: start; }
.process li::before { content: counter(proc); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 50%; background: var(--accent); color: var(--on-tone); font-weight: 800; font-size: .8rem; }

/* Files */
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.files a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .95rem 1.1rem; text-decoration: none; color: var(--ink); }
.files a:hover { border-color: var(--accent); }
.files__t { font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.files__m { color: var(--ink-faint); font-size: .88rem; }

/* Έγγραφα με περιγραφή + ενέργειες (Προβολή / Λήψη) */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
/* Κάθε λίστα εγγράφων με δικό της χρώμα στην πάνω ακμή: πλαίσιο teal, αιτήσεις τερακότα, νόμοι φύλλο, σύνδεσμοι μπλε */
.docs > li { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: center; background: var(--card); border: 1px solid transparent; border-top: 5px solid var(--dt, var(--accent)); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1rem 1.2rem; }
.docs--teal { --dt: var(--accent); } .docs--terra { --dt: var(--terra); } .docs--leaf { --dt: var(--leaf-ink); } .docs--blue { --dt: var(--blue-ink); }
.docs > li > p { grid-column: 1; }
.docs > li > .docs__a { grid-column: 2; grid-row: 1 / span 3; margin-top: 0 !important; }
.docs > li.is-collapsed { display: none; }
.docs p { margin: 0; }
.more-btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; min-height: 44px; font: inherit; font-weight: 700; color: var(--accent); background: transparent; border: 1px dashed var(--line-strong); border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer; }
.more-btn:hover { border-color: var(--accent); border-style: solid; }
.more-btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.more-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.docs__t { font-weight: 700; }
.docs__ref { display: inline-block; font-weight: 600; color: var(--ink-faint); font-size: .9rem; margin-left: .35rem; }
.docs__d { color: var(--ink-soft); margin-top: .25rem !important; max-width: 85ch; }
.docs__m { color: var(--ink-faint); font-size: .88rem; margin-top: .25rem !important; }
.docs__a { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .35rem !important; }
.docs__a a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* News: φίλτρα (chips) + δύο στήλες Ανακοινώσεις / Εκδηλώσεις */
.news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.news-head h2 { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Χρώμα ανά κατηγορία (chips φίλτρου + pills στα νέα): Εγγραφές teal, Δράσεις μπλε, Εθελοντισμός τερακότα· τελίτσα μπροστά */
.chip, .pill { --pc: var(--accent-ink); --pb: var(--soft-teal); }
[data-filter="Δράσεις"] { --pc: var(--blue-ink); --pb: var(--soft-blue); }
[data-filter="Εθελοντισμός"] { --pc: var(--terra-ink); --pb: var(--soft-terra); }
.chip { font: inherit; font-weight: 700; min-height: 44px; padding: .45rem 1.05rem; color: var(--pc); background: var(--card); border: 2px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip[data-filter]:not([data-filter=""])::before, .pill::before { content: ""; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: currentColor; margin-right: .45em; vertical-align: .1em; }
:root[data-theme="dark"] .chip[aria-pressed="true"] { color: #08110e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-contrast="more"]) .chip[aria-pressed="true"] { color: #08110e; } }

.news-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2rem; align-items: start; }
.news-group__h { display: flex; align-items: center; gap: .65rem; font-size: 1.15rem; margin: 0 0 1rem; }
.news-group__h .ico { width: 2.4rem; height: 2.4rem; padding: .5rem; border: 0; background: var(--soft-teal); }

.ann, .events { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ann article, .event { position: relative; background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease; }
.ann article:hover, .event:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ann li:first-child h4 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
/* Το αυτοκόλλητο «Νέο» μπαίνει (από το app.js) στη γραμμή με την κατηγορία: ελαφρά στραβό, ποτέ πάνω σε εικόνα */
.ann__meta .sticker { position: static; display: inline-block; transform: rotate(-3deg); }
.ann__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0 0 .55rem; font-size: .85rem; color: var(--ink-faint); }
.ann h4, .event h4 { font-size: 1.12rem; line-height: 1.25; margin: 0 0 .4rem; }
.ann h4 a, .event h4 a { text-decoration: none; }
.ann h4 a:hover, .event h4 a:hover { text-decoration: underline; }
.ann p:not(.ann__meta), .event p:not(.ann__meta) { margin: 0; color: var(--ink-soft); }
.pill { font: inherit; font-size: .8rem; font-weight: 700; color: var(--pc); background: var(--pb); border: 1px solid transparent; border-radius: 999px; padding: .25rem .8rem; min-height: 28px; cursor: pointer; }
.pill:hover { border-color: var(--pc); text-decoration: underline; text-underline-offset: 2px; }
:root[data-contrast="more"] .pill { border-color: var(--line); }
.event { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.event__date { display: grid; place-items: center; align-content: center; width: 4.25rem; height: 4.5rem; border-radius: var(--radius); background: var(--terra); color: var(--on-terra); line-height: 1; text-align: center; }
.event__d { font-size: 1.7rem; font-weight: 800; }
.event__m { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: .25rem; }
/* Νέο με εικόνα (π.χ. πρόσκληση): η εικόνα πιάνει όλο το πλάτος της κάρτας */
.event--media { overflow: hidden; }
.news-media { grid-column: 1 / -1; margin: -1.2rem -1.4rem .3rem; border-bottom: 1px solid var(--line); background: #fff; }
.news-media img { display: block; width: 100%; height: auto; }
.event p.event__sub { font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.event__facts { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; font-weight: 600; }
.event__facts li { display: flex; align-items: flex-start; gap: .5rem; }
.ico-sm { width: 1.3rem; height: 1.3rem; margin-top: .2rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.event p.event__slogan { margin-top: .8rem; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ann p.event__links, .event p.event__links { margin-top: .7rem; font-weight: 600; }

/* FAQ (native details) */
.faq { margin-top: 2rem; display: grid; gap: .6rem; }
.faq details { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.1rem; font-weight: 700; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
/* Βελάκι σε κύκλο (FAQ + Σχολές): ::after ο κύκλος, ::before το βελάκι μέσα του· ανοιχτό = γεμάτος πράσινος κύκλος */
.faq summary, .school summary { position: relative; padding-right: 4.25rem; }
.faq summary::after, .school summary::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--soft-teal); transition: background .2s ease; }
.faq summary::before, .school summary::before { content: ""; position: absolute; right: calc(1rem + 13px); top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease; z-index: 1; }
.faq details[open] summary::after, .school[open] summary::after { background: var(--accent); }
.faq details[open] summary::before, .school[open] summary::before { border-color: var(--on-tone); transform: rotate(-135deg); margin-top: -3px; }
:root[data-contrast="more"] .faq summary::after, :root[data-contrast="more"] .school summary::after { border: 1px solid var(--line); }
.faq__body { padding: 0 1.2rem 1.1rem; }
.faq__body p { margin: 0; color: var(--ink-soft); max-width: 68ch; }
.faq__body p + p, .faq__body p + ul, .faq__body p + ol, .faq__body ul + p { margin-top: .75rem; }
.faq__body ul, .faq__body ol { margin: 0; padding-left: 1.3rem; color: var(--ink-soft); display: grid; gap: .35rem; }
.faq__body .alpha { list-style-type: lower-greek; }
.faq__more { margin-top: 1.25rem; font-weight: 600; }

/* Contact */
/* Στοιχεία επικοινωνίας: κάρτες σε άμμο με λευκό κύκλο εικονιδίου· η τιμή είναι ανώνυμο grid item στη 2η γραμμή */
.contact { font-style: normal; display: grid; gap: .6rem; }
.contact p { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .1rem; align-items: start; margin: 0; padding: .9rem 1.1rem; background: var(--soft-sand); border: 1px solid transparent; border-radius: var(--radius); }
.contact .ico { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; padding: .65rem; border: 0; background: var(--card); color: var(--accent); }
.contact__k { color: var(--ink); font-weight: 700; }
.hours-card { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius); padding: 1.75rem; align-self: start; }
.hours-card h3 { margin-top: 0; }
.hours-card p { color: var(--ink-soft); }
.people { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 1rem; }
.people li { display: grid; gap: .1rem; }
.people .nm { font-weight: 700; }
.people a { width: fit-content; }
.people .role { color: var(--ink-faint); font-size: .9rem; }
/* Φαρδιές κάρτες (3 ανά σειρά στο desktop) ώστε όνομα και email να χωράνε σε μία γραμμή· σπάνε μόνο αν δεν χωράνε */
.people--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin-top: 1rem; }
.people--grid li { align-content: start; background: var(--card); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.2rem 1.3rem; overflow-wrap: break-word; }
/* Αρχικά σε χρωματιστό κύκλο (μπαίνουν από το app.js), πέντε χρώματα εναλλάξ */
.people--grid li.has-avatar { grid-template-columns: auto 1fr; column-gap: .9rem; }
.people--grid .avatar { grid-row: 1 / span 4; }
.people--grid li:nth-child(5n+2) { --tone: var(--terra); --on-tone: var(--on-terra); }
.people--grid li:nth-child(5n+3) { --tone: var(--leaf-ink); }
.people--grid li:nth-child(5n+4) { --tone: var(--tone-4); }
.people--grid li:nth-child(5n+5) { --tone: var(--gold); }

/* Δίκτυο υποστήριξης: μία Σχολή ανά <details>, σε δύο στήλες */
.schools { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.school { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; align-self: start; }
.school summary { cursor: pointer; list-style: none; font-weight: 700; padding: .9rem 4.25rem .9rem 1.2rem; min-height: 44px; display: flex; align-items: center; gap: 1rem; }   /* δεξιά χώρος για το βελάκι-κύκλο (κοινοί κανόνες με το FAQ) */
.school summary::-webkit-details-marker { display: none; }
.school summary:hover { color: var(--accent); }
.school__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; padding: .2rem 1.2rem 1.2rem; }
.school__col h4 { margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.contacts li { display: grid; gap: .1rem; overflow-wrap: anywhere; }
.contacts a { width: fit-content; }
.contacts .nm { font-weight: 700; }
.contacts .role, .contacts__k { color: var(--ink-faint); font-size: .88rem; }
.contacts__alt { padding-top: .8rem; border-top: 1px dashed var(--line-strong); }

/* Χάρτης */
.map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
.map p { margin: .6rem 0 0; font-weight: 600; }

/* Φόρμα «Σε καλούμε εμείς»: λευκή κάρτα, τερακότα κουμπί */
.callback { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.5rem, 3vw, 2.25rem); }
.callback h3 { margin-top: 0; }
.form { display: grid; gap: 1rem; max-width: 560px; margin-top: 1rem; }
.field { display: grid; gap: .3rem; }
.field label { font-weight: 700; }
.req { font-weight: 400; color: var(--ink-faint); font-size: .9rem; }
.field input[type="text"], .field input[type="tel"], .field select { font: inherit; color: var(--ink); background: var(--card); min-height: 48px; padding: .55rem .8rem; border: 2px solid var(--ink-faint); border-radius: var(--radius-sm); }
.field input[aria-invalid="true"] { border-color: var(--focus); }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: .65rem; }
.field--check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--accent); }
.field--check label { font-weight: 400; }
.field--check .field__err { grid-column: 1 / -1; }
.field__hint { margin: 0; color: var(--ink-faint); font-size: .9rem; }
.field__err { margin: 0; color: var(--focus); font-weight: 700; }
.form__errors { border: 2px solid var(--focus); border-radius: var(--radius-sm); padding: .8rem 1rem; background: var(--card); }
.form__errors ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.form .cta { justify-self: start; font: inherit; font-weight: 600; cursor: pointer; }

/* Footer: βαθύ πράσινο με ανοιχτό κείμενο (σε υψηλή αντίθεση λευκό/μαύρο), μία σκούρα κηλίδα κάτω δεξιά */
.foot { position: relative; overflow: hidden; background: var(--foot-bg); color: var(--foot-ink); border-top: 1px solid var(--line); }
.foot > .shell { position: relative; }
.blob--foot { background: var(--foot-blob); }
.foot__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space); padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }
.files-title { margin: 1.9rem 0 .5rem; }
.files-title:first-of-type { margin-top: .75rem; }
.foot__brand { display: flex; gap: .75rem; align-items: flex-start; }
.foot__brand .brand__mark { color: var(--foot-strong); }
.foot__brand p { margin: 0; font-family: var(--display); font-weight: 700; }
.foot__brand small { font-family: var(--sans); color: var(--foot-ink); }
.foot h2 { font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--foot-strong); margin: 0 0 .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot a { color: var(--foot-ink); text-decoration: none; }
.foot a:hover { color: var(--foot-strong); text-decoration: underline; }
.foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; border-top: 1px solid color-mix(in srgb, var(--foot-ink) 25%, transparent); padding: 1.1rem 0; }
.foot__legal p { margin: 0; color: var(--foot-ink); font-size: .85rem; }
.foot__logo { width: min(340px, 85%); height: auto; display: block; }

/* Dark theme: εκδοχή λογοτύπου με ανοιχτά χρώματα (logo-dark / logo-ntua-dark), χωρίς λευκό πλαίσιο */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-contrast="more"]) .logo-light { display: none; }
  :root:not([data-theme="light"]):not([data-contrast="more"]) .logo-dark { display: block; }
}
/* Στο πράσινο footer πάντα η ανοιχτή εκδοχή· σε υψηλή αντίθεση (λευκό footer) η κανονική */
.foot .logo-light { display: none; }
.foot .logo-dark { display: block; }
:root[data-contrast="more"]:not([data-theme="dark"]) .foot .logo-light { display: block; }
:root[data-contrast="more"]:not([data-theme="dark"]) .foot .logo-dark { display: none; }
.foot__funding { border-top: 1px solid color-mix(in srgb, var(--foot-ink) 25%, transparent); padding: 1.1rem 0; }
.foot__funding p { margin: 0; color: var(--foot-ink); font-size: .85rem; max-width: 95ch; }
.foot__funders { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-bottom: 1rem; }
.foot__funders img { height: 60px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; }

/* WCAG margin notes */
.note { margin-top: 1.5rem; background: color-mix(in srgb, var(--gold) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: .85rem 1.1rem; font-size: .92rem; color: var(--ink); }
.note code { background: color-mix(in srgb, var(--gold) 18%, transparent); padding: .05em .35em; border-radius: 4px; font-size: .92em; }

/* Υψηλή αντίθεση: οι στρογγυλές επιφάνειες ξαναπαίρνουν περίγραμμα (χωρίς σκιές/χρώματα δεν ξεχωρίζουν αλλιώς) */
:root[data-contrast="more"] .process li::before { border-color: var(--line); }
:root[data-contrast="more"] :is(.card, .tiles li, .vol__card, .chips-static li, .steps__num, .docs > li, .ann article, .event, .faq details, .school, .people--grid li, .callback, .help-box, .pull, .pillars li, .intent, .contact p, .steps > li, .band, .hero__disc) { border-color: var(--line); }
:root[data-contrast="more"] .ico { border: 1px solid var(--line); }
:root[data-contrast="more"] .docs > li { border-top-color: var(--dt, var(--accent)); }

/* ---------- Responsive ---------- */
/* Σε μεσαία πλάτη η sage κηλίδα του hero θα έπεφτε πίσω από το κείμενο: κρύβεται */
@media (max-width: 1180px) { .hero .deco > :nth-child(2) { display: none; } }
@media (max-width: 900px) {
  .vol { grid-template-columns: 1fr; }
  .burger { display: inline-flex; order: -1; }
  .nav { display: none; border-top: 0; margin: 0; padding-top: 0; }
  .nav.is-open { display: block; }
  .prefs__menu { left: 0; right: auto; max-width: calc(100vw - 2.5rem); }
  .nav ul { flex-direction: column; gap: .25rem; }
  .nav a { min-height: 48px; padding: .6rem .8rem; }
  .hero__inner, .grid-2 { grid-template-columns: 1fr; }
  /* Κινητό: ο δίσκος με το λογότυπο μικραίνει και πάει κάτω από τα πλακίδια· μία μόνο μικρή κηλίδα στη γωνία */
  .hero__art { width: 220px; margin-top: 1.5rem; }
  .band { border-radius: var(--radius-lg); border-bottom: 1px solid transparent; }
  .deco > :not(:first-child) { display: none; }
  :is(.hero, .section, .foot) .deco > :first-child { width: 220px; height: 220px; }   /* ίδια ειδικότητα με τους desktop κανόνες, μεταγενέστερος */
  .deco .dots, .help-box::after { display: none; }
  .hero .deco > :nth-child(1) { right: -160px; top: -160px; }
  .cards, .tiles { grid-template-columns: 1fr 1fr; }
  .offer, .news-cols, .school__body, .schools { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .cards, .tiles, .foot__inner, .intents, .steps { grid-template-columns: 1fr; }
  .steps > li { padding: 1.25rem 1.1rem; }
  .docs > li { grid-template-columns: 1fr; }
  .docs > li > .docs__a { grid-column: 1; grid-row: auto; margin-top: .35rem !important; }
  .foot__funders img { height: 48px; }
  .nav a { justify-content: flex-start; }
  .masthead .brand__logo { display: none !important; }
  .brand__fallback { display: inline; }
  .masthead__actions { order: 2; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; }
  /* Σε στενή οθόνη το κείμενο αναδιπλώνεται: inline-block ώστε η τελευταία λέξη (με το εικονίδιο) να μη γίνεται χωριστή στήλη */
  .cta { white-space: normal; display: inline-block; text-align: center; }
}

/* Reduced motion (χειροκίνητο + system, 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:root[data-motion="reduce"] { scroll-behavior: auto; }
:root[data-motion="reduce"] * { animation-duration: .001ms !important; transition-duration: .001ms !important; }