:root{
  color-scheme:dark;
  --green-deep:#132414;
  --green-mid:#2c4f2f;
  --green-bright:#9cc13a;
  --gold:#EABE2E;
  --gold-light:#F9D866;
  --sand:#f3ead0;
  --ink:#0d1a0f;
  --shadow: rgba(9,16,9,.45);
  --focus: #f0ce6b;

  /* premium button recipe — same everywhere, no exceptions */
  --btn-height: 3.5rem;
  --btn-height-mobile: 3.1rem;
  --btn-radius: 999px;
  --btn-gap: 1rem;
  --btn-gap-mobile: .9rem;
  --btn-bg: linear-gradient(165deg, #2c4f2f 0%, #16301f 55%, #0e1f13 100%);
  --btn-border: rgba(232,194,60,.55);
  --btn-border-hover: rgba(247,221,122,.9);
  --btn-shadow: 0 14px 28px -16px rgba(0,0,0,.65);
  --btn-shadow-hover: 0 18px 34px -14px rgba(0,0,0,.7), 0 0 22px -6px rgba(232,194,60,.4);
}

*{box-sizing:border-box;}
html, body{height:100%;}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  color:var(--sand);
  font-family:"Trebuchet MS","Segoe UI","Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(120% 60% at 12% -12%, rgba(156,193,58,.15), transparent 55%),
    linear-gradient(180deg,#152a19 0%, #0f1f13 30%, #0c170e 62%, #08120a 100%);
  -webkit-tap-highlight-color:transparent;
}
body.modal-open{ overflow:hidden; position:fixed; inset:0; width:100%; }

.page{
  position:relative;
  display:flex; flex-direction:column;
  flex:1 1 auto;
  min-height:100dvh;
  padding:1.4rem clamp(1.1rem,4vw,3rem) 1.6rem;
}

.display{
  font-family:"Playfair Display","Georgia","Times New Roman",serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-wrap:balance;
}

.eyebrow{
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-light);
  opacity:.85;
}

a{color:inherit;}
button{font-family:inherit;}

/* language toggle --------------------------------------------------- */
[data-lang="en"]{display:none;}
body.show-en [data-lang="fr"]{display:none;}
body.show-en [data-lang="en"]{display:inline;}

/* real terrace photo, sits behind everything ------------------------- */
.photo-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("../img/o2coco3.jpg");
  background-size:cover;
  background-position:center 38%;
}
.photo-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* stronger scrim behind the top text, fading so the photo itself
     stays clearly visible through the middle and lower page */
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(5,10,6,.74), rgba(5,10,6,.32) 60%, rgba(5,10,6,.16) 100%),
    linear-gradient(180deg, rgba(5,10,6,.24) 0%, rgba(5,10,6,.3) 45%, rgba(5,10,6,.52) 100%);
}
.fairy-lights{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.fairy-lights-mobile{ display:none; }

/* ===================================================================
   DESKTOP header — three-column layout
   =================================================================== */
.topbar-desktop{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1rem;
}
.title-block{ min-width:0; }
.title-block .eyebrow{margin:0 0 .25rem;}
.title-block h1{
  margin:0; font-size:clamp(1.9rem,7vw,3.4rem); line-height:.95;
  color:var(--sand);
  text-shadow:0 4px 18px var(--shadow);
  white-space:nowrap;
}
.title-block h1 span{color:var(--gold-light);}

.reservation{
  justify-self:end; text-align:right;
  font-size:1.05rem; letter-spacing:.02em;
  color:var(--sand); opacity:.9;
}
.reservation a{ text-decoration:none; }
.reservation a:hover, .reservation a:focus-visible{ color:var(--gold-light); }
.reservation .num{ color:var(--gold-light); font-weight:700; white-space:nowrap; }

.lang-toggle{
  justify-self:center;
  align-self:center;
  flex:0 0 auto;
  display:flex; align-items:center; gap:.75rem;
}

.tagline-row{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.15rem;
  margin-top:1.1rem;
}
.tagline-row span.word{ font-size:.82rem; white-space:nowrap; }
.word-1{
  font-family:"Futura","Century Gothic","Trebuchet MS",sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gold-light);
}
.word-2{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic; font-weight:700; color:#e0913f;
}
.word-3{
  font-family:Verdana,Tahoma,sans-serif;
  font-weight:700; letter-spacing:.03em; color:var(--sand);
}

