/* =========================================================
   Skiathos Homes — sh-guide.css
   Guide / reference pages (template-guide.php)

   Ίδια ροή χρωμάτων με τα Serious Questions (sh-serious.css), από 25/09:
     Hero → deep navy (gradient, κόκκος, χρυσή λάμψη), διάφανο sticky μενού
     Σώμα → ice (#F6F7FB), ίδιο «απαλό» με το ledger των Serious Questions
     CTA  → navy
   Το σώμα γράφεται στον editor με τις κλάσεις .shg-* παρακάτω.

   ΠΡΟΣΟΧΗ ΧΡΩΜΑΤΩΝ: το brand gold (--gold #C9AE78) πάνω σε ανοιχτό
   φόντο δίνει 2.02:1 και είναι μη αναγνώσιμο. Σε αυτό το αρχείο το
   --gold χρησιμοποιείται ΜΟΝΟ για γραμμές, περιγράμματα και γεμίσματα.
   Για χρυσό ΚΕΙΜΕΝΟ χρησιμοποιείται το --shg-gold-ink (5.72:1 σε ice).

   Depends on: sh-core.css, sh-motion.css   Scope: #sh-guide
========================================================= */

#sh-guide {
  /* Παλέτα σώματος — μετρημένη αντίθεση πάνω στο --shg-bg (ice) */
  --shg-bg:        #F6F7FB;  /* ice, ίδιο με Serious Questions (--ice) */
  --shg-panel:     #FFFFFF;  /* κάρτες                                 */
  --shg-tint:      #F3EFE7;  /* απαλό πλαίσιο/ζώνη                     */
  --shg-ink:       #16202B;  /* κύριο κείμενο            15.38:1  AA   */
  --shg-ink-soft:  #4A5663;  /* δευτερεύον κείμενο        7.00:1  AA   */
  --shg-ink-mute:  #667381;  /* λεζάντες/σημειώσεις       4.53:1  AA   */
  --shg-gold-ink:  #7A5D2C;  /* χρυσό ΚΕΙΜΕΝΟ             5.72:1  AA   */
  --shg-line:      rgba(22,32,43,.12);
  --shg-line-firm: rgba(22,32,43,.20);
  --_grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  background: var(--shg-bg);
  color: var(--shg-ink);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#sh-guide a { color: var(--shg-gold-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#sh-guide a:hover { color: var(--shg-ink); }

.shg-inner { width: min(760px, calc(100% - 44px)); margin-inline: auto; }

/* ── Eyebrow ── */
.shg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--shg-gold-ink);
  line-height: 1;
}
.shg-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

/* ── Hero — deep navy, όπως τα Serious Questions ──
   Το μενού είναι διάφανο και sticky (menu.php δεν βάζει πια is-static στους
   οδηγούς), οπότε το padding-top αφήνει χώρο κάτω από αυτό. Κόκκος και λάμψη
   με ψευδοστοιχεία, χωρίς αλλαγή στη σήμανση. */
.shg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 72svh;
  display: flex;
  align-items: center;
  padding: clamp(120px, 16vh, 200px) 0 clamp(80px, 10vh, 120px);
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--navy-dark) 70%);
}
.shg-hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--_grain);
  background-size: 200px 200px;
  opacity: .03;
  mix-blend-mode: soft-light;
}
.shg-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 78% 12%, rgba(201,174,120,.10) 0%, transparent 60%);
}
.shg-hero .shg-inner { position: relative; z-index: 3; }
.shg-hero .shg-eyebrow { color: var(--gold); }            /* 8.70:1 σε navy */
#sh-guide .shg-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--white);
  text-shadow: 0 16px 48px rgba(0,0,0,.5);
  margin: 18px 0 clamp(22px, 3vw, 34px);
  max-width: 20ch;
}
/* Τελευταία λέξη σε χρυσά πλάγια — ίδιο με «Serious Questions.» (8.70:1 σε navy). */
#sh-guide .shg-title em { font-style: italic; color: var(--gold); }
/* Εισαγωγή: πλάγια serif με χρυσή γραμμή, όπως το intro των Serious Questions. */
#sh-guide .shg-lead {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255,255,255,.74);                           /* 10.42:1 σε navy */
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  margin: 0;
  max-width: 620px;
}

/* ── Body typography ── */
.shg-body { padding: clamp(40px, 6vw, 64px) 0 0; }
#sh-guide .shg-body h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.22;
  color: var(--shg-ink);
  margin: clamp(44px, 6vw, 64px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--shg-line);
}
#sh-guide .shg-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
#sh-guide .shg-body h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--shg-ink);
  margin: 30px 0 0;
}
#sh-guide .shg-body p {
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--shg-ink-soft);
  margin: 16px 0 0;
}
#sh-guide .shg-body h2 + p,
#sh-guide .shg-body h3 + p { margin-top: 14px; }
#sh-guide .shg-body strong { color: var(--shg-ink); font-weight: 600; }
#sh-guide .shg-body em { color: var(--shg-gold-ink); font-style: italic; }
#sh-guide .shg-body ul { margin: 16px 0 0; padding-left: 1.15em; }
#sh-guide .shg-body li {
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--shg-ink-soft);
  margin: 9px 0 0;
}
#sh-guide .shg-body li::marker { color: var(--gold-2); }

