/*
  Overrides stylesheet

  This file contains custom styles that override the default theme and layout
  defined in index.html and Tailwind. It is used to remove the blue accents,
  apply a dark/neutral palette, hide the brand title on small screens, and make
  the filters more usable on mobile devices. The styles are scoped at the
  global level where appropriate and include responsive media queries for
  mobile breakpoints.
*/

/* Reset the primary and accent colours to dark/neutral tones */
:root {
  /* Main site accent is now pure black */
  --primary-color: #000000;
  /* Secondary accent for subtle highlights */
  --accent-color: #4b5563;
}

/* Override Tailwind’s blue link colour to a neutral grey. Using !important ensures
   that this takes precedence over any existing class definitions. */
.text-blue-600 {
  color: var(--accent-color) !important;
}

/* Ensure anchor tags inherit the new accent colour when relying on the
   text-blue-600 utility class by default. */
a.text-blue-600:visited {
  color: var(--accent-color) !important;
}

/* Adjust the logo size in the header to a consistent 28px square */
#header img {
  width: 1.75rem;
  height: 1.75rem;
}

/* Hide the brand title and tagline on small screens (≤768px) so only the logo
   remains visible. This provides a cleaner mobile experience. */
@media (max-width: 768px) {
  #brand-title,
  #brand-tagline {
    display: none !important;
  }
}

/* Improve filter UX on mobile: allow horizontal scrolling, remove default
   scrollbars, and ensure the selects/chips do not wrap prematurely. */
@media (max-width: 768px) {
  #filters-bar {
    overflow-x: auto;
    white-space: nowrap;
  }
  #filters-bar select {
    display: inline-block;
    margin-right: 0.5rem;
    min-width: 8rem;
  }
  /* Hide the default arrow for select elements to make them appear more like
     chips; note that this appearance may vary by browser. */
  #filters-bar select::-ms-expand {
    display: none;
  }
}