/* ========== GLOBAL SPACING ============================================== */

body.mows-special-event{padding-top:0}

/* ========== HEADER ====================================================== */

.mows-header {
  position: sticky;
  top: 0;   /* flush with the very top */
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(10px);
  padding: .75rem 0;
  margin: 0;  /* make sure no stray margins push it down */
}

.mows-header-container{
  max-width:1500px;
  margin:0 auto;
  padding:0 1rem;
  display:flex;
  align-items:center;
  gap:2rem
}

.mows-header-logo img{height:40px}

/* nav fills the bar */
.mows-header-nav{flex:1}
.mows-header-nav .mows-nav-list{
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  padding-top:32px;
}
.mows-header-nav .mows-nav-list > li{
  display:flex;
  align-items:center;
}

.mows-header-nav .mows-nav-list > li > a{
  display:flex;
  align-items:center;
  line-height:1;
  padding:.5rem 0;
}
.mows-header-nav a,
.mows-header-nav a:visited{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  padding:.5rem 0;
  transition:color .3s
}
.mows-header-nav a:hover,
.mows-header-nav a:active{color:#fff}

/* Register button */
.mows-header-cta{
  background: #f20042;
  color:#fff;
  padding:.5rem 2rem;
  border-radius:4px;
  font-weight:600;
  cursor:pointer;
  transition:background .3s;
  box-shadow:0 6px 3px 2px rgba(0,0,0,.6)
}
.mows-header-cta:hover{background:#d1003a}

/* hide desktop nav below 1000 px */
@media(max-width:1000px){
  .mows-header-nav{display:none}
}

/* ========== HEADER ALIGNMENT OVERRIDES ===================== */

.mows-header-nav {
  flex: unset;
  margin-left: auto;
}

.mows-header-nav .mows-nav-list {
  justify-content: flex-end;
}

/* ========== HEADER NAV SPACING ================================= */

.mows-header-nav .mows-nav-list {
  justify-content: flex-end;
  gap: 50px; /* adds spacing between menu items */
}

<!-- Mobile Menu Toggle Button -->
<button class="mows-mobile-toggle" onclick="document.body.classList.toggle('mobile-menu-open')">
  &#9776; <!-- Hamburger icon -->
</button>

<!-- Mobile Menu -->
<nav class="mows-mobile-menu">
  <ul class="mows-mobile-nav-list">
    <li><a href="#about">About</a></li>
    <li><a href="#speakers">Speakers</a></li>
    <li><a href="#schedule">Schedule</a></li>
    <li><a href="#register">Register</a></li>
  </ul>
</nav>

/* ========== FOOTER ====================================================== */

.mows-footer{background:#000000;padding:4rem 0}

.mows-footer-container{
  max-width:1500px;
  margin:0 auto;
  padding:0 1rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2rem
}

.mows-footer-left{flex:1;max-width:400px}
.mows-footer-logo{height:54px;margin-bottom:1.5rem}
.mows-footer-description{color:#000000;line-height:1.6;margin:0}

.mows-footer-right{text-align:right}
.mows-footer-social{
  display:flex;
  gap:1rem;
  margin-bottom:1.5rem;
  justify-content:flex-end
}
.mows-social-link{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);
  border-radius:50%;
  transition:background .3s
}
.mows-social-link:hover{background:rgba(255,255,255,.25)}
.mows-social-link img{width:20px;height:20px;filter:brightness(0) invert(1)}
.mows-footer-copyright{color:#00000;font-size:.875rem;margin:0;text-align:right}

@media(max-width:1000px){
  .mows-footer-container{flex-direction:column;text-align:center}
  .mows-footer-right{text-align:center}
  .mows-footer-social{justify-content:center}
}