.lang-toggle button, .lang-btn{
  display:block; padding:0; margin:0;
  width:1.8rem; height:1.24rem;
  border:none; border-radius:4px;
  overflow:hidden; cursor:pointer;
  opacity:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 3px 9px rgba(0,0,0,.4);
  filter:grayscale(85%) brightness(.85);
  transition:box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.lang-btn svg{display:block; width:100%; height:100%;}
.lang-btn:not([aria-pressed="true"]):hover{ filter:grayscale(30%) brightness(.95); }
.lang-btn[aria-pressed="true"]{
  filter:none;
  box-shadow:0 0 0 2px var(--gold-light), 0 4px 10px rgba(0,0,0,.45);
}
.lang-btn:hover{ transform:translateY(-1px); }
.lang-btn:active{ transform:translateY(0) scale(.92); }
.lang-btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* ===================================================================
   MOBILE hero — hidden on desktop, built for the phone experience.
   Four fixed rows, same arrangement at every mobile width:
     1. locale text ............................. Maps pin
     2. O2 COCO (left)              activities (right)
     3. language flags (centered)
     4. Instagram · Facebook · Mail (centered)
   =================================================================== */
.hero-mobile{
  display:none;
  position:relative; z-index:2;
  flex-direction:column; align-items:stretch;
}

.hero-line{ display:flex; align-items:center; width:100%; }

.hero-line-locale{ justify-content:flex-start; }
.hero-line-locale .eyebrow{ margin:0; }

.hero-line-brand{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-top:1rem; gap:.75rem;
}
.brand-col{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.25rem;
  justify-self:start;
}
.brand-mobile{
  margin:0; line-height:.95; text-align:left;
  font-size:clamp(1.9rem, 9vw, 2.5rem);
  color:var(--sand);
  text-shadow:0 4px 18px var(--shadow);
}
.brand-mobile span{ color:var(--gold-light); }


.tagline-col{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:.22rem; text-align:right;
  justify-self:end;
}
.tagline-col .word{ font-size:.68rem; white-space:nowrap; }

.hero-lang{ justify-self:center; align-self:center; }
.hero-socials{
  align-self:center; margin-top:.55rem;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
}

.reservation-mobile{
  align-self:center;
  margin:.55rem 0 0;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.reservation-mobile a:first-child{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.16em;
  color:rgba(243,234,208,.72);
  text-decoration:none;
}
.reservation-number{
  font-size:1.3rem; font-weight:700; letter-spacing:.01em;
  color:var(--gold-light);
  text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:opacity .15s ease;
}
.reservation-number:active{ opacity:.7; }

/* ===================================================================
   Action buttons — one identical recipe, no per-button exceptions
   =================================================================== */
.center-wrap{
  position:relative; z-index:2;
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  min-height:0;
  padding:1.6rem 0;
}

.stack{
  display:flex; flex-direction:column;
  gap:var(--btn-gap);
  width:100%; max-width:29rem;
}
.top-four{
  display:flex; flex-direction:column;
  gap:var(--btn-gap);
}
@media (min-width:681px){
  .top-four{ transform:translateY(-1.6rem); }
}

.card{
  position:relative;
  display:flex; align-items:center; gap:.8rem;
  width:100%;
  min-height:var(--btn-height);
  padding:0 1.3rem;
  text-decoration:none;
  color:var(--ink);
  background:var(--btn-bg);
  border:1px solid var(--btn-border);
  border-radius:var(--btn-radius);
  font-size:1em;
  box-shadow:var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.card:not(.card-gallery)::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 28%);
  mix-blend-mode:screen;
  pointer-events:none;
}
.card:hover, .card:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--btn-shadow-hover);
  border-color:var(--btn-border-hover);
}
.card:not(.card-gallery):hover, .card:not(.card-gallery):focus-visible{ filter:brightness(1.08); }
.card:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.card:active{
  transform:translateY(0) scale(.97);
  box-shadow:0 8px 16px -10px rgba(0,0,0,.6);
}

/* exact PC palette, mirrored 1:1 on mobile — real glossy depth: bright
   highlight top-left down to a richer, deeper shade bottom-right */
