/* Roboto Slab */
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-slab-v36-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v36-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-slab-v36-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v36-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Samo č š ć ž Č Š Ć Ž. Osnovne datoteke teh znakov nimajo. */
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-slab-v36-latin-ext-300.woff2') format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0160-0161, U+017D-017E;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v36-latin-ext-regular.woff2') format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0160-0161, U+017D-017E;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-slab-v36-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0160-0161, U+017D-017E;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v36-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0160-0161, U+017D-017E;
}

/* Rochester */
@font-face {
  font-display: swap;
  font-family: 'Rochester';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rochester-v24-latin-regular.woff2') format('woff2');
}

/* Ista datoteka tudi kot 700, da kitajski h1 ne odebeljuje latinice.
   Kitajska pisava 700 nima, zato jo brskalnik odebeljuje sam. */
@font-face {
  font-display: swap;
  font-family: 'Rochester';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/rochester-v24-latin-regular.woff2') format('woff2');
}

/* Asul */
@font-face {
  font-display: swap;
  font-family: 'Asul';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/asul-v22-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Asul';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/asul-v22-latin-700.woff2') format('woff2');
}

/* Libre Baskerville — italic za podnapise pod slikami */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/libre-baskerville-v14-latin-italic.woff2') format('woff2');
}

/* Cormorant Garamond — italic samo za podnaslov na indexu */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}


/* ==========================================================================
   KITAJSKI SYSTEM FONTS (html lang="zh") — brez embedanja
   Latin fonti ostanejo; za znake CJK brskalnik vzame lokalne fonte.
   ========================================================================== */

html[lang="zh"] body,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] th {
  font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", "微软雅黑",
    "Noto Sans CJK SC", "Source Han Sans SC", "Heiti SC", "SimHei", sans-serif;
}

/* H1 — kitajski znaki: STXingkai (kaligrafija). Latinica: Rochester.
   Rochester mora biti prvi. Datoteka ima samo latinico, zato brskalnik
   za kitajske znake preskoči nanjo in vzame naslednjo pisavo.
   Če je kitajska pisava prva, njena lastna latinica prekrije Rochester.
   Index h1 is listed again so a later index rule cannot swap the family. */
html[lang="zh"] h1,
html[lang="zh"] body.bg-index .index-hero-copy h1 {
  font-family: 'Rochester', "STXingkai", "华文行楷", "Xingkai SC", "Kaiti SC", "KaiTi", cursive, serif;
  font-weight: 700;
}

/* H2 — latinica: Asul (mora biti prvi, datoteka ima samo latinico).
   Kitajski znaki padejo na Kaiti. */
html[lang="zh"] h2 {
  font-family: 'Asul', "Kaiti SC", "KaiTi", "STKaiti", "华文楷体", serif;
}

/* Navbar — Songti SC 500 (zh) */
html[lang="zh"] .navbar,
html[lang="zh"] .lang-menu {
  font-family: "Asul", "Songti SC", "STSong", "SimSun", "宋体", serif;
  font-weight: 500;
}

html[lang="zh"] .podnapis {
  font-family: 'Libre Baskerville', "Songti SC", "STSong", "SimSun", "宋体", serif;
}


/* ==========================================================================
   2. CUSTOM ŠUMNIKI IN STREŠICE
   Rochester (h1):  .C .S .Z .c .s .z     → Č Š Ž č š ž
   Asul (navbar/h2, samo verzalke): .Ca .Sa .Za
   Ć: .Cc .cc (Rochester) / .Cca .cca (Asul)
   Primer h1: <span class="Z">Z</span>e od 1979
   ========================================================================== */
h1 .roman {
  display: inline-block;
  font-family: 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: 300;
  transform: scaleX(0.75);
  transform-origin: left center;
  margin-right: -0.4em; /* layout širina ostane, vizualno je polovična */
}

