/*
Theme Name:   Συν-Πορεύομαι
Theme URI:    https://synporevomai.gr
Description:  Child theme του Hello Elementor για το Κέντρο Ειδικών Θεραπειών «Συν-Πορεύομαι». Περιέχει τα CPT που έρχονταν από το ThemeREX Addons, τη μεταφορά των meta, τα dynamic tags και τα design tokens.
Author:       Smarthost — Christos Konstantinidis
Author URI:   https://www.smarthost.gr
Template:     hello-elementor
Version:      1.0.8
Text Domain:  synporevomai-child
License:      GNU General Public License v2 or later
*/

/* =========================================================================
   1. DESIGN TOKENS
   Δηλώνονται και εδώ, ώστε να τα χρησιμοποιείς ως var(--sp-*) σε ό,τι
   custom CSS γράψεις μέσα στο Elementor. Τα ίδια μπαίνουν και ως
   Global Colors / Global Fonts στις ρυθμίσεις του site.
   ========================================================================= */
:root{
  --sp-ink:#16404A;
  --sp-ink-2:#2C5A64;
  --sp-body:#4A5A5F;
  --sp-muted:#5E6E72;

  --sp-coral-600:#C94F33;   /* γεμάτα κουμπιά (λευκό κείμενο, AA) */
  --sp-coral-700:#B8492F;   /* σύνδεσμοι, eyebrow */
  --sp-coral-900:#A13F27;   /* κείμενο πάνω σε coral-100 */
  --sp-coral-100:#FBE6DF;

  --sp-sage-700:#3F7A61;
  --sp-sage-900:#336550;
  --sp-sage-100:#E1EFE7;

  --sp-sky-700:#2F7C9E;     /* focus ring */
  --sp-sky-900:#256A88;
  --sp-sky-100:#DEEBF2;

  --sp-cream:#FBF7F2;
  --sp-surface:#FFFFFF;
  --sp-surface-2:#F5EFE7;
  --sp-line:#E8DED2;
  --sp-line-soft:#F1E9DF;

  --sp-r-sm:8px;
  --sp-r-md:14px;
  --sp-r-lg:22px;
  --sp-r-pill:999px;

  --sp-sh-1:0 1px 2px rgba(22,64,74,.06), 0 4px 14px rgba(22,64,74,.05);
  --sp-sh-2:0 10px 34px rgba(22,64,74,.10);

  /* Παστέλ του λογοτύπου — μόνο για επιφάνειες, ποτέ για κείμενο */
  --sp-p1:#F3B9A9;
  --sp-p2:#C8E0CF;
  --sp-p3:#BCD9E7;
  --sp-p4:#F0D6A8;
}

body{ background:var(--sp-cream); color:var(--sp-body); }

/* =========================================================================
   2. ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible{
  outline:3px solid var(--sp-sky-700);
  outline-offset:2px;
  border-radius:4px;
}

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

/* Ελληνικά κεφαλαία ΜΕ τόνους είναι λάθος — αν κάπου ξεφύγει uppercase,
   τουλάχιστον μη σπάσει η στοίχιση. */
.sp-eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:700;
  color:var(--sp-coral-700);
}

/* =========================================================================
   3. HELPER CLASSES
   Τις βάζεις στο Elementor → Advanced → CSS Classes.
   ========================================================================= */

/* --- Μονόγραμμα μέλους ομάδας (όσο δεν υπάρχουν φωτογραφίες) --- */
.sp-mono{
  width:52px; height:52px; flex:none;
  display:grid; place-items:center;
  border-radius:16px;
  font-weight:800; font-size:1.02rem;
  color:var(--sp-ink);
  background:var(--sp-p3);
}
/* Κυκλική εναλλαγή χρώματος μέσα στο Loop Grid της ομάδας.
   Βάλε την κλάση sp-team-grid στο ίδιο το Loop Grid. */
