/* ==========================================================================
   Brand palette — e107.sk
   Load after tabler.min.css.

   Two layers:
     1. --brand-*  site tokens. Change these per site, nothing else.
     2. --tblr-*   mapping onto Tabler. Copy verbatim between sites.

   Section 3 adds classes rather than redefining Tabler's own. Where a rule
   does target a Tabler class it is scoped behind a brand class or one of the
   theme's own ids, so nothing changes for markup that has not opted in.

   Contrast ratios noted where a value was chosen for accessibility rather
   than for looks. All body-text pairs meet WCAG AA (4.5:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Site tokens
   -------------------------------------------------------------------------- */

:root {
  /* Blue. --brand-blue is the historic identity colour but only reaches
     3.2:1 against white, so it is decoration: hero panels, large display
     headings, illustration fills. --brand-blue-ui carries white text. */
  --brand-blue:          #0099da;
  --brand-blue-ui:       #007cb2;  /* 4.6:1 on white */
  --brand-blue-ui-hover: #00679a;  /* 6.2:1 on white */
  --brand-blue-dark:     #005a80;  /* 7.6:1 on white */
  --brand-blue-light:    #38b6e8;  /* dark mode */

  /* Purple. Safe for white text and as a link colour on white. */
  --brand-purple:        #6e2f99;  /* 8.3:1 on white */
  --brand-purple-hover:  #57247a;
  --brand-purple-light:  #b085d8;  /* dark mode */

  /* Call to action gradient. See note below on the orange stop. */
  --brand-cta-from:      #cc0000;  /* 5.9:1 on white */
  --brand-cta-to:        #c25400;  /* 4.6:1 on white */
  --brand-cta-from-hover: #a80000;
  --brand-cta-to-hover:   #a34600;

  /* Neutrals from the logo. */
  --brand-silver:        #b9bcc0;

  /* The two header rows are themed separately. header_default.html keeps the
     brand row light and colours only the navigation below it; the 3columns
     bar holds the navigation, so it uses the navbar set. */
  --brand-header-bg:      #ffffff;
  --brand-header-fg:      #1a2234;
  --brand-header-fg-mute: #626b7a;

  --brand-navbar-bg:      #2a284f;  /* 13.9:1 under white */
  --brand-navbar-fg:      #ffffff;
  --brand-navbar-fg-mute: rgba(255, 255, 255, .75);

  /* Side panel rows. */
  --brand-panel-item-bg:     #f0f0f0;
  --brand-panel-item-fg:     #1a2234;  /* 13.9:1 on the panel */
  --brand-panel-item-border: var(--brand-silver);
  /* Links inside a panel. --brand-blue-ui reaches only 4.07:1 against
     #f0f0f0, just under AA, so panels use the darker step. */
  --brand-panel-item-link:   var(--brand-blue-ui-hover);  /* 5.4:1 on the panel */
}

/* --------------------------------------------------------------------------
   2. Tabler mapping
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme=light] {
  --tblr-primary:            var(--brand-blue-ui);
  --tblr-primary-rgb:        0, 124, 178;
  --tblr-primary-fg:         #ffffff;
  --tblr-primary-lt:         rgba(0, 124, 178, .12);

  /* --tblr-secondary is NOT a brand accent in Tabler. Its default is the grey
     #6b7280, and it feeds muted text, .btn-secondary and - through
     --tblr-navbar-color (tabler.css:4121) - every navbar link. Left unmapped
     in light mode on purpose; the header and navbar set their own colours in
     section 3.

     Links are not mapped either: Tabler already derives --tblr-link-color
     from --tblr-primary. */

  --tblr-focus-ring-color:   rgba(0, 124, 178, .25);
}

[data-bs-theme=dark] {
  --brand-header-bg:         #16202e;
  --brand-header-fg:         #e9edf2;
  --brand-header-fg-mute:    rgba(233, 237, 242, .6);

  --brand-navbar-bg:         #1f1d3b;
  --brand-navbar-fg:         #e9edf2;
  --brand-navbar-fg-mute:    rgba(233, 237, 242, .75);

  --brand-panel-item-bg:     #1c2230;
  --brand-panel-item-fg:     #e9edf2;
  --brand-panel-item-border: #2c3444;
  --brand-panel-item-link:   #5cc4ef;

  --tblr-primary:            var(--brand-blue-light);
  --tblr-primary-rgb:        56, 182, 232;
  --tblr-primary-fg:         #0b1622;   /* primary is light here, so dark text */
  --tblr-primary-lt:         rgba(56, 182, 232, .16);

  /* Kept from the original file. Note this also tints muted text and
     .btn-secondary purple in dark mode - it is not only an accent. */
  --tblr-secondary:          var(--brand-purple-light);
  --tblr-secondary-rgb:      176, 133, 216;
  --tblr-secondary-fg:       #171020;
  --tblr-secondary-lt:       rgba(176, 133, 216, .16);

  --tblr-link-color:         #5cc4ef;   /* 7.9:1 on the dark surface */
  --tblr-link-color-rgb:     92, 196, 239;
  --tblr-link-hover-color:   #8ed7f5;
  --tblr-link-hover-color-rgb: 142, 215, 245;

  --tblr-focus-ring-color:   rgba(56, 182, 232, .3);
}

