/* =====================================================
   Responsive nav — overrides hidden-md restriction
   Social icons always pinned to the right of the menu
   ===================================================== */

/* Hide the old mobile-only nav & hamburger — main nav handles everything */
.main-header .mobile-menu,
.js-slideout-toggle,
.slideout-menu {
  display: none !important;
}

/* Main nav: always visible, flex so social stays right */
.main-header .main-nav {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  float: right;
  margin-top: 1.8rem;
}

/* The WP menu wrapper is inline-block by default — make it flex too */
.main-header .main-nav .menu-main-menu-container,
.main-header .main-nav .menu-mobile-menu-container {
  display: flex;
  align-items: center;
}

.main-header .main-nav ul.menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Social icons: always flush right of the menu items */
.main-header .main-nav .social {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* ── Tablet (768px – 1179px) ── */
@media (max-width: 1179px) {
  .main-header .main-nav {
    margin-top: 1.2rem;
  }

  header nav ul li a {
    font-size: 0.82rem;
    padding: 0 0.35rem;
  }

  header nav ul li {
    padding: 0;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  /* Stack nav below logo */
  .main-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 0.5rem;
  }

  /* Logo keeps its col-3 space */
  .main-header .container .col-3 {
    flex-shrink: 0;
  }

  .main-header .main-nav {
    float: none;
    width: 100%;
    margin: 0.4rem 0 0.2rem;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .main-header .main-nav ul.menu {
    flex: 1;
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }

  header nav ul li a {
    font-size: 0.72rem;
    padding: 0 0.2rem;
  }

  /* Sub-menus: full-width drop on mobile */
  header nav ul li .sub-menu {
    position: static;
    box-shadow: none;
    padding-left: 0.5rem;
  }

  .main-header .main-nav .social {
    margin-left: 0.5rem;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.2rem;
  }
}

/* ── Very small (< 480px) ── */
@media (max-width: 480px) {
  header nav ul li a {
    font-size: 0.65rem;
    padding: 0 0.15rem;
  }

  .main-header .main-nav .social li a {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }
}