/* ==============================
   HOTBOX — Optimized Stylesheet
   ============================== */

/* ---- Theme Tokens ---- */
:root{
  --primary-bg:#000;
  --secondary-bg:#1a1a1a;
  --text-color:red;
  --accent-color:orange;
  --light-accent:red;
  --dark-accent:#a37b3f;
  --border-color:#333;
  --par-color:white;
}

/* ---- Reset / Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;width:100%;
  overflow-x:hidden;overflow-y:auto;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
  background:#444; /* page flash guard under hero */
}
body{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:var(--primary-bg);
  color:var(--text-color);
  line-height:1.6;
}
a{color:var(--accent-color);text-decoration:none;transition:color .25s}
a:hover{color:var(--light-accent)}
ul{list-style:none}

/* ---- Layout helpers ---- */
.container{max-width:1200px;margin:0 auto;padding-inline:20px}
.section{padding-block:80px}
.content-section{padding-block:80px;background:var(--primary-bg)}
.content-section:nth-of-type(even){background:var(--secondary-bg)}

.section-layout-grid{
  display:flex;flex-direction:column;gap:40px;
  align-items:center;text-align:center;
}
.section-titles h2,.section-titles h3{text-align:center}
.section-main-content-body{max-width:900px;width:100%;text-align:center}
.section-main-content-body ul{
  list-style:disc;margin:2rem auto 0;max-width:800px;padding-left:20px;text-align:left
}
.section-main-content-body li{margin-bottom:.8rem;font-weight:300;font-size:1.1rem;line-height:1.8}

/* ---- Typography ---- */
h1,h2,h3,h4{
  font-weight:900;text-transform:uppercase;
  margin-bottom:1rem;line-height:1.2;color:var(--light-accent)
}
h1{font-size:4.5rem;line-height:1}
h2{font-size:3.5rem;line-height:.9;margin-bottom:2rem}
h3{font-size:1.25rem;line-height:1.2;margin-bottom:1.5rem;color:var(--text-color);font-weight:300}
h4{font-size:2rem;line-height:.9;color:var(--accent-color);margin-bottom:.8rem}
p{margin-bottom:1rem;font-weight:300;color:var(--accent-color)}
li{color:var(--accent-color)}
/* ---- Buttons ---- */
.btn{
  display:inline-block;cursor:pointer;border:0;border-radius:5px;
  background:var(--accent-color);color:var(--primary-bg);
  padding:12px 25px;font-weight:700;text-transform:uppercase;
  font-size:1rem;transition:background-color .25s,color .25s
}
.btn:hover{background:var(--light-accent);color:var(--primary-bg)}

/* ---- Header / Nav ---- */
#main-header{
  position:sticky;top:0;z-index:1000;width:100%;
  background:rgba(0,0,0,.9);padding-block:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.5)
}
.header-container{display:flex;justify-content:space-between;align-items:center}
.logo a{display:inline-flex;align-items:center;color:var(--light-accent);font-weight:700}
.logo-img{height:48px;width:auto;display:block}

#main-header nav ul{display:flex;gap:30px;margin-left:3rem}
#main-header nav a{
  color:var(--text-color);font-weight:400;text-transform:uppercase;
  font-size:.95rem;padding-block:5px;position:relative;
}
#main-header nav a::after{
  content:'';position:absolute;left:0;bottom:-5px;height:2px;width:0;
  background:var(--accent-color);transition:width .25s
}
#main-header nav a:hover::after,
#main-header nav a.active::after{width:100%}

/* leave space when jumping to anchors */
#hero,.content-section{scroll-margin-top:90px}

/* ---- Hero (parallax-ready) ---- */
#hero{
  position:relative;isolation:isolate;
  height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;color:var(--text-color);
  background-image:url('https://images.unsplash.com/photo-1542838118-285628526555?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
  background-size:cover;background-position:center 0; /* JS adjusts Y */
  background-attachment:scroll; /* mobile-safe; JS provides parallax */
}
#hero::before{
  content:'';position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.7)
}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px}
.hero-text{position:relative;z-index:3;margin-bottom:1rem;margin-top:9rem;margin-left:1rem}
.hero-text h1{
  font-size:clamp(3.2rem,12vw,8rem);line-height:.9;margin-bottom:1.5rem;
  text-shadow:0 0 10px rgba(0,0,0,.7);font-weight:900
}
.hero-text p{font-size:clamp(1rem,3vw,1.3rem);max-width:600px;margin:0 auto 2.5rem;font-weight:300}
.hero-image-wrapper{width:100%;max-width:400px;margin:0 auto}
.parallax-element{
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0);
  transition:none !important;display:block;pointer-events:none;filter:drop-shadow(0 0 20px rgba(0,0,0,.8))
}

/* Scroll hint */
.scroll-down{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;color:var(--text-color);
  font-size:.9rem;font-weight:300;opacity:.7;animation:bounce 2s infinite
}
.scroll-down svg{margin-top:5px;width:28px;height:28px;stroke:var(--accent-color)}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}

/* ---- Promo image pill ---- */
.promo-image-wrapper{
  flex:0 0 auto;width:180px;height:180px;display:flex;place-content:center;place-items:center;
  background:#000;border-radius:50%;padding:15px;transition:transform .25s,box-shadow .25s
}
.promo-image-wrapper:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(0,0,0,.7),inset 0 0 15px rgba(255,255,255,.1)}
.promo-image{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,0,0,.7))}

