:root{
  --nav-bg:#111;
  --nav-fg:#fff;
  --nav-border:rgba(255,255,255,.14);
  --nav-hover:rgba(255,255,255,.08);
  --panel-w:320px;
}

header.site-header .wrap {
    max-width: 1500px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: right;
    flex-wrap: wrap;
}







.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:var(--nav-bg); color:#424242;
  position:sticky; top:0; z-index:1000;
}
.brand a{ color:#424242; text-decoration:none; font-weight:700; }

.menu-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:1px solid var(--nav-border);
  color:#424242; padding:8px 10px; border-radius:10px;
  cursor:pointer;
}



.menu-btn:hover,.menu-btn:focus,.menu-btn:active{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:1px solid var(--nav-border);
  color:#424242; padding:8px 10px; border-radius:10px;
  cursor:pointer;
}


.hamburger{ width:20px; height:20px; position:relative; display:inline-block; }
.hamburger span{ position:absolute; left:0; right:0; height:3px; background:#424242; border-radius:2px; transition:.2s; }
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:7px; }
.hamburger span:nth-child(3){ top:14px; }

.menu-btn[aria-expanded="true"] .hamburger span:nth-child(1){ top:6px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .hamburger span:nth-child(3){ top:6px; transform:rotate(-45deg); }

.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:999;
}
.overlay.is-open{ opacity:0; pointer-events:auto; }



.hamburger-nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.dropdown-wrap{
  position:relative; /* anchors its dropdown panel to its own button */
  display:inline-block;
}


/* Shared dropdown panel (menu + search) */
.dropdown-wrap .dropdown-panel{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;

  width: min(var(--panel-w), calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow: auto;

  background: #ffffff;
  color: #424242;
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);

  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;

  z-index: 1000;
}

.dropdown-wrap .dropdown-panel.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


nav.menu.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }

.menu-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 6px;
  border-bottom:1px solid var(--nav-border);
  margin-bottom:6px;
}
.menu-title{ font-weight:700; font-size:14px; opacity:.95; }
.close-btn{
  border:1px solid var(--nav-border);
  background:transparent; color:#424242;
  padding:6px 10px; border-radius:10px;
  cursor:pointer;
}

.menu-root,
nav.menu ul{ list-style:none; padding:6px; margin:0; }

nav.menu li{ margin:0; }

nav.menu a,
nav.menu button.submenu-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family: 'Joan', serif !important;
    text-transform: uppercase;
    padding: 1rem 2rem 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
  text-decoration:none; color:#424242;
  padding:10px 12px; border-radius:10px;
  border:0; background:transparent; cursor:pointer;
  font:inherit; text-align:left;
}
nav.menu a:hover,
nav.menu button.submenu-toggle:hover{ background:var(--nav-hover); }

.caret{
  width:10px; height:10px;
  border-right:2px solid var(--nav-fg);
  border-bottom:2px solid var(--nav-fg);
  transform:rotate(45deg);
  transition:transform .2s ease;
  opacity:.85;
}
.submenu-toggle[aria-expanded="true"] .caret{ transform:rotate(-135deg); }

.submenu{ padding-left:10px; display:none; }
.submenu.is-open{ display:block; }

.submenu .submenu a,
.submenu .submenu-toggle{ padding-left:18px; }
.submenu .submenu .submenu a,
.submenu .submenu .submenu-toggle{ padding-left:26px; }

.search-panel{
  padding: 6px;
}

.search-icon{
  background-image: url("https://engaged.robbinsbrothers.com/wp-content/themes/robbins-brothers/images/search-icon.svg");
  height:20px;
  width:20px;
  display:block;
}



.search-form{
  color: #424242;
  display:flex;
  gap:10px;
  padding: 10px 12px 12px;
}

.search-input{
  flex:1;
  border: 1px solid var(--nav-border);
  background: transparent;
  color: #424242;
  border-radius: 10px;
  padding: 10px 12px;
}

.search-submit{
  border: 1px solid #424242;
  background: transparent;
  color: #424242;
  border-radius: 10px;
  padding: 10px 12px;
  cursor:pointer;
}
.search-submit:hover{   color: #424242; background: var(--nav-hover); border: 1px solid #424242; }

/* Accessible “screen reader only” label */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}