/* ==========================================================================
   Custom CSS  -  OS "Karadjordje" Topola
   Putanja: templates/shaper_educon/css/custom.css

   Helix3 ovaj fajl ucitava automatski, i to POSLE template.css,
   pa se pravila ispod primenjuju bez !important.
   ========================================================================== */


/* ==========================================================================
   1. MOBILNI HEADER: logo i hamburger meni u istom redu
   ==========================================================================
   Problem: #sp-logo i #sp-menu nose Bootstrap 4 klase (col-8 / col-4),
   a template ucitava Bootstrap 3, koji zna samo za col-xs-8 / col-xs-4.
   Te klase zato ne postoje u CSS-u, oba diva ostaju block sirine 100%
   i padaju jedan ispod drugog. Posledica je i to sto red bude 180px visok
   u header-u koji je fiksiran na 90px, pa hamburger ispada preko slajdera.

   Resenje: na <= 991px (tacno tu je hamburger vidljiv - .visible-sm
   .visible-xs u Bootstrap 3) red postaje flex: logo levo uzima preostali
   prostor, meni desno samo koliko mu treba.
   ========================================================================== */

@media (max-width: 991px) {

  /* Red u header-u postaje flex, bez prelamanja, vertikalno centriran */
  #sp-header > .container > .row,
  #sp-header > .container-fluid > .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 90px;
  }

  /* Logo uzima slobodan prostor, meni samo koliko mu treba */
  #sp-header #sp-logo {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  #sp-header #sp-menu {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  /* Hamburger i lupa jedno pored drugog, poravnati desno */
  #sp-header #sp-menu > .sp-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  /* float iz template.css bi u flex kontejneru dao visinu 0 - gasimo ga */
  #sp-header #sp-menu > .sp-column > .sp-module,
  #sp-header #sp-menu > .sp-column > .sp-megamenu-wrapper,
  #sp-header #sp-menu .educon-top-search,
  #sp-header #sp-menu #offcanvas-toggler {
    float: none !important;
  }

  /* zadrzavamo redosled kao do sada: hamburger pa lupa */
  #sp-header #sp-menu > .sp-column > .sp-megamenu-wrapper {
    -ms-flex-order: 1;
    order: 1;
  }

  #sp-header #sp-menu > .sp-column > .sp-module {
    -ms-flex-order: 2;
    order: 2;
    margin-left: 20px;
  }

  #sp-header #sp-menu #offcanvas-toggler {
    margin-left: 0;
    margin-right: 0;
  }

  /* Logo da se ne prelije kad je naziv skole dugacak */
  #sp-header #sp-logo .logo {
    max-width: 100%;
  }

  #sp-header #sp-logo .logo img {
    max-height: 70px;
    width: auto;
  }
}


/* ==========================================================================
   2. MOBILNA GORNJA TRAKA (#sp-top-bar)
   ==========================================================================
   Isti problem: #sp-top1 i #sp-top2 nose col-8 / col-4 (Bootstrap 4),
   pa padaju jedan ispod drugog i traka zauzima dva reda.

   Sta radimo na <= 991px:
     a) "Prijava" i "Napravi nalog" se ne prikazuju
     b) telefon i mejl se centriraju preko cele sirine

   Napomena: template.css na <= 767px eksplicitno postavlja
   "#sp-top-bar .sp-contact-info { text-align: left; }". Pravilo ispod ima
   istu specificnost, ali custom.css se ucitava posle template.css pa
   pobedjuje - zato !important nije potreban.
   ========================================================================== */

@media (max-width: 991px) {

  /* a) Prijava / Napravi nalog - sklonjeno sa telefona i tableta */
  #sp-top-bar #sp-top2 {
    display: none;
  }

  /* b) Telefon i mejl centrirani */
  #sp-top-bar > .container > .row,
  #sp-top-bar > .container-fluid > .row {
    display: block;
  }

  #sp-top-bar #sp-top1 {
    width: 100%;
    max-width: none;
    float: none;
  }

  #sp-top-bar .sp-contact-info {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #sp-top-bar .sp-contact-info > li {
    float: none;
    display: inline-block;
    margin: 0 8px;
  }

  /* template.css na <= 767px ovome stavlja margin-left: 0, sto pomera
     centriranje ulevo - vracamo simetricnu marginu */
  #sp-top-bar .sp-contact-info .sp-contact-phone {
    margin-left: 8px;
  }
}