/* Williams Plumbing Menu V3 — minor update 3.1 */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; background: #071d35; }
.wp-menu-v3-demo { min-height: 300px; padding: 70px 6vw; background: linear-gradient(135deg, #092746, #0b3158 55%, #08213c); }
.wp-menu-v3-demo__version { margin: 0 auto 10px; max-width: 1180px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wp-menu-v3-demo__bar { max-width: 1180px; margin: 0 auto; min-height: 78px; padding: 10px 14px 10px 24px; display: flex; align-items: center; gap: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(8,35,61,.72); box-shadow: 0 16px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.wp-menu-v3-demo__brand { flex: 0 0 auto; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .06em; line-height: 1.05; }
.wp-menu-v3-demo__brand span { display:block; margin-top:5px; color:#4bb6f4; font-size:8px; letter-spacing:.14em; }
.wp-menu-v3 { margin-left:auto; display:flex; align-items:center; gap:4px; }
.wp-menu-v3__item { position:relative; min-width:94px; height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.055em; text-transform:uppercase; border-radius:13px; transition:color .18s ease, background-color .18s ease; }
.wp-menu-v3__item > span { position:relative; display:inline-block; padding-bottom:8px; }
.wp-menu-v3__item > span::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:#4bb6f4; transform:scaleX(0); transform-origin:center; transition:transform .28s cubic-bezier(.22,.61,.36,1); }
.wp-menu-v3__item:hover { color:#fff; background:rgba(74,180,241,.12); }
.wp-menu-v3__item:hover > span::after { transform:scaleX(1); }
.wp-menu-v3__item--active { color:#fff; background:rgba(51,166,232,.22); }
.wp-menu-v3__item--active > span::after { transform:scaleX(1); }
.wp-menu-v3__item--active:hover { background:rgba(74,180,241,.16); }
.wp-menu-v3__toggle { display:none; }
@media (max-width:720px) {
  .wp-menu-v3-demo { min-height:330px; padding:24px 14px; }
  .wp-menu-v3-demo__version { margin-bottom:8px; font-size:10px; }
  .wp-menu-v3-demo__bar { position:relative; padding:10px 12px 10px 18px; min-height:68px; border-radius:18px; }
  .wp-menu-v3-demo__brand { font-size:16px; }
  .wp-menu-v3__toggle { margin-left:auto; width:52px; height:48px; padding:8px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; background:transparent; border:0; border-radius:13px; cursor:pointer; }
  .wp-menu-v3__toggle:hover { background:rgba(74,180,241,.16); }
  .wp-menu-v3__toggle span { display:block; width:22px; height:2px; border-radius:2px; background:#fff; transition:transform .18s ease, opacity .18s ease; }
  .wp-menu-v3__toggle b { margin-top:2px; font-size:7px; letter-spacing:.08em; }
  .wp-menu-v3 { position:absolute; top:calc(100% + 9px); left:0; right:0; padding:8px; display:flex; flex-direction:column; gap:3px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(7,29,53,.96); box-shadow:0 18px 35px rgba(0,0,0,.25); opacity:0; visibility:hidden; transform:translateY(-5px); pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s ease; z-index:10; }
  .wp-menu-v3--open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .wp-menu-v3__item { width:100%; min-width:0; height:50px; justify-content:flex-start; padding:0 18px; }
  .wp-menu-v3__item > span { padding-bottom:8px; }
  .wp-menu-v3__toggle--open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .wp-menu-v3__toggle--open span:nth-child(2) { opacity:0; }
  .wp-menu-v3__toggle--open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
}