.C, .S, .Z, .c, .s, .z, .Cc, .cc, .Ca, .Sa, .Za, .ca, .sa, .za, .Cca, .cca {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.C::after, .S::after, .Z::after, .Cc::after,
.c::after, .s::after, .z::after, .cc::after,
.Ca::after, .Sa::after, .Za::after, .Cca::after,
.ca::after, .sa::after, .za::after, .cca::after {
  position: absolute;
  font-family: 'Times New Roman', Times, serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.C::after, .S::after, .Z::after,
.c::after, .s::after, .z::after,
.Ca::after, .Sa::after, .Za::after,
.ca::after, .sa::after, .za::after { content: 'ˇ'; }
.Cc::after, .cc::after, .Cca::after, .cca::after { content: '´'; }

/* Rochester — Č Š Ž č š ž  (top = gor/dol, left = levo/desno) */
.C::after  { top: -0.35em; left: 0.16em; }
.S::after  { top: -0.35em; left: 0.12em; }
.Z::after  { top: -0.35em; left: 0.22em; }
.Cc::after { top: -0.35em; left: 0.2em; }
.c::after  { top: 0.05em; left: 0em; }
.s::after  { top: 0.08em; left: -0.08em; }
.z::after  { top: 0.05em; left: 0em; }
.cc::after { top: 0.04em; left: 0.03em; }

/* Asul — samo verzalke v meniju/h2 */
.Ca::after  { top: -0.18em; left: 0.2em; }
.Sa::after  { top: -0.18em; left: 0.12em; }
.Za::after  { top: -0.18em; left: 0.13em; }
.Cca::after { top: -0.18em; left: 0.2em; }
.ca::after  { top: 0.0em; left: 0.12em; }
.sa::after  { top: 0.1em; left: 0.07em; }
.za::after  { top: 0.1em; left: 0.1; }
.cca::after { top: 0.0em; left: 0.1em; }


/* ====================================
   3. OSNOVNI SLOGI IN POVEZAVE (LINKS)
   ==================================== */

body {
  padding-top: 0px;
  font: 400 16px 'Roboto Slab', sans-serif;
  line-height: 170%;
  letter-spacing: 0;
  color: #333333;
}

html {
  width: 100%;
}

body {
  width: 100%;
  overflow-x: clip;
}

a:link, a:visited, a:hover, a:active {
  color: #b6892b;
  font-weight: 600;
  text-decoration: none;
}

a.under, a.under:visited, a.under:hover, a.under:active {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition: 0.4s color ease;
  text-decoration: none;
  color: #b6892b;
}

a.under:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 100%;
  width: 0;
  border-bottom: 1px solid #b6892b;
  transition: 0.5s;
}

a.under:hover:after {
  width: 100%;
  right: 0;
}

a.noj:link, a.noj:visited, a.noj:active {
  color: #ffffff;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.25s ease;
}
a.noj:hover {
  color: #b6892b;
  font-weight: 400;
  text-decoration: none;
}

a.nextline:link, a.nextline:visited, a.nextline:active {
  color: #ffffff;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.25s ease;
}
a.nextline:hover {
  color: #b6892b;
  font-weight: 400;
  text-decoration: none;
}

p {
  letter-spacing: 0px;
}

strong {
  font-weight: 700;
  color: #555555;
}

img {
  border: 0;
}

hr {
  border-top: 1px dotted #b6892b;
  margin-bottom: 30px;
}

ul {
  padding: 0px;
  margin-left: 16px;
  padding-top: 0px;
}

li {
  margin-top: 0px;
  padding-top: 0px;
  padding-left: 0px;
}


/* ==========================================================================
   4. NASLOVI IN BESEDILA
   ========================================================================== */

h1 {
  font: 15px 'Rochester', serif;
  font-size: 63px;
  letter-spacing: 0px;
  line-height: 100%;
  color: white;
  text-shadow: none;
  filter: drop-shadow(2px 1px 4px rgba(1,1,1,0.9));
  text-align: left;
  margin-top: 30px;
}

@media screen and (min-width: 1400px) {
  h1 {
    font-size: 70px;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 55px;
    margin-right: 0px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 45px;
    margin-right: 0px;
    margin-top: 20px;
  }
}

h2 {
  font: 15px 'Asul', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b6892b;
  text-shadow: 1px 1px 1px rgba(1,1,1,0.8);
  text-align: left;
  margin-bottom: 20px;
}

#mainCol h2 {
  padding-top: 55px;
  margin-top: -55px;
}

h3 {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 18px;
  color: #b6892b;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 10px;
}

.page-content-col .row [class*="col-"] > h3 {
  margin-top: 20;
  padding-top: 0;
}

h4 {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 18px;
  line-height: 180%;
  color: #555555;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 3px;
}

.podnapis {
  font-family: 'Libre Baskerville', serif;
  font-size: 90%;
  font-weight: 400;
  font-style: italic;
  line-height: 140%;
  letter-spacing: 0px;
  word-spacing: 1px;
  color: #555555;
  margin-top: -14px;
  margin-bottom: 0;
}

#gallery .podnapis {
  margin-bottom: 20px;
}

.bold-20 {
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.gold { color: #b6892b; }

.white { color: #ffffff; }

.h1gold {
  color: #b6892b;
  text-shadow: 2px 1px 3px rgba(1,1,1,0.6);
}


/* ==============================
   5. OZADJA IN LOKALNI BOXI
   ============================== */

.bg-bel {
  margin-right: -10px;
  margin-left: -10px;
  background: rgba(255,255,255,0.95);
  padding-bottom: 50px;
}

/* --- Sidebar (Template B) --- */
.sidebar-stick-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#sidebar {
  background: transparent;
}

@media (min-width: 768px) {
  body,
  html {
    overflow-x: clip;
  }

  .bg-bel,
  .bg-bel-vrh {
    margin-left: 0;
    margin-right: 0;
  }

  .page-with-sidebar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .page-with-sidebar::before,
  .page-with-sidebar::after {
    display: none;
  }

  .page-with-sidebar > .sidebar-col,
  .page-with-sidebar > .page-content-col {
    float: none;
    display: block;
  }

  .page-with-sidebar > .sidebar-col {
    width: 25%;
  }

  .page-with-sidebar > .page-content-col {
    width: 75%;
  }

  #mainCol .container > .row,
  #mainCol .page-content-col .row {
    margin-left: 0;
    margin-right: 0;
  }

  .sidebar-col {
    position: relative;
  }

  #sidebar.is-sidebar-stuck {
    background: transparent;
  }

  .page-content section[id] {
    scroll-margin-top: 80px;
  }
}

