/* ═══════════════════════════════════════════════════════════════════════════
   ΣΠΟΥΡΓΙΤΗΣ — ΚΕΛΥΦΟΣ ΠΡΟΤΥΠΩΝ ΕΣΩΤΕΡΙΚΩΝ ΣΕΛΙΔΩΝ
   Πηγή tokens: redesign_homepage_v29_2026-09-17.html (γρ. 149-171) — ΑΥΤΟΥΣΙΑ,
   με ΜΙΑ εγκεκριμένη απόκλιση: τίτλοι και αποστάσεις μικρότεροι (παρατήρηση
   πελάτη, #16437, Παναγιώτης 25/09) — ώστε ένα ολοκληρωμένο κομμάτι περιεχομένου
   να χωρά στην οθόνη. Οι τιμές της v29 κρατιούνται σε σχόλιο δίπλα σε κάθε token.
   Κάθε αλλαγή εδώ αλλάζει και τα 15 πρότυπα· καμία απόκλιση χωρίς έγκριση.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Χρώμα: navy = δομή, κόκκινο = ΜΟΝΟ κύριο CTA (Brand Platform §7) */
  --navy:#1B3C8F; --navy-dark:#132A63; --navy-bright:#7FA8F0;
  --red:#d80c18; --red-dark:#b3080f;
  --ink:#1c1b1c; --ink-soft:#45474a; --line:#dbe0ea;
  --white:#ffffff; --surface:#f5f8fd; --warm:#fdfaf4; --green:#0f7b52; --gold:#e8a33d;
  --err:#8f2119; --err-bg:#fdf3f2; --ok:#0f7b52; --ok-bg:#f0f9f5;
  /* Τυπογραφία: σώμα 16px/1,4 — παρατήρηση Παναγιώτη 06/08 (v7: 18px/1,65) */
  --fs-body:1rem; --fs-lead:1.25rem; --fs-sm:1rem; --fs-eyebrow:.8125rem;
  /* v29: h1 clamp(2.125rem,4.2vw,3.25rem) · h2 clamp(1.75rem,3vw,2.375rem) · h3 1.375rem */
  --fs-h1:clamp(1.875rem,3.2vw,2.5rem); --fs-h2:clamp(1.5rem,2.3vw,1.875rem); --fs-h3:1.25rem;
  --lh-body:1.4;
  /* Κάνναβος 8pt — ωφέλιμο πλάτος 1400 (παρατήρηση Ανδρέα 06/08· v7: 1200)
     v29: --sec-y clamp(64px,8vw,104px) */
  --wrap:1400px; --gutter:24px; --sec-y:clamp(40px,5vw,64px);
  --r-card:16px; --r-btn:10px;
  --sh-1:0 1px 2px rgb(16 24 40/.06); --sh-2:0 4px 14px rgb(16 24 40/.09); --sh-3:0 14px 36px rgb(16 24 40/.14);
  --ease:cubic-bezier(.2,.6,.2,1);
  --topbar-h:38px; --header-h:72px; --stickybar-h:0px;
  --hdr-total:calc(var(--topbar-h) + var(--header-h));
  /* Πλάτος στήλης κειμένου: το 1400 είναι για πλέγματα, όχι για παραγράφους.
     Χωρίς αυτό οι σελίδες των 2.700 λέξεων βγάζουν γραμμές 180+ χαρακτήρων. */
  --measure:74ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;padding-bottom:var(--stickybar-h)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.3}
