/*
 * APRG — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 *
 * Palette sampled from the club logo (cropped-favicon.png):
 * navy #0b1768 (primary / accent-color in aprg.yaml), sky blue #0089cd
 * (secondary, used sparingly below for hover states).
 */

:root {
  --brand-navy: #0b1768;
  --brand-sky: #0089cd;
}

a:hover,
a:focus {
  color: var(--brand-sky);
}

/* theme.css sets .navbar-brand img/svg to 44px — bump it for our logo.
   #header has no fixed height (min-height: 72px), so this doesn't clip. */
.navbar-brand img {
  height: 56px;
}

img.center {
  display: block;
  margin: 0 auto;
}

/* theme.css sets `white-space: nowrap` on all td/th so compact data tables
   (records, results) stay tight. But in a row that also holds a product
   photo, an unwrappable long description hogs the row's width and leaves
   nothing for the image column. Scope the fix to rows with an <img> so
   text-only tables keep their nowrap behavior. */
tr:has(img) td {
  white-space: normal;
}

/* Menu icons (menu_icon: in a page's header), at any nesting depth — not
   just top-level, submenu items carry them too. Color already inherits from
   the link (monochrome, follows hover/active states for free) — just tone
   them down so they read as a quiet hint next to the label, not a competing
   solid-color badge. */
.dropmenu li a > i,
.overlay-menu li a > i {
  font-size: 0.85em;
  opacity: 0.7;
}
/* theme.css's top-level `.dropmenu a` is `inline-flex` with `gap: 0.375rem`,
   which is where the top bar's icon/label spacing actually comes from — but
   `.dropmenu li > ul a` (dropdown panel items, i.e. submenus) later resets
   display to `block` for its vertical-stack layout, silently dropping that
   flex gap. Put it back, same value, so submenu icons space exactly like
   the top bar's instead of relying only on the literal space in the macro. */
.dropmenu li > ul a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
/* Desktop spaces icon from label via flex `gap` already; the mobile overlay
   menu is a plain block link (no flex), so the icon needs its own margin. */
.overlay-menu li a > i {
  margin-right: 0.5rem;
}

/* Divider between groups of items in a dropdown submenu (e.g. "Le Club" ->
   activities vs. records). Added via `menu_separator_before: true` on the
   page that should follow it. */
.dropmenu li.menu-divider {
  height: 1px;
  margin: 0.25rem 0.625rem;
  padding: 0;
  background: var(--q2-border-strong, rgba(0, 0, 0, 0.1));
}

/* Search box injected by site.js above the "dates d'ouverture des
   inscriptions" table. Same input styling as the rest of the site
   (theme.css's input[type="search"] rule) — just constrained and spaced
   so it doesn't stretch full-width above the table. */
.races-filter {
  display: block;
  max-width: 26rem;
  margin: 0 0 1rem;
}