/* mobile: zoom buttons are redundant with pinch-to-zoom and just clutter
   a small screen; the directions FAB gets its own strategic spot instead
   of wherever Leaflet's default top-right control position happens to be */
@media screen and (max-width: 899px) {
  .leaflet-control-zoom {
    display: none;
  }

  .leaflet-routing-container.leaflet-routing-container-hidden {
    top: auto !important;
    left: auto !important;
    right: 16px !important;
    bottom: calc(var(--peek-height) + 16px) !important;
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  .leaflet-routing-container.leaflet-routing-container-hidden::before {
    font-size: 26px;
  }

  /* open directions panel becomes a full-width bottom sheet, matching the
     café list, instead of a cramped floating box — capped well short of
     the full screen so it stays a focused overlay, not a takeover */
  .leaflet-routing-container:not(.leaflet-routing-container-hidden) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(46vh, 380px) !important;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0 !important;
    z-index: 999997 !important;
  }

  /* the branding footer floats independently of the routing panel and would
     otherwise sit visually overlapping it; hide it while directions are open */
  body.routing-open footer {
    display: none;
  }
}

/* small phones: tighten the peek height and type a touch */
@media screen and (max-width: 380px) {
  :root {
    --peek-height: 190px;
  }

  .search-pill input {
    font-size: var(--text-sm);
  }

  #filters button {
    padding: 7px 11px;
  }
}

/* landscape phones: keep the sheet from eating the whole screen */
@media screen and (max-height: 480px) and (orientation: landscape) {
  :root {
    --peek-height: 130px;
    --sheet-max-height: 78vh;
  }
}

/* the attribution "i" toggle only exists (visually) on desktop — hidden by
   default everywhere so it never appears on mobile regardless of when this
   button was created in the DOM */
.attribution-toggle {
  display: none;
}

/* café-list scroll arrows (desktop-only, mirrors the filter chip arrows) —
   the wrapper is structurally invisible on mobile via display:contents, and
   the buttons themselves stay display:none until the desktop block below */
.cafelist-wrap {
  display: contents;
}

.cafelist-scroll {
  display: none;
}

/* brand mark, top-left — desktop only, same reasoning as the rest: hidden
   by default so it never appears on mobile regardless of DOM position */
.brand-logo {
  display: none;
}

/* desktop / tablet: search + filters move to a centered top bar, the café
   list becomes a centered horizontal strip at the bottom (matching the
   mobile peek-card look, just docked instead of a full sheet), and the
   Leaflet attribution is replaced by a small toggleable "i" button */
