/* ============================================================
   JUNGLI — shared styles
   ============================================================ */

/* ---- brand faces: Swiss 911 Extra Compressed (display),
        Perfectly Nineties (subheads & supporting moments) ---- */
@font-face{
  font-family:'Swiss 911 Extra Compressed';
  font-style:normal;
  font-weight:400 800;
  font-display:block;
  src:url('../assets/fonts/Swiss911-XCm.woff2') format('woff2');
}
@font-face{
  font-family:'Perfectly Nineties';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url('../assets/fonts/PerfectlyNineties-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Perfectly Nineties';
  font-style:italic;
  font-weight:400;
  font-display:block;
  src:url('../assets/fonts/PerfectlyNineties-Italic.woff2') format('woff2');
}
@font-face{
  font-family:'Perfectly Nineties';
  font-style:normal;
  font-weight:600;
  font-display:block;
  src:url('../assets/fonts/PerfectlyNineties-Semibold.woff2') format('woff2');
}
@font-face{
  font-family:'Perfectly Nineties';
  font-style:italic;
  font-weight:600;
  font-display:block;
  src:url('../assets/fonts/PerfectlyNineties-SemiboldItalic.woff2') format('woff2');
}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:block;src:url('../assets/fonts/BigShouldersDisplay-700.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:block;src:url('../assets/fonts/BigShouldersDisplay-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:block;src:url('../assets/fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:block;src:url('../assets/fonts/Inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:block;src:url('../assets/fonts/Inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:block;src:url('../assets/fonts/Inter-700.woff2') format('woff2');}

:root{
  color-scheme:dark;
  --chilli:#FF3200;
  --pickle:#CCCA4B;
  --indigo:#253E54;
  --mulberry:#60122F;
  --olive:#604A01;
  --skyblue:#CAE7F7;
  --bg:#1B0509;
  --fern:#33473A;
  --ink:#1A1310;
  --display:'Swiss 911 Extra Compressed','Big Shoulders Display','Arial Narrow',sans-serif;
  --serif:'Perfectly Nineties',Georgia,serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter',sans-serif; background:var(--bg); color:#fff;
  min-height:100vh; overflow-x:hidden;
}
.display{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:0.01em; line-height:0.92;}
:focus-visible{outline:3px solid var(--pickle); outline-offset:3px;}
a{color:inherit;}

/* ---- fern backdrop ---- */
.backdrop{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background-image:url('../assets/img/backdrop-mobile.jpg');
  background-size:cover; background-position:center;
}
@media (min-width:701px){
  .backdrop{background-image:url('../assets/img/backdrop.jpg');}
}
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(62% 46% at 50% 46%, rgba(16,3,6,0.5), rgba(16,3,6,0.08) 70%, rgba(16,3,6,0) 100%);
}
body.page .backdrop::after{
  background:linear-gradient(rgba(16,3,6,0.30), rgba(16,3,6,0.46));
}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ---- site nav ---- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:26px;
  padding:16px 22px;
  background:linear-gradient(rgba(16,2,5,0.82), rgba(16,2,5,0));
}
.site-nav .nav-logo img{height:26px; width:auto; display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5));}
.site-nav .nav-links{display:flex; gap:22px; align-items:center; margin-left:6px;}
.site-nav .nav-links a{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:0.09em; text-decoration:none;
  color:#fff; opacity:0.85; transition:opacity 0.15s ease, color 0.15s ease;
  padding:4px 0;
}
.site-nav .nav-links a:hover{opacity:1;}
.site-nav .nav-links a[aria-current=page]{color:var(--chilli); opacity:1; border-bottom:2px solid var(--chilli);}
.reserve-cta{
  margin-left:auto;
  -webkit-appearance:none; appearance:none;
  background:var(--chilli); color:#140407 !important; border:none; cursor:pointer;
  padding:9px 16px; border-radius:2px; text-decoration:none; display:inline-block;
  font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:0.92rem; letter-spacing:0.07em;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.reserve-cta:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,50,0,0.4);}

/* ---- shared page layout (menu / contact) ---- */
.page main{
  position:relative; z-index:2; max-width:1000px; margin:0 auto;
  padding:130px 22px 70px;
}
.page-title{
  color:var(--chilli); font-size:clamp(3.2rem, 8vw, 6rem);
  text-shadow:0 4px 40px rgba(0,0,0,0.55);
}
.page-intro{margin-top:14px; max-width:560px; color:rgba(255,255,255,0.9); font-family:var(--serif); font-style:normal; font-size:1.08rem; line-height:1.55; text-shadow:0 2px 14px rgba(0,0,0,0.75);}
.tag-note{
  display:inline-block; margin-top:18px; padding:6px 12px; border:1px solid var(--pickle); border-radius:2px;
  color:var(--pickle); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
}

