/**
 * Medica Sticky Pill Navigation
 * Scroll-activated desktop styling for the Uncode main navigation.
 */

@media (min-width: 960px) {

  #masthead {
    transition:
      top 0.25s ease,
      left 0.25s ease,
      right 0.25s ease,
      width 0.25s ease,
      background-color 0.25s ease,
      border-color 0.25s ease,
      border-radius 0.25s ease,
      box-shadow 0.25s ease;
  }

  html.medica-nav-scrolled #masthead,
  body.medica-nav-scrolled #masthead {
    position: fixed !important;
    top: 24px !important;
    left: 24px !important;
    right: 24px !important;
    width: calc(100vw - 48px) !important;
    min-height: 86px !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.medica-nav-scrolled #masthead .row-menu,
  body.medica-nav-scrolled #masthead .row-menu,
  html.medica-nav-scrolled #masthead .row-menu-inner,
  body.medica-nav-scrolled #masthead .row-menu-inner,
  html.medica-nav-scrolled #masthead .menu-container,
  body.medica-nav-scrolled #masthead .menu-container {
    background: transparent !important;
  }

  html.medica-nav-scrolled #masthead .row-menu-inner,
  body.medica-nav-scrolled #masthead .row-menu-inner {
    padding-left: 36px !important;
    padding-right: 96px !important;
    box-sizing: border-box !important;
  }

  html.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li > a,
  body.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li > a,
  html.medica-nav-scrolled #masthead .menu-primary-inner > ul > li > a,
  body.medica-nav-scrolled #masthead .menu-primary-inner > ul > li > a {
    color: #002664 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  html.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li:hover > a,
  body.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li:hover > a,
  html.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li.current-menu-item > a,
  body.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li.current-menu-item > a,
  html.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li.current-menu-ancestor > a,
  body.medica-nav-scrolled #masthead .menu-horizontal-inner > ul > li.current-menu-ancestor > a,
  html.medica-nav-scrolled #masthead .menu-primary-inner > ul > li:hover > a,
  body.medica-nav-scrolled #masthead .menu-primary-inner > ul > li:hover > a,
  html.medica-nav-scrolled #masthead .menu-primary-inner > ul > li.current-menu-item > a,
  body.medica-nav-scrolled #masthead .menu-primary-inner > ul > li.current-menu-item > a,
  html.medica-nav-scrolled #masthead .menu-primary-inner > ul > li.current-menu-ancestor > a,
  body.medica-nav-scrolled #masthead .menu-primary-inner > ul > li.current-menu-ancestor > a {
    color: #d10074 !important;
  }

  html.medica-nav-scrolled #masthead .drop-menu,
  body.medica-nav-scrolled #masthead .drop-menu,
  html.medica-nav-scrolled #masthead .sub-menu,
  body.medica-nav-scrolled #masthead .sub-menu {
    z-index: 999999 !important;
  }
}

@media (max-width: 959px) {
  #masthead {
    transition:
      top 0.25s ease,
      left 0.25s ease,
      right 0.25s ease,
      width 0.25s ease,
      background-color 0.25s ease,
      border-color 0.25s ease,
      border-radius 0.25s ease,
      box-shadow 0.25s ease;
  }

  html.medica-nav-scrolled #masthead,
  body.medica-nav-scrolled #masthead {
    position: fixed !important;
    top: 12px !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    min-height: 68px !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.medica-nav-scrolled #masthead .row-menu,
  body.medica-nav-scrolled #masthead .row-menu,
  html.medica-nav-scrolled #masthead .row-menu-inner,
  body.medica-nav-scrolled #masthead .row-menu-inner,
  html.medica-nav-scrolled #masthead .menu-container,
  body.medica-nav-scrolled #masthead .menu-container {
    background: transparent !important;
  }
  html.medica-nav-scrolled #masthead .menu-container .logo-container {
    position: relative;
    padding: 21px 0 !important;
  }
  html.medica-nav-scrolled #masthead .mobile-menu-button {
    padding: 0;
  }

  html.medica-nav-scrolled #masthead .mmb-container .lines,
  body.medica-nav-scrolled #masthead .mmb-container .lines {
    background-color: #002664 !important;
  }
  
  html.medica-nav-scrolled #masthead .mmb-container .lines:before,
  body.medica-nav-scrolled #masthead .mmb-container .lines:before,
  html.medica-nav-scrolled #masthead .mmb-container .lines:after,
  body.medica-nav-scrolled #masthead .mmb-container .lines:after,
  html.medica-nav-scrolled #masthead .mmb-container .lines span,
  body.medica-nav-scrolled #masthead .mmb-container .lines span {
    background-color: #002664 !important;
  }
