/* ==========================================================
   BuddySocial v10.40 - MOBILE MENU & TABLET BEAUTIFY
   Doel: mobiele/tablet navigatiekleur herstellen en mooier maken.
   Gericht op menu-drawer; desktop verder met rust laten.
   ========================================================== */

@media (max-width: 1100px){
  .retro-nav{
    position:relative;
    z-index:45;
  }

  .retro-navin{
    padding:8px 10px 10px;
    background:transparent;
  }

  .nav-toggle{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 18px;
    border:1px solid #8fb4d1;
    border-radius:16px;
    background:linear-gradient(180deg,#5fa5df 0%, #377ab6 55%, #26639f 100%);
    color:#ffffff !important;
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(35,87,132,.18), inset 0 1px 0 rgba(255,255,255,.28);
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible{
    background:linear-gradient(180deg,#68afe7 0%, #3b81bc 55%, #286aa8 100%);
    outline:none;
  }

  .nav-toggle::after{
    content:'▾';
    font-size:18px;
    line-height:1;
    margin-left:auto;
    opacity:.96;
  }

  .nav-toggle[aria-expanded="true"]::after{
    content:'▴';
  }

  .main-nav-links{
    margin-top:12px;
    padding:12px;
    border:1px solid #b6d2e5;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(248,252,255,.99),rgba(240,247,252,.98));
    box-shadow:0 16px 36px rgba(32,78,114,.15);
    color:#214866;
    max-height:calc(100vh - 185px);
    overflow:auto;
    overscroll-behavior:contain;
  }

  .main-nav-links a,
  .main-nav-links summary,
  .main-nav-links label,
  .main-nav-links button,
  .main-nav-links .mobile-nav-section-title,
  .main-nav-links .notification-dropdown-head b,
  .main-nav-links .notification-dropdown-head a,
  .main-nav-links .notification-dropdown-item a,
  .main-nav-links .notification-dropdown-empty,
  .main-nav-links .notification-dropdown-footer,
  .main-nav-links .retro-search input,
  .main-nav-links .retro-search button,
  .main-nav-links .nav-status-control span{
    color:#214866 !important;
  }

  .nav-primary,
  .nav-utilities{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 14px;
  }

  .mobile-nav-section-title{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border:1px solid #c5dbea;
    border-radius:14px;
    background:linear-gradient(180deg,#f7fbff 0%, #ebf3f9 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    color:#2d648d !important;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .nav-primary > a,
  .nav-utilities > a.utility-link,
  .mobile-menu-account-actions a,
  .nav-more > summary,
  .nav-status-control{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:54px;
    padding:0 14px;
    border:1px solid #c6dceb;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff 0%, #f4f9fd 100%);
    text-decoration:none;
    font-weight:700;
    box-sizing:border-box;
    box-shadow:0 3px 9px rgba(63,113,154,.06);
  }

  .nav-primary > a:hover,
  .nav-utilities > a.utility-link:hover,
  .mobile-menu-account-actions a:hover,
  .nav-more > summary:hover,
  .nav-primary > a.active,
  .nav-utilities > a.utility-link.active,
  .mobile-menu-account-actions a.active,
  .nav-more.active > summary{
    border-color:#94c1e0;
    background:linear-gradient(180deg,#fffdf5 0%, #fef3d5 100%);
    box-shadow:0 4px 12px rgba(243,154,19,.12);
  }

  .nav-badge{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#f39a13;
    color:#fff !important;
    font-size:11px;
    font-weight:800;
    box-shadow:0 3px 7px rgba(243,154,19,.32);
  }

  .nav-more{
    grid-column:1/-1;
  }

  .nav-more > summary{
    list-style:none;
    cursor:pointer;
    justify-content:space-between;
  }
  .nav-more > summary::-webkit-details-marker{display:none;}

  .nav-more-menu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
    padding:0;
  }

  .nav-more-menu a{
    display:flex;
    align-items:center;
    min-height:50px;
    padding:0 14px;
    border:1px solid #c6dceb;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff 0%, #f4f9fd 100%);
    text-decoration:none;
    font-weight:700;
    box-shadow:0 3px 9px rgba(63,113,154,.06);
  }

  .nav-more-menu a:hover,
  .nav-more-menu a.active{
    border-color:#94c1e0;
    background:linear-gradient(180deg,#fffdf5 0%, #fef3d5 100%);
  }

  .nav-status-control{
    grid-column:1/-1;
    padding:10px 12px;
    align-items:center;
  }

  .nav-status-control > span{
    flex:0 0 auto;
    font-size:17px;
    color:#2eb85f !important;
  }

  .menu-status-select{
    appearance:none;
    width:100%;
    min-height:40px;
    padding:0 40px 0 12px;
    border:1px solid #bdd4e3;
    border-radius:12px;
    background:linear-gradient(180deg,#ffffff,#f6fbfe);
    color:#1f4664 !important;
    font-size:14px;
    font-weight:700;
  }

  .notification-nav-wrap{
    grid-column:1/-1;
    position:relative;
  }

  .notification-nav-wrap > .utility-link{
    width:100%;
  }

  .notification-dropdown{
    position:static !important;
    width:100% !important;
    margin-top:10px;
    border:1px solid #c6dceb;
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(34,82,121,.12);
  }

  .notification-dropdown-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border-bottom:1px solid #e4eef5;
    background:linear-gradient(180deg,#f7fbff,#eef6fb);
  }

  .notification-dropdown-list{
    max-height:260px;
    overflow:auto;
  }

  .notification-dropdown-item,
  .notification-dropdown-empty{
    padding:12px 14px;
    border-bottom:1px solid #edf4f8;
  }

  .notification-dropdown-footer{
    display:block;
    padding:12px 14px;
    font-weight:800;
    text-decoration:none;
    background:#fbfdff;
  }

  .nav-sound-toggle{
    grid-column:1/-1;
    min-height:48px;
    border:1px solid #c6dceb;
    border-radius:14px;
    background:linear-gradient(180deg,#fffdf5 0%, #fef3d5 100%);
    color:#2a5578;
    font-size:18px;
    box-shadow:0 3px 9px rgba(63,113,154,.06);
  }

  .mobile-menu-account-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:12px 0 0;
  }

  .retro-search{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    margin-top:12px;
  }

  .retro-search input{
    width:100%;
    min-height:50px;
    padding:0 14px;
    border:1px solid #bdd4e3;
    border-radius:14px;
    background:#fff;
    font-size:14px;
    font-weight:600;
  }

  .retro-search button{
    min-width:92px;
    min-height:50px;
    padding:0 16px;
    border:1px solid #d2840c;
    border-radius:14px;
    background:linear-gradient(180deg,#ffb230 0%, #f39a13 100%);
    color:#fff !important;
    font-weight:800;
    box-shadow:0 6px 14px rgba(243,154,19,.25);
  }
}

@media (min-width: 701px) and (max-width: 1100px){
  .main-nav-links{
    padding:14px;
  }

  .nav-primary,
  .nav-utilities,
  .nav-more-menu,
  .mobile-menu-account-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mobile-menu-account-actions a:last-child{
    grid-column:1/-1;
  }
}

@media (max-width: 700px){
  .retro-navin{
    padding:10px 10px 12px;
  }

  .nav-primary,
  .nav-utilities,
  .nav-more-menu,
  .mobile-menu-account-actions,
  .retro-search{
    grid-template-columns:1fr;
  }

  .main-nav-links{
    padding:10px;
    border-radius:16px;
    max-height:calc(100vh - 160px);
  }

  .nav-primary > a,
  .nav-utilities > a.utility-link,
  .mobile-menu-account-actions a,
  .nav-more > summary,
  .nav-status-control{
    min-height:52px;
    padding:0 12px;
  }

  .nav-toggle{
    min-height:56px;
    padding:0 16px;
  }

  .mobile-nav-section-title{
    min-height:42px;
    padding:0 12px;
  }
}