/* =========================================================
   MUKLAWA_UK_NAV_RESPONSIVE_V5_FINAL
   ========================================================= */

/* DESKTOP + LAPTOP: FULL MENU */
@media (min-width:1025px) {

  .site-header .nav {
    width:calc(100% - 28px) !important;
    max-width:1500px !important;
    min-height:72px !important;
    height:72px !important;
    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:14px !important;
    overflow:visible !important;
  }

  .brand {
    flex:0 0 auto !important;
    margin:0 !important;
  }

  .brand img {
    display:block !important;
    width:auto !important;
    height:42px !important;
    max-width:175px !important;
    object-fit:contain !important;
  }

  .nav-links {
    display:flex !important;

    flex:1 1 auto !important;

    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;

    min-width:0 !important;

    gap:clamp(9px,1.15vw,20px) !important;

    margin:0 !important;
    padding:0 !important;
  }

  .nav-links a {
    display:inline-flex !important;
    align-items:center !important;

    margin:0 !important;
    padding:6px 0 !important;

    color:#17151A !important;

    font-size:clamp(12.5px,1vw,15px) !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .desktop-download {
    display:inline-flex !important;

    flex:0 0 auto !important;

    min-height:44px !important;

    padding:0 clamp(13px,1.3vw,20px) !important;

    font-size:clamp(12.5px,1vw,15px) !important;

    white-space:nowrap !important;
  }

  /* Absolutely no mobile control on laptop/desktop */
  .mobile-menu-v2,
  .mobile-nav,
  .mobile-menu-btn,
  .mobile-nav-toggle {
    display:none !important;
  }
}

/* COMPACT LAPTOP */
@media (min-width:1025px) and (max-width:1250px) {

  .site-header .nav {
    gap:10px !important;
  }

  .brand img {
    height:37px !important;
    max-width:150px !important;
  }

  .nav-links {
    gap:10px !important;
  }

  .nav-links a {
    font-size:12.5px !important;
  }

  .desktop-download {
    font-size:12.5px !important;
    padding:0 14px !important;
    min-height:42px !important;
  }
}

/* TABLET + MOBILE: HAMBURGER */
@media (max-width:1024px) {

  .site-header {
    overflow:visible !important;
  }

  .site-header .nav {
    width:calc(100% - 24px) !important;

    height:66px !important;
    min-height:66px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    overflow:visible !important;
  }

  .brand {
    display:flex !important;
    align-items:center !important;

    margin-right:auto !important;

    flex:0 0 auto !important;
  }

  .brand img {
    width:auto !important;
    height:37px !important;
    max-width:145px !important;
  }

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

  .mobile-menu-v2 {
    display:block !important;

    position:relative !important;

    flex:0 0 auto !important;

    margin:0 0 0 auto !important;

    z-index:99999 !important;
  }

  /* Remove browser triangle */
  .mobile-menu-v2 > summary {
    list-style:none !important;
    list-style-type:none !important;

    display:flex !important;

    width:44px !important;
    height:44px !important;

    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    border:1px solid #f0e4ec !important;
    border-radius:12px !important;

    background:#fff !important;

    cursor:pointer !important;

    box-shadow:0 5px 16px rgba(70,25,47,.08) !important;
  }

  .mobile-menu-v2 > summary::-webkit-details-marker {
    display:none !important;
  }

  .mobile-menu-v2 > summary::marker {
    content:"" !important;
    display:none !important;
  }

  /* Proper hamburger */
  .mobile-menu-v2 > summary span {
    display:block !important;

    width:21px !important;
    height:2px !important;

    min-width:21px !important;

    margin:0 !important;
    padding:0 !important;

    background:#17151A !important;

    border:0 !important;
    border-radius:10px !important;

    opacity:1 !important;

    transition:
      transform .2s ease,
      opacity .2s ease !important;
  }

  .mobile-menu-panel-v2 {
    position:absolute !important;

    top:53px !important;
    right:0 !important;

    width:min(330px, calc(100vw - 24px)) !important;

    display:flex !important;
    flex-direction:column !important;

    gap:3px !important;

    padding:12px !important;

    background:#fff !important;

    border:1px solid #f0e4ec !important;
    border-radius:17px !important;

    box-shadow:
      0 20px 55px rgba(65,23,43,.18) !important;

    z-index:999999 !important;
  }

  .mobile-menu-panel-v2 a {
    display:flex !important;
    align-items:center !important;

    width:100% !important;
    min-height:45px !important;

    margin:0 !important;
    padding:10px 13px !important;

    border-radius:10px !important;

    color:#17151A !important;

    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.3 !important;

    white-space:normal !important;
  }

  .mobile-menu-panel-v2 .mobile-download-v2 {
    justify-content:center !important;

    margin-top:6px !important;

    color:#fff !important;

    background:
      linear-gradient(
        135deg,
        #FE2B73,
        #FE2B73
      ) !important;
  }

  /* Hamburger -> X */
  .mobile-menu-v2[open] > summary span:nth-child(1) {
    transform:translateY(7px) rotate(45deg) !important;
  }

  .mobile-menu-v2[open] > summary span:nth-child(2) {
    opacity:0 !important;
  }

  .mobile-menu-v2[open] > summary span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg) !important;
  }
}

/* PHONE */
@media (max-width:520px) {

  .site-header .nav {
    width:calc(100% - 20px) !important;
    height:62px !important;
    min-height:62px !important;
  }

  .brand img {
    height:33px !important;
    max-width:130px !important;
  }

  .mobile-menu-v2 > summary {
    width:41px !important;
    height:41px !important;
  }

  .mobile-menu-panel-v2 {
    width:calc(100vw - 20px) !important;
    max-width:330px !important;
    top:49px !important;
  }
}

/* END MUKLAWA_UK_NAV_RESPONSIVE_V5_FINAL */