/* ═══════════════════════════════════════════════════════════════════════════
   SHORTLIST LISTING (directory revamp phase 5, T2): the Shortlist mega menu, the
   listing's new rows (labels, the Verified/Claimed line, the hours status row,
   the holiday line, the booking line, "In our directory since ... Last checked
   ...", the week), "Featured in" and the nearby strip.

   Handle 'hm-sl-listing' (inc/shortlist/meta.php), after 'hm-sl-controls', on
   every page while directory.shortlist is on (the mega menu sits in the header)
   and on no page while it is off. Every selector here is new: nothing restyles
   an existing class except inside the new panel's own wrapper. Colours, type and
   radii come from the --sl-* tokens only; a child sets their values. Londonly's
   light restyle of the existing listing lives in its own style.css, scoped to
   .dir-detail.is-shortlist.

   Open-now appears in three places only, and the listing's status row is one of
   them: its dot pulses here and nowhere else, still under reduced motion and on
   the day of a public holiday.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The mega menu (MegaMenu.png) ───────────────────────────────────────────── */
.mega-shell.dir.sl-mega-shell{ width:min(1280px, 97vw); background:var(--sl-cream); }
.sl-mega{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.15fr);
  gap:40px; padding:32px 40px 36px; text-align:left;
  font-family:var(--sl-f-body); color:var(--sl-ink);
}
.sl-mega p{ margin:0; }
.sl-mega-intro{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.sl-mega-title{
  align-self:flex-start; display:inline-block; text-decoration:none;
  font:800 50px/.9 var(--sl-f-body); letter-spacing:-.045em; color:var(--sl-hl-ink);
  background:linear-gradient(180deg, transparent 54%, var(--sl-hl) 54%, var(--sl-hl) 90%, transparent 90%);
  padding:0 .05em;
}
.sl-mega-title:hover{ color:var(--sl-hl-ink); }
.sl-mega-hook{ font-size:16px; line-height:1.5; color:var(--sl-ink-2); }
.sl-mega-search input[type="search"]{ -webkit-appearance:none; appearance:none; }
.sl-mega-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.sl-mega-map{ position:relative; display:block; border:1px solid var(--sl-line); background:var(--sl-panel); text-decoration:none; }
.sl-mega-map img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sl-mega-pin{
  position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--sl-hl); box-shadow:0 0 0 1.5px var(--sl-ink); pointer-events:none;
}
.sl-mega-map-btn{ position:absolute; left:10px; bottom:10px; }
.sl-mega-intro .sl-mega-credit{ margin:-8px 0 0; font:400 11.5px/1.3 var(--sl-f-body); color:var(--sl-ink-2); }
.sl-mega-col{ display:flex; flex-direction:column; min-width:0; }
.sl-mega-k{ font:400 15px/1 var(--sl-f-kick); letter-spacing:.14em; text-transform:uppercase; color:var(--sl-hl-2); }
.sl-mega-kinds,.sl-mega-hoods{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; }
.sl-mega-kinds li,.sl-mega-hoods li{ margin:0; padding:0; }
.sl-mega-kind{
  display:flex; align-items:center; gap:14px; min-height:60px;
  border-bottom:1px solid var(--sl-line); color:var(--sl-ink); text-decoration:none;
}
.sl-mega-kinds li:last-child .sl-mega-kind{ border-bottom:0; }
.sl-mega-ico{
  flex:none; width:38px; height:38px; border-radius:var(--sl-r-ctl);
  background:var(--sl-bark); color:var(--sl-cream); display:grid; place-items:center;
}
.sl-mega-kind.is-venues .sl-mega-ico{ background:var(--sl-hl); color:var(--sl-hl-ink); }
.sl-mega-kind-t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.sl-mega-kind-t strong{ font-size:17px; font-weight:700; }
.sl-mega-kind-t small{ font-size:13px; color:var(--sl-ink-2); }
.sl-mega-kind:hover,.sl-mega-hoods a:hover{ color:var(--sl-ink); }
.sl-mega-kind:hover strong,.sl-mega-hoods a:hover{
  text-decoration:underline; text-decoration-color:var(--sl-hl); text-decoration-thickness:6px;
  text-underline-offset:-2px; text-decoration-skip-ink:none;
}
.sl-mega-hoods a{ display:flex; align-items:center; min-height:36px; font-size:15px; font-weight:600; color:var(--sl-ink); text-decoration:none; }
.sl-mega-all{
  margin-top:10px; align-self:flex-start; display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; font-weight:700; color:var(--sl-ink);
  text-decoration:underline; text-decoration-color:var(--sl-hl-2); text-decoration-thickness:3px; text-underline-offset:6px;
}
.sl-mega-feature{ margin-top:12px; display:flex; flex-direction:column; gap:14px; padding:18px; border-radius:var(--sl-r-card); background:var(--sl-panel); }
.sl-mega-feature-top{ display:flex; gap:14px; align-items:center; }
.sl-mega-feature-img{ flex:none; width:92px; height:92px; object-fit:cover; display:block; }
.sl-mega-feature-name{ font:600 25px/1.05 var(--sl-f-serif); letter-spacing:-.01em; color:var(--sl-ink); }
.sl-mega-feature-meta{ margin-top:4px !important; font-size:13.5px; color:var(--sl-ink-2); }
.sl-mega-feature-badge{ align-self:flex-start; white-space:normal; text-align:left; }
.sl-mega-feature-tag{ font:italic 400 17px/1.4 var(--sl-f-serif); color:var(--sl-ink-2); }
.sl-mega-feature-cta{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:1180px){
  .sl-mega{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 32px; }
}

