/* Apollon Hospitality: the home page's "quiet luxury" look for the content pages
   (market pages, salary guide, work-in-Greece, privacy, cookies, accessibility and their EL/DE versions).
   Loaded AFTER each page's own <style>, so it only restyles; no content, ids or scripts change.
   To go back to the old look: remove the <link> to this file (and js/page.js) or use the Git tag reference-homepage-v1. */

:root{
  --navy:#16284A; --navy-deep:#0B1730; --gold:#C5A55B; --gold-bright:#E3C987; --gold-deep:#876727; --gold-text:#7A5C22;
  --stone:#F6F2E9; --paper:#FFFDF9; --ink:#12203A; --muted:#566074; --line:#E7E0D0;
  --serif:"EB Garamond","Noto Serif Display",Garamond,Georgia,serif;
  --sans:"Manrope","Mulish","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{font-family:var(--sans);font-size:17.5px;line-height:1.75;color:var(--ink);background:var(--stone);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--gold-bright);color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-optical-sizing:auto;font-weight:500}

/* header: frosted navy with a gold hairline */
.top{background:rgba(11,23,48,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(197,165,91,.3);box-shadow:0 14px 40px -26px rgba(0,0,0,.9);position:sticky}
.top .wrap{padding-block:13px}
.logo .wm b{font-family:"Bodoni Moda",var(--serif);font-weight:500;font-size:20px;letter-spacing:.3em}
.logo .wm small{font-family:var(--sans);letter-spacing:.5em;font-size:9px;color:var(--gold-bright)}
.back{border-radius:999px;border-color:rgba(227,201,135,.55);color:var(--gold-bright);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 16px;transition:background .3s,color .3s,transform .3s var(--ease)}
.back:hover{background:var(--gold-bright);color:var(--navy-deep);transform:translateY(-1px)}
.lsw{border-radius:999px;font-size:12px;letter-spacing:.1em}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}

/* title band */
.head{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 140% at 88% -10%,#1F3A6B 0%,#0E1D3B 52%,#070E1E 100%);
  padding-block:clamp(64px,10vw,128px)}
.head::before,.head::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(197,165,91,.3);z-index:-1;pointer-events:none}
.head::before{width:620px;height:620px;right:-170px;top:-250px}
.head::after{width:380px;height:380px;right:-40px;top:-130px;border-color:rgba(197,165,91,.2)}
.head .wrap{position:relative}
.head .wrap::after{content:"";display:block;width:84px;height:1px;margin-top:clamp(28px,4vw,44px);background:linear-gradient(90deg,var(--gold-bright),transparent)}
.kicker{display:flex;align-items:center;gap:14px;color:var(--gold-bright);font-size:12px;font-weight:700;letter-spacing:.28em;margin-bottom:22px}
.kicker::before{content:"";width:40px;height:1px;background:var(--gold-bright)}
h1{font-size:clamp(36px,5.6vw,72px);line-height:1.03;letter-spacing:-.028em;font-weight:500;max-width:18ch}
.head p{font-size:clamp(18px,1.6vw,21px);line-height:1.7;color:rgba(255,255,255,.8);margin-top:24px;max-width:58ch}