.sidebar-nav {
  padding-right: 0;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin: 0;
  position: relative;
}

/* Hairline dotted rule (thinner than 1px border): between items + under last */
.sidebar-nav li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px dotted #b6892b;
  transform: scaleY(0.5);
  transform-origin: bottom;
  pointer-events: none;
}

.sidebar-nav a {
  display: block;
  padding: 0.75em 0;
  font-family: Asul, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  color: #555555 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s ease;
}

.sidebar-nav a .Ca,
.sidebar-nav a .Sa,
.sidebar-nav a .Za,
.sidebar-nav a .Cca {
  line-height: 1;
  vertical-align: baseline;
}

.sidebar-nav a .Ca::after,
.sidebar-nav a .Cca::after { top: -0.3em; }
.sidebar-nav a .Sa::after  { top: -0.3em; }
.sidebar-nav a .Za::after  { top: -0.3em; }

.sidebar-nav a:hover,
.sidebar-nav a:focus-visible {
  color: #b6892b !important;
}

.sidebar-nav a:focus {
  outline: none;
}

.sidebar-nav a.active {
  color: #b6892b !important;
  font-weight: 700;
}

.page-content-col {
  position: relative;
  z-index: 1;
}

#sidebar.is-sidebar-stuck {
  position: fixed;
  z-index: 100;
  box-sizing: border-box;
  background: transparent;
}

@media (max-width: 767px) {
  body,
  html {
    overflow-x: hidden;
  }

  .bg-bel,
  .bg-bel-vrh {
    margin-left: 0;
    margin-right: 0;
  }

  .bg-bel-vrh {
    padding-top: 0;
    margin: 0;
    min-height: 0;
  }

  .bg-bel {
    padding-top: 0;
  }

  .bg-bel > .container {
    padding-top: 0;
  }

  .page-with-sidebar {
    margin-top: 0;
  }

  .sidebar-col {
    position: relative;
    margin-top: 0;
    padding-top: 0;
  }

  #sidebar {
    z-index: 10;
    background: transparent;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .page-content section[id] {
    scroll-margin-top: 50px;
  }

  #sidebar.is-sidebar-stuck {
    left: 0;
    right: 0;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(255, 255, 255, 0.95);
    margin-bottom: 0;
  }

  #sidebar a {
    padding: 0.65em 0;
    font-size: 13px;
  }
}

.site-credit {
  margin: 2.5rem 0 0rem;
  padding: 0;
  font-size: 12px;
  color: rgba(85, 85, 85, 0.65);
  text-align: left;
}

.site-credit a {
  color: rgba(85, 85, 85, 0.75);
  font-weight: 400;
}

.site-credit img {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: -4px;
  opacity: 0.7;
}

.site-credit a:hover {
  color: #b6892b;
}

#kontakt .contact-logo {
  margin-bottom: 2rem;
  text-align: center;
}

#kontakt .contact-logo img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

#kontakt .contact-details {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Keep long emails/URLs on one line (avoid mid-word wrap like n.com) */
#kontakt .contact-details a {
  white-space: nowrap;
}

#kontakt .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Sharp start of white content (no soft strip). Hero fades to white via ::after. */
.bg-bel-vrh {
  margin-right: -10px;
  margin-left: -10px;
  background: rgba(255, 255, 255, 0.95);
  padding-top: 0;
}

@media (min-width: 768px) {
  .bg-bel-vrh {
    padding-top: 30px;
  }
}

/* Hero on body: page sets URL via .bg-image1 { background-image: url(...) } */
.bg-image, .bg-image-i {
  margin-top: 50px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-color: #fff;
}

.bg-image-center {
  margin-top: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-color: #fff;
}

.bg-image-left {
  margin-top: 50px;
  background-position: 10% center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-color: #fff;
}

