/* ═══════════ LAYOUT: κεφαλίδα, μενού, υποσέλιδο ═══════════ */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  border-bottom: 1px solid var(--c-line);
}
@supports (backdrop-filter: blur(1px)) {
  .site-head { backdrop-filter: blur(12px) saturate(1.2); }
}
.head-row { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-4); }
/* Το λογότυπο. Το <img> έχει ρητά width/height στο markup, οπότε κρατάει τον
   χώρο του πριν φορτώσει και δεν αναπηδά η κεφαλίδα. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: auto; height: 42px; }
.site-foot .brand img { height: 42px; }
.brand:hover { text-decoration: none; opacity: .85; }
@media (max-width: 560px){ .brand img { height: 30px; } }

/* Εφεδρεία: αν λείψει ποτέ το αρχείο, η συνάρτηση γυρίζει κείμενο. */
.brand span { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Το μενού του WordPress έρχεται ως <ul> — το ξεστήνουμε εδώ, μία φορά. */
.nav ul { list-style: none; display: flex; gap: var(--s-5); margin: 0; padding: 0; align-items: center; }
.nav li { position: relative; }
.nav a { color: var(--c-ink-2); font-size: var(--t-small); font-weight: 600; }
.nav a:hover { color: var(--c-ink); text-decoration: none; }
.nav .current-menu-item > a { color: var(--c-ink); }

/* Υπομενού: εμφανίζεται σε hover ΚΑΙ σε focus — αλλιώς δεν φτάνεις με πληκτρολόγιο. */
.nav ul ul {
  position: absolute; top: calc(100% + var(--s-3)); left: 0; min-width: 230px;
  flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out), visibility var(--d-fast);
}
.nav li:hover > ul, .nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.nav ul ul a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.nav ul ul a:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* Κινητό: το μενού γίνεται κάθετο και ανοίγει με το κουμπί. */
.nav-toggle { display: none; background: none; border: 1px solid var(--c-line); color: var(--c-ink);
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); cursor: pointer; font-size: 1rem; }
@media (max-width: 900px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav { position: fixed; inset: 64px 0 auto 0; background: var(--c-bg); border-bottom: 1px solid var(--c-line);
         padding: var(--s-4) var(--gutter); display: none; max-height: calc(100dvh - 64px); overflow-y: auto; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .nav ul ul { position: static; opacity: 1; visibility: visible; transform: none;
               box-shadow: none; background: transparent; border: 0; padding-left: var(--s-4); }
  /* Το κουμπί μένει — είναι η κύρια ενέργεια — αλλά σε συμπαγή μορφή.
     ΠΡΟΣΟΧΗ: με μία κλάση έχανε από το `.btn` του components.css, που φορτώνεται
     μετά· γι' αυτό ο κανόνας γράφεται με δύο κλάσεις. */
  .head-row .head-cta {
    padding: var(--s-2) var(--s-4);
    font-size: var(--t-small);
    white-space: nowrap;
  }
}

/* Στενές οθόνες: λογότυπο, κουμπί μενού και CTA πρέπει να χωρέσουν σε μία σειρά.
   Στα 360px ξεχείλιζαν 4px, οπότε μαζεύουμε τα κενά και το κουμπί. */
@media (max-width: 430px){
  .head-row { gap: var(--s-3); }
  .head-row .head-cta { padding: var(--s-2) var(--s-3); font-size: var(--t-micro); }
}

/* ── Υποσέλιδο ──────────────────────────────────────────────────────────────
   Δύο ζώνες: πάνω το κλείσιμο με την επικοινωνία, κάτω η πλοήγηση. Η πρώτη έχει
   δικό της φόντο ώστε να διαβάζεται ως ενέργεια και όχι ως άλλη μια στήλη. */
.site-foot { border-top: 1px solid var(--c-line); }

.foot-cta { background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.foot-cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
  padding-block: var(--s-8);
}
.foot-cta-say h2 { margin: 0; font-size: var(--t-h2); }
.foot-cta-say p { margin: var(--s-3) 0 var(--s-5); color: var(--c-ink-2); max-width: 42ch; }

/* Τα στοιχεία επικοινωνίας είναι ΣΤΟΙΧΕΙΑ, όχι κουμπιά. Πριν ήταν τρία pills
   δίπλα δίπλα και ο επισκέπτης δεν καταλάβαινε τι να πατήσει. */
.foot-contact { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); }
.foot-contact li { display: flex; flex-direction: column; gap: 2px; }
.foot-contact .micro { margin: 0 0 var(--s-1); }
.foot-tel { font-size: 1.0625rem; font-weight: 700; color: var(--c-ink); letter-spacing: -.01em; }
.foot-tel:hover { color: var(--c-brand); text-decoration: none; }
.foot-contact .mut { font-size: var(--t-small); line-height: 1.45; }

