/* =============================================================
   Energy Solutions Hub — Stylesheet (Φάση 1: HTML mockup)
   Παλέτα Γ: "Graphite & Electric"
   -------------------------------------------------------------
   ΠΕΡΙΕΧΟΜΕΝΑ
   01. Design tokens (μεταβλητές)
   02. Reset & βάσεις
   03. Τυπογραφία
   04. Layout helpers (container, section, grid)
   05. Κουμπιά
   06. Header / Navigation
   07. Hero
   08. Κάρτες & components
   09. Φόρμες
   10. Εικόνες / placeholders
   11. Blog
   12. Footer
   13. Cookie banner
   14. Utilities & animations
   15. Responsive
   ============================================================= */


/* =============================================================
   01. DESIGN TOKENS
   ΤΟ ΣΤΥΛ ΕΙΝΑΙ ΚΛΕΙΔΩΜΕΝΟ ΣΤΟΝ ΚΩΔΙΚΑ.
   Αλλαγές χρωμάτων/γραμματοσειρών γίνονται ΜΟΝΟ εδώ.
   ============================================================= */
:root {
  /* Χρώματα — βάση */
  --esh-graphite:      #111827;
  --esh-graphite-900:  #0B1220;
  --esh-graphite-800:  #1F2937;
  --esh-graphite-700:  #374151;
  --esh-graphite-500:  #6B7280;
  --esh-graphite-300:  #D1D5DB;
  --esh-graphite-200:  #E5E7EB;
  --esh-surface:       #F9FAFB;
  --esh-white:         #FFFFFF;

  /* Χρώματα — brand */
  --esh-cyan:          #06B6D4;   /* Ρεύμα, Τηλεφωνία, EV */
  --esh-cyan-dark:     #0891B2;
  --esh-cyan-soft:     #ECFEFF;
  --esh-green:         #22C55E;   /* Φ/Β, CTA, εξοικονόμηση */
  --esh-green-dark:    #16A34A;
  --esh-green-soft:    #F0FDF4;

  /* Σημασιολογικά */
  --esh-text:          #1F2937;
  --esh-text-muted:    #6B7280;
  --esh-text-invert:   #FFFFFF;
  --esh-border:        #E5E7EB;
  --esh-border-dark:   rgba(255, 255, 255, .12);

  /* Τυπογραφία */
  --esh-font-head: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --esh-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Ακτίνες & σκιές */
  --esh-radius-sm: 8px;
  --esh-radius:    14px;
  --esh-radius-lg: 22px;
  --esh-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --esh-shadow:    0 4px 16px rgba(17, 24, 39, .08);
  --esh-shadow-lg: 0 18px 45px rgba(17, 24, 39, .14);

  /* Αποστάσεις */
  --esh-container: 1200px;
  --esh-gutter: 20px;
  --esh-section-y: clamp(56px, 8vw, 104px);

  /* Transitions */
  --esh-t: 220ms cubic-bezier(.4, 0, .2, 1);
}


/* =============================================================
   02. RESET & ΒΑΣΕΙΣ
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--esh-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--esh-text);
  background: var(--esh-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--esh-cyan-dark); text-decoration: none; transition: color var(--esh-t); }
a:hover { color: var(--esh-green-dark); }
ul, ol { margin: 0 0 1rem; padding-left: 1.3em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--esh-border); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--esh-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — προσβασιμότητα */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--esh-graphite);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--esh-radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }


/* =============================================================
   03. ΤΥΠΟΓΡΑΦΙΑ
   Ιεραρχία H1 → H4 (σημαντικό για Rank Math / SEO)
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--esh-font-head);
  color: var(--esh-graphite);
  line-height: 1.18;
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--esh-text-muted);
  line-height: 1.65;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--esh-font-head);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--esh-cyan-dark);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--esh-green);
  border-radius: 2px;
}

/* Χρωματιστό highlight μέσα σε τίτλους */
.hl-green { color: var(--esh-green); }
.hl-cyan  { color: var(--esh-cyan); }


/* =============================================================
   04. LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--esh-container);
  margin-inline: auto;
  padding-inline: var(--esh-gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--esh-section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--surface { background: var(--esh-surface); }

.section--dark {
  background: var(--esh-graphite);
  color: rgba(255, 255, 255, .82);
  position: relative;
  overflow: hidden;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .72); }
.section--dark .eyebrow { color: var(--esh-cyan); }

/* Διακοσμητικό πλέγμα για σκούρες ενότητες */
.grid-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 182, 212, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}
.grid-glow > * { position: relative; z-index: 1; }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }


/* =============================================================
   05. ΚΟΥΜΠΙΑ
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--esh-font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 16px 28px;
  border: 2px solid transparent;
  border-radius: var(--esh-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: transform var(--esh-t), background var(--esh-t), color var(--esh-t), border-color var(--esh-t), box-shadow var(--esh-t);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--esh-green);
  color: var(--esh-graphite-900);
  box-shadow: 0 8px 24px rgba(34, 197, 94, .28);
}
.btn--primary:hover { background: var(--esh-green-dark); color: #fff; }

.btn--cyan {
  background: var(--esh-cyan);
  color: var(--esh-graphite-900);
  box-shadow: 0 8px 24px rgba(6, 182, 212, .26);
}
.btn--cyan:hover { background: var(--esh-cyan-dark); color: #fff; }

.btn--dark { background: var(--esh-graphite); color: #fff; }
.btn--dark:hover { background: var(--esh-graphite-800); color: #fff; }

.btn--outline {
  border-color: var(--esh-border);
  color: var(--esh-graphite);
  background: transparent;
}
.btn--outline:hover { border-color: var(--esh-graphite); color: var(--esh-graphite); }

.btn--outline-light {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  background: transparent;
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Link με βελάκι */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--esh-font-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--esh-cyan-dark);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--esh-t); }
.link-arrow:hover svg { transform: translateX(4px); }


/* =============================================================
   06. HEADER / NAVIGATION
   ============================================================= */
.topbar {
  background: var(--esh-graphite-900);
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.topbar__list li { margin: 0; }
.topbar__list a { color: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; gap: 7px; }
.topbar__list a:hover { color: var(--esh-cyan); }
.topbar__list svg { width: 15px; height: 15px; color: var(--esh-cyan); flex: none; }
.topbar__tagline { font-style: italic; color: rgba(255, 255, 255, .5); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--esh-border);
  transition: box-shadow var(--esh-t);
}
.site-header.is-stuck { box-shadow: var(--esh-shadow); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

/* --- Λογότυπο. Δύο εκδοχές: σκούρα για ανοιχτά φόντα (header),
       λευκή για σκούρα (footer). Φάση 2: custom_logo του WordPress. --- */
.brand { display: flex; flex-direction: column; line-height: 1.05; flex: none; }

.brand__logo {
  display: block;
  width: auto;
  height: 52px;             /* το λογότυπο είναι τρίσειρο — θέλει ύψος για να διαβάζεται */
  max-width: 100%;
}
.brand__logo--footer { height: 60px; margin-bottom: 14px; }

@media (max-width: 560px) {
  .brand__logo { height: 42px; }
}
.brand__name {
  display: block;
  font-family: var(--esh-font-head);
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--esh-graphite);
}
.brand__name .brand__accent { color: var(--esh-cyan-dark); }
.brand__tagline {
  display: block;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--esh-text-muted);
  margin-top: 4px;
  font-weight: 500;
}

.main-nav { margin-inline-start: auto; }
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav__list li { margin: 0; position: relative; }
.main-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--esh-font-head);
  font-weight: 600;
  font-size: .97rem;
  color: var(--esh-graphite-800);
  padding: 10px 14px;
  border-radius: var(--esh-radius-sm);
}
.main-nav__list > li > a:hover,
.main-nav__list > li.is-current > a { color: var(--esh-cyan-dark); background: var(--esh-surface); }
.main-nav__list > li.is-current > a { box-shadow: inset 0 -2px 0 var(--esh-green); }
.main-nav__caret { width: 12px; height: 12px; transition: transform var(--esh-t); }

/* Υπομενού Υπηρεσιών (WordPress: sub-menu) */
.sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  box-shadow: var(--esh-shadow-lg);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--esh-t), transform var(--esh-t), visibility var(--esh-t);
}
.has-children:hover .sub-menu,
.has-children:focus-within .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.has-children:hover .main-nav__caret { transform: rotate(180deg); }
.sub-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--esh-radius-sm);
  font-size: .95rem;
  font-weight: 600;
  color: var(--esh-graphite-800);
  font-family: var(--esh-font-head);
}
.sub-menu a:hover { background: var(--esh-surface); color: var(--esh-cyan-dark); }
.sub-menu svg { width: 18px; height: 18px; color: var(--esh-cyan); flex: none; }

