/*
 * Κύριο μενού 2026 — εμφάνιση.
 *
 * ΣΧΕΔΙΑΣΤΙΚΗ ΑΡΧΗ: η ΔΟΜΗ είναι του mockup, η ΕΜΦΑΝΙΣΗ είναι η υπάρχουσα —
 * αυτή που δείχνει και το Figma (Αρχικη.svg: το header του Figma είναι στιγμιότυπο
 * του σημερινού site). Δεν εισάγεται νέα παλέτα. Όλες οι τιμές παρακάτω είναι
 * μετρημένες από το ζωντανό site (computed styles του Ubermenu nav) και από το
 * scss/3-components/_header-new.scss, ώστε το νέο μενού να μη ξεχωρίζει:
 *
 *   header.main            #fff, 100px, border-bottom 1px #5072ed
 *   wrapper                1250px, grid 120px 1fr auto, gap 20px
 *   top-level              Manrope 13px/700, uppercase, ls .5px, #0A1F33, radius 6px
 *   panel                  #fff, padding 32px 0 24px, shadow 0 12px 32px rgba(10,31,51,.12)
 *   επικεφαλίδα στήλης     13px/800 uppercase, ls .08em, #5B6B7C, border-bottom #E9E9E9
 *   σύνδεσμος              15px/500, #0A1F33, hover #F3F8FD
 *   #minihead              #2572b5 — δεν το αγγίζουμε, μένει ως είναι
 */

/* Το θέμα δίνει box-sizing: content-box στα <a>. Χωρίς αυτό το reset, το
   min-height: 44px προσθέτει και το padding, και το CTA βγαίνει 65px ενώ τα
   κουμπιά 44px — δηλαδή ανομοιόμορφη μπάρα. */
.nav2026,
.nav2026 *,
.nav2026 *::before,
.nav2026 *::after,
.nav2026__burger,
.nav2026__burger *,
.nav2026__drawer,
.nav2026__drawer * {
  box-sizing: border-box;
}

/*
 * Τα tokens του υπάρχοντος header, ονοματισμένα.
 *
 * Δηλώνονται στο :root και όχι στο .nav2026, γιατί το burger και το drawer είναι
 * ΑΔΕΛΦΑ του .nav2026, όχι παιδιά του: όσο τα tokens ζούσαν στο .nav2026, κάθε
 * var(--n26-…) μέσα στο drawer ήταν άκυρη και οι δηλώσεις έπεφταν σιωπηλά (το
 * ενεργό τμήμα του διακόπτη γλώσσας έμενε άχρωμο στο κινητό).
 *
 * Το πρόθεμα --n26- κρατά την απομόνωση: κανένα άλλο στοιχείο του site δεν
 * διαβάζει αυτές τις μεταβλητές.
 */
:root {
  --n26-ink: #0A1F33;
  --n26-ink-2: #33475B;
  --n26-ink-3: #5B6B7C;
  --n26-brand: #2572b5;
  /* Το μπλε του #minihead: το «χρώμα του δήμου» στο υπάρχον design. */
  --n26-brand-dark: #06355F;
  --n26-tint: #F3F8FD;
  --n26-tint-2: #E4F0FA;
  --n26-line: #D7E0E8;
  --n26-line-soft: #E9E9E9;
  --n26-radius: 6px;
  --n26-shadow: 0 12px 32px rgba(10, 31, 51, .12), 0 4px 8px rgba(10, 31, 51, .06);
  --n26-fs-top: 13px;
  --n26-fs-leaf: 15px;
  --n26-fs-fly: 14px;
}

.nav2026 {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: Manrope, sans-serif;
}

/* Με το μενού 2026 ενεργό, το παλιό hamburger toggle του θέματος φεύγει.
   Το markup του μένει στο header.php ως εφεδρεία (βλ. includes/nav-2026.php). */
.has-nav2026 #responsive-menu-toggle {
  display: none;
}

/* ============================================================
   1. Μπάρα — top level
   ============================================================ */
.nav2026__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  width: 100%;
}

/* ΟΧΙ position:relative εδώ. Το mega panel θέλει ως σημείο αναφοράς το .nav2026,
   για να πιάνει όλο το πλάτος της στήλης του nav (μετρημένο: 1090px μέσα στο
   wrapper των 1250px) — ίδια γεωμετρία με το σημερινό panel του Ubermenu. */
.nav2026__item {
  position: static;
}