/* --------------------------------------------------------------------------
   3. Components that need more than a variable
   -------------------------------------------------------------------------- */

/* Header bar and navigation bar.
   header_default.html carries .main-header on the row with the brand and the
   account controls, and .main-navbar on the navigation row below it.
   header_3columns.html holds the navigation in its single bar, so that one
   carries .main-navbar only - putting both hooks on one element would leave
   two competing backgrounds and let their order in this file decide.

   Each selector repeats for a nested .navbar because Tabler declares all of
   these variables INSIDE the .navbar block (tabler.css:4118-4124). A .navbar
   nested in one of these - which is what header_default.html's navigation row
   contains - resets every one of them back to Tabler's defaults. */
.main-header,
.main-header .navbar {
  --tblr-navbar-bg:                  var(--brand-header-bg);
  --tblr-navbar-color:               var(--brand-header-fg-mute);
  --tblr-navbar-hover-color:         var(--brand-header-fg);
  --tblr-navbar-active-color:        var(--brand-header-fg);
  --tblr-navbar-brand-color:         var(--brand-header-fg);
  --tblr-navbar-active-border-color: var(--brand-blue-ui);

  background: var(--brand-header-bg);
  color: var(--brand-header-fg);
}

.main-navbar,
.main-navbar .navbar {
  --tblr-navbar-bg:                  var(--brand-navbar-bg);
  --tblr-navbar-color:               var(--brand-navbar-fg-mute);
  --tblr-navbar-hover-color:         var(--brand-navbar-fg);
  --tblr-navbar-active-color:        var(--brand-navbar-fg);
  --tblr-navbar-brand-color:         var(--brand-navbar-fg);
  --tblr-navbar-active-border-color: var(--brand-blue);

  background: var(--brand-navbar-bg);
  color: var(--brand-navbar-fg);
}

/* The transparent bar over the home hero. header_default.html no longer
   carries .navbar-transparent, because that class sets
   "background: transparent !important" and would lock the decision into the
   markup. The body class comes from {LAYOUT_ID} in theme.html, which expands
   to "layout-" + name2id(THEME_LAYOUT). */
.layout-home .main-header {
  background: transparent;
  --tblr-navbar-border-color: transparent;
}

/* Navigation dropdowns.
   Scoped to #mainNav, which is the collapse wrapper both headers put around
   {NAVIGATION} and nothing else - the user and private-message dropdowns sit
   outside it and keep Tabler's own styling.

   The variables go on the components themselves, not on #mainNav: Tabler
   declares every dropdown variable inside the .dropdown-menu block
   (tabler.css:3597-3620) and --tblr-nav-link-hover-bg inside .navbar-nav
   (tabler.css:14823), so a value set on an ancestor is reset the moment the
   component matches.

   Worth knowing beyond this file: --tblr-dropdown-link-color defaults to
   "inherit", so a dropdown inside any dark container inherits the container's
   light text and turns white on white. */
#mainNav .dropdown-menu {
  --tblr-dropdown-bg:                var(--brand-navbar-bg);
  --tblr-dropdown-color:             var(--brand-navbar-fg-mute);
  --tblr-dropdown-border-color:      var(--brand-blue-ui);
  --tblr-dropdown-link-color:        var(--brand-navbar-fg-mute);
  --tblr-dropdown-link-hover-color:  var(--brand-navbar-fg);
  --tblr-dropdown-link-hover-bg:     rgba(255, 255, 255, .08);
  --tblr-dropdown-link-active-color: var(--brand-navbar-fg);
  --tblr-dropdown-link-active-bg:    rgba(255, 255, 255, .12);
}

#mainNav .navbar-nav {
  --tblr-nav-link-hover-bg: rgba(255, 255, 255, .08);
}

/* Side panel accordions: the navigation colour when closed, the identity blue
   when open, white label and chevron throughout.

   Scoped to the three panel ids the layouts already carry, so no markup change
   is needed; .accordion-brand is there for any accordion added later.

   Tabler declares --tblr-accordion-btn-bg but never reads it - both
   .accordion-button and .accordion-header hardcode a transparent background -
   so the surface has to be set directly.

   --brand-blue is not usable here: at 3.2:1 it fails under a 0.9rem white
   label. --brand-blue-ui clears 4.6:1. */
