/* Hêllô Bánh Mì redesign. Klasser har prefikset hbm- (Elementor: CSS-klasser under Avanceret).
   Farver og skrifter svarer til Elementor Site Settings, se docs/elementor-mapping.md */
:root{
  --paper:#F5EBD6; --paper-2:#EADBBA; --white:#FFFBF2;
  --green:#1F3624; --green-2:#2B4A32; --black:#14201A;
  --yellow:#F7D84A; --chili:#D6402A;
  --display:'Baloo 2','Be Vietnam Pro',sans-serif;
  --body:'Be Vietnam Pro',system-ui,sans-serif;
  --brush:'Caveat Brush','Baloo 2',cursive;
  --line:3px solid var(--black);
  --pop:6px 6px 0 var(--black);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--green);background:var(--paper);line-height:1.65;font-size:17px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.hbm-wrap{width:min(1180px,100% - 40px);margin-inline:auto;position:relative;z-index:2}
h1,h2,h3,h4{font-family:var(--display);line-height:1.02;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(2.3rem,5vw,4rem)}
section{position:relative}
.hbm-brush{font-family:var(--brush);font-weight:400;letter-spacing:0;font-size:1.12em}
.hbm-eyebrow,.hbm-kicker{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1rem;color:var(--chili)}
.hbm-eyebrow::before,.hbm-kicker::before{content:"";width:30px;height:3px;background:currentColor}
.hbm-kicker{color:var(--yellow)}
.hbm-chili{color:var(--chili)} .hbm-yellow{color:var(--yellow)} .hbm-ink{color:var(--black)}
.hbm-head{max-width:44rem;margin-bottom:3rem}
.hbm-head p:last-child{margin-top:1rem;font-size:1.08rem}
.hbm-center{text-align:center;margin-inline:auto}
.hbm-center .hbm-eyebrow{justify-content:center}

/* sticker-knap (Elementor: Button + klassen hbm-sticker) */
.hbm-sticker{display:inline-block;font-family:var(--display);font-weight:800;font-size:1rem;text-decoration:none;color:var(--black);background:var(--yellow);border:var(--line);border-radius:14px;padding:.45rem 1.15rem;box-shadow:3px 3px 0 var(--black);transition:transform .15s,box-shadow .15s;cursor:pointer;line-height:1.3}
.hbm-sticker:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black)}
.hbm-sticker.hbm-lg{font-size:1.15rem;padding:.65rem 1.6rem;border-radius:16px;box-shadow:5px 5px 0 var(--black)}
.hbm-sticker.hbm-lg:hover{box-shadow:2px 2px 0 var(--black)}
.hbm-sticker.hbm-white{background:var(--white)}

/* header */
.hbm-header{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px;pointer-events:none}
.hbm-header>*{pointer-events:auto}
.hbm-burger{width:56px;height:52px;padding:0;display:grid;place-content:center;gap:6px}
.hbm-burger span{display:block;width:30px;height:4px;background:var(--black);border-radius:3px;transition:transform .2s,opacity .2s}
.hbm-burger[aria-expanded=true] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.hbm-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.hbm-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.hbm-logo{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:128px;height:128px;border-radius:50%;background:rgba(20,32,26,.88);border:3px solid var(--white);display:grid;place-items:center;overflow:hidden}
.hbm-logo img{width:92%;height:auto}
.hbm-header-cta{display:flex;gap:10px}
.hbm-drawer{position:fixed;inset:0;z-index:35;background:var(--green);color:var(--white);display:grid;align-content:center;justify-items:center;gap:2rem;text-align:center;padding:2rem}
.hbm-drawer[hidden]{display:none}
.hbm-drawer ul{list-style:none;padding:0;display:grid;gap:.6rem}
.hbm-drawer a{text-decoration:none;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,9vw,4.6rem);line-height:1.1}
.hbm-drawer a:hover{color:var(--yellow)}
.hbm-drawer p,.hbm-drawer p a{font-size:1rem;font-family:var(--body);font-weight:500}