.sp-team-grid .elementor-grid > *:nth-child(4n+1) .sp-mono{ background:var(--sp-p1); }
.sp-team-grid .elementor-grid > *:nth-child(4n+2) .sp-mono{ background:var(--sp-p2); }
.sp-team-grid .elementor-grid > *:nth-child(4n+3) .sp-mono{ background:var(--sp-p3); }
.sp-team-grid .elementor-grid > *:nth-child(4n+4) .sp-mono{ background:var(--sp-p4); }

/* --- Badge ειδικότητας πάνω στην κάρτα υπηρεσίας --- */
.sp-badge{
  display:inline-block;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:var(--sp-r-pill);
  background:var(--sp-sage-100); color:var(--sp-sage-900);
}

/* --- Pills μεθόδων (TEACCH, PECS…) — δεν είναι κουμπιά --- */
.sp-pill{
  display:inline-block;
  font-weight:600; font-size:.9rem;
  padding:8px 15px; border-radius:var(--sp-r-pill);
  background:var(--sp-sky-100); color:var(--sp-sky-900);
}
.sp-pill--alt{ background:var(--sp-coral-100); color:var(--sp-coral-900); }

/* --- Chips φίλτρου (Taxonomy Filter του Elementor Pro) --- */
.sp-filter{ position:relative; }
.sp-filter .e-filter{ gap:10px; }
.sp-filter .e-filter-item{
  font-weight:600; font-size:.93rem;
  background:var(--sp-cream); color:var(--sp-ink);
  border:1.5px solid var(--sp-line);
  padding:9px 17px; border-radius:var(--sp-r-pill);
  transition:border-color .14s ease, background .14s ease;
}
.sp-filter .e-filter-item:hover{ border-color:var(--sp-ink-2); }
.sp-filter .e-filter-item[aria-pressed="true"],
.sp-filter .e-filter-item.e-filter-item-active{
  background:var(--sp-ink); color:#fff; border-color:var(--sp-ink);
}

/* Σε κινητό τα 7 chips δεν χωράνε σε γραμμή και σπάνε σε τρεις άνισες
   σειρές. Γίνονται οριζόντια λωρίδα που κυλάει — το μοτίβο που περιμένει
   ο χρήστης σε κινητό. Η λωρίδα φτάνει ως το χείλος της οθόνης, ώστε να
   φαίνεται ότι συνεχίζεται. */
