/* ============================================================
   Faros Beach Restaurant — Kardamena, Kos
   Coastal editorial · Whitewash & Aegean blue · Fraunces + Inter
   ============================================================ */

:root{
  /* --- palette --- */
  --white:      #FFFFFF;
  --paper:      #FBFAF7;   /* barely-warm whitewash */
  --sand:       #F1EBE1;
  --sand-deep:  #E3D9C8;
  --aegean:     #3F4D7B;   /* primary - sampled from the logo artwork */
  --aegean-dk:  #2C3759;
  --aegean-lt:  #ECEEF5;
  --ink:        #17222B;
  --ink-soft:   #4A5A66;
  --line:       #E2E0DA;
  --accent:     #C6742F;   /* terracotta, used sparingly */

  /* --- type --- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- rhythm --- */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1180px;
  --narrow: 760px;
  --r: 4px;

  --shadow: 0 1px 2px rgba(23,34,43,.05), 0 8px 28px rgba(23,34,43,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-feature-settings:"kern","liga"; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--aegean); text-underline-offset:.18em}
a:hover{color:var(--aegean-dk)}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6.2vw,4.2rem)}
h2{font-size:clamp(1.85rem,4vw,2.9rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1.1em; max-width:68ch}
.lede{font-size:clamp(1.1rem,1.8vw,1.3rem); line-height:1.55; color:var(--ink-soft)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--narrow)}
section{padding-block:clamp(3.5rem,8vw,7rem)}
section.tight{padding-block:clamp(2.5rem,5vw,4rem)}
.bg-sand{background:var(--sand)}
.bg-white{background:var(--white)}
.bg-deep{background:var(--aegean-dk); color:#DDE2EE}
.bg-deep h1,.bg-deep h2,.bg-deep h3{color:#fff}
.bg-deep a{color:#C6CFE6}

.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--aegean);
  margin:0 0 1rem; display:block;
}
.bg-deep .eyebrow{color:#A9B5D3}
.rule{width:56px; height:2px; background:var(--accent); border:0; margin:0 0 1.6rem}

/* ---------- draft ribbon ---------- */
.draft{
  background:#8A1C1C; color:#fff; font-size:.8rem; font-weight:600;
  letter-spacing:.05em; text-align:center; padding:.55rem var(--gut);
  position:relative; z-index:60;
}
.draft a{color:#FFD9D9}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(251,250,247,.92);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex; align-items:center; gap:1.5rem; min-height:80px}
.logo{display:flex; align-items:center; text-decoration:none; margin-right:auto; padding:.35rem 0}
.logo__img{width:auto; height:54px}
@media(max-width:640px){.logo__img{height:42px}}
.logo__img--white{height:66px; width:auto}

.nav{display:flex; gap:1.6rem; align-items:center}
.nav a{
  font-size:.92rem; font-weight:500; color:var(--ink); text-decoration:none;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--sand-deep)}
.nav a[aria-current="page"]{border-bottom-color:var(--aegean); color:var(--aegean)}
@media(max-width:900px){.nav{display:none}}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--ink)}
@media(max-width:900px){.burger{display:block}}
/* the sticky call bar already carries the booking CTA on phones */
@media(max-width:768px){.hdr__in > .btn{display:none}}
.drawer{display:none;border-top:1px solid var(--line);background:var(--paper)}
.drawer.open{display:block}
.drawer a{display:block;padding:.85rem var(--gut);border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.75rem 1.5rem; border-radius:var(--r);
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{background:var(--aegean); color:#fff}
.btn--primary:hover{background:var(--aegean-dk); color:#fff}
.btn--ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn--ghost:hover{background:var(--ink); color:#fff}
.btn--light{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.06)}
.btn--light:hover{background:#fff; color:var(--ink)}
.btn--wa{background:#25D366; color:#0B2E17}
.btn--wa:hover{background:#1EB855; color:#062611}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(88vh,780px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--aegean-dk)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 62%}
/* on a narrow screen the frame goes portrait - hold onto the beach, not the rooftops */
@media(max-width:700px){.hero img{object-position:center 78%}}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,22,40,.44) 0%,rgba(16,22,40,.10) 30%,rgba(16,22,40,.62) 62%,rgba(16,22,40,.90) 100%)}
.hero__in{position:relative; z-index:2; padding-block:clamp(3rem,9vw,6rem); width:100%}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 10px rgba(10,14,28,.45), 0 1px 40px rgba(10,14,28,.5)}
.hero .lede{color:rgba(255,255,255,.95); max-width:46ch; font-size:clamp(1.05rem,1.8vw,1.28rem);
  text-shadow:0 1px 10px rgba(10,14,28,.6)}
.hero .eyebrow{color:#DCE3F2; text-shadow:0 1px 10px rgba(10,14,28,.75)}

.page-hero{position:relative; min-height:clamp(280px,42vh,440px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; background:var(--aegean-dk)}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,28,42,.3),rgba(10,28,42,.75))}
.page-hero__in{position:relative;z-index:2;padding-block:clamp(2rem,5vw,3.5rem);width:100%}
.page-hero h1{color:#fff;margin-bottom:.2em;text-shadow:0 2px 12px rgba(10,14,28,.5)}
.page-hero p{color:rgba(255,255,255,.93);max-width:52ch;margin:0;text-shadow:0 1px 10px rgba(10,14,28,.6)}

/* ---------- grids ---------- */
.grid{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.split{display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split--img img{border-radius:var(--r); box-shadow:var(--shadow)}

/* two photographs side by side, matched height */
.pair{display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pair img{width:100%; height:clamp(280px,34vw,460px); object-fit:cover;
  border-radius:var(--r); box-shadow:var(--shadow)}

/* ---------- cards ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.75rem}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--ink-soft); font-size:.96rem}
.card__icon{width:30px;height:30px;color:var(--aegean);margin-bottom:1rem}
.inline-icon{width:20px;height:20px;flex:0 0 20px;color:var(--aegean);vertical-align:-.18em;margin-right:.4rem}

.fact{border-top:2px solid var(--aegean); padding-top:1.1rem}
.fact__k{font-family:var(--serif); font-size:2.4rem; line-height:1; display:block; margin-bottom:.3rem}
.fact__v{font-size:.9rem; color:var(--ink-soft)}
.bg-deep .fact{border-top-color:#7C88AE}
.bg-deep .fact__v{color:#B4BDD6}

/* ---------- menu ---------- */
.menu-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.menu-nav a{font-size:.85rem;font-weight:600;padding:.45rem .9rem;border:1px solid var(--line);
  border-radius:100px;text-decoration:none;color:var(--ink);background:var(--white)}
.menu-nav a:hover{border-color:var(--aegean);color:var(--aegean)}

.msec{margin-bottom:clamp(2.5rem,5vw,4rem); scroll-margin-top:100px}
.msec__head{border-bottom:2px solid var(--ink); padding-bottom:.6rem; margin-bottom:1.5rem}
.msec__head h2{margin:0}
.msec__blurb{font-size:.95rem;color:var(--ink-soft);margin:.5rem 0 0}
.msub{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--aegean); margin:1.75rem 0 .35rem; padding-bottom:.3rem;
  border-bottom:1px solid var(--line)}
.msub:first-child{margin-top:0}
.mitem{display:flex; align-items:baseline; gap:.75rem; padding:.7rem 0; border-bottom:1px dotted var(--line)}
.mitem__body{flex:1 1 auto; min-width:0}
.mitem__name{font-weight:600}
.mitem__desc{font-size:.9rem; color:var(--ink-soft); display:block; margin-top:.1rem}
.mitem__dots{flex:1 1 auto; border-bottom:1px dotted var(--sand-deep); transform:translateY(-4px); min-width:1rem}
.mitem__price{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.mitem__price--ask{font-weight:500;font-size:.88rem;color:var(--ink-soft);font-style:italic}
.veg{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5C8C3A;margin-left:.4rem;
  vertical-align:middle}

/* ---------- full-bleed photo band with copy over it ---------- */
.band{position:relative; min-height:clamp(340px,48vh,520px); display:flex; align-items:center;
  color:#fff; overflow:hidden; background:var(--aegean-dk); text-align:center}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* drop past the neon sign so it stops fighting the headline */
  object-position:center 74%}
.band::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,16,30,.74),rgba(12,16,30,.66))}
.band__in{position:relative; z-index:2; width:100%; padding-block:clamp(2.5rem,6vw,4rem)}
.band h2{color:#fff; margin-inline:auto; max-width:18ch;
  text-shadow:0 2px 14px rgba(8,12,24,.55)}
.band .lede{color:rgba(255,255,255,.92); margin-inline:auto; max-width:52ch;
  text-shadow:0 1px 10px rgba(8,12,24,.6)}
.band .eyebrow{color:#DCE3F2; text-shadow:0 1px 10px rgba(8,12,24,.75)}

/* ---------- a plain row of photographs ---------- */
.strip{display:grid; gap:clamp(.75rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.strip--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:2.5rem}
.strip img{width:100%; height:clamp(200px,22vw,300px); object-fit:cover;
  border-radius:var(--r); box-shadow:var(--shadow)}

/* ---------- review rating line ---------- */
.rating{display:inline-block; margin:1.25rem 0 0; padding:.5rem 1rem;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  font-size:.92rem; color:var(--ink-soft)}
.rating strong{color:var(--ink)}

/* ---------- quotes ---------- */
.quote{background:var(--white); border-left:3px solid var(--aegean); padding:1.5rem 1.75rem; border-radius:0 var(--r) var(--r) 0}
.quote p{font-family:var(--serif); font-size:1.12rem; line-height:1.45; margin:0 0 .9rem}
.quote cite{font-style:normal; font-size:.82rem; color:var(--ink-soft); letter-spacing:.03em}

/* ---------- timeline ---------- */
.tl{list-style:none; margin:0; padding:0; border-left:2px solid var(--sand-deep)}
.tl li{position:relative; padding:0 0 2.25rem 2rem}
.tl li::before{content:""; position:absolute; left:-7px; top:.55rem; width:12px; height:12px;
  border-radius:50%; background:var(--aegean); border:2px solid var(--paper)}
.tl__yr{font-family:var(--serif); font-size:1.4rem; display:block; margin-bottom:.2rem}
.tl li p{margin:0; color:var(--ink-soft)}

/* ---------- gallery ---------- */
.gal{columns:3 260px; column-gap:1rem}
.gal figure{break-inside:avoid; margin:0 0 1rem; position:relative}
.gal img{border-radius:var(--r); width:100%}
.gal figcaption{font-size:.78rem; color:var(--ink-soft); padding-top:.4rem}

/* ---------- forms ---------- */
.form{display:grid; gap:1.1rem; max-width:640px}
.field{display:grid; gap:.4rem}
.field label{font-size:.85rem; font-weight:600; letter-spacing:.01em}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; padding:.7rem .85rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); color:var(--ink); min-height:48px; width:100%;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--aegean); outline-offset:1px; border-color:var(--aegean)}
.field--row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media(max-width:560px){.field--row{grid-template-columns:1fr}}
.phone-group{display:flex; gap:.5rem}
.phone-group select{flex:0 0 auto; width:auto; min-width:140px; max-width:180px}
.phone-group input{flex:1 1 auto; min-width:0}
.hp{position:absolute!important;left:-9999px!important}
.form__note{font-size:.85rem;color:var(--ink-soft)}

/* ---------- form result banner ---------- */
.formmsg{padding:1rem 1.25rem; border-radius:var(--r); margin-bottom:1.5rem;
  font-size:.96rem; line-height:1.5; border-left:3px solid}
.formmsg--ok{background:#ECF4EC; border-left-color:#4A7C46; color:#22361F}
.formmsg--bad{background:#FDECEC; border-left-color:#9B2C2C; color:#4A1C1C}
.formmsg a{color:inherit; font-weight:600}

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:#C4CED6; padding-block:clamp(3rem,6vw,4.5rem) 2rem; font-size:.93rem}
.ftr h4{color:#fff; font-family:var(--sans); font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 1rem}
.ftr a{color:#C4CED6; text-decoration:none}
.ftr a:hover{color:#fff; text-decoration:underline}
.ftr__grid{display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ftr__bot{margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.82rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}

/* the fixer credit — house rule: lowercase, "the" Arial, "fixer" Arial Black */
.fixer{text-decoration:none; color:#C4CED6; letter-spacing:.01em; white-space:nowrap}
.fixer:hover{color:#fff}
.fixer .t{font-family:Arial,Helvetica,sans-serif; font-weight:400}
.fixer .f{font-family:"Arial Black","Arial Bold",Arial,Helvetica,sans-serif; font-weight:900}

/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  background:var(--white); border-top:1px solid var(--line); padding:.6rem;
  gap:.5rem; box-shadow:0 -4px 20px rgba(0,0,0,.07)}
.callbar .btn{flex:1 1 0; min-height:46px; font-size:.88rem; padding-inline:.5rem}
@media(max-width:768px){.callbar{display:flex} body{padding-bottom:70px}}

/* ---------- misc ---------- */
.map{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r); min-height:320px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.75rem 1rem;border-radius:var(--r)}
.note{background:var(--aegean-lt); border-left:3px solid var(--aegean); padding:1rem 1.25rem;
  border-radius:0 var(--r) var(--r) 0; font-size:.94rem}
.note p:last-child{margin-bottom:0}
.todo{background:#FFF4E5;border-left:3px solid var(--accent);padding:1rem 1.25rem;
  border-radius:0 var(--r) var(--r) 0;font-size:.9rem}
.todo p:last-child{margin-bottom:0}