/*
 * CCNM Clinics Drupal 10 mobile compatibility fixes.
 * Applies below the desktop breakpoint.
 */
@media (max-width: 991.98px) {

  /* Mobile navigation */
  .top-bar:not(.open-nav) .ccnm-navbar {
    display: none !important;
  }

  .top-bar.open-nav .ccnm-navbar {
    display: block !important;
    width: 280px !important;
    max-width: calc(100vw - 30px) !important;
    margin-left: -90px !important;
    max-height: none !important;
    overflow: visible !important;
    background: #00664f !important;
  }

  .top-bar.open-nav .nav-menu {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .top-bar.open-nav .nav-menu > .columns {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .top-bar.open-nav .ccnm-main-menu {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .top-bar.open-nav .ccnm-main-menu > li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .top-bar.open-nav .ccnm-main-menu > li > a {
    display: inline-block !important;
    width: auto !important;
    flex: 0 1 auto !important;
    padding: 12px 8px 12px 15px !important;
    color: white !important;
  }

  .top-bar.open-nav .ccnm-main-menu a:hover,
  .top-bar.open-nav .ccnm-main-menu a:focus {
    color: #00c1d5 !important;
    background-color: #005240 !important;
  }

  .top-bar.open-nav .ccnm-submenu-toggle {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #fff !important;
    padding: 8px 4px !important;
    margin: 0 !important;
  }

  .top-bar.open-nav .ccnm-submenu-toggle::after {
    display: none !important;
  }

  .top-bar.open-nav .ccnm-submenu-toggle span {
    display: inline !important;
    color: #fff !important;
  }

  .top-bar.open-nav .ccnm-has-children:hover > .dropdown-menu,
  .top-bar.open-nav .ccnm-has-children:focus-within > .dropdown-menu,
  .top-bar.open-nav .ccnm-has-children.ccnm-expanded > .dropdown-menu {
    display: block !important;
  }

  .top-bar.open-nav .ccnm-has-children > .dropdown-menu {
    flex: 0 0 100% !important;
    background: #005240 !important;
  }

  /* Mobile branding */
  .top-bar .nav-menu > .columns:first-child {
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .top-bar .site-branding {
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: translateX(-70px) !important;
  }

  .top-bar .site-branding .logo,
  .top-bar .logo {
    width: 300px !important;
    max-width: calc(100vw - 100px) !important;
    height: auto !important;
  }

  /* Homepage hero */
  header .container.align-vertical {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  header .container.align-vertical > .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  header .container.align-vertical > .row > .col-md-5,
  header .container.align-vertical > .row > .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Explore CCNM Clinics */
  .ccnm-block-history > .container.align-vertical {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .ccnm-block-history .ccnm-h2-L.text-center {
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .ccnm-block-history img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Naturopathic Medicine content */
  .paragraph--type--paragraph-block:has(.ccnm-h1-1) > .container {
    max-width: 480px !important;
    width: calc(100% - 30px) !important;
  }

  /* Evidence-Based Naturopathic Medicine */
  .ccnm-block-student .feature-box {
    display: block !important;
    position: relative !important;
  }

  .ccnm-block-student .feature-box > .background-image-holder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ccnm-block-student .feature-box > .col-md-7 {
    position: relative !important;
    z-index: 2 !important;
    width: 44% !important;
    max-width: 44% !important;
    flex: none !important;
    padding: 0 10px 0 25px !important;
    background: transparent !important;
  }

  .ccnm-block-student .feature-box > .col-md-7 .ccnm-h1-1 {
    font-size: 27px !important;
    line-height: 1.2 !important;
    overflow-wrap: normal !important;
  }

  .ccnm-block-student .feature-box > .col-md-7 p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Vertically stacked footer */
  .footer-container .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .footer-container .row > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-container .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}