.navbar, .topnav, nav { position: relative; z-index: 20; }

/* === Dropdown panel (dark slate, thick border) === */
.nav-item.has-dropdown { position: relative; --gap: 10px; padding-bottom: 0; }
.nav-item.has-dropdown .caret { font-size: .8rem; margin-left: .35rem; }

/* panel (hidden by default; shown via :hover / :focus-within / .is-open) */
.nav-item.has-dropdown > .nav-dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  align-items: stretch;
  justify-content: space-between;
  gap: 22px;
  width: 460px;
  background: #6E7081;
  border: 6px solid #5E6172;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 12px 28px rgba(28,37,64,.22);
  color: #fff;
  z-index: 50;
}

/* vertical list (left side) */
.nav-dropdown-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  flex: 1;
}

/* links: keep a single, consistent style across ALL dropdowns */
.nav-dropdown-link{
  display: block;
  padding: 1px 8px;
  border-radius: 0;
  font-weight: 700;                 /* consistent weight */
  color: #ffffff !important;
  text-decoration: none;
  text-transform: none;             /* no special casing anywhere */
  letter-spacing: .01em;
  line-height: 1;
  transition: color 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus{
  color: var(--brand-blue, #2c2c86) !important;
  background: none !important;
  outline: none;
  text-decoration: none;
}

/* right icon tile (sticks to far right) */
.nav-dropdown-illustration{
  flex: 0 0 104px;
  width: 104px; height: 104px;
  background: #ffffff;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-left: auto;
}
.nav-dropdown-illustration img{
  width: 78px; height: 78px; object-fit: contain;
}

/* small variant for single-item menus */
.nav-dropdown.nav-dropdown--sm{
  width: 400px !important;
  align-items: flex-start;
  justify-content: flex-start;
}

.nav-dropdown.nav-dropdown--sm .nav-dropdown-list{
  align-self: flex-start;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.nav-dropdown.nav-dropdown--sm .nav-dropdown-illustration{
  align-self: flex-start;
}

/* === Two-column list used in "Za Izdavače" === */
.nav-dropdown-list--two-col{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 40px;
  row-gap: 8px;
  width: 100%;
  flex: 1;
}
.nav-dropdown-list--two-col li:nth-child(1){ grid-column: 1; grid-row: 1; } /* ISBN */
.nav-dropdown-list--two-col li:nth-child(2){ grid-column: 1; grid-row: 2; } /* ISMN */
.nav-dropdown-list--two-col li:nth-child(3){ grid-column: 1; grid-row: 3; } /* ISSN */
.nav-dropdown-list--two-col li:nth-child(4){ grid-column: 2; grid-row: 1; } /* CIP */
.nav-dropdown-list--two-col li:nth-child(5){ grid-column: 2; grid-row: 2; } /* DOI */

/* === Show behavior (no inline styles needed) === */
.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown,
.nav-item.has-dropdown.is-open > .nav-dropdown{
  display: flex; /* default dropdowns = flex */
}

/* If the panel contains the two-column list, render the PANEL as a grid */
.nav-item.has-dropdown:hover > .nav-dropdown:has(.nav-dropdown-list--two-col),
.nav-item.has-dropdown:focus-within > .nav-dropdown:has(.nav-dropdown-list--two-col),
.nav-item.has-dropdown.is-open > .nav-dropdown:has(.nav-dropdown-list--two-col){
  display: grid;
  grid-template-columns: 1fr 104px;   /* left content | right image tile */
  grid-auto-rows: auto;
  align-items: start;
  gap: 14px 22px;
  width: 400px;                       /* a bit wider for two columns */
}

/* --- Exact layout for "Za Izdavače" --- */
/* 1) The top label ("OBAVEZNI PRIMJERAK") above both columns */
.nav-item.has-dropdown > .nav-dropdown:has(.nav-dropdown-list--two-col)
  > .nav-dropdown-list:first-of-type{
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 6px 0;
}
/* 2) The two-column list sits below the label */
.nav-item.has-dropdown > .nav-dropdown:has(.nav-dropdown-list--two-col)
  > .nav-dropdown-list--two-col{
  grid-column: 1;
  grid-row: 2;
}

/* 3) The illustration spans both rows on the right */
.nav-item.has-dropdown > .nav-dropdown:has(.nav-dropdown-list--two-col)
  > .nav-dropdown-illustration{
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* accessibility & stacking */
.nav-item.has-dropdown a{ position: relative; z-index: 1; }

/* mobile/touch support – open on first tap, follow link on second */
@media (hover: none){
  .nav-item.has-dropdown > a{ touch-action: manipulation; }
}

/* === Responsive (stack on narrow screens) === */
@media (max-width: 1024px){
  /* Mobile/Tablet: Dropdowns should be static (not absolute) within the slide-in menu */
  .nav-menu.is-open .nav-item.has-dropdown > .nav-dropdown{
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Accordion: Start collapsed */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 15px;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    display: block !important; /* Override desktop display rules */
  }

  /* Ensure small variant uses full width like others on mobile/tablet */
  .nav-menu.is-open .nav-dropdown.nav-dropdown--sm{
    width: 100% !important;
  }

  /* Expanded state for accordion */
  .nav-menu.is-open .nav-item.has-dropdown > .nav-dropdown.is-expanded {
    max-height: 1000px; /* Large enough for content, animation will handle smooth transition */
    opacity: 1;
    padding: 15px;
    margin-top: 0;
    margin-bottom: 0;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }

  /* Show expanded dropdowns (accordion style) */
  .nav-menu.is-open .nav-item.has-dropdown .nav-dropdown.is-expanded {
    display: block !important;
  }

  /* Hide collapsed dropdowns on mobile (accordion) */
  .nav-menu.is-open .nav-item.has-dropdown > .nav-dropdown:not(.is-expanded) {
    display: none !important;
  }

  /* Legacy hover/focus behavior disabled on mobile - use accordion only */
  /* Don't auto-open on hover/focus in mobile - only via accordion toggle */

  .nav-menu.is-open .nav-item.has-dropdown .nav-dropdown:has(.nav-dropdown-list--two-col){
    display: block;
    flex-direction: column;
    width: 100%;
  }

  .nav-menu.is-open .nav-item.has-dropdown .nav-dropdown:has(.nav-dropdown-list--two-col)
    > .nav-dropdown-illustration{
    grid-column: 1;
    grid-row: auto;
    margin-left: 0;
    margin-top: 10px;
  }

  .nav-menu.is-open .nav-dropdown-list--two-col{
    display: flex !important;
    flex-direction: column;
    row-gap: 6px;
  }

  /* Hide illustrations on mobile to save space */
  .nav-menu.is-open .nav-dropdown-illustration {
    display: none;
  }

  /* Adjust dropdown styling for mobile menu */
  .nav-menu.is-open .nav-dropdown.is-expanded {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px;
  }

  .nav-menu.is-open .nav-dropdown-link {
    color: #2c2c86 !important;
    padding: 8px 0;
  }

  .nav-menu.is-open .nav-dropdown-link:hover,
  .nav-menu.is-open .nav-dropdown-link:focus {
    color: #007bff !important;
  }

  /* Visual indicator for expanded state on trigger link */
  .nav-menu.is-open .nav-link.is-expanded {
    color: #007bff;
  }

  .nav-menu.is-open .nav-link.is-expanded .caret {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }

  .nav-menu.is-open .nav-link .caret {
    transition: transform 0.3s ease;
    display: inline-block;
  }

  /* Focus states for accessibility */
  .nav-menu.is-open .nav-link:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .nav-menu.is-open .nav-dropdown-link:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@media (max-width: 768px){
  /* Legacy support - keep for very small screens */
  .nav-item.has-dropdown > .nav-dropdown{
    left: 12px;
    right: 12px;
    width: auto;
  }

  /* Ensure small variant panel spans full width on very small screens */
  .nav-dropdown.nav-dropdown--sm{
    width: 100% !important;
  }

  .nav-item.has-dropdown:hover > .nav-dropdown,
  .nav-item.has-dropdown:focus-within > .nav-dropdown,
  .nav-item.has-dropdown.is-open > .nav-dropdown{
    display: block;
  }

  .nav-item.has-dropdown .nav-dropdown:has(.nav-dropdown-list--two-col){
    display: block;
    width: auto;
  }

  .nav-item.has-dropdown .nav-dropdown:has(.nav-dropdown-list--two-col)
    > .nav-dropdown-illustration{
    grid-column: 1;
    grid-row: auto;
    margin-left: 0;
  }

  .nav-dropdown-list--two-col{
    display: flex !important;
    flex-direction: column;
    row-gap: 6px;
  }
}