/* 1. hero */
.hbm-hero{min-height:100svh;display:flex;align-items:flex-end;color:var(--white);overflow:hidden;background:var(--green)}
.hbm-slides{position:absolute;inset:0}
.hbm-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:hbm-fade 24s infinite}
.hbm-slide:nth-child(2){animation-delay:6s}.hbm-slide:nth-child(3){animation-delay:12s}.hbm-slide:nth-child(4){animation-delay:18s}
.hbm-slide:first-child{opacity:1;animation-name:hbm-fade-first}
@keyframes hbm-fade{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
@keyframes hbm-fade-first{0%{opacity:1}25%{opacity:1}29%{opacity:0}96%{opacity:0}100%{opacity:1}}
.hbm-hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,26,18,.88) 0%,rgba(14,26,18,.35) 48%,rgba(14,26,18,.5) 100%)}
.hbm-hero-copy{padding:140px 0 150px}
.hbm-hero h1{font-size:clamp(3rem,8.6vw,7.4rem);line-height:.98;max-width:12ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hbm-hl{display:inline-block;background:var(--yellow);color:var(--black);padding:0 .16em;border-radius:.14em;transform:rotate(-1.6deg);text-shadow:none;margin:.04em 0}
.hbm-hero .hbm-brush{color:var(--yellow);display:inline-block;transform:rotate(-3deg);margin-top:.08em}
.hbm-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:2rem}
.hbm-torn{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:clamp(50px,7vw,90px);z-index:3}
.hbm-torn-back{fill:var(--paper-2)} .hbm-torn-front{fill:var(--paper)}

/* håndtegnede illustrationer */
.hbm-ill{position:absolute;pointer-events:none;user-select:none;max-width:none;height:auto}

/* 2. velkommen */
.hbm-welcome{padding:clamp(3rem,7vw,6rem) 0 0;overflow:hidden}
.hbm-welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hbm-welcome h2{margin-bottom:1.5rem}
.hbm-welcome-copy p{max-width:34rem;margin-bottom:1rem}
.hbm-welcome-copy .hbm-sticker{margin-top:1rem}
.hbm-welcome-art{position:relative;min-height:min(640px,78vw)}
.hbm-ill-pho{width:68%;right:0;top:0}
.hbm-ill-lotus{width:50%;left:2%;bottom:-2rem}
.hbm-skyline{position:relative;display:block;width:min(1500px,100%);height:auto;margin:-6rem auto 0;opacity:.95}

/* 3. klassikere */
.hbm-classics{background:var(--paper-2);padding:clamp(4rem,8vw,7rem) 0 clamp(5rem,9vw,8rem);overflow:hidden}
.hbm-stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 2.2rem;padding:8px}
.hbm-stamp{--d:18px;background-color:transparent;background-image:radial-gradient(circle at 50% 50%,transparent 0 4.5px,var(--white) 5.2px);background-size:var(--d) var(--d);background-position:calc(var(--d)/-2) calc(var(--d)/-2);padding:0;transition:transform .25s}
.hbm-stamp:hover{transform:rotate(0) translateY(-6px)}
.hbm-r1{transform:rotate(-1.8deg)} .hbm-r2{transform:rotate(1.2deg)} .hbm-r3{transform:rotate(-.8deg)}
.hbm-stamp-in{margin:12px;background:var(--white);padding:10px 10px 16px;display:flex;flex-direction:column;gap:.35rem}
.hbm-stamp-in img{width:100%;aspect-ratio:16/10;object-fit:cover;border:2px solid var(--green)}
.hbm-stamp h3{font-size:1.45rem;margin-top:.5rem;display:flex;align-items:center;gap:.5rem;color:var(--green)}
.hbm-stamp h3 span{background:var(--yellow);border:2px solid var(--black);border-radius:999px;font-size:.9rem;min-width:2rem;height:2rem;display:inline-grid;place-items:center;padding:0 .4rem}
.hbm-stamp p{font-size:.92rem;line-height:1.5}
.hbm-stamp b{font-family:var(--display);font-size:1.4rem;color:var(--chili);margin-top:auto;padding-top:.3rem}
.hbm-ill-banhmi{width:min(430px,38vw);right:-3%;top:2.4rem;transform:rotate(5deg);opacity:.95}
.hbm-ill-rolls{width:min(330px,30vw);left:-2%;bottom:.8rem;transform:rotate(-6deg)}

