/* ===== CERT header — tamna varijanta CARNET headera (projekti/header) =====
   Logo: okolni prostor = visina loga (brand book 1.1) → 32 px logo, 32 px zraka gore/dolje.
   Izbornik: Inter, verzal; podizbornici na klik/hover, tipkovnica, Esc.
   Kontrasti na Off-Black 100: Off-White 50 tekst 16:1, plava podcrta 11:1. */

.cn-header {
  --cn-logo-h: 32px;
  position: relative;
  z-index: 100;
  font-family: var(--font);
  color: var(--white-50);
  background: var(--black-100);
  border-bottom: 1px solid var(--black-75);
}
.cn-header *, .cn-header *::before, .cn-header *::after { box-sizing: border-box; }
/* Divi Theme Builder: omotač headera mora biti iznad sadržaja i footera, inače footer prekriva podizbornik */
.et-l--header { position: relative; z-index: 100; }
.cn-header ul { list-style: none; margin: 0; padding: 0; }
.cn-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--cn-logo-h) 48px;
  display: flex;
  align-items: center;
  gap: var(--cn-logo-h);
}
.cn-header__logo { display: block; flex: none; color: inherit; border-radius: var(--radius); }
.cn-header__logo img { display: block; height: var(--cn-logo-h); width: auto; }
.cn-header a:focus-visible,
.cn-header button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Izbornik – desktop */
.cn-nav { margin-left: auto; }
.cn-nav__list { display: flex; align-items: center; gap: 4px; }
.cn-nav__list > li { position: relative; }
.cn-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white-50);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.cn-nav__link:hover { color: var(--white-50); }
.cn-nav__link span { position: relative; padding: 4px 0; }
/* Podcrta za hover, otvoreno i trenutnu stranicu (plava na tamnoj = 11:1) */
.cn-nav__link span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s;
}
.cn-nav__link:hover span::after,
.cn-nav__link[aria-expanded="true"] span::after,
.cn-nav__link[aria-current="page"] span::after { transform: scaleX(1); }
.cn-nav__link .cert-icon { width: 20px; height: 20px; margin-right: -4px; transition: transform .15s; }
.cn-nav__link[aria-expanded="true"] .cert-icon { transform: rotate(180deg); }

/* Podizbornik (2. razina) — svijetli panel ispod tamnog headera */
.cn-nav__sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  padding: 8px;
  background: var(--white-50);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(14, 14, 14, .4);
}
.cn-nav__sub[hidden] { display: none; }
.cn-nav__sub li { position: relative; }
.cn-nav__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: left;
  color: var(--black-100);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
/* Off-Black 100 na Off-White 100 = 13,6:1 */
.cn-nav__sublink:hover,
.cn-nav__sublink[aria-expanded="true"] { color: var(--black-100); background: var(--white-100); }
.cn-nav__sublink[aria-current="page"] { background: var(--white-100); }
.cn-nav__sub .cn-nav__sublink:focus-visible { outline-color: var(--black-100); outline-offset: -2px; }
.cn-nav__sublink .cert-icon { width: 20px; height: 20px; flex: none; }

/* Pod-podizbornik (3. razina) – otvara se udesno, ili ulijevo kad nema mjesta */
.cn-nav__sub .cn-nav__sub { top: -8px; left: calc(100% + 8px); }
.cn-nav__sub .cn-nav__sub.is-flipped { left: auto; right: calc(100% + 8px); }
.cn-nav__sublink.is-flipped .cert-icon { transform: rotate(180deg); }
.cn-nav__list > li.is-right > .cn-nav__sub { left: auto; right: 0; }