/*
  Desktop/tablet: fixed full-viewport cover (no fade — photo always fills screen).
  Mobile: same cover + white fade only in the bottom ~10%.
*/
@media (min-width: 768px) {
  body.bg-image,
  body.bg-image-i,
  body.bg-image-center,
  body.bg-image-left {
    position: relative;
    background-size: 0;
  }

  body.bg-image::before,
  body.bg-image-i::before,
  body.bg-image-center::before,
  body.bg-image-left::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: inherit;
    background-position: inherit;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (max-width: 767px) {
  body.bg-image,
  body.bg-image-i,
  body.bg-image-center,
  body.bg-image-left {
    position: relative;
    background-size: 0;
  }

  body.bg-image::before,
  body.bg-image-i::before,
  body.bg-image-center::before,
  body.bg-image-left::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: inherit;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  body.bg-image-left::before {
    background-position: center center;
  }
}

/*
  Index only (body.bg-index): the photo runs edge to edge.
  Navbar is 50px, so the image starts at 49px and the bar covers 1px.
  Footer’s painted bar is about 38px (43px box, 5px of it below the screen);
  the image ends 1px under that edge.
*/
body.bg-index.bg-image::before,
body.bg-index.bg-image-i::before,
body.bg-index.bg-image-center::before,
body.bg-index.bg-image-left::before {
  top: 49px;
  bottom: 37px;
  background-position: center center;
  background-size: cover;
}

/* Index title: one line at 70vw. Two lines only below 700px. */
body.bg-index .index-hero-copy {
  --index-in: 1s;
  --index-in-ease: cubic-bezier(0, 0.2, 0.4, 1);
  --index-edge: 61px;
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

body.bg-index .index-hero-copy h1 {
  --index-h1-em: 12.043;
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  margin: 0;
  padding: 0 0 0 var(--index-edge);
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
  font-size: min(63px, calc(70vw / var(--index-h1-em)));
  pointer-events: auto;
  opacity: 0;
  animation: index-h1-in 2.2s cubic-bezier(0.33, 0.08, 0.2, 1) forwards;
}

body.bg-index .index-h1-line {
  display: inline;
}

body.bg-index .index-h1-line + .index-h1-line::before {
  content: " ";
}

@keyframes index-h1-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Subtitle and logo share a layer so the phone can stack the logo under the line. */
body.bg-index .index-foot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Index subtitle. Not tied to the h1 — move it with top and left. */
body.bg-index .index-sub {
  --index-sub-em: 22;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  word-spacing: 1px;
  line-height: 120%;
  position: absolute;
  font-size: calc(45vw / var(--index-sub-em));
  bottom: 60px;
  left: auto;
  right: var(--index-edge);
  width: max-content;
  margin-right:200px;
  text-align: right;
  color: #fff;
  pointer-events: auto;
  filter: drop-shadow(1.5px 1px 2px rgba(1,1,1,1));
}

/* Chinese index subtitle. Kaiti is the soft brush face (italic's role).
   Cormorant Garamond has no Chinese glyphs. */
html[lang="zh"] body.bg-index .index-sub {
  font-family: "Kaiti SC", "KaiTi", "STKaiti", "华文楷体", "楷体", serif;
  font-style: normal;
  font-weight: 400;
}

/* The line is written left to right. JS sets the step count from the text. */
body.bg-index .index-sub-line {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0 100% 0 -0.25em);
}

@keyframes index-sub-write {
  from { clip-path: inset(0 100% 0 -0.25em); }
  to { clip-path: inset(0 -0.45em 0 -0.25em); }
}

/* NOJ mark. Same fade as the title. JS starts it once Handcarved
   has finished writing. */
body.bg-index .index-logo {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: 0;
  padding-right: var(--index-edge);
  text-align: right;
  pointer-events: auto;
  opacity: 0;
}

body.bg-index .index-logo img {
  display: inline-block;
  width: 150px;
  max-width: 70vw;
  height: auto;
}

@media screen and (max-width: 767px) {
  body.bg-index .index-hero-copy h1 {
    /* Same viewport offset as interior h1: navbar 50px + margin-top 20px. */
    top: 70px;
    padding: 0 16px;
    text-align: left;
    line-height: 1.15;
    font-size: 55px;
  }
}

/* Two lines only once the 55px sentence no longer fits.
   The line is 662px; 16px padding each side → about 700px. */
@media screen and (max-width: 700px) {
  body.bg-index .index-hero-copy h1 {
    white-space: normal;
  }

  body.bg-index .index-h1-line {
    display: block;
    text-align: left;
  }

  body.bg-index .index-h1-line + .index-h1-line {
    text-align: right;
  }

  body.bg-index .index-h1-line + .index-h1-line::before {
    content: none;
  }
}

@media screen and (max-width: 500px) {
  body.bg-index .index-hero-copy h1 {
    font-size: 45px;
  }
}

/* Chinese index title: one line. It shrinks with the window instead of wrapping. */
html[lang="zh"] body.bg-index .index-hero-copy h1 {
  white-space: nowrap;
  font-size: min(63px, calc(70vw / var(--index-h1-em)));
}

@media screen and (max-width: 767px) {
  html[lang="zh"] body.bg-index .index-hero-copy h1 {
    white-space: nowrap;
    text-align: center;
    font-size: min(63px, calc(70vw / var(--index-h1-em)));
  }

  html[lang="zh"] body.bg-index .index-h1-line,
  html[lang="zh"] body.bg-index .index-h1-line + .index-h1-line {
    display: inline;
    text-align: left;
  }

  html[lang="zh"] body.bg-index .index-h1-line + .index-h1-line::before {
    content: " ";
  }
}

@media screen and (max-width: 767px) {
  body.bg-index .index-foot {
    inset: auto;
    left: 0;
    right: 0;
    bottom: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  body.bg-index .index-sub {
    position: static;
    right: auto;
    bottom: auto;
    margin-right: 0;
    width: auto;
    font-size: calc(90vw / var(--index-sub-em));
    text-align: center;
  }

  html[lang="sl"] body.bg-index .index-sub {
    --index-sub-fit: 22;
    font-size: min(calc(90vw / var(--index-sub-em)), calc(90vw / var(--index-sub-fit)));
  }

  body.bg-index .index-logo {
    position: static;
    padding-right: 0;
    text-align: center;
  }
}

/* After the logo rule, otherwise that rule turns the fade back on. */
@media (prefers-reduced-motion: reduce) {
  body.bg-index .index-hero-copy h1,
  body.bg-index .index-logo {
    animation: none;
    opacity: 1;
  }

  body.bg-index .index-sub-line {
    clip-path: none;
    animation: none;
  }
}

.h1box { height: calc(100vh - 190px); }
.h1box-contact { height: calc(100vh - 290px); }

@media screen and (max-width: 767px) {
  .h1box, .h1box-contact { height: calc(100vh - 400px); }
}


/* ==========================================================================
   6. GRID IN CONTAINERJI
   ========================================================================== */

.container-fluid {
  padding: 0px;
  margin: 0px;
}

.container {
  width: 80%;
  max-width: 1500px;
}

@media (max-width: 767px) {
  #mainCol .container,
  .footer .container {
    width: 100%;
    max-width: none;
    padding-left: 5px;
    padding-right: 5px;
  }

  #mainCol .container .row {
    margin-left: 0;
    margin-right: 0;
  }

  #mainCol .container [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 2000px) {
  .col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9 { float: left; }
  .col-xl-12 { width: 100%; }
  .col-xl-11 { width: 91.66666667%; }
  .col-xl-10 { width: 83.33333333%; }
  .col-xl-9  { width: 75%; }
  .col-xl-8  { width: 66.66666667%; }
  .col-xl-7  { width: 58.33333333%; }
  .col-xl-6  { width: 50%; }
  .col-xl-5  { width: 41.66666667%; }
  .col-xl-4  { width: 33.33333333%; }
  .col-xl-3  { width: 25%; }
  .col-xl-2  { width: 16.66666667%; }
  .col-xl-1  { width: 8.33333333%; }
}


/* ==========================================================================
   7. PANELI, TABELE IN SLIKE
   ========================================================================== */

.panel {
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.panel:hover {
  box-shadow: 0 7.5px 12px rgba(182, 137, 43, 0.36);
  transform: translateY(-5px);
}
.panel-default {
  border-color: transparent;
}
.panel-heading,
.panel-default > .panel-heading {
  background-color: #fff !important;
  background-image: none !important;
  filter: none;
  padding: 14px 16px 10px;
  border: none;
  border-bottom: none;
  border-radius: 0;
}
.panel-body {
  padding: 0 !important;
  border: none;
}
.panel-footer {
  background-color: #fff !important;
  background-image: none !important;
  border: none;
  border-top: none;
  padding: 10px 16px;
}
.panel-footer p {
  margin-top: 0;
  margin-bottom: 0;
}
.panel-heading h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 0;
}
.panel .thumbnail {
  margin-bottom: 0;
  box-shadow: none;
}

.thumbnail {
  padding: 0;
  border: none;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 3px 3px 7px 0 #ccc;
}
.thumbnail img {
  width: 100%;
  margin-bottom: 0px;
}
.thumbnail a {
  cursor: zoom-in;
}
@media (max-width: 767px) {
  .thumbnail a {
    cursor: default;
  }
}

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.lb-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lb-frame {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  line-height: 0;
}
.lb-overlay .lb-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.28);
  cursor: zoom-out;
  transform: scale(0.97);
  transition: transform 0.32s ease;
}
.lb-overlay.is-open .lb-img {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .lb-overlay,
  .lb-overlay .lb-img {
    transition: none;
  }
}
.lb-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.88);
  color: #b6892b;
  font-size: 28px;
  line-height: 36px;
  font-weight: 300;
  cursor: pointer;
}
.lb-close:hover,
.lb-close:focus {
  color: #333;
  outline: none;
}
body.lb-open {
  overflow: hidden;
}