/* bånd */
.hbm-band{background:var(--yellow);border-block:var(--line);transform:rotate(-1.3deg);margin:-26px -3% -26px;overflow:hidden;white-space:nowrap;position:relative;z-index:6;color:var(--black)}
.hbm-band div{display:inline-flex;padding:.7rem 0;animation:hbm-slide 36s linear infinite;font-family:var(--display);font-weight:800;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em}
.hbm-band span{padding-right:2.4rem;display:inline-flex;align-items:center;gap:2.4rem}
.hbm-band span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--black)}
@keyframes hbm-slide{to{transform:translateX(-50%)}}

/* 4. menukort */
.hbm-menu{background:var(--green);color:var(--white);padding:clamp(6rem,10vw,9rem) 0 clamp(5rem,9vw,8rem);overflow:hidden}
.hbm-menu .hbm-head p:last-child{color:rgba(255,251,242,.85)}
.hbm-tabs{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.8rem}
.hbm-tab{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--white);background:transparent;border:2.5px solid var(--white);border-radius:14px;padding:.3rem 1.15rem;cursor:pointer}
.hbm-tab:hover{background:rgba(255,251,242,.14)}
.hbm-tab[aria-selected=true]{background:var(--yellow);color:var(--black);border-color:var(--black);box-shadow:3px 3px 0 var(--black)}
.hbm-tab-note{max-width:46rem;margin-bottom:1.8rem;color:rgba(255,251,242,.85)}
.hbm-items{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 3rem;min-height:300px}
.hbm-item{display:grid;grid-template-columns:84px 1fr auto;gap:1.1rem;align-items:center;padding:.9rem 0;border-bottom:2px dashed rgba(255,251,242,.3)}
.hbm-item img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--white)}
.hbm-item h3{font-size:1.25rem;line-height:1.12}
.hbm-item p{font-size:.9rem;line-height:1.45;margin-top:.2rem;color:rgba(255,251,242,.8)}
.hbm-item .hbm-price{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--yellow);white-space:nowrap}
.hbm-fine{margin-top:2rem;font-size:.9rem;color:rgba(255,251,242,.75)}
.hbm-ill-vendor{width:min(250px,20vw);right:max(1.5rem,calc(50% - 560px));top:clamp(5rem,9vw,8rem);opacity:.92}
.hbm-ill-pho-l{width:min(300px,24vw);right:max(1rem,calc(50% - 700px));bottom:1.5rem;opacity:.85}
.hbm-menu .hbm-wrap{padding-left:0}

/* 5. om os */
.hbm-story{padding:clamp(5rem,9vw,8rem) 0;overflow:hidden}
.hbm-story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center}
.hbm-story-photo{position:relative;padding-bottom:3rem}
.hbm-frame{border:var(--line);box-shadow:10px 10px 0 var(--black);transform:rotate(-2.6deg);background:var(--white);padding:12px 12px 12px}
.hbm-frame img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.hbm-ill-hat{width:48%;right:-6%;bottom:-3%;transform:rotate(4deg)}
.hbm-panel{border:var(--line);border-radius:28px;box-shadow:10px 10px 0 var(--black);padding:clamp(1.8rem,4vw,3rem)}
.hbm-panel-yellow{background:var(--yellow);color:var(--black)}
.hbm-panel-black{background:var(--black);color:var(--white);box-shadow:10px 10px 0 var(--chili)}
.hbm-story .hbm-panel{transform:rotate(1.1deg)}
.hbm-story h2{margin-bottom:1.2rem}
.hbm-story p+p{margin-top:1rem}
.hbm-sign{font-family:var(--brush);font-size:1.9rem;line-height:1.2;color:var(--chili)}