/* Stavka s vlastitom stranicom: link + zaseban gumb sa strelicom */
.cn-split { display: flex; align-items: center; }
.cn-nav__list > .cn-split > .cn-nav__link { padding-right: 2px; }
.cn-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  min-height: 44px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.cn-nav__list > .cn-split > .cn-nav__toggle { color: var(--white-50); margin-right: 8px; }
.cn-nav__toggle .cert-icon { width: 20px; height: 20px; transition: transform .15s; }
.cn-nav__list > .cn-split > .cn-nav__toggle[aria-expanded="true"] .cert-icon { transform: rotate(180deg); }
.cn-nav__list > .cn-split:has(> .cn-nav__toggle[aria-expanded="true"]) > .cn-nav__link span::after { transform: scaleX(1); }
/* 2. razina: link zauzima redak, strelica desno */
.cn-nav__sub .cn-split > .cn-nav__sublink { flex: 1; }
.cn-nav__sub .cn-nav__toggle { width: 44px; color: var(--black-100); }
.cn-nav__sub .cn-nav__toggle:hover,
.cn-nav__sub .cn-nav__toggle[aria-expanded="true"] { background: var(--white-100); }
.cn-nav__sub .cn-nav__toggle:focus-visible { outline-color: var(--black-100); outline-offset: -2px; }
.cn-nav__toggle.is-flipped .cert-icon { transform: rotate(180deg); }
/* Link i strelica iste stavke reagiraju zajedno (4. 11. 2026.): podloga na cijelom retku, ne na dijelovima */
.cn-nav__sub .cn-split { border-radius: var(--radius); }
.cn-nav__sub .cn-split:hover,
.cn-nav__sub .cn-split:has(> .cn-nav__toggle[aria-expanded="true"]),
.cn-nav__sub .cn-split:has(> [aria-current="page"]) { background: var(--white-100); }
.cn-nav__sub .cn-split > .cn-nav__sublink:hover,
.cn-nav__sub .cn-split > .cn-nav__sublink[aria-current="page"],
.cn-nav__sub .cn-split > .cn-nav__toggle:hover,
.cn-nav__sub .cn-split > .cn-nav__toggle[aria-expanded="true"] { background: none; }
.cn-nav__list > .cn-split:hover > .cn-nav__link span::after { transform: scaleX(1); }

.cn-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* HR/EN */
.cn-lang { display: flex; padding: 2px; border: 1px solid var(--black-75); border-radius: var(--radius); }
.cn-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--white-100);
  text-decoration: none;
  border-radius: 2px;
}
.cn-lang a:hover { color: var(--white-50); background: var(--black-75); }
.cn-lang a[aria-current="true"] { color: var(--black-100); background: var(--white-50); }

/* Gumbi samo s ikonom (tražilica, hamburger): 44×44 dodirna površina */
.cn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--white-50);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s;
}
.cn-icon-btn:hover,
.cn-icon-btn[aria-expanded="true"] { background: var(--black-75); }
.cn-icon-btn .cert-icon { width: 26px; height: 26px; }
.cn-icon-btn > span { display: inline-flex; }
.cn-header__toggle { display: none; }
.cn-nav__cta-mobile { display: none; }

.cn-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tražilica — svijetli panel */
.cn-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  color: var(--black-100);
  background: var(--white-50);
  border-bottom: 1px solid var(--white-100);
  box-shadow: 0 16px 32px rgba(14, 14, 14, .24);
}
.cn-search[hidden] { display: none; }
.cn-search a:focus-visible,
.cn-search button:focus-visible { outline-color: var(--black-100); }
.cn-search .cn-icon-btn { color: var(--black-100); }
.cn-search .cn-icon-btn:hover { background: rgba(97, 209, 250, .35); }
.cn-search__form,
.cn-search__results { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.cn-search__form { display: flex; align-items: center; gap: 12px; padding-top: 24px; }
.cn-search__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 16px;
  background: var(--white-50);
  border: 1.5px solid var(--black-75);
  border-radius: var(--radius);
}
.cn-search__field:focus-within { border-color: var(--black-100); box-shadow: 0 0 0 4px rgba(97, 209, 250, .45); }
.cn-search__field .cert-icon { width: 24px; height: 24px; flex: none; color: var(--black-75); }
.cn-search__field input,
.cn-search__field input:hover,
.cn-search__field input:focus {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 16px 0;
  font: inherit;
  font-size: var(--fs-lg);
  color: var(--black-100);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.cn-search__field input::placeholder { color: var(--black-75); opacity: 1; }
.cn-search__field input::-webkit-search-cancel-button { display: none; }
.cn-search__kbd {
  flex: none;
  padding: 2px 8px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--black-75);
  border: 1px solid var(--black-75);
  border-radius: var(--radius);
}
.cn-search__results { padding-top: 16px; padding-bottom: 24px; }
.cn-search__hint {
  margin: 0 0 8px;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black-75);
}
.cn-search__list { display: grid; gap: 2px; }
.cn-search__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 8px 12px;
  color: var(--black-100);
  text-decoration: none;
  border-radius: var(--radius);
}
.cn-search__list a:hover,
.cn-search__list [aria-selected="true"] a { background: rgba(97, 209, 250, .22); }
.cn-search__title { font-size: var(--fs-md); font-weight: 600; }
.cn-search__path { font-size: var(--fs-xs); color: var(--black-75); text-align: right; }
.cn-search__list mark { background: var(--blue); color: var(--black-100); border-radius: 2px; padding: 0 1px; }
.cn-search__list .cert-icon { width: 20px; height: 20px; flex: none; }
.cn-search__all a { font-weight: 600; }