.foot-main { padding-block: var(--s-8); }
.foot-legal { margin: var(--s-7) 0 0; font-size: var(--t-micro); color: var(--c-ink-3); }

@media (max-width: 860px) {
  .foot-cta-row { grid-template-columns: 1fr; padding-block: var(--s-7); }
}

.foot-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li + li { margin-top: var(--s-2); }
.foot-grid a { color: var(--c-ink-2); font-size: var(--t-small); }

/* ── Λογότυπο + μότο ────────────────────────────────────────────────────────
   Δουλεύονται ως ΕΝΑ σύνολο: το μότο μπαίνει κεφαλαία με αραιή γραμματοθεσία
   και σε μέγεθος που το κάνει να βγαίνει **ίσο πλάτος με το σήμα** (164 προς
   175px). Γι' αυτό το λογότυπο εδώ είναι 42px και όχι 34: στα 34 το μότο ήταν
   68% φαρδύτερο και το σύνολο έμοιαζε τυχαίο.
   Τα κεφαλαία είναι ασφαλή επειδή η φράση είναι λατινική — στα ελληνικά θα
   κρατούσαν τόνο, αφού το WordPress δηλώνει lang="en-US". */
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; }
.tagline {
  margin: .45em 0 0;
  font-size: .5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}

/* Στην κεφαλίδα το μότο χωράει μόνο όταν η μπάρα δεν είναι ήδη γεμάτη. Εκεί
   μαζεύουμε και το padding, ώστε η κεφαλίδα να μη μεγαλώσει από το δεύτερο
   επίπεδο — βγαίνει τελικά πιο χαμηλή απ' ό,τι ήταν με το μικρό λογότυπο. */
.site-head .tagline { display: none; }
@media (min-width: 1120px) {
  .site-head .tagline { display: block; }
  .head-row { padding-block: var(--s-3); }
}

.site-foot .tagline { color: var(--c-ink-2); }

/* Το δεύτερο email μέσα στη γραμμή «Πωλήσεις:» να μη χτυπάει μπλε δίπλα στα
   υπόλοιπα — είναι συμπλήρωμα, όχι ξεχωριστή ενέργεια. */
.foot-contact .mut a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-contact .mut a:hover { color: var(--c-brand); }

/* Επιλογέας γλώσσας (EL / EN) — μικρός, δίπλα στο κουμπί. */
.lang-switch { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 .55rem;
  border: 1px solid var(--c-line); border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  color: var(--c-ink-2); text-decoration: none; }
.lang-switch:hover { color: var(--c-ink); border-color: var(--c-ink-3); text-decoration: none; }
@media (max-width: 900px) { .lang-switch { margin-left: auto; } .head-row .nav-toggle { margin-left: 0; } }
@media (pointer: coarse) { .lang-switch { min-width: 44px; min-height: 44px; } }

/* ── Διακόπτης φωτεινής / σκούρας εμφάνισης ── */
.theme-toggle { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0;
  border: 1px solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-ink-2); cursor: pointer;
  transition: color var(--d-fast), border-color var(--d-fast); }
.theme-toggle:hover { color: var(--c-ink); border-color: var(--c-ink-3); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.theme-toggle .tt-sun { display: none; }
[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
@media (pointer: coarse) { .theme-toggle { min-width: 44px; min-height: 44px; } }
.theme-toggle-menu { display: none; }
.theme-toggle .tt-label-light, [data-theme="dark"] .theme-toggle .tt-label-dark { display: none; }
[data-theme="dark"] .theme-toggle .tt-label-light { display: inline; }
@media (max-width: 560px) {
  .head-row > .theme-toggle { display: none; }
  .nav .theme-toggle-menu { display: flex; width: 100%; justify-content: flex-start; min-height: 44px;
    padding: 0 var(--s-4); margin-top: var(--s-3); border-radius: var(--r-sm); font: inherit; font-weight: 600; }
}