.nav2026__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Ίδιο padding με το σημερινό .ubermenu-target (10.4px 28px 10.4px 11.2px),
     γραμμένο σε rem. Το δεξί είναι μεγαλύτερο για να χωράει το βελάκι. */
  padding: .65rem .7rem;
  min-height: 44px;
  /* 44px: στόχος αφής κατά WCAG 2.5.8 — το κρατάμε παντού. */
  border: 0;
  background: transparent;
  color: var(--n26-ink);
  font-family: inherit;
  font-size: var(--n26-fs-top);
  font-weight: 700;
  letter-spacing: .5px;
  /* Τα σημερινά items είναι κεφαλαία (και στη βάση και στο Figma). Τα λεκτικά
     του mockup είναι πεζά, οπότε τα κεφαλαία μπαίνουν από το CSS: κρατάμε την
     εμφάνιση χωρίς να χαλάσουμε τα λεκτικά ή την αναγνωσιμότητα στο screen reader. */
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--n26-radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.nav2026__link:hover,
.nav2026__link:focus-visible,
.nav2026__link[aria-expanded="true"] {
  background: var(--n26-tint);
  color: var(--n26-brand-dark);
}

.nav2026__chev {
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.nav2026__link[aria-expanded="true"] .nav2026__chev {
  transform: rotate(180deg);
}

/* CTA — «Ηλεκτρονικές Υπηρεσίες». Χρησιμοποιεί το μπλε του #minihead, δηλαδή
   χρώμα που υπάρχει ήδη στο site· δεν εισάγεται νέο. */
.nav2026__link--cta {
  background: var(--n26-brand);
  color: #fff;
  padding-left: 1rem;
  padding-right: 1rem;
}

.nav2026__link--cta:hover,
.nav2026__link--cta:focus-visible {
  background: var(--n26-brand-dark);
  color: #fff;
}

/* ── Διακόπτης γλώσσας ───────────────────────────────────────────────────────
   Σχεδιασμός κατά το mockup (.lang, γρ. 99-104 του lefkada-portal-mockup (1)):
   pill container με border-radius 999px και overflow hidden, δύο τμήματα
   δίπλα-δίπλα, το ενεργό γεμάτο. Στο mockup κάθεται σε σκούρα μπάρα, οπότε
   εκεί το περίγραμμα είναι ημιδιαφανές λευκό και το ενεργό λευκό. Εδώ κάθεται
   στη λευκή μπάρα του υπάρχοντος header, άρα οι ίδιοι ρόλοι με τα χρώματα του
   site: περίγραμμα --n26-line, ενεργό γεμάτο στο μπλε του δήμου. */
.nav2026__lang {
  display: flex;
  align-items: stretch;
  margin-left: .5rem;
  border: 1px solid var(--n26-line);
  border-radius: 999px;
  overflow: hidden;
}

.nav2026__langseg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 34px;
  padding: .35rem .75rem;
  background: none;
  color: var(--n26-ink-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

a.nav2026__langseg:hover,
a.nav2026__langseg:focus-visible {
  background: var(--n26-tint);
  color: var(--n26-brand-dark);
}

/* Η τρέχουσα γλώσσα: γεμάτη, όπως το [aria-pressed="true"] του mockup. */
.nav2026__langseg.is-current {
  background: var(--n26-brand);
  color: #fff;
  cursor: default;
}

/* Στο drawer: πλήρες πλάτος, με ολόκληρα τα ονόματα των γλωσσών. */
.nav2026__lang--drawer {
  margin: .75rem 0 0;
}

.nav2026__lang--drawer .nav2026__langseg {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
}

/* ============================================================
   2. Mega panel — επίπεδο 2 (στήλες) και 3 (σύνδεσμοι)
   ============================================================ */
.nav2026__mega {
  position: absolute;
  top: 100%;
  left: 0;
  /* Πλάτος όσο η στήλη του nav μέσα στο 1250px wrapper — ίδια συμπεριφορά με
     το σημερινό panel του Ubermenu (μετρημένο: 1090px, left 0). */
  width: 100%;
  min-width: 640px;
  z-index: 120;
  background: #fff;
  border-top: 1px solid var(--n26-line);
  border-bottom: 1px solid var(--n26-line);
  box-shadow: var(--n26-shadow);
  padding: 2rem 0 1.5rem;
}

.nav2026__mega[hidden] {
  display: none;
}

.nav2026__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding: 0 1.25rem;
}

.nav2026__grid[data-cols="1"] {
  grid-template-columns: minmax(0, 22rem);
}

.nav2026__grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav2026__coltitle {
  margin: 0 0 .5rem;
  padding: 0 .6rem .75rem;
  border-bottom: 1px solid var(--n26-line-soft);
  font-size: var(--n26-fs-top);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--n26-ink-3);
}

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

.nav2026__coltitle a:hover,
.nav2026__coltitle a:focus-visible {
  color: var(--n26-brand-dark);
  text-decoration: underline;
}

.nav2026__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav2026__col li {
  position: relative;
}

