/*==============================================================================
  ŠPIL LIGA – BRAND OVERRIDES
  ------------------------------------------------------------------------------
  Loaded AFTER style.css (see functions.php -> spilliga_scripts()).
  This file re-declares only the colour-bearing rules from style.css so the
  original inherited stylesheet stays untouched. Same selectors + later source
  order => these win. !important is mirrored only where the original used it.

  Retune the whole site from the :root block below.

  COLOUR MAP (old -> new)
    #e13f48  red        ->  #f16924  orange           --c-accent
    #cb4332  red hover  ->  #d1541a  orange hover      --c-accent-dark
    #008278  teal       ->  #008b53  green             --c-secondary
    #fff / #ffffff / white     ->  #fbfadf  paper      --c-paper
    #000 / #000000 / black     ->  #1c1403  ink        --c-ink

  Deliberately LEFT ALONE (not pure b/w): greys #111 / #404040 / #555 / #808080,
  near-whites #fcfcfc / #f1f1f1 / #ededed / #fff9c0, the dark-red placeholder
  rgba(55,0,0,.5), and all neutral rgba(0,0,0,x) shadows.

  BACKGROUND
    The random photo background is injected by spilliga_background_generator()
    in functions.php (inline <style> in wp_head, printed AFTER this file).
    We neutralise it here with !important. To also stop the pointless random
    image query, delete/short-circuit that function later.

  NOT COVERED (needs work outside CSS):
    - images/menu-icon.png (mobile hamburger) is a baked red/white PNG; the
      fill behind it is themed here but the glyph needs re-exporting.
    - Phase 2 scroll gradient (black -> #2d184f): scaffold at the bottom,
      needs a few lines of JS.
==============================================================================*/

:root {
  /* Core brand palette — edit these */
  --c-ink: #1c1403; /* new "black"  */
  --c-paper: #fbfadf; /* new "white"  */
  --c-accent: #f16924; /* new "orange" (was red #e13f48) */
  --c-accent-dark: #d1541a; /* orange hover/active (was #cb4332) */
  --c-secondary: #008b53; /* new "green"  (was teal #008278) */

  /* RGB channels for rgba() uses */
  --c-accent-rgb: 241, 105, 36;

  /* Page background */
  --page-bg: var(--c-ink);
  --bg-gradient-top: #1c1403;
  --bg-gradient-bottom: #2d184f; /* phase 2 target */
}

/*--------------------------------------------------------------
  Page background — photo -> solid colour
--------------------------------------------------------------*/
body {
  background: var(--page-bg);
}
body.custom-background {
  background-color: none !important;
  background-image: none !important;
  background: linear-gradient(
    var(--bg-gradient-top),
    var(--bg-gradient-bottom)
  ) !important;
}
.default-page-template {
  background-color: var(--c-paper) !important; /* was white !important */
}

/*--------------------------------------------------------------
  Selection
--------------------------------------------------------------*/
::selection {
  background: var(--c-accent);
  color: var(--c-paper);
}
::-moz-selection {
  background: var(--c-accent);
  color: var(--c-paper);
}

/*--------------------------------------------------------------
  Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  color: var(--c-ink); /* was black */
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--c-paper); /* was #fff */
}

/*--------------------------------------------------------------
  Links
--------------------------------------------------------------*/
a,
a:hover {
  color: var(--c-accent);
}
.nav-links a {
  color: var(--c-accent);
}

/*--------------------------------------------------------------
  Buttons / form controls
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: var(--c-accent);
  color: var(--c-paper);
}
.entry-content button:hover,
.entry-content input[type="button"]:hover,
.entry-content input[type="reset"]:hover,
.entry-content input[type="submit"]:hover {
  background: var(--c-accent-dark); /* was #cb4332 */
}
textarea:focus,
input:focus {
  outline-color: var(--c-accent) !important;
}
hr {
  background-color: var(--c-ink); /* was black */
}

/*--------------------------------------------------------------
  Widgets
--------------------------------------------------------------*/
.widget .widget-title:before {
  background: var(--c-accent);
}
.widget_search input {
  border: 1px solid var(--c-paper);
}

/*--------------------------------------------------------------
  Navigation bar
--------------------------------------------------------------*/
.navbar {
  background: var(--c-secondary); /* was #008278 */
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .main-navigation > ul > li > a {
  color: var(--c-ink); /* was black */
}
.navbar-inverse .navbar-nav ul.sub-menu li:hover > a,
.navbar-inverse .navbar-nav ul.sub-menu li.link-focus > a {
  color: var(--c-accent);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: var(--c-accent);
}
.navbar-brand:focus {
  border: 1px dotted var(--c-ink);
}
.menu-ikone .icon-bar {
  background-color: var(--c-paper);
}

/*--------------------------------------------------------------
  Header main menu (#menu-glavni-meni)
--------------------------------------------------------------*/
#menu-glavni-meni a {
  color: var(--c-paper); /* was white */
}
#menu-glavni-meni a:hover,
#menu-glavni-meni .current-menu-item a {
  color: var(--c-accent);
}
.seach_top a,
.seach_top_mobile a {
  color: var(--c-paper);
}
.head_peak {
  .peak_left,
  .peak_right {
    background: none;
  }
}

