/* PlayCompete — "Clean Sport" palette for the public site.
   ---------------------------------------------------------------------------
   Loaded after tabler.css and pc-overrides.css, and scoped to body.pc-public,
   which the layout adds to every page EXCEPT /admin/*. An organizer working in
   the admin keeps the interface they know; the pages the public sees get this.

   Every colour is a variable, so changing the palette is changing this block
   and nothing else. Rules below refer to the variables only — a hex typed
   twice is a hex that will disagree with itself later. */

body.pc-public {
    --pc-bg:       #F8FAFA;   /* page background — soft white          */
    --pc-nav:      #FFFFFF;   /* navigation                            */
    --pc-hero:     #EDF5F5;   /* hero / feature panels                 */
    --pc-teal:     #087F83;   /* primary                               */
    --pc-navy:     #123B4A;   /* headings                              */
    --pc-orange:   #E99A4A;   /* accent                                */
    --pc-text:     #4C6068;   /* body text — slate                     */
    --pc-border:   #D9E3E5;   /* borders — cool gray                   */
    --pc-negative: #D95C5C;   /* errors                                */
    --pc-positive: #138A7E;   /* success                               */

    /* Darker teal for hover states. Not in the palette because it is not a
       colour anyone picks — it is the primary, pressed. */
    --pc-teal-dark: #066a6d;

    background-color: var(--pc-bg);
    color: var(--pc-text);
}

/* Tabler paints .page with its own background, which would sit on top of the
   body colour and hide it. */
