/*
Theme Name:   Smarthost Child
Theme URI:    https://smarthost.gr
Description:  Child theme του Hello Elementor για το smarthost.gr. Κρατά την παλέτα, την τυπογραφία και τα utility classes του brand σε ένα σημείο, ώστε τίποτα να μην είναι hardcoded μέσα στα widgets.
Author:       Smarthost
Author URI:   https://smarthost.gr
Template:     hello-elementor
Version:      1.0.5
Text Domain:  smarthost-child
License:      GNU General Public License v2 or later
Tags:         elementor
*/

/* ==========================================================================
   1. TOKENS
   Κάθε χρώμα του site ζει εδώ. Αν αλλάξεις απόχρωση, την αλλάζεις μία φορά.
   Τα ίδια χρώματα είναι καταχωρημένα και στα Elementor Global Colors — δες
   το tools/smarthost-global-settings.php. Κράτα τα δύο συγχρονισμένα.
   ========================================================================== */

:root {

  /* --- Grounds: σκούρα (το brand) ------------------------------------- */
  --sh-navy-900: #03071E;   /* hero, CTA, footer — το υπάρχον brand χρώμα  */
  --sh-navy-800: #080D24;   /* σκούρες ενότητες σώματος                    */
  --sh-navy-700: #101733;   /* ανασηκωμένη επιφάνεια πάνω σε σκούρο        */

  /* --- Grounds: φωτεινά ----------------------------------------------- */
  --sh-paper:    #F4F6FA;   /* φωτεινές ενότητες (αντικαθιστά το #F5F5F5) */
  --sh-white:    #FFFFFF;

  /* --- Κείμενο -------------------------------------------------------- */
  --sh-ink:         #0B1020;  /* κείμενο σε φωτεινό  — 17.4:1 σε paper     */
  --sh-ink-muted:   #5A6478;  /* δεύτερης τάξης      —  5.5:1 σε paper     */
  --sh-ink-light:   #E8ECF4;  /* κείμενο σε σκούρο   — 16.8:1 σε navy-900  */
  --sh-ink-light-muted: #9AA7BF; /* δεύτερης τάξης   —  8.2:1 σε navy-900  */

  /* --- Ενέργεια: πράσινο ----------------------------------------------
     Ονομάζεται κατά ΡΟΛΟ (primary / action), όχι κατά απόχρωση. Ήταν
     «azure» και μπαγιάτεψε μόλις άλλαξε το χρώμα — γι' αυτό τα ονόματα εδώ
     δεν αναφέρουν ποτέ ποιο χρώμα είναι.                                  */
  --sh-primary:      #03A880; /* κουμπιά & links σε σκούρο — 6,6:1 σε navy */
  --sh-primary-ink:  #027053; /* links σε φωτεινό          — 6,1:1 σε λευκό
                                 ΜΗ χρησιμοποιείς το #03A880 για κείμενο
                                 πάνω σε λευκό: πέφτει στο 3,0:1.          */
  --sh-primary-hover:#04C294; /* hover σε σκούρο           — 8,7:1 σε navy */
  --sh-primary-soft: #E6F7F2; /* απαλό φόντο για info blocks σε φωτεινό    */
  --sh-primary-glow: rgba(3, 168, 128, 0.35); /* περίγραμμα κάρτας σε hover */

  /* --- Έμφαση: amber. Με μέτρο — badges, «Δημοφιλές», ένα νούμερο ----- */
  --sh-accent:      #FAA307;  /* σε navy-900 — 9.8:1                      */
  --sh-accent-ink:  #8A5300;  /* amber ως κείμενο σε φωτεινό              */
  --sh-accent-soft: #FEF3DC;

  /* --- Επιφάνειες & περιγράμματα -------------------------------------- */
  --sh-card-dark:     rgba(255, 255, 255, 0.05); /* το υπάρχον #FFFFFF08    */
  --sh-border-dark:   rgba(255, 255, 255, 0.09);
  --sh-border-light:  #DCE2EC;

  /* --- Σημασιολογικά ---------------------------------------------------
     Κάθε ένα έρχεται σε ΖΕΥΓΟΣ: μία απόχρωση για σκούρο φόντο, μία για
     φωτεινό. Δεν υπάρχει ένα κόκκινο που να περνά AA και στα δύο —
     το #E5484D δίνει 5,1:1 σε navy αλλά μόνο 3,9:1 σε λευκό. */
  --sh-ok:        #12B76A;  /* τα ✓ σε σκούρο  — 7,6:1  */
  --sh-ok-ink:    #0E8F52;  /* τα ✓ σε φωτεινό — 4,1:1  */
  --sh-warn:      #F79009;  /* σε σκούρο       — 8,5:1  */
  --sh-warn-ink:  #8A5300;  /* σε φωτεινό      — 6,3:1  */
  --sh-error:     #FF8A8A;  /* σε σκούρο       — 8,8:1  */
  --sh-error-ink: #B3261E;  /* σε φωτεινό      — 6,5:1  */

  /* --- Gradient (αντικαθιστά το leverage-gradient-heading) ------------- */
  --sh-grad-from: #03A880;
  --sh-grad-to:   #6FE8C8;  /* 13,4:1 σε navy */
  --sh-gradient:  linear-gradient(90deg, var(--sh-grad-from) 0%, var(--sh-grad-to) 100%);

  /* --- Τυπογραφία ------------------------------------------------------ */
  --sh-font-display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --sh-font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* --- Ρυθμός & γεωμετρία ---------------------------------------------- */
  --sh-radius:    15px;  /* το υπάρχον radius των καρτών */
  --sh-radius-sm:  8px;
  --sh-space:     clamp(56px, 7vw, 104px); /* κάθετο padding ενοτήτων */
  --sh-measure:   66ch;                    /* μέγιστο πλάτος τρεχούμενου κειμένου */
  --sh-ease:      cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   2. ΒΑΣΕΙΣ
   ========================================================================== */

body {
  font-family: var(--sh-font-body);
  color: var(--sh-ink);
  background-color: var(--sh-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sh-font-display);
  text-wrap: balance;
}

/* Τρεχούμενο κείμενο δεν πρέπει να ξεπερνά τα ~66 χαρακτήρες.
   Ισχύει μόνο σε κείμενο, όχι σε πλέγματα ή κάρτες. */
.sh-prose > p,
.sh-prose > ul,
.sh-prose > ol {
  max-width: var(--sh-measure);
}

/* Ορατό focus παντού — το Hello Elementor δεν το εγγυάται. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sh-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Ομαλό scroll για τα anchor links του μενού, με σεβασμό στις ρυθμίσεις. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   3. ΕΝΟΤΗΤΕΣ
   Αντικαθιστούν τις κλάσεις odd / featured / auto-section του Leverage.
   Βάλε τη κλάση στο Container, στο Advanced → CSS Classes.
   ========================================================================== */

.sh-dark,
.sh-darker,
.sh-paper {
  padding-top: var(--sh-space);
  padding-bottom: var(--sh-space);
}

/* Το βαθύ brand navy: hero, CTA, footer */
.sh-darker { background-color: var(--sh-navy-900); }

/* Σκούρα ενότητα σώματος */
.sh-dark { background-color: var(--sh-navy-800); }

/* Φωτεινή ενότητα */
.sh-paper { background-color: var(--sh-paper); }

/* Κείμενο μέσα σε σκούρες ενότητες */
.sh-dark, .sh-darker,
.sh-dark p, .sh-darker p,
.sh-dark li, .sh-darker li { color: var(--sh-ink-light); }

.sh-dark h1, .sh-dark h2, .sh-dark h3, .sh-dark h4, .sh-dark h5, .sh-dark h6,
.sh-darker h1, .sh-darker h2, .sh-darker h3, .sh-darker h4, .sh-darker h5, .sh-darker h6 {
  color: var(--sh-white);
}

.sh-dark .sh-muted, .sh-darker .sh-muted { color: var(--sh-ink-light-muted); }
.sh-paper .sh-muted { color: var(--sh-ink-muted); }

.sh-dark a:not(.elementor-button),
.sh-darker a:not(.elementor-button) { color: var(--sh-primary); }

.sh-paper a:not(.elementor-button) { color: var(--sh-primary-ink); }

/* Ενότητα χωρίς κενό από πάνω ή κάτω, όταν δύο ίδιου χρώματος ακουμπούν */
.sh-tight-top    { padding-top: 0; }
.sh-tight-bottom { padding-bottom: 0; }


/* ==========================================================================
   4. ΤΥΠΟΓΡΑΦΙΚΑ UTILITIES
   ========================================================================== */

/* Gradient heading — αντικαθιστά το leverage-gradient-heading.
   Στο Elementor: Heading widget → Advanced → CSS Classes → sh-grad-text */
.sh-grad-text,
.sh-grad-text .elementor-heading-title {
  background: var(--sh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Το descender των ελληνικών (ρ, χ, γ, μ) κόβεται χωρίς αυτό */
  padding-bottom: .08em;
  display: inline-block;
}

/* Fallback: αν ο browser δεν υποστηρίζει background-clip, φαίνεται χρώμα */
@supports not (-webkit-background-clip: text) {
  .sh-grad-text,
  .sh-grad-text .elementor-heading-title {
    -webkit-text-fill-color: var(--sh-primary);
    color: var(--sh-primary);
    background: none;
  }
}

/* Eyebrow / μικρή ετικέτα πάνω από τίτλο.
   ΣΗΜΕΙΩΣΗ ΓΙΑ ΕΛΛΗΝΙΚΑ: επίτηδες ΔΕΝ βάζω text-transform: uppercase.
   Οι browsers δεν αφαιρούν αξιόπιστα τους τόνους στα ελληνικά κεφαλαία
   («Υπηρεσίες» → «ΥΠΗΡΕΣΊΕΣ»), που είναι ορθογραφικό λάθος. Αν θέλεις
   κεφαλαία, γράψ' τα κεφαλαία στο περιεχόμενο χωρίς τόνους. */
.sh-eyebrow {
  font-family: var(--sh-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--sh-primary);
}

.sh-paper .sh-eyebrow { color: var(--sh-primary-ink); }

/* Εισαγωγική παράγραφος */
.sh-lead {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  max-width: 58ch;
}

/* Οτιδήποτε με νούμερα που στοιχίζονται: τιμές, GB, vCPU, RAM.
   Λύνει το ότι το IBM Plex Mono δεν έχει ελληνικά — παίρνουμε στοιχισμένα
   ψηφία χωρίς δεύτερη γραμματοσειρά. */
.sh-num,
.sh-price,
.sh-specs,
table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sh-price {
  font-family: var(--sh-font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
}

.sh-price small {
  font-family: var(--sh-font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--sh-ink-light-muted);
}


/* ==========================================================================
   5. ΚΑΡΤΕΣ & ΠΑΚΕΤΑ
   Αντικαθιστούν το leverage-pricing και το leverage-card.
   Χτίσε το pricing card ΜΙΑ φορά ως Container και σώσε το ως Global Widget.
   ========================================================================== */

/* Η κάρτα σε σκούρο φόντο — το υπάρχον #FFFFFF08 + radius 15px */
.sh-card {
  background-color: var(--sh-card-dark);
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius);
  padding: 28px;
  transition: border-color .25s var(--sh-ease), transform .25s var(--sh-ease);
}

.sh-card:hover {
  border-color: var(--sh-primary-glow);
  transform: translateY(-2px);
}

/* Η κάρτα σε φωτεινό φόντο */
.sh-card-light {
  background-color: var(--sh-white);
  border: 1px solid var(--sh-border-light);
  border-radius: var(--sh-radius);
  padding: 28px;
  transition: border-color .25s var(--sh-ease), transform .25s var(--sh-ease);
}

.sh-card-light:hover {
  border-color: var(--sh-primary);
  transform: translateY(-2px);
}

/* Το προτεινόμενο πακέτο */
.sh-card-featured {
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 1px var(--sh-primary), 0 24px 48px -24px var(--sh-primary-glow);
}

/* Badge «Δημοφιλές» */
.sh-badge {
  display: inline-block;
  font-family: var(--sh-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--sh-accent);
  color: var(--sh-navy-900);
}

/* Λίστα χαρακτηριστικών με ✓ — αντικαθιστά το check_list_items */
.sh-check-list ul,
ul.sh-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sh-check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.5;
}

/* Το ✓ μπαίνει ως mask, ώστε να παίρνει το χρώμα από το token — και το token
   αλλάζει ανάλογα με το φόντο της ενότητας. */
.sh-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 16px;
  height: 16px;
  background-color: var(--sh-ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.6 6.1l-4.2 4.2a.8.8 0 01-1.1 0L4.4 8.4A.8.8 0 015.5 7.3l1.3 1.3 3.7-3.6a.8.8 0 011.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.6 6.1l-4.2 4.2a.8.8 0 01-1.1 0L4.4 8.4A.8.8 0 015.5 7.3l1.3 1.3 3.7-3.6a.8.8 0 011.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Σε φωτεινή ενότητα το ανοιχτό πράσινο πέφτει στο 2,6:1 — πολύ χαμηλά ακόμα
   και για γραφικό στοιχείο. Εδώ μπαίνει η σκούρα εκδοχή. */
.sh-paper .sh-check-list li::before,
.sh-card-light .sh-check-list li::before {
  background-color: var(--sh-ok-ink);
}


/* ==========================================================================
   6. PORTFOLIO / LOGOS
   Τα 28 logo έχουν ήδη links στα sites — είναι portfolio, όχι carousel.
   Χρησιμοποιείται με Loop Grid ή απλό Container σε grid.
   Κρατά το ίδιο ύψος για όλα, όπως έκανε το custom CSS του carousel.
   ========================================================================== */

.sh-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background-color: var(--sh-border-dark);
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius);
  overflow: hidden;
}

