/* =============================================================
   navbar-extra.css — Φορτώνεται σε κάθε σελίδα
   Σκοπός: ενοποιημένο μέγεθος κουμπιών, νέος prefecture dropdown,
            compact title, icon-only group, mobile expandable.
   ============================================================= */

/* Compact title — να χωράει η navbar */
header h1.site-title {
  font-size: 1.05rem !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 .6rem;
  max-width: 280px;
}
@media (max-width: 1100px) { header h1.site-title { max-width: 200px; font-size: .95rem !important; } }
@media (max-width: 900px)  { header h1.site-title { display: none; } }

/* Ενοποιημένα κουμπιά primary nav (text + icon) — selectors καλύπτουν και τα <a> έξω από .controls */
header .control-btn.primary-nav,
header .prefecture-toggle-btn,
header .country-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  height: 36px;
  font-size: .88rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-color) !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}
header a.prefecture-toggle-btn:link,
header a.prefecture-toggle-btn:visited,
header a.prefecture-toggle-btn:hover,
header a.prefecture-toggle-btn:active {
  color: var(--text-color) !important;
  text-decoration: none !important;
}
header .control-btn.primary-nav i,
header .prefecture-toggle-btn i:not(.caret),
header .country-toggle-btn i:not(.caret) {
  font-size: .95rem;
  color: var(--accent-color);
}
header .control-btn.primary-nav:hover,
header .prefecture-toggle-btn:hover,
header .country-toggle-btn:hover {
  background: var(--bg-tertiary);
}
header .control-btn.primary-nav.active,
header a.prefecture-toggle-btn.active,
header a.prefecture-toggle-btn.active:link,
header a.prefecture-toggle-btn.active:visited {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color) !important;
}
header .control-btn.primary-nav .control-text {
  display: inline !important;
}
.caret { font-size: .7rem !important; margin-left: .2rem; transition: transform .2s; }
.prefecture-toggle-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Icon-only group (Filters, Info, FAQ, Theme) */
.icon-group {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-left: .5rem;
  padding-left: .5rem;
  border-left: 1px solid var(--border-color);
}
.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover {
  background: var(--bg-tertiary);
  color: var(--accent-color);
}
.icon-btn i { font-size: 1rem; }

/* Hide old text in icon-only buttons */
.icon-btn .control-text,
.icon-btn .mobile-button-tooltip {
  display: none !important;
}

