/* ==========================================================================
Watervale — mobile menu (Option B: light right-hand drawer) + desktop
dropdown hover bridge.
Approved by Alexander 2026-10-23 ("option B is good for the menu"), from the
mockup https://claude.ai/artifact/1rxpngJcEK6Vt6AT251baJ.
Built by fleet-operator on the dev site, 2026-10-23.
Loaded AFTER the child style.css (dependency 'layerly-site') by the child
functions.php, so it overrides:
- the parent's drawer layout (layerly-base/style.css "Chrome behavior"):
full-screen, centred, every ul centred;
- the child's earlier navy full-screen drawer look (style.css §5 mobile
block and the "Services dropdown submenu" block), including the 300 px
desktop sub-menu width that leaked into mobile.
Behaviour (open/close state, Escape, close on link tap) is still the
parent's main.js; assets/js/wsp-menu.js adds the scrim, close button,
accordion, focus trap, focus return and scroll lock.
Side margin inside the drawer: 24 px (the mockup default). The header bar and
the page keep the site's own phone gutter (16 px), as in mockup option B.
========================================================================== */
/* Elements injected by wsp-menu.js are mobile-only. */
.wsp-scrim,
.wsp-drawer-top,
.wsp-acc,
.site-header__nav .sub-menu > .wsp-all { display: none; }
/* --------------------------------------------------------------------------
Desktop: bridge the 14 px gap between "Services" and its dropdown card, so
a slow mouse move from the word to the card no longer closes it. The bridge
is an invisible extension of the (hovering it IS hovering the );
the card (z-index 20) still paints above it.
-------------------------------------------------------------------------- */
@media (min-width: 769px) {
.site-header__nav .nav__list > li.menu-item-has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 16px;
}
}
/* --------------------------------------------------------------------------
Phones and small tablets (the parent drawer's own breakpoint).
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* ---- the tint over the page ---- */
.wsp-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(4, 40, 78, .55);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility 0s linear .3s;
}
.wsp-scrim.is-open {
opacity: 1;
visibility: visible;
transition: opacity .3s ease;
}
/* ---- the drawer: right-hand panel, 56 px of page left showing ---- */
.site-header #wsp-nav[data-mobile-menu] {
top: var(--wp-adminbar-offset, 0px);
right: 0;
bottom: 0;
left: auto;
width: calc(100% - 56px);
max-width: 400px;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: 0 24px 24px;
background: var(--color-3);
color: var(--color-1);
box-shadow: -12px 0 32px rgba(14, 27, 42, .18);
overflow-y: auto;
overscroll-behavior: contain;
/* closed = off-screen AND not focusable / not read out */
visibility: hidden;
transition: transform .3s ease, visibility 0s linear .3s;
}
.site-header #wsp-nav[data-mobile-menu].is-open {
visibility: visible;
transition: transform .3s ease;
}
/* the parent's three-bar toggle would otherwise sit above the drawer as an X;
in this pattern the drawer carries its own close button */
body.mobile-menu-open .site-header .ly-burger { z-index: 1; }
/* page cannot scroll while the drawer is open (html as well as body, for iOS) */
html.wsp-menu-lock,
html.wsp-menu-lock body { overflow: hidden; }
/* ---- top row: "Menu" label + close X ---- */
.site-header #wsp-nav .wsp-drawer-top {
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 auto;
height: 76px;
}
.site-header #wsp-nav .wsp-drawer-title {
font-family: var(--font-3);
font-weight: 600;
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-6);
}
.site-header #wsp-nav .wsp-drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 -10px 0 0;
padding: 0;
border: 0;
border-radius: 8px;
background: none;
color: var(--color-1);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* ---- the list: one left edge, full-width rules ---- */
.site-header #wsp-nav ul {
display: block;
width: auto;
margin: 0;
padding: 0;
gap: 0;
list-style: none;
align-items: stretch;
}
.site-header #wsp-nav .nav__list { flex: 0 0 auto; }
.site-header #wsp-nav .nav__list > li {
position: static;
margin: 0;
border: 0;
border-top: 1px solid var(--color-5);
}
.site-header #wsp-nav .nav__list > li:last-child { border-bottom: 1px solid var(--color-5); }
/* rows: About, Contact (links) and Services (the accordion button) */
.site-header #wsp-nav .nav__list > li > a,
.site-header #wsp-nav .nav__list > li > .wsp-acc {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 64px;
margin: 0;
padding: 12px 0;
border: 0;
background: none;
font-family: var(--font-1);
font-weight: 400;
font-size: 28px;
line-height: 1.15;
letter-spacing: normal;
text-transform: none;
text-align: left;
white-space: normal;
color: var(--color-1);
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* hover colour only where a real pointer hovers; on touch screens :hover sticks after a tap */
.site-header #wsp-nav .nav__list > li > a:hover,
.site-header #wsp-nav .nav__list > li > .wsp-acc:hover { color: var(--color-1); }
/* the Services word is the button; its desktop link is replaced by "All services" */
.site-header #wsp-nav .nav__list > li.wsp-has-acc > a { display: none; }
.site-header #wsp-nav .wsp-acc .wsp-chev { flex: 0 0 auto; transition: transform .2s ease; }
.site-header #wsp-nav .wsp-acc[aria-expanded="true"] .wsp-chev { transform: rotate(180deg); }
/* the earlier chevron-only toggle (removed from functions.php) must never show */
.site-header #wsp-nav .nav-submenu-toggle { display: none; }
/* ---- the Services sub-list (undo every desktop dropdown rule) ---- */
.site-header #wsp-nav .nav__list .sub-menu {
display: none;
position: static;
width: auto;
min-width: 0;
max-height: none;
overflow: visible;
margin: 0;
padding: 0 0 16px;
transform: none;
opacity: 1;
visibility: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transition: none;
}
.site-header #wsp-nav .nav__list .sub-menu.wsp-open { display: block; }
.site-header #wsp-nav .nav__list .sub-menu::before,
.site-header #wsp-nav .nav__list .sub-menu::after { display: none; content: none; }
.site-header #wsp-nav .nav__list .sub-menu > li { margin: 0; border: 0; }
.site-header #wsp-nav .nav__list .sub-menu > .wsp-all { display: list-item; }
.site-header #wsp-nav .nav__list .sub-menu a {
display: flex;
align-items: center;
min-height: 44px;
margin: 0;
padding: 10px 0 10px 16px;
border: 0;
border-left: 1px solid var(--color-6);
border-radius: 0;
background: transparent;
font-family: var(--font-2);
font-weight: 400;
font-size: 16px;
line-height: 1.35;
letter-spacing: normal;
text-transform: none;
white-space: normal;
color: var(--color-2);
text-decoration: none;
}
.site-header #wsp-nav .nav__list .sub-menu a:hover { color: var(--color-2); background: transparent; }
.site-header #wsp-nav .nav__list .sub-menu .wsp-all > a:hover { color: var(--color-6); }
.site-header #wsp-nav .nav__list .sub-menu .wsp-all > a {
font-family: var(--font-3);
font-weight: 600;
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-6);
}
/* ---- footer: phone + full-width maroon button, pinned to the bottom ---- */
.site-header #wsp-nav .site-header__drawer-extra {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-top: auto;
padding-top: 28px;
border: 0;
}
.site-header #wsp-nav .site-header__drawer-extra .site-header__phone {
display: flex;
align-items: center;
min-height: 44px;
padding: 0;
font-family: var(--font-3);
font-weight: 600;
font-size: 15px;
letter-spacing: .08em;
text-align: left;
color: var(--color-1);
text-decoration: none;
}
.site-header #wsp-nav .site-header__drawer-extra .btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
padding: 0 24px;
box-sizing: border-box;
font-family: var(--font-3);
font-weight: 600;
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1;
border-radius: var(--radius-full);
background: var(--color-6);
border: 1px solid var(--color-6);
color: #fff;
}
.site-header #wsp-nav .site-header__drawer-extra .btn:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
/* focus ring on the paper drawer (the header's white-on-navy ring would vanish here) */
.site-header #wsp-nav :focus-visible { outline: 2px solid var(--color-6); outline-offset: 3px; }
/* ---- homepage hero: clear the transparent header (76 px) + 40 px of air ---- */
.hero .hero__wrap { padding-top: calc(76px + 40px); }
}
@media (max-width: 768px) and (hover: hover) {
.site-header #wsp-nav .nav__list > li > a:hover,
.site-header #wsp-nav .nav__list > li > .wsp-acc:hover,
.site-header #wsp-nav .nav__list .sub-menu a:hover { color: var(--color-6); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.wsp-scrim,
.site-header #wsp-nav[data-mobile-menu],
.site-header #wsp-nav .wsp-acc .wsp-chev { transition: none; }
}