/* Flush with text, 20px gap. col-sm-8+4 = 2/3+1/3, col-sm-6 = 2, col-sm-4 = 3, col-sm-3 = 4.
   row-cols = no lines, row-lines = same + vertical dotted rules. */
.row-cols,
.row-lines {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.row-cols::before,
.row-cols::after,
.row-lines::before,
.row-lines::after {
  display: none;
}
.row-cols > [class*="col-"],
.row-lines > [class*="col-"] {
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
}
.row-cols > .col-sm-3,
.row-lines > .col-sm-3  { grid-column: span 3; }
.row-cols > .col-sm-4,
.row-lines > .col-sm-4  { grid-column: span 4; }
.row-cols > .col-sm-6,
.row-lines > .col-sm-6  { grid-column: span 6; }
.row-cols > .col-sm-8,
.row-lines > .col-sm-8  { grid-column: span 8; }
.row-cols > .col-sm-12,
.row-lines > .col-sm-12 { grid-column: span 12; }
.row-lines > [class*="col-"] {
  position: relative;
}
.row-lines > [class*="col-"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  border-right: 1px dotted #b6892b;
  pointer-events: none;
}
.row-lines > .col-sm-6:nth-child(2n)::after,
.row-lines > .col-sm-4:nth-child(3n)::after,
.row-lines > .col-sm-3:nth-child(4n)::after,
.row-lines > [class*="col-"]:last-child::after {
  content: none;
}
@media (max-width: 767px) {
  .row-cols,
  .row-lines {
    grid-template-columns: 1fr;
  }
  .row-cols > [class*="col-"],
  .row-lines > [class*="col-"] {
    grid-column: span 1;
  }
  .row-lines > [class*="col-"]::after {
    content: none;
  }
}

.important {
  border-style: ridge;
  border-color: #b6892b;
  border-width: 2pt;
  border-radius: 0px;
  padding: 10px;
  box-shadow: 3px 3px 7px 0 #ccc;
}

.img-dubrovnik { box-shadow: none !important; }
.logohome { width: 30px; }
.logoindex { width: 230px; }

@media screen and (max-width: 1199px) { .logoindex { width: 200px; } }
@media screen and (max-width: 768px)  { .logoindex { width: 150px; } }

th {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 18px;
  color: #b6892b;
  font-weight: 600;
  height: 35px;
  background-color: none;
  text-align: bottom;
}

.tblcenter { text-align-last: center; }
.tblright  { text-align-last: right; }
.tw50       { width: 50%; }
.tw60       { width: 60%; }
.tw70       { width: 70%; }

.line-table {
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

#details .line-table {
  margin-top: 30px;
  margin-bottom: 0;
}

#details .line-table:last-of-type {
  margin-bottom: 20px;
}
.line-dotted-top {
  border-top: 1px dotted #b6892b;
}