.sh-logo-grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 20px;
  background-color: var(--sh-navy-800);
  transition: background-color .25s var(--sh-ease);
}

.sh-logo-grid > *:hover { background-color: var(--sh-navy-700); }

.sh-logo-grid img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: .75;
  transition: opacity .25s var(--sh-ease);
}

.sh-logo-grid > *:hover img { opacity: 1; }

/* Αν κρατήσεις carousel αντί για grid, αυτό κάνει ό,τι έκανε το παλιό
   custom CSS του leverage-logo-carousel. */
.sh-logo-carousel .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.sh-logo-carousel .swiper-slide img {
  max-height: 100px;
  object-fit: contain;
}


/* ==========================================================================
   7. ΚΟΥΜΠΙΑ
   ========================================================================== */

.elementor-button {
  font-family: var(--sh-font-body);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--sh-radius-sm);
  transition: background-color .2s var(--sh-ease), transform .2s var(--sh-ease);
}

.elementor-button:hover { transform: translateY(-1px); }

/* Δευτερεύον κουμπί, περιγραμμένο — για σκούρο φόντο */
.sh-btn-ghost .elementor-button,
.elementor-button.sh-btn-ghost {
  background-color: transparent;
  border: 1px solid var(--sh-border-dark);
  color: var(--sh-ink-light);
}

