/* =========================================================
   AROMA RESTAURANTE — Design Tokens
   Palette pulled from the actual space: pink storefront,
   crimson dining wall, neon gold signage, palm green, sand.
   ========================================================= */
:root{
  --pink: #E63E8C;
  --pink-deep: #C22B71;
  --crimson: #9C2B3A;
  --crimson-deep: #6E1C28;
  --coral: #FF7A45;
  --gold: #F2A93B;
  --gold-soft: #F7C873;
  --palm: #3F7D5C;
  --palm-deep: #285C41;
  --cream: #FBF1E4;
  --sand: #F3E3C9;
  --ink: #1B1512;
  --ink-soft: #3A2B26;

  --font-display: 'Bevan', 'Georgia', serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-script: 'Caveat', cursive;

  --radius: 18px;
  --shadow-soft: 0 18px 40px -18px rgba(27,21,18,.45);
  --shadow-pop: 0 10px 24px -8px rgba(156,43,58,.5);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .4em; line-height:1.08; letter-spacing:.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-script);
  color: var(--coral);
  font-size: 1.55rem;
  display:block;
  margin-bottom: .1em;
  transform: rotate(-2deg);
}

/* woven / rattan-placemat texture, echoes the real placemats */
.woven-tex{
  background-image:
    radial-gradient(circle at 6px 6px, rgba(27,21,18,.10) 1.3px, transparent 1.6px);
  background-size: 12px 12px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding: .9em 1.7em;
  border-radius: 100px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  border: 2px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold), var(--coral));
  color: var(--ink);
  box-shadow: 0 10px 26px -10px rgba(242,169,59,.65);
}
.btn-gold:hover{ box-shadow: 0 16px 32px -10px rgba(242,169,59,.8); }
.btn-outline{
  background: transparent;
  border-color: rgba(251,241,228,.55);
  color: var(--cream);
}
.btn-outline:hover{ background: rgba(251,241,228,.12); border-color: var(--cream); }
.btn-dark{
  background: var(--ink);
  color: var(--cream);
}
.btn-dark:hover{ background: var(--crimson); }

/* ---------- Neon signature treatment ---------- */
.neon-text{
  font-family: var(--font-display);
  color: var(--cream);
  text-shadow:
    0 0 6px rgba(242,169,59,.9),
    0 0 18px rgba(242,169,59,.6),
    0 0 40px rgba(230,62,140,.45);
}
.neon-divider{
  height: 3px;
  width: 84px;
  margin: 18px auto;
  background: var(--gold);
  border-radius: 4px;
  box-shadow: 0 0 10px 2px rgba(242,169,59,.7), 0 0 26px 6px rgba(230,62,140,.35);
}
.neon-divider.left{ margin-left:0; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 24px;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease, top .3s ease;
}
.site-header.solid{
  background: rgba(27,21,18,.92);
  backdrop-filter: blur(10px);
  padding: 10px 24px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
}
.brand{
  display:flex;
  align-items:center;
  gap:.6em;
}
.brand-logo{
  height: 40px;
  width: auto;
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(242,169,59,.5));
  background: rgba(251,241,228,.9);
  padding: 4px 10px;
  border-radius: 10px;
}
.footer-logo{
  height: 48px; width:auto;
  background: rgba(251,241,228,.9);
  padding: 5px 12px;
  border-radius: 10px;
}
.main-nav{
  display:flex;
  align-items:center;
  gap: 30px;
}
.main-nav a{
  color: var(--cream);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.03em;
  text-transform: uppercase;
  position:relative;
  padding: 4px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background: var(--gold);
  transition: right .3s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color: var(--gold-soft); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-socials{ display:flex; gap:10px; }
.icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(251,241,228,.12);
  color: var(--cream);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.icon-btn:hover{ background: var(--gold); color: var(--ink); transform: translateY(-2px) scale(1.06); }
.icon-btn svg{ width:18px; height:18px; }

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:50%;
  background: rgba(251,241,228,.12);
  border:none;
  color: var(--cream);
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:22px;height:22px; }