/* article */
main.body{background:var(--paper);padding-block:clamp(56px,8vw,104px)}
main.body h2{position:relative;font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.018em;color:var(--navy);margin:clamp(40px,5vw,60px) 0 16px;padding-top:26px}
main.body h2::before{content:"";position:absolute;left:0;top:0;width:44px;height:1px;background:var(--gold)}
main.body h2:first-child{margin-top:0}
main.body h3{color:var(--navy);font-size:22px;margin:28px 0 8px}
main.body p,main.body li{color:#3C4558;font-size:18px}
main.body strong{color:var(--navy)}
main.body ul{list-style:none;padding-left:0}
main.body ul li{position:relative;padding-left:30px;margin-bottom:10px}
main.body ul li::before{content:"";position:absolute;left:0;top:.82em;width:16px;height:1px;background:var(--gold)}
main.body a{color:var(--gold-text);text-decoration-color:rgba(156,123,54,.5);text-underline-offset:4px;transition:color .2s}
main.body a:hover{color:var(--navy)}
main.body a.btn{text-decoration:none}
main.body a.btn-navy,main.body a.btn-navy:hover{color:#fff}
main.body a.btn-gold,main.body a.btn-gold:hover{color:var(--navy-deep)}
.upd{font-size:13px;letter-spacing:.06em;color:var(--muted)}

/* editorial layout (js/page.js): each H2 becomes a section with a pinned title column */
.pg-ed .wrap{max-width:1160px}
.pg-intro{margin-bottom:clamp(8px,2vw,24px)}
.pg-sec{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(24px,5vw,88px);
  padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--line)}
.pg-sec:first-of-type{border-top:1px solid var(--ink)}
.pg-title{position:sticky;top:104px;align-self:start}
.pg-title h2{margin:0;padding-top:26px}
.pg-copy > :first-child{margin-top:0}
.pg-copy p{max-width:62ch}
.pg-copy .cta{margin-top:30px}
@media (max-width:860px){.pg-sec{grid-template-columns:1fr}.pg-title{position:static}}

/* long lists become cards */
.pg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:c;margin:0}
main.body .pg-cards li{counter-increment:c;position:relative;overflow:hidden;margin:0;padding:28px 26px 26px;border:1px solid var(--line);border-radius:18px;
  background:var(--stone);transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
main.body .pg-cards li::before{content:"0" counter(c);position:static;display:block;width:auto;height:auto;background:none;
  font-family:var(--serif);font-size:15px;letter-spacing:.22em;color:var(--gold-deep);margin-bottom:12px}
main.body .pg-cards li::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(197,165,91,.2),transparent 65%)}
main.body .pg-cards li:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 30px 50px -34px rgba(11,23,48,.5)}
main.body .pg-cards li:hover::after{opacity:1}
@media (max-width:640px){.pg-cards{grid-template-columns:1fr}}

/* title band rings drift with the scroll */
.head::before{translate:0 calc(var(--py,0px) * -.6)}
.head::after{translate:0 calc(var(--py,0px) * -1.1)}

/* facts */
.facts{gap:0;margin:clamp(28px,4vw,48px) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.facts div{border-top:0;padding:26px 28px 28px 0}
.facts div + div{padding-left:28px;border-left:1px solid var(--line)}
.facts b{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.02em;line-height:1.05;
  background:linear-gradient(135deg,var(--gold-deep),#D8BC73);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts span{display:block;margin-top:8px;font-size:15px;color:var(--muted)}
@media (max-width:620px){.facts div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* buttons */
.btn{font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:18px 28px;border-radius:999px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.btn-gold{background:linear-gradient(135deg,#D8BC73 0%,#C5A55B 45%,#B08C43 100%);color:var(--navy-deep);box-shadow:0 14px 30px -14px rgba(156,123,54,.9)}
.btn-navy{background:var(--navy);color:#fff}
.btn-line{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn:hover{transform:translateY(-2px)}
.btn-navy:hover{background:var(--navy-deep);box-shadow:0 16px 30px -14px rgba(11,23,48,.8)}
.cta{gap:14px;margin-top:36px}

/* tables (salary guide) */
table{font-size:15.5px;margin:18px 0}
th{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);padding:12px 10px;border-bottom:1px solid var(--ink)}
td{padding:14px 10px;border-bottom:1px solid var(--line)}
tbody tr{transition:background .25s}
tbody tr:hover{background:linear-gradient(90deg,rgba(197,165,91,.1),transparent)}

/* footer */
footer{position:relative;background:var(--navy-deep);color:rgba(246,246,246,.72);font-size:14px;padding-block:44px}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
footer a{text-underline-offset:4px}
footer a:hover{color:var(--gold-bright)}

/* reveal (js/page.js adds .rv / .rv-in; visible without JS) */
.rv-ready .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rv-ready .rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv-ready .rv{opacity:1;transform:none;transition:none}
  .btn,.back,tbody tr{transition:none}
}
@media print{.top,.progress{position:static;box-shadow:none}.rv-ready .rv{opacity:1;transform:none}}