/* ── Section heads used by the listing's new sections ───────────────────────── */
.sl-l-head{ display:flex; align-items:center; gap:12px; }
.sl-l-kicker{ margin:0; font:400 16px/1 var(--sl-f-kick); letter-spacing:.14em; text-transform:uppercase; color:var(--sl-hl-2); }
.sl-l-rule{ flex:1; height:1px; background:var(--sl-line); }
.sl-l-hook{ margin:12px 0 18px; max-width:64ch; font:400 15px/1.5 var(--sl-f-body); color:var(--sl-ink-2); }

/* ── The label row and the Verified/Claimed line ───────────────────────────── */
/* The Verified label says what the tick said; the boards draw no tick beside the name. */
.dir-detail.is-shortlist .dir-detail__tick{ display:none; }
.sl-label-row{ margin-top:22px; }
.sl-vc-line{ margin:10px 0 0; font:400 13px/1.45 var(--sl-f-body); color:var(--sl-ink-2); }

/* ── The hours status row (dir-hours-status.php; dir-hours.js writes it) ────── */
.sl-hours-box{ display:flex; flex-direction:column; gap:4px; }
.sl-hours-status{ align-items:center; }
.sl-hours-status[hidden]{ display:none !important; }
.sl-hours-dot{
  position:relative; flex:none; width:10px; height:10px; margin:0 4px; border-radius:50%;
  background:transparent; box-shadow:inset 0 0 0 1.5px var(--sl-ink-2);   /* unknown + closed: a grey ring */
}
.sl-hours-words{ min-width:0; }
.sl-hours-status .sl-hours-text{ font-weight:700; color:var(--sl-ink); text-decoration:none; }   /* two classes: beats the parent's .dir-detail__cta-row a */
.sl-hours-status a.sl-hours-text{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
/* Once the browser has written the state, the words are the state, not a link's look. */
.sl-hours-status:not([data-state="unknown"]) a.sl-hours-text{ font-weight:700; text-decoration:none; }
.sl-hours-detail{ color:var(--sl-ink-2); }
.sl-hours-status[data-state="open"] .sl-hours-dot{ background:var(--sl-brand); box-shadow:none; }
.sl-hours-status[data-state="open"] .sl-hours-text{ color:var(--sl-brand); }
.sl-hours-status[data-state="soon"] .sl-hours-dot{ background:var(--sl-hl); box-shadow:0 0 0 1.5px var(--sl-ink); }
.sl-hours-status[data-state="open"] .sl-hours-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--sl-brand);
  animation:sl-hours-pulse 2s ease-out infinite;
}
.sl-hours-status[data-holiday="today"] .sl-hours-dot::after{ animation:none; display:none; }
@keyframes sl-hours-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .sl-hours-status .sl-hours-dot::after{ animation:none; display:none; }
}
.sl-hours-holiday{ margin:0 0 6px 30px; font:400 13px/1.4 var(--sl-f-body); color:var(--sl-ink-2); }
.sl-hours-holiday[hidden]{ display:none; }

