/* =========================================================================
   marilenakiskipeli.gr
   Κατεύθυνση Α (ήσυχη αυθεντία) + μπάρα πρακτικών & συχνές ερωτήσεις από Γ
   Παλέτα από το λογότυπο: τιρκουάζ #18A2AF, κρεμ #F4EFEB, μελάνι #3D3B3A
   ========================================================================= */

:root{
  /* grounds */
  --paper:#FFFFFF;
  --mist:#F5F9FA;          /* off-white με κυανή κλίση */
  --cream:#F4EFEB;         /* το κρεμ της επαγγελματικής κάρτας */

  /* brand */
  --brand:#18A2AF;         /* το χρώμα του μονογράμματος — γραφικά, γραμμές */
  --brand-deep:#0E6F7B;    /* κείμενο & κουμπιά (WCAG AA σε λευκό: 5.9:1) */
  --brand-dark:#0B5866;    /* hover, σκούρες επιφάνειες */
  --sky:#83C5E1;           /* ανοιχτό γαλάζιο — μόνο διακοσμητικό */

  /* ink */
  --ink:#2A2F31;
  --muted:#5D6B6E;
  --line:#DCE7E8;
  --line-soft:#EBF2F3;

  /* type */
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Commissioner",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* rhythm */
  --gutter:clamp(20px,5vw,64px);
  --section:clamp(56px,8vw,104px);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  overflow-x:hidden;          /* καμία οριζόντια κύλιση, ποτέ */
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{margin:0;font-weight:300;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand-deep);color:#fff;padding:12px 20px;font-size:15px;
}
.skip:focus{left:0}

.in{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-deep);margin:0 0 24px;
}
.eyebrow--quiet{color:var(--muted)}

/* ---------------------------------------------------------------- header */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:auto}
.brand .name{font-family:var(--serif);font-size:16px;letter-spacing:.06em;line-height:1.25}
.brand .role{
  display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px;
}
.nav{display:flex;gap:30px;font-size:14.5px;color:var(--muted)}
.nav a{padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.nav a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.head-tel{font-size:14.5px;font-weight:500;color:var(--brand-deep);white-space:nowrap}
.head-tel:hover{color:var(--brand-dark)}
@media (max-width:900px){.nav{display:none}}
@media (max-width:520px){
  .site-head{padding-inline:20px;gap:14px}
  .brand img{width:36px}
  .brand .name{font-size:13.5px;letter-spacing:.04em}
  .brand .role{font-size:9px;letter-spacing:.12em}
  .head-tel{display:none}       /* το τηλέφωνο είναι μόνιμα στην κάτω μπάρα */
}

/* ------------------------------------------------------------------ hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);
      align-items:start;padding-block:clamp(48px,7vw,86px) clamp(44px,6vw,78px)}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:34px}
  .hero .lede{max-width:none}
  .portrait{max-width:420px}
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(33px,5vw,52px);line-height:1.14;margin-bottom:26px;
}
.hero .lede{font-size:clamp(16.5px,1.6vw,19px);color:var(--muted);max-width:44ch;margin-bottom:34px}
.hero-acts{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

.btn{
  display:inline-block;background:var(--brand-deep);color:#fff;
  padding:15px 28px;font-size:15px;font-weight:500;letter-spacing:.01em;
  border:1px solid var(--brand-deep);border-radius:2px;cursor:pointer;
  transition:background .18s,border-color .18s;
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn--ghost{background:transparent;color:var(--brand-deep)}
.btn--ghost:hover{background:var(--mist)}
.btn--full{width:100%;text-align:center}

.tel-inline{font-size:16px;color:var(--ink);border-bottom:1px solid var(--sky);padding-bottom:2px}
.tel-inline:hover{border-bottom-color:var(--brand)}

/* λεπτό τιρκουάζ πλαίσιο σαν κορνίζα, με τη φωτογραφία κεντραρισμένη μέσα του */
.portrait{position:relative;padding:20px}
.portrait::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--brand);z-index:0;pointer-events:none;
}
@media (max-width:820px){
  .portrait{padding:14px}
}
.portrait figure{position:relative;z-index:1;margin:0}
.portrait img{width:100%}

/* ------------------------------------------------- practical facts strip */
.facts{background:var(--mist);border-block:1px solid var(--line)}
.facts dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,40px);
  margin:0;padding-block:clamp(28px,4vw,40px);
}
.facts dt{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.facts dd{margin:0;font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.3}
.facts dd small{
  display:block;font-family:var(--sans);font-size:13.5px;font-weight:300;
  color:var(--muted);margin-top:5px;line-height:1.5;
}
@media (max-width:760px){.facts dl{grid-template-columns:1fr 1fr;gap:24px}}

/* -------------------------------------------------------------- sections */
.section{padding-block:var(--section)}
.section--mist{background:var(--mist)}
.section--cream{background:var(--cream)}

h2{font-family:var(--serif);font-size:clamp(25px,3.4vw,35px);line-height:1.24;margin-bottom:28px;max-width:21ch}
h3{font-family:var(--serif);font-size:20px;line-height:1.35}

.prose{color:var(--muted);font-size:16.5px;line-height:1.82}
.prose p + p{margin-top:16px}
.prose strong{color:var(--ink);font-weight:500}
.prose em{font-style:italic}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px)}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}