/* ==========================================================================
   8. FOOTER & OSTALI ELEMENI
   ========================================================================== */

div.absolute {
  position: absolute;
  width: 100%;
  bottom: 10px;
  text-align: center;
  vertical-align: bottom;
}

.footer {
  position: fixed;
  bottom: 0;
  border-top: 1px dotted #b6892b;
  padding-top: 5px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: -5px;
  vertical-align: middle;
  width: 100%;
  z-index: 99999 !important;
  color: #ffffff;
  font-size: 12px !important;
  font-weight: 400;
  background-color:  rgba(25,7,0,1);
  display: inline;
  opacity: 1;
  overflow: hidden;
}

.glyphicon {
  font-size: 125%;
  margin-top: 5px;
}
.glyphicon-gor {
  font-size: 150%;
  vertical-align: text-bottom ;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  height: 100%;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #ffffff;
  transition: color 0.22s ease,
              transform 0.22s cubic-bezier(0.34, 1.15, 0.64, 1),
              filter 0.22s ease;
}

.social-links a::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.15, 0.64, 1);
  pointer-events: none;
  z-index: 0;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: #ffffff;
  transform: scale(1.08);
}

.social-links a:hover::before,
.social-links a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* barvni glow po omrežju — ikona ostane bela */
.social-links a.icon-x:hover,
.social-links a.icon-x:focus-visible {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.68))
          drop-shadow(0 0 12px rgba(255, 255, 255, 0.32));
}
.social-links a.icon-x:hover::before,
.social-links a.icon-x:focus-visible::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 74%);
}

.social-links a.icon-instagram:hover,
.social-links a.icon-instagram:focus-visible {
  filter: drop-shadow(0 0 8px rgba(228, 64, 95, 0.95))
          drop-shadow(0 0 15px rgba(228, 64, 95, 0.52));
}
.social-links a.icon-instagram:hover::before,
.social-links a.icon-instagram:focus-visible::before {
  background: radial-gradient(circle, rgba(228, 64, 95, 0.74) 0%, rgba(228, 64, 95, 0) 72%);
}

/* TikTok — cyan levo zgoraj, rdeč desno spodaj (kot logo) */
.social-links a.icon-tiktok:hover,
.social-links a.icon-tiktok:focus-visible {
  filter: drop-shadow(1px 1px 2px rgba(254, 44, 85, 1))
          drop-shadow(2px 2px 5px rgba(254, 44, 85, 0.95))
          drop-shadow(2px 2px 7px rgba(254, 44, 85, 0.75))
          drop-shadow(3px 3px 9px rgba(254, 44, 85, 0.55))
          drop-shadow(-1px -1px 2px rgba(37, 244, 238, 1))
          drop-shadow(-2px -2px 6px rgba(37, 244, 238, 0.85));
}
.social-links a.icon-tiktok:hover::before,
.social-links a.icon-tiktok:focus-visible::before {
  opacity: 0;
}

.social-links a.icon-rednote:hover,
.social-links a.icon-rednote:focus-visible {
  filter: drop-shadow(0 0 7px rgba(255, 36, 66, 0.78))
          drop-shadow(0 0 13px rgba(255, 36, 66, 0.4));
}
.social-links a.icon-rednote:hover::before,
.social-links a.icon-rednote:focus-visible::before {
  background: radial-gradient(circle, rgba(255, 36, 66, 0.58) 0%, rgba(255, 36, 66, 0) 72%);
}

