/* ============================================================
   Lefkada Portal — Design System
   Παλέτα Ιονίου: λευκό-γαλάζιο φόντο, βαθύ μπλε θάλασσας,
   navy για μπάντες, χρυσό ήλιου από το σήμα του Δήμου.
   ============================================================ */

:root {
  --cream:      #f3f6f8;
  --cream-soft: #f8fafb;
  --paper:      #ffffff;
  --ink:        #1e2a33;
  --ink-soft:   #4a5a66;
  --slate:      #1f3d52;
  --slate-deep: #162e3f;
  --teal:       #1b6f8f;
  --teal-deep:  #0f5068;
  --teal-soft:  #e1eff5;
  --gold:       #d19a2e;
  --gold-soft:  #f8ecd2;
  --green:      #4f8a7b;
  --green-soft: #e3f1ee;
  --line:       #d9e3ea;
  /* Περίγραμμα ΠΕΔΙΟΥ φόρμας: το --line δίνει 1,30:1 σε λευκό, κάτω από το 3:1
     που ζητά το WCAG 1.4.11 για στοιχεία διεπαφής. Το #6f7f8b δίνει 4,13:1. */
  --line-field: #6f7f8b;
  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 2px 6px rgba(30,42,51,.06), 0 12px 32px rgba(30,42,51,.08);
  --shadow-lg:  0 8px 40px rgba(30,42,51,.16);
  --font-body:  'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Nunito', 'Inter', system-ui, sans-serif;  /* στρογγυλή display γραμματοσειρά */
  --container:  1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--teal); }
a:hover { color: var(--teal-deep); }

/* Skip-link (WCAG 2.4.1): κρυφό ώσπου να το εστιάσει το πληκτρολόγιο. Χωρίς
   αυτόν τον κανόνα ο σύνδεσμος θα εμφανιζόταν ορατός πάνω από κάθε σελίδα. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal-deep); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 22px; }
/* Σε στενές οθόνες τα πλαίσια ακουμπούσαν σχεδόν την άκρη. Το περιθώριο μεγαλώνει
   μόνο εκεί — σε desktop τα 22px είναι ήδη σωστά. */
@media (max-width: 640px) { .container { padding: 0 28px; } }

