/* MK ATHENS — shared stylesheet.
   Lifted from the inline <style> that the live site duplicated in
   every page. Page-specific overrides live in that page's own
   content file, under meta.css. Regenerate with:
     php tools/extract-css.php
   Anything the rebuild adds goes in the tail below, inside this
   script, so regenerating never drops it. */

:root{
 --bg:#f8fafc;
 --text:#0f172a;
 --muted:#475569;
 --line:#e2e8f0;
 --dark:#0f172a;
 --soft:#f1f5f9;
 --green:#22c55e;
 --accent:#ea580c;
 --white:#ffffff;
 }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Arial,Helvetica,sans-serif;
 background:var(--bg);
 color:var(--text);
 line-height:1.6;
 }
.wrap{
 max-width:1140px;
 margin:0 auto;
 padding:0 24px;
 }
header{
 position:sticky;
 top:0;
 background:rgba(255,255,255,.96);
 backdrop-filter:blur(8px);
 border-bottom:1px solid var(--line);
 z-index:1000;
 }
.nav{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:14px 0;
 gap:24px;
 }
.brand{
 display:flex;
 align-items:center;
 gap:12px;
 text-decoration:none;
 color:var(--text);
 flex-shrink:0;
 }
.brand:hover{
 opacity:.96;
 }
.logo-img{
 width:52px;
 height:52px;
 object-fit:contain;
 border-radius:10px;
 display:block;
 transition:transform 0.2s ease;
 }
.brand:hover .logo-img{
 transform:scale(1.03);
 }
.brand-text b{
 display:block;
 font-size:18px;
 line-height:1.1;
 }
.brand-text span{
 display:block;
 font-size:13px;
 color:var(--muted);
 margin-top:2px;
 }
.menu{
 display:flex;
 align-items:center;
 gap:20px;
 flex-wrap:wrap;
 }
.menu a,
 .menu .dropbtn{
 color:var(--text);
 text-decoration:none;
 font-size:14px;
 background:none;
 border:none;
 padding:0;
 margin:0;
 cursor:pointer;
 font-family:inherit;
 white-space:nowrap;
 line-height:1;
 display:inline-flex;
 align-items:center;
 height:24px;
 }
.menu a:hover,
 .menu .dropbtn:hover{
 color:var(--accent);
 }
.dropdown{
 position:relative;
 display:inline-flex;
 align-items:center;
 padding-bottom:0;
 }
.dropdown-content{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 min-width:340px;
 background:#fff;
 border:1px solid var(--line);
 border-radius:16px;
 box-shadow:0 18px 40px rgba(15,23,42,.12);
 padding:8px 0;
 z-index:1001;
 margin-top:0; 
 }
.dropdown-content a{
 display:block;
 padding:12px 16px;
 font-size:14px;
 line-height:1.4;
 color:var(--text);
 text-decoration:none;
 white-space:nowrap;
 height:auto;
 }
.dropdown-content a:hover{
 background:var(--soft);
 }
.dropdown:hover .dropdown-content{
 display:block;
 }
h1{
 font-size:38px;
 line-height:1.14;
 margin:0 0 18px;
 }
h2{
 font-size:28px;
 line-height:1.24;
 margin:0 0 14px;
 }
h3{
 font-size:22px;
 margin:0 0 10px;
 }
p{
 color:var(--muted);
 margin:0 0 16px;
 }
section{
 padding:56px 0;
 scroll-margin-top:110px;
 }
.hero{
 padding:64px 0 40px;
 background:linear-gradient(180deg,#fff,#f8fafc);
 }
.pill{
 display:inline-block;
 border:1px solid var(--line);
 background:#fff;
 padding:8px 14px;
 border-radius:999px;
 font-size:13px;
 margin-bottom:18px;
 }
.lead{
 max-width:950px;
 font-size:17px;
 }
.panel{
 background:#fff;
 border:1px solid var(--line);
 border-radius:28px;
 padding:24px;
 box-shadow:0 18px 40px rgba(15,23,42,.08);
 }
.soft{
 background:var(--soft);
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
 }
.cards{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
 margin-top:22px;
 }
.card{
 background:#fff;
 border:1px solid var(--line);
 border-radius:24px;
 padding:22px;
 }
.two{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:24px;
 align-items:start;
 }
ul{
 padding-left:22px;
 margin:0;
 }
li{
 margin:0 0 12px;
 color:var(--muted);
 }
.cta{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 margin-top:24px;
 }
.btn{
 display:inline-block;
 padding:14px 20px;
 border-radius:16px;
 text-decoration:none;
 font-weight:700;
 border:none;
 cursor:pointer;
 font-family:inherit;
 font-size:14px;
 }
.btn-dark{
 background:var(--dark);
 color:#fff;
 }
.btn-light{
 background:#fff;
 color:var(--text);
 border:1px solid var(--line);
 }
#contact-form .two{
 grid-template-columns:1fr;
 }