@media (max-width:767px){
  .sp-filter .e-filter{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    padding-block-end:10px;
    margin-inline:-18px;
    padding-inline:18px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .sp-filter .e-filter::-webkit-scrollbar{ display:none; }
  .sp-filter .e-filter-item{
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  /* Σκίαση στο δεξί άκρο: υπαινιγμός ότι υπάρχουν κι άλλα */
  .sp-filter::after{
    content:"";
    position:absolute;
    right:-18px; top:0; bottom:10px;
    width:38px;
    background:linear-gradient(to left, var(--sp-surface), rgba(255,255,255,0));
    pointer-events:none;
  }
  /* Όταν η λωρίδα κάθεται σε κρεμ ενότητα, βάλε την κλάση sp-filter--cream */
  .sp-filter--cream::after{
    background:linear-gradient(to left, var(--sp-cream), rgba(251,247,242,0));
  }
}

/* --- Κάρτα (υπηρεσία / άρθρο / μέλος) --- */
.sp-card{
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:var(--sp-r-md);
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.sp-card:hover{ box-shadow:var(--sp-sh-2); transform:translateY(-3px); }

/* Οι φωτογραφίες των υπηρεσιών έχουν διαφορετικές αναλογίες (1500×1000,
   2560×1708, 1498×1034…). Χωρίς σταθερό λόγο, κάθε κάρτα παίρνει άλλο ύψος
   εικόνας και οι τίτλοι δεν ευθυγραμμίζονται μεταξύ τους. Κλειδώνουμε 16:10
   και κόβουμε κεντραρισμένα. */
.sp-card .elementor-widget-theme-post-featured-image img,
.sp-card .elementor-widget-image img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center;
}

/* Το ίδιο και για εικόνες μέσα σε Loop Grid, ακόμα κι αν λείπει η sp-card. */
.elementor-loop-container .elementor-widget-theme-post-featured-image img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center;
}

/* =========================================================================
   ΙΣΟ ΥΨΟΣ ΚΑΡΤΩΝ ΣΕ LOOP GRID
   Το Loop Grid βάζει κάθε loop item σε κελί grid. Από μόνο του το κελί
   τεντώνεται, αλλά η κάρτα μέσα του δεν ακολουθεί — άρα οι κάρτες τελειώνουν
   εκεί που τελειώνει το κείμενό τους. Χτίζουμε αλυσίδα flex από το κελί ως το
   «Περισσότερα»: κελί flex → κάρτα 100% ύψος → εσωτερικό container flex-grow →
   .sp-more με margin-top:auto.
   ========================================================================= */
.elementor-loop-container > .e-loop-item,
.elementor-widget-loop-grid .elementor-grid > *{
  display:flex;
  align-items:stretch;
}
.elementor-loop-container > .e-loop-item > .e-con,
.elementor-widget-loop-grid .elementor-grid > * > .e-con,
.elementor-widget-loop-grid .elementor-grid > * > .elementor-element{
  width:100%;
  height:100%;
  align-self:stretch;
}
/* Το εσωτερικό container (τίτλος + περίληψη + link) παίρνει όλο το υπόλοιπο
   ύψος. Δηλώνεται και με sp-card και χωρίς, για την περίπτωση που το loop item
   δεν έχει ξαναγίνει import. */
.sp-card > .e-con,
.elementor-loop-container > .e-loop-item > .e-con > .e-con:last-child{
  flex-grow:1;
}

/* Το «Περισσότερα →» καρφώνεται στη βάση κάθε κάρτας, ώστε να είναι στην ίδια
   γραμμή σε όλη τη σειρά ακόμα κι όταν οι περιλήψεις έχουν άνισο μήκος. */
.sp-more{ margin-top:auto; }

/* --- Κάρτα τηλεφώνου στο hero --- */
.sp-callcard{
  background:#fff;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-r-md);
  box-shadow:var(--sp-sh-2);
}

/* --- Βήματα «Πώς ξεκινάμε» πάνω σε σκούρο φόντο --- */
.sp-step{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--sp-r-md);
}
.sp-step .sp-step-n{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:800; font-size:.95rem; color:var(--sp-ink);
}

/* --- Sticky CTA bar, μόνο σε κινητό --- */
.sp-mobilebar{ display:none; }
@media (max-width:767px){
  .sp-mobilebar{
    display:flex; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:998;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,247,242,.97);
    border-top:1px solid var(--sp-line);
    backdrop-filter:blur(8px);
  }
  .sp-mobilebar .elementor-button{ flex:1; }
  body{ padding-bottom:72px; }
}

/* --- Στόχοι αφής ≥ 44px σε κινητό --- */
@media (max-width:767px){
  .elementor-button,
  .sp-filter .e-filter-item{ min-height:44px; }
}

/* =========================================================================
   4. ΦΟΡΜΑ
   ========================================================================= */
.elementor-field-group .elementor-field{
  border:1.5px solid var(--sp-line) !important;
  border-radius:var(--sp-r-sm) !important;
  background:var(--sp-cream) !important;
  color:var(--sp-ink) !important;
  padding:12px 14px !important;
}
.elementor-field-group .elementor-field:focus{
  border-color:var(--sp-sky-700) !important;
  background:#fff !important;
}
.elementor-field-group > label{
  font-weight:600; font-size:.88rem; color:var(--sp-ink); margin-bottom:6px;
}
/* Το σφάλμα δεν μεταφέρεται ΜΟΝΟ με χρώμα */
.elementor-message-danger{ color:var(--sp-coral-700); font-weight:600; }

/* =========================================================================
   5. ΕΚΤΥΠΩΣΗ — γονείς τυπώνουν τη σελίδα επικοινωνίας
   ========================================================================= */
@media print{
  .sp-mobilebar, .elementor-location-header, .elementor-location-footer{ display:none !important; }
  body{ background:#fff; }
}