/* ── Opening standfirst: τι είναι αυτή η σελίδα ── */
.shg-standfirst {
  margin: 0 0 4px;
  padding: 22px 26px;
  background: var(--shg-panel);
  border: 1px solid var(--shg-line);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
#sh-guide .shg-standfirst p { margin: 0; font-size: 1.02rem; color: var(--shg-ink-soft); }
#sh-guide .shg-standfirst p + p { margin-top: 12px; }

/* ── Hero stat card ── */
.shg-stat {
  margin: 30px 0 0;
  padding: 28px 24px;
  text-align: center;
  background: var(--shg-panel);
  border: 1px solid var(--shg-line);
  border-radius: 12px;
}
.shg-stat__lbl { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--shg-ink-mute); }
.shg-stat__val { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 2.8rem); color: var(--shg-gold-ink); margin-top: 6px; }
.shg-stat__sub { font-weight: 300; font-size: .92rem; color: var(--shg-ink-soft); margin-top: 4px; }

/* ── Price bands ── */
.shg-bands { margin: 26px 0 0; display: grid; gap: 14px; }
.shg-band {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 4px 24px;
  padding: 20px 24px;
  background: var(--shg-panel);
  border: 1px solid var(--shg-line);
  border-radius: 10px;
  transition: border-color .3s var(--ease);
}
.shg-band:hover { border-color: var(--shg-line-firm); }
.shg-band__range {
  grid-row: span 2;
  align-self: center;
  font-family: var(--font-head);
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--shg-gold-ink);
  border-right: 1px solid var(--shg-line);
  padding-right: 20px;
}
.shg-band__lbl {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--shg-ink-mute);
}
#sh-guide .shg-band__txt { margin: 6px 0 0; font-size: 1rem; line-height: 1.7; color: var(--shg-ink-soft); }

/* ─────────────────────────────────────────────────────────────
   ΣΥΜΒΑΣΗ ΣΗΜΑΝΣΗΣ — διαβάστε πριν αλλάξετε τα παρακάτω.

   Το περιεχόμενο των οδηγών γράφεται στον Classic editor του WordPress.
   Επιβεβαιώθηκε live στις 23/09: ο Visual editor (TinyMCE) **αφαιρεί κάθε
   <span> χωρίς attributes**, και το wpautop προσθέτει άκυρα </p> όταν ένα
   inline στοιχείο (π.χ. <i>) βρίσκεται μόνο του σε γραμμή. Αποτέλεσμα: τα
   checklists, τα βήματα και οι γραμμές κόστους διαλύθηκαν στη live σελίδα.

   Γι' αυτό τα components παρακάτω δουλεύουν με ΕΠΙΠΕΔΗ σήμανση:

     <div class="shg-check"><b>Τίτλος</b> Κείμενο…</div>
     <div class="shg-step"><b>Τίτλος</b> Κείμενο…</div>
     <div class="shg-cost-row"><b>Ετικέτα</b> Τιμή…</div>

   Κανένα <span>, κανένα ένθετο <div>, κανένα <i>. Το σημάδι ✓ και οι αριθμοί
   έρχονται από CSS ::before, όχι από τη σήμανση. Κάθε block γράφεται σε ΜΙΑ
   γραμμή. Έτσι δεν υπάρχει τίποτα να χαλάσει ο editor.
   ───────────────────────────────────────────────────────────── */

/* ── Costs list ── */
.shg-costs { margin: 18px 0 0; }
.shg-cost-row {
  /* Grid δύο σταθερών στηλών (25/09). Μέχρι τότε ήταν flex με wrap: όταν μια
     γραμμή δεν χωρούσε, η τιμή κατέβαινε από κάτω ΑΡΙΣΤΕΡΑ ενώ στις υπόλοιπες
     ήταν δεξιά (αναφορά ιδιοκτήτη με στιγμιότυπο). Τώρα η ετικέτα μένει πάντα
     αριστερά και η τιμή πάντα δεξιά — αν χρειαστεί, αναδιπλώνεται μέσα στη
     στήλη της. Η τιμή είναι ανώνυμο grid item (καθαρό κείμενο μετά το <b>),
     άρα παίρνει τα στυλ της γραμμής. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--shg-line);
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--shg-ink-soft);
  text-align: right;
}
.shg-cost-row:last-child { border-bottom: none; }
.shg-cost-row b {
  font-size: 1rem;
  font-weight: 500;
  color: var(--shg-ink);
  text-align: left;
}

.shg-note { font-size: .84rem; font-style: italic; color: var(--shg-ink-mute); margin-top: 14px; }

/* ── Checklist (2-col) ── */
.shg-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px 30px;
  margin: 24px 0 0;
}
.shg-check {
  position: relative;
  padding-left: 30px;
  font-size: .89rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--shg-ink-soft);
}
.shg-check::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--shg-gold-ink);
  border-bottom: 1.5px solid var(--shg-gold-ink);
  transform: rotate(-45deg);
}
.shg-check b {
  display: block;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--shg-ink);
  margin-bottom: 4px;
}

