/* ==============================================================================
   BiggerRadioUI — Mobile-First Responsive CSS Core (public/css/style.css)
   ============================================================================== */

:root {
  --color-bg: #0f172a;
  --color-card: #1e293b;
  --color-border: #334155;
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
  --color-accent: #0284c7;
  --color-accent-hover: #0369a1;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Touch Target Minimum (44px x 44px) */
button, input, select, a.btn {
  min-height: 44px;
  min-width: 44px;
}

/* ==============================================================================
   Strict Responsive Navigation Breakpoints
   ============================================================================== */

/* Desktop Default (>768px): Show top nav, HIDE hamburger button & mobile drawer */
.hidden-mobile {
  display: flex !important;
  align-items: center;
  gap: 1.25rem;
}

.visible-mobile {
  display: none !important;
}

@media screen and (min-width: 769px) {
  .mobile-menu-drawer {
    display: none !important;
  }
}

/* Mobile Screens (<=768px): Hide ALL top nav links, SHOW hamburger button */
@media screen and (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
  .visible-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}