/* ─────────────────────────  RESET & GLOBALS  ───────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Inter",sans-serif;
  color:#fff;
  background:#000;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;inset:0;
  background:url("../bg.png") center/cover no-repeat;
  opacity:0;animation:bgReveal 1.6s ease-out .3s forwards;
  z-index:-2;pointer-events:none;
}
body::before{
  content:"";
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;animation:overlayReveal 1.6s ease-out .3s forwards;
  z-index:-1;pointer-events:none;
}
@keyframes bgReveal{to{opacity:1}}
@keyframes overlayReveal{to{opacity:1}}
@font-face{
  font-family:"GinAndTonic";
  src:url("../fonts/GinAndTonic.woff2") format("woff2"),
      url("../fonts/GinAndTonic.woff")  format("woff");
  font-display:swap;
}

/* ─────────────────────────  HERO (desktop)  ────────────────────── */
header.hero{
  position:relative;width:100%;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:heroSlideUp 1.6s ease-out .3s forwards;
  padding-bottom:.05rem;z-index:10;
}
@keyframes heroSlideUp{to{height:150px}}
#siteHeroBig{max-width:260px;margin-bottom:1rem}
#distLogo.dist-logo{
  width:330px!important;
  max-width:80%!important;
  height:auto;
  display:block;margin:1.5rem auto 0!important;
}

/* ─────────────────────────  NAVBAR  ────────────────────────────── */
nav.site-nav{
  position:sticky;top:0;z-index:9;
  opacity:0;animation:navFadeIn .4s ease-out 1.9s forwards;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
@keyframes navFadeIn{to{opacity:1}}

/* pill backdrop */
nav.site-nav::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:33vw;height:100%;
  background:rgba(40,40,40,.70);backdrop-filter:blur(4px);
  border-radius:9999px;z-index:0;
  transition:width .35s ease,border-radius .35s ease,background .35s ease;
}
nav.site-nav.stuck::before{width:100vw;background:rgba(40,40,40,1);border-radius:0;}

/* small logo container – left-anchored by default (desktop) */
.nav-left-hero{
  position:absolute;top:50%;left:1rem;
  transform:translateY(-50%);
  z-index:3;pointer-events:none;
}

/* small logo image */
#siteHeroSmall{
  height:auto;                    /* natural height on desktop */
  max-height:44px;               /* cap prevents oversize */
  opacity:0;
  transform:translateX(-20px) scale(.8);
  transition:opacity .3s ease,transform .3s ease;
  object-fit:contain;            /* maintain aspect */
}
nav.site-nav.stuck #siteHeroSmall{opacity:1;transform:none;}

nav.site-nav ul{
  grid-column:2;
  list-style:none;display:flex;gap:1.5rem;justify-content:center;
  padding:.75rem 1rem;width:33vw;max-width:500px;margin:0;z-index:1;
}
nav.site-nav a{
  color:#fff;text-decoration:none;font-weight:500;
  transform:scale(1);transition:transform .15s ease,opacity .15s ease;
}
nav.site-nav a:hover,
nav.site-nav a.active{transform:scale(1.5);opacity:.8;}

/* hamburger */
.nav-toggle{display:none;background:none;border:none;padding:.5rem;cursor:pointer;position:relative;z-index:2;}
.burger,.burger::before,.burger::after{
  content:"";display:block;width:22px;height:3px;background:#fff;border-radius:2px;position:relative;transition:transform .25s ease,opacity .25s ease;
}
.burger::before{transform:translateY(-7px)}
.burger::after {transform:translateY(4px)}
.site-nav.open .burger{transform:rotate(45deg)}
.site-nav.open .burger::before{opacity:0}
.site-nav.open .burger::after{transform:translateY(0) rotate(-90deg)}

/* ─────────────────────────  CONTENT WRAPPERS  ──────────────────── */
main{opacity:0;animation:contentFade .8s ease-out 2s forwards;padding:2rem 8%;}
@keyframes contentFade{to{opacity:1}}
.content-section{display:none;max-width:900px;margin:0 auto;padding:2rem 0;line-height:1.6}
.content-section.active{display:block}

/* ─────────────────────────  COCKTAIL GRID  ─────────────────────── */
.cocktail-wrap{max-width:min(1800px,50vw);margin:0 auto}
.cocktail-grid{display:grid;gap:2rem;margin-top:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.cocktail-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:1rem;padding:1.25rem;text-align:center;backdrop-filter:blur(4px);cursor:pointer;transition:transform .2s ease;}
.cocktail-card:hover{transform:scale(1.05);background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);}
.cocktail-card img{width:64px;height:64px;object-fit:contain;filter:grayscale(100%);margin-bottom:.75rem}
.cocktail-card h3{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}
.cocktail-card .ingredients{font-size:.8rem;opacity:.85;margin-bottom:.75rem}
.cocktail-card .taste{font-size:.8rem;opacity:.7;font-style:italic}