/* ==========================================
   Mobile pill menu refinements
   ========================================== */

    /* Centre logo vertically */
    html.medica-nav-scrolled #masthead .navbar-brand,
    body.medica-nav-scrolled #masthead .navbar-brand {
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
    }


    html.medica-nav-scrolled #masthead .main-logo,
    body.medica-nav-scrolled #masthead .main-logo {
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Force only the light/blue logo to show inside the white mobile pill */
    html.medica-nav-scrolled #masthead #main-logo .logo-light,
    body.medica-nav-scrolled #masthead #main-logo .logo-light {
        display: flex !important;
        align-items: center !important;
        height: 34px !important;
    }

    html.medica-nav-scrolled #masthead #main-logo .logo-dark,
    body.medica-nav-scrolled #masthead #main-logo .logo-dark {
        display: none !important;
    }

    html.medica-nav-scrolled #masthead #main-logo .logo-light img,
    body.medica-nav-scrolled #masthead #main-logo .logo-light img {
        max-height: 26px !important;
        width: auto !important;
    }

    /* Add breathing room inside pill */
    html.medica-nav-scrolled #masthead .row-menu-inner,
    body.medica-nav-scrolled #masthead .row-menu-inner {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    /* Cleaner close icon */
    html.medica-nav-scrolled .mobile-menu-button.active .lines,
    body.medica-nav-scrolled .mobile-menu-button.active .lines,
    html.medica-nav-scrolled .mobile-menu-button.close .lines,
    body.medica-nav-scrolled .mobile-menu-button.close .lines,
    html.medica-nav-scrolled .lines-button.active .lines,
    body.medica-nav-scrolled .lines-button.active .lines,
    html.medica-nav-scrolled .lines-button.close .lines,
    body.medica-nav-scrolled .lines-button.close .lines {
        position: relative !important;
        background: transparent !important;
        height: 24px !important;
        width: 24px !important;
    }

    html.medica-nav-scrolled .mobile-menu-button.active .lines span,
    body.medica-nav-scrolled .mobile-menu-button.active .lines span,
    html.medica-nav-scrolled .mobile-menu-button.close .lines span,
    body.medica-nav-scrolled .mobile-menu-button.close .lines span,
    html.medica-nav-scrolled .lines-button.active .lines span,
    body.medica-nav-scrolled .lines-button.active .lines span,
    html.medica-nav-scrolled .lines-button.close .lines span,
    body.medica-nav-scrolled .lines-button.close .lines span {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
    }

    html.medica-nav-scrolled .mobile-menu-button.active .lines:before,
    body.medica-nav-scrolled .mobile-menu-button.active .lines:before,
    html.medica-nav-scrolled .mobile-menu-button.close .lines:before,
    body.medica-nav-scrolled .mobile-menu-button.close .lines:before,
    html.medica-nav-scrolled .lines-button.active .lines:before,
    body.medica-nav-scrolled .lines-button.active .lines:before,
    html.medica-nav-scrolled .lines-button.close .lines:before,
    body.medica-nav-scrolled .lines-button.close .lines:before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        width: 24px !important;
        height: 2px !important;
        margin-top: -1px !important;
        background: #002664 !important;
        transform: rotate(45deg) !important;
        transform-origin: center !important;
    }

    html.medica-nav-scrolled .mobile-menu-button.active .lines:after,
    body.medica-nav-scrolled .mobile-menu-button.active .lines:after,
    html.medica-nav-scrolled .mobile-menu-button.close .lines:after,
    body.medica-nav-scrolled .mobile-menu-button.close .lines:after,
    html.medica-nav-scrolled .lines-button.active .lines:after,
    body.medica-nav-scrolled .lines-button.active .lines:after,
    html.medica-nav-scrolled .lines-button.close .lines:after,
    body.medica-nav-scrolled .lines-button.close .lines:after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        width: 24px !important;
        height: 2px !important;
        margin-top: -1px !important;
        background: #002664 !important;
        transform: rotate(-45deg) !important;
        transform-origin: center !important;
    }
    /* Prevent blue square behind close icon */
    html.medica-nav-scrolled #masthead .mobile-menu-button.active .lines,
    body.medica-nav-scrolled #masthead .mobile-menu-button.active .lines,
    html.medica-nav-scrolled #masthead .mobile-menu-button.close .lines,
    body.medica-nav-scrolled #masthead .mobile-menu-button.close .lines,
    html.medica-nav-scrolled #masthead .lines-button.active .lines,
    body.medica-nav-scrolled #masthead .lines-button.active .lines,
    html.medica-nav-scrolled #masthead .lines-button.close .lines,
    body.medica-nav-scrolled #masthead .lines-button.close .lines {
        background: transparent !important;
    }    
}