.navbar {
    padding: unset;
}
/* ==========================================================================
   MAIN NAVIGATION - STRUCTURE DOCUMENTATION
   ==========================================================================
   
   SUPERFISH MODULE SETTINGS (Drupal admin):
   ------------------------------------------
   - Menu type: Horizontal (single row)
   - Style: Default (not "None"!)
   - Arrows: Enabled
   - Drop shadows: Disabled (we use CSS)
   - sf-Touchscreen: Enabled at 872px breakpoint
   - sf-Smallscreen: Enabled at 872px breakpoint, Accordion mode
   - Depth classes: Enabled (.sf-depth-1, .sf-depth-2, etc.)
   
   SUPERFISH CSS OVERRIDES:
   ------------------------
   - .block-superfish { width: 100%; } → width: auto !important;
   - ul.sf-menu li { float: left; } → float: none; flex: 0 0 auto;
   
   RESPONSIVE BEHAVIOR:
   --------------------
   - > 1560px: Logo LEFT, Menu RIGHT (same line)
   - 872px - 1560px: Logo TOP, Menu BELOW (horizontal row)
   - ≤ 872px: Superfish accordion/hamburger menu
   
   ========================================================================== */

/* ==========================================================================
   PREVENT FOUC - Hide menu until Superfish initializes
   ========================================================================== */

ul.sf-menu ul {
  display: none;
  visibility: hidden;
}

ul.sf-menu.sf-js-enabled ul {
  display: none;
  visibility: visible;
}

ul.sf-menu.sf-js-enabled li:hover > ul,
ul.sf-menu.sf-js-enabled li.sfHover > ul {
  display: block;
}

/* ==========================================================================
   NAVBAR CONTAINER
   ========================================================================== */

.navbar#navbar-top {
  background: var(--surface, #ffffff);
  /* border-bottom: 1px solid var(--line, #e3e0d8);*/
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  
  /* Same centered layout as topbar */
  max-width: var(--wrap, min(1760px, 94vw));
  margin-inline: auto;
  padding: 0.8rem clamp(1rem, 2.2vw, 2.5rem);
  
  /* Flexbox - logo left, menu right, SAME LINE */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* ==========================================================================
   BRAND / LOGO - LEFT SIDE
   ========================================================================== */

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
}

.navbar-brand img {
  height: auto;
  width: auto;
  max-height: 55px;
  max-width: none;
  object-fit: contain;
}

/* ==========================================================================
   NAVIGATION MENU BLOCK - RIGHT SIDE
   Override superfish.css .block-superfish { width: 100%; }
   ========================================================================== */

#block-theme-vernooy-mainnavigation,
.navbar#navbar-top .block-superfish {
  width: auto !important;
  flex-shrink: 0;
  margin-left: auto;
}

#block-theme-vernooy-mainnavigation .content {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   SUPERFISH MENU - HORIZONTAL ROW (Desktop)
   ========================================================================== */

#superfish-main,
ul.sf-menu.sf-main,
ul.sf-menu.sf-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  
  /* Remove Superfish default styling */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Menu items */
ul.sf-menu.sf-main > li,
ul.sf-menu.sf-horizontal > li {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent !important;
  float: none !important;
  flex: 0 0 auto;
}

/* ==========================================================================
   MAIN NAV LINKS - STYLED
   ========================================================================== */

ul.sf-menu.sf-main > li > a,
ul.sf-menu.sf-main > li.menuparent > a,
ul.sf-menu.sf-main > li > a.sf-with-ul,
ul.sf-menu.sf-horizontal > li > a {
  display: inline-block;
  width: auto;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body, 'Inter', Arial, sans-serif);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink, #1b2531) !important;
  text-decoration: none;
  border-radius: var(--r-sm, 4px);
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  opacity: 1 !important;
  
  background: transparent !important;
  border: none !important;
}

/* Items with dropdowns - space for arrow */
ul.sf-menu.sf-main > li > a.sf-with-ul {
  padding-right: 1.8rem;
}

