/* ============================================================
   menu.css — screen 2: accordion menu + section content
   (title/date/labels are real Sandoll Rome outlines from Figma)
   ============================================================ */
#menu{background:var(--bg)}
.menu-scroll{
  position:absolute;inset:0;z-index:2;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;   /* hide ugly bar; also stops width jitter on expand/collapse */
}
.menu-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.menu-top{position:relative;text-align:center;padding:48px 24px 0}
/* real Sandoll Rome outlines exported from Figma (transparent SVG) */
.menu-title{display:block;width:73%;max-width:290px;height:auto;margin:0 auto}
.menu-date{display:block;width:60%;max-width:240px;height:auto;margin:18px auto 0}
.row-label{display:block;height:auto}    /* per-item width set inline for uniform scale */
.menu-spark{position:absolute;width:auto;pointer-events:none;z-index:1}
.menu-list{position:relative;margin:36px 20px 0;z-index:2}
.acc-item{border-top:1.5px solid var(--yellow)}
.acc-item:last-child{border-bottom:1.5px solid var(--yellow)}
.menu-row{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:58px;padding:14px 34px;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease;
}
.menu-row:active{background:rgba(255,231,71,.08)}
@media(hover:hover){.menu-row:hover{background:rgba(255,231,71,.07)}}
.acc-caret{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--yellow);opacity:.75;
  transition:transform .35s ease;
}
.acc-item.open .acc-caret{transform:translateY(-50%) rotate(180deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s ease}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-clip{overflow:hidden;min-height:0}
.acc-content{padding:4px 6px 30px;text-align:center}
/* decorative gears sit right under the last row, sized to Figma proportion (48.3% / 37.4% of width);
   in normal flow so they get pushed down when an accordion item expands (no overlap) */
.menu-foot{position:relative;width:100%;margin-top:22px;padding-top:60%;pointer-events:none}
.menu-foot .stage{position:absolute;inset:0}
.menu-foot .stage img{position:absolute}

/* ---------- accordion content (couple / info / location) ---------- */
.acc-content p{font-size:17px;line-height:2.1;color:var(--cream)}
.acc-content .lead{
  font-family:"Gaegu",cursive;color:var(--yellow);font-size:20px;
  letter-spacing:.1em;margin-bottom:20px;
}
.acc-content .dim{color:var(--cream-dim)}
.acc-content b{color:#fff;font-weight:700;font-size:21px;padding-left:.15em}
.acc-content .amp{color:var(--orange);font-size:14px;margin:8px 0;font-family:"Gaegu",cursive}
.acc-content .big{font-size:24px;font-weight:700;color:#fff;line-height:1.55;margin-bottom:6px}
.acc-content .sub{font-size:16px;color:var(--cream-dim);margin-top:4px}
.acc-content .gap{height:26px}

/* ---------- LOCATION content (CSS map + transit info + buttons) ---------- */
.loc{font-family:var(--sans);text-align:left}
.map{
  position:relative;margin:0 auto;
  border:3px solid #f3ede0;border-radius:2px;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.055) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.055) 31px 32px),
    #161616;
  height:308px;overflow:hidden;
}
.map .road-h{position:absolute;left:0;right:0;top:176px;height:34px;background:#2b2b2b}
.map .road-v{position:absolute;top:0;bottom:0;left:236px;width:34px;background:#2b2b2b}
.map .road-orange{position:absolute;top:0;bottom:0;left:114px;width:7px;background:var(--chip-orange);box-shadow:0 0 10px rgba(255,138,0,.5)}
.map .pin{
  position:absolute;left:295px;top:118px;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  background:#e8442e;border:5px solid #571711;box-shadow:0 0 0 2px #e8442e;
}
.map .pin::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.map .tag-hotel{
  position:absolute;left:295px;top:158px;transform:translateX(-50%);
  background:var(--yellow);color:#151515;font-weight:800;font-size:13px;
  padding:5px 9px;border-radius:2px;white-space:nowrap;
  box-shadow:2px 2px 0 rgba(0,0,0,.55);
}
.map .tag-exit{
  position:absolute;left:118px;top:224px;transform:translateX(-50%);
  background:#151515;color:var(--yellow);font-weight:700;font-size:12px;
  padding:5px 8px;border:1.5px solid var(--chip-orange);border-radius:3px;white-space:nowrap;
}
.loc-sec{margin-top:26px;border-left:3px solid var(--green);padding-left:15px}
.loc-chip{
  display:inline-block;font-weight:800;font-size:14px;color:#151515;
  padding:5px 11px;border-radius:2px;margin-bottom:11px;letter-spacing:.12em;
}
.loc-chip.subway{background:var(--chip-orange)}
.loc-chip.bus{background:var(--green)}
.loc-chip.car{background:var(--chip-blue)}
.loc-sec p{font-size:15px;line-height:1.75;color:#f2ecdc;font-family:var(--sans)}
.loc-sec p strong{color:#fff;font-weight:700}
.loc-btns{display:flex;gap:10px;margin-top:30px}
.loc-btn{
  flex:1;display:block;text-align:center;text-decoration:none;cursor:pointer;
  background:#120c07;border:2px solid var(--orange);border-radius:3px;
  color:var(--orange);font-family:var(--sans);font-weight:800;font-size:15px;
  padding:15px 4px;box-shadow:3px 3px 0 rgba(255,106,61,.35);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,transform .1s ease;
}
.loc-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(255,106,61,.35)}
@media(hover:hover){.loc-btn:hover{background:#2a1509}}