/* NAPOMENA: reset i body pravila su globalna (cijeli site ovisi o njima) */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --primary-blue: #003d7a;
    --dark-blue: #003d7a;
    --light-gray: #f5f5f5;
    --text-dark: #333;
    --font-small: 12px;
    --font-base: 16px;
    --font-large: 20px;
    --font-xlarge: 28px;
    --font-xxlarge: 40px;

    /* Mobilna navigacija */
    --nav-surface: #f2f6fb;
    --nav-border: #e3e9f1;
    --nav-muted: #5b6676;
    --nav-backdrop: rgba(0, 22, 46, 0.55);
    --nav-tap: 52px;
    --nav-radius: 12px;
    --nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --nav-speed: 0.35s;

    /* Otvoreni mobilni izbornik mora biti iznad SVEGA (banneri, Elementor sekcije,
       sticky elementi). Ako ga nešto i dalje prekriva, u devtoolsu pogledaj z-index
       tog elementa i podigni ovu vrijednost iznad njega. */
    --nav-z-overlay: 100000;
  }

  body {
    font-family: "Oswald", sans-serif;
    font-size: var(--font-base);
    line-height: 1.6;
  }

  body.font-small {
    --font-base: 14px;
    --font-large: 16px;
    --font-xlarge: 18px;
  }

  body.font-large {
    --font-base: 18px;
    --font-large: 20px;
    --font-xlarge: 22px;
  }

  body.font-xlarge {
    --font-base: 20px;
    --font-large: 22px;
    --font-xlarge: 24px;
  }


  /* ================= Zaštita od Hello Elementor reset.css =================
     reset.css (parent tema) stilizira SVAKI <button> na stranici: roza (#c36) okvir,
     padding .5rem 1rem, nowrap, centriran tekst, a na :hover/:focus roza pozadinu.
     Svakom <a> na :hover daje boju #336.
     Najjači selektor mu je [type=button]:hover → specifičnost (0,2,0).

     Pravilo za navigaciju:
       1) ovdje neutraliziramo reset samo unutar .navbar, .sub-nav i .mobile-nav
       2) svaki gumb u nav.css pišemo kao ".navbar button.klasa" (0,2,1) ili jače
          (u mobilnom izborniku ".mobile-nav button.klasa" – on je premješten u <body>),
          a stanja (:hover, [aria-selected]...) kao ".navbar button.klasa:hover" (0,3,1)
       3) svaki link koji ima boju mora imati i :hover s bojom (inače dobije #336)  */

  :is(.navbar, .sub-nav, .mobile-nav) button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;
    white-space: normal;
    user-select: auto;
    -webkit-user-select: auto;
    transition: none;
    cursor: pointer;
  }

  /* reset.css :hover/:focus mijenja samo ova svojstva – vraćamo ih */
  :is(.navbar, .sub-nav, .mobile-nav) button:is(:hover, :focus, :active) {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
  }

  /* Jedinstveni prsten fokusa umjesto crno-bijelog iz reset.css */
  :is(.navbar, .sub-nav, .mobile-nav) :is(a, button):focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
    box-shadow: none;
  }


  /* ================= Navbar ================= */
  .navbar {
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 5%;
    transition: background 0.3s ease-in;
  }

  .navbar:hover {
    background: #fff;
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    height: 100px;
  }

  .logo-container {
    width: 220px;
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .logo {
    font-size: var(--font-xlarge);
    font-weight: bold;
    color: var(--primary-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .logo img {
    width: 70px;
    height: auto;
  }

  .nav-links {
    font-family: "Oswald", sans-serif !important;
    display: flex;
    gap: 50px;
    list-style: none;
    height: 100%;
  }

  .nav-links li {
    position: relative;
  }

  .nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: var(--font-large);
    padding: 35px 0;
    display: block;
    transition: color 0.3s;
    text-transform: uppercase;
    font-weight: bold;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: var(--primary-blue);
  }

  .nav-links a::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 5px;
    background: var(--primary-blue);
    transition: width 0.4s ease;
  }

  .nav-links a:hover::before,
  .nav-links a.active::before {
    width: 100%;
  }

  .nav-right {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 220px;
    gap: 20px;
    font-family: 'Oswald', sans-serif !important;
  }

  .language-selector {
    position: relative;
  }

  .language-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .accessibility-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }

  .accessibility-btn:hover {
    background: var(--dark-blue);
  }

  .weather {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background-color: var(--primary-blue);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    color: #fff;
  }

  /* Hamburger – 44px touch target */
  .navbar button.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
  }

  .hamburger span {
    width: 26px;
    height: 3px;
    background: var(--primary-blue);
    border-radius: 3px;
  }

  .navbar button.hamburger:hover,
  .navbar button.hamburger:focus-visible {
    background: var(--nav-surface);
  }


  /* ================= Mobilna navigacija ================= */

  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: var(--nav-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nav-speed) ease, visibility 0s linear var(--nav-speed);
    z-index: var(--nav-z-overlay);
  }

  .mobile-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--nav-speed) ease, visibility 0s;
  }

  .mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 440px);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 22, 46, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--nav-speed) var(--nav-ease), visibility 0s linear var(--nav-speed);
    z-index: calc(var(--nav-z-overlay) + 1);
    font-family: "Oswald", sans-serif;
    color: var(--text-dark);
  }

  .mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--nav-speed) var(--nav-ease), visibility 0s;
  }

  .mobile-nav:focus {
    outline: none;
  }

  /* Header: logo + zatvori */
  .mobile-nav__header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid var(--nav-border);
  }

  .mobile-nav__logo img {
    display: block;
    width: 50px;
    height: auto;
  }

  .mobile-nav button.mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -6px;
    border: 0;
    border-radius: 50%;
    background: var(--nav-surface);
    color: var(--primary-blue);
    cursor: pointer;
    transition: background 0.2s;
  }

  .mobile-nav button.mobile-nav__close:hover {
    background: var(--nav-border);
  }

  /* Tabovi sekcija – segmentirana kontrola */
  .mobile-nav__tabs {
    flex: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 16px 16px 4px;
    padding: 4px;
    background: var(--nav-surface);
    border-radius: 999px;
  }

  .mobile-nav button.mnav-tab {
    min-height: 44px;
    text-align: center;
    padding: 6px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--nav-muted);
    font: inherit;
    font-size: calc(var(--font-base) - 1px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

  .mobile-nav button.mnav-tab:hover {
    color: var(--primary-blue);
  }

  .mobile-nav button.mnav-tab[aria-selected="true"] {
    background: var(--primary-blue);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 61, 122, 0.3);
  }

  /* Tijelo – jedini dio koji se scrolla */
  .mobile-nav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 24px;
  }

  .mnav-label {
    margin: 16px 0 10px;
    font-size: var(--font-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-muted);
  }

  /* Brze poveznice – kartice 2×2 */
  .mnav-quick {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }

  .mnav-quick__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 88px;
    padding: 14px;
    border-radius: var(--nav-radius);
    background: var(--nav-surface);
    color: var(--primary-blue);
    text-decoration: none;
    font-size: var(--font-base);
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.2s, transform 0.15s;
  }

  .mnav-quick__item i {
    font-size: 22px;
  }

  .mnav-quick__item:hover {
    background: var(--nav-border);
    color: var(--primary-blue);
  }

  .mnav-quick__item:active {
    transform: scale(0.97);
  }

  .mnav-quick__item[aria-current="page"],
  .mnav-quick__item[aria-current="page"]:hover {
    background: var(--primary-blue);
    color: #fff;
  }

  /* Glavna lista */
  .mnav-list {
    list-style: none;
  }

  .mnav-item {
    border-bottom: 1px solid var(--nav-border);
  }

  /* .mnav-row je i <a> i <button> – button varijanta treba (0,2,1) */
  .mobile-nav .mnav-row,
  .mobile-nav button.mnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--nav-tap);
    padding: 10px 2px;
    border: 0;
    background: none;
    color: var(--text-dark);
    font: inherit;
    font-size: calc(var(--font-base) + 2px);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
  }

  .mobile-nav .mnav-row:hover,
  .mobile-nav .mnav-row[aria-current="page"],
  .mobile-nav .mnav-item.is-open > .mnav-row {
    color: var(--primary-blue);
  }

  .mobile-nav .mnav-row[aria-current="page"] {
    font-weight: 700;
  }

  .mnav-chevron {
    flex: none;
    color: var(--nav-muted);
    transition: transform var(--nav-speed) var(--nav-ease);
  }

  .mnav-item.is-open .mnav-toggle .mnav-chevron {
    transform: rotate(180deg);
    color: var(--primary-blue);
  }

  /* Accordion – glatka animacija visine */
  .mnav-sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--nav-speed) var(--nav-ease), visibility 0s linear var(--nav-speed);
  }

  .mnav-item.is-open > .mnav-sub {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--nav-speed) var(--nav-ease), visibility 0s;
  }

  .mnav-sub__inner {
    min-height: 0;
    overflow: hidden;
    list-style: none;
  }

  .mnav-sub__inner > li:last-child {
    padding-bottom: 10px;
  }

  .mnav-sub__link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 8px 12px 8px 14px;
    border-left: 3px solid var(--nav-border);
    color: var(--nav-muted);
    font-size: var(--font-base);
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
  }

  .mnav-sub__link:hover {
    color: var(--primary-blue);
    background: var(--nav-surface);
  }

  .mnav-sub__link[aria-current="page"] {
    color: var(--primary-blue);
    font-weight: 700;
    border-left-color: var(--primary-blue);
    background: var(--nav-surface);
  }

  /* Footer – promjena jezika */
  .mobile-nav__footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--nav-border);
    background: #fff;
  }

  .mobile-nav__footer .lang-switch {
    gap: 10px;
    min-height: 44px;
    padding: 6px 16px 6px 8px;
    border: 1px solid var(--nav-border);
    border-radius: 999px;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
  }

  .mobile-nav__footer .lang-switch:hover {
    background: var(--nav-surface);
    color: var(--primary-blue);
  }

  .mobile-nav__footer .lang-switch img {
    width: 28px !important;
    height: auto;
    border-radius: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .mobile-nav.is-open,
    .mobile-nav-backdrop,
    .mobile-nav-backdrop.is-open,
    .mnav-sub,
    .mnav-item.is-open > .mnav-sub,
    .mnav-chevron {
      transition: none;
    }
  }


  /* ================= Sub Navigation (desktop) ================= */
  .sub-nav {
    font-family: "Oswald", sans-serif !important;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 0 5%;
    display: none;
    background: #eee;
  }

  .sub-nav.active {
    display: block;
  }

  .sub-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 10px 0;
    flex-wrap: wrap;
  }

  .sub-nav-group {
    width: fit-content;
  }

  /* .sub-nav-title je i <a> i <button> – button varijanta treba (0,2,1) */
  .sub-nav .sub-nav-title,
  .sub-nav button.sub-nav-title {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-weight: 700;
    color: var(--dark-blue);
    font-size: var(--font-base);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s;
    padding: 8px 0;
    text-decoration: none;
  }

  .sub-nav .sub-nav-title:hover,
  .sub-nav .sub-nav-title.expanded {
    color: var(--primary-blue);
  }

  .sub-nav-title .arrow {
    transition: transform 0.3s ease;
    font-size: var(--font-small);
  }

  .sub-nav-title.expanded .arrow {
    transform: rotate(180deg);
  }
  .sub-nav-title:hover{
    background-color: #eee!important;
  }

  .sub-nav-list {
    list-style: none;
    padding-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .sub-nav-list li {
    margin-bottom: 8px;
    width: 100px;
  }

  .sub-nav-list a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: var(--font-base);
    transition: all 0.3s;
    display: block;
    padding: 5px 0;
  }

  .sub-nav-list a:hover,
  .sub-nav-list a[aria-current="page"] {
    color: var(--primary-blue);
  }

  /* Font Size Modal */
  .font-modal {
    position: fixed;
    top: 80px;
    right: 20px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    display: none;
    z-index: 1001;
    min-width: 200px;
  }

  .font-modal.active {
    display: block;
  }

  .font-modal h3 {
    margin-bottom: 15px;
    color: var(--text-dark);
  }

  .font-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .navbar button.font-option-btn {
    background: var(--light-gray);
    border: 2px solid transparent;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
  }

  .navbar button.font-option-btn:hover,
  .navbar button.font-option-btn.active {
    border-color: var(--primary-blue);
    background: white;
    color: var(--primary-blue);
  }


  /* ================= Responsive ================= */

  @media screen and (min-width: 969px) {
    .mobile-nav,
    .mobile-nav-backdrop {
      display: none;
    }

    .sub-nav-container {
      max-width: 1140px;
      padding: 0;
      position: relative;
    }

    .sub-nav-group {
      position: relative;
    }

    .sub-nav .sub-nav-title,
    .sub-nav button.sub-nav-title {
      display: flex;
      padding: 15px 0;
    }

    /* Dropdown koji "lebdi" ispod naslova */
    .sub-nav-list {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 240px;
      max-height: none;
      overflow: visible;
      background: white;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      padding: 10px 15px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      z-index: 1010;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
      pointer-events: none;
    }

    .sub-nav-list.expanded {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
      pointer-events: auto;
    }

    .sub-nav-list li {
      width: 100%;
      margin-bottom: 0;
    }

    .sub-nav-list a {
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }

    .sub-nav-list li:last-child a {
      border-bottom: none;
    }
  }

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

    .nav-links,
    .sub-nav {
      display: none !important;
    }

    .logo-container,
    .nav-right {
      width: fit-content;
    }

    .navbar button.hamburger {
      display: flex;
    }
  }

  @media (max-width: 576px) {
    .nav-container {
      height: 70px;
    }

    .weather,
    .language-btn {
      padding: 2px 5px;
      font-size: var(--font-small);
    }

    .nav-right {
      gap: 10px;
    }

    .logo img {
      width: 50px;
      height: auto;
    }
  }

  @media (max-width: 360px) {
    .mnav-quick__item {
      min-height: 76px;
      padding: 12px;
    }

    .mobile-nav button.mnav-tab {
      font-size: calc(var(--font-base) - 2px);
      padding: 6px 4px;
    }
  }