/* Izbornik – mobilni (do 1279 px): svijetli panel preko cijele širine. Puni izbornik s gumbom treba ~1300 px; ispod 1280 bi ispao iz ekrana. */
@media (max-width: 1279px) {
  .cn-header { --cn-logo-h: 24px; }
  .cn-header__inner { padding: var(--cn-logo-h) 16px; gap: 16px; }
  .cn-header .cn-header__cta { display: none; }
  .cn-header__actions { margin-left: auto; gap: 4px; }
  .cn-search__form, .cn-search__results { padding-left: 16px; padding-right: 16px; }
  .cn-search__form { flex-wrap: wrap; padding-top: 16px; }
  .cn-search__form .btn { display: none; }
  .cn-search__kbd { display: none; }
  .cn-search__field input { font-size: var(--fs-md); }
  .cn-search__path { display: none; }
  .cn-search { max-height: calc(100dvh - var(--cn-header-h, 73px)); overflow-y: auto; }
  .cn-header__toggle { display: inline-flex; }
  .cn-header__toggle .cn-icon-close { display: none; }
  .cn-header__toggle[aria-expanded="true"] .cn-icon-menu { display: none; }
  .cn-header__toggle[aria-expanded="true"] .cn-icon-close { display: inline-flex; }

  .cn-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--cn-header-h, 73px));
    max-height: calc(100dvh - var(--cn-header-h, 73px));
    overflow-y: auto;
    margin: 0;
    padding: 8px 16px 24px;
    background: var(--white-50);
    border-bottom: 1px solid var(--white-100);
    box-shadow: 0 16px 32px rgba(14, 14, 14, .24);
  }
  .cn-nav:not(.is-open) { display: none; }
  .cn-nav a:focus-visible, .cn-nav button:focus-visible { outline-color: var(--black-100); }
  .cn-nav__list { display: block; }
  .cn-nav__list > li { border-bottom: 1px solid var(--white-100); }
  .cn-nav__link {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    padding: 0 4px;
    font-size: var(--fs-sm);
    color: var(--black-100);
  }
  .cn-nav__link:hover { color: var(--black-100); }
  .cn-nav__link .cert-icon { margin-right: 0; }
  .cn-nav__link span::after { background: var(--black-100); }
  .cn-nav__link:hover span::after { transform: scaleX(0); }
  .cn-nav__link[aria-current="page"] span::after,
  .cn-nav__link[aria-expanded="true"] span::after { transform: scaleX(1); }
  .cn-nav__sub,
  .cn-nav__sub .cn-nav__sub,
  .cn-nav__list > li.is-right > .cn-nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 12px 12px;
    background: none;
    box-shadow: none;
  }
  .cn-nav__sub .cn-nav__sub {
    margin: 0 0 4px 12px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--black-100);
  }
  .cn-nav__sublink { min-height: 44px; font-size: var(--fs-sm); }
  .cn-nav__sublink:hover,
  .cn-nav__sublink[aria-expanded="true"] { background: rgba(97, 209, 250, .22); }
  .cn-nav__sublink[aria-current="page"] { background: rgba(97, 209, 250, .22); }
  .cn-nav__sublink .cert-icon,
  .cn-nav__sublink.is-flipped .cert-icon { transform: none; transition: transform .15s; }
  .cn-nav__sublink[aria-expanded="true"] .cert-icon { transform: rotate(90deg); }
  .cn-split { flex-wrap: wrap; }
  .cn-split > .cn-nav__link,
  .cn-split > .cn-nav__sublink { flex: 1; width: auto; }
  .cn-split > .cn-nav__sub { flex-basis: 100%; }
  /* Na mobitelu redak sadrži i otvoreni podizbornik, pa podloga ne ide na cijeli .cn-split */
  .cn-nav__sub .cn-split:hover,
  .cn-nav__sub .cn-split:has(> .cn-nav__toggle[aria-expanded="true"]),
  .cn-nav__sub .cn-split:has(> [aria-current="page"]) { background: none; }
  .cn-nav__list > .cn-split > .cn-nav__toggle { width: 48px; min-height: 48px; margin-right: 0; color: var(--black-100); }
  .cn-nav__sub .cn-nav__toggle { width: 44px; min-height: 44px; }
  .cn-nav__sub .cn-nav__toggle:hover,
  .cn-nav__sub .cn-nav__toggle[aria-expanded="true"] { background: none; }
  .cn-nav__sub .cn-nav__toggle .cert-icon,
  .cn-nav__toggle.is-flipped .cert-icon { transform: none; }
  .cn-nav__sub .cn-nav__toggle[aria-expanded="true"] .cert-icon { transform: rotate(90deg); }
  .cn-nav__cta-mobile { display: block; padding-top: 20px; border-bottom: 0 !important; }
  .cn-nav__cta-mobile .btn { width: 100%; justify-content: center; }
  body.cn-nav-open { overflow: hidden; }
}
@media (max-width: 480px) {
  .cn-lang a { min-width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-header *, .cn-header *::after { transition: none !important; }
}

/* Divi Customizer postavlja boju svih poveznica (`.et-db #et-boc .et-l a`) s dva ID-a u selektoru,
   što nadjačava naše klase na arhivskim stranicama. Ovdje vraćamo boje headera istom jačinom. */
.et-db #et-boc .et-l .cn-nav__link,
.et-db #et-boc .et-l .cn-nav__link:hover { color: var(--white-50); }
.et-db #et-boc .et-l .cn-nav__sublink,
.et-db #et-boc .et-l .cn-nav__sublink:hover { color: var(--black-100); }
.et-db #et-boc .et-l .cn-header .btn-blue { color: var(--black-100); }
.et-db #et-boc .et-l .cn-lang a { color: var(--white-100); }
.et-db #et-boc .et-l .cn-lang a[aria-current="true"] { color: var(--black-100); }
.et-db #et-boc .et-l .cn-search a { color: var(--black-100); }
.et-db #et-boc .et-l .cn-header__logo { color: inherit; }
@media (max-width: 1279px) {
  .et-db #et-boc .et-l .cn-nav__link,
  .et-db #et-boc .et-l .cn-nav__link:hover { color: var(--black-100); }
}

/* Divi Theme Builder omotač headera i footera. Divi ove stilove ispisuje tek na dnu
   stranice, pa bi header pri učitavanju na trenutak imao zadane razmake i užu širinu.
   Ponavljamo ih ovdje (učitava se u <head>); vrijednosti su iste kao u Theme Builderu. */
.et-l--header .et_pb_section_0_tb_header,
.et-l--footer .et_pb_section_0_tb_footer { background-color: #0e0e0e; padding-top: 0; padding-bottom: 0; z-index: 688; }
.et-l--header .et_pb_row_0_tb_header,
.et-l--footer .et_pb_row_0_tb_footer { width: 100%; max-width: 1440px; flex-wrap: nowrap; }
.et-l--header .et_pb_code_0_tb_header,
.et-l--footer .et_pb_code_0_tb_footer { margin-bottom: 0; }