.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }

/* Burger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--esh-border);
  background: #fff;
  border-radius: var(--esh-radius-sm);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--esh-graphite);
  position: relative;
  transition: background var(--esh-t);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--esh-graphite);
  transition: transform var(--esh-t), top var(--esh-t);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }


/* =============================================================
   07. HERO
   ============================================================= */
.hero {
  position: relative;
  background: var(--esh-graphite);
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 92px);
}
.hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -220px;
  background: radial-gradient(circle, rgba(6, 182, 212, .28) 0%, transparent 65%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

/* --------------------------------------------------------------
   HERO ΜΕ BANNER ΥΠΗΡΕΣΙΩΝ
   Το εταιρικό infographic είναι πλατύ (2.16:1) και γεμάτο κείμενο.
   Σε στήλη ~500px τα κείμενά του γίνονται δυσανάγνωστα, γι' αυτό
   ο τίτλος πάει πάνω σε ΜΙΑ στήλη και το banner από κάτω, σε
   πλήρες πλάτος (~1160px), όπου διαβάζεται κανονικά.
   -------------------------------------------------------------- */
.hero--banner .hero__inner { grid-template-columns: 1fr; }
.hero--banner .hero__text .lead { max-width: 68ch; }
.hero--banner .hero__media { margin-top: 6px; }
/* Ο τίτλος του hero είναι μεγάλος σε λέξεις — μικρότερη κλίμακα ώστε να
   χωράει χωρίς να «σπρώχνει» κάτω το CTA. */
.hero h1 {
  color: #fff;
  margin-bottom: 20px;
  font-size: clamp(1.85rem, 3.2vw, 2.8rem);
  line-height: 1.14;
}
.hero__text .lead { color: rgba(255, 255, 255, .75); margin-bottom: 30px; }
.hero .btn-row { margin-bottom: 34px; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--esh-font-head);
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--esh-border-dark);
  color: rgba(255, 255, 255, .85);
}
.hero__badge svg { width: 14px; height: 14px; color: var(--esh-green); }

/* Λωρίδα εμπιστοσύνης κάτω από το hero */
.trust-strip {
  border-top: 1px solid var(--esh-border-dark);
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.trust-strip__item { display: flex; gap: 12px; align-items: flex-start; }
.trust-strip__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(6, 182, 212, .12);
  color: var(--esh-cyan);
}
.trust-strip__icon svg { width: 20px; height: 20px; }
.trust-strip strong {
  display: block;
  font-family: var(--esh-font-head);
  color: #fff;
  font-size: 1rem;
  line-height: 1.3;
}
.trust-strip span { font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* Μικρό hero για εσωτερικές σελίδες */
.page-hero {
  background: var(--esh-graphite);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(44px, 6vw, 76px);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -160px; top: -240px;
  background: radial-gradient(circle, rgba(34, 197, 94, .22) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 2; max-width: 780px; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgba(255, 255, 255, .72); margin-bottom: 0; }

/* Breadcrumbs — φιλικά σε schema (Rank Math breadcrumbs) */
.breadcrumb { font-size: .85rem; margin-bottom: 18px; color: rgba(255, 255, 255, .55); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: rgba(255, 255, 255, .3); }
.breadcrumb a { color: rgba(255, 255, 255, .75); }
.breadcrumb a:hover { color: var(--esh-cyan); }
.breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .55); }


/* =============================================================
   08. ΚΑΡΤΕΣ & COMPONENTS
   ============================================================= */

/* --- Κάρτα κοινού (Ιδιώτης / Επιχείρηση) --- */
.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--esh-radius-lg);
  border: 1px solid var(--esh-border);
  background: #fff;
  overflow: hidden;
  transition: transform var(--esh-t), box-shadow var(--esh-t), border-color var(--esh-t);
}
.audience-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--esh-cyan);
}
.audience-card--business::before { background: var(--esh-green); }
.audience-card:hover { transform: translateY(-5px); box-shadow: var(--esh-shadow-lg); border-color: transparent; }
.audience-card__icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--esh-cyan-soft);
  color: var(--esh-cyan-dark);
  margin-bottom: 20px;
}
.audience-card--business .audience-card__icon { background: var(--esh-green-soft); color: var(--esh-green-dark); }
.audience-card__icon svg { width: 28px; height: 28px; }
.audience-card ul { list-style: none; padding: 0; margin: 18px 0 26px; }
.audience-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px dashed var(--esh-border);
  font-size: .96rem;
}
.audience-card li:last-child { border-bottom: 0; }
.audience-card li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--esh-green); }
.audience-card .btn { margin-top: auto; align-self: flex-start; }