#contact-form .panel{
 max-width:760px;
 margin:0 auto;
 }
.grid2{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:14px;
 }
input, select, textarea{
 width:100%;
 padding:14px 16px;
 border:1px solid #cbd5e1;
 border-radius:16px;
 font:inherit;
 background:#fff;
 color:var(--text);
 }
textarea{
 resize:vertical;
 min-height:140px;
 }
footer{
 padding:28px 0;
 border-top:1px solid var(--line);
 background:#fff;
 color:var(--muted);
 }
.footer-grid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:24px;
 align-items:start;
 }
.footer-grid p{
 margin:0 0 10px;
 }
.floating{
 position:fixed;
 right:22px;
 bottom:20px;
 display:inline-block;
 padding:14px 18px;
 border-radius:999px;
 color:#fff;
 text-decoration:none;
 font-weight:700;
 box-shadow:0 14px 30px rgba(0,0,0,.18);
 z-index:900;
 font-size:14px;
 background:var(--green);
 }
@media (max-width:900px){
  .nav{
   flex-direction:column;
   align-items:flex-start;
   }
  .menu{
   gap:14px;
   }
  .dropdown-content{
   min-width:260px;
   }
  .two,
   .grid2,
   .cards,
   .footer-grid{
   grid-template-columns:1fr;
   }
  h1{font-size:34px}
  h2{font-size:26px}
  .floating{
   right:14px;
   }
  .two,
   .grid2,
   .cards,
   .footer-grid,
   .grid-3{
   grid-template-columns:1fr;
   }
  .two,
   .cards,
   .footer-grid,
   .career-grid,
   .grid2{
   grid-template-columns:1fr;
   }
  .hero-grid,
   .two,
   .grid2,
   .cards{
   grid-template-columns:1fr;
   }
}
form{
 display:grid;
 gap:14px;
 }
.container{
 max-width:1200px;
 margin:0 auto;
 padding:0 20px;
 }
ul, ol{
 padding-left:22px;
 margin:0;
 }
.btn-whatsapp{
 background:var(--green);
 color:#fff;
 }
.cta-row{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 margin-top:24px;
 }
.dark-panel{background:#fff}
.list-clean{
 list-style:disc;
 padding-left:22px;
 margin:0;
 }
.list-clean li{
 margin-bottom:12px;
 color:var(--muted);
 }
.grid-3{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:30px;
 margin-top:20px;
 }
.grid-box{
 background:#f5f5f5;
 padding:24px;
 border-radius:18px;
 border:1px solid var(--line);
 }
.grid-box{
 background:#f5f5f5;
 padding:24px;
 border-radius:18px;
 border:1px solid var(--line);
 }
.grid2{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:14px;
 }
.highlight-box{
 background:#fff7ed;
 border:1px solid #fed7aa;
 border-radius:20px;
 padding:20px;
 }
.career-grid{
 display:grid;
 grid-template-columns:1.2fr .8fr;
 gap:28px;
 align-items:start;
 }
#career-form .panel{
 max-width:760px;
 margin:0 auto;
 }
.contact-card{
 color:#fff;
 border-radius:22px;
 padding:22px;
 text-decoration:none;
 display:block;
 transition:0.25s ease;
}
.contact-card:hover{
 transform:translateY(-3px);
 box-shadow:0 12px 30px rgba(0,0,0,0.12);
}
.card-phone{
 background:#374151; 
}
.card-mobile{
 background:#ea580c; 
}
.card-whatsapp{
 background:#25D366; 
}
.contact-card a{
 color:#fff;
 text-decoration:underline;
}
.hero-grid{
 display:grid;
 grid-template-columns:1.2fr 1fr;
 gap:32px;
 align-items:center;
 }
.dark-panel p,
 .dark-panel li{
 color:#dbe4f0;
 }
.map{
 width:100%;
 height:320px;
 border:0;
 border-radius:24px;
 margin-top:18px;
 }