/* ---- reveal animation ---- */
.reveal{opacity:0; animation:revealIn 1.2s cubic-bezier(.16,.8,.3,1) forwards;}
@keyframes revealIn{
  0%{opacity:0; transform:translateY(24px); filter:blur(5px);}
  60%{filter:blur(0);}
  100%{opacity:1; transform:translateY(0); filter:blur(0);}
}
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none; opacity:1; transform:none;}
}

/* ---- footer ---- */
.site-foot{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:30px 20px 40px;
}
.site-foot img{height:30px; width:auto; filter:drop-shadow(0 2px 14px rgba(0,0,0,0.5));}
.site-foot .foot-tags, .brand-foot .foot-tags{
  font-family:'Inter',sans-serif; font-style:normal;
  font-size:0.64rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.75);
}
.site-foot .foot-tags .sep, .brand-foot .foot-tags .sep{color:var(--chilli); margin:0 6px; font-family:'Inter',sans-serif; font-style:normal;}
.site-foot .foot-reg, .brand-foot .foot-reg{
  font-family:'Inter',sans-serif; font-style:normal;
  font-size:0.58rem; letter-spacing:0.08em; color:rgba(255,255,255,0.45);
}
.site-foot span{font-family:'Inter',sans-serif; font-style:normal; text-transform:uppercase; font-size:0.62rem; letter-spacing:0.18em; font-weight:600; color:rgba(255,50,0,0.9);}
.site-foot .foot-links{display:flex; gap:16px; margin-top:4px;}
.site-foot .foot-links a{font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.55); text-decoration:none;}
.site-foot .foot-links a:hover{color:var(--pickle);}

/* ---- booking modal (demo fallback while SevenRooms account is pending) ---- */
.modal-veil{
  position:fixed; inset:0; z-index:50; background:rgba(10,1,3,0.75); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-veil.open{display:flex; animation:veilIn 0.25s ease;}
@keyframes veilIn{from{opacity:0;} to{opacity:1;}}
.widget-box{
  background:#fff; color:var(--ink); border-radius:6px; padding:26px;
  max-width:420px; width:100%; text-align:left; box-shadow:0 30px 80px rgba(0,0,0,0.6);
  position:relative; max-height:92vh; overflow:auto;
}
.modal-close{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  border:1px solid #ddd; background:#fff; cursor:pointer; font-size:1rem; line-height:1; color:var(--ink);
}
.widget-brand{display:flex; align-items:center; gap:9px; margin-bottom:6px;}
.widget-brand .dot{width:9px; height:9px; border-radius:50%; background:var(--chilli);}
.widget-brand span{font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:#5a5048;}
.widget-note{font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase; color:#8a8178; margin-bottom:18px;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.cal-title{font-weight:600; font-size:0.95rem;}
.cal-nav{display:flex; gap:6px;}
.cal-nav button{width:30px; height:30px; border-radius:50%; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:0.9rem; color:var(--ink);}
.cal-nav button:disabled{opacity:0.35; cursor:not-allowed;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:18px;}
.cal-dow{font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:600; color:#8a8178; text-align:center; padding:4px 0;}
.cal-day{aspect-ratio:1; border:none; background:none; border-radius:50%; font-size:0.85rem; font-family:inherit; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s ease;}
.cal-day:hover:not(:disabled){background:#f0ede6;}
.cal-day:disabled{color:#ccc; cursor:default;}
.cal-day.selected{background:var(--chilli); color:#fff; font-weight:600;}
.cal-day.empty{visibility:hidden;}
.widget-fields{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.field label{display:block; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; margin-bottom:5px; color:#5a5048;}
.field select{width:100%; padding:9px 11px; border:1px solid #ddd; border-radius:3px; font-size:0.9rem; font-family:inherit;}
.party-stepper{display:flex; align-items:center; justify-content:space-between; border:1px solid #ddd; border-radius:3px; padding:7px 11px;}
.party-stepper button{width:22px; height:22px; border-radius:50%; border:1px solid #ccc; background:#fff; cursor:pointer;}
.widget-btn{width:100%; padding:14px 20px; border-radius:2px; border:none; cursor:pointer; -webkit-appearance:none; appearance:none; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; background:var(--chilli); color:#140407 !important;}
.widget-result{margin-top:14px; padding:12px 14px; border-radius:4px; background:#F2EEE4; color:#253E54; font-size:0.84rem; line-height:1.5; display:none;}
.widget-result.show{display:block;}

/* ---- responsive nav ---- */
@media (max-width:640px){
  .site-nav{gap:14px; padding:12px 14px; flex-wrap:wrap;}
  .site-nav .nav-logo img{height:22px;}
  .site-nav .nav-links{gap:14px;}
  .site-nav .nav-links a{font-size:0.92rem;}
  .reserve-cta{padding:9px 13px; font-size:0.85rem;}
  .page main{padding-top:110px;}
}