.head_logo img {
  max-width: 260px;
  margin-top: -230px;
}

/*--------------------------------------------------------------
  Footer
--------------------------------------------------------------*/
#footer {
  background: var(--c-accent);
  color: var(--c-paper);
}
#footer a:hover {
  color: var(--c-paper);
}
.footer_logo {
  background: var(--c-secondary);
}
#sponzorji {
  background-color: var(--c-secondary);
}

.footer_col_logos {
  max-width: 81px;
}
.footer_col_logos.drugi {
  max-width: 131px;
}

/*--------------------------------------------------------------
  Flag arrows (komisija / footer peaks)
--------------------------------------------------------------*/
#flag_left:after,
#flag_right:after {
  border-color: var(--c-paper); /* was solid white */
}
#flag_left:hover:after,
#flag_right:hover:after {
  border-color: var(--c-ink); /* was solid black */
}

/*--------------------------------------------------------------
  Title ribbon (H1)
--------------------------------------------------------------*/
.ribbon {
  background: var(--c-accent);
}

/*--------------------------------------------------------------
  Novice / Zgodovina accordion
--------------------------------------------------------------*/
#accordion .panel-heading {
  color: var(--c-paper);
}
#accordion .panel-heading:hover,
#accordion .panel-heading:hover h4,
#accordion .panel-heading.aktivni,
#accordion .panel-heading.aktivni h4 {
  color: var(--c-ink); /* was black */
}
.panel-default > .panel-heading {
  background-color: rgba(var(--c-accent-rgb), 0.6); /* was rgba(225,63,72,.6) */
}
.panel-default > .panel-heading.aktivni {
  background-color: var(--c-paper);
}

.acc_icon .fa-minus {
  color: var(--c-secondary);
}
.acc_icon .fa-plus {
  color: var(--c-secondary);
}
.acc_icon .fa-minus {
  color: var(--c-secondary);
}
.social_icon svg path {
  fill: var(--c-paper);
}
.load_more_gumb .icon-plus {
  color: var(--c-paper);
}
.load_more_gumb .icon-plus:hover {
  color: var(--c-ink); /* was black */
}

/*--------------------------------------------------------------
  Komisija sidebar filter
--------------------------------------------------------------*/
.side_filter_bar a {
  color: var(--c-ink); /* was black */
}
.side_filter_bar .aktivni a {
  color: var(--c-paper);
}
.side_filter_bar .panel-title {
  background-color: rgba(var(--c-accent-rgb), 0.4); /* was rgba(236,28,36,.4) */
}
.side_filter_bar .panel-title:hover {
  background-color: var(--c-paper);
  color: var(--c-ink);
}
.side_filter_bar .panel-title:hover h4,
.side_filter_bar .aktivni h4 {
  color: var(--c-ink);
}
.side_filter_bar .aktivni .panel-title {
  background-color: var(--c-paper);
}

/*--------------------------------------------------------------
  Tekmovanje
--------------------------------------------------------------*/
.rdece {
  color: var(--c-accent);
}
.kocke:hover .kocka,
.aktivni .kocka {
  background-color: var(--c-ink); /* was black */
}

/*--------------------------------------------------------------
  Nagrade / post box
--------------------------------------------------------------*/
.post_box {
  background-color: var(--c-paper);
}
.post_box:hover {
  background-color: var(--c-accent);
}
.post_box:hover hr {
  background-color: var(--c-ink);
}
.post_box h3 {
  color: var(--c-ink); /* was black */
}
.post_box .social_links a {
  color: var(--c-ink);
}
.post_box .social_links a:hover {
  color: var(--c-paper);
}

/*--------------------------------------------------------------
  Cookie law bar
--------------------------------------------------------------*/
#cn-accept-cookie {
  color: var(--c-paper);
  border: 1px solid var(--c-paper);
}
#cn-accept-cookie:hover {
  background-color: var(--c-paper);
  color: var(--c-ink);
}

/*--------------------------------------------------------------
  Prijava / Formidable forms
--------------------------------------------------------------*/
#prijave {
  color: var(--c-paper);
}
#prijave h2,
#prijave p,
.prijave-podnaslov p,
#frm_field_87_container h2 {
  color: var(--c-accent);
}

#prijave label {
  color: var(--c-accent);
}