.nav2026__leaf,
.nav2026__text {
  display: block;
  padding: .55rem .6rem;
  min-height: 40px;
  border-radius: var(--n26-radius);
  color: var(--n26-ink);
  font-size: var(--n26-fs-leaf);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.nav2026__text {
  color: var(--n26-ink-3);
}

a.nav2026__leaf:hover,
a.nav2026__leaf:focus-visible {
  background: var(--n26-tint);
  color: var(--n26-brand-dark);
}

.nav2026__ext {
  font-size: .8em;
  opacity: .75;
}

/* ============================================================
   3. Flyout — επίπεδα 4-5 (χωριά, έτη, προγράμματα)
   Εδώ ζει ό,τι δεν χωράει στο panel: το mockup δείχνει ~50 συνδέσμους,
   το site έχει 249. Ανοίγει με hover και με πληκτρολόγιο (focus-within).
   ============================================================ */
/* Ένα σημείο αναφοράς για το βελάκι, ίδιο είτε ο τίτλος είναι σύνδεσμος είτε
   κουμπί: το li γίνεται flex και το βελάκι είναι το τελευταίο του παιδί. Πριν,
   ο σύνδεσμος το είχε absolute στα .5rem και το κουμπί το είχε μέσα του με
   space-between, οπότε τα βελάκια της ίδιας στήλης δεν στοίχιζαν μεταξύ τους. */
.nav2026__hasfly {
  display: flex;
  align-items: flex-start;
}

.nav2026__hasfly > .nav2026__leaf,
.nav2026__hasfly > .nav2026__text {
  flex: 1 1 auto;
}

.nav2026__leaf--toggle {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.nav2026__hasfly > .nav2026__subchev {
  flex: 0 0 auto;
  /* Στοιχίζει με την πρώτη γραμμή του τίτλου, όχι με το κέντρο: οι τίτλοι δύο
     σειρών θα έδειχναν το βελάκι μετατοπισμένο προς τα κάτω. */
  margin: .85rem .4rem 0 .25rem;
  color: var(--n26-ink-3);
  pointer-events: none;
}

.nav2026__flyout {
  display: none;
  position: absolute;
  top: -.5rem;
  left: calc(100% + .25rem);
  z-index: 130;
  /* max-content αντί για auto: το flyout είναι absolute, οπότε το «auto» το
     στρίμωχνε στο πλάτος της στήλης (272px) και έσπαγε τίτλους σαν το
     «Τριμηνιαία Έκθεση Εσόδων-Εξόδων…» σε τέσσερις σειρές. */
  width: max-content;
  min-width: 17rem;
  max-width: 36rem;
  /* Το ύψος δεν ξεπερνά την οθόνη· ό,τι περισσεύει κυλάει μέσα στο flyout.
     Το nav-2026.js μετακινεί επιπλέον το flyout προς τα πάνω όταν ανοίγει
     χαμηλά στο panel, ώστε να μη κρύβεται κάτω από το κάτω άκρο. */
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--n26-line);
  border-radius: var(--n26-radius);
  box-shadow: var(--n26-shadow);
}

.nav2026__hasfly:hover > .nav2026__flyout,
.nav2026__hasfly:focus-within > .nav2026__flyout {
  display: block;
}

/* Πολλές ομάδες (π.χ. Αρχείο 2011–2021: 6 όργανα × ~10 έτη) → στήλες, ώστε να
   μη γίνει μια κατακόρυφη λίστα 60 συνδέσμων. */
.nav2026__flyout[data-groups="2"],
.nav2026__flyout[data-groups="3"] {
  column-count: 2;
  column-gap: 1.25rem;
}

.nav2026__flyout[data-groups="4"],
.nav2026__flyout[data-groups="5"],
.nav2026__flyout[data-groups="6"] {
  width: 36rem;
  column-count: 2;
  column-gap: 1.5rem;
}

.nav2026__flygroup {
  break-inside: avoid;
  margin-bottom: .9rem;
}

/* Επικεφαλίδες μέσα στο flyout (τρίτο επίπεδο βάθους).
   Ήταν 12px, κεφαλαία, με letter-spacing και ξεθωριασμένο γκρι — δηλαδή το πιο
   δυσανάγνωστο κείμενο του μενού, σε ένα σημείο που έχει και τους πιο μακριούς
   τίτλους («Προϋπολογισμός έτους 2022 (Έσοδα και Έξοδα)»). Τώρα: πεζά-κεφαλαία,
   14px, σκούρο, με πραγματικό line-height. Η ιεραρχία φαίνεται από το βάρος και
   τη γραμμή, όχι από τη συμπίεση. */
.nav2026__flytitle {
  margin: .35rem 0 .4rem;
  padding: 0 .5rem .45rem;
  border-bottom: 1px solid var(--n26-line-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--n26-ink);
}

.nav2026__flytitlelink {
  color: inherit;
  text-decoration: none;
}

.nav2026__flytitlelink:hover {
  color: var(--n26-brand-dark);
  text-decoration: underline;
}

.nav2026__flylist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Λίστες με κοντά λεκτικά (έτη) γίνονται ταμπελάκια δίπλα-δίπλα: το «Αρχείο
   2011–2021» έχει 54 συνδέσμους — ως στήλη ξεπερνούσε το ύψος της οθόνης. */
.nav2026__flylist--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nav2026__flylist--chips .nav2026__flylink {
  min-width: 3.6rem;
  min-height: 32px;
  padding: .35rem .5rem;
  border: 1px solid var(--n26-line);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nav2026__flylink {
  display: block;
  padding: .45rem .5rem;
  min-height: 36px;
  border-radius: var(--n26-radius);
  color: var(--n26-ink-2);
  font-size: var(--n26-fs-fly);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.nav2026__flylink:hover,
.nav2026__flylink:focus-visible {
  background: var(--n26-tint);
  color: var(--n26-brand-dark);
}

/* Τελευταία στήλη: το flyout ανοίγει αριστερά, να μη βγει από την οθόνη. */
.nav2026__col:last-child .nav2026__flyout {
  left: auto;
  right: calc(100% + .25rem);
}

/* ============================================================
   4. Burger + drawer (κινητά)
   ============================================================ */
.nav2026__burger {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid var(--n26-line);
  border-radius: var(--n26-radius);
  background: #fff;
  color: var(--n26-ink);
  font-family: Manrope, sans-serif;
  font-size: var(--n26-fs-leaf);
  font-weight: 700;
  cursor: pointer;
}

.nav2026__drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}

.nav2026__drawer[open] {
  display: block;
}

.nav2026__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 51, .55);
}