/* the focusing band — quieter, warmer, with the monogram as a watermark */
.focusing{position:relative;overflow:hidden}
.focusing .mark{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(340px,34vw);opacity:.09;pointer-events:none;
}
.focusing .in{position:relative;z-index:1}
.focusing blockquote{
  margin:0 0 30px;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(21px,2.6vw,27px);line-height:1.5;color:var(--ink);max-width:22ch;
}

/* themes list */
.themes li{
  display:grid;grid-template-columns:34px minmax(200px,270px) 1fr;gap:20px;align-items:baseline;
  padding-block:20px;border-top:1px solid var(--line);
}
.themes li:last-child{border-bottom:1px solid var(--line)}
.themes .n{font-family:var(--serif);font-size:12.5px;color:var(--brand);font-variant-numeric:tabular-nums}
.themes .t{font-size:17px;font-weight:500;color:var(--ink)}
.themes .d{font-size:15.5px;color:var(--muted)}
@media (max-width:760px){
  .themes li{grid-template-columns:28px 1fr;row-gap:6px}
  .themes .d{grid-column:2}
}

/* about */
.about{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,5vw,60px);align-items:start}
.about figure{margin:0}
.about img{width:100%}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.creds li{
  font-size:13px;color:var(--brand-deep);background:var(--paper);
  border:1px solid var(--line);padding:7px 14px;border-radius:2px;
}
.section--mist .creds li{background:var(--paper)}
@media (max-width:820px){.about{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-block:20px;cursor:pointer;list-style:none;
  font-size:17px;font-weight:500;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--serif);font-size:20px;color:var(--brand);
  line-height:1;flex:none;transition:transform .2s;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--brand-deep)}
.faq .answer{padding:0 40px 24px 0;color:var(--muted);font-size:16px;line-height:1.8}
.faq .answer p + p{margin-top:14px}

/* -------------------------------------------------------------- contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

.contact-lines{margin-top:30px}
.contact-lines li{padding-block:14px;border-top:1px solid var(--line);display:flex;
                  justify-content:space-between;gap:18px;align-items:baseline;font-size:15.5px}
.contact-lines li:last-child{border-bottom:1px solid var(--line)}
.contact-lines .k{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.contact-lines .v{color:var(--ink);font-weight:400;text-align:right}
.contact-lines a.v:hover{color:var(--brand-deep)}

.form{display:grid;gap:20px}
.field label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:300;color:var(--muted)}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 2px;border-radius:0;transition:border-color .18s;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brand)}
.field input::placeholder,.field textarea::placeholder{color:#A9BABC}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.6}
.consent input{margin:4px 0 0;width:16px;height:16px;accent-color:var(--brand-deep);flex:none}
.consent a{border-bottom:1px solid var(--line)}
.consent a:hover{color:var(--brand-deep);border-bottom-color:var(--brand)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{font-size:13px;color:var(--muted);line-height:1.6}
.form-msg{font-size:15px;padding:14px 16px;border-radius:2px;display:none}
.form-msg.ok{display:block;background:var(--mist);border-left:3px solid var(--brand);color:var(--ink)}
.form-msg.err{display:block;background:#FDF3F2;border-left:3px solid #C0655A;color:#7A342C}

/* --------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line);padding-block:34px;font-size:13.5px;color:var(--muted)}
.site-foot .in{display:flex;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;align-items:center}
.site-foot a:hover{color:var(--brand-deep)}

/* υπογραφή κατασκευαστή — διακριτική, τελευταία στη σειρά */
.site-foot .credit{font-size:12.5px;color:var(--muted)}
.site-foot .credit a{border-bottom:1px solid var(--line)}
.site-foot .credit a:hover{color:var(--brand-deep);border-bottom-color:var(--brand)}
.site-foot .heart{font-size:11.5px;vertical-align:baseline}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (max-width:700px){
  .site-foot .in{justify-content:flex-start;gap:10px}
  .site-foot .credit{width:100%;padding-top:6px;border-top:1px solid var(--line-soft)}
}

/* --------------------------------------------- sticky call bar on mobile */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--line);border-top:1px solid var(--line);
  }
  .callbar a{
    background:var(--paper);text-align:center;padding:15px 8px;
    font-size:15px;font-weight:500;color:var(--brand-deep);
  }
  .callbar a.primary{background:var(--brand-deep);color:#fff}
  body{padding-bottom:56px}
}

/* ------------------------------------------------------- privacy / legal */
.legal{max-width:74ch;padding-block:var(--section)}
.legal h1{font-family:var(--serif);font-size:clamp(28px,4vw,40px);line-height:1.2;margin-bottom:24px}
.legal h2{font-size:21px;margin-block:36px 12px;max-width:none}
.legal p,.legal li{color:var(--muted);font-size:16px;line-height:1.8}
.legal ul{list-style:disc;padding-left:22px;margin-block:10px}
.legal li{margin-bottom:6px}
.legal a{color:var(--brand-deep);border-bottom:1px solid var(--line)}
.legal .updated{font-size:13.5px;color:var(--muted);margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

/* ------------------------------------------------------------------ misc */
@media print{
  .callbar,.site-head .nav{display:none}
  body{font-size:12pt}
}