/* =========================================================
   Simple hamburger mobile menu (no offcanvas, no "Let's Talk")
   Loaded last (right before </head>) so these rules win over
   ad-style.css / style.css.
   ========================================================= */

/* contact.html and uncertain.html also load the older style.css for its
   contact-form / case-study rules. That file carries a leftover rule from
   a different header layout - .header-area-7 .header__nav { margin-right:
   -50%; } - which drags the whole nav (Home/About/Music/...) off the
   right edge of the screen, so on those two pages the menu is present in
   the DOM but invisible. Neutralize it and restore the normal spacing
   used everywhere else. */
.header-area-7 .header__nav {
  margin-right: 0;
}
.header-area-7__inner {
  gap: 98px;
}
@media only screen and (max-width: 1199px) {
  .header-area-7__inner {
    gap: 10px;
  }
}
/* Same style.css file also styles the nav links for a dark/overlay header
   (white, bold, uppercase, tighter padding) - on our light cream header
   that renders as near-invisible white-on-cream text. Restore the normal
   dark nav-link styling used on every other page. Matching the exact
   selector (rather than just a higher-specificity one) so this wins by
   source order, since mobile-menu-fix.css always loads last. */
.header-area-7 .main-menu > ul > li > a {
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  padding: 21px 24px;
  text-transform: uppercase;
}

/* Keep the hamburger's own slot from collapsing to 0 width,
   and align it to the right of the header. */
.header-area-7__inner .mobile-menu,
.header-area-8__inner .mobile-menu {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Make sure the 3rd column in header-area-8's grid layout
   (which the theme hides under 767px) stays visible when it
   holds our hamburger. */
@media only screen and (max-width: 767px) {
  .header-area-8__inner > .mobile-menu {
    display: flex !important;
    text-align: end;
  }
}

.mobile-menu.mean-container {
  position: relative;
}

/* Reset the theme's full-width offcanvas bar styling: we want
   a small icon, not a full-width strip - and critically, the
   theme sets overflow-y:scroll here, which would clip our
   dropdown since it lives inside this bar. */
.mobile-menu.mean-container .mean-bar {
  float: none;
  width: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  background: transparent;
  position: relative;
  overflow: visible !important;
}

/* The theme hides meanmenu's own reveal icon (it was designed
   to use a separate offcanvas trigger instead). Bring it back
   as a plain hamburger icon that turns into an "X" when open
   (meanmenu's own built-in behaviour - it swaps the icon's
   content and sets inline font-size/text-indent on click, so
   several rules below need !important to win over that). */
.mobile-menu.mean-container a.meanmenu-reveal {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  top: auto;
  right: auto;
  inset-inline-end: auto;
  width: 28px;
  height: 22px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--primary, #111111);
  text-indent: 0 !important;
}
.mobile-menu.mean-container a.meanmenu-reveal span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 0;
  background: var(--primary, #111111);
  border-radius: 1px;
}
/* Open state: meanmenu swaps the icon's content for the letter
   "X" and inline-sets a 28px font-size - rein that in. */
.mobile-menu.mean-container a.meanmenu-reveal.meanclose {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400;
}

/* No layout push needed since the dropdown floats above the
   page instead of shoving content down. */
.mobile-menu.mean-container .mean-push {
  display: none !important;
}

/* The dropdown itself: a compact card anchored under the icon,
   instead of a full-width offcanvas panel. Hidden by default -
   the theme's own CSS forces the ul *inside* it to
   display:block!important at all times, so instead of fighting
   that we hide the whole nav box, and only reveal it via the
   adjacent-sibling selector below when the icon is in its open
   ("meanclose") state. This replaces meanmenu's own slide
   animation with an instant toggle, which is fine since we no
   longer rely on its inline show/hide styles at all. */
.mobile-menu.mean-container .mean-nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  inset-inline-end: 0;
  margin-top: 16px;
  width: max-content;
  min-width: 200px;
  max-width: 85vw;
  background: var(--white, #ffffff);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  z-index: 9999;
  overflow: hidden;
}
.mobile-menu.mean-container a.meanmenu-reveal.meanclose + .mean-nav {
  display: block;
}
.dark .mobile-menu.mean-container .mean-nav {
  background: #1f1f1f;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.mobile-menu.mean-container .mean-nav ul li a {
  padding-left: 22px;
  padding-right: 22px;
}