/* ---- How it works ---- */
.how-it-works-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:4rem}
.how-it-works-grid .step{
  background:var(--secondary-bg);padding:30px;border-radius:8px;text-align:center;
  box-shadow:0 5px 15px rgba(0,0,0,.3);border:1px solid var(--border-color);
  transition:transform .25s,box-shadow .25s
}
.how-it-works-grid .step:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.how-it-works-grid .step h4{color:var(--accent-color);font-size:2rem;margin-bottom:1rem}
.how-it-works-grid .step p{font-weight:300;font-size:1.05rem}

/* ---- Forms ---- */
.contact-form{
  max-width:600px;margin:3rem auto 0;display:flex;flex-direction:column;gap:20px;
  padding:30px;background:var(--secondary-bg);border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,.3);border:1px solid var(--border-color)
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  width:100%;padding:15px;background:var(--primary-bg);
  border:1px solid var(--border-color);border-radius:5px;color:var(--text-color);
  font:1rem 'Roboto',sans-serif;transition:border-color .25s
}
.contact-form ::placeholder{color:#999}
.contact-form :is(input,textarea):focus{border-color:var(--accent-color);outline:0}
.contact-form button{align-self:flex-start}

/* ---- Map (centered shell + dark UI) ---- */
.map-shell{max-width:1100px;margin:0 auto;padding-inline:16px}
#map{
  height:480px;width:100%;border-radius:12px;overflow:hidden;background:#121212
}
@media (max-width:768px){#map{height:420px}}
@media (max-width:480px){#map{height:360px}}
.leaflet-container{background:#121212}
.leaflet-bar a{background:#2a2a2a !important;color:#eee !important;border-color:#3a3a3a !important}
.leaflet-bar a:hover{background:#3a3a3a !important}
.leaflet-control-attribution{background:rgba(20,20,20,.85) !important;color:#ccc !important}
.leaflet-popup-content-wrapper{
  background:#1f1f1f !important;color:#eee !important;border:1px solid #333;border-radius:12px
}
/* marker flair + popup content */
.custom-marker-icon{background:transparent;border:0;transition:transform .2s}
.custom-marker-icon .custom-marker-svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.custom-marker-icon:hover{transform:scale(1.2)}
.marker-clicked{transform:scale(1.08);transition:transform .25s}
.hot-sauce-popup img{display:block;max-width:90px;height:auto;border-radius:8px;margin:8px 0}
.spice-rating span{font-size:1.1rem;line-height:1;margin-right:2px}

/* ---- Footer ---- */
#footer{
  background:var(--secondary-bg);color:var(--text-color);
  border-top:1px solid var(--border-color);padding-block:24px
}
.footer-inner{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:20px}
.footer-links a{color:var(--accent-color);font-weight:400;text-transform:uppercase;font-size:.95rem}
.footer-links a:hover{color:var(--light-accent)}

/* ---- Modals (framework-free) ---- */
.modal{position:fixed;inset:0;display:none;z-index:2000}
.modal.is-open{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(2px)}
.modal__dialog{
  position:relative;margin:6vh auto;max-width:900px;width:calc(100% - 32px);max-height:90vh;
  background:#2b2b2b;color:#eee;border:1px solid #444;border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column
}
.modal__header{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:#1a1a1a;border-bottom:1px solid #333
}
.modal__title{margin:0;font-size:1.1rem;color:var(--accent-color);text-transform:uppercase}
.modal__close{background:transparent;border:0;color:#ccc;font-size:1.6rem;cursor:pointer}
.modal__close:hover{color:#fff}
.modal__body{
  flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:18px;line-height:1.6
}
.modal__body h2{color:var(--light-accent);font-size:1.25rem;margin:1rem 0 .4rem;text-transform:none}
.modal__body p,.modal__body li{color:#ddd;font-weight:300}
.modal__body ul{list-style:disc;padding-left:20px}

/* ---- Responsive tweaks ---- */
@media (max-width:667px){
  .hero-text h1{margin-top:3rem}
  #hero{padding-top:100px}
  #hero .hero-content{padding-top:100px}
}
@media (min-width:768px){
  .logo-img{height:64px}
  h1{font-size:8rem}
  h2{font-size:5rem}
  h3{font-size:1.9rem}
  .hero-content{flex-direction:row;gap:50px;justify-content:space-around;text-align:left;align-items:center}
  .hero-text{flex:1;max-width:50%;margin-bottom:0}
  .hero-text h1{text-align:left;line-height:.9;margin-bottom:2rem;}
  .hero-text p{margin-inline:0;text-align:left}
  .hero-image-wrapper{flex:1;max-width:45%;margin:0}
  .btn{font-size:1.1rem;padding:15px 30px}
  .section-layout-grid{
    display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;
    gap:40px 60px;align-items:start;text-align:left
  }
  .section-titles{grid-column:1;grid-row:1;text-align:left}
  .section-titles h2,.section-titles h3{text-align:left}
  .promo-image-wrapper{
    grid-column:2;grid-row:1;max-width:250px;max-height:250px;width:250px;height:250px;
    align-self:center;justify-self:center
  }
  .section-main-content-body{grid-column:1 / -1;grid-row:2;text-align:left;margin:0;width:100%}
  .section-main-content-body ul{margin-left:25px}
  #how.reverse-order-desktop .section-titles{grid-column:2}
  #how.reverse-order-desktop .promo-image-wrapper{grid-column:1}
  .how-it-works-grid{grid-template-columns:repeat(2,1fr);max-width:1000px;margin-inline:auto}
  .footer-inner{flex-direction:row}
}
@media (min-width:1024px){
  .how-it-works-grid{grid-template-columns:repeat(3,1fr)}
}