.nav2026__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(22rem, 92vw);
  padding: 1rem;
  overflow-y: auto;
  background: #fff;
  box-shadow: var(--n26-shadow);
}

.nav2026__panelhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-family: Manrope, sans-serif;
  color: var(--n26-ink);
}

.nav2026__close {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--n26-line);
  border-radius: var(--n26-radius);
  background: #fff;
  color: var(--n26-ink);
  cursor: pointer;
}

.nav2026__drawer details {
  border-bottom: 1px solid var(--n26-line-soft);
}

.nav2026__drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem .25rem;
  min-height: 44px;
  font-family: Manrope, sans-serif;
  font-size: var(--n26-fs-leaf);
  font-weight: 700;
  color: var(--n26-ink);
  cursor: pointer;
  list-style: none;
}

.nav2026__drawer summary::-webkit-details-marker {
  display: none;
}

.nav2026__drawer summary::after {
  content: "›";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--n26-ink-3);
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.nav2026__drawer details[open] > summary::after {
  transform: rotate(-90deg);
}

/* Τα βαθύτερα <details> είναι πιο ελαφριά τυπογραφικά, να φαίνεται η ιεραρχία. */
.nav2026__drawer details details > summary {
  font-weight: 600;
  font-size: 14px;
}

.nav2026__drawer details details details > summary {
  font-weight: 500;
}

.nav2026__drawerlist {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem .5rem;
}

.nav2026__drawerlist[data-depth="0"] {
  padding-left: 0;
}

.nav2026__drawer .nav2026__leaf,
.nav2026__drawer .nav2026__text {
  font-size: 14px;
  padding: .6rem .5rem;
  min-height: 44px;
}

.nav2026__drawerself {
  margin: 0;
}

.nav2026__drawercta {
  margin: .75rem 0 0;
}

.nav2026__drawercta .nav2026__leaf {
  background: var(--n26-brand);
  color: #fff;
  text-align: center;
  font-weight: 700;
}

/* ============================================================
   5. Breakpoint
   Το wrapper του header είναι σταθερό 1250px· κάτω από ~1180px τα 8 top-level
   δεν χωρούν στη μία σειρά, οπότε περνάμε σε drawer — ίδιο σημείο με το
   responsive toggle που είχε το Ubermenu.
   ============================================================ */
@media (max-width: 1180px) {
  .nav2026 {
    display: none;
  }

  .nav2026__burger {
    display: inline-flex;
    margin-left: auto;
  }
}

@media (min-width: 1181px) {
  .nav2026__burger {
    display: none;
  }
}

/* Λιγότερη κίνηση για όποιον το έχει ζητήσει από το σύστημά του (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .nav2026__link,
  .nav2026__chev,
  .nav2026__drawer summary::after {
    transition: none;
  }
}