/* 6. kontakt */
.hbm-visit{background:var(--paper-2);padding:clamp(5rem,9vw,8rem) 0;overflow:hidden;border-top:var(--line)}
.hbm-visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;max-width:960px;margin-inline:auto}
.hbm-visit h3{font-size:2.2rem;margin-bottom:.8rem}
.hbm-visit address{font-style:normal;font-weight:700;font-size:1.25rem;margin-bottom:1rem}
.hbm-visit p{margin-bottom:1rem}
.hbm-visit a{font-weight:500}
.hbm-visit .hbm-sticker{font-weight:800}
.hbm-small{font-size:.9rem}
.hbm-tilt-l{transform:rotate(-1.8deg)} .hbm-tilt-r{transform:rotate(1.6deg)}
.hbm-hours{list-style:none;padding:0;margin:0 0 1.6rem}
.hbm-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:2px solid rgba(255,251,242,.3)}
.hbm-hours b{font-family:var(--display);font-size:1.15rem;color:var(--yellow);white-space:nowrap}
.hbm-bowl{position:absolute;border-radius:50%;background:var(--black)}
.hbm-bowl::after{content:"";position:absolute;inset:32%;border-radius:50%;background:var(--paper-2)}
.hbm-bowl-a{width:230px;height:230px;left:-80px;top:9%}
.hbm-bowl-b{width:300px;height:300px;right:-110px;bottom:-60px}

/* 7. catering */
.hbm-catering{color:var(--white);padding:clamp(6rem,11vw,10rem) 0;overflow:hidden;border-top:var(--line);background:var(--green)}
.hbm-catering-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hbm-catering::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,32,26,.92) 0%,rgba(20,32,26,.7) 55%,rgba(20,32,26,.35) 100%);z-index:1}
.hbm-catering-copy{max-width:1180px}
.hbm-catering-copy>*{max-width:36rem}
.hbm-catering h2{margin-bottom:1.2rem}
.hbm-catering p{margin-bottom:1.8rem;font-size:1.1rem}
.hbm-ill-banhmi-l{width:min(560px,44vw);right:3%;bottom:2.5rem;z-index:1;transform:rotate(-5deg);opacity:.92}

/* footer */
.hbm-footer{background:var(--black);color:var(--paper);padding:4.5rem 0 2rem;position:relative;overflow:hidden}
.hbm-footer-sky{position:absolute;left:50%;bottom:0;width:min(1500px,120%);max-width:none;transform:translateX(-50%);opacity:.12}
.hbm-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.hbm-footer-logo{width:96px;height:auto;margin-bottom:1rem}
.hbm-footer h4{font-size:1.2rem;color:var(--yellow);margin-bottom:.7rem}
.hbm-footer a{display:block;text-decoration:none;padding:.15rem 0}
.hbm-footer a:hover{color:var(--yellow)}
.hbm-copy{grid-column:1/-1;border-top:1px solid rgba(245,235,214,.25);padding-top:1.2rem;font-size:.85rem;opacity:.75}

@media (max-width:980px){
  .hbm-welcome-grid,.hbm-story-grid,.hbm-visit-grid,.hbm-footer-grid{grid-template-columns:1fr}
  .hbm-stamps{grid-template-columns:1fr 1fr}
  .hbm-items{grid-template-columns:1fr}
  .hbm-ill-banhmi{display:none}
  .hbm-ill-vendor,.hbm-ill-pho-l{display:none}
  .hbm-welcome-art{min-height:420px}
  .hbm-skyline{margin-top:-3rem}
  .hbm-story-photo{max-width:560px;margin-inline:auto;width:100%}
}
@media (max-width:640px){
  body{font-size:16px}
  .hbm-hide-s{display:none}
  .hbm-logo{width:76px;height:76px;top:8px}
  .hbm-bowl-a{display:none}
  .hbm-bowl-b{width:200px;height:200px;right:-90px;bottom:-50px}
  .hbm-burger{width:50px;height:46px}
  .hbm-stamps{grid-template-columns:1fr}
  .hbm-hero-copy{padding-bottom:120px}
  .hbm-item{grid-template-columns:62px 1fr auto;gap:.8rem}
  .hbm-item img{width:62px;height:62px}
  .hbm-band div{font-size:1.25rem}
  .hbm-ill-rolls{width:150px;left:-8px;bottom:.4rem;opacity:.85}
  .hbm-ill-banhmi-l{opacity:.35;width:300px}
}
@media (prefers-reduced-motion:reduce){.hbm-band div{animation:none}.hbm-slide{animation:none}.hbm-slide:first-child{opacity:1}.hbm-sticker,.hbm-stamp{transition:none}html{scroll-behavior:auto}}