/* ═══════════════════════════════════════════════════════════
   ΣΤΕΛΛΑ ΒΑΡΤΕΛΑΤΟΥ: κοινό σύστημα σχεδίασης
   Λογική αφίσας: επίπεδες μάζες χρώματος, condensed κεφαλαία,
   φωτογραφία full-bleed, ΕΝΑ χρυσό accent.
   Παλέτα από τη φωτογραφία-αναφορά (Piraeus Talks).
   ═══════════════════════════════════════════════════════════ */
:root{
  /* πράσινο από τη μάζα της αφίσας: #2F7D33 */
  --green:    oklch(51% 0.142 146);
  --green-lt: oklch(63% 0.152 145);
  --green-dk: oklch(38% 0.100 150);
  /* βαθύ δασικό μελάνι: το χρώμα των γραμμάτων «Piraeus» */
  --ink:      oklch(19% 0.042 156);
  --ink-2:    oklch(26% 0.048 156);
  /* χρυσό accent: η τελεία του «Talks.» */
  --gold:     oklch(79% 0.128 82);
  --gold-dk:  oklch(62% 0.115 78);   /* μόνο για κείμενο σε ανοιχτό φόντο */

  --paper:    oklch(99% 0.004 150);
  --paper-2:  oklch(96% 0.008 150);
  --fg:       oklch(20% 0.030 156);
  --muted:    oklch(48% 0.018 156);
  --rule:     oklch(88% 0.010 150);

  --display:'Fira Sans Condensed','Fira Sans','Arial Narrow',sans-serif;
  --body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  --gut: clamp(20px, 4.5vw, 72px);
  --max: 1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.68;text-rendering:optimizeLegibility;text-wrap:pretty;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ── Τυπογραφία αφίσας ───────────────────────────────────── */
.eyebrow{
  font-family:var(--display);font-weight:500;font-size:13px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--green);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--gold)}
.h-sec{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,4.2vw,60px);line-height:.95;letter-spacing:.006em;margin:16px 0 0}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--muted);max-width:60ch}
/* η χρυσή τελεία: η μοναδική «υπογραφή» του συστήματος */
.dot{color:inherit}

/* ── Έντιμο πλαίσιο φωτογραφίας που λείπει ───────────────── */
.photo{
  position:relative;background:var(--ink);overflow:hidden;
  background-image:
    linear-gradient(135deg, color-mix(in oklch,var(--green) 26%,transparent) 0%, transparent 58%),
    repeating-linear-gradient(45deg, oklch(24% .04 156) 0 2px, transparent 2px 9px);
}
.photo::after{
  content:attr(data-note);position:absolute;left:0;right:0;bottom:0;
  padding:14px 18px;font-family:var(--display);font-weight:500;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:oklch(74% 0.03 156);background:linear-gradient(transparent,oklch(15% .04 156 / .9));
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:absolute;top:0;left:0;right:0;z-index:50}
.nav.solid{position:relative;background:var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
/* Lockup: σήμα ΠΑΣΟΚ | διαχωριστικό | καλλιγραφική υπογραφή */
.mark{display:flex;align-items:center;gap:18px;flex:none}
.mark img{display:block;width:auto}
.mark-party{height:68px}
.mark-rule{flex:none;width:1px;height:52px;background:rgba(255,255,255,.26)}
.mark-sig{height:66px;transition:opacity .2s}
.mark:hover .mark-sig{opacity:.82}
.menu{display:flex;align-items:center;gap:34px}
.menu a{
  font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.82);padding:8px 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.menu a:hover{color:#fff;border-bottom-color:var(--gold)}
.menu a[aria-current=page]{color:#fff;border-bottom-color:var(--gold)}
/* Το Επικοινωνία στο μενού είναι CTA, όχι απλό link */
.menu a.nav-cta{
  display:inline-flex;align-items:center;min-height:46px;padding:0 24px;margin-left:6px;
  color:#fff;background:transparent;border:2px solid var(--gold);border-bottom-color:var(--gold);
  transition:background .2s,color .2s;
}
.menu a.nav-cta:hover,.menu a.nav-cta[aria-current=page]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
/* Social μέσα στο nav: διακριτική ομάδα πριν το CTA */
.nav-social{display:flex;align-items:center;gap:2px;margin-left:2px;padding-left:20px;border-left:1px solid rgba(255,255,255,.2)}
.nav-social a{
  display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;
  color:rgba(255,255,255,.62);transition:color .2s;
}
.nav-social a:hover{color:var(--gold);border:0}
.nav-social svg{display:block}
.burger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;place-items:center}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ── CTA ─────────────────────────────────────────────────── */
.cta{
  display:inline-flex;align-items:center;min-height:52px;padding:0 30px;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.11em;text-transform:uppercase;
  background:var(--green);color:#fff;border:2px solid var(--green);transition:background .2s,color .2s,border-color .2s;
}
.cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cta.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);margin-left:-2px}
.cta.line:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.readmore{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green);border-bottom:2px solid var(--gold);padding-bottom:4px;transition:color .2s;
}
.readmore:hover{color:var(--ink)}