.highlight-link{
 background:#f97316;
 color:#fff !important;
 padding:8px 12px !important;
 border-radius:6px;
 margin-left:8px;
 font-weight:600;
 transition:0.2s ease;
 }
.highlight-link:hover{
 background:#ea580c;
 color:#fff !important;
 }
.mk-logistes-page{
 background:#fff;
 }
.mk-logistes-wrap{
 max-width:1140px;
 margin:0 auto;
 padding:0 24px;
 }
.mk-logistes-hero{
 padding:72px 0 60px;
 background:linear-gradient(135deg,#fff7ed 0%, #ffffff 60%, #f8fafc 100%);
 border-bottom:1px solid var(--line);
 }
.mk-logistes-eyebrow{
 display:inline-block;
 padding:8px 14px;
 border-radius:999px;
 background:#fff;
 border:1px solid #fed7aa;
 color:var(--accent);
 font-size:13px;
 font-weight:700;
 letter-spacing:.04em;
 margin-bottom:18px;
 }
.mk-logistes-hero h1{
 font-size:32px;
 line-height:1.08;
 margin:0 0 18px;
 color:var(--text);
 }
.mk-logistes-hero p{
 max-width:820px;
 font-size:18px;
 line-height:1.75;
 color:var(--muted);
 margin:0;
 }
.mk-logistes-actions{
 display:flex;
 gap:14px;
 flex-wrap:wrap;
 margin-top:28px;
 }
.mk-logistes-btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:48px;
 padding:0 18px;
 border-radius:14px;
 text-decoration:none;
 font-weight:700;
 font-size:14px;
 transition:.2s ease;
 }
.mk-logistes-btn-primary{
 background:var(--accent);
 color:#fff;
 }
.mk-logistes-btn-primary:hover{
 background:#c2410c;
 color:#fff;
 }
.mk-logistes-btn-secondary{
 background:#fff;
 color:var(--text);
 border:1px solid var(--line);
 }
.mk-logistes-btn-secondary:hover{
 border-color:var(--accent);
 color:var(--accent);
 }
.mk-logistes-section{
 padding:68px 0;
 }
.mk-logistes-section-alt{
 background:var(--soft);
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
 }
.mk-logistes-intro{
 margin-bottom:28px;
 }
.mk-logistes-intro h2{
 font-size:32px;
 line-height:1.15;
 margin:0 0 14px;
 color:var(--text);
 }
.mk-logistes-intro p{
 max-width:840px;
 font-size:17px;
 line-height:1.75;
 color:var(--muted);
 margin:0;
 }
.mk-logistes-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:20px;
 }
.mk-logistes-card{
 background:#fff;
 border:1px solid var(--line);
 border-radius:24px;
 padding:24px;
 box-shadow:0 18px 40px rgba(15,23,42,.06);
 }
.mk-logistes-card h3{
 font-size:24px;
 line-height:1.2;
 margin:0 0 10px;
 color:var(--text);
 }
.mk-logistes-card p{
 margin:0;
 color:var(--muted);
 font-size:15px;
 line-height:1.7;
 }
.mk-logistes-benefits{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:18px;
 }
.mk-logistes-benefit{
 background:#fff;
 border:1px solid var(--line);
 border-radius:20px;
 padding:20px 22px;
 color:var(--text);
 font-size:16px;
 line-height:1.65;
 box-shadow:0 10px 24px rgba(15,23,42,.04);
 }
.mk-logistes-steps{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:18px;
 }
.mk-logistes-step{
 background:#fff;
 border:1px solid var(--line);
 border-radius:22px;
 padding:24px 20px;
 box-shadow:0 12px 28px rgba(15,23,42,.05);
 }
.mk-logistes-step span{
 width:42px;
 height:42px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:999px;
 background:var(--accent);
 color:#fff;
 font-weight:700;
 margin-bottom:14px;
 }
.mk-logistes-step p{
 margin:0;
 color:var(--muted);
 font-size:15px;
 line-height:1.7;
 }
.mk-logistes-band{
 padding:72px 0;
 background:var(--dark);
 text-align:center;
 }
.mk-logistes-band h2{
 color:#fff;
 font-size:32px;
 line-height:1.15;
 margin:0 0 14px;
 }
.mk-logistes-band p{
 max-width:860px;
 margin:0 auto;
 color:#dbe4f0;
 font-size:18px;
 line-height:1.8;
 }