.section { padding: 64px 0; }
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.section-sub { color: var(--ink-soft); margin: 0 0 34px; max-width: 640px; }
.section-head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.section-head-row .section-sub { margin-bottom: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal); color: #fff !important;
  padding: 12px 22px; border-radius: 100px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background .18s, transform .18s;
}
.btn:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn.btn-ghost { background: transparent; color: var(--teal) !important; border: 1.5px solid var(--teal); }
.btn.btn-ghost:hover { background: var(--teal-soft); }
.btn.btn-light { background: #fff; color: var(--slate) !important; }
.btn.btn-light:hover { background: var(--cream); }

/* ------------------------------------------------ header */
.site-header {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 14px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 64px; height: 64px; }
.brand-name { font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: .01em; white-space: nowrap; }
.brand-name small { display: block; font-weight: 500; font-size: 10.5px; color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; }

.main-nav { margin-left: auto; }
.main-nav > ul, .main-nav > div > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.main-nav a {
  display: block; padding: 10px 10px; border-radius: 8px; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px;
}
.main-nav a:hover { background: var(--teal-soft); color: var(--teal-deep); }
.main-nav li.current-menu-item > a { color: var(--teal-deep); }

/* dropdowns */
.main-nav li { position: relative; }
.main-nav li.menu-item-has-children > a::after { content: " ▾"; font-size: 10px; opacity: .55; }
.main-nav .sub-menu {
  /* Ο κανόνας list-style της γραμμής 89 πιάνει μόνο τα ΑΜΕΣΑ ul (`.main-nav > ul`).
     Τα ένθετα .sub-menu κρατούσαν disc, και με padding 8px οι κουκκίδες ξέφευγαν
     αριστερά, έξω από το πάνελ. */
  list-style: none; margin: 0;
  display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 50;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu a { padding: 9px 14px; font-weight: 550; font-size: 14px; border-radius: 8px; white-space: nowrap; }
@media (max-width: 1024px) {
  /* Submenus: κλειστά by default, ανοίγουν με κλικ (.sub-open βάζει το JS).
     Ακυρώνουμε επίσης τον desktop :hover rule — σε touch τo hover κολλά μετά
     την αφή και κρατά το submenu ανοιχτό ακόμα κι αν αφαιρεθεί το .sub-open. */
  .main-nav .sub-menu { position: static; display: none; border: 0; box-shadow: none; padding: 0 0 0 18px; margin-bottom: 4px; }
  .main-nav li:hover > .sub-menu,
  .main-nav li:focus-within > .sub-menu { display: none; }
  .main-nav li.sub-open > .sub-menu { display: block; }
  .main-nav li.menu-item-has-children > a::after { display: inline-block; transition: transform .2s; }
  .main-nav li.sub-open > a::after { transform: rotate(180deg); }
}

.nav-cta { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-cta .btn { padding: 9px 16px; font-size: 13px; white-space: nowrap; }

.lang-switch {
  font-weight: 800; font-size: 12.5px; letter-spacing: .04em; text-decoration: none;
  color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.lang-switch:hover { border-color: var(--teal); color: var(--teal-deep); }

/* αγγλικό grid */
.en-notice {
  display: flex; align-items: center; gap: 14px;
  background: var(--gold-soft); border: 1px solid #e5d5ac; border-radius: 12px;
  padding: 14px 20px; margin-bottom: 34px; font-size: 14px;
}
.en-notice span { font-size: 22px; }
.en-notice p { margin: 0; color: #6b5a26; line-height: 1.55; }
.en-notice a { color: var(--teal-deep); font-weight: 600; }

.en-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1100px) { .en-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .en-grid { grid-template-columns: repeat(2, 1fr); } }

.map-cta { padding: 14px; text-align: center; background: var(--paper); border-top: 1px solid var(--line); }
.nav-search-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; display: grid; place-items: center;
}
.nav-search-btn:hover { border-color: var(--teal); }
.nav-toggle { display: none; }

/* mobile nav
   Παρατήρηση Δήμου §1/§3 (28/09/2026): το burger έμπαινε στα 980px, αλλά η
   κεφαλίδα desktop (σήμα + 7 είσοδοι + EN/αναζήτηση/e-Υπηρεσίες) θέλει ~1.170px.
   Ανάμεσα στα δύο, το περιεχόμενο ξεχείλωνε δεξιά: το «EN» κοβόταν, εμφανιζόταν
   οριζόντια κύλιση και ολόκληρη η σελίδα φαινόταν «μετατοπισμένη» (το σήμα
   κολλημένο αριστερά). Το burger μπαίνει τώρα στα 1024px, και από εκεί και
   πάνω η κεφαλίδα στενεύει σταδιακά (βλ. «header: 7 είσοδοι» πιο κάτω).
   Ξεχείλωμα δεν επιτρέπεται πουθενά. Το overflow-x: clip στο html σπάει το sticky
   σε ορισμένα Chrome/Safari mobile. Αντ' αυτού: fixed header σε mobile (βλ. παρακάτω)
   + clip μόνο σε desktop όπου δεν υπάρχει sticky κίνδυνος. */
html { overflow-x: clip; }
@media (max-width: 1024px) {
  /* position: fixed αντί sticky στο mobile — πιο αξιόπιστο σε όλα τα mobile browsers */
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  body { padding-top: 84px; }
}
@media (max-width: 1024px) {
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    /* §3: το μενού κυλά μόνο του, όχι η σελίδα από πίσω */
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .main-nav.open { display: block; }
  body.nav-open { overflow: hidden; }
  .main-nav ul { flex-direction: column; padding: 12px; }
  .nav-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 10px;
    background: #fff; cursor: pointer; font-size: 20px;
  }
  .nav-cta .btn { display: none; }
}

/* ------------------------------------------------ hero */
.hero {
  position: relative; min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; text-align: center;
}
.hero-media, .hero-media video, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* κινηματογραφικό slideshow: αργό zoom/pan + crossfade (Ken Burns) */
.hero-slides img {
  opacity: 0;
  animation: heroKB 20s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-slides img:nth-child(2) { animation-delay: 10s; }
@keyframes heroKB {
  0%   { opacity: 0; transform: scale(1.06) translate(1.2%, -0.6%); }
  6%   { opacity: 1; }
  50%  { opacity: 1; transform: scale(1.16) translate(-1.2%, 0.8%); }
  62%  { opacity: 0; transform: scale(1.18) translate(-1.5%, 1%); }
  100% { opacity: 0; transform: scale(1.06) translate(1.2%, -0.6%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slides img { animation: none; }
  .hero-slides img:first-child { opacity: 1; }
}

/* γυάλινο πάνελ τίτλου */
.hero-glass {
  background: rgba(16, 26, 34, .32);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 28px;
  padding: 40px 46px 44px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
@media (max-width: 640px) { .hero-glass { padding: 28px 20px 30px; border-radius: 20px; } }
.hero-glass h1 { text-shadow: 0 1px 10px rgba(0, 0, 0, .3); margin-bottom: 24px; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,34,42,.42) 0%, rgba(23,34,42,.18) 45%, rgba(23,34,42,.55) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 860px; padding: 90px 22px; }
.hero h1 {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.15; margin: 0 0 8px;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.hero-sub {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(15px, 1.6vw, 20px); opacity: .92;
  margin: 0 0 26px; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.hero-search { max-width: 640px; margin: 0 auto; }
.search-mode { display: inline-flex; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border-radius: 100px; padding: 4px; margin-bottom: 14px; }
.search-mode button {
  border: 0; background: transparent; color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 7px 18px; border-radius: 100px; cursor: pointer;
}
.search-mode button.active { background: #fff; color: var(--slate); }
/* ο βοηθός: ζεστός, όχι «ρομποτικός» */
.search-mode button.ai-mode { display: inline-flex; align-items: center; gap: 6px; }
.search-mode button.ai-mode .spark { display: inline-block; animation: sparkle 2.6s ease-in-out infinite; }
.search-mode button.ai-mode.active {
  background: linear-gradient(120deg, #fff3d6, #ffe4b8 55%, #ffd9e8);
  color: #6b4a12;
}
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
  50%      { transform: scale(1.25) rotate(12deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .search-mode button.ai-mode .spark { animation: none; } }
.hero-search form { display: flex; background: #fff; border-radius: 100px; padding: 6px; box-shadow: var(--shadow-lg); }
.hero-search input[type="search"] {
  flex: 1; border: 0; outline: 0; padding: 10px 20px; font-size: 16px;
  font-family: var(--font-body); background: transparent; color: var(--ink);
}
.hero-search button[type="submit"] {
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--teal); color: #fff; cursor: pointer; font-size: 17px;
}
.hero-search button[type="submit"]:hover { background: var(--teal-deep); }
.hero-hint { font-size: 13px; margin-top: 12px; opacity: .85; }
.hero-scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: #fff; opacity: .8; font-size: 22px; animation: float 2.2s ease-in-out infinite;
}
@keyframes float { 50% { transform: translate(-50%, 7px); } }

/* ------------------------------------------------ ticker (τελευταία νέα κάτω από hero) */
.ticker-wrap { position: relative; z-index: 3; margin-top: -46px; margin-bottom: 46px; }
.ticker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.ticker-card {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 24px; display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line);
}
.ticker-card .tk-date { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; padding-top: 3px; }
.ticker-card a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.45; }
.ticker-card a:hover { color: var(--teal-deep); }
@media (max-width: 760px) { .ticker { grid-template-columns: 1fr; } }

/* ------------------------------------------------ gov.gr */
:root { --gov: #003375; --gov-light: #1c5ba5; --gov-soft: #eaf1fa; }
.gg {
  display: inline-block; background: #fff; color: var(--gov);
  font-weight: 800; font-size: .78em; padding: 2px 9px; border-radius: 6px;
  letter-spacing: .01em; vertical-align: middle;
}
.gov-hero-btn {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  background: var(--gov); color: #fff !important; text-decoration: none;
  font-weight: 600; font-size: 13.5px; padding: 10px 20px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.25);
}
/* Το λογότυπο gov.gr έχει δικό του μπλε φόντο, όχι διάφανο: με αλλαγή φόντου
   στο hover το πλακάκι του λογότυπου έμενε σε άλλο μπλε από το κουμπί. Αντί
   γι' αυτό κινείται το βέλος προς έξω. Το καθολικό prefers-reduced-motion
   παρακάτω σβήνει τη μετάβαση για όποιον δεν τη θέλει. */
.gg-arrow { transition: transform .15s ease-out; display: inline-block; }
.gov-hero-btn:hover .gg-arrow, .gov-hero-btn:focus .gg-arrow,
.gov-btn-gg:hover  .gg-arrow, .gov-btn-gg:focus  .gg-arrow { transform: translateX(4px); }

.gov-strip { background: var(--gov); color: #fff; padding: 44px 0; }
.gov-strip-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.gov-strip-head h2 { font-family: var(--font-serif); font-size: clamp(21px, 2.6vw, 28px); margin: 0 0 4px; }
.gov-strip-head p { margin: 0; opacity: .8; font-size: 14px; }
.gov-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gov-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 100px; transition: background .15s;
}
.gov-chip:hover { background: rgba(255,255,255,.22); color: #fff; }
.gov-chip-more { background: #fff; color: var(--gov); }
.gov-chip-more:hover { background: var(--gov-soft); color: var(--gov); }

.gov-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gov); color: #fff !important; text-decoration: none;
  font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 8px;
  white-space: nowrap; transition: background .15s;
}
.gov-btn:hover { background: var(--gov-light); }
/* Όπου το κουμπί φοράει το λογότυπο gov.gr, το φόντο ΔΕΝ αλλάζει: το πλακάκι του
   λογότυπου έχει δικό του μπλε και έμενε σε άλλον τόνο από το κουμπί. Κινείται το
   βέλος αντ' αυτού. Ο κανόνας πρέπει να έρχεται ΜΕΤΑ το .gov-btn:hover — ίδια
   ειδικότητα, κερδίζει ο τελευταίος. */
.gov-btn-gg:hover, .gov-btn-gg:focus { background: var(--gov); }
.gov-btn-light { background: #fff; color: var(--gov) !important; }
.gov-btn-light:hover { background: var(--gov-soft); }

.gov-hero { background: linear-gradient(120deg, #002a60, var(--gov) 55%, var(--gov-light)); color: #fff; padding: 54px 0 46px; }
.gov-hero .crumbs { font-size: 13px; opacity: .75; margin-bottom: 10px; }
.gov-hero .crumbs a { color: #fff; text-decoration: none; }
.gov-hero h1 { font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 10px; }
.gov-hero p { max-width: 560px; margin: 0 0 16px; opacity: .9; }
.gov-badge {
  display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 100px;
}
.gov-list { display: grid; gap: 12px; }
/* Η κεφαλίδα είναι sticky: χωρίς αυτό, το κουτί στο οποίο δείχνει το chip
   προσγειώνεται από κάτω της και ο επισκέπτης βλέπει λάθος υπηρεσία. */
.gov-item { scroll-margin-top: 110px; }
.gov-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center;
  background: #fff; border: 1px solid #d8e3f0; border-left: 4px solid var(--gov);
  border-radius: 10px; padding: 20px 22px;
}
@media (max-width: 700px) { .gov-item { grid-template-columns: 1fr; } }
.gov-item .gi { font-size: 28px; text-align: center; }
.gov-item h3 { margin: 0 0 5px; font-size: 16px; color: var(--gov); }
.gov-item p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.gov-item p a { color: var(--gov-light); }
.gov-note { margin-top: 28px; background: var(--gov-soft); border-radius: 10px; padding: 18px 22px; font-size: 14px; }
.gov-note p { margin: 0; }

/* ------------------------------------------------ "Θέλω να" */
.needto { background: linear-gradient(180deg, var(--cream-soft), var(--cream)); }
.needto-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .needto-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .needto-grid { grid-template-columns: repeat(2, 1fr); } }
.needto-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 18px 22px; text-align: center; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative;
}
.needto-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal); color: var(--ink); }
.needto-card .ni {
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 16px; background: var(--teal-soft);
}
.needto-card .ni img, .needto-card .ni svg { width: 28px; height: 28px; }
.needto-card b { font-size: 14.5px; line-height: 1.35; font-weight: 700; }
.needto-card span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.needto-card .soon {
  position: absolute; top: 10px; right: 10px;
  background: var(--gold-soft); color: var(--gold);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 100px; text-transform: uppercase;
}

/* ------------------------------------------------ Επικαιρότητα (tabs) */
.timeliness-layout { display: grid; grid-template-columns: 240px 1fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .timeliness-layout { grid-template-columns: 1fr; } }
.tl-tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 96px; }
@media (max-width: 900px) { .tl-tabs { flex-direction: row; flex-wrap: wrap; position: static; } }
.tl-tab {
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 12px 18px; border-radius: 10px; font-family: var(--font-body);
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  border-left: 3px solid transparent;
}
.tl-tab:hover { background: var(--teal-soft); color: var(--teal-deep); }
.tl-tab.active { background: var(--paper); color: var(--teal-deep); border-left-color: var(--teal); box-shadow: var(--shadow); }
@media (max-width: 900px) { .tl-tab { border-left: 0; border-bottom: 3px solid transparent; } .tl-tab.active { border-bottom-color: var(--teal); } }

.tl-panel { display: none; }
.tl-panel.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
.tl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px) { .tl-grid { grid-template-columns: 1fr; } }

.doc-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; text-decoration: none; color: var(--ink); display: block;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal); color: var(--ink); }
.doc-card .dc-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.doc-card h3 { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 650;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-more { margin-top: 22px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}
.tone-teal  { background: var(--teal-soft);  color: var(--teal-deep); }
.tone-slate { background: #e5eaee;           color: var(--slate); }
/* #8a6a20 έδινε 4,30:1 πάνω στο --gold-soft — κάτω από το 4,5:1 του WCAG AA.
   Η τιμή #6f5418 είναι αυτή που υποδεικνύει η έκθεση QA §3. */
.tone-gold  { background: var(--gold-soft);  color: #6f5418; }
.tone-green { background: var(--green-soft); color: #46603c; }
.badge-doc  { background: #fdeaea; color: #a33; }

/* ------------------------------------------------ Θεματικές */
.themes-band { background: var(--slate); color: #fff; }
.themes-band .section-title, .themes-band .section-sub { color: #fff; }
.themes-band .section-sub { opacity: .75; }
.themes-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.theme-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 100px;
  font-weight: 600; font-size: 14.5px; transition: background .15s, transform .15s;
}
.theme-chip:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }
.theme-chip small { opacity: .65; font-size: 12px; font-weight: 500; }

/* ------------------------------------------------ Επισκέπτης */
.visitor-card {
  display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 22px; overflow: hidden;
  background: var(--green-soft); box-shadow: var(--shadow);
}
@media (max-width: 860px) { .visitor-card { grid-template-columns: 1fr; } }
.visitor-text { padding: 46px 44px; }
.visitor-text .section-title { margin-bottom: 10px; }
.visitor-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin: 22px 0 28px; padding: 0; list-style: none; }
.visitor-links a {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
}
.visitor-links a::before { content: "→"; color: var(--green); font-weight: 800; }
.visitor-links a:hover { color: var(--green); }
.visitor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; }
@media (max-width: 600px) {
  .visitor-text { padding: 26px 18px; }
  .visitor-links { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------ banner χάρτη */
.map-banner { position: relative; overflow: hidden; color: #fff; }
.map-banner .mb-bg { position: absolute; inset: 0; }
.map-banner .mb-bg img { width: 100%; height: 100%; object-fit: cover; }
.map-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(31,82,87,.93) 0%, rgba(31,82,87,.72) 55%, rgba(31,82,87,.4) 100%);
}
.mb-inner {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap;
  padding-top: 46px; padding-bottom: 46px;
}
.map-banner h2 { font-family: var(--font-serif); font-size: clamp(22px, 3vw, 32px); margin: 0 0 6px; }
.map-banner p { margin: 0 0 14px; opacity: .88; font-size: 15px; }
.mb-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.mb-chips span {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25);
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 100px;
}

/* ------------------------------------------------ Δήμος band */
.dimos-band {
  position: relative; color: #fff; overflow: hidden;
  background: var(--slate-deep);
}
.dimos-band .bg { position: absolute; inset: 0; }
.dimos-band .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.dimos-band .container { position: relative; }
.dimos-band .section-title { color: #fff; }
.dimos-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; list-style: none; margin: 26px 0 0; padding: 0; }
@media (max-width: 760px) { .dimos-links { grid-template-columns: 1fr; } }
.dimos-links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 4px; color: #fff; text-decoration: none; font-weight: 600; font-size: 16.5px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.dimos-links a::after { content: "→"; opacity: 0; transform: translateX(-8px); transition: all .18s; }
.dimos-links a:hover { color: var(--gold-soft); }
.dimos-links a:hover::after { opacity: 1; transform: none; }



/* ------------------------------------------------ Σε αριθμούς */
.numbers-band { position: relative; color: #fff; overflow: hidden; background: var(--teal-deep); }
.numbers-band .bg { position: absolute; inset: 0; }
.numbers-band .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.numbers-band .container { position: relative; }
.numbers-band .section-title { color: #fff; text-align: center; }
.numbers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px; margin-top: 40px; text-align: center; }
@media (max-width: 860px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); } }
.num-item .n { font-family: var(--font-serif); font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; line-height: 1; }
.num-item .l { margin-top: 10px; font-size: 14px; opacity: .8; letter-spacing: .03em; }
.num-item .n small { font-size: .5em; }

/* ------------------------------------------------ Ψηφιακά εργαλεία */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tools-grid { grid-template-columns: 1fr; } }
.tool-card {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px; text-decoration: none; color: var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.tool-card .ti {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; margin-bottom: 16px; background: var(--teal-soft);
}
.tool-card h3 { margin: 0 0 6px; font-size: 17px; }
.tool-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.tool-card .soon {
  position: absolute; top: 14px; right: 14px;
  background: var(--gold-soft); color: #8a6a20; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
}
.tools-note { margin-top: 20px; font-size: 13px; color: var(--ink-soft); }
.tools-note a { font-weight: 600; }

/* ------------------------------------------------ σύνδεσμοι */
.links-strip { border-top: 1px solid var(--line); background: var(--paper); padding: 34px 0; }
.links-row { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; }
.ext-link {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 100px; padding: 9px 20px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px;
  transition: border-color .15s, background .15s;
}
.ext-link:hover { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-deep); }

/* καλωσόρισμα δημάρχου — διακριτικό */
.mayor-note { padding: 40px 0; }
.mayor-card {
  display: flex; gap: 30px; align-items: center; max-width: 860px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 36px; box-shadow: var(--shadow);
}
@media (max-width: 640px) { .mayor-card { flex-direction: column; text-align: center; } }
.mayor-card img {
  width: 108px; height: 108px; object-fit: cover; object-position: top;
  border-radius: 50%; border: 3px solid var(--gold-soft); flex: none;
}
.mayor-card .mq { font-family: var(--font-serif); font-style: italic; font-size: 16.5px;
  line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; }
.mayor-card .ms { margin: 0 0 14px; font-size: 14px; }

.logo-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.logo-link {
  display: grid; place-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 18px; height: 84px; width: 178px;
  filter: grayscale(.4); opacity: .85; transition: all .18s;
}
.logo-link:hover { filter: none; opacity: 1; border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow); }
.logo-link img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }

/* ------------------------------------------------ footer */
.site-footer { background: var(--slate-deep); color: #cfd8de; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; padding: 56px 0 40px; }
@media (max-width: 960px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-main { grid-template-columns: 1fr; } }
.site-footer h2 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: #cfd8de; text-decoration: none; font-size: 14.5px; }
.site-footer a:hover { color: #fff; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-brand img { width: 56px; height: 56px; }
.footer-brand b { color: #fff; font-size: 16px; line-height: 1.2; display: block; }
.footer-contact li { display: flex; gap: 9px; font-size: 14.5px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13px;
}
.footer-bottom a { color: #cfd8de; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font-size: 15px; color: #fff;
}
.social-row a:hover { background: var(--teal); border-color: var(--teal); }

/* ============================================================
   ΕΣΩΤΕΡΙΚΕΣ ΣΕΛΙΔΕΣ
   ============================================================ */
.page-hero {
  background: linear-gradient(120deg, var(--slate-deep), var(--teal-deep));
  color: #fff; padding: 52px 0 44px;
}
.page-hero .crumbs { font-size: 13px; opacity: .75; margin-bottom: 10px; }
.page-hero .crumbs a { color: #fff; text-decoration: none; }
.page-hero h1 { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 40px); margin: 0; }
.page-hero .ph-meta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.page-hero .badge { background: rgba(255,255,255,.14); color: #fff; }

/* ---- archive: λίστα εγγράφων (η μεγάλη διόρθωση) ---- */
.archive-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; padding: 44px 0 70px; }
@media (max-width: 920px) { .archive-layout { grid-template-columns: 1fr; } }

.filter-panel { position: sticky; top: 96px; display: grid; gap: 22px; }
@media (max-width: 920px) { .filter-panel { position: static; } }
.filter-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.filter-box h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.filter-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.filter-box li a {
  display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 550;
}
.filter-box li a:hover { background: var(--teal-soft); }
.filter-box li.active a { background: var(--teal); color: #fff; }
.filter-box li a small { color: var(--ink-soft); }
.filter-box li.active a small { color: rgba(255,255,255,.75); }
.filter-box select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line-field); border-radius: 9px;
  font-family: var(--font-body); font-size: 14.5px; background: #fff; color: var(--ink);
}

.doc-list { display: grid; gap: 12px; }
.doc-row {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 22px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.doc-row:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateX(3px); color: var(--ink); }
.doc-row .dr-date { text-align: center; line-height: 1.1; }
.doc-row .dr-date b { display: block; font-size: 21px; color: var(--teal-deep); }
.doc-row .dr-date span { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.doc-row h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 650; line-height: 1.45; }
.doc-row .dr-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.doc-row .dr-side { font-size: 22px; color: var(--line); transition: color .15s; }
.doc-row:hover .dr-side { color: var(--teal); }
@media (max-width: 640px) { .doc-row { grid-template-columns: 1fr; } .doc-row .dr-date { display: flex; gap: 6px; align-items: baseline; } }

.count-note { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.pagination .page-numbers.current { background: var(--teal); border-color: var(--teal); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--teal); }

/* ---- single ---- */
.single-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; padding: 44px 0 70px; }
@media (max-width: 980px) { .single-layout { grid-template-columns: 1fr; } }
.article-body { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 44px; }
@media (max-width: 640px) { .article-body { padding: 26px 22px; } }
.article-body .content { font-size: 16.5px; line-height: 1.75; }
.article-body .content p { margin: 0 0 1.1em; }
.article-body .content a { word-break: break-word; }
.article-body .content img { border-radius: 10px; }
/* Παρατήρηση Δήμου §4 (28/09/2026): σε κινητό, σελίδες με πίνακες από το παλιό
   site (π.χ. «Υπηρεσίες του Δήμου», 3 στήλες με e-mail και τηλέφωνα) ξεχείλωναν
   και «έκοβαν» όλη τη σελίδα. Ο πίνακας κυλά μέσα στο δικό του πλαίσιο, τα
   κελιά σπάνε λέξεις (e-mail), και εικόνες/embeds δεν ξεπερνούν ποτέ τη στήλη. */
.article-body .content { max-width: 100%; overflow-wrap: anywhere; }
.article-body .content img, .article-body .content video, .article-body .content iframe { max-width: 100%; height: auto; }
.article-body .content figure.wp-block-table { max-width: 100%; overflow-x: auto; margin-left: 0; margin-right: 0; }
.article-body .content > table { display: block; max-width: 100%; overflow-x: auto; }
.article-body .content table { border-collapse: collapse; width: 100%; }
/* Στα κελιά ΔΕΝ σπάμε λέξεις: ένα e-mail κομμένο σε τέσσερις γραμμές δεν διαβάζεται.
   Ο πίνακας παίρνει το πλάτος που θέλει και κυλά οριζόντια μέσα στο πλαίσιό του. */
.article-body .content td, .article-body .content th { overflow-wrap: normal; word-break: normal; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 640px) { .article-body .content td, .article-body .content th { font-size: 14px; padding: 7px 8px; } }
.article-themes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.article-themes a {
  background: var(--teal-soft); color: var(--teal-deep); text-decoration: none;
  font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 100px;
}
.article-themes a:hover { background: var(--teal); color: #fff; }

.attach-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.attach-box h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.attach-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attach-box a {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  background: var(--cream-soft); border-radius: 9px; color: var(--ink);
  text-decoration: none; font-size: 13.5px; font-weight: 550; line-height: 1.4;
  word-break: break-word;
}
.attach-box a:hover { background: var(--teal-soft); color: var(--teal-deep); }
.attach-box .fico { flex: none; font-size: 16px; }

/* Άρθρο χωρίς κείμενο: το κουτί συνημμένων μπαίνει ΜΕΣΑ στην κάρτα του άρθρου
   και χάνει το δικό του πλαίσιο, για να μη φαίνεται κάρτα μέσα σε κάρτα. */
.article-body .attach-inline { background: none; border: 0; padding: 0; margin: 0; }
.article-body .attach-inline a { font-size: 15px; padding: 12px 14px; }

.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.postnav a {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px; text-decoration: none; color: var(--ink); font-size: 13.5px; line-height: 1.4;
}
.postnav a:hover { border-color: var(--teal); }
.postnav a small { display: block; color: var(--ink-soft); margin-bottom: 4px; }
.postnav .next { text-align: right; }

/* ---- generic page / search ---- */
/* Άδεια σελίδα — ουδέτερο, προσωρινού τόνου, όχι σφάλμα. */
.page-empty {
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0;
}

.plain-wrap { max-width: 880px; margin: 0 auto; padding: 44px 22px 70px; }
@media (max-width: 640px) { .plain-wrap { padding: 30px 28px 50px; } }
.plain-wrap .article-body { padding: 40px 44px; }

.search-count { color: var(--ink-soft); margin-bottom: 24px; }

/* ---- επικοινωνία ---- */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
@media (max-width: 960px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .contact-cards { grid-template-columns: 1fr; } }
.ccard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; text-align: center;
}
.ccard .ci { font-size: 28px; display: block; margin-bottom: 10px; }
.ccard h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.ccard p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.ccard a { text-decoration: none; }
.contact-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 44px; box-shadow: var(--shadow); }
.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }

.dir-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.dir-head input {
  flex: 1; min-width: 260px; max-width: 420px; padding: 12px 18px;
  border: 1.5px solid var(--line-field); border-radius: 100px;
  font-family: var(--font-body); font-size: 14.5px; background: var(--paper);
}
.dir-head input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }

.dir-table .content { overflow-x: auto; }
.dir-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dir-table th, .dir-table td { padding: 10px 12px !important; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.dir-table tr:first-child { background: var(--slate); color: #fff; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; }
.dir-table tr:nth-child(even) { background: var(--cream-soft); }
.dir-table tr:hover:not(:first-child) { background: var(--teal-soft); }
.dir-table a { word-break: break-all; }

/* ---- τεχνητή νοημοσύνη ---- */
.ai-hero { background: linear-gradient(125deg, #1f3a4a, #2e6b70 60%, #3d8a8f); }
.badge-soon { background: rgba(255, 200, 80, .22) !important; border-color: rgba(255, 200, 80, .5) !important; }
.lead-text { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 820px; margin: 0 0 34px; }
.ai-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .ai-status { grid-template-columns: repeat(2, 1fr); } }
.ai-step {
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px; position: relative; opacity: .6;
}
.ai-step span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); font-weight: 800; font-size: 13px; margin-bottom: 6px;
}
.ai-step b { font-size: 14.5px; }
.ai-step small { font-size: 12.5px; color: var(--ink-soft); }
.ai-step.done { opacity: 1; border-color: var(--green); }
.ai-step.done span { background: var(--green); color: #fff; }
.ai-step.active { opacity: 1; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.ai-step.active span { background: var(--teal); color: #fff; }
.ai-step.active::after { content: "τώρα"; position: absolute; top: 12px; right: 12px; font-size: 10.5px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; }
.ai-card span { font-size: 28px; display: block; margin-bottom: 10px; }
.ai-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.ai-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.ai-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .ai-how { grid-template-columns: 1fr; } }
.ai-how h3 { font-size: 16px; margin: 0 0 8px; color: var(--teal-deep); }
.ai-how p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.ai-privacy { margin-top: 40px; background: var(--cream-soft); border-left: 4px solid var(--teal); border-radius: 12px; padding: 22px 26px; }
.ai-privacy h3 { margin: 0 0 8px; font-size: 16px; }
.ai-privacy p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.ai-cta { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.ai-cta p { margin: 0; font-size: 15px; }

/* ---- ψηφιακές υπηρεσίες ---- */
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .plat-grid { grid-template-columns: 1fr; } }
.plat-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.plat-card .pi { font-size: 34px; }
.plat-card h3 { margin: 0; font-size: 18px; }
.plat-card p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; flex: 1; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-box { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; }
.cat-box h3 { margin: 0 0 12px; font-size: 15px; display: flex; gap: 10px; align-items: center; color: var(--teal-deep); }
.cat-box ul { margin: 0; padding: 0; list-style: none; }
.cat-box li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cat-box li a { text-decoration: none; color: var(--ink); }
.cat-box li a:hover { color: var(--teal); }
.cat-box li a::after { content: " ↗"; font-size: 11px; opacity: .45; }

/* ---- μεγάλος χάρτης ---- */
.map-page { padding-bottom: 40px; }
.map-filters {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 18px 22px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.mf-chip {
  border: 1.5px solid var(--line); background: #fff; border-radius: 100px;
  padding: 8px 18px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: all .15s;
}
.mf-chip:hover { border-color: var(--teal); }
.mf-chip.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.mf-chip small { opacity: .7; }
#big-map { height: calc(100vh - 260px); min-height: 480px; }
.map-credit { font-size: 12px; color: var(--ink-soft); padding-top: 12px; }
.leaflet-popup-content { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; }

/* ---- ΕΣΠΑ banner στο footer ---- */
.espa-strip { background: #fff; padding: 18px 0; border-top: 1px solid var(--line); text-align: center; }
.espa-strip img { max-height: 74px; width: auto; }

/* 404 */
.err-wrap { text-align: center; padding: 110px 22px; }
.err-wrap .code { font-family: var(--font-serif); font-size: 96px; font-weight: 700; color: var(--teal); line-height: 1; }

/* helpers */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* διακριτική ένδειξη πιλοτικής λειτουργίας (header) */
.pilot-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8a6414; background: var(--gold-soft); border: 1px solid #e6cf8f;
  border-radius: 100px; padding: 5px 9px; text-decoration: none; white-space: nowrap; font-size: 10.5px;
}
.pilot-chip:hover { background: #f1e2b8; color: #6b4c0c; }
@media (max-width: 1440px) { .pilot-chip { display: none; } }

/* photo grid — gallery κατηγορίες (π.χ. Ο Τόπος μας) */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 14px; }
.photo-card { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--slate); color: #fff; text-decoration: none; }
.photo-card--lg { grid-column: span 2; grid-row: span 2; }
.photo-card img, .photo-card__empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease; }
.photo-card__empty { background: linear-gradient(135deg, var(--teal), var(--slate)); }
.photo-card:hover img { transform: scale(1.06); }
.photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.photo-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.photo-card__cat { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-soft); }
.photo-card h3 { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.25; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.photo-card--lg h3 { font-size: 26px; }
.photo-card__ex { font-size: 13px; line-height: 1.4; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease, max-height .3s ease; }
.photo-card:hover .photo-card__ex, .photo-card--lg .photo-card__ex { opacity: .92; max-height: 60px; }
@media (max-width: 920px) { .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .photo-card--lg { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .photo-grid { grid-template-columns: 1fr; grid-auto-rows: 210px; } .photo-card--lg { grid-column: span 1; } }

/* --- Εικονίδια γραμμής (amy_icon) & λογότυπο gov.gr — έλεγχος DAD --- */
.dic { vertical-align: -0.22em; flex: none; }
.badge .dic { vertical-align: -0.18em; margin-right: 2px; }
.fico .dic, .ci .dic { vertical-align: -0.3em; }
.needto-card .ni .dic, .tool-card .ti .dic { display: block; margin: 0 auto; }
.gg-logo { height: 1.35em; width: auto; vertical-align: -0.3em; margin-right: 6px; }
.hero .gg-logo { height: 1.2em; }

/* --- Εγκύκλιοι (page-egkyklioi.php) --- */
.egk-law { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.egk-intro { margin-bottom: 28px; }
.egk-h2 { font-size: 24px; margin: 0 0 16px; }
.egk-note { display: flex; gap: 18px; align-items: flex-start; margin-top: 34px; padding: 22px 24px;
  background: var(--teal-soft); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); }
.egk-note-icon { color: var(--teal-deep); flex: none; padding-top: 2px; }
.egk-note h3 { margin: 0 0 6px; font-size: 18px; }
.egk-note p { margin: 0 0 12px; line-height: 1.6; }
.egk-search { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.egk-search input { flex: 1 1 240px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.egk-search .btn { display: inline-flex; align-items: center; gap: 8px; }
.egk-small { font-size: 12.5px; color: var(--ink-soft); margin: 0 !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* καλωσόρισμα Δημάρχου ψηλά (Λευκάδα) */
.mayor-top { padding: 34px 0 8px; }
.mayor-top .mayor-card { max-width: 1000px; }
.mayor-top .mq-title { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 800; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.mayor-top .mayor-card img {
  width: 150px; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center;
  border-radius: 14px; border: 3px solid var(--teal-soft); background: #fff;
}
@media (max-width: 640px) { .mayor-top .mayor-card img { width: 120px; } }
.hero-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.hero-btns .gov-hero-btn { margin-top: 0; }
.hero-btn-alt { background: rgba(255,255,255,.16); }
.hero-btn-alt:hover { background: rgba(255,255,255,.28); }
/* header: 7 είσοδοι -> πιο σφιχτό. Με chip «Πιλοτική» + 7 εισόδους δεν χωράει
   7px οριζόντιο padding — χρησιμοποιούμε 5px σε όλα τα πλάτη desktop. */
.main-nav a { font-size: 12px; padding: 10px 5px; }
.header-inner { gap: 10px; }
.brand-name small { display: none; }
.brand img { width: 80px; height: 80px; object-fit: contain; }
.brand { gap: 12px; }
.footer-brand img { width: 64px; height: 64px; object-fit: contain; }
.brand-name { font-size: 14.5px; }
.nav-cta { gap: 8px; }
.header-inner { flex-wrap: nowrap; }
.main-nav { min-width: 0; }
/* Στένεμα κατά βήματα ώσπου να μπει το burger στα 1024px (παρατήρηση Δήμου §1):
   1180: ακόμα λιγότερο button padding · 1120: μένει μόνο το σήμα χωρίς κείμενο. */
@media (max-width: 1180px) { .main-nav a { font-size: 12px; padding: 10px 5px; } .brand-name small { display: none; } .nav-cta .btn { padding: 9px 12px; } }
@media (max-width: 1120px) and (min-width: 1025px) { .brand-name { display: none; } .brand { gap: 0; } }
/* Στενά κινητά (≤480px): σήμα + όνομα + burger + EN + αναζήτηση ξεπερνούσαν τα 375px κατά 8px. */
@media (max-width: 480px) {
  .header-inner { gap: 6px; min-height: 72px; }
  .brand { gap: 8px; }
  .brand img { width: 52px; height: 52px; }
  .brand-name { font-size: 13.5px; }
  .nav-cta { gap: 6px; }
  .lang-switch { padding: 8px 8px; }
}

/* footer: θεσμικοί σύνδεσμοι (Λευκάδα) */
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 6px; font-size: 13px; }
.fl-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
.fl-links a { color: rgba(255,255,255,.8); text-decoration: none; }
.fl-links a:hover { color: #fff; text-decoration: underline; }
.fl-wcag { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.6); font-size: 12.5px; margin-bottom: 10px; }
/* Το `wcag-aa.png` δεν υπήρχε ποτέ — ούτε στο repo ούτε στον server (404 και
   στο staging), οπότε το υποσέλιδο έδειχνε σπασμένη εικόνα σε ΚΑΘΕ σελίδα.
   Εδώ μπαίνει ετικέτα δική μας, χωρίς εξωτερικό αρχείο. ΔΕΝ είναι το επίσημο
   σήμα του AChecker (εκείνο το εκδίδει ο AChecker): είναι η δήλωση
   συμμόρφωσης του Δήμου, που ζει ήδη στο υποσέλιδο δίπλα. */
.fl-wcag-badge {
  display: inline-block; background: #fff; color: var(--gov);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
}
.fl-wcag-badge b { font-weight: 800; }
.fl-credit { margin: 0; color: rgba(255,255,255,.55); font-size: 12.5px; }

/* ============================================================
   Προσβασιμότητα — WCAG 2.1 AA (7ος γύρος QA)
   ============================================================ */

/* 2.4.7 Focus Visible: το θέμα βασιζόταν στο προεπιλεγμένο δαχτυλίδι του
   browser, και στο πεδίο αναζήτησης του hero το έσβηνε ρητά (outline: 0).
   Ένα ενιαίο, ευδιάκριτο δαχτυλίδι σε ΟΛΑ τα εστιάσιμα στοιχεία.
   Το :focus-visible δεν εμφανίζεται στο κλικ με ποντίκι, μόνο στο πληκτρολόγιο. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Πάνω σε σκούρο φόντο (hero, μπάντες, υποσέλιδο) το teal-deep χάνεται. */
.hero :where(a, button, input):focus-visible,
.dimos-band :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: #fff;
}
/* Το πεδίο του hero έσβηνε το outline. Μένει καθαρό στην ηρεμία, δείχνει στην εστίαση. */
.hero-search input[type="search"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Ο browser που δεν ξέρει :focus-visible κρατά το δικό του :focus — δεν το σβήνουμε πουθενά. */

/* 1.4.11 Non-text Contrast: το --line (#d9e3ea) δίνει 1,30:1 πάνω στο λευκό.
   Για ΔΙΑΚΟΣΜΗΤΙΚΟ περίγραμμα κάρτας είναι αποδεκτό· για το περίγραμμα ενός
   πεδίου φόρμας, που είναι η μόνη ένδειξη πού πατάς, θέλει 3:1.
   Το #6f7f8b δίνει 4,13:1 — με περιθώριο. */
input[type="search"], input[type="text"], input[type="date"], input[type="number"],
input[type="email"], select, textarea {
  border-color: var(--line-field);
}

/* 1.3.1 Πίνακες δεδομένων: η κεφαλίδα που προσθέτει το page-epikoinonia.php
   πρέπει και να φαίνεται ως κεφαλίδα. */
.content table th, .dir-table th {
  text-align: start; background: var(--cream); color: var(--ink);
  font-weight: 700; border-bottom: 2px solid var(--line-field);
}

/* Αναζήτηση ανά αριθμό απόφασης στο πλαϊνό φίλτρο των αρχείων οργάνων. */
.filter-apof { display: flex; gap: 8px; }
.filter-apof input { flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--line-field);
  border-radius: 9px; font-family: var(--font-body); font-size: 14.5px; background: #fff; color: var(--ink); }
.filter-apof .btn { padding: 9px 14px; font-size: 13px; white-space: nowrap; }

/* --- Δημοτικές Ενότητες — tabs + village cards (29/09/2026, §6) --- */
.de-wrap { padding-top: 36px; padding-bottom: 70px; }

/* tabs */
.de-tabs-bar {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--line); margin-bottom: 28px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.de-tabs-bar::-webkit-scrollbar { display: none; }
.de-tab-btn {
  padding: 12px 20px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--ink-soft); white-space: nowrap; flex: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, background .15s;
}
.de-tab-btn:hover { color: var(--teal-deep); background: var(--teal-soft); }
.de-tab-btn.active { color: var(--teal-deep); border-bottom-color: var(--teal); }

/* panels */
.de-tab-panel { display: none; }
.de-tab-panel.active { display: block; }

/* unit meta bar */
.de-unit-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px; font-size: 14px; color: var(--ink-soft);
}
.de-unit-meta strong { color: var(--ink); font-size: 16px; }
.de-unit-meta a { color: var(--teal-deep); font-weight: 600; text-decoration: none; margin-left: auto; }
.de-unit-meta a:hover { text-decoration: underline; }

/* village card grid */
.de-village-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 960px) { .de-village-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .de-village-grid { grid-template-columns: 1fr; } }

/* base card — with photo */
.de-village-card {
  background-color: var(--teal-deep);
  background-size: cover; background-position: center;
  border-radius: 14px; overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column;
  justify-content: flex-end; min-height: 210px; position: relative;
  transition: box-shadow .2s, transform .2s;
}
.de-village-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}
.de-village-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.18); transform: translateY(-3px); }

/* plain fallback — no photo */
.de-village-card--plain {
  background: #e6f2f7; justify-content: center; align-items: center;
  text-align: center; gap: 14px; padding: 28px 16px 20px;
}
.de-village-card--plain::after { display: none; }
.de-village-card--plain .de-village-card-icon { color: var(--teal); flex: none; }
.de-village-card--plain .de-village-card-title { color: var(--teal-deep); padding: 0; font-size: 15px; }
.de-village-card--plain .de-village-card-more { color: var(--teal); padding: 0; margin-top: 0; }
.de-village-card--plain:hover { background: #cde5ef; box-shadow: 0 4px 18px rgba(0,0,0,.08); }

/* card text (over photo) */
.de-village-card-icon { position: relative; z-index: 1; }
.de-village-card-title {
  position: relative; z-index: 1; padding: 0 14px 4px;
  font-weight: 700; font-size: 15px; color: #fff; line-height: 1.3;
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.de-village-card-more {
  position: relative; z-index: 1; padding: 0 14px 16px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9);
}

/* Δ.Ε. overview card badge */
.de-village-card-badge {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  background: var(--teal); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
}
.de-village-card--unit.de-village-card--plain .de-village-card-badge {
  position: static; align-self: center;
  background: var(--teal-soft); color: var(--teal-deep);
}

/* plain content (Κάλαμος, Καστός) */
.de-plain-content { max-width: 760px; }

/* --- Πολιτιστικές Εκδηλώσεις: accordion με PDF viewer, §9 28/09/2026 --- */
.pek-wrap { max-width: 900px; padding: 36px 22px 70px; }
.pek-accordion { display: flex; flex-direction: column; gap: 10px; }
.pek-item { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.pek-item[open] { border-color: var(--teal); }
.pek-summary {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  cursor: pointer; list-style: none; user-select: none;
  background: var(--surface); font-weight: 600; font-size: 16px;
}
.pek-summary::-webkit-details-marker { display: none; }
.pek-item[open] .pek-summary { background: var(--teal-soft); }
.pek-summary:hover { background: var(--teal-soft); }
.pek-icon { flex-shrink: 0; color: var(--teal-deep); }
.pek-title { flex: 1; }
.pek-year { font-size: 13px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.pek-chevron { font-size: 18px; color: var(--ink-soft); transition: transform .2s; }
.pek-item[open] .pek-chevron { transform: rotate(180deg); }
.pek-body { padding: 20px 20px 24px; border-top: 1px solid var(--line); }
.pek-pdf-wrap { margin-bottom: 12px; border-radius: 8px; overflow: hidden; background: #f4f4f4; }
.pek-pdf-obj { display: block; width: 100%; height: 620px; border: 0; }
.pek-pdf-fallback { padding: 40px; text-align: center; }
.pek-pdf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pek-more { font-size: 13px; margin-top: 8px; }
.pek-more a { color: var(--teal-deep); }
@media (max-width: 600px) {
  .pek-summary { font-size: 14px; padding: 13px 14px; gap: 8px; }
  .pek-pdf-obj { height: 360px; }
  .pek-pdf-actions { flex-direction: column; }
}

/* --- Αγγλικό τμήμα (/en/): λιτή κεφαλίδα και υποσέλιδο, 28/09/2026 --- */
.is-en .header-inner { justify-content: space-between; }
.nav-cta-en { margin-left: auto; }
.is-en .brand-name small { display: block; }
.footer-main--en { grid-template-columns: 1.4fr 1fr; padding-bottom: 28px; }
@media (max-width: 600px) { .footer-main--en { grid-template-columns: 1fr; } }
.footer-main--en .footer-brand { margin-bottom: 0; }
.site-footer .footer-contact a { color: #cfd8de; }
.site-footer .footer-contact a:hover { color: #fff; text-decoration: underline; }

/* --- Header: ελαφρύ παντού, διάφανο πάνω από το hero στην αρχική (28/10) --- */
.site-header { background: rgba(255,255,255,.86); border-bottom-color: rgba(0,0,0,.05); }
.main-nav a { font-weight: 600; }
.home .site-header {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.home .site-header.is-solid, .home.nav-open .site-header {
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(20,40,60,.08);
}
.home .site-header:not(.is-solid) .header-inner { min-height: 96px; }
.home:not(.nav-open) .site-header:not(.is-solid) .brand,
.home:not(.nav-open) .site-header:not(.is-solid) .brand-name small,
.home:not(.nav-open) .site-header:not(.is-solid) .main-nav > ul > li > a,
.home:not(.nav-open) .site-header:not(.is-solid) .nav-toggle { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.home:not(.nav-open) .site-header:not(.is-solid) .main-nav > ul > li > a:hover { background: rgba(255,255,255,.14); color: #fff; }
.home:not(.nav-open) .site-header:not(.is-solid) .lang-switch,
.home:not(.nav-open) .site-header:not(.is-solid) .nav-search-btn {
  color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
}
.home:not(.nav-open) .site-header:not(.is-solid) .brand img { filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.home .site-header:not(.is-solid) .main-nav .sub-menu a { color: var(--ink); text-shadow: none; }
.home .hero { min-height: 640px; }
.home .hero-content { padding-top: 130px; }
@media (max-width: 1024px) { .home .hero-content { padding-top: 110px; } }
/* Πιλοτική: διακριτική ταινία στο hero + σημείωση στο υποσέλιδο */
.pilot-ribbon {
  position: absolute; z-index: 3; right: 22px; top: 108px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: rgba(16,26,34,.38); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-decoration: none; opacity: .85;
}
@media (max-width: 640px) { .pilot-ribbon { right: 12px; top: 92px; font-size: 11px; padding: 5px 10px; } }
.fl-pilot { color: rgba(255,255,255,.55); font-size: 12px; }
.fl-pilot::before { content: "\2022"; margin: 0 8px 0 2px; }

/* --- Hero: διαστάσεις και glassbox όπως mytilene.gr (28/10) --- */
.home .hero { min-height: 0; height: 700px; }
.home .hero-content { padding-top: 96px; padding-bottom: 60px; max-width: 760px; }
.hero-glass {
  max-width: 660px; margin: 0 auto;
  padding: 26px 34px 30px; border-radius: 24px;
  background: rgba(22, 46, 63, .40);
  backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.hero-glass h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; margin: 0 0 4px; text-shadow: 0 2px 4px rgba(0,0,0,.48); }
.hero-sub { font-size: 17px; font-weight: 400; opacity: 1; margin: 0 0 18px; text-shadow: 0 2px 4px rgba(0,0,0,.48); }
.hero-search { max-width: 560px; }
.search-mode { margin-bottom: 12px; }
.hero-search form { padding: 5px; }
.hero-search input[type="search"] { padding: 9px 18px; font-size: 15.5px; }
.hero-search button[type="submit"] { width: 42px; height: 42px; }
.gov-hero-btn { margin-top: 14px; font-size: 15px; padding: 8px 20px 8px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.pilot-ribbon { top: 110px; }
@media (max-width: 768px) {
  .home .hero { height: 560px; }
  .home .hero-content { padding-top: 90px; }
  .hero-glass { padding: 16px 18px 20px; border-radius: 18px; width: calc(100% - 8px); }
  .hero-glass h1 { font-size: 26px; }
  .hero-sub { font-size: 15px; }
  .gov-hero-btn { font-size: 12px; padding: 7px 14px 7px 10px; }
}
/* Κινητό/tablet (≤1024): το header μένει συμπαγές (burger), όχι διάφανο */
@media (max-width: 1024px) {
  /* κρατάμε το fixed header + body padding της ομάδας (βλ. παραπάνω), μόνο συμπαγές φόντο */
  .home .site-header { background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); }
  .home .site-header:not(.is-solid) .header-inner { min-height: 72px; }
  .home:not(.nav-open) .site-header:not(.is-solid) .brand,
  .home:not(.nav-open) .site-header:not(.is-solid) .brand-name small,
  .home:not(.nav-open) .site-header:not(.is-solid) .main-nav > ul > li > a,
  .home:not(.nav-open) .site-header:not(.is-solid) .nav-toggle { color: var(--ink); text-shadow: none; }
  .home:not(.nav-open) .site-header:not(.is-solid) .lang-switch,
  .home:not(.nav-open) .site-header:not(.is-solid) .nav-search-btn { color: var(--ink); border-color: var(--line); background: transparent; backdrop-filter: none; }
  .home:not(.nav-open) .site-header:not(.is-solid) .brand img { filter: none; }
  .home .hero-content { padding-top: 54px; }
  .pilot-ribbon { top: 14px; right: 14px; }
}
/* Μενού: μεγαλύτερα λεκτικά (χωρίς το chip «Πιλοτική» υπάρχει χώρος) */
.main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 14.5px; padding: 10px 9px; }
.main-nav .sub-menu a { font-size: 14.5px; }
.brand-name { font-size: 16px; }
@media (max-width: 1260px) { .main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 13.5px; padding: 10px 7px; } }
@media (max-width: 1180px) { .main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 13px; padding: 10px 6px; } .brand-name { font-size: 15px; } }
/* Λογότυπο ακόμη μεγαλύτερο (desktop) */
@media (min-width: 1025px) {
  .brand img { width: 92px; height: 92px; }
  .header-inner { min-height: 100px; }
  .home .site-header:not(.is-solid) .header-inner { min-height: 108px; }
  .pilot-ribbon { top: 122px; }
}
/* Μενού: κλιμάκωση ώστε να χωρά με το λογότυπο 92px (1366: 14px/7px) */
.main-nav { flex: 1 1 auto; min-width: 0; }
.main-nav > ul, .main-nav > div > ul { justify-content: center; }
.nav-cta { flex: none; }
@media (min-width: 1025px) and (max-width: 1440px) {
  .main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 14px; padding: 10px 7px; }
  .brand-name { font-size: 15px; }
  .brand { gap: 10px; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 13px; padding: 10px 5px; }
  .brand img { width: 80px; height: 80px; }
}

/* --- Έργα ΕΣΠΑ: λωρίδα αρχικής + σελίδα-κόμβος (28/10) --- */
.espa-band { position: relative; overflow: hidden; color: #fff; background: linear-gradient(100deg, #0b2a6b 0%, #113f8f 48%, var(--teal-deep) 100%); }
.espa-band::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,204,0,.22), transparent 60%); pointer-events: none; }
.espa-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 34px; flex-wrap: wrap; padding-top: 48px; padding-bottom: 48px; }
.espa-text { flex: 1 1 520px; max-width: 760px; }
.espa-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd24a; margin-bottom: 8px; }
.espa-band h2 { font-family: var(--font-serif); font-size: clamp(22px, 3vw, 32px); margin: 0 0 8px; }
.espa-band p { margin: 0 0 16px; opacity: .9; font-size: 15px; max-width: 640px; }
.espa-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.espa-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); transition: .18s; }
.espa-chips a:hover { background: rgba(255,255,255,.24); }
.espa-chips a b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #ffd24a; color: #0b2a6b; }
.espa-logo { flex: none; display: block; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.espa-logo img { display: block; width: 320px; max-width: 70vw; height: auto; }
/* σελίδα-κόμβος */
.espa-hub { padding: 36px 0 70px; }
.espa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.espa-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: .18s; }
.espa-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow); }
.espa-card .ec-type { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); }
.espa-card b { font-size: 16px; line-height: 1.3; }
.espa-card span { font-size: 13.5px; color: var(--ink-soft); }
.espa-card .ec-count { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--teal-deep); font-weight: 600; }
.espa-hub .espa-logo { display: inline-block; margin-top: 26px; border: 1px solid var(--line); box-shadow: none; }
@media (max-width: 760px) { .espa-inner { padding-top: 36px; padding-bottom: 36px; } .espa-logo { width: 100%; text-align: center; } .espa-logo img { margin: 0 auto; } }