.sh-btn-ghost .elementor-button:hover,
.elementor-button.sh-btn-ghost:hover {
  border-color: var(--sh-primary);
  color: var(--sh-primary);
}


/* ==========================================================================
   8. ΠΙΝΑΚΕΣ ΣΥΓΚΡΙΣΗΣ
   Ο πίνακας πακέτων δεν πρέπει ποτέ να κάνει τη σελίδα να κυλάει πλάγια.
   ========================================================================== */

.sh-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius);
}

.sh-paper .sh-scroll { border-color: var(--sh-border-light); }

.sh-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
}

.sh-scroll th,
.sh-scroll td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--sh-border-dark);
}

.sh-paper .sh-scroll th,
.sh-paper .sh-scroll td { border-bottom-color: var(--sh-border-light); }

.sh-scroll th {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
}

.sh-scroll td.num,
.sh-scroll th.num { text-align: right; white-space: nowrap; }

.sh-scroll tbody tr:last-child td { border-bottom: 0; }


/* ==========================================================================
   9. ΦΟΡΜΕΣ
   Καλύπτει και Elementor Forms και Contact Form 7, ώστε να μοιάζουν ίδιες
   όποια κρατήσεις.
   ========================================================================== */

.sh-dark input[type="text"],
.sh-dark input[type="email"],
.sh-dark input[type="tel"],
.sh-dark textarea,
.sh-dark select,
.sh-darker input[type="text"],
.sh-darker input[type="email"],
.sh-darker input[type="tel"],
.sh-darker textarea,
.sh-darker select {
  background-color: var(--sh-card-dark);
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-ink-light);
  padding: 12px 14px;
  font-family: var(--sh-font-body);
  font-size: 16px; /* <16px κάνει zoom στο iOS Safari */
  width: 100%;
}

