/* Song search modal.
 *
 * Not a Figma frame — there isn't one for this — so it borrows the site's existing
 * language rather than inventing a new one: the section blue (#204c8a) for the header,
 * the maroon (#6f1145) used by every primary button, --font-display for headings and
 * --font-sans for anything you actually have to read.
 *
 * Deliberately NOT positioned with the --px/--mpx Figma coordinate model the landing
 * sections use. That model pins elements to a fixed 2001-wide canvas; a modal has to
 * fit whatever screen it opens on, so this is ordinary responsive CSS in px/rem.
 */

.songs-modal[hidden] { display: none; }

.songs-modal {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* --songs-vh is the VISUAL viewport height, set by the script. On a phone the
     on-screen keyboard shrinks the visual viewport but not the layout viewport, and
     no CSS unit sees the difference — 100dvh still counts the space behind the
     keyboard. Sizing the overlay to the measured height is what keeps the panel's
     header on screen once the keyboard is up. dvh is the fallback for anything
     without visualViewport. */
  height: var(--songs-vh, 100dvh);
  z-index: 1000;              /* above the sticky nav */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.songs-modal__backdrop {
  /* fixed, not absolute: the overlay above is only as tall as the visible area, and the
     dimming should still cover the whole screen, including behind the keyboard. */
  position: fixed;
  inset: 0;
  background: rgba(6, 17, 35, .72);
}

.songs-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;        /* do not stretch to the full height of the overlay */
  width: min(640px, 100%);
  max-height: min(720px, calc(100% - 48px));   /* 100% = the measured visible height */
  background: #fff;
  color: #17233a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
}

/* ---- header ---- */
.songs-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #204c8a;
  color: #fff;
}
.songs-modal__title {
  margin: 0;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
}
.songs-modal__close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.songs-modal__close:hover { background: rgba(255, 255, 255, .14); }

/* ---- search ---- */
.songs-modal__search { padding: 16px 18px 10px; }
.songs-modal__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: #56617a;
}
.songs-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #204c8a;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 16px;            /* 16px stops iOS zooming the page on focus */
  color: #17233a;
  background: #fff;
}
.songs-modal__input:focus {
  outline: none;
  border-color: #6f1145;
}

.songs-modal__status {
  margin: 0;
  padding: 0 18px 10px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: #56617a;
}

/* ---- results ---- */
.songs-modal__results {
  /* grow 0, not 1. With flex-grow the empty list stretched to fill the panel's whole
     max-height, so the modal opened at full height with a white void under the search
     box whether or not there were any results. At 0 the panel is only as tall as what
     is in it, and grows as matches arrive until it hits the max-height and scrolls. */
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #e3e7ef;
}
.songs-modal__results li {
  padding: 10px 18px;
  border-bottom: 1px solid #eef1f6;
}
.songs-modal__results li:nth-child(odd) { background: #fafbfd; }

.songs-modal__song {
  display: block;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #17233a;
}
.songs-modal__artist {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 13px;
  color: #5d6880;
}
/* the part of the text that matched what was typed */
.songs-modal__hit { background: #ffe8a3; }

.songs-modal__foot {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid #e3e7ef;
  background: #f6f8fb;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 12px;
  color: #5d6880;
}

/* ---- phones ----
   A boxed modal rather than a full-screen takeover: the page stays visible behind it,
   so it reads as something that opened on top of the booking form rather than a
   different page you have navigated to. dvh, not vh, so the iOS toolbar cannot crop
   the bottom of the list. */
@media (max-width: 600px) {
  .songs-modal { padding: 16px; align-items: center; }
  .songs-modal__panel {
    width: 100%;
    max-height: calc(100% - 32px);   /* of the visible area, keyboard excluded */
  }
  .songs-modal__title { font-size: 22px; }
  .songs-modal__head { padding: 14px 16px; }
  .songs-modal__search { padding: 14px 16px 8px; }
  .songs-modal__status,
  .songs-modal__foot { padding-left: 16px; padding-right: 16px; }
  .songs-modal__results li { padding: 12px 16px; }   /* bigger tap targets */
}

/* Someone who has asked for less motion gets no transition; nothing here animates
   by default, so this is only a guard for anything added later. */
@media (prefers-reduced-motion: reduce) {
  .songs-modal, .songs-modal * { transition: none !important; animation: none !important; }
}