.card-jukebox{
  background-color:#F2BE3E;
  background-image:linear-gradient(135deg, #fade85 0%, #F2BE3E 40%, #cb8f28 100%);
  min-height:calc(var(--btn-height) + .5rem);
}
.card-restaurant{ background-color:#8CC24A; background-image:linear-gradient(135deg, #cdeb8f 0%, #8CC24A 40%, #689134 100%); }
.card-wine{ background-color:#E8933F; background-image:linear-gradient(135deg, #f5c98a 0%, #E8933F 40%, #b56b28 100%); }
.card-bakery{ background-color:#CBDB58; background-image:linear-gradient(135deg, #e6f0a0 0%, #CBDB58 40%, #a3b83e 100%); }

/* Galerie Photo — distinct from the 4 menus, but still a confident,
   important-looking button: dark glass with a bold glowing gold frame */
.card-gallery{
  background:linear-gradient(150deg, rgba(24,17,8,.92), rgba(10,7,3,.96));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#ffdf8a;
  text-shadow:0 0 14px rgba(247,221,122,.55);
  border:2px solid rgba(247,221,122,.8);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(247,221,122,.18);
  justify-content:center;
  min-height:calc(var(--btn-height) * .78);
  max-width:78%; margin:.2rem auto 0;
}
.card-gallery:hover, .card-gallery:focus-visible{
  border-color:var(--gold-light);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.65), 0 0 22px -4px rgba(247,221,122,.5), inset 0 0 0 1px rgba(247,221,122,.25);
}
.card-gallery h3{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic; font-weight:700;
  text-transform:none; letter-spacing:.02em;
}

.card-icon{ width:1.44rem; height:1.44rem; flex:0 0 auto; color:inherit; }
.card h3{
  flex:1 1 auto;
  min-width:0;
  margin:0; font-size:.94rem; line-height:1.2;
  font-family:"Futura","Century Gothic","Trebuchet MS",sans-serif;
  text-transform:uppercase; letter-spacing:.01em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.card-spacer{width:1.44rem; flex:0 0 auto;}
.mixed-case{ text-transform:none; font-style:italic; }
.icon-inline{
  width:1.15em; height:1.15em; vertical-align:-0.22em;
  margin:0 .4em; flex:0 0 auto; color:inherit;
}

.gallery-wrap{ position:relative; }
.stack-divider{ display:none; }

/* ===================================================================
   Shared "utility item" style — header socials + the mobile footer bar
   =================================================================== */
.header-social{
  display:flex; align-items:center; justify-content:flex-end;
  gap:.5rem; margin-top:.55rem;
}
.header-social-item{
  display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(247,221,122,.5);
  text-decoration:none; color:var(--gold-light);
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.header-social-item:hover, .header-social-item:focus-visible{ background:var(--gold-light); color:var(--ink); border-color:var(--gold-light); transform:translateY(-2px); }
.header-social-item:active{ transform:translateY(0) scale(.9); }
.header-social-item:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.header-social-item svg{width:1.25rem; height:1.25rem; flex:0 0 auto;}

/* Maps stays permanently gold-filled, so it reads apart from IG/FB/Mail */
.header-social-item.maps-social{
  background:var(--gold-light);
  color:var(--ink);
  border-color:var(--gold-light);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.55), 0 0 10px -2px rgba(249,216,102,.6);
}
.header-social-item.maps-social:hover, .header-social-item.maps-social:focus-visible{
  background:var(--gold); border-color:var(--gold); color:var(--ink);
}

.maps-under-tagline{ margin-top:.6rem; }

/* ===================================================================
   Breakpoint: mobile takes over completely from here down
   =================================================================== */
@media (max-width:680px){
  .page{ padding:1.2rem 1.15rem 1.1rem; }

  .topbar-desktop{ display:none; }
  .hero-mobile{ display:flex; }
  .fairy-lights:not(.fairy-lights-mobile){ display:none; }
  .fairy-lights-mobile{ display:block; }

  :root{
    --btn-height:var(--btn-height-mobile);
    --btn-gap:var(--btn-gap-mobile);
  }
  .center-wrap{ flex:0 0 auto; padding:1rem 0 0; }
  .card{ padding:0 1.05rem; gap:.65rem; }
  .card h3{ font-size:.83rem; }
  .card-icon{ width:1.2rem; height:1.2rem; }
  .card-spacer{ width:1.2rem; }
  .icon-inline{ width:1.05em; height:1.05em; margin:0 .3em; }

  /* extra breathing room around the Juke Box (its own category) and
     before the Galerie Photo secondary action */
  .card-jukebox{ margin-bottom:.35rem; }
  .gallery-wrap{ margin-top:.35rem; }

  .stack-divider{
    display:block;
    width:2.5rem; height:1px; margin:0 auto;
    background:linear-gradient(90deg, transparent, rgba(247,221,122,.55), transparent);
  }
}

@media (max-width:360px){
  .hero-mobile h1{ font-size:2rem; }
  .card h3{ font-size:.78rem; }
  .card{ padding:0 .9rem; gap:.55rem; }
}

@media (min-width:681px){
  .hero-mobile{ display:none !important; }
}

/* ===================================================================
   Modals — PDF viewer & photo gallery
   =================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.5rem,3vw,2.5rem);
  background:rgba(6,10,7,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:overlay-in .18s ease;
}
.modal-overlay[hidden]{ display:none; }
@keyframes overlay-in{ from{ opacity:0; } to{ opacity:1; } }

.modal-panel{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:56rem;
  height:min(88vh,52rem);
  background:linear-gradient(175deg,#18301c,#0c1710);
  border:1px solid rgba(247,221,122,.25);
  border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  overflow:hidden;
  animation:panel-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes panel-in{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-panel:fullscreen{ max-width:none; height:100vh; border-radius:0; }

.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid rgba(247,221,122,.18);
  flex:0 0 auto;
}
.modal-title{
  margin:0; font-size:1.02rem;
  font-family:"Futura","Century Gothic","Trebuchet MS",sans-serif;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--gold-light);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-actions{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.modal-btn{
  display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(247,221,122,.3);
  color:var(--sand);
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.modal-btn:hover, .modal-btn:focus-visible{ background:var(--gold-light); color:var(--ink); transform:translateY(-1px); }
.modal-btn:active{ transform:translateY(0) scale(.9); }
.modal-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.modal-btn:disabled{ opacity:.35; pointer-events:none; }
.modal-btn svg{ width:1.15rem; height:1.15rem; }
.modal-btn-close{ background:rgba(255,255,255,.05); }

.modal-body{ flex:1 1 auto; min-height:0; position:relative; }

/* PDF viewer ----------------------------------------------------------*/
.pdf-body{ display:flex; flex-direction:column; background:#20241c; }
.pdf-canvas-wrap{
  flex:1 1 auto; min-height:0;
  overflow:auto;
  display:flex; justify-content:center;
  padding:.75rem;
}
#pdf-canvas{ display:block; border-radius:6px; box-shadow:0 8px 24px -10px rgba(0,0,0,.6); }
.pdf-error{ margin:auto; color:var(--sand); font-size:.9rem; padding:2rem; text-align:center; }
.pdf-pager{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  padding:.6rem;
  border-top:1px solid rgba(247,221,122,.15);
}
.pdf-pager .lb-counter{ font-variant-numeric:tabular-nums; font-size:.82rem; color:rgba(243,234,208,.85); }

.pdf-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--sand); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  gap:.6rem;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:1;
}
.pdf-loading .spinner{
  width:1.1rem; height:1.1rem; border-radius:50%;
  border:2px solid rgba(243,234,208,.3); border-top-color:var(--gold-light);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.pdf-panel.is-loaded .pdf-loading{ opacity:0; }

/* Gallery ---------------------------------------------------------------*/
.gallery-panel{ max-width:66rem; }
.gallery-body{ overflow:auto; padding:1.1rem; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.7rem;
}
.gallery-thumb{
  position:relative;
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(247,221,122,.2);
  background:rgba(255,255,255,.04);
  padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gallery-thumb img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .45s ease, transform .45s ease;
}
.gallery-thumb img.is-loaded{ opacity:1; transform:scale(1); }
.gallery-thumb:hover img, .gallery-thumb:focus-visible img{ transform:scale(1.06); }
.gallery-thumb:active img{ transform:scale(.97); }
.gallery-empty{
  grid-column:1/-1;
  text-align:center; padding:3rem 1rem;
  color:rgba(243,234,208,.7); font-size:.92rem;
}

.gallery-lightbox{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#050805;
}
.gallery-lightbox[hidden]{ display:none; }
.lb-stage{
  position:absolute; inset:0 3.2rem 3rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  touch-action:pan-y;
}
.lb-image{
  max-width:100%; max-height:100%;
  object-fit:contain;
  cursor:zoom-in;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  transform-origin:center center;
}
.lb-image.is-loaded{ opacity:1; }
.lb-image.is-zoomed{ cursor:zoom-out; transform:scale(2.2); }

.lb-nav{
  position:absolute; top:0; bottom:3rem;
  width:3rem; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--sand);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lb-nav svg{ width:1.6rem; height:1.6rem; opacity:.75; transition:opacity .15s ease, transform .15s ease; }
.lb-nav:hover svg, .lb-nav:focus-visible svg{ opacity:1; transform:scale(1.15); }
.lb-nav:active svg{ transform:scale(.9); }
.lb-nav:focus-visible{ outline:2px solid var(--focus); }
.lb-prev{ left:0; }
.lb-next{ right:0; }

.lb-toolbar{
  position:absolute; left:0; right:0; bottom:0; height:3rem;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 .8rem;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
.lb-counter{ font-size:.8rem; letter-spacing:.05em; color:rgba(243,234,208,.85); font-variant-numeric:tabular-nums; }
.lb-toolbar .modal-btn{ width:2.1rem; height:2.1rem; }
.lb-toolbar-actions{ display:flex; gap:.4rem; }

@media (max-width:640px){
  .modal-panel{ height:100dvh; border-radius:0; max-width:none; }
  .modal-overlay{ padding:0; }
  .lb-stage{ inset:0 2.4rem 3rem; }
  .lb-nav{ width:2.4rem; }
  .gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .card, .header-social-item, .lang-btn, .modal-overlay, .modal-panel, .gallery-thumb img, .lb-image, .modal-btn, .reservation-number{ transition:none; animation:none; }
}