/* ── The booking line (dir-booking.php) ─────────────────────────────────────── */
.sl-booking{ align-items:center; }
.sl-ico{ display:inline-block; vertical-align:middle; color:var(--sl-hl-2); }
.sl-booking .ico{ display:inline-flex; color:var(--sl-hl-2); }

/* ── "In our directory since ... Last checked ..." (the Visit card's foot) ─── */
.sl-since{ margin:12px 0 0; font:400 13px/1.45 var(--sl-f-body); color:var(--sl-ink-2); }

/* ── The week (dir-hours-week.php) ─────────────────────────────────────────── */
.sl-hweek{ margin-top:14px; padding-top:14px; border-top:1px solid var(--sl-line); font-family:var(--sl-f-body); }
.sl-hweek-h{ margin:0 0 10px; font:400 15px/1 var(--sl-f-kick); letter-spacing:.14em; text-transform:uppercase; color:var(--sl-hl-2); }
.sl-hweek-table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.45; color:var(--sl-ink); }
.sl-hweek-table th,.sl-hweek-table td{ padding:5px 8px; vertical-align:top; border:0; }
.sl-hweek-table th{ text-align:left; font-weight:500; white-space:nowrap; }
.sl-hweek-table td{ text-align:right; }
.sl-hweek-line{ display:block; }
.sl-hweek-line.is-off{ color:var(--sl-ink-2); }
.sl-hweek-table tr[data-today]{ background:color-mix(in srgb, var(--sl-hl) 28%, var(--sl-cream)); font-weight:700; }
.sl-hweek-table tr[data-today] th{ font-weight:700; }
.sl-hweek-today{ margin-left:6px; padding:1px 7px; font-size:11px; vertical-align:1px; }
.sl-hweek-today[hidden]{ display:none; }
.sl-hweek-checked{ margin:10px 0 0; font-size:12.5px; color:var(--sl-ink-2); }

/* ── Featured in: the guides that pick this place (desktop cards, phone rows) ─ */
.sl-featured{ margin:56px 0 0; }
.sl-featured .sl-l-head{ margin-bottom:18px; }
.sl-featured-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:20px; }
.sl-featured-list{ display:none; flex-direction:column; }
@media (max-width:700px){
  .sl-featured-grid{ display:none; }
  .sl-featured-list{ display:flex; }
}