/* --- Κάρτα υπηρεσίας --- */
.service-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  transition: transform var(--esh-t), box-shadow var(--esh-t), border-color var(--esh-t);
  height: 100%;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--esh-shadow-lg); border-color: transparent; }
.service-card__icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--esh-graphite);
  color: var(--esh-cyan);
  margin-bottom: 20px;
  transition: background var(--esh-t), color var(--esh-t);
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card:hover .service-card__icon { background: var(--esh-cyan); color: var(--esh-graphite-900); }
.service-card--green .service-card__icon { color: var(--esh-green); }
.service-card--green:hover .service-card__icon { background: var(--esh-green); color: var(--esh-graphite-900); }
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: .95rem; color: var(--esh-text-muted); margin-bottom: 18px; }
.service-card .link-arrow { margin-top: auto; }

/* --- Λίστα με τικ (λίστες υπηρεσιών) --- */
/* --------------------------------------------------------------
   ΛΙΣΤΑ ΜΕ ΤΙΚ
   GRID, ΟΧΙ FLEX. Με flex, κάθε στοιχείο μέσα στο <li> (π.χ. το
   <strong> του τίτλου) γινόταν ξεχωριστό flex item και στριμωχνόταν
   σε δική του στενή στήλη — ο τίτλος «έσπαγε» κάθετα και η περιγραφή
   στοιχιζόταν δίπλα του. Με grid ορίζουμε ρητά μία στήλη για το
   εικονίδιο και μία για το κείμενο, οπότε τίτλος και περιγραφή
   ξεκινούν πάντα από την ίδια κάθετη γραμμή, ανεξάρτητα από το
   μήκος τους ή το πλήθος των στοιχείων της λίστας.
   -------------------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--esh-border);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--esh-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Τίτλος και περιγραφή: πάντα στη 2η στήλη, η μία κάτω από την άλλη.
   Τα <li> που έχουν μόνο σκέτο κείμενο τοποθετούνται αυτόματα εκεί. */
.check-list li > strong,
.check-list li > span { grid-column: 2; }
.check-list li > strong {
  display: block;
  color: var(--esh-graphite);
  line-height: 1.45;
}
.check-list li > span {
  display: block;
  color: var(--esh-text-muted);
  font-size: .95rem;
  line-height: 1.6;
}
.check-list--dark li > strong { color: #fff; }
.check-list--dark li > span { color: rgba(255, 255, 255, .68); }
.check-list--dark li { border-color: var(--esh-border-dark); }
.check-list--cyan li::before {
  background-color: var(--esh-cyan-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- "Γιατί εμάς" feature --- */
.feature { padding: 30px 26px; border-radius: var(--esh-radius); background: rgba(255, 255, 255, .04); border: 1px solid var(--esh-border-dark); }
.feature__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(34, 197, 94, .14);
  color: var(--esh-green);
  margin-bottom: 18px;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { font-size: .93rem; color: rgba(255, 255, 255, .68); }

/* --- Αριθμημένα βήματα (διαδικασία) --- */
.steps { counter-reset: step; display: grid; gap: 20px; }
.step {
  position: relative;
  padding: 26px 26px 26px 78px;
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  inset-inline-start: 26px;
  top: 24px;
  font-family: var(--esh-font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--esh-cyan-dark);
  background: var(--esh-cyan-soft);
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .94rem; color: var(--esh-text-muted); }

/* --- Στατιστικά --- */
.stat { text-align: center; padding: 24px 16px; }
.stat__num {
  font-family: var(--esh-font-head);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  color: var(--esh-cyan);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat--green .stat__num { color: var(--esh-green); }
.stat p { font-size: .92rem; color: rgba(255, 255, 255, .68); margin: 0; }

/* --- Κάρτα πληροφορίας επικοινωνίας --- */
.info-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  height: 100%;
}
.info-card__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--esh-cyan-soft);
  color: var(--esh-cyan-dark);
}
.info-card__icon svg { width: 22px; height: 22px; }
.info-card h3 { font-size: 1rem; margin-bottom: 4px; }
.info-card p, .info-card a { font-size: .95rem; color: var(--esh-text-muted); margin: 0; }
.info-card a:hover { color: var(--esh-cyan-dark); }

/* Δύο αριθμοί (σταθερό + κινητό) στο ίδιο πλαίσιο.
   Η ετικέτα μπαίνει ΠΑΝΩ από τον αριθμό, όχι δίπλα: το σώμα της κάρτας
   είναι ~146px σε grid 4 στηλών, οπότε «Σταθερό + 2316 027 726» δίπλα-δίπλα
   δεν χωρούσε και ο αριθμός έσπαγε σε δεύτερη γραμμή. */
.info-card__line { display: block; }
.info-card__line + .info-card__line { margin-top: 10px; }
.info-card__label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--esh-graphite-500);
  margin-bottom: 2px;
}

