/*
 * Unisa branding for Indico
 * File: 10-unisa.css
 *
 * Keep this deliberately minimal. Avoid overriding Indico layouts and
 * functional components beyond what's listed below.
 *
 * Every override here is backed by inspecting the live rendered page and
 * Indico 3.3.12's own source/compiled CSS - not guessed. Where a rule needs
 * `!important` it's because the competing Indico rule compiles a hardcoded
 * hex value from its own SCSS (no CSS-variable hook to redeclare instead),
 * confirmed via source inspection, not applied as a blanket habit.
 */

:root {
    --unisa-navy: #18364a;
    --unisa-maroon: #7a263a;
    --unisa-orange: #d8752a;

    --unisa-text: #333333;
    --unisa-muted: #666666;
    --unisa-border: #dddddd;
    --unisa-light: #f7f7f7;
    --unisa-white: #ffffff;
}


/* ---------------------------------------------------------
   Indico's own theming variables (undocumented, found in its
   compiled CSS: --accent-color, --menu-background-color, etc.,
   declared on `body`). Feeding them from our palette gives
   broad, forward-compatible coverage of newer UI components we
   have not individually audited - defensive, not a confirmed
   fix for anything specific below.
   --------------------------------------------------------- */

body {
    --accent-color: var(--unisa-maroon);
    --accent-highlight-color: var(--unisa-navy);
    --accent-secondary-color: var(--unisa-orange);
    --clickable-text-color: var(--unisa-navy);
    --clickable-text-highlight-color: var(--unisa-maroon);
    --background-primary: var(--unisa-white);
    --background-secondary: var(--unisa-light);
    --menu-background-color: var(--unisa-maroon);
    --menu-text-color: var(--unisa-white);
}


/* ---------------------------------------------------------
   General typography
   --------------------------------------------------------- */

body {
    color: var(--unisa-text);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

a {
    color: var(--unisa-navy);
}

a:hover,
a:focus {
    color: var(--unisa-maroon);
}


/* ---------------------------------------------------------
   Main Indico header bar (logo + timezone/language/login).
   CONFIRMED FIX: the old rule below targeted `#header`, which
   matches nothing in this Indico version - no element has
   `id="header"`. The actual bar is `.page-header`
   (`.indico-top-bar` on pages using the newer template).
   --------------------------------------------------------- */

.page-header,
.indico-top-bar {
    background: var(--unisa-white);
    border-top: 4px solid var(--unisa-maroon);
    border-bottom: 1px solid var(--unisa-border);
    box-shadow: none;
}


/* ---------------------------------------------------------
   Secondary nav bar ("Home" / "Create event" links) - new.
   Confirmed live markup: `<div id="global-menu"
   class="global-menu toolbar">`. The ID in our selector gives
   it enough specificity to win outright, no `!important` needed.
   `#indico-user-menu-container` is the equivalent user-menu piece
   on pages using the newer template (unverified which pages, if
   any, actually use it - defensive coverage).
   --------------------------------------------------------- */

#global-menu.global-menu.toolbar {
    background: var(--unisa-maroon);
    border-color: var(--unisa-maroon);
}

#global-menu.global-menu.toolbar a,
#indico-user-menu-container a {
    color: var(--unisa-white);
}

#global-menu.global-menu.toolbar a:hover,
#global-menu.global-menu.toolbar a:focus {
    color: var(--unisa-orange);
}


/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

h1,
h2,
h3 {
    color: var(--unisa-navy);
}

h1 {
    font-weight: 600;
}

/* CONFIRMED FIX: the category/event title ("All events") uses
   Indico's own `.category-title` class, which compiles a
   hardcoded `color: #cb6d04` - a class selector beats our plain
   `h1` above regardless of load order. `!important` is the
   deliberate, confirmed-necessary fix, not a habit. */
.category-title {
    color: var(--unisa-navy) !important;
}


/* ---------------------------------------------------------
   Primary Indico buttons
   --------------------------------------------------------- */

/* CONFIRMED FIX: Indico's own rule for this exact button,
   `.i-button.highlight:not(.label):not(.borderless):not(.text-color)`,
   compiles a hardcoded `background: #09c` at far higher
   specificity than a plain `.i-button.highlight` override can
   match - confirmed via source inspection of IButton.tsx and the
   compiled CSS. `!important` is required here, not optional. */
.i-button.highlight {
    background: var(--unisa-maroon) !important;
    border-color: var(--unisa-maroon) !important;
    color: var(--unisa-white) !important;
}

.i-button.highlight:hover,
.i-button.highlight:focus {
    background: var(--unisa-navy) !important;
    border-color: var(--unisa-navy) !important;
}


/* ---------------------------------------------------------
   Form focus
   --------------------------------------------------------- */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--unisa-navy);
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

table thead th {
    color: var(--unisa-navy);
}


/* ---------------------------------------------------------
   Selection colour
   --------------------------------------------------------- */

::selection {
    background: var(--unisa-maroon);
    color: var(--unisa-white);
}