/* ============================================================
   BLUMIO.SK – GLOBÁLNE ÚPRAVY HLAVIČKY, MENU, ODKAZOV A PRVKOV

   PREHĽAD SEKCIÍ
   01 BLUMIO premenné
   02 Farby menu desktop/tablet
   03 Výška fixnej hlavičky desktop/tablet
   04 Posun obsahu pod fixnú hlavičku desktop/tablet
   05 Fixná hlavička iba desktop/tablet
   06 Mobilná hlavička bez custom úprav
   07 Zaoblenie tlačidiel
   08 E-mail desktop
   09 Logo desktop/tablet
   10 Odkazy
   11 Hover odkazy
   12 Hover obrázky
   13 Skrytie podpisu Shoptet v pätičke
   ============================================================ */


/* ===== ZAČIATOK 01: BLUMIO premenné =====
   Popis: Centrálne farby značky BLUMIO použité v celom kóde.
*/
:root {
  --bl-blue: #21409A;
  --bl-light-blue: #59B7E8;
  --bl-red: #BE1E2D;
  --bl-header-h: 170px;
}
/* ===== KONIEC 01 ===== */


/* ===== ZAČIATOK 02: Farby menu desktop/tablet =====
   Popis: Modré pozadie menu BLUMIO, biely text menu a biele ikony.
*/
@media screen and (min-width: 768px) {
  #header::after {
    background: linear-gradient(90deg, var(--bl-blue) 0%, var(--bl-light-blue) 100%);
  }

  .navigation-in {
    background-color: transparent;
  }

  .navigation-in > ul > li > a,
  .submenu-arrow::after,
  .menu-helper::after {
    color: #ffffff;
  }

  .navigation-in > ul > li > a:hover,
  .navigation-in > ul > li > a:focus {
    color: #ffffff;
    opacity: 0.88;
  }
}
/* ===== KONIEC 02 ===== */


/* ===== ZAČIATOK 03: Výška fixnej hlavičky desktop/tablet =====
   Popis: Premenná výšky hlavičky sa používa iba od 768 px vyššie.
*/
@media screen and (min-width: 768px) {
  :root {
    --bl-header-h: 170px;
  }
}
/* ===== KONIEC 03 ===== */


/* ===== ZAČIATOK 04: Posun obsahu pod fixnú hlavičku desktop/tablet =====
   Popis: Posun obsahu sa používa iba tam, kde je hlavička fixná.
*/
@media screen and (min-width: 768px) {
  body {
    padding-top: var(--bl-header-h);
  }
}
/* ===== KONIEC 04 ===== */


/* ===== ZAČIATOK 05: Fixná hlavička iba desktop/tablet =====
   Popis: Hlavička zostáva hore pri scrollovaní iba od 768 px vyššie.
*/
@media screen and (min-width: 768px) {
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(33, 64, 154, 0.10);
  }
}
/* ===== KONIEC 05 ===== */


/* ===== ZAČIATOK 06: Mobilná hlavička bez custom úprav =====
   Popis: Do mobilnej hlavičky nezasahujeme. Mobil zostáva podľa šablóny Shoptet.
*/
@media screen and (max-width: 767px) {
  body {
    padding-top: 0 !important;
  }
}
/* ===== KONIEC 06 ===== */


/* ===== ZAČIATOK 07: Zaoblenie tlačidiel =====
   Popis: Zaoblenie tlačidiel, polí, stránkovania a login tlačidla.
*/
.btn:not(.cart-count),
.compact-form .form-control,
.pagination > a,
.pagination > strong,
a.login-btn {
  border-radius: 15px;
}
/* ===== KONIEC 07 ===== */


/* ===== ZAČIATOK 08: E-mail desktop =====
   Popis: Zobrazí e-mail v hornej lište od 1200 px.
*/
@media screen and (min-width: 1200px) {
  .top-navigation-bar .project-email {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    margin-left: 24px;
    color: var(--bl-blue);
  }

  a.project-email::before {
    content: '\e910';
    font-size: 14px;
    color: var(--bl-blue);
  }

  .top-navigation-bar .project-email:hover,
  .top-navigation-bar .project-email:focus {
    color: var(--bl-red);
  }

  .top-navigation-bar .project-email:hover::before,
  .top-navigation-bar .project-email:focus::before {
    color: var(--bl-red);
  }
}
/* ===== KONIEC 08 ===== */


/* ===== ZAČIATOK 09: Logo desktop/tablet =====
   Popis: Maximálna výška loga iba na desktope/tablete. Mobilné logo zostáva podľa šablóny.
*/
@media screen and (min-width: 768px) {
  #header .site-name a img {
    max-height: 110px;
  }
}
/* ===== KONIEC 09 ===== */


/* ===== ZAČIATOK 10: Odkazy =====
   Popis: Základná farba odkazov podľa identity BLUMIO.
*/
a,
a:link,
a:visited {
  color: var(--bl-blue);
}
/* ===== KONIEC 10 ===== */


/* ===== ZAČIATOK 11: Hover odkazy =====
   Popis: Farba odkazu pri prejdení myšou alebo focus stave.
*/
a:hover,
a:focus {
  color: var(--bl-red);
}
/* ===== KONIEC 11 ===== */


/* ===== ZAČIATOK 12: Hover obrázky =====
   Popis: Klikateľné obrázky sa jemne zväčšia.
*/
a img {
  transition: transform 150ms ease;
  transform: scale(1);
}

a:hover img {
  transform: scale(1.04);
}
/* ===== KONIEC 12 ===== */


/* ===== ZAČIATOK 13: Skrytie podpisu Shoptet v pätičke =====
   Popis: Skryje text alebo logo „Vytvoril Shoptet“ v spodnej časti stránky.
*/
#signature,
.signature,
.created-by,
.powered-by,
.footer-bottom a[href*="shoptet"],
.footer-bottom .shoptet,
.footer-bottom .shoptetLogo,
.footer-bottom .shoptet-logo,
.footer-bottom .createdBy,
.footer-bottom .created-by {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* ===== KONIEC 13 ===== */