/* ==========================================================================
   Popup menu výberu jazyka (hlavička, .porto-view-switcher)
   Vzhľad zodpovedá podmenu hlavného menu (Mozaika, Galéria): biely panel
   so zlatým horným okrajom, zlatá šípka, písmo Cinzel, jemné oddeľovače
   a zlaté pozadie položky pri hover.
   Cieľ: <ul class="view-switcher porto-view-switcher"> v .header-top (téma Porto).
   ========================================================================== */

/* --- Premenné (rovnaké hodnoty ako v hlavnom menu) -------------------------- */
.header-top .porto-view-switcher {
  --lang-accent: #d9b45c;                         /* zlatá: horný okraj, šípka, hover pozadie */
  --lang-bg: #fff;                                /* pozadie panelu */
  --lang-text: #000;                              /* farba textu položiek */
  --lang-text-hover: #fff;                        /* farba textu pri hover */
  --lang-divider: #f3f3f3;                        /* oddeľovač medzi položkami */
}

/* --- Panel s položkami ---------------------------------------------------- */
#header .header-top .porto-view-switcher .narrow .inner > ul.sub-menu {
  padding: 5px 0;                                 /* ako .main-menu .narrow ul.sub-menu */
  background: var(--lang-bg);
  border-top: 3px solid var(--lang-accent);       /* zlatý horný okraj */
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 9px 30px 10px rgba(0, 0, 0, .1);
}

/* --- Šípka nad panelom (Porto ju kreslí cez ::before a ::after na <li>) ---- */
#header .header-top .porto-view-switcher > li.has-sub::before,
#header .header-top .porto-view-switcher > li.has-sub::after {
  border-bottom-color: var(--lang-accent);
}

/* --- Položky ----------------------------------------------------------------- */
#header .header-top .porto-view-switcher .narrow ul.sub-menu li.menu-item > a {
  padding: 8px 18px;
  font-family: Cinzel, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  color: var(--lang-text);
  border-bottom: 1px solid var(--lang-divider);   /* jemný oddeľovač */
  white-space: nowrap;
}

#header .header-top .porto-view-switcher .narrow ul.sub-menu li.menu-item:last-child > a {
  border-bottom-width: 0;                         /* posledná položka bez oddeľovača */
}

/* --- Hover / focus: zlaté pozadie, biely text ------------------------------- */
#header .header-top .porto-view-switcher .narrow ul.sub-menu li.menu-item:hover > a,
#header .header-top .porto-view-switcher .narrow ul.sub-menu li.menu-item > a:focus,
#header .header-top .porto-view-switcher .narrow ul.sub-menu li.menu-item > a.active {
  color: var(--lang-text-hover);
  background: var(--lang-accent);
}

/* --- Vlajka --------------------------------------------------------------------- */
#header .header-top .porto-view-switcher .narrow ul.sub-menu .flag {
  margin-right: 8px;                              /* väčší odstup pri väčšom písme */
}