/* Prefecture dropdown */
.prefecture-nav.desktop {
  position: relative;
  display: inline-block;
}
.prefecture-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 720px;
  max-width: 90vw;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--shadow-color);
  padding: .8rem 1rem 1rem;
  display: none;
  z-index: 1300;
}
.prefecture-nav.desktop.open .prefecture-dropdown,
.prefecture-dropdown.open {
  display: block;
}
.prefecture-dropdown-head {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: .5rem;
  margin-bottom: .6rem;
}
.prefecture-dropdown-head .see-all {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
}
.prefecture-dropdown-head .see-all:hover { text-decoration: underline; }
.prefecture-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem 1.2rem;
  max-height: 70vh;
  overflow-y: auto;
}
@media (max-width: 920px) { .prefecture-columns { grid-template-columns: repeat(2, 1fr); } }
.pref-region-group h4 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  margin: 0 0 .3rem;
  font-weight: 700;
}
.pref-region-group ul { list-style: none; margin: 0; padding: 0; }
.pref-region-group li { margin: 0; }
.pref-region-group a {
  display: block;
  padding: .25rem .45rem;
  font-size: .85rem;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.pref-region-group a:hover { background: var(--bg-tertiary); color: var(--accent-color); }
.pref-region-group a.active { background: var(--accent-color); color: #fff; }

@media (min-width: 769px) and (max-width: 1100px) {
  header .controls .control-btn.primary-nav .control-text { display: none !important; }
  header .controls .control-btn.primary-nav { padding: .45rem .55rem; }
}

/* ============================================================
   MOBILE NAVBAR — clean compact layout (≤768px)
   Δείχνουμε: logo · theme · χώρες (globe) · hamburger
   Κρύβουμε όλα τα primary nav buttons + icon-btns (πάνε στο menu)
   ============================================================ */
@media (max-width: 768px) {
  header {
    padding: .4rem .6rem !important;
    gap: .35rem !important;
    flex-wrap: nowrap !important;
    height: 56px;
  }
  header .logo { flex: 0 0 auto; }
  header .logo .logo-img { max-height: 38px; width: auto; }
  header .site-title { display: none !important; }

  /* Desktop dropdowns εξαφανίζονται — όλα στο hamburger menu */
  .prefecture-nav.desktop { display: none !important; }
  .country-nav.desktop    { display: none !important; }

  header .controls {
    margin-left: auto !important;
    gap: .25rem !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
  }
  /* Primary nav (Χάρτης/Στατ/Πρόβλ/Ανακ) → hidden, μέσα στο hamburger */
  header .control-btn.primary-nav { display: none !important; }

  /* Icon-group: εμφανίζεται μόνο το theme-toggle. Φίλτρα/Info/FAQ στο menu */
  .icon-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    gap: .15rem !important;
  }
  .icon-group .icon-btn:not(.theme-toggle) { display: none !important; }

  /* Mobile menu buttons: ίδιο style με theme-toggle */
  header .icon-btn,
  header .mobile-menu-btn {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    background: transparent !important;
  }
  header .mobile-menu-btn { display: inline-flex !important; }

  /* Νομοί link στο mobile navbar */
  .mobile-only-btn {
    background: transparent;
    color: var(--accent-color) !important;
    text-decoration: none !important;
  }
  .mobile-only-btn i { color: var(--accent-color); }
  .mobile-only-btn.active {
    background: var(--accent-color) !important;
    color: #fff !important;
    border-color: var(--accent-color) !important;
  }
  .mobile-only-btn.active i { color: #fff; }
}
/* Mobile-only button κρύβεται σε desktop */
@media (min-width: 769px) { .mobile-only-btn { display: none !important; } }

/* Πολύ μικρές οθόνες — λίγο μικρότερα κουμπιά */
@media (max-width: 380px) {
  header .icon-btn,
  header .mobile-menu-btn {
    width: 36px !important;
    height: 36px !important;
  }
  header .logo .logo-img { max-height: 32px; }
  header { padding: .35rem .4rem !important; height: 52px; }
}

/* =============================================================
   MOBILE: map πιο κοντός (αποφασιστικά, με !important)
   ============================================================= */
@media (max-width: 768px) {
  #map-wrapper {
    height: calc(100vh - 56px - 180px) !important;
    min-height: 320px !important;
    max-height: calc(100vh - 56px - 180px) !important;
  }
}
@media (max-width: 480px) {
  #map-wrapper {
    height: calc(100vh - 56px - 160px) !important;
    min-height: 280px !important;
    max-height: calc(100vh - 56px - 160px) !important;
  }
}

/* =============================================================
   MOBILE: theme toggle στο menu, Φίλτρα στο navbar
   ============================================================= */
@media (max-width: 768px) {
  /* Στο navbar του map page: εμφανίζεται το Φίλτρα (αν υπάρχει) */
  .icon-group .icon-btn { display: none !important; }
  .icon-group #toggle-filters { display: inline-flex !important; }
  /* Theme toggle εξαφανίζεται από το navbar — μπαίνει στο hamburger menu */
  .icon-group .theme-toggle,
  header > .controls > .theme-toggle { display: none !important; }
}

/* Theme item μέσα στο hamburger menu */
.nav-theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem !important;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin: .35rem 0;
}
.nav-theme-item .theme-label { display: flex; align-items: center; gap: .6rem; color: var(--text-color); font-size: 1rem; }
.nav-theme-item .theme-label i { color: var(--accent-color); }
.nav-theme-item .theme-switch {
  width: 50px; height: 28px; border-radius: 14px;
  background: var(--bg-color); border: 1px solid var(--border-color);
  position: relative; cursor: pointer; flex: 0 0 auto;
  transition: background .25s;
}
.nav-theme-item .theme-switch::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-color); transition: transform .25s;
}
body[data-theme="dark"] .nav-theme-item .theme-switch {
  background: var(--accent-color);
}
body[data-theme="dark"] .nav-theme-item .theme-switch::before {
  transform: translateX(22px);
  background: #fff;
}