.social-links a.icon-etsy:hover,
.social-links a.icon-etsy:focus-visible {
  filter: drop-shadow(0 0 8px rgba(245, 100, 0, 0.95))
          drop-shadow(0 0 16px rgba(245, 100, 0, 0.55));
}
.social-links a.icon-etsy:hover::before,
.social-links a.icon-etsy:focus-visible::before {
  background: radial-gradient(circle, rgba(245, 100, 0, 0.72) 0%, rgba(245, 100, 0, 0) 74%);
}

.social-links svg {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
}

.social-links a.icon-rednote svg {
  width: 30px;
  height: auto;
}


/*===================================================
   9. NAVIGACIJSKA VRSTICA & JEZIKOVNI MENI (ČISTA REŠITEV Z BREAKPOINTOM)
   ================================================== */

.navbar {
  margin-bottom: 0;
  z-index: 9999;
  border: 0;
  font-size: 14px;
  letter-spacing: 2px;
  border-radius: 0;
  font-family: Asul, sans-serif;
  font-weight: 600;
  background-color: rgba(25,7,0,1);
  min-height: 50px;
}

/* logo: 1em od roba na desktopu; na mobiju 5px = poravnava z vsebino */
.navbar > .container-fluid {
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
}

@media (max-width: 767px) {
  .navbar > .container-fluid {
    padding-left: 5px;
  }
}

.navbar > .container-fluid > .navbar-header,
.navbar > .container-fluid > .navbar-collapse {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.navbar > .container-fluid .navbar-brand,
.navbar-brand {
  margin-right: 0;
  margin-left: 0 !important;
  font-size: 14px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 1em;
  height: 50px;
  line-height: 1;
  padding: 0;
  margin-top: 0 !important;
}

.navbar-brand .logohome {
  display: block;
  flex-shrink: 0;
}

.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
  border-bottom: none !important;
}

.navbar-nav > li {
  position: relative;
}

.navbar-nav > li:not(.active)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #b6892b;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.15, 0.64, 1),
              opacity 0.18s ease;
  pointer-events: none;
}

.navbar-nav > li:not(.active):hover::before,
.navbar-nav > li:not(.active):focus-within::before {
  transform: scale(1);
  opacity: 1;
}

.navbar-nav > li.active {
  background-color: #b6892b;
}

.navbar-nav > li > a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 50px;
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  background-color: transparent !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus-visible {
  color: #ffffff !important;
  border-bottom: none !important;
  background-color: transparent !important;
}

/* Bootstrap-theme paints .active > a with a black gradient — kill it, keep gold. */
.navbar-nav > li.active > a,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff !important;
  border-bottom: none !important;
  background-color: #b6892b !important;
  background-image: none !important;
  box-shadow: none !important;
}

.icon-bar {
  background-color: #fff !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}

/* Osnovni slogi za jezikovni meni */
.lang-menu {
  z-index: 10000;
  font-family: Asul, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.lang-menu a.lang-item {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1;
  font-size: 12px;
  background-color: transparent !important;
}

.lang-menu a.lang-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #b6892b;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.22s cubic-bezier(0.34, 1.15, 0.64, 1);
  z-index: -1;
}

.lang-menu a.lang-item:hover,
.lang-menu a.lang-item:focus-visible {
  color: #ffffff !important;
  opacity: 1;
}

.lang-menu a.lang-item:hover::before,
.lang-menu a.lang-item:focus-visible::before {
  transform: translate(-50%, -50%) scale(1);
}

.lang-menu a.lang-item.active::before {
  content: none;
}

.lang-menu a.lang-item.active {
  color: #ffffff !important;
  background-color: #b6892b !important;
  border-radius: 50%;
  opacity: 1;
  font-size: 12px;
}

/* 中文 — nekoliko širši slot, da se layout ne premika */
.lang-menu a.lang-item[href*="/zh/"] {
  width: 34px;
}

/* 中文 v active krogu — manjši font, enak slot */
.lang-menu a.lang-item.active[href*="/zh/"] {
  font-size: 10px;
  width: 34px;
}

.lang-menu .lang-sep {
  color: #ffffff;
  opacity: 0.45;
  margin: 0 7px;
  flex-shrink: 0;
  line-height: 1;
}


/* --- A) Collapse: hamburger do te širine (mora biti usklajeno z blokom B) --- */
@media (max-width: 1100px) {
  .navbar-header {
    display: flex;
    align-items: center;
    width: 100%;
    float: none;
    min-height: 50px;
  }

  .navbar-brand {
    order: 1;
    flex: 0 0 auto;
    padding-left: 0;
    margin-right: 0;
  }

  /* Hamburger gumb na desno */
  .navbar-toggle {
    display: block !important;
    order: 2;
    float: none !important;
    margin-left: auto !important;
    margin-right: 0;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  /* Skrijemo klasični meni */
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-top .navbar-collapse.in {
    max-height: none !important;
  }

  /* Vertikalna postavitev odprtega menija */
  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: normal;
    height: auto;
  }

  /* strešice v hamburger meniju — ne podedujejo body line-height */
  .navbar-nav > li > a .C,
  .navbar-nav > li > a .S,
  .navbar-nav > li > a .Z,
  .navbar-nav > li > a .Cc,
  .navbar-nav > li > a .Ca,
  .navbar-nav > li > a .Sa,
  .navbar-nav > li > a .Za,
  .navbar-nav > li > a .Cca {
    line-height: 1;
    vertical-align: baseline;
  }

  .navbar-brand {
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
  }

  /* Jeziki — fiksno zgoraj, ne sredi odprtega menija */
  .lang-menu {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    padding-left: 0 !important;
    height: 50px;
    border-left: none;
    margin-left: 0;
  }
  .lang-menu::before {
    display: none !important;
  }
}

/*
  ZH meni je ožji → horizontalni meni že od 1201px (SL/EN še do 1350 collapsata).
  Razveljavi collapse A v tem razponu + desktop layout.
*/
@media (min-width: 1201px) and (max-width: 1250px) {
  html[lang="zh"] .navbar .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  html[lang="zh"] .navbar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: auto;
    float: none;
    min-height: 50px;
  }

  html[lang="zh"] .navbar-toggle {
    display: none !important;
  }

  html[lang="zh"] .navbar-collapse {
    flex: 1 1 auto;
    float: none !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    border-top: none;
    box-shadow: none;
  }

  html[lang="zh"] .navbar-collapse.collapse {
    display: block !important;
  }

  html[lang="zh"] body:not(.nav-force-collapse) .navbar-nav {
    float: right !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
  }

  html[lang="zh"] body:not(.nav-force-collapse) .navbar-nav > li {
    float: none;
  }

  html[lang="zh"] body:not(.nav-force-collapse) .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
  }

  html[lang="zh"] body:not(.nav-force-collapse) .lang-menu {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    margin-left: 12px;
    padding-left: 12px;
    padding-right: 0;
    height: 50px;
    border-left: none;
  }

  html[lang="zh"] body:not(.nav-force-collapse) .lang-menu::before {
    content: "";
    display: block !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 30px;
    background-color: #b6892b;
  }
}