/* --- CTA banner --- */
.cta-band {
  background: linear-gradient(120deg, var(--esh-graphite) 0%, var(--esh-graphite-800) 100%);
  border-radius: var(--esh-radius-lg);
  padding: clamp(32px, 4.5vw, 56px);
  color: rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -120px; bottom: -220px;
  background: radial-gradient(circle, rgba(34, 197, 94, .28) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255, 255, 255, .7); margin: 0; max-width: 560px; }

/* --- Ειδοποίηση / σημείωση --- */
/* Σημείωση: block (όχι flex) ώστε τα inline στοιχεία μέσα στο κείμενο
   —σύνδεσμοι, <strong>— να συνεχίζουν κανονικά τη ροή. Το εικονίδιο
   ευθυγραμμίζεται inline με την πρώτη γραμμή. */
.note {
  padding: 16px 20px;
  border-inline-start: 4px solid var(--esh-cyan);
  background: var(--esh-cyan-soft);
  border-radius: 0 var(--esh-radius-sm) var(--esh-radius-sm) 0;
  font-size: .93rem;
  line-height: 1.6;
}
.note > svg {
  display: inline-block;
  width: 19px;
  height: 19px;
  vertical-align: -4px;
  margin-inline-end: 8px;
  color: var(--esh-cyan-dark);
}
.note--green { border-color: var(--esh-green); background: var(--esh-green-soft); }
.note--green > svg { color: var(--esh-green-dark); }

/* --- FAQ (accordion, schema-friendly) --- */
.faq-item {
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--esh-font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--esh-graphite);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--esh-cyan-dark);
  line-height: 1;
  flex: none;
  transition: transform var(--esh-t);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 24px 22px; color: var(--esh-text-muted); font-size: .96rem; }


/* =============================================================
   09. ΦΟΡΜΕΣ
   ============================================================= */
.form-card {
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-lg);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--esh-shadow-lg);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--esh-font-head);
  font-weight: 700;
  font-size: .88rem;
  color: var(--esh-graphite-800);
}
.field .req { color: var(--esh-green-dark); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--esh-font-body);
  font-size: 1rem;
  color: var(--esh-text);
  padding: 13px 15px;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm);
  background: var(--esh-surface);
  transition: border-color var(--esh-t), box-shadow var(--esh-t), background var(--esh-t);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--esh-cyan);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .14);
}
.field__hint { font-size: .8rem; color: var(--esh-text-muted); }

/* Upload λογαριασμού */
.file-drop {
  position: relative;
  border: 2px dashed var(--esh-graphite-300);
  border-radius: var(--esh-radius);
  background: var(--esh-surface);
  padding: 26px 20px;
  text-align: center;
  transition: border-color var(--esh-t), background var(--esh-t);
  cursor: pointer;
}
.file-drop:hover,
.file-drop.is-active { border-color: var(--esh-green); background: var(--esh-green-soft); }
.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.file-drop__icon { color: var(--esh-green-dark); margin: 0 auto 10px; width: 32px; height: 32px; }
.file-drop__title { font-family: var(--esh-font-head); font-weight: 700; color: var(--esh-graphite); display: block; }
.file-drop__meta { font-size: .82rem; color: var(--esh-text-muted); }
.file-drop__name { font-size: .88rem; color: var(--esh-green-dark); font-weight: 600; margin-top: 8px; }

/* Consent GDPR */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .87rem;
  color: var(--esh-text-muted);
  line-height: 1.55;
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--esh-green);
  cursor: pointer;
}