/* ── Numbered steps ── */
.shg-steps { margin: 24px 0 0; display: grid; gap: 20px; counter-reset: shgstep; }
.shg-step {
  position: relative;
  padding-left: 54px;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--shg-ink-soft);
}
.shg-step::before {
  counter-increment: shgstep;
  content: counter(shgstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  padding-top: 4px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--shg-gold-ink);
  border-top: 1px solid var(--gold);
}
.shg-step b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--shg-ink);
  margin-bottom: 5px;
}

/* ── Callout ──
   Επίπεδη σήμανση από 25/09, όπως checks/steps/cost rows:
     <div class="shg-callout"><b>Τίτλος.</b> Κείμενο…</div>
   Ο τίτλος μπαίνει σε δική του γραμμή από το CSS. Ο κανόνας πιάνει και τις παλιές μορφές
   που υπάρχουν ήδη live: <b> ακολουθούμενο από <p>, και το «κολλημένο» <p><b>…</b>κείμενο</p>
   που αφήνει ο Visual editor (L48, SEO-PAGES-PACKAGE). */
.shg-callout {
  margin: 30px 0 0;
  padding: 22px 26px;
  background: var(--shg-tint);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--shg-ink-soft);
}
.shg-callout b { color: var(--shg-gold-ink); font-weight: 600; }
.shg-callout b:first-child { display: block; margin-bottom: 8px; font-size: 1rem; line-height: 1.5; }
#sh-guide .shg-callout p { margin-top: 8px; color: var(--shg-ink-soft); }
#sh-guide .shg-callout p:first-child { margin-top: 0; }

/* ── Disclaimer ── */
.shg-disclaimer {
  margin: 34px 0 0;
  padding: 18px 22px;
  border: 1px dashed var(--shg-line-firm);
  border-radius: 6px;
  background: var(--shg-panel);
}
#sh-guide .shg-disclaimer p { font-size: .86rem; font-style: italic; line-height: 1.72; color: var(--shg-ink-mute); margin: 0; }

/* ── CTA — σκούρα ζώνη κλεισίματος, κρατά τη συνέχεια του brand ── */
.shg-cta {
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(56px, 8vw, 96px) 0 clamp(60px, 8vw, 104px);
  text-align: center;
  background: var(--navy-dark);
  width: 100%;
  max-width: none;
}
.shg-cta > * { width: min(760px, calc(100% - 44px)); margin-inline: auto; }
.shg-cta .shg-eyebrow { display: inline-flex; justify-content: center; color: var(--gold); width: auto; }
/* Το sh-core.css στοιχίζει ΚΑΘΕ h2 αριστερά σε ≤768px με !important (σκόπιμος κανόνας
   site-wide). Εδώ το κλείσιμο είναι κεντραρισμένη σύνθεση, όπως στα Serious Questions
   (εκεί είναι <p>, γι' αυτό δεν επηρεάζεται) — στοχευμένη εξαίρεση μόνο για αυτόν τον τίτλο. */
#sh-guide .shg-cta__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.5rem); color: var(--white); margin: 16px auto 0; text-align: center !important; }
#sh-guide .shg-cta__sub { font-weight: 300; color: rgba(255,255,255,.72); margin: 14px auto 0; max-width: 46ch; }
/* Το #sh-guide a έχει ID specificity — το κουμπί χρειάζεται ίδιο βάρος για να κόψει το underline. */
#sh-guide .shg-cta__btn {
  display: inline-block;
  width: auto;
  margin-top: 30px;
  padding: 16px 40px;
  background: var(--gold);
  color: var(--navy-dark) !important;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
#sh-guide .shg-cta__btn:hover { background: var(--gold-2); color: var(--navy-dark) !important; transform: translateY(-2px); }

@media (max-width: 640px) {
  .shg-band { grid-template-columns: 1fr; gap: 10px; }
  .shg-band__range { grid-row: auto; border-right: none; border-bottom: 1px solid var(--shg-line); padding: 0 0 12px; }
  /* Κινητό: ετικέτα πάνω, τιμή από κάτω, και τα δύο αριστερά — ίδιο για όλες τις γραμμές. */
  .shg-cost-row { grid-template-columns: 1fr; row-gap: 4px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  #sh-guide .shg-cta__btn:hover { transform: none; }
}