/* ── Nearby (sl-nearby.php; NearbyStrip.png) ─────────────────────────────────── */
.sl-nearby{ margin:56px 0 0; font-family:var(--sl-f-body); color:var(--sl-ink); }
.sl-nearby-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.sl-nearby-radio{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
/* min-width:0 is load-bearing: the panel is a flex item, and without it its minimum width is the
   8-card row's full width (about 1712px), which pushed every listing with a dense strip wider than
   the window. With it the panel is the tab row's width and the row scrolls inside itself. */
.sl-nearby-panel{ display:none; flex:0 0 100%; min-width:0; margin-top:8px; }
.sl-nearby-radio:nth-of-type(1):checked ~ .sl-nearby-panel:nth-of-type(1),
.sl-nearby-radio:nth-of-type(2):checked ~ .sl-nearby-panel:nth-of-type(2),
.sl-nearby-radio:nth-of-type(3):checked ~ .sl-nearby-panel:nth-of-type(3),
.sl-nearby-radio:nth-of-type(4):checked ~ .sl-nearby-panel:nth-of-type(4),
.sl-nearby-radio:nth-of-type(5):checked ~ .sl-nearby-panel:nth-of-type(5),
.sl-nearby-radio:nth-of-type(6):checked ~ .sl-nearby-panel:nth-of-type(6){ display:block; }
.sl-nearby-radio:nth-of-type(1):checked ~ .sl-pill:nth-of-type(1),
.sl-nearby-radio:nth-of-type(2):checked ~ .sl-pill:nth-of-type(2),
.sl-nearby-radio:nth-of-type(3):checked ~ .sl-pill:nth-of-type(3),
.sl-nearby-radio:nth-of-type(4):checked ~ .sl-pill:nth-of-type(4),
.sl-nearby-radio:nth-of-type(5):checked ~ .sl-pill:nth-of-type(5),
.sl-nearby-radio:nth-of-type(6):checked ~ .sl-pill:nth-of-type(6){ background:var(--sl-hl); border-color:var(--sl-hl); color:var(--sl-hl-ink); }
.sl-nearby-radio:nth-of-type(1):focus-visible ~ .sl-pill:nth-of-type(1),
.sl-nearby-radio:nth-of-type(2):focus-visible ~ .sl-pill:nth-of-type(2),
.sl-nearby-radio:nth-of-type(3):focus-visible ~ .sl-pill:nth-of-type(3),
.sl-nearby-radio:nth-of-type(4):focus-visible ~ .sl-pill:nth-of-type(4),
.sl-nearby-radio:nth-of-type(5):focus-visible ~ .sl-pill:nth-of-type(5),
.sl-nearby-radio:nth-of-type(6):focus-visible ~ .sl-pill:nth-of-type(6){ outline:2px solid var(--sl-ink); outline-offset:3px; }
.sl-nearby-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:200px; gap:16px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:8px 0 6px;
}
.sl-nearby-row > .sl-card{ scroll-snap-align:start; }
/* The three nearest: a row each, picture at the left, the walk above the name. */
.sl-nearby-three{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap:16px; }
.sl-nearby-three > .sl-card.is-small{
  flex-direction:row; gap:18px; padding:16px; border-radius:var(--sl-r-card);
  background:var(--sl-cream); border:1px solid var(--sl-line);
}
.sl-nearby-three > .sl-card.is-small .sl-card-pic{ position:static; flex:none; width:112px; height:112px; aspect-ratio:auto; }
.sl-nearby-three > .sl-card.is-small .sl-card-body{ padding-top:30px; }
.sl-nearby-three > .sl-card.is-small .sl-card-badge{ left:146px; top:16px; bottom:auto; background:var(--sl-cream); box-shadow:inset 0 0 0 1px var(--sl-line); }
.sl-nearby-three > .sl-card.is-small .sl-card-kicker{ order:2; margin-top:4px; font:400 13.5px/1.3 var(--sl-f-body); letter-spacing:0; text-transform:none; }
.sl-nearby-three > .sl-card.is-small .sl-card-title{ order:1; margin:0; font-size:21px; line-height:1.15; }
.sl-nearby-three > .sl-card.is-small .sl-card-tagline{ order:3; margin-top:8px; font:400 15px/1.45 var(--sl-f-serif); color:var(--sl-ink); }
@media (max-width:600px){
  .sl-nearby-three > .sl-card.is-small{ gap:14px; padding:12px; }
  .sl-nearby-three > .sl-card.is-small .sl-card-pic{ width:88px; height:88px; }
  .sl-nearby-three > .sl-card.is-small .sl-card-badge{ left:114px; top:12px; }
  .sl-nearby-row{ grid-auto-columns:172px; }
}