/* ─────────────────────────  DESKTOP (>1000 px)  ─────────────────── */
@media (min-width:1001px){
  /* fix logo & nav alignment when bar sticks */
  nav.site-nav.stuck .nav-left-hero{left:1rem;transform:translateY(-50%);}
  nav.site-nav.stuck ul{grid-column:2;justify-content:center;width:33vw;margin:0 auto;}
}

/* ───────── MOBILE (≤ 1000 px) ───────── */
@media (max-width:1000px){

  /* remove the hero banner on phones */
  header.hero{display:none;}

  /* ── navbar frame ─────────────────── */
  nav.site-nav{
    grid-template-columns:1fr auto auto;   /* logo | links | burger */
    padding-block:1rem;
  }
  nav.site-nav::before{                    /* pill stretches full-width */
    width:100%;
    border-radius:0;
    height:100%;
  }

  /* logo centred */
  .nav-left-hero{
    left:50%;
    transform:translate(-50%,-50%);
  }
  #siteHeroSmall{
    opacity:1!important;
    transform:none!important;
    height:100%;
    max-height:60px;          /* prevents oversize */
  }

  /* ── hamburger button (right side) ── */
  .nav-toggle{
    display:block;
    grid-column:3;            /* rightmost grid cell */
    justify-self:end;
    margin-right:.5rem;
    z-index:60;               /* above everything */
  }

  /* ── drawer menu (hidden off-canvas) ── */
  nav.site-nav ul{display:none;}           /* default: hidden */

  nav.site-nav.open ul{                    /* when .open is added */
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:1.5rem;
    position:fixed; top:0; right:0;
    width:75%;            /* drawer width (tweak as you like) */
    max-width:320px;
    height:100vh;
    background:rgba(40,40,40,.96);
    backdrop-filter:blur(6px);
    padding-top:4rem;      /* space for logo zone */
    z-index:55;
  }

  /* ── dim / blur overlay under the drawer ── */
  nav.site-nav::after{
    content:"";
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:50;
  }
  nav.site-nav.open::after{
    opacity:1;
    pointer-events:auto;   /* catches taps to close */
  }

  /* ── bigger tap targets inside drawer ── */
  nav.site-nav.open a{font-size:1.25rem;}

  /* ── page gutters slimmer on phones ── */
  main{padding:2rem .5rem!important;}

  /* ── cocktail grid 2-up ── */
  .cocktail-wrap{width:100%;max-width:none;margin:0 auto;padding:0;}
  .cocktail-grid{
    justify-items:stretch;
    grid-template-columns:repeat(2,minmax(120px,1fr))!important;
    gap:.75rem;
  }
  .cocktail-card{width:100%;min-width:0;}
}



/* ─────────────────────────  HEADINGS & MODAL  ──────────────────── */
h2{font-size:1.75rem;font-weight:600;margin-bottom:.75rem}
.cat-title{font-size:1.35rem;font-weight:600;margin:3rem 0 1rem;text-align:center;text-transform:uppercase;letter-spacing:.05em}
.cocktail-category{margin:3rem 0 1rem;font-size:1.7rem;font-weight:200;text-align:center;text-transform:uppercase;font-family:"GinAndTonic",serif;letter-spacing:.05em;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:20}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:2rem;max-width:500px;width:90%;backdrop-filter:blur(6px);animation:modalIn .25s ease forwards;text-align:center}
@keyframes modalIn{from{transform:scale(.9)}to{transform:scale(1)}}
.modal img{width:80px;height:80px;object-fit:contain;filter:grayscale(100%);margin-bottom:1rem}
.modal h3{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
.modal ul{list-style:none;line-height:1.6;font-size:.95rem;margin-bottom:1rem;text-align:left;padding:0}
.modal .close-btn{display:block;margin:1rem auto 0;padding:.4rem 1.2rem;border:1px solid rgba(255,255,255,.2);border-radius:9999px;background:transparent;color:#fff;font-size:.85rem;cursor:pointer;transition:opacity .2s ease}
.modal .close-btn:hover{opacity:.75}
.modal .divider{width:33%;height:2px;margin:1rem auto;background:rgba(255,255,255,.25);}
.modal{
  max-height:80vh;           /* never taller than 80 % of the viewport */
  display:flex;
  flex-direction:column;     /* header, body, footer stack vertically  */
  overflow:hidden;           /* hide any overflow handled by body      */
  align-items:center;
}
.modal-body{
  overflow-y:auto;
  flex:1 1 auto;             /* take remaining space, shrink if needed */
  overscroll-behavior:contain; /* prevent background page bounce on iOS */
}