/* ---------- Floating quick-access social rail ---------- */
.social-rail{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 480;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 12px 8px;
  background: rgba(27,21,18,.55);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  border: 1px solid rgba(251,241,228,.15);
}
.social-rail a{
  width:38px;height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--cream);
  background: rgba(251,241,228,.08);
  transition: all .25s ease;
}
.social-rail a svg{ width:18px;height:18px; }
.social-rail a:hover{
  background: linear-gradient(135deg, var(--pink), var(--coral));
  transform: scale(1.12);
  box-shadow: 0 6px 18px -4px rgba(230,62,140,.7);
}

/* mobile bottom bar version of quick access */
.social-bar-mobile{ display:none; }

@media (max-width: 900px){
  .main-nav, .header-socials{ display:none; }
  .nav-toggle{ display:flex; }
  .social-rail{ display:none; }
  .social-bar-mobile{
    display:flex;
    position:fixed; bottom:0; left:0; right:0; z-index:490;
    background: rgba(27,21,18,.95);
    backdrop-filter: blur(10px);
    justify-content:space-around;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(251,241,228,.12);
  }
  .social-bar-mobile a{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color: var(--cream); font-size:.68rem; font-weight:600;
  }
  .social-bar-mobile svg{ width:20px;height:20px; }
  body{ padding-bottom: 68px; }
}

/* mobile nav drawer */
.mobile-drawer{
  position: fixed; inset:0;
  background: rgba(27,21,18,.98);
  z-index: 600;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap: 26px;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.6,.02,.15,1);
}
.mobile-drawer.open{ transform: translateY(0); }
.mobile-drawer a{
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--cream);
}
.mobile-drawer .close-drawer{
  position:absolute; top:20px; right:24px;
  width:42px;height:42px; border-radius:50%;
  background: rgba(251,241,228,.12); border:none; color:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
.mobile-drawer .drawer-socials{ display:flex; gap:16px; margin-top:10px; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee-band{
  background: var(--ink);
  color: var(--gold-soft);
  overflow:hidden;
  border-top: 1px solid rgba(242,169,59,.25);
  border-bottom: 1px solid rgba(242,169,59,.25);
  padding: 12px 0;
}
.marquee-track{
  display:flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee-track span{
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .12em;
  padding: 0 26px;
  white-space: nowrap;
}
.marquee-track span::after{ content:"✦"; margin-left:26px; color: var(--pink); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--ink);
  color: var(--sand);
  padding: 64px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-size:1.4rem; color:var(--cream); margin-bottom:12px; }
.footer-col h4{ font-family: var(--font-body); font-weight:700; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:14px; }
.footer-col li{ margin-bottom: 10px; }
.footer-col a{ color: var(--sand); opacity:.85; font-size:.93rem; }
.footer-col a:hover{ opacity:1; color: var(--gold-soft); }
.footer-socials{ display:flex; gap:12px; margin-top:14px; }
.footer-bottom{
  border-top: 1px solid rgba(251,241,228,.12);
  padding-top: 22px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem; opacity:.65; flex-wrap:wrap; gap:10px;
}
@media (max-width: 800px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal-scale.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-scale, .marquee-track{ transition:none; animation:none; opacity:1; transform:none; }
}

/* =========================================================
   PAGE HERO (interior pages)
   ========================================================= */
.page-hero{
  position: relative;
  padding: 190px 0 90px;
  color: var(--cream);
  background-size: cover;
  background-position: center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,21,18,.55), rgba(27,21,18,.88));
}
.page-hero .container{ position:relative; z-index:2; text-align:center; }
.page-hero h1{ font-size: clamp(2.6rem, 6vw, 4.4rem); }
.page-hero p{ max-width: 520px; margin: 0 auto; opacity:.9; }

/* generic section spacing */
section{ padding: 90px 0; }
@media (max-width: 700px){ section{ padding: 60px 0; } }