/* JS force-collapse: takoj nad CSS hamburgerjem (1101).
   Desktop je flex v eni vrsti; odprt meni mora pasti POD home, sicer
   stoji desno od 100% headerja in pade iz okna (prazen črn pas). */
@media (min-width: 1101px) {
  body.nav-force-collapse .navbar .container-fluid {
    display: block;
  }

  body.nav-force-collapse .navbar-collapse,
  body.nav-force-collapse .navbar-collapse.collapse.in {
    float: none !important;
    width: 100%;
    flex: none;
  }

  body.nav-force-collapse .navbar-toggle {
    display: block !important;
  }

  body.nav-force-collapse .navbar-collapse.collapse {
    display: none !important;
  }

  body.nav-force-collapse .navbar-collapse.collapse.in {
    display: block !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  body.nav-force-collapse .navbar-header {
    display: flex;
    align-items: center;
    width: 100%;
    float: none;
  }

  body.nav-force-collapse .navbar-brand {
    order: 1;
    flex: 0 0 auto;
    margin-right: 0;
  }

  body.nav-force-collapse .navbar-toggle {
    order: 2;
    float: none !important;
    margin-left: auto !important;
    margin-right: 0;
  }

  body.nav-force-collapse .navbar-nav {
    float: none !important;
    display: block;
    flex-wrap: unset;
  }

  body.nav-force-collapse .navbar-nav > li {
    float: none;
  }

  body.nav-force-collapse .navbar-nav > li > a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: normal;
    height: auto;
  }

  body.nav-force-collapse .lang-menu {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    height: 50px;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  body.nav-force-collapse .lang-menu::before {
    display: none !important;
  }
}


/* --- B) Desktop horizontalni meni (takoj nad collapse breakpointom) --- */
@media (min-width: 1101px) {
  .navbar .container-fluid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .navbar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 50px;
    position: relative;
    z-index: 2;
  }

  .navbar-collapse {
    flex: 1 1 auto;
    float: none !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .navbar-collapse.collapse {
    display: block !important;
  }

  body:not(.nav-force-collapse) .navbar-nav {
    float: right !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .navbar-nav > li:last-child > a {
    margin-right: 0 !important;
  }

  /* kompakten blok: KONTAKT — 12px — črta — 12px — SI | EN | 中文 */
  .lang-menu {
    position: relative;
    flex: 0 0 auto;
    transform: none;
    margin-left: 12px;
    padding-left: 12px;
    padding-right: 0;
    height: 50px;
    border-left: none;
  }

  .lang-menu::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 30px;
    background-color: #b6892b;
  }
}


/* ==========================================================================
   10. ANIMACIJE
   ========================================================================== */

.slideanim { visibility: hidden; }
.slide {
  animation-name: slide;
  animation-duration: 1s;
  visibility: visible;
}
.slide-h1 {
  vertical-align: bottom;
  margin-bottom: -35px;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}