.sh-dark ::placeholder,
.sh-darker ::placeholder { color: var(--sh-ink-light-muted); opacity: 1; }

.sh-dark input:focus,
.sh-dark textarea:focus,
.sh-darker input:focus,
.sh-darker textarea:focus {
  border-color: var(--sh-primary);
  outline: none;
}

.wpcf7 form .wpcf7-response-output {
  border-radius: var(--sh-radius-sm);
  border-width: 1px;
  font-size: 15px;
}

/* Μηνύματα σφάλματος: σκούρο κόκκινο σε φωτεινό φόντο, ανοιχτό σε σκούρο. */
.wpcf7-not-valid-tip,
.elementor-message-danger,
.sh-paper .wpcf7-not-valid-tip {
  color: var(--sh-error-ink);
  font-size: 14px;
}

.sh-dark .wpcf7-not-valid-tip,
.sh-darker .wpcf7-not-valid-tip,
.sh-dark .elementor-message-danger,
.sh-darker .elementor-message-danger {
  color: var(--sh-error);
}


/* ==========================================================================
   10. ΜΙΚΡΟΔΙΟΡΘΩΣΕΙΣ
   ========================================================================== */

/* Εικόνες να μην ξεχειλώνουν ποτέ */
img, svg, video { max-width: 100%; height: auto; }