/* Μήνυμα αποτελέσματος (Φάση 2: wp_mail) */
.form-message {
  display: none;
  padding: 14px 18px;
  border-radius: var(--esh-radius-sm);
  font-size: .93rem;
  margin-bottom: 18px;
}
.form-message.is-visible { display: block; }
.form-message--ok { background: var(--esh-green-soft); color: var(--esh-green-dark); border: 1px solid rgba(34, 197, 94, .35); }
.form-message--error { background: #FEF2F2; color: #B91C1C; border: 1px solid rgba(185, 28, 28, .25); }


/* =============================================================
   10. ΕΙΚΟΝΕΣ / PLACEHOLDERS
   -------------------------------------------------------------
   ΟΛΕΣ οι εικόνες μπαίνουν μέσα σε .media wrapper με σταθερό
   aspect-ratio, ώστε η αντικατάσταση να είναι μονογραμμική:
   <div class="media media--16x9"><img src="..." alt="..."></div>
   Στη Φάση 2 τα placeholders γίνονται featured images /
   custom fields και αλλάζουν από το dashboard.
   ============================================================= */
.media {
  position: relative;
  border-radius: var(--esh-radius-lg);
  overflow: hidden;
  background: var(--esh-surface);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
/* Εταιρικό infographic — φυσική αναλογία, χωρίς crop */
.media--banner { aspect-ratio: 1600 / 731; background: var(--esh-graphite); }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--3x2  { aspect-ratio: 3 / 2; }

/* Προσωρινό placeholder — αφαιρείται μόλις μπει πραγματική φωτό */
.media--placeholder {
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  border: 2px dashed var(--esh-graphite-300);
  background:
    repeating-linear-gradient(45deg, rgba(6, 182, 212, .05) 0 12px, transparent 12px 24px),
    var(--esh-surface);
}
.media--placeholder .media__label {
  display: block;
  font-family: var(--esh-font-head);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--esh-cyan-dark);
  margin-bottom: 8px;
}
.media--placeholder .media__desc { font-size: .9rem; color: var(--esh-text-muted); max-width: 320px; line-height: 1.5; }
.media--placeholder .media__dims {
  display: block;
  font-size: .75rem;
  color: var(--esh-graphite-500);
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.media--placeholder-dark {
  border-color: rgba(255, 255, 255, .18);
  background:
    repeating-linear-gradient(45deg, rgba(6, 182, 212, .07) 0 12px, transparent 12px 24px),
    rgba(255, 255, 255, .03);
}
.media--placeholder-dark .media__desc { color: rgba(255, 255, 255, .6); }
.media--placeholder-dark .media__label { color: var(--esh-cyan); }
.media--placeholder-dark .media__dims { color: rgba(255, 255, 255, .35); }

/* Πλαίσιο εικόνας hero με "γυάλινη" κάρτα */
.media--framed { box-shadow: var(--esh-shadow-lg); }


/* =============================================================
   11. BLOG
   ============================================================= */
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  overflow: hidden;
  height: 100%;
  transition: transform var(--esh-t), box-shadow var(--esh-t), border-color var(--esh-t);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--esh-shadow-lg); border-color: transparent; }