/* ── ΕΣΩΤΕΡΙΚΟ HERO (σελίδες πλην αρχικής) ───────────────── */
.phero{position:relative;background:var(--ink);color:#fff;isolation:isolate;overflow:hidden;min-height:clamp(600px,64vh,760px)}
.phero .bg{position:absolute;inset:0 0 0 auto;width:44%;z-index:0}
.phero .bg::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,var(--ink) 0%,color-mix(in oklch,var(--ink) 60%,transparent) 40%,transparent 78%)}
.phero-in{position:relative;z-index:3;padding-block:clamp(72px,8.4vw,112px) clamp(60px,8vw,104px)}
.phero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(42px,6.4vw,92px);line-height:.9;letter-spacing:.004em;color:#fff;margin-top:18px}
.phero .sub{margin-top:24px;padding-top:20px;max-width:44ch;border-top:2px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);font-size:clamp(15px,1.3vw,18px)}
.gold-bar{position:absolute;left:0;bottom:0;width:100%;height:12px;background:var(--green);z-index:4}
.gold-bar::before{content:"";position:absolute;top:-3px;left:0;width:38%;height:3px;background:var(--gold)}

/* ── FOOTER ──────────────────────────────────────────────── */
.foot{background:var(--ink);color:rgba(255,255,255,.6);padding-block:clamp(56px,6vw,80px) 32px;font-size:14px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.13em;color:#fff;margin-bottom:18px}
/* Το ίδιο lockup με το header: ίδια σειρά, ίδιο διαχωριστικό */
.foot .mark{margin-bottom:20px}
.foot .mark-rule{background:rgba(255,255,255,.2)}
.foot ul{list-style:none;display:grid;gap:11px}
.foot a:hover{color:var(--gold)}
/* Social: ξεχωριστή ζώνη στο footer, όχι κρυμμένα στη γωνία του hero */
.foot-social{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:30px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-social .lbl{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.13em;color:#fff}
.foot-social .lbl b{color:var(--gold);font-weight:600}
.social-row{display:flex;gap:10px}
.social-row a{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);
  transition:color .2s,border-color .2s,background .2s;
}
.social-row a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:12px;color:rgba(255,255,255,.4);flex-wrap:wrap}

/* ── RESPONSIVE (κοινό) ──────────────────────────────────── */
@media (max-width:1024px){
  .foot-in{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:820px){
  .mark{gap:13px}
  .mark-party{height:52px}
  .mark-rule{height:40px}
  .mark-sig{height:50px}
  .menu{
    position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;
    gap:8px;transform:translateX(100%);transition:transform .3s ease;z-index:60;
  }
  .menu.open{transform:none}
  .menu a{font-size:26px;letter-spacing:.1em;padding:14px 0;border:0}
  .menu a.nav-cta{margin:18px 0 0;padding:0 32px;min-height:58px;font-size:18px;letter-spacing:.11em;border:2px solid var(--gold)}
  .nav-social{margin:34px 0 0;padding:26px 0 0;gap:10px;border-left:0;border-top:1px solid rgba(255,255,255,.16);width:min(280px,70vw);justify-content:center}
  .nav-social a{width:46px;height:46px;color:rgba(255,255,255,.75)}
  .burger{display:grid;z-index:70}
  .burger.open span{background:transparent}
  .burger.open span::before{top:0;transform:rotate(45deg)}
  .burger.open span::after{top:0;transform:rotate(-45deg)}

  .phero .bg{position:relative;width:100%;height:60svh;inset:auto}
  .phero .bg::before{background:linear-gradient(180deg,transparent 40%,var(--ink) 100%)}
  .phero-in{padding-block:24px 56px}
  .foot-in{grid-template-columns:1fr;gap:32px}
}

/* Νομικά links στο footer */
.foot-legal a{color:inherit;text-decoration:none;transition:color .2s}
.foot-legal a:hover{color:var(--gold)}


/* ═══ FIX: native <button> ροζ (#c36) από Hello Elementor reset.css ═══ */
/* Το reset.css βάφει ΚΑΘΕ <button> ροζ σε hover/focus. Επαναφορά στην παλέτα του σάιτ. */
[type=button],[type=submit],button{border-color:var(--green);color:var(--green);border-radius:0}
[type=button]:hover,[type=button]:focus,[type=submit]:hover,[type=submit]:focus,button:hover,button:focus{background-color:var(--green);color:#fff}
/* Solid CTA/submit: λευκό κείμενο ΠΑΝΤΑ (όχι μόνο σε hover) */
[type=submit].cta,[type=submit].submit,button.cta,button.submit,a.cta{color:#fff}
/* Chips (Νέα): εφημεριδίστικο look — μελάνι στο hover, χρυσό όταν ενεργό, ποτέ ροζ */
.chip:hover,.chip:focus{background:transparent;color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed=true],.chip[aria-pressed=true]:hover,.chip[aria-pressed=true]:focus{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Burger (κινητό): πάντα διάφανο toggle με λευκό περίγραμμα, ποτέ ροζ πλακίδιο */
.burger,.burger:hover,.burger:focus,.burger.open,.burger.open:hover,.burger.open:focus{background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:0;color:#fff}

/* nea-hero */
.phero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}


/* ═══ FIX: desktop phero portrait crop (κεφάλι+χέρια) ═══ */
@media(min-width:1000px){
  .phero{min-height:clamp(720px,78vh,860px)}
  .phero .bg{width:33%;max-width:600px}
  .phero .bg img{object-position:50% 42%}
}


/* ═══ FIX: Αρχική bold τίτλοι → Arial Black + όχι ALL-CAPS (Αρχική & Νέα) ═══ */
body.home .hero h1,
body.home .about h2,
body.home .vision h2{
  font-family:'Arial Black','Arial Bold',Gadget,Arial,sans-serif;
  font-weight:900;text-transform:none;letter-spacing:0;
}
body.home .hero .role,
body.home .vision .closing,
body.home .sig-name,
body.home .item .meta,
body.home .h-sec{text-transform:none}

body.blog .phero h1,
body.blog .chip,
body.blog .art .meta,
body.blog .art.lead-art h2,
body.blog .empty p{text-transform:none}


/* ═══ Άρθρα: Arial Black + όχι ALL-CAPS ═══ */
body.single .phero h1{
  font-family:'Arial Black','Arial Bold',Gadget,Arial,sans-serif;
  font-weight:900;text-transform:none;letter-spacing:0;
}
body.single .phero .eyebrow,
body.single .article .eyebrow,
body.single .chip,
body.single .art .meta,
body.single .item .meta,
body.single .h-sec,
body.single .readmore,
body.single .share a{text-transform:none}


/* ═══ FIX: Νέα hero — η φωτό λίγο πιο αριστερά, προς το κέντρο ═══ */
@media(min-width:1000px){
  body.blog .phero .bg{right:clamp(24px,5vw,96px)}
  body.blog .phero .bg::before{background:linear-gradient(90deg,var(--ink) 0%,color-mix(in oklch,var(--ink) 60%,transparent) 34%,transparent 64%,transparent 86%,color-mix(in oklch,var(--ink) 70%,transparent) 100%)}
}


/* ═══ FIX: Άρθρα — ο τίτλος να μην «τρώει» τη featured εικόνα (tablet + desktop) ═══ */
/* Desktop / tablet landscape: η φωτό μπαίνει ολόκληρη (16:9), κεντραρισμένη κάθετα */
@media (min-width:1024px){
  body.single .phero{min-height:clamp(520px,58vh,660px)}
  body.single .phero .bg{
    inset:auto 0 auto auto;top:50%;transform:translateY(-50%);
    width:min(58%,920px);max-width:none;height:auto;aspect-ratio:16/9;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
            mask-image:linear-gradient(90deg,transparent 0,#000 24%);
  }
  body.single .phero .bg img{height:100%;object-fit:cover;object-position:50% 50%}
  body.single .phero .bg::before{background:linear-gradient(90deg,color-mix(in oklch,var(--ink) 70%,transparent) 0%,color-mix(in oklch,var(--ink) 24%,transparent) 34%,transparent 62%)}
  body.single .phero-in{padding-block:clamp(52px,5vw,76px) clamp(44px,5vw,76px)}
  body.single .phero h1{font-size:clamp(26px,2.9vw,46px);line-height:1.02;max-width:17ch;margin-top:14px}
}

/* Tablet portrait: η φωτό πάνω σε πλήρες 16:9, ο τίτλος απο κάτω */
@media (min-width:821px) and (max-width:1023px){
  body.single .phero{min-height:0}
  body.single .phero .bg{position:relative;inset:auto;top:auto;transform:none;width:100%;max-width:none;height:auto;aspect-ratio:16/9;-webkit-mask-image:none;mask-image:none}
  body.single .phero .bg img{height:100%;object-fit:cover;object-position:50% 50%}
  body.single .phero .bg::before{background:linear-gradient(180deg,color-mix(in oklch,var(--ink) 60%,transparent) 0%,transparent 24%,transparent 50%,var(--ink) 100%)}
  body.single .phero-in{padding-block:20px 56px}
  body.single .phero h1{font-size:clamp(30px,4.2vw,46px);line-height:1.04;max-width:22ch}
}

/* Προστασία αναγνωσιμότητας του nav πάνω από φωτεινή φωτογραφία (άρθρα, desktop) */
@media (min-width:1024px){
  body.single .phero::before{content:"";position:absolute;inset:0 0 auto 0;height:160px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,color-mix(in oklch,var(--ink) 55%,transparent) 0%,transparent 100%)}
}


/* ═══ FIX: tablet/laptop nav — το CTA «Επικοινωνία» έβγαινε εκτός οθόνης ═══ */
/* Το lockup + 3 links + social + CTA δεν χωρούσαν στο .wrap μεταξύ 821–1200px:
   το flex ξεχείλιζε δεξιά και το body{overflow-x:hidden} έκοβε το κουμπί. */
@media (min-width:821px) and (max-width:1200px){
  .nav-in{gap:16px;flex-wrap:nowrap}
  .mark{gap:12px;min-width:0}
  .mark-party{height:54px}
  .mark-rule{height:40px}
  .mark-sig{height:52px}
  .menu{gap:22px;flex-wrap:nowrap}
  .menu a{font-size:13px;letter-spacing:.08em;white-space:nowrap}
  .nav-social{margin-left:0;padding-left:14px;gap:0}
  .nav-social a{width:30px;height:30px}
  .nav-social svg{width:16px;height:16px}
  .menu a.nav-cta{min-height:42px;padding:0 16px;margin-left:2px}
}
/* Στενό tablet landscape: τα social φεύγουν από το nav (υπάρχουν στο footer) */
@media (min-width:821px) and (max-width:980px){
  .nav-social{display:none}
}