/* Hover state */
ul.sf-menu.sf-main > li > a:hover,
ul.sf-menu.sf-main > li.sfHover > a,
ul.sf-menu.sf-main > li.menuparent > a:hover {
  background: var(--rust-100, #f7e6da) !important;
  color: var(--rust-700, #9c4420) !important;
}

/* Active/current page */
ul.sf-menu.sf-main > li.active-trail > a,
ul.sf-menu.sf-main > li > a.is-active {
  color: var(--rust-600, #c1592b) !important;
}

/* ==========================================================================
   "VOORRAAD" BUTTON - ORANGE CTA STYLE
   ========================================================================== */

ul.sf-menu.sf-main > li > a[href="/containers"],
ul.sf-menu.sf-main > li > a[href="/voorraad"],
ul.sf-menu.sf-main > li > a[href*="voorraad"] {
  background: var(--rust-600, #c1592b) !important;
  color: #fff !important;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-sm, 4px);
  font-family: var(--font-display, 'Archivo', Arial, sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

ul.sf-menu.sf-main > li > a[href="/containers"]:hover,
ul.sf-menu.sf-main > li > a[href="/voorraad"]:hover,
ul.sf-menu.sf-main > li > a[href*="voorraad"]:hover {
  background: var(--rust-700, #9c4420) !important;
  color: #fff !important;
}

/* ==========================================================================
   DROPDOWN SUBMENUS (Desktop)
   ========================================================================== */

ul.sf-menu.sf-main ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line, #e3e0d8) !important;
  border-radius: var(--r-md, 8px) !important;
  box-shadow: var(--shadow-md, 0 10px 26px -10px rgba(22,32,43,.28)) !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: none !important;
  padding: 0.5rem 0 !important;
  list-style: none !important;
  margin: 0 !important;
  z-index: 200 !important;
  display: table !important;   /* This makes the ul expand to fit content */
}

ul.sf-menu.sf-main ul li {
  background: transparent !important;
  width: auto !important;
  min-width: 100% !important;
  float: none !important;
  display: block !important;
}

ul.sf-menu.sf-main ul li a {
  display: block !important;
  padding: 0.6rem 1.2rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--ink, #1b2531) !important;
  text-decoration: none !important;
  background: transparent !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  width: auto !important;
  transition: background 0.2s ease, color 0.2s ease;
}

ul.sf-menu.sf-main ul li a:hover {
  background: var(--rust-100, #f7e6da) !important;
  color: var(--rust-700, #9c4420) !important;
}

/* Cloned parent links in submenus */
ul.sf-menu.sf-main ul li.sf-clone-parent a {
  font-weight: 700 !important;
  border-bottom: 1px solid var(--line, #e3e0d8) !important;
  margin-bottom: 0.25rem !important;
  padding-bottom: 0.7rem !important;
}

/* Prevent dropdown from going off-screen to the right */
ul.sf-menu.sf-main > li:nth-last-child(-n+2) > ul {
  left: auto !important;
  right: 0 !important;
}




/* ==========================================================================
   HIDE EXTRA BLOCKS
   ========================================================================== */

.site-name-slogan,
#block-belblok,
#block-whatsappbutton {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE - DESKTOP ADJUSTMENTS
   ========================================================================== */

/* Large desktop */
@media (min-width: 1200px) {
  ul.sf-menu.sf-main > li > a {
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
  }
  
  ul.sf-menu.sf-main > li > a.sf-with-ul {
    padding-right: 2rem;
  }
}

/* ==========================================================================
   BREAKPOINT: 1560px - Menu wraps below logo
   ========================================================================== */

@media (max-width: 1560px) {
  .navbar#navbar-top {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  #block-theme-vernooy-mainnavigation,
  .navbar#navbar-top .block-superfish {
    width: 100% !important;
    margin-left: 0;
    order: 10;
  }
  
  #superfish-main,
  ul.sf-menu.sf-main {
    justify-content: flex-start;
  }
}

/* Medium screens */
@media (max-width: 1100px) {
  .navbar#navbar-top {
    gap: 0.6rem;
  }
  
  ul.sf-menu.sf-main > li > a {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
  }
  
  ul.sf-menu.sf-main > li > a.sf-with-ul {
    padding-right: 1.6rem;
  }
}

/* Smaller screens */
@media (max-width: 950px) {
  .navbar-brand img {
    max-height: 48px;
  }
  
  ul.sf-menu.sf-main > li > a {
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
  }
  
  ul.sf-menu.sf-main > li > a.sf-with-ul {
    padding-right: 1.4rem;
  }
}

/* ==========================================================================
   BREAKPOINT: 872px - SUPERFISH ACCORDION/HAMBURGER MODE
   ========================================================================== */

@media (max-width: 872px) {
  
  /* Navbar allows wrapping */
  .navbar#navbar-top {
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-block: 0.6rem;
  }
  
  .navbar-brand {
    flex: 1 0 auto;
  }
  
  .navbar-brand img {
    max-height: 44px;
  }
  
  /* Menu block - full width, stacked layout */
  #block-theme-vernooy-mainnavigation,
  .navbar#navbar-top .block-superfish {
    width: 100% !important;
    margin-left: 0;
    order: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  
  #block-theme-vernooy-mainnavigation .content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  /* Hamburger button - on TOP */
  .sf-accordion-toggle {
    order: -1;
    width: 100% !important;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
  }
  
  .sf-accordion-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--steel-800, #212e3d);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--r-sm, 4px);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    gap: 0.5rem;
  }
  
  .sf-accordion-toggle a:hover {
    background: var(--steel-900, #16202b);
  }
  
  /* Hide the horizontal menu on mobile */
  ul.sf-menu.sf-main:not(.sf-accordion) {
    display: none !important;
  }
  
  /* ==========================================================================
     ACCORDION MENU CONTAINER
     ========================================================================== */
  
  ul.sf-menu.sf-accordion {
    display: none;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--line, #e3e0d8);
    border-radius: var(--r-md, 8px);
    padding: 0;
    margin: 0;
    list-style: none;
    float: none !important;
    position: relative !important;
  }
  
  ul.sf-menu.sf-accordion.sf-expanded {
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* ==========================================================================
     ALL MENU ITEMS - SINGLE COLUMN
     ========================================================================== */
  
  ul.sf-menu.sf-accordion > li {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    border-bottom: 1px solid var(--line, #e3e0d8);
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  
  ul.sf-menu.sf-accordion > li:last-child {
    border-bottom: none;
  }
  
  /* Override sf-hidden in accordion */
  ul.sf-menu.sf-accordion > li.sf-hidden {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    clip: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ==========================================================================
     MENU LINKS
     ========================================================================== */
  
  ul.sf-menu.sf-accordion li a,
  ul.sf-menu.sf-accordion li span.nolink {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left !important;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink, #1b2531) !important;
    background: transparent !important;
    text-decoration: none;
  }
  
  ul.sf-menu.sf-accordion li a:hover {
    background: var(--rust-100, #f7e6da) !important;
    color: var(--rust-700, #9c4420) !important;
  }
  
  /* Active item */
  ul.sf-menu.sf-accordion li.active-trail > a {
    color: var(--rust-600, #c1592b) !important;
  }
  
  /* VOORRAAD button in accordion */
  ul.sf-menu.sf-accordion li > a[href*="voorraad"] {
    background: var(--rust-600, #c1592b) !important;
    color: #fff !important;
    font-weight: 700;
  }
  
  ul.sf-menu.sf-accordion li > a[href*="voorraad"]:hover {
    background: var(--rust-700, #9c4420) !important;
  }
  

  
  /* ==========================================================================
     FIX: Hide overlapping submenus - only show active submenu
     ========================================================================== */
  
  /* When ANY li is expanded, hide submenus of siblings that are NOT expanded */
  ul.sf-menu.sf-accordion > li:not(.sf-expanded):not(.sfHover) > ul {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Ensure expanded submenu shows properly */
  ul.sf-menu.sf-accordion > li.sf-expanded > ul,
  ul.sf-menu.sf-accordion > li.sfHover > ul {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }
  
  /* ==========================================================================
     SUBMENUS - STATIC POSITION, NO OVERLAP
     ========================================================================== */
  
  ul.sf-menu.sf-accordion ul,
  ul.sf-menu.sf-accordion li > ul,
  ul.sf-menu.sf-accordion li ul {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--bg, #f2f1ec) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none;
    float: none !important;
    clear: both !important;
  }
  
  /* Show submenu ONLY when parent is expanded */
  ul.sf-menu.sf-accordion li.sf-expanded > ul {
    display: block !important;
    position: static !important;
  }
  
  /* Override Superfish hover behavior in accordion */
  ul.sf-menu.sf-accordion li:hover > ul,
  ul.sf-menu.sf-accordion li.sfHover > ul {
    position: static !important;
    top: auto !important;
    left: auto !important;
  }
  
  /* ==========================================================================
     SUBMENU ITEMS - INDENTED
     ========================================================================== */
  
  ul.sf-menu.sf-accordion ul li {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    visibility: visible !important;
    border-bottom: 1px solid var(--line, #e3e0d8);
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  
  ul.sf-menu.sf-accordion ul li:last-child {
    border-bottom: none;
  }
  
  ul.sf-menu.sf-accordion ul li a {
    padding-left: 2rem !important;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--ink-soft, #57626f) !important;
  }
  
  ul.sf-menu.sf-accordion ul li a:hover {
    background: var(--rust-100, #f7e6da) !important;
    color: var(--rust-700, #9c4420) !important;
  }
  
  /* Third level - more indent */
  ul.sf-menu.sf-accordion ul ul li a {
    padding-left: 3rem !important;
    font-size: 0.8rem;
  }
    /* ==========================================================================
     FIX: Hide menu completely when accordion is closed
     ========================================================================== */
  
  /* When accordion is not expanded, hide everything */
  ul.sf-menu.sf-accordion:not(.sf-expanded) {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Also hide any lingering submenus when parent menu is closed */
  ul.sf-menu.sf-accordion:not(.sf-expanded) ul,
  ul.sf-menu.sf-accordion:not(.sf-expanded) li ul {
    display: none !important;
    visibility: hidden !important;
  }

}

/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .navbar#navbar-top {
    padding: 0.5rem clamp(0.75rem, 2vw, 1rem);
    gap: 0.5rem;
  }
  
  .navbar-brand img {
    max-height: 38px;
  }
}