.post-card .media { border-radius: 0; }
.post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--esh-cyan-dark); }
.post-card p { font-size: .93rem; color: var(--esh-text-muted); margin-bottom: 18px; }
.post-card .link-arrow { margin-top: auto; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--esh-text-muted);
  margin-bottom: 12px;
}
.badge {
  display: inline-block;
  font-family: var(--esh-font-head);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--esh-cyan-soft);
  color: var(--esh-cyan-dark);
}
.badge--green { background: var(--esh-green-soft); color: var(--esh-green-dark); }
.badge--dark { background: rgba(255, 255, 255, .1); color: #fff; }

/* Φίλτρα κατηγοριών */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter-row a {
  font-family: var(--esh-font-head);
  font-size: .88rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--esh-border);
  color: var(--esh-graphite-800);
  background: #fff;
}
.filter-row a:hover, .filter-row a.is-active { background: var(--esh-graphite); border-color: var(--esh-graphite); color: #fff; }

/* Άρθρο */
.entry-content { font-size: 1.05rem; }
.entry-content h2 { margin-top: 2.2em; }
.entry-content h3 { margin-top: 1.8em; }
.entry-content ul, .entry-content ol { margin-bottom: 1.4rem; }
.entry-content blockquote {
  margin: 2rem 0;
  padding: 20px 26px;
  border-inline-start: 4px solid var(--esh-green);
  background: var(--esh-surface);
  border-radius: 0 var(--esh-radius) var(--esh-radius) 0;
  font-size: 1.05rem;
  color: var(--esh-graphite-700);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.sidebar { position: sticky; top: 110px; }
.widget {
  background: var(--esh-surface);
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  padding: 24px;
  margin-bottom: 20px;
}
.widget h3 { font-size: 1.02rem; margin-bottom: 14px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 9px 0; border-bottom: 1px solid var(--esh-border); font-size: .93rem; }
.widget li:last-child { border-bottom: 0; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 44px; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--esh-radius-sm);
  border: 1px solid var(--esh-border);
  font-family: var(--esh-font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--esh-graphite-800);
  background: #fff;
  padding-inline: 12px;
}
.pagination .is-current { background: var(--esh-graphite); border-color: var(--esh-graphite); color: #fff; }


/* =============================================================
   12. FOOTER
   ============================================================= */
.site-footer {
  background: var(--esh-graphite-900);
  color: rgba(255, 255, 255, .62);
  padding-top: clamp(48px, 6vw, 76px);
  font-size: .93rem;
}
.site-footer h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer a { color: rgba(255, 255, 255, .62); }
.site-footer a:hover { color: var(--esh-cyan); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: 44px;
}
.footer-brand .brand__name { color: #fff; font-size: 1.25rem; }
.footer-brand .brand__name .brand__accent { color: var(--esh-cyan); }
.footer-brand .brand__tagline { color: rgba(255, 255, 255, .45); }
.footer-brand p { margin-top: 18px; max-width: 320px; }

.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--esh-cyan); }

/* Social — κρύβονται αυτόματα αν το πεδίο είναι κενό (Φάση 2) */
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--esh-border-dark);
  color: rgba(255, 255, 255, .75);
  transition: background var(--esh-t), color var(--esh-t), border-color var(--esh-t);
}
.social-row a:hover { background: var(--esh-cyan); border-color: var(--esh-cyan); color: var(--esh-graphite-900); }
.social-row svg { width: 18px; height: 18px; }

/* Νομικά στοιχεία εταιρείας */
.footer-legal {
  border-top: 1px solid var(--esh-border-dark);
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
}

.footer-bottom {
  border-top: 1px solid var(--esh-border-dark);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: rgba(255, 255, 255, .45);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom li { margin: 0; }

/* Sticky mobile call bar */
.mobile-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(17, 24, 39, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--esh-border-dark);
  padding: 10px 14px;
  gap: 10px;
}
.mobile-cta .btn { flex: 1; padding: 13px 12px; font-size: .92rem; }


/* =============================================================
   13. COOKIE BANNER (GDPR)
   ============================================================= */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius);
  box-shadow: var(--esh-shadow-lg);
  padding: 24px;
  transform: translateY(140%);
  transition: transform 340ms cubic-bezier(.4, 0, .2, 1);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner h2 { font-size: 1.05rem; margin-bottom: 8px; }
.cookie-banner p { font-size: .88rem; color: var(--esh-text-muted); margin-bottom: 16px; }
.cookie-banner .btn-row { gap: 10px; }
.cookie-banner .btn { flex: 1; }


/* =============================================================
   13a. VIBER / WHATSAPP — ΠΛΩΤΑ ΚΟΥΜΠΙΑ
   -------------------------------------------------------------
   ΑΝΕΝΕΡΓΟ: το markup παράγεται μόνο όταν οριστεί εταιρικό κινητό
   (SITE["mobile_link"] στο build.py · custom field στη Φάση 2).
   Το στυλ μένει εδώ έτοιμο, ώστε η ενεργοποίηση να μη χρειάζεται
   καμία παρέμβαση σε CSS.
   ============================================================= */