/* Το background video του hero: μην τραβάει bandwidth στο mobile.
   Το κρύβεις κιόλας από το Elementor, αυτό είναι ζώνη ασφαλείας. */
@media (max-width: 767px) {
  .elementor-background-video-container { display: none !important; }
}

/* Breadcrumbs (Rank Math) — αντικαθιστά το display_breadcrumb του Leverage */
.sh-breadcrumbs {
  font-size: 14px;
  color: var(--sh-ink-light-muted);
}

.sh-breadcrumbs a { color: var(--sh-ink-light-muted); text-decoration: none; }
.sh-breadcrumbs a:hover { color: var(--sh-primary); }
.sh-breadcrumbs .separator { margin: 0 8px; opacity: .5; }

/* Skip link για πληκτρολόγιο / screen readers */
.sh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background-color: var(--sh-navy-900);
  color: var(--sh-white);
  border-radius: 0 0 var(--sh-radius-sm) 0;
}

.sh-skip-link:focus {
  left: 0;
}

/* Ο κέρσορας πάνω σε ολόκληρη κάρτα που είναι link */
.sh-card a.sh-cover,
.sh-card-light a.sh-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}


/* ==========================================================================
   11. ΣΥΝΕΡΓΑΣΙΑ ΜΕ ΤΟ ELEMENTOR
   Το Elementor δένει εξ ορισμού τα χρώματα των widget στα Global Colors:
   Heading → Primary, Text Editor → Text, Button → Accent. Τυπώνει γι' αυτό
   inline CSS της μορφής `.elementor-element-abc123 .elementor-heading-title`,
   με specificity 0,2,0 — που νικά τις κλάσεις ενοτήτων μας (0,2,0 αλλά
   φορτώνει μετά).

   Τα templates ορίζουν χρώμα ρητά όπου μπορούν. Αυτά εδώ είναι δίχτυ
   ασφαλείας με 3 κλάσεις (0,3,0) για τα widget των οποίων τα setting keys
   αλλάζουν ανά έκδοση του Elementor Pro, και για ό,τι προσθέσεις μετά.
   ========================================================================== */

