/* Wild Safari Crete 4x4 — shared demo styles (tokens, header, menu, common sections)
   Direction: brief/design-direction-v1.md */

:root{
  --bg:#F4EDE1; --ink:#2A2119; --ink-soft:#5A4D40; --cta:#B94E2A; --cta-dark:#9C3F20;
  --olive:#67703A; --surface:#E6DDCF; --paper:#FBF7F0; --line:rgba(42,33,25,.14);
  --t1:#7A2E3A; --t2:#3D5A6C; --t3:#D9822B;
  --display:"Commissioner",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  --r:20px; --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:min(1240px, calc(100% - 48px));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg) var(--grain);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.005em}
h2{font-size:clamp(32px,4.2vw,56px);font-weight:800}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:56ch}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* review helpers: temp images + missing info (hide with ?clean) */
.ph{position:relative;overflow:hidden;background:var(--surface)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::after{content:"Προσωρινή εικόνα";position:absolute;left:10px;bottom:10px;font:600 10px/1 var(--body);letter-spacing:.04em;background:rgba(42,33,25,.72);color:#fff;padding:5px 7px;border-radius:4px}
.ph.slot::after{content:attr(data-slot)}
.ph.slot{display:grid;place-items:center;background:var(--surface) repeating-linear-gradient(135deg,transparent 0 14px,rgba(42,33,25,.05) 14px 15px)}
.ph.slot svg{width:34px;height:34px;stroke:var(--ink-soft);fill:none;stroke-width:1.4;opacity:.6}
.clean .ph::after{display:none}
.tbc{background:rgba(217,130,43,.22);border-bottom:1px dashed var(--t3);padding:0 3px;border-radius:2px}
.clean .tbc{background:none;border:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--body);padding:16px 24px;border-radius:999px;border:0;cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease),color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-cta{background:var(--cta);color:#fff}.btn-cta:hover{background:var(--cta-dark)}
.btn-ghost{border:1.5px solid currentColor;background:transparent}
.btn-wa{background:#1f7a4d;color:#fff}.btn-wa:hover{background:#17623d}

/* ============ HEADER ============ */
header.site{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
header.site.scrolled{background:rgba(244,237,225,.94);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font:900 18px/1 var(--display);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.logo b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:13px}
.logo small{display:block;font:600 10px/1 var(--body);letter-spacing:.14em;color:var(--ink-soft);margin-top:4px}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-right:6px}
.nav .btn{padding:12px 20px;font-size:15px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:600;font-size:15px;cursor:pointer;transition:background .25s,color .25s}
.menu-btn:hover{background:var(--ink);color:var(--bg)}
.menu-btn i{display:grid;gap:4px;width:18px}
.menu-btn i::before,.menu-btn i::after{content:"";height:2px;background:currentColor;border-radius:2px}
.menu-btn i::after{width:12px;justify-self:end}
@media (max-width:980px){.nav-phone{display:none}}
@media (max-width:760px){.nav .btn-cta{display:none}}

/* ============ MENU OVERLAY ============ */
.navx{position:fixed;inset:0;z-index:100;background:var(--bg) var(--grain);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease),visibility 0s .7s;overflow-y:auto}
.navx.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease)}
.navx-top{display:flex;align-items:center;justify-content:space-between;height:78px}
.navx-close{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--ease),background .25s,color .25s}
.navx-close:hover{transform:rotate(90deg);background:var(--ink);color:var(--bg)}
.navx-body{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;padding:4vh 0 60px;min-height:calc(100vh - 78px);align-items:center}
.navx-links{list-style:none}
.navx-links>li{overflow:hidden}
.navx-links a.big{display:inline-flex;align-items:baseline;gap:18px;font:800 clamp(40px,6.4vw,88px)/1.08 var(--display);text-transform:uppercase;letter-spacing:.01em;transform:translateY(105%);transition:transform .7s var(--ease),color .25s}
.navx-links a.big small{font:600 13px/1 var(--body);letter-spacing:.06em;color:var(--ink-soft)}
.navx.open .navx-links a.big{transform:none}
.navx-links a.big:hover{color:var(--cta)}
.navx-links a.big.book{color:var(--cta)}
.navx-links a.big.book:hover{color:var(--ink)}
.navx-pills{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;opacity:0;transition:opacity .5s .45s}
.navx.open .navx-pills{opacity:1}
.navx-pills a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:15px;font-weight:500;transition:border-color .25s,background .25s}
.navx-pills a:hover{border-color:var(--ink);background:var(--paper)}
.navx-pills i{width:10px;height:10px;border-radius:50%}
.navx-side{display:grid;justify-items:center;gap:36px;opacity:0;transform:translateY(20px);transition:opacity .6s .35s,transform .6s .35s var(--ease)}
.navx.open .navx-side{opacity:1;transform:none}
.navx-card{width:min(300px,70%);aspect-ratio:3/4;border-radius:var(--r);transform:rotate(4deg);box-shadow:0 30px 50px -30px rgba(42,33,25,.6)}
.navx-card img{transition:opacity .35s}
.navx-contact{display:grid;gap:10px;width:min(320px,100%)}
.navx-contact a{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:var(--surface);font-weight:600}
.navx-contact a.wa{background:#1f7a4d;color:#fff}
.navx-contact small{display:block;font:500 12px/1.2 var(--body);opacity:.75}
@media (max-width:860px){
  .navx-body{grid-template-columns:1fr;align-items:start;gap:30px}
  .navx-card{display:none}
  .navx-side{justify-items:start}
}

/* ============ COMMON SECTIONS ============ */
/* timeline */
.timeline{list-style:none;border-left:2px solid var(--line);margin-left:8px}
.timeline li{position:relative;display:grid;grid-template-columns:120px 1fr;gap:20px;padding:14px 0 14px 28px;border-bottom:1px solid var(--line)}
.timeline li::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--acc,var(--cta))}
.timeline li.stop::before{background:var(--acc,var(--cta))}
.timeline time{font:600 15px/1.5 var(--body);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.timeline li.stop span{font-weight:600}
@media (max-width:760px){.timeline li{grid-template-columns:96px 1fr;gap:12px}}

/* editorial rows with icons */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:60px 1fr 1.3fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.row>svg{width:30px;height:30px;color:var(--olive);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row h3{font-size:clamp(21px,2vw,26px);font-weight:700}
.row p{color:var(--ink-soft)}
@media (max-width:760px){.row{grid-template-columns:40px 1fr}.row p{grid-column:2}}

/* faq (light) */
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:600 19px/1.35 var(--display)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:26px;line-height:1;transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 20px;color:var(--ink-soft);max-width:62ch}

/* booking */
.contact-list{margin-top:30px;display:grid;gap:14px}
.contact-item{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;background:var(--surface);transition:transform .25s var(--ease)}
.contact-item:hover{transform:translateX(4px)}
.contact-item .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg);flex:none}
.contact-item small{display:block;font-size:13px;color:var(--ink-soft)}
.contact-item strong{font:800 20px/1.2 var(--display)}
.contact-item.wa .ic{background:#1f7a4d;color:#fff}
.contact-item.tel .ic{background:var(--cta);color:#fff}
.bform{background:var(--paper);border-radius:24px;padding:clamp(24px,3.5vw,44px);box-shadow:0 1px 0 var(--line)}
.bform h3{font-size:28px;font-weight:800;margin-bottom:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.full{grid-column:1/-1}
.bform label{display:grid;gap:6px;font-size:14px;font-weight:600}
.bform input,.bform select,.bform textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--bg);border:1.5px solid transparent;border-radius:10px;padding:13px 14px;width:100%}
.bform input:focus,.bform select:focus,.bform textarea:focus{outline:none;border-color:var(--cta)}
.bform textarea{min-height:96px;resize:vertical}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.form-ok{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;background:rgba(103,112,58,.15);color:var(--olive);font-weight:600}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}

/* footer */
footer.site{background:var(--surface);padding:70px 0 110px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px}
.foot-word{font:900 clamp(48px,10vw,150px)/.85 var(--display);letter-spacing:-.045em;margin-bottom:40px;opacity:.9}
.foot nav{display:flex;flex-wrap:wrap;gap:22px;font-weight:500}
.foot small{color:var(--ink-soft)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.navx-links a.big{transform:none}}