.chat-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-dock__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 20px rgba(17, 24, 39, .28);
  transition: transform var(--esh-t), box-shadow var(--esh-t);
}
.chat-dock__btn:hover { transform: translateY(-3px); color: #fff; }
.chat-dock__btn svg { width: 26px; height: 26px; }
.chat-dock__btn--viber { background: #7360F2; }
.chat-dock__btn--whatsapp { background: #25D366; }

@media (max-width: 760px) {
  /* Πάνω από τη sticky μπάρα κλήσης */
  .chat-dock { right: 14px; bottom: 84px; }
  .chat-dock__btn { width: 46px; height: 46px; }
  .chat-dock__btn svg { width: 23px; height: 23px; }
}


/* =============================================================
   13b. ΧΑΡΤΗΣ (Google Maps embed)
   ============================================================= */
.map-embed {
  border-radius: var(--esh-radius-lg);
  overflow: hidden;
  border: 1px solid var(--esh-border);
  box-shadow: var(--esh-shadow);
  line-height: 0;
  background: var(--esh-surface);
}
.map-embed iframe { display: block; width: 100%; border: 0; }


/* =============================================================
   13c. ΕΠΙΚΕΦΑΛΙΔΕΣ ΜΕΣΑ ΣΕ COMPONENTS
   Η ιεραρχία H1→H2→H3 είναι σημασιολογική (SEO / Rank Math).
   Το οπτικό μέγεθος ορίζεται εδώ ανά component, ώστε ένα <h2>
   μέσα σε κάρτα να μη «σπάει» το layout.
   ============================================================= */
.service-card h2,
.post-card h2,
.audience-card h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  margin-bottom: 10px;
}
.post-card h2 a { color: inherit; }
.post-card h2 a:hover { color: var(--esh-cyan-dark); }
.info-card h2,
.widget h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.widget h2 { margin-bottom: 14px; }
.cookie-banner h2 { font-size: 1.05rem; }

/* Άρθρο + πλαϊνή στήλη */
.split--article {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: clamp(32px, 4vw, 56px);
}


/* =============================================================
   14. UTILITIES
   ============================================================= */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 34px; }
.muted { color: var(--esh-text-muted); }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Εμφάνιση κατά το scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}


/* =============================================================
   15. RESPONSIVE (mobile-first προτεραιότητα στο mobile UX)
   ============================================================= */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .topbar__tagline { display: none; }

  .nav-toggle { display: inline-flex; }

  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    background: #fff;
    box-shadow: -10px 0 40px rgba(17, 24, 39, .18);
    padding: 92px 22px 32px;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
    z-index: 105;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav__list > li > a { padding: 14px 12px; font-size: 1.05rem; justify-content: space-between; }

  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-inline-start: 2px solid var(--esh-border);
    border-radius: 0;
    margin: 2px 0 8px 12px;
    padding: 0 0 0 6px;
    display: none;
  }
  .has-children.is-open > .sub-menu { display: block; }
  .has-children.is-open > a .main-nav__caret { transform: rotate(180deg); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--esh-t), visibility var(--esh-t);
    /* Κάτω από τον header (100) και πάνω από τη μπάρα κλήσης (90).
       Ο header είναι stacking context, οπότε το z-index του .main-nav
       μετράει ΜΟΝΟ μέσα του — αν το backdrop ήταν πιο ψηλά από τον
       header, θα σκίαζε και το ίδιο το ανοιχτό μενού. */
    z-index: 95;
  }
  .nav-backdrop.is-visible { opacity: 1; visibility: visible; }

  /* ΚΡΙΣΙΜΟ — ΜΗΝ ΕΠΑΝΑΦΕΡΕΤΕ ΤΟ backdrop-filter ΕΔΩ.
     Το backdrop-filter δημιουργεί containing block για τα position:fixed
     παιδιά του. Επειδή το .main-nav είναι μέσα στον header, το inset:0
     μετριόταν ως προς το ύψος του header (~78px) και όχι ως προς το
     viewport — το μενού άνοιγε κομμένο, δείχνοντας μόνο το πρώτο link. */
  .site-header {
    backdrop-filter: none;
    background: #fff;
  }

  .header-cta .btn { display: none; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  /* Στο banner variant το γραφικό μένει ΚΑΤΩ από τον τίτλο */
  .hero--banner .hero__media { order: 0; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split--article { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar__list { gap: 14px; font-size: .8rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .cta-band { flex-direction: column; align-items: flex-start; text-align: start; }
  .mobile-cta { display: flex; }
  .cookie-banner { left: 12px; right: 12px; bottom: 82px; max-width: none; padding: 20px; }

  /* Ο χώρος για τη sticky μπάρα κλήσης μπαίνει ΜΕΣΑ στο footer, όχι ως
     padding-bottom στο body — αλλιώς φαινόταν μια λευκή λωρίδα (το φόντο
     του body) ανάμεσα στο σκούρο footer και στη μπάρα. */
  .site-footer { padding-bottom: 96px; }
}

@media (max-width: 420px) {
  .topbar__list li:not(.topbar__phone) { display: none; }
}


/* =============================================================
   PRINT
   ============================================================= */
@media print {
  .site-header, .topbar, .site-footer, .cookie-banner, .mobile-cta, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
}