/* Ronnie B Karaoke theme.
 *
 * Colors are lifted from the current site's style.css so the new app reads as a
 * continuation of it: black stage background, near-white text, magenta accent.
 * Bootstrap is re-pointed at these variables rather than overridden per-component.
 */

:root {
  --rb-bg: #000000;
  --rb-text: #f2f2f2;
  --rb-muted: #a8a8a8;
  --rb-accent: #e100a5;
  --rb-accent-hover: #ff2bc0;
  --rb-accent-contrast: #000000;
  --rb-panel: #1a1a1a;
  --rb-panel-2: #4d4d4d;
  --rb-border: #333333;
  --rb-danger: #e5484d;
  --rb-success: #46a758;
  --rb-warning: #ffb224;

  /* Bootstrap overrides */
  --bs-body-bg: var(--rb-bg);
  --bs-body-color: var(--rb-text);
  --bs-body-font-family: Arial, Helvetica, sans-serif;
  --bs-primary: var(--rb-accent);
  --bs-primary-rgb: 225, 0, 165;
  --bs-link-color: var(--rb-accent);
  --bs-link-hover-color: var(--rb-accent-hover);
  --bs-border-color: var(--rb-border);
  --bs-emphasis-color: var(--rb-text);
  --bs-secondary-color: var(--rb-muted);
}

body {
  background-color: var(--rb-bg);
  color: var(--rb-text);
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}

/* ---------- Brand header ---------- */

/* The logo is 1315x687, near enough 2:1. Constrain it by height rather than
 * width on a phone: at max-width it rendered ~187px tall on a 390px screen and
 * pushed the search results below the fold. Desktop keeps the full treatment. */
.rb-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88px;
}

@media (min-width: 576px) {
  .rb-logo {
    max-height: 132px;
  }
}

@media (min-width: 768px) {
  .rb-logo {
    max-width: 420px;
    max-height: none;
  }
}

.rb-nav {
  background-color: var(--rb-panel-2);
  /* Safety valve: below ~360px the five items stop fitting even at the minimum
   * size, and scrolling beats a second row that shifts the page down.
   *
   * The budget is the reason the fifth label reads "Rules" rather than "House
   * Rules" — the scrollbar is hidden, so anything past the edge is not just
   * cramped, it's invisible. Adding a sixth item means revisiting this. */
  overflow-x: auto;
  scrollbar-width: none;
}

.rb-nav::-webkit-scrollbar {
  display: none;
}

.rb-nav .nav {
  flex-wrap: nowrap;
}

.rb-nav .nav-item {
  flex: 1 1 auto;
}

.rb-nav .nav-link {
  color: var(--rb-text);
  /* Scales with the viewport so every label holds one row on a phone and
   * relaxes to the original 17px/16px on a tablet upwards. The floors came down
   * a notch back when there were five items; they are what keeps the last item
   * ("Contact & Schedule", the longest) on screen at 390px. */
  padding: 12px clamp(4px, 1.3vw, 16px);
  font-size: clamp(11px, 3.1vw, 17px);
  border-radius: 0;
  text-align: center;
  white-space: nowrap;
}

.rb-nav .nav-link:hover,
.rb-nav .nav-link:focus-visible {
  background-color: var(--rb-accent);
  color: #fff;
}

.rb-nav .nav-link.active {
  background-color: var(--rb-accent);
  color: #fff;
}

/* ---------- Messages ---------- */

/* Bootstrap's stock alerts are pale washes built for a white page and all but
 * vanish on black. These are re-cut for the dark theme: a saturated border and
 * bold text so a singer can't miss being told their request didn't go through. */
.rb-messages .alert {
  border: 2px solid transparent;
  border-radius: 0;
  padding: 0.85rem 1rem;
  font-weight: 700;
}

.rb-messages .alert-danger {
  background-color: #2b0d0f;
  border-color: var(--rb-danger);
  color: #ffd7d9;
}

.rb-messages .alert-warning {
  background-color: #2b2005;
  border-color: var(--rb-warning);
  color: #ffe6b8;
}

.rb-messages .alert-success {
  background-color: #0d2411;
  border-color: var(--rb-success);
  color: #cdebd2;
}

.rb-messages .alert-info {
  background-color: var(--rb-panel);
  border-color: var(--rb-border);
  color: var(--rb-text);
}

/* ---------- Panels ---------- */