body.pc-public .page {
    background-color: transparent;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

body.pc-public .pc-navbar {
    background-color: var(--pc-nav);
    border-bottom: 1px solid var(--pc-border);
}

body.pc-public .pc-navbar .nav-link {
    color: var(--pc-navy);
}

body.pc-public .pc-navbar .nav-link:hover,
body.pc-public .pc-navbar .nav-link:focus {
    color: var(--pc-teal);
}

/* ── Type ────────────────────────────────────────────────────────────────── */

body.pc-public h1,
body.pc-public h2,
body.pc-public h3,
body.pc-public h4,
body.pc-public .card-title {
    color: var(--pc-navy);
}

/* …except where the heading sits on a photograph or a deep teal panel. Navy on
   those is nearly unreadable, and each of these blocks already set white for
   itself before this stylesheet outranked them. */
body.pc-public .hero-sports h1,
body.pc-public .hero-sports h2,
body.pc-public .hero-sports h3,
body.pc-public .rd-banner h1,
body.pc-public .rd-banner h2,
body.pc-public .rd-banner h3,
body.pc-public .rd-banner .rd-serif,
/* The two sub-site landing heroes — teams.playcompete.net and
   races.playcompete.net — are photographs too. Each already set its own h1 to
   white, but `body.pc-public h1` carries one more element in its selector and
   so outranked them: "PlayCompete" came out navy on a dark photo and could
   barely be read. Only the half wrapped in an inline colour survived. */
body.pc-public .teams-banner h1,
body.pc-public .teams-banner h2,
body.pc-public .teams-banner h3,
body.pc-public .races-banner h1,
body.pc-public .races-banner h2,
body.pc-public .races-banner h3,
body.pc-public .text-white,
body.pc-public .text-white h1,
body.pc-public .text-white h2,
body.pc-public .text-white h3 {
    color: #fff;
}

/* …but a white card sitting ON the photograph is not the photograph. The hero's
   "One system. Multiple competition types." panel is a .card inside
   .hero-sports, so the rule above painted its heading white on white and the
   line simply vanished. Two classes deep, so this wins wherever it appears in
   the file. */
body.pc-public .hero-sports .card h1,
body.pc-public .hero-sports .card h2,
body.pc-public .hero-sports .card h3,
body.pc-public .hero-sports .card h4,
body.pc-public .hero-sports .card .card-title,
body.pc-public .rd-banner .card h1,
body.pc-public .rd-banner .card h2,
body.pc-public .rd-banner .card h3,
body.pc-public .rd-banner .card .card-title,
body.pc-public .teams-banner .card h1,
body.pc-public .teams-banner .card h2,
body.pc-public .teams-banner .card h3,
body.pc-public .teams-banner .card .card-title,
body.pc-public .races-banner .card h1,
body.pc-public .races-banner .card h2,
body.pc-public .races-banner .card h3,
body.pc-public .races-banner .card .card-title {
    color: var(--pc-navy);
}

/* Anything with "btn" in its class is excluded: .btn, .mk-btn-teal, .rd-btn-white
   and the rest each carry their own text colour, and a plain `a` rule here is
   specific enough to beat all of them — which turned white button text slate
   and teal, on top of the very backgrounds those colours were chosen against. */
body.pc-public a:not([class*="btn"]) {
    color: var(--pc-teal);
}

body.pc-public a:not([class*="btn"]):hover {
    color: var(--pc-teal-dark);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* !important because Tabler's own .btn-primary rules are equally specific and
   load first; without it the two simply race. */
body.pc-public .btn-primary {
    background-color: var(--pc-teal) !important;
    border-color: var(--pc-teal) !important;
    color: #fff !important;
}

body.pc-public .btn-primary:hover,
body.pc-public .btn-primary:focus,
body.pc-public .btn-primary:active {
    background-color: var(--pc-teal-dark) !important;
    border-color: var(--pc-teal-dark) !important;
    color: #fff !important;
}

body.pc-public .btn-outline-primary {
    color: var(--pc-teal) !important;
    border-color: var(--pc-teal) !important;
    background-color: transparent !important;
}

body.pc-public .btn-outline-primary:hover {
    background-color: var(--pc-teal) !important;
    border-color: var(--pc-teal) !important;
    color: #fff !important;
}

/* The secondary action beside a teal button: readable, and clearly not the
   thing to press first. */
body.pc-public .btn-outline-secondary {
    color: var(--pc-navy) !important;
    border-color: var(--pc-border) !important;
}

body.pc-public .btn-outline-secondary:hover {
    background-color: var(--pc-hero) !important;
    border-color: var(--pc-border) !important;
    color: var(--pc-navy) !important;
}

/* Tabler's success green sits beside the teal on every race card — Register in
   green, View Race in teal — and reads as two unrelated palettes. The palette's
   Positive is a teal-green for exactly this: still obviously "go", still part
   of the family. */
body.pc-public .btn-success {
    background-color: var(--pc-positive) !important;
    border-color: var(--pc-positive) !important;
    color: #fff !important;
}

body.pc-public .btn-success:hover,
body.pc-public .btn-success:focus {
    background-color: var(--pc-teal-dark) !important;
    border-color: var(--pc-teal-dark) !important;
}

body.pc-public .btn-danger {
    background-color: var(--pc-negative) !important;
    border-color: var(--pc-negative) !important;
    color: #fff !important;
}

/* The marketing pages (/race-directors, /league-organizers, /tournament-organizers
   and the pricing pages) carry their own button classes from an older palette.
   Repainting them here rather than in that stylesheet keeps the change on the
   public site: the same partial is not used by the admin, but its colours are
   quoted all over it, and a find-and-replace there would reach much further
   than this. */
body.pc-public .mk-btn-teal,
body.pc-public .mk-btn-cream {
    background: var(--pc-teal);
    color: #fff;
}

body.pc-public .mk-btn-teal:hover,
body.pc-public .mk-btn-cream:hover {
    background: var(--pc-teal-dark);
    color: #fff;
}

/* The darkest of them. White text is the whole point of a navy button. */
body.pc-public .mk-btn-ink {
    background: var(--pc-navy);
    color: #fff;
}

body.pc-public .mk-btn-outline {
    border-color: var(--pc-navy);
    color: var(--pc-navy);
}

body.pc-public .mk-btn-outline:hover {
    background: var(--pc-navy);
    color: #fff;
}

body.pc-public .mk-btn-light {
    color: var(--pc-navy);
}

/* The deep-teal banner and the VS badge between the two comparison cards. */
body.pc-public .rd-banner,
body.pc-public .rd-vs-badge {
    background: var(--pc-teal);
}

body.pc-public .rd-btn-white {
    color: var(--pc-teal);
}

/* ── Surfaces ────────────────────────────────────────────────────────────── */

body.pc-public .card {
    background-color: #fff;
    border-color: var(--pc-border);
}

body.pc-public .card-header {
    border-bottom-color: var(--pc-border);
}

body.pc-public hr,
body.pc-public .table > :not(caption) > * > * {
    border-color: var(--pc-border);
}

/* A panel that wants to stand away from the page without becoming a card. */
body.pc-public .pc-hero {
    background-color: var(--pc-hero);
}

/* ── State ───────────────────────────────────────────────────────────────── */

/* Only the text colours. Tabler's alert and badge backgrounds are tinted from
   its own palette, and repainting those here would need a rule per variant —
   worth doing deliberately, not in passing. */
body.pc-public .text-danger  { color: var(--pc-negative) !important; }
body.pc-public .text-success { color: var(--pc-positive) !important; }

/* Form focus. The default is Tabler's blue, which is the one thing on a teal
   page that looks like it belongs to another site. */
body.pc-public .form-control:focus,
body.pc-public .form-select:focus {
    border-color: var(--pc-teal);
    box-shadow: 0 0 0 .25rem rgba(8, 127, 131, .15);
}