/* --- Hero κοντύτερο, glassbox 660 όπως mytilene.gr (28/10) --- */
.home .hero { height: 640px; }
.home .hero-content { padding-top: 80px; padding-bottom: 70px; }
.hero-glass { width: min(660px, 100%); padding: 22px 32px 24px; }
.hero-glass h1 { margin: 0 0 2px; }
.hero-sub { margin: 0 0 12px; }
.search-mode { margin-bottom: 10px; }
.gov-hero-btn { margin-top: 10px; }
.hero-scroll { display: none; }
/* --- Πάνελ νέων (αντικαθιστά το ticker) --- */
.news-panel { position: relative; z-index: 3; margin-top: -26px; background: var(--paper); border-radius: 30px 30px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.12); padding: 26px 0 10px; }
.np-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.np-head h2 { font-family: var(--font-serif); font-size: 22px; margin: 0; }
.np-ctl { display: flex; align-items: center; gap: 8px; }
.np-all { font-weight: 600; font-size: 14px; color: var(--teal-deep); text-decoration: none; margin-right: 8px; }
.np-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.np-btn:hover { border-color: var(--teal); color: var(--teal-deep); }
.np-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.np-track::-webkit-scrollbar { display: none; }
.np-card { display: flex; gap: 14px; scroll-snap-align: start; min-height: 128px; }
.np-img { flex: none; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; background: #eef2f6; display: grid; place-items: center; color: var(--teal); }
.np-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-body { display: flex; flex-direction: column; min-width: 0; }
.np-date { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.np-title { font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.np-title:hover { color: var(--teal-deep); }
.np-more { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--teal-deep); text-decoration: none; }
@media (max-width: 992px) { .np-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .np-track { grid-auto-columns: 88%; } .news-panel { border-radius: 20px 20px 0 0; margin-top: -18px; } .np-head h2 { font-size: 19px; } }

.home .hero-content { width: min(760px, 100%); }
.np-img img { opacity: .92; }

/* νέα: ουδέτερα πλακίδια */
.np-ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; }
.np-c0 { background: linear-gradient(135deg, #1b6f8f, #4f8a7b); }
.np-c1 { background: linear-gradient(135deg, #d19a2e, #b3772a); }
.np-c2 { background: linear-gradient(135deg, #1f3d52, #1b6f8f); }
.np-c3 { background: linear-gradient(135deg, #0f5068, #2a9bb8); }
.np-c4 { background: linear-gradient(135deg, #4f8a7b, #2e6b70); }
.np-c5 { background: linear-gradient(135deg, #5b6b7a, #31424f); }
.np-c6 { background: linear-gradient(135deg, #113f8f, #1b6f8f); }
/* --- Φόρμα Άμεσης Επικοινωνίας --- */
.cpf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; padding-top: 30px; padding-bottom: 70px; align-items: start; }
@media (max-width: 960px) { .cpf-layout { grid-template-columns: 1fr; } }
.cpf-side { display: grid; gap: 14px; }
.cpf-side .filter-box p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.cpf-side .filter-box ul li { padding: 5px 0; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.cpf-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; } .cpf-steps li { margin-bottom: 8px; }
.cpf-alt { background: var(--teal-soft); border-color: var(--teal-soft); }
.cpf { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px; }
.cpf-intro { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.cpf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.cpf-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.cpf-field i { color: #b32d2e; font-style: normal; }
.cpf-field input, .cpf-field select, .cpf-field textarea { font: inherit; font-weight: 400; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.cpf-field input:focus, .cpf-field select:focus, .cpf-field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.cpf-wide { grid-column: 1 / -1; }
.cpf-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.cpf-check input { margin-top: 3px; width: 18px; height: 18px; }
.cpf-check i { color: #b32d2e; font-style: normal; }
.cpf-hp { position: absolute; left: -9999px; }
.cpf-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: #fde8e8; color: #8a1f1f; font-size: 14px; }
.cpf-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.cpf-note { font-size: 13px; color: var(--ink-soft); }
.cpf-done { text-align: center; padding: 26px 10px; color: var(--teal-deep); }
.cpf-done h3 { margin: 10px 0 6px; font-size: 22px; } .cpf-done p { margin: 0 0 6px; color: var(--ink); font-size: 15px; }
.cpf-ticket { font-size: 20px; letter-spacing: .04em; background: var(--teal-soft); padding: 2px 10px; border-radius: 8px; }
.cpf-small { font-size: 13px !important; color: var(--ink-soft) !important; }
@media (max-width: 640px) { .cpf { padding: 20px 18px; } .cpf-grid { grid-template-columns: 1fr; } }
.cpf-cta { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 26px; padding: 20px 24px; border-radius: var(--radius); background: linear-gradient(100deg, var(--teal-deep), var(--teal)); color: #fff; }
.cpf-cta b { font-size: 17px; display: block; } .cpf-cta span { font-size: 14px; opacity: .9; }

/* --- Header: μόνο λογότυπο (χωρίς λεκτικό), χωρίς e-Υπηρεσίες, μεγαλύτερο (28/10) --- */
@media (min-width: 1025px) {
  .brand img { width: 112px; height: 112px; }
  .header-inner { min-height: 112px; gap: 18px; }
  .home .site-header:not(.is-solid) .header-inner { min-height: 124px; }
  .main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 15px; padding: 10px 11px; }
  .pilot-ribbon { top: 136px; }
  .home .hero-content { padding-top: 96px; }
}
@media (min-width: 1025px) and (max-width: 1280px) { .brand img { width: 96px; height: 96px; } .main-nav > ul > li > a, .main-nav > div > ul > li > a { font-size: 14px; padding: 10px 8px; } }
@media (max-width: 1024px) { .brand img { width: 64px; height: 64px; } }
@media (max-width: 480px) { .brand img { width: 56px; height: 56px; } }

/* --- Λογότυπο: λευκό λεκτικό όταν το header είναι διάφανο (αρχική) --- */
.brand .logo-light { display: none; }
@media (min-width: 1025px) {
  .home:not(.nav-open) .site-header:not(.is-solid) .brand .logo-dark { display: none; }
  .home:not(.nav-open) .site-header:not(.is-solid) .brand .logo-light { display: block; }
}
/* --- Νέα: ουδέτερα πλακίδια-σχήματα αντί για χρώματα --- */
.np-ph { color: #31424f; background-size: cover; background-position: center; }
.np-c0 { background: #e8eef3 url(../img/news/ph-0.svg) center/cover; }
.np-c1 { background: #e8eef3 url(../img/news/ph-4.svg) center/cover; }
.np-c2 { background: #e8eef3 url(../img/news/ph-5.svg) center/cover; }
.np-c3 { background: #e8eef3 url(../img/news/ph-2.svg) center/cover; }
.np-c4 { background: #e8eef3 url(../img/news/ph-3.svg) center/cover; }
.np-c5 { background: #e8eef3 url(../img/news/ph-1.svg) center/cover; }
.np-c6 { background: #e8eef3 url(../img/news/ph-6.svg) center/cover; }
/* Διάφανο header: πολύ απαλό σκούρο scrim ώστε να διαβάζονται τα λευκά λεκτικά */
@media (min-width: 1025px) {
  .home .site-header:not(.is-solid) { background: linear-gradient(180deg, rgba(8, 24, 40, .42) 0%, rgba(8, 24, 40, .18) 70%, rgba(8, 24, 40, 0) 100%); }
  .home:not(.nav-open) .site-header:not(.is-solid) .main-nav > ul > li > a { text-shadow: 0 1px 6px rgba(0,0,0,.45); }
}
/* Scrim ως ψευδοστοιχείο: ψηλό, απαλό fade (όχι «γραμμή» στο ύψος του header) */
@media (min-width: 1025px) {
  .home .site-header:not(.is-solid) { background: transparent; overflow: visible; }
  .home .site-header:not(.is-solid)::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 24, 40, .55) 0%, rgba(8, 24, 40, .28) 45%, rgba(8, 24, 40, 0) 100%);
  }
}

/* --- Νέα ψηφιακή παρουσία (page-nea-psifiaki-parousia.php) --- */
.mayor-card .btn + .btn { margin-left: 8px; }
.mayor-card .btn .dic { vertical-align: -3px; margin-right: 4px; }
.ndp { padding: 34px 0 70px; }
.ndp-intro { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px; margin-bottom: 40px; }
.ndp-intro img { width: 200px; border-radius: 14px; display: block; }
.ndp-intro p { margin: 0 0 14px; line-height: 1.65; font-size: 15.5px; }
.ndp-lead { font-family: var(--font-serif); font-size: 19px !important; line-height: 1.5 !important; color: var(--slate-deep); }
.ndp-sign { color: var(--ink-soft); font-size: 14px !important; margin: 0 !important; }
.ndp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 18px 0 44px; }
.ndp-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: .18s; }
.ndp-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow); }
.ndp-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-deep); }
.ndp-card b { font-size: 16px; line-height: 1.3; } .ndp-card span:last-child { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.ndp-soon { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; background: linear-gradient(100deg, var(--slate-deep), var(--teal-deep)); color: #fff; border-radius: var(--radius); padding: 34px 38px; }
.ndp-soon h2 { font-family: var(--font-serif); margin: 0 0 8px; font-size: 26px; } .ndp-soon p { margin: 0 0 14px; opacity: .9; }
.ndp-soon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ndp-soon li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; } .ndp-soon li .dic { flex: none; margin-top: 3px; color: #ffd24a; }
.ndp-cta { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 22px; display: grid; gap: 10px; }
.ndp-cta p { margin: 0 0 4px; }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }
@media (max-width: 860px) { .ndp-intro { grid-template-columns: 1fr; } .ndp-intro img { width: 140px; } .ndp-soon { grid-template-columns: 1fr; padding: 26px 22px; } }

/* --- Αρχική: μεγέθη και hover κατά τις παρατηρήσεις του Δήμου (30/10) --- */
/* Ο Δήμος: μεγαλύτερο βελάκι (η συμπεριφορά στο hover μένει ίδια) */
.dimos-links a::after { font-size: 26px; line-height: 1; }
/* Γρήγορες Υπηρεσίες: μεγαλύτερα κείμενα μέσα στα κουτάκια */
.needto-card b { font-size: 16px; }
.needto-card span { font-size: 14px; line-height: 1.45; }
/* Τελευταία νέα κάτω από το hero: εμφανές hover σε όλη την κάρτα */
/* χωρίς αρνητικό margin: το .np-track έχει overflow-x και θα έκοβε την πρώτη κάρτα */
.np-card { border-radius: 12px; padding: 6px; transition: background .18s ease; }
.np-card:hover { background: var(--teal-soft); }
.np-img { transition: transform .18s ease, box-shadow .18s ease; }
.np-card:hover .np-img { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,40,60,.14); }
.np-card:hover .np-title, .np-title:focus-visible { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.np-card:hover .np-more { text-decoration: underline; }

/* --- Header: μικραίνει μαζί με το λογότυπο όταν κυλά η σελίδα (.is-scrolled από το main.js) --- */
.site-header .header-inner, .site-header .brand img { transition: min-height .25s ease, width .25s ease, height .25s ease; }
@media (min-width: 1025px) {
  .site-header.is-scrolled .header-inner { min-height: 76px; }
  .site-header.is-scrolled .brand img { width: 64px; height: 64px; }
}
@media (max-width: 1024px) {
  .site-header.is-scrolled .header-inner { min-height: 64px; }
  .site-header.is-scrolled .brand img { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .header-inner, .site-header .brand img { transition: none; }
}
/* ---- Πλοήγηση ενότητας (inc/section-nav.php): αδελφές σελίδες + Προηγούμενο/Επόμενο ---- */
.sec-nav { background: #fff; border-bottom: 1px solid var(--line); }
.sec-nav .container { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.sec-nav .container::-webkit-scrollbar { display: none; }
.sec-nav-label { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; padding-right: 14px; border-right: 1px solid var(--line); }
.sec-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sec-nav a { display: block; white-space: nowrap; padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--teal-deep); background: var(--teal-soft); text-decoration: none; transition: background .15s, color .15s; }
.sec-nav a:hover { background: var(--teal); color: #fff; }
.sec-nav li.current a { background: var(--teal-deep); color: #fff; }
.sec-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.sec-pager a { display: block; max-width: 48%; text-decoration: none; color: var(--ink); }
.sec-pager a small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.sec-pager a b { font-size: 16px; color: var(--teal-deep); }
.sec-pager a:hover b { text-decoration: underline; }
.sec-pager .sp-next { text-align: right; margin-left: auto; }
.cpf-cta-solo { justify-content: center; padding: 16px 24px; }
@media (max-width: 640px) { .sec-nav-label { display: none; } .sec-pager a b { font-size: 15px; } }
.gov-hub .hub-group { margin-top: 40px; }
.filter-box li.current a { font-weight: 700; color: var(--teal-deep); }
.diavgeia-band { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 18px; padding: 20px 26px; background: #fff; border: 1px solid var(--line); border-left: 6px solid #1f6fb2; border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: .18s; }
.diavgeia-band:hover { box-shadow: var(--shadow); border-color: #1f6fb2; }
.diavgeia-band img { flex: none; width: 172px; height: 48px; }
.diavgeia-band .db-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.diavgeia-band .db-text b { font-size: 17px; }
.diavgeia-band .db-text span { font-size: 14px; color: var(--ink-soft); }
.diavgeia-band .btn { flex: none; }