/* Post Info: ημερομηνία / συντάκτης σε σκούρο hero */
.sh-dark .elementor-widget-post-info .elementor-icon-list-text,
.sh-dark .elementor-widget-post-info .elementor-icon-list-icon i,
.sh-darker .elementor-widget-post-info .elementor-icon-list-text,
.sh-darker .elementor-widget-post-info .elementor-icon-list-icon i {
  color: var(--sh-ink-light-muted);
}

/* Archive Title σε σκούρο */
.sh-dark .elementor-widget-archive-title .elementor-heading-title,
.sh-darker .elementor-widget-archive-title .elementor-heading-title {
  color: var(--sh-white);
}

/* Κάρτες άρθρων (Posts / Archive Posts, skin cards) σε σκούρο φόντο */
.sh-dark .elementor-posts .elementor-post__card,
.sh-darker .elementor-posts .elementor-post__card {
  background-color: var(--sh-card-dark);
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius);
  overflow: hidden;
}

.sh-dark .elementor-posts .elementor-post__title a,
.sh-darker .elementor-posts .elementor-post__title a {
  color: var(--sh-white);
}

.sh-dark .elementor-posts .elementor-post__title a:hover,
.sh-darker .elementor-posts .elementor-post__title a:hover {
  color: var(--sh-primary);
}

.sh-dark .elementor-posts .elementor-post__excerpt p,
.sh-dark .elementor-posts .elementor-post__meta-data,
.sh-darker .elementor-posts .elementor-post__excerpt p,
.sh-darker .elementor-posts .elementor-post__meta-data {
  color: var(--sh-ink-light-muted);
}

/* Pagination σε σκούρο */
.sh-dark .elementor-pagination .page-numbers,
.sh-darker .elementor-pagination .page-numbers {
  color: var(--sh-ink-light-muted);
}

.sh-dark .elementor-pagination .page-numbers.current,
.sh-darker .elementor-pagination .page-numbers.current {
  color: var(--sh-primary);
}

/* Search Form σε σκούρο */
.sh-dark .elementor-search-form__input,
.sh-darker .elementor-search-form__input {
  background-color: var(--sh-card-dark);
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-ink-light);
  font-size: 16px;
}

.sh-dark .elementor-search-form__input::placeholder,
.sh-darker .elementor-search-form__input::placeholder {
  color: var(--sh-ink-light-muted);
  opacity: 1;
}


/* ==========================================================================
   12. HEADER
   ========================================================================== */

/* Το μενού να μη σπάει σε δεύτερη σειρά στο desktop */
.sh-header .elementor-nav-menu {
  flex-wrap: nowrap;
}

.sh-header .elementor-nav-menu .elementor-item {
  white-space: nowrap;
}

/* Το λογότυπο να μην τραβιέται ούτε να συμπιέζεται */
.sh-header .elementor-widget-theme-site-logo img {
  max-width: 180px;
  width: auto;
}

/* Το header είναι ήδη σκούρο και δεν θέλει το κάθετο padding των ενοτήτων */
.sh-header.sh-darker {
  padding-top: 0;
  padding-bottom: 0;
}