h4{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
figure{margin:0}
:where(a,button,summary,input,select,textarea,details):focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sec-alt{background:var(--surface)}
.sec-warm{background:var(--warm)}
.sec-navy{background:var(--navy-dark);color:#fff}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:block;margin-bottom:10px}
.sec-navy .eyebrow{color:var(--navy-bright)}
.sec-head{text-align:center;max-width:720px;margin:0 auto clamp(28px,3vw,40px)}  /* v29: clamp(40px,5vw,64px) */
.sec-head p{margin-top:12px;color:var(--ink-soft)}
.sec-navy .sec-head p{color:#d6ddec}

/* ───────────── Κουμπιά — το κόκκινο ΜΟΝΟ στο .btn-primary ───────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 28px;
  font:inherit;font-weight:700;text-decoration:none;border:1.5px solid transparent;border-radius:var(--r-btn);
  cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--sh-2)}      /* ΜΟΝΟ το κύριο CTA */
.btn-primary:hover{background:var(--red-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-dark)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy-dark)}
.btn-white:hover{background:#eaf0fb}
.btn-outline-white{background:transparent;color:#fff;border-color:rgb(255 255 255/.55)}
.btn-outline-white:hover{background:rgb(255 255 255/.12);border-color:#fff}
.btn-pill{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 24px;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;font-weight:700;text-decoration:none;color:var(--navy);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.btn-pill:hover{border-color:#c3cee4;box-shadow:var(--sh-2);transform:translateY(-2px)}
.btn-pill svg{transition:transform .15s var(--ease)}
.btn-pill:hover svg{transform:translateX(4px)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .15s var(--ease)}
.link-arrow:hover{border-bottom-color:var(--navy)}
.link-arrow svg{transition:transform .15s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ───────────── Κεφαλίδα — δύο επίπεδα, τηλέφωνο ορατό σε ΚΑΘΕ πλάτος ───────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow .2s var(--ease)}
.hdr.is-stuck{box-shadow:var(--sh-2)}
.topbar{height:var(--topbar-h);overflow:hidden;background:var(--navy);color:#e3eaf9;
  transition:height .2s var(--ease)}
.hdr.is-stuck .topbar{height:0}
.topbar-in{display:flex;align-items:center;justify-content:flex-end;gap:24px;height:var(--topbar-h);font-size:.875rem}
.topbar-act{display:flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap}
.topbar-act a{text-decoration:none;font-weight:600;padding:4px 2px;border-bottom:1px solid transparent;transition:border-color .15s var(--ease),color .15s var(--ease)}
.topbar-act a:hover{color:#fff;border-bottom-color:rgb(255 255 255/.5)}
.topbar-act i{font-style:normal;opacity:.42}
.hdr-in{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:44px;width:auto}
.nav{display:flex;gap:24px;margin-inline:auto}
.nav a{display:inline-flex;align-items:center;gap:5px;font-size:1rem;font-weight:600;white-space:nowrap;color:var(--ink-soft);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--navy);border-bottom-color:var(--navy)}
.nav a svg{flex:0 0 auto;opacity:.7}
.hdr-act{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
/* Στην κεφαλίδα τα δύο κουμπιά ισοϋψή — το .btn είναι 56px και το .tel-btn 48px,
   και δίπλα-δίπλα η διαφορά διαβάζεται ως κακή στοίχιση. Μόνο εδώ, το γενικό .btn μένει 56px. */
.hdr-act .btn{min-height:48px;padding-block:10px}
.tel-btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 20px;border-radius:var(--r-btn);
  background:var(--navy);color:#fff;border:1.5px solid var(--navy);font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s var(--ease),border-color .15s var(--ease)}
.tel-btn:hover{background:var(--navy-dark);border-color:var(--navy-dark)}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--navy)}
.mnav{display:none;border-top:1px solid var(--line);background:#fff}
.mnav.is-open{display:block}
.mnav a{display:block;padding:16px 0;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:0}
.mnav .mnav-lang{color:var(--navy);font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* Ορατό στον αναγνώστη οθόνης, όχι στο μάτι — για λεζάντες πινάκων και
   επεξηγήσεις που δεν πρέπει να καταλαμβάνουν χώρο στη σελίδα. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Κάθε τηλέφωνο και email είναι κουμπί κλήσης σε κινητό, όπου κι αν βρίσκεται.
   Χωρίς αυτό έβγαιναν 19–20px ύψος — κάτω από τα 24px του WCAG 2.2 §2.5.8.
   Εξαιρούνται όσα ζουν μέσα σε τρέχον κείμενο, όπου ισχύει η inline εξαίρεση.
   Εξαιρούνται ΚΑΙ τα κουμπιά: έχουν ήδη min-height 48-56px, και ο κανόνας τους
   έπαιρνε το display:inline-flex — χανόταν το align-items και το εικονίδιο κλήσης
   κάθιζε στη γραμμή βάσης αντί να κεντράρεται με το κείμενο. Το :where() δεν
   προσθέτει specificity, ώστε να μη χαλάσει η εξαίρεση του .prose από κάτω. */
a[href^="tel:"]:not(:where(.btn,.tel-btn)),
a[href^="mailto:"]:not(:where(.btn,.tel-btn)){display:inline-block;padding-block:3px}
.prose a[href^="tel:"],.prose a[href^="mailto:"],
.faq-body a[href^="tel:"],.faq-body a[href^="mailto:"],
.table-note a[href^="tel:"],.table-note a[href^="mailto:"]{display:inline;padding-block:0}

/* Το κυρίως περιεχόμενο ξεκινά κάτω από τη σταθερή κεφαλίδα */
main{padding-top:var(--hdr-total)}

/* ───────────── Υποσέλιδο ───────────── */
.ftr{background:#0f1f47;color:#b9c4dc;padding-block:64px 32px;font-size:1rem}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.ftr h4{color:#fff;font-size:1.0625rem;margin-bottom:18px;font-weight:700}
/* Σημεία αφής υποσέλιδου: WCAG 2.2 §2.5.8 ζητά 24×24 CSS pixels κατ' ελάχιστο.
   Οι σύνδεσμοι έβγαιναν 20px ύψος — το padding τους ανεβάζει χωρίς να αλλάξει η όψη. */
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ftr ul a{display:inline-block;padding-block:4px}
.ftr a{text-decoration:none;transition:color .15s var(--ease)}
.ftr a:hover{color:#fff}
.ftr-logo{background:#fff;border-radius:10px;padding:10px 14px;display:inline-block;margin-bottom:18px}
.ftr-logo img{height:40px;width:auto}
.ftr-legal{border-top:1px solid rgb(255 255 255/.12);margin-top:48px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:center;font-size:.9375rem}
.ftr-legal a{text-decoration:none;display:inline-block;padding-block:4px}
.ftr-bottom{margin-top:20px;padding-top:20px;text-align:center;font-size:.9375rem;color:#8e9bb8}
.social{display:flex;gap:12px}
.social a{width:44px;height:44px;border:1px solid rgb(255 255 255/.22);border-radius:50%;display:flex;align-items:center;justify-content:center}
.social a:hover{background:rgb(255 255 255/.1);color:#fff}

/* ───────────── Κίνηση — καθαρός IntersectionObserver, μηδέν βιβλιοθήκη ─────────────
   Ορατά από προεπιλογή· κρύβονται ΜΟΝΟ αφού επιβεβαιωθεί ότι τρέχει το JS. */
[data-reveal]{opacity:1}
.js-enabled [data-reveal]:not(.is-visible){opacity:0;transform:translateY(24px)}
.js-enabled [data-reveal]{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-enabled [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-enabled [data-reveal],.js-enabled [data-reveal]:not(.is-visible){opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ───────────── Αποκρίσεις ───────────── */
/* Κάτω από 1280 δεν χωρούν μαζί πλοήγηση, τηλέφωνο και κουμπί κόστους.
   Φεύγει το κουμπί — το ίδιο CTA υπάρχει μέσα σε κάθε σελίδα, το τηλέφωνο όχι. */
@media (max-width:1279px){
  .hdr-calc{display:none}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:900px){
  :root{--header-h:68px}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:640px){
  :root{--gutter:16px;--fs-h3:1.125rem;--topbar-h:0px}
  .topbar{display:none}
  .hdr-calc{display:none}          /* το κύριο CTA ζει μέσα στη σελίδα, όχι στην μπάρα */
  .logo img{height:36px}
  .tel-btn{padding:10px 14px}
  .ftr-grid{grid-template-columns:1fr}
}
/* Στα 390 η κεφαλίδα δεν χωρούσε: λογότυπο + τηλέφωνο + μενού έβγαιναν στα 402px.
   Ο αριθμός ΔΕΝ κρύβεται (§4.1 του contract) — μικραίνουν τα περιθώρια γύρω του. */
@media (max-width:430px){
  .hdr-in{gap:12px}
  .logo img{height:32px}
  .tel-btn{padding:10px 12px;gap:7px;font-size:.9375rem}
  .hdr-act{gap:8px}
  .burger{width:44px;height:44px}
}
@media (max-width:360px){
  .tel-btn .tel-txt{display:none}  /* κάτω από 360 μένει το εικονίδιο κλήσης */
}