@media screen and (min-width: 900px) {
  .top-stack {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 240px));
    align-items: center;
  }

  /* matches the 20px inset used everywhere else (footer, zoom, attribution,
     directions FAB) for a consistent margin all around the screen */
  .brand-logo {
    display: block;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 25;
    width: 56px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(46, 27, 15, 0.25));
  }

  .search-pill,
  .filters-container {
    width: 100%;
  }

  .search-pill input {
    font-size: var(--text-lg);
  }

  /* café panel: centered horizontal strip, not a tall left-docked sidebar.
     Raised to 48px (rather than hugging the very bottom edge) to leave room
     for the "Developed by" credit underneath it. */
  .sheet {
    left: 50%;
    right: auto;
    bottom: 48px;
    top: auto;
    transform: translate(-50%, 0);
    width: min(1000px, calc(100vw - 240px));
    height: auto;
    max-height: 380px;
    border-radius: var(--radius-sheet);
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 1;
    pointer-events: auto;
  }

  /* toggled by the hamburger/menu button (see sheet.js) — desktop-only
     meaning, mobile never reads this class */
  .sheet.sheet-hidden-desktop {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 24px);
  }

  .grabber-btn {
    display: none;
  }

  .sheet-head {
    padding-top: 16px;
  }

  .cafe-search {
    flex: none;
  }

  /* wrapper adds the left/right scroll buttons around the card row, mirroring
     the filter chips above; display:contents by default (see the unscoped
     rule above) means it's structurally invisible on mobile. Kept as a plain
     flex row here — the buttons themselves opt out via position:absolute
     below, so they can center on and straddle the *whole panel*, not just
     this row. */
  .cafelist-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 0;
  }

  /* half in, half out of the panel's edge, centered on the panel's full
     height (not just the card row) — resolves against .sheet, the nearest
     positioned ancestor, since this wrapper itself stays position:static */
  .cafelist-scroll {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    z-index: 5;
  }

  .cafelist-scroll.left {
    left: -22px;
  }

  .cafelist-scroll.right {
    right: -22px;
  }

  .cafelist-scroll .material-symbols-outlined {
    font-size: 22px;
  }

  /* horizontal-scrolling row instead of a vertical list, same card design
     as the mobile "peek" row. align-items:flex-start (rather than the flex
     default of stretch) lets each card size to its own content instead of
     being force-stretched to a uniform row height, which was clipping the
     bottom row of filter tags outside the card's rounded edges. */
  #cafeList {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 0 30px 20px; /* clears the half-overlaid scroll buttons at each edge */
  }

  .cafe-card {
    flex-direction: column;
    flex: none;
    width: 168px;
    margin-bottom: 0;
    overflow: hidden; /* safety clip if a card's tags ever still run long */
  }

  .cafe-photo {
    width: 100%;
    height: 88px;
  }

  /* filters row already has left/right arrow buttons, so its own scrollbar
     (visible in Chromium via the standard scrollbar-width property, even
     though the webkit-prefixed one above is set to none) is redundant */
  #filters {
    scrollbar-width: none;
  }

  /* footer.css lays .web-title and .credits out as a flex row inside
     <footer>; giving each its own fixed position here breaks them out of
     that shared box entirely, so they can sit in different parts of the
     screen without overlapping. It also neutralizes the mobile-oriented
     ".sheet.expanded ~ footer" rule, which was computing a bottom offset
     from --sheet-max-height (a mobile viewport-height value) any time the
     hamburger button's unconditional .expanded toggle fired on desktop —
     that's what made the footer text jump to an unrelated position. */
  footer {
    display: contents;
  }

  footer .web-title {
    position: fixed;
    left: 20px;
    bottom: 14px;
    z-index: 25;
    pointer-events: none;
  }

  footer .credits {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 25;
    pointer-events: none;
    text-align: center;
  }

  footer .credits p {
    font-size: var(--text-xs);
    color: var(--ink-soft);
  }

  /* zoom stays bottom-right (see map.js — the control is created there with
     position: 'bottomright'), pushed up to clear the attribution toggle
     below it, and right-aligned to match the toggle/FAB/footer's 20px inset
     exactly. Targeting the corner container (.leaflet-bottom.leaflet-right)
     doesn't work — Leaflet's actual spacing comes from margin on the control
     element itself, not the corner wrapper, so the margin has to go here
     (with !important since Leaflet's own stylesheet also sets a margin on
     this exact element); the directions button gets the now-empty top-right
     corner, clear of the centered search bar */
  .leaflet-control-zoom {
    margin: 0 20px 58px 0 !important;
  }

  .leaflet-routing-container.leaflet-routing-container-hidden {
    top: 20px;
    right: 20px;
    bottom: auto;
  }

  .leaflet-routing-container:not(.leaflet-routing-container-hidden) {
    top: 20px;
    right: 20px;
    bottom: auto;
    max-height: min(70vh, 600px);
  }

  /* detached entirely from Leaflet's own corner-stacking layout (which put
     it above the zoom control, not beside our toggle) and rebuilt as a chat
     -bubble popup: fixed at the exact same height as the toggle button,
     immediately to its left, popping/sliding out from the icon */
  .leaflet-control-attribution {
    position: fixed !important;
    left: auto !important;
    top: auto !important;
    right: 58px;
    bottom: 20px;
    margin: 0 !important;
    max-width: 260px;
    background: var(--surface) !important;
    color: var(--ink-soft) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    line-height: 1.4;
    box-shadow: var(--shadow);
    white-space: nowrap;
    transform-origin: right center;
    transition: opacity 200ms ease, transform 200ms ease;
    opacity: 0;
    transform: translateX(10px) scale(0.9);
    pointer-events: none;
  }

  .leaflet-control-attribution a {
    color: var(--ink);
    font-weight: 600;
  }

  body.show-attribution .leaflet-control-attribution {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
  }

  .attribution-toggle {
    display: flex;
    position: fixed;
    right: 20px;
    bottom: 20px; /* below the zoom control, which is pushed up above it */
    z-index: 30;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--ink-soft);
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
  }

  .attribution-toggle:hover {
    transform: scale(1.08);
  }

  .attribution-toggle:active {
    transform: scale(0.92);
  }

  .attribution-toggle .material-symbols-outlined {
    font-size: 18px;
  }

  body.show-attribution .attribution-toggle {
    background: var(--marigold);
    color: var(--ink);
  }
}