/* Κάτω από tablet, τα κουμπιά ενεργειών κάτω από το μενού */
@media (max-width: 1024px) {
  .sh-header .elementor-nav-menu { flex-wrap: wrap; }
}


/* ==========================================================================
   13. FOOTER
   Οι 4 στήλες ως grid και όχι με ποσοστά σε flex.
   Με ποσοστά 30+22+22+26 = 100% ΣΥΝ 3 κενά των 40px, το άθροισμα ξεπερνά το
   100% και η τελευταία στήλη πέφτει σε νέα σειρά. Το grid μοιράζει τον χώρο
   ΜΕΤΑ την αφαίρεση των κενών, οπότε δεν συμβαίνει ποτέ.

   Η διπλή επιλογή με το .e-con ανεβάζει τη specificity ώστε να νικά το
   display:flex που βάζει το Elementor στα Containers.
   ========================================================================== */

.sh-footer-cols,
.e-con.sh-footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1024px) {
  .sh-footer-cols,
  .e-con.sh-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .sh-footer-cols,
  .e-con.sh-footer-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Οι τίτλοι των στηλών: μικροί, όχι h2 σε μέγεθος τίτλου σελίδας */
.sh-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Οι λίστες του footer χωρίς κουκκίδες και με άνετο ρυθμό */
.sh-footer .elementor-icon-list-items {
  gap: 10px;
}

.sh-footer .elementor-icon-list-item a {
  color: var(--sh-ink-light-muted);
  transition: color .2s var(--sh-ease);
}

.sh-footer .elementor-icon-list-item a:hover {
  color: var(--sh-primary);
}


/* ==========================================================================
   14. ΠΛΕΓΜΑΤΑ ΣΤΗΛΩΝ
   Ίδιο σκεπτικό με το footer: flex + wrap + ποσοστά είναι εύθραυστο, γιατί τα
   ποσοστά υπολογίζονται ΠΡΙΝ τα κενά και το άθροισμα ξεπερνά το 100%. Το grid
   μοιράζει τον χώρο ΜΕΤΑ την αφαίρεση των κενών.

   Το .e-con ανεβάζει τη specificity ώστε να νικά το display:flex του Elementor.
   ========================================================================== */

.sh-cols-2, .e-con.sh-cols-2,
.sh-cols-3, .e-con.sh-cols-3,
.sh-cols-4, .e-con.sh-cols-4 {
  display: grid;
  gap: 24px;
}

.sh-cols-2, .e-con.sh-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-cols-3, .e-con.sh-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-cols-4, .e-con.sh-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .sh-cols-3, .e-con.sh-cols-3,
  .sh-cols-4, .e-con.sh-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .sh-cols-2, .e-con.sh-cols-2,
  .sh-cols-3, .e-con.sh-cols-3,
  .sh-cols-4, .e-con.sh-cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Το λογότυπο-πλέγμα: οι λεπτές γραμμές βγαίνουν από gap 1px πάνω σε φόντο
   περιγράμματος — δεν χρειάζονται borders ανά κελί. */
.e-con.sh-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
}

/* Οι κάρτες να έχουν ίδιο ύψος και το κουμπί πάντα στη βάση, ανεξάρτητα από
   το πόσα χαρακτηριστικά έχει κάθε πακέτο. */
.e-con.sh-card,
.e-con.sh-card-light {
  height: 100%;
}

.sh-card > .elementor-widget-button,
.sh-card-light > .elementor-widget-button {
  margin-top: auto;
}

/* Το hero με background video: το κείμενο πάνω από το overlay */
.sh-hero > .e-con-inner,
.sh-hero > .e-con {
  position: relative;
  z-index: 1;
}

/* Icon boxes: το εικονίδιο να μη «κολλάει» στον τίτλο */
.sh-dark .elementor-widget-icon-box .elementor-icon-box-icon,
.sh-darker .elementor-widget-icon-box .elementor-icon-box-icon {
  margin-bottom: 14px;
}