/* =============================================================
   LEAFLET ATTRIBUTION — compact (i) πάνω σε mobile
   ============================================================= */
@media (max-width: 768px) {
  .leaflet-control-attribution {
    max-width: 26px !important;
    min-width: 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 4px !important;
    background: rgba(255,255,255,.92) !important;
    overflow: hidden !important;
    font-size: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    cursor: pointer !important;
    transition: all .2s;
    position: relative;
  }
  [data-theme="dark"] .leaflet-control-attribution { background: rgba(30,30,30,.92) !important; }
  .leaflet-control-attribution::before {
    content: 'ⓘ';
    font-size: 16px;
    color: #333;
    display: block;
    text-align: center;
    line-height: 26px;
    width: 26px;
    height: 26px;
  }
  [data-theme="dark"] .leaflet-control-attribution::before { color: #ddd; }
  .leaflet-control-attribution a, .leaflet-control-attribution span { display: none !important; }

  .leaflet-control-attribution.attr-expanded {
    max-width: 92vw !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    opacity: .7 !important;
    background: rgba(255,255,255,.85) !important;
  }
  [data-theme="dark"] .leaflet-control-attribution.attr-expanded { background: rgba(30,30,30,.85) !important; color: #ddd; }
  .leaflet-control-attribution.attr-expanded::before { display: none !important; }
  .leaflet-control-attribution.attr-expanded a,
  .leaflet-control-attribution.attr-expanded span { display: inline !important; }
  .leaflet-control-attribution.attr-expanded a { color: var(--accent-color) !important; }
}

/* =============================================================
   SEE ALL CTAs — Ανακοινώσεις & Χάρτες Πρόβλεψης στην αρχική
   ============================================================= */
.x-feed-seeall,
.risk-map-seeall {
  margin: 1.2rem 0 .5rem;
  text-align: center;
}
.see-all-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem 1.4rem;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-dark, #b22d00));
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 28px;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 3px 10px rgba(214,53,0,.35);
  transition: transform .15s, box-shadow .15s;
}
.see-all-cta i:first-child { font-size: .9rem; opacity: .9; }
.see-all-cta i:last-child {
  font-size: .8rem;
  transition: transform .2s;
}
.see-all-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(214,53,0,.45);
  color: #fff !important;
}
.see-all-cta:hover i:last-child {
  transform: translateX(3px);
}
@media (max-width: 480px) {
  .see-all-cta { padding: .65rem 1.1rem; font-size: .88rem; }
}

/* =============================================================
   PREFECTURE BORDERS — λευκές γραμμές με μαύρο halo
   ============================================================= */
.leaflet-overlay-pane path.pref-border {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.9))
    drop-shadow(0 0 1px rgba(0,0,0,.6));
  transition: filter .15s;
}
.leaflet-overlay-pane path.pref-border-hover {
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,.7))
    drop-shadow(0 0 4px rgba(214,53,0,.6));
}

