/* BuddySocial v11.68 — hoofdmenu end-to-end polish
   Doel: geen afgeknipte zoekknop, alle iconen zichtbaar, betrouwbare logout op mobiel/PWA.
   Deze laag wordt bewust als laatste menu-CSS geladen. */

/* Gezonde basis voor alle menu-breedtes. */
.retro-nav,
.retro-nav .retro-navin,
.retro-nav #main-nav-links,
.retro-nav .nav-primary,
.retro-nav .nav-utilities,
.retro-nav .retro-search{box-sizing:border-box;}
.retro-nav .retro-navin,
.retro-nav #main-nav-links,
.retro-nav .nav-primary,
.retro-nav .nav-utilities{min-width:0;}
.retro-nav .menu-icon-buddy,
.mobilebar .mobilebar-icon,
.guest-mobilebar .mobilebar-icon{
  visibility:visible !important;
  opacity:1 !important;
  flex:none !important;
}

/* ===================== DESKTOP ===================== */
@media (min-width:1101px){
  .retro-nav{overflow:visible !important;}
  .retro-nav .retro-navin{
    width:100% !important;
    max-width:none !important;
    padding-left:clamp(8px,1.2vw,20px) !important;
    padding-right:clamp(8px,1.2vw,20px) !important;
    overflow:visible !important;
  }
  .retro-nav #main-nav-links{
    display:flex !important;
    align-items:stretch !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  .retro-nav .nav-primary{
    display:flex !important;
    align-items:stretch !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }
  .retro-nav .nav-primary > a,
  .retro-nav .nav-more > summary{
    min-width:0 !important;
    padding-left:clamp(7px,.65vw,13px) !important;
    padding-right:clamp(7px,.65vw,13px) !important;
    white-space:nowrap !important;
  }
  .retro-nav .nav-primary .menu-icon-buddy{
    width:26px !important;
    min-width:26px !important;
    height:26px !important;
    margin-right:4px !important;
  }
  .retro-nav .nav-utilities{
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-end !important;
    gap:3px !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    margin-left:auto !important;
    overflow:visible !important;
  }
  .retro-nav .nav-status-control{
    flex:0 0 auto !important;
    min-width:96px !important;
    max-width:112px !important;
  }
  .retro-nav .menu-status-select{
    width:100% !important;
    min-width:0 !important;
  }
  .retro-nav .nav-utilities > .utility-link,
  .retro-nav .notification-nav-wrap > .utility-link{
    flex:0 0 auto !important;
    min-width:0 !important;
    padding-left:7px !important;
    padding-right:7px !important;
    white-space:nowrap !important;
  }
  .retro-nav .notification-nav-wrap{
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  .retro-nav .nav-sound-toggle{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    padding:0 !important;
  }
  /* Accountacties horen op desktop in de bovenste account-hub; niet dubbel in de hoofdbalk. */
  .retro-nav .mobile-menu-account-actions{display:none !important;}

  /* Zoekveld mag krimpen, knop nooit. */
  .retro-nav .retro-search{
    display:grid !important;
    grid-template-columns:minmax(88px,1fr) max-content !important;
    align-items:center !important;
    gap:4px !important;
    flex:0 1 clamp(165px,15vw,255px) !important;
    width:clamp(165px,15vw,255px) !important;
    min-width:165px !important;
    max-width:255px !important;
    margin:0 0 0 4px !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .retro-nav .retro-search input{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
  .retro-nav .retro-search button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:none !important;
    width:auto !important;
    min-width:58px !important;
    max-width:none !important;
    padding-left:8px !important;
    padding-right:8px !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
  .retro-nav .mobile-nav-section-title{display:none !important;}
}

/* Tussenbreedtes: behoud alle functies; maak alleen tekst compacter. */
@media (min-width:1101px) and (max-width:1450px){
  .retro-nav .nav-primary > a,
  .retro-nav .nav-more > summary{font-size:12px !important;padding-left:6px !important;padding-right:6px !important;}
  .retro-nav .nav-primary .menu-icon-buddy{width:23px !important;min-width:23px !important;height:23px !important;font-size:12px !important;}
  .retro-nav .nav-utilities > .utility-link,
  .retro-nav .notification-nav-wrap > .utility-link{font-size:12px !important;padding-left:5px !important;padding-right:5px !important;}
  .retro-nav .retro-search{flex-basis:180px !important;width:180px !important;min-width:150px !important;}
  .retro-nav .retro-search button{min-width:52px !important;font-size:12px !important;}
}

/* ===================== MOBILE / TABLET / PWA ===================== */
@media (max-width:1100px){
  .retro-nav,
  .retro-nav .retro-navin{width:100% !important;max-width:100% !important;overflow:visible !important;}
  .retro-nav #main-nav-links{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
  .retro-nav #main-nav-links .nav-primary,
  .retro-nav #main-nav-links .nav-utilities{
    width:100% !important;
    min-width:0 !important;
  }
  .retro-nav #main-nav-links .nav-primary > a,
  .retro-nav #main-nav-links .nav-utilities > a.utility-link,
  .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link,
  .retro-nav #main-nav-links .nav-more > summary,
  .retro-nav #main-nav-links .nav-more-menu > a,
  .retro-nav #main-nav-links .mobile-menu-account-actions > a{
    min-width:0 !important;
    overflow:visible !important;
  }
  .retro-nav #main-nav-links .menu-icon-buddy{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 26px !important;
    width:26px !important;
    min-width:26px !important;
    height:26px !important;
    margin:0 5px 0 0 !important;
  }

  /* Zoekveld en knop altijd volledig binnen het menu. */
  .retro-nav #main-nav-links .retro-search{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:8px 0 0 !important;
    padding:7px !important;
    overflow:visible !important;
  }
  .retro-nav #main-nav-links .retro-search input{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .retro-nav #main-nav-links .retro-search button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:72px !important;
    max-width:none !important;
    padding-left:10px !important;
    padding-right:10px !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  /* Pimp / instellingen / uitloggen: altijd aanwezig en aanklikbaar. */
  .retro-nav #main-nav-links .mobile-menu-account-actions{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .retro-nav #main-nav-links .mobile-menu-account-actions > a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    visibility:visible !important;
    opacity:1 !important;
    min-width:0 !important;
  }
  .retro-nav #main-nav-links .mobile-menu-account-actions > a[href*="page=logout"]{
    display:flex !important;
  }

  /* Onderste mobiele balk: exact 5 gelijke vakken, uitloggen kan niet buiten beeld vallen. */
  .mobilebar{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100vw !important;
    left:0 !important;
    right:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    z-index:9996 !important;
  }
  .mobilebar > a,
  .mobilebar > a.mobile-logout{
    display:flex !important;
    min-width:0 !important;
    width:auto !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
  }
  .mobilebar > a .mobilebar-icon{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .mobilebar > a .mobilebar-label{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
  }
}

@media (max-width:520px){
  .retro-nav #main-nav-links .mobile-menu-account-actions{
    grid-template-columns:1fr 1fr !important;
  }
  .retro-nav #main-nav-links .mobile-menu-account-actions > a[href*="page=logout"]{
    grid-column:1/-1 !important;
    justify-content:center !important;
  }
  .retro-nav #main-nav-links .retro-search{gap:5px !important;padding:6px !important;}
  .retro-nav #main-nav-links .retro-search button{min-width:66px !important;padding-left:8px !important;padding-right:8px !important;font-size:12px !important;}
  .mobilebar > a{padding-left:1px !important;padding-right:1px !important;}
  .mobilebar .mobilebar-icon{width:24px !important;min-width:24px !important;height:24px !important;font-size:18px !important;}
  .mobilebar .mobilebar-label{font-size:10px !important;}
}

@media (max-width:360px){
  .retro-nav #main-nav-links .retro-search{
    grid-template-columns:1fr !important;
  }
  .retro-nav #main-nav-links .retro-search button{
    width:100% !important;
    min-width:0 !important;
  }
}