/* ==========================================================================
   15. ΣΩΜΑ ΑΡΘΡΟΥ
   Τα 6 άρθρα είναι φτιαγμένα με Elementor και κουβαλάνε τα ΔΙΚΑ ΤΟΥΣ widgets
   από την εποχή του Leverage: text-editor χωρίς ρητό χρώμα (άρα κληρονομούν
   το Global Text, που είναι σκούρο) και sections με hardcoded #111117.

   Το Elementor τυπώνει γι' αυτά `.elementor-element-abc123 { color: ... }` με
   specificity 0,1,0. Οι επιλογείς εδώ έχουν 0,3,0 και κερδίζουν, χωρίς
   !important και χωρίς να χρειαστεί να ανοίξεις ένα-ένα τα άρθρα.
   ========================================================================== */

.sh-post-body .elementor-widget-theme-post-content,
.sh-post-body .elementor-widget-theme-post-content p,
.sh-post-body .elementor-widget-theme-post-content li,
.sh-post-body .elementor-widget-text-editor,
.sh-post-body .elementor-widget-text-editor p,
.sh-post-body .elementor-widget-text-editor li {
  color: var(--sh-ink-light);
}

.sh-post-body .elementor-widget-theme-post-content h1,
.sh-post-body .elementor-widget-theme-post-content h2,
.sh-post-body .elementor-widget-theme-post-content h3,
.sh-post-body .elementor-widget-theme-post-content h4,
.sh-post-body .elementor-widget-text-editor h1,
.sh-post-body .elementor-widget-text-editor h2,
.sh-post-body .elementor-widget-text-editor h3,
.sh-post-body .elementor-widget-text-editor h4 {
  color: var(--sh-white);
}

.sh-post-body .elementor-widget-theme-post-content a,
.sh-post-body .elementor-widget-text-editor a {
  color: var(--sh-primary);
}

.sh-post-body .elementor-widget-theme-post-content strong,
.sh-post-body .elementor-widget-text-editor strong {
  color: var(--sh-white);
}

/* Τα παλιά sections μέσα στο άρθρο έχουν δικό τους φόντο και κάθετα κενά.
   Τα εξουδετερώνουμε ώστε το άρθρο να διαβάζεται ως ένα ενιαίο κείμενο και
   όχι ως κουτί μέσα σε κουτί. Αν κάποιο section έχει σκόπιμα δικό του χρώμα,
   πρόσθεσέ του την κλάση sh-keep-bg και θα εξαιρεθεί. */
.sh-post-body .elementor-section:not(.sh-keep-bg),
.sh-post-body .e-con:not(.sh-keep-bg) {
  background-color: transparent;
}

/* Εικόνες μέσα στο άρθρο: γωνίες και όριο πλάτους */
.sh-post-body .elementor-widget-image img {
  border-radius: var(--sh-radius);
}

/* Τα spacer widgets των παλιών άρθρων αφήνουν υπερβολικά κενά */
.sh-post-body .elementor-widget-spacer .elementor-spacer-inner {
  max-height: 28px;
}

/* Παραθέσεις και κώδικας */
.sh-post-body blockquote {
  border-left: 3px solid var(--sh-primary);
  padding-left: 20px;
  margin-left: 0;
  color: var(--sh-ink-light-muted);
}

.sh-post-body code,
.sh-post-body pre {
  background-color: var(--sh-card-dark);
  border: 1px solid var(--sh-border-dark);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-ink-light);
}

.sh-post-body pre {
  padding: 16px 18px;
  overflow-x: auto;
}


/* ==========================================================================
   16. ΑΡΙΘΜΗΜΕΝΑ ΒΗΜΑΤΑ
   Χρησιμοποιείται στη «Διαδικασία» της σελίδας Κατασκευής. Η αρίθμηση εκεί
   είναι δικαιολογημένη: τα βήματα είναι πραγματική ακολουθία, όχι διακόσμηση.
   ========================================================================== */

.sh-step-num {
  font-family: var(--sh-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}