/* Mobile expandable: Νομοί */
.mobile-collapse {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: .25rem 0;
}
.mobile-collapse-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.mobile-collapse-head i { color: var(--accent-color); }
.mobile-collapse-head .chev { transition: transform .25s; font-size: .85rem; }
.mobile-collapse.open .mobile-collapse-head .chev { transform: rotate(180deg); }
.mobile-collapse-body {
  display: none;
  padding: 0 .5rem .8rem;
  max-height: 60vh;
  overflow-y: auto;
}
.mobile-collapse.open .mobile-collapse-body { display: block; }
.mobile-pref-all {
  display: block !important;
  padding: .55rem .75rem !important;
  margin-bottom: .4rem;
  background: var(--bg-tertiary) !important;
  color: var(--accent-color) !important;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
}
.mobile-region { margin-bottom: .6rem; }
.mobile-region-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  font-weight: 700;
  padding: .3rem .5rem 0;
}
.mobile-region-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .3rem .25rem;
}
.mobile-region-grid a {
  display: block !important;
  padding: .5rem .55rem !important;
  font-size: .9rem;
  border-radius: 6px;
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
  text-decoration: none;
  border: 1px solid var(--border-color);
}
.mobile-region-grid a:hover { background: var(--bg-tertiary) !important; color: var(--accent-color) !important; }
.mobile-region-grid a.active { background: var(--accent-color) !important; color: #fff !important; border-color: var(--accent-color); }

/* Compact header padding so navbar χωράει */
header { padding: .5rem 1rem !important; gap: .5rem !important; }
header .controls { gap: .25rem !important; }

/* Stronger link overrides μέσα στα νέα νομών dropdowns/grids — κανένα μπλε/underline */
.prefecture-dropdown a,
.mobile-collapse-body a,
.region-grid a,
.pref-tile,
.pref-tile a {
  text-decoration: none !important;
}
.prefecture-dropdown a:link,
.prefecture-dropdown a:visited,
.mobile-collapse-body a:link,
.mobile-collapse-body a:visited {
  color: var(--text-color) !important;
}
.prefecture-dropdown a.active,
.mobile-region-grid a.active {
  color: #fff !important;
}
.prefecture-dropdown-head .see-all,
.mobile-pref-all {
  color: var(--accent-color) !important;
  text-decoration: none !important;
}

/* =============================================================
   MODERN FAQ
   ============================================================= */
.faq-section {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-color)) !important;
  padding: 3.5rem 0 !important;
  border-top: 1px solid var(--border-color);
}
.faq-section .container {
  max-width: 880px !important;
}
.faq-section h2 {
  font-size: 1.9rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  letter-spacing: -.01em;
}
.faq-section h2::after {
  content: '';
  display: block;
  width: 60px; height: 3px;
  background: var(--accent-color);
  margin: .8rem auto 0;
  border-radius: 2px;
}
.faq-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.1rem 1.4rem !important;
  margin-bottom: .85rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--shadow-color);
  border-color: var(--accent-color);
}
.faq-item h3 {
  font-size: 1.1rem !important;
  color: var(--text-color) !important;
  margin-bottom: .55rem !important;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.35;
}
.faq-item h3::before {
  content: '❓';
  flex: 0 0 auto;
  font-size: 1rem;
  margin-top: .15rem;
}
.faq-item p {
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.6;
}
.faq-item ul, .faq-item ol {
  padding-left: 1.4rem;
  margin: .4rem 0;
}
.faq-item li { margin-bottom: .25rem; color: var(--text-secondary); }
.faq-item.important-note {
  background: linear-gradient(135deg, rgba(214,53,0,.06), transparent);
  border-color: rgba(214,53,0,.35);
}
.faq-item.important-note h3::before { content: '⚠️'; }
.faq-item a { color: var(--accent-color); text-decoration: none; border-bottom: 1px dashed var(--accent-color); }
.faq-item a:hover { border-bottom-style: solid; }

/* =============================================================
   MODERN FOOTER
   ============================================================= */
footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-color);
  padding: 2.5rem 0 1.2rem !important;
  margin-top: 2rem;
}
footer .container {
  max-width: 1180px;
}
.footer-content {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 2rem !important;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}
.footer-logo .footer-logo-img {
  max-width: 110px;
  height: auto;
  opacity: .9;
}
.footer-links {
  display: flex !important;
  flex-wrap: wrap;
  gap: .35rem .9rem !important;
  justify-content: center;
}
.footer-links a {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: .9rem;
  padding: .35rem .55rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.footer-links a:hover {
  background: var(--bg-tertiary);
  color: var(--accent-color) !important;
}
.footer-links a.follow-link {
  border: 1px solid var(--border-color);
  color: var(--accent-color) !important;
}
.footer-social {
  display: flex;
  gap: .5rem;
}
.footer-social a {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary) !important;
  transition: background .15s, color .15s, transform .15s;
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--accent-color);
  color: #fff !important;
  transform: translateY(-2px);
}
.footer-credit {
  text-align: center;
  font-size: .82rem;
  color: var(--text-secondary);
  opacity: .8;
}
.footer-credit p { margin: 0; }

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 1.2rem !important;
  }
  .footer-logo { display: flex; justify-content: center; }
}