/* ==========================================================================
   Shared accent-color theming for every tournament-facing page (Info, Fees,
   Registration, Entrants, Times, ...).

   Each page's shortcode is responsible for:
     1. Emitting <style>:root{--tournament-accent: #hex;}</style> early,
        when the director has set a custom color on the General settings
        page (falls back to the default teal otherwise), and
     2. Enqueuing this stylesheet.

   Rules here are deliberately NOT scoped under a page wrapper - the header
   and nav bar are shared components rendered identically by every one of
   these pages (via set_tournament_header()/set_tournament_nav_bar(), or
   their OO equivalents), so a page-agnostic rule is what's actually needed.
   Page-specific layout/redesign work (e.g. the Info page's card layout)
   stays in that page's own stylesheet.
   ========================================================================== */

/* -- Site chrome outside any shortcode's own markup ----------------------
   #top-menu and .entry-title belong to the theme/page template. !important
   is used deliberately: load order relative to bracketAce.css isn't
   guaranteed, and these rules only ever change anything when a director
   has actually set a custom color - otherwise the var() falls back to the
   exact same default teal, so nothing changes on pages/sites that don't
   set --tournament-accent.
   ---------------------------------------------------------------------- */

#top-menu li.menu-item a {
  background-color: var(--tournament-accent, var(--color-bracket-ace-400)) !important;
}

#top-menu li.menu-item a:hover {
  background-color: color-mix(in srgb, var(--tournament-accent, var(--color-bracket-ace-400)) 70%, black) !important;
}

.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
  color: var(--tournament-accent, var(--color-bracket-ace-400)) !important;
}

/* -- Tournament header & nav bar ------------------------------------------
   bracketAce.css hard-codes #829d9e onto these exact class names.
   ---------------------------------------------------------------------- */

h2.tournament-name {
  background-color: var(--tournament-accent, var(--color-bracket-ace-400));
  color: var(--tournament-accent-text, #fff);
}

.tournament-dates,
.tournament-location,
.tournament-subtitle {
  color: var(--tournament-accent, var(--color-bracket-ace-400));
}

/* The nav bar is a <nav class="container"> holding a dozen plain
   <a class="tournament-nav"> links with nothing telling them to wrap (see
   setTournamentNavBar.php), so without this every page using it has the
   same "later buttons get clipped/overflow" problem the Info page had.
   !important throughout: several of these properties tie in specificity
   with bracketAce.css's rules for the same classes, so which one wins
   depends on stylesheet load order - which isn't consistent page to page. */
nav.container {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 0.4rem !important;
  align-items: center !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 10px !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.tournament-nav {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background-color: var(--tournament-accent, var(--color-bracket-ace-400)) !important;
  color: var(--tournament-accent-text, #fff) !important;
  box-shadow: inset 0 -1px 0 var(--tournament-accent, var(--color-bracket-ace-400)) !important;
}

.tournament-nav.first,
.tournament-nav.last {
  border-radius: 6px !important;
}

.tournament-nav.current {
  /* bracketAce.css's ".tournament-nav, .tournament-nav.current" combined
     selector is MORE specific here than a plain ".tournament-nav" rule,
     so margin needs its own explicit reset - this is what was leaving the
     "current" tab sitting ~2em lower/misaligned from its siblings. */
  margin: 0 !important;
  background-color: color-mix(in srgb, var(--tournament-accent, var(--color-bracket-ace-400)) 75%, black) !important;
  /* Approximation: contrast is computed in PHP against the raw accent
     color, not this darkened variant, since a color-mix() output can't be
     luminance-analyzed in CSS. Close enough in practice - darkening the
     accent rarely flips which text color reads better against it. */
  color: var(--tournament-accent-text, #fff) !important;
  box-shadow: inset 0 -1px 0 var(--tournament-accent, var(--color-bracket-ace-400)) !important;
}

/* -- Letter/group/event header bars ---------------------------------------
   bracketAce.css hard-codes #829d9e as both background and text color for
   these. Used by Event::drawHeader() and the Entrants page's alpha-sort
   letter headers. (.times.header - the Times page's own letter header -
   now lives directly in times.css instead, since it's the only page using
   it.) Note: the per-GROUP header bar (.group.entrants.header) is NOT
   here - it's styled via an inline style="" attribute in
   Group.php/Entry.php, not a class, so it's fixed at the PHP level instead
   (Group::$defaultColor) rather than here, since CSS can't tell "using the
   default" apart from "group deliberately set its own color".
   ---------------------------------------------------------------------- */

.entrants.header,
.entrants.hide-names.header {
  background-color: var(--tournament-accent, var(--color-bracket-ace-400)) !important;
  color: var(--tournament-accent-text, #fff) !important;
}

/* -- Sort toggle buttons (Sort A-Z / Sort By Event / Sort By Group) ------
   bracketAce.css hard-codes these to a separate dark teal (#586a6b), not
   #829d9e. Shared by the Entrants and Times pages.
   ---------------------------------------------------------------------- */

.entrants.sort {
  background-color: var(--tournament-accent, var(--color-bracket-ace-400)) !important;
  color: var(--tournament-accent-text, #fff) !important;
}

/* -- Player/team/event/time text -------------------------------------------
   bracketAce.css colors these teal via the bare "entrants"/"times" class
   (".entrants, .times, .submit { color: #829d9e; }"). Excludes .total (a
   separate, different dark-teal shade left alone) and .sort/.header
   (handled above with their own background+contrast-text treatment).
   ---------------------------------------------------------------------- */

.entrants:not(.total):not(.sort):not(.header),
.times:not(.header) {
  color: var(--tournament-accent, var(--color-bracket-ace-400));
}