#frm_field_106_container,
#frm_field_107_container,
#frm_field_108_container,
#frm_field_109_container {
  border: 3px solid var(--c-secondary);
}
.frm_style_formidable-style.with_frm_style .frm_blank_field label,
.frm_style_formidable-style.with_frm_style .frm_error,
.frm_style_formidable-style.with_frm_style label.frm_primary_label,
.frm_style_formidable-style.with_frm_style.frm_login_form label,
.frm_style_formidable-style.with_frm_style .frm_radio label,
.frm_style_formidable-style.with_frm_style .frm_checkbox label {
  color: var(--c-paper);
}
.frm_style_formidable-style.with_frm_style .frm_message,
.frm_success_style {
  border: 1px solid var(--c-paper);
}

/* focused fields */
.frm_style_formidable-style.with_frm_style
  .form-field
  input:not([type="file"]):focus,
.frm_style_formidable-style.with_frm_style select:focus,
.frm_style_formidable-style.with_frm_style textarea:focus,
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="text"],
.frm_style_formidable-style.with_frm_style
  .frm_focus_field
  input[type="password"],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="email"],
.frm_style_formidable-style.with_frm_style
  .frm_focus_field
  input[type="number"],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="url"],
.frm_style_formidable-style.with_frm_style .frm_focus_field input[type="tel"],
.frm_style_formidable-style.with_frm_style
  .frm_focus_field
  input[type="search"],
.frm_form_fields_active_style,
.frm_style_formidable-style.with_frm_style
  .chosen-container-active
  .chosen-choices {
  background-color: var(--c-paper);
  border-color: var(--c-accent);
}

/* submit — default (green) */
.frm_style_formidable-style.with_frm_style
  .frm_compact
  .frm_dropzone.dz-clickable
  .dz-message,
.frm_style_formidable-style.with_frm_style input[type="submit"],
.frm_style_formidable-style.with_frm_style .frm_submit input[type="button"],
.frm_form_submit_style,
.frm_style_formidable-style.with_frm_style.frm_login_form input[type="submit"] {
  background: var(--c-secondary);
  border-color: var(--c-paper);
}

/* submit — hover / focus / active (orange) */
.frm_style_formidable-style.with_frm_style input[type="submit"]:hover,
.frm_style_formidable-style.with_frm_style
  .frm_submit
  input[type="button"]:hover,
.frm_style_formidable-style.with_frm_style.frm_login_form
  input[type="submit"]:hover,
.frm_style_formidable-style.with_frm_style input[type="submit"]:focus,
.frm_style_formidable-style.with_frm_style
  .frm_submit
  input[type="button"]:focus,
.frm_style_formidable-style.with_frm_style.frm_login_form
  input[type="submit"]:focus,
.frm_style_formidable-style.with_frm_style input[type="submit"]:active,
.frm_style_formidable-style.with_frm_style
  .frm_submit
  input[type="button"]:active,
.frm_style_formidable-style.with_frm_style.frm_login_form
  input[type="submit"]:active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-paper);
}

/*--------------------------------------------------------------
  Skladbe steps
--------------------------------------------------------------*/
.korak {
  color: var(--c-paper);
}
.skladba_1 {
  background-color: var(--c-accent);
}

/*--------------------------------------------------------------
  Mobile navigation  (@media max-width: 991px)
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .dropdownmenu {
    /* path is relative to this file (css/) -> up one level */
    background: url(../images/menu-icon.png) center center no-repeat
      var(--c-accent);
  }
  .navbar-inverse .navbar-nav > li > a:hover {
    color: var(--c-paper) !important; /* was #ffffff !important */
  }
  .this-open > a {
    color: var(--c-accent) !important;
  }
  #menu-glavni-meni li a {
    color: var(--c-paper); /* was White */
  }
  #menu-glavni-meni .current-menu-item a {
    color: var(--c-accent) !important;
  }
}

/*==============================================================================
  PHASE 2 (optional) — scroll gradient: ink -> dark blue (#2d184f)
  ------------------------------------------------------------------------------
  Uncomment, then add to js/spilliga-scripts.js inside the existing
  jQuery(document).ready scroll handler:

    var d = document.documentElement;
    var p = d.scrollTop / (d.scrollHeight - d.clientHeight || 1);
    d.style.setProperty('--scroll-progress', p.toFixed(3));

  --------------------------------------------------------------
  :root { --scroll-progress: 0; }

  body.custom-background {
    background-color: color-mix(
      in srgb,
      var(--bg-gradient-top)  calc(100% - var(--scroll-progress) * 100%),
      var(--bg-gradient-bottom)
    ) !important;
  }
  --------------------------------------------------------------
  color-mix() needs a 2023+ browser. For a no-JS fallback instead, use a
  fixed full-page gradient layer:

  body.custom-background { background-image: none !important; }
  body.custom-background::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(var(--bg-gradient-top), var(--bg-gradient-bottom));
  }
==============================================================================*/