#accLeft .accordion-button,
#accUser .accordion-button,
#accLatest .accordion-button,
.accordion-brand .accordion-button {
  /* .accordion-header is an <h2>, which Tabler sizes at 1.25rem, and
     .accordion-button inherits it. Panel titles are not page headings.
     Padding is left alone: accordionItem() sets py-2 and overriding the
     shorthand here would silently discard it. */
  font-size: .9rem;
  color: var(--brand-navbar-fg);
  background-color: var(--brand-navbar-bg);
}

#accLeft .accordion-button:not(.collapsed),
#accUser .accordion-button:not(.collapsed),
#accLatest .accordion-button:not(.collapsed),
.accordion-brand .accordion-button:not(.collapsed) {
  color: #ffffff;
  background-color: var(--brand-blue-ui);
}

/* The chevron is an icon element in Tabler, not a ::after background image as
   in Bootstrap, so it takes its colour by inheritance. */
#accLeft .accordion-button-toggle,
#accUser .accordion-button-toggle,
#accLatest .accordion-button-toggle,
.accordion-brand .accordion-button-toggle {
  color: inherit;
}

#accLeft .accordion-item,
#accUser .accordion-item,
#accLatest .accordion-item,
.accordion-brand .accordion-item {
  background-color: var(--brand-panel-item-bg);
  border: 1px solid var(--brand-panel-item-border);
}

/* Panel contents. The colour goes on .accordion-body, not on the list group:
   not every panel holds a .list-group, and the ones that do would leave the
   surrounding padding uncoloured. Anything inside then stays transparent so
   the body colour shows through. */
#accLeft .accordion-body,
#accUser .accordion-body,
#accLatest .accordion-body,
.accordion-brand .accordion-body {
  background-color: var(--brand-panel-item-bg);
  color: var(--brand-panel-item-fg);
}

/* Rows keep their separators but not their own surface. Both the group and
   the item are listed: tabler.css:20684 declares
   .list-group-item { background-color: inherit }, which comes after the rule
   reading --tblr-list-group-bg (line 4939) and has the same specificity, so
   which of the two wins is not something to rely on. */
#accLeft .list-group,
#accUser .list-group,
#accLatest .list-group,
.accordion-brand .list-group,
#accLeft .list-group-item,
#accUser .list-group-item,
#accLatest .list-group-item,
.accordion-brand .list-group-item {
  --tblr-list-group-bg: transparent;
  /* Tabler's 1rem/1.25rem is sized for standalone cards; in a narrow side
     panel it makes the rows too tall. */
  --tblr-list-group-item-padding-x: .7rem;
  --tblr-list-group-item-padding-y: .7rem;
  background-color: transparent;
  border-color: var(--brand-panel-item-border);
  color: inherit;
}

#accLeft .list-group-item a,
#accUser .list-group-item a,
#accLatest .list-group-item a,
.accordion-brand .list-group-item a {
  color: var(--brand-panel-item-link);
}

/* Login button.
   sc_lm_loginbutton() (login_menu_shortcodes.php:184) hardcodes
   "btn btn-default btn-secondary" and accepts no class parm, so the button
   comes out grey and the template cannot say otherwise.

   The variables go on the button itself, not on .login-menu: .btn-secondary
   declares all of them inside its own block (tabler.css:16636-16649), so a
   value set on an ancestor is thrown away. */
.login-menu .btn.login {
  --tblr-btn-color:        #ffffff;
  --tblr-btn-bg:           var(--brand-blue-ui);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color:  #ffffff;
  --tblr-btn-hover-bg:     var(--brand-blue-ui-hover);
  --tblr-btn-active-color: #ffffff;
  --tblr-btn-active-bg:    var(--brand-blue-dark);
}

/* Call to action button. White label, so both gradient stops must clear 4.5:1.
   The original #ff7100 reaches only 2.8:1 and is not usable behind white text.
   For the vivid original, use .btn-cta-vivid and keep the label >= 24px. */
.btn-cta {
  --tblr-btn-color: #fff;
  --tblr-btn-hover-color: #fff;
  --tblr-btn-active-color: #fff;
  --tblr-btn-border-color: transparent;
  background-image: linear-gradient(to right, var(--brand-cta-from), var(--brand-cta-to));
  border: 0;
  color: #fff;
}
.btn-cta:hover,
.btn-cta:focus-visible {
  background-image: linear-gradient(to right, var(--brand-cta-from-hover), var(--brand-cta-to-hover));
  color: #fff;
}

.btn-cta-vivid {
  background-image: linear-gradient(to right, #cc0000, #ff7100);
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Decorative blue. Not for body text on white. */
.bg-brand-blue {
  background-color: var(--brand-blue);
  color: #fff;
}
.text-brand-blue-display {
  color: var(--brand-blue);
  font-size: 2.5rem;
  font-weight: 700;
}

.navbar-brand-site {
  background: var(--brand-header-bg);
  color: var(--brand-header-fg);
}

.layout-home .navbar-brand-image {
  height: 3.75rem;
}