.mk-logistes-cta{
 padding:72px 0 28px;
 text-align:center;
 }
.mk-logistes-cta h2{
 font-size:30px;
 line-height:1.15;
 margin:0 0 12px;
 color:var(--text);
 }
.mk-logistes-cta p{
 font-size:18px;
 line-height:1.75;
 color:var(--muted);
 margin:0;
 }
.mk-logistes-form-section{
 padding:20px 0 70px;
 background:#fff;
 }
.mk-logistes-form-intro{
 margin-bottom:20px;
 }
.mk-logistes-form-intro h2{
 margin-top:0;
 }
.mk-logistes-form-intro p.note{
 font-size:14px;
 color:var(--muted);
 margin-top:10px;
 }
color: #ffffff; 
 padding: 6px 12px;
 border-radius: 8px;
}


.menu a.active,
.menu a.highlight-link {
 color: #fff;
}


.menu a.highlight-link {
 background: #ea580c;
 color: #ffffff;
 font-weight: 600;
}
 
 

 .map{
 width:100%;
 height:320px;
 border:0;
 border-radius:24px;
 margin-top:18px;
 }

 footer{
 padding:28px 0;
 border-top:1px solid var(--line);
 background:#fff;
 color:var(--muted);
 }

 .floating{
 position:fixed;
 right:22px;
 bottom:20px;
 display:inline-block;
 padding:14px 18px;
 border-radius:999px;
 color:#fff;
 text-decoration:none;
 font-weight:700;
 box-shadow:0 14px 30px rgba(0,0,0,.18);
 z-index:900;
 font-size:14px;
 background:var(--green);
 }

 
 @media (max-width:900px){
 .nav{
 flex-direction:column;
 align-items:flex-start;
 }
.menu{
 gap:14px;
 }
.dropdown-content{
 min-width:260px;
 }
.two,
 .grid2,
 .mk-logistes-grid,
 .mk-logistes-benefits,
 .mk-logistes-steps{
 grid-template-columns:1fr;
 }
h1{font-size:34px}
h2{font-size:26px}
.mk-logistes-hero h1{
 font-size:38px;
 }
.mk-logistes-hero p,
 .mk-logistes-band p,
 .mk-logistes-cta p,
 .mk-logistes-intro p{
 font-size:17px;
 }
.mk-logistes-intro h2,
 .mk-logistes-band h2,
 .mk-logistes-cta h2{
 font-size:30px;
 }
}
pyrasfaleia-kafe.html

 .grid2{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:14px;
 }

/* ---------- added by the rebuild ---------- */

/* Body copy colour.
   The original set every <p> and every <li> to --muted #475569, so all
   the running text on every page and article was mid-grey while the
   headings above it were near-black. It reads as faded.

   #475569 is 7.6:1 on white; #334155 is 10.4:1 — clearly darker, while
   still sitting a step softer than the #0f172a headings so the hierarchy
   survives. This overrides the variable itself, so paragraphs, lists,
   card notes and the footer all move together.

   To go back, delete this block and re-run tools/extract-css.php. */
:root{
 --muted:#334155;
}

/* Links inside page copy.
   The live site had no `a` rule at all — only .menu a, .dropdown-content a
   and the .btn classes — so all 30 in-content links fell back to the
   browser default #0000EE, underlined. Against that, ordinary grey body
   text looked faded, which is why the unlinked items in the panel on
   mixanikos-nea-ionia read as "hidden".

   --link is the brand accent darkened. #ea580c itself is only 3.6:1 on
   white, under the 4.5:1 WCAG AA needs for body text; #c2410c is 5.2:1.
   The accent is still used as-is for backgrounds and larger elements.

   Buttons, the menu and the footer legal block set their own colour with
   a class, so they outrank this and are unaffected. */
:root{
 --link:#c2410c;
}
a{
 color:var(--link);
}
a:hover{
 color:var(--text);
}

/* The footer legal block. Was an inline style="" on the 4 pages that
   carried it; it is now on every page, so it gets a class. */
.legal-block{
 margin-top:30px;
 font-size:12px;
 color:#555;
}
.legal-block a{ color:inherit; }
/* The smaller grey "note" paragraph at the foot of a card. Was an
   inline style="font-size:14px;color:var(--muted)" on 15 cards. */
.card-note{
 font-size:14px;
 color:var(--muted);
}

.legal-block .copyright{
 margin:14px 0 0;
 padding-top:12px;
 border-top:1px solid var(--line);
}