.rb-panel {
  background-color: var(--rb-panel);
  border: 1px solid var(--rb-border);
  padding: 1rem;
}

/* The one rule that matters most, on a page where everything else is a panel
 * too. An accent edge rather than a filled background: this is read on a phone
 * in a dark room, and inverting a whole block there is genuinely hard to read. */
.rb-panel--highlight {
  border-color: var(--rb-accent);
  box-shadow: inset 4px 0 0 var(--rb-accent);
}

/* House rules. Roomier than a default list — these are read at a glance by
 * someone who is not sitting down. */
.rb-rules {
  padding-left: 1.2rem;
  margin-bottom: 0;
}

.rb-rules li + li {
  margin-top: 0.5rem;
}

.rb-rules li::marker {
  color: var(--rb-accent);
}

.rb-card {
  background-color: var(--rb-panel-2);
  border: 1px solid var(--rb-border);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.rb-card__label {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--rb-text);
  opacity: 0.75;
}

/* A song result: details on the left, the action pinned right. Sitting the
 * button beside the text rather than under it fits noticeably more songs on a
 * phone screen. */
.rb-song {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* If the title column can't hold its floor, the button drops to its own line
   * rather than squeezing the text into a one-word-per-line column. */
  flex-wrap: wrap;
}

.rb-song__meta {
  /* The 8rem floor is what stops a long artist/title from being crushed against
   * the button; anywhere lets an unbroken title wrap instead of widening the card. */
  flex: 1 1 8rem;
  min-width: 8rem;
  overflow-wrap: anywhere;
}

/* No margin-left:auto here — the auto margin counts toward the item's outer size
 * when flex lines are collected, which pushed the button onto its own row at
 * every width. The meta column's flex-grow already pins this to the right. */
.rb-song__action {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Picking a replacement song is a POST, so those cards are <button> rather than
 * <a>. Strip the button chrome and restore the card's own alignment — otherwise
 * the browser centres the text and paints its own border and background. */
.rb-song--button {
  width: 100%;
  text-align: left;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.rb-song__action-rest {
  display: none;
}

@media (min-width: 576px) {
  .rb-song__action-rest {
    display: inline;
  }
}

/* ---------- Controls ---------- */

.btn-rb {
  background-color: var(--rb-accent);
  color: var(--rb-accent-contrast);
  border: none;
  font-size: 16px;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}

.btn-rb:hover,
.btn-rb:focus-visible {
  background-color: var(--rb-accent-hover);
  color: var(--rb-accent-contrast);
}

.btn-rb:disabled,
.btn-rb.disabled {
  background-color: var(--rb-panel-2);
  color: var(--rb-muted);
  cursor: not-allowed;
}

.btn-rb-outline {
  background-color: transparent;
  color: var(--rb-text);
  border: 1px solid var(--rb-border);
}

.btn-rb-outline:hover,
.btn-rb-outline:focus-visible {
  border-color: var(--rb-accent);
  color: var(--rb-accent);
}

.form-control,
.form-select {
  background-color: #111;
  border: 1px solid var(--rb-border);
  color: var(--rb-text);
  padding: 0.6rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
  background-color: #111;
  color: var(--rb-text);
  border-color: var(--rb-accent);
  box-shadow: 0 0 0 0.2rem rgba(225, 0, 165, 0.25);
}

.form-control::placeholder {
  color: var(--rb-muted);
}

/* Browse A-Z grid — the old site stacked these full-width; a grid suits both
   a phone and a laptop without a media query. */
.rb-letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.5rem;
}

.rb-letter-grid a {
  display: block;
  text-align: center;
  background-color: var(--rb-accent);
  color: var(--rb-accent-contrast);
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.rb-letter-grid a:hover,
.rb-letter-grid a:focus-visible {
  background-color: var(--rb-accent-hover);
}

.rb-letter-grid a.active {
  outline: 2px solid var(--rb-text);
}

/* ---------- Utility ---------- */

.rb-muted {
  color: var(--rb-muted);
}

.rb-accent {
  color: var(--rb-accent);
}

/* Visible focus ring everywhere — venues are dark and phones get tapped fast. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rb-accent-hover);
  outline-offset: 2px;
}

.rb-skip-link {
  position: absolute;
  left: -9999px;
}

.rb-skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 1080;
  background: var(--rb-accent);
  color: #000;
  padding: 0.5rem 1rem;
}