/* =============================================================================
* §15. MOBILE HEADER — the reference's drawer (2026-08-18)
* -----------------------------------------------------------------------------
* Ported from solutech templates/header/mobile.php + css/single.css. The
* reference does NOT slide a panel over the page: it ROTATES THE PAGE ITSELF
* out of the way and reveals the menu sitting behind it. Measured on the
* reference at 414x896:
*
* .menu-mobile__header fixed y0 h50 rgba(0,0,0,.42) + blur(5px)
* .menu-mobile__list fixed top 55% right 5% w200 (hidden until open)
* .pix-mobile-overlay fixed full viewport, fades in
* page content rotate(30deg), radius 16px, big shadow
*
* THE CHECKBOX STAYS THE SOURCE OF TRUTH. The existing markup is a real
* checkbox + label disclosure, so the menu opens with CSS alone and keeps
* working if the script never runs. The script only adds what CSS cannot
* express — the scroll lock and the page rotation, which is applied to
* `.wp-site-blocks` and therefore needs a class on , not a sibling
* selector. Without JS you get a plain open menu; with it, the reference's
* effect. Neither state is broken.
*
* Everything is inside the mobile breakpoint. Above it the desktop masthead in
* §10/§13 is untouched.
* ========================================================================== */
@media (max-width: 899.98px) {
/* ---- the bar itself ------------------------------------------------- */
.vnm-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
min-height: 50px;
padding: 0 15px;
background: transparent;
border: none;
box-shadow: none;
z-index: 9999;
}
/*
* THE BLUR IS ON A PSEUDO-ELEMENT, NOT ON THE BAR, AND THAT IS LOAD-BEARING.
* `backdrop-filter` makes an element the CONTAINING BLOCK for any
* `position: fixed` descendant. With it on `.vnm-header`, the drawer below —
* which is a descendant, not a sibling as in the reference — resolved
* `top: 55%` against the 50px BAR instead of the viewport and landed at
* 27.5px, tucked inside the header. Moving the blur to `::before` keeps the
* same frosted bar while leaving the drawer anchored to the viewport.
* (`position: fixed` on the bar itself does NOT create a containing block —
* only transform / filter / backdrop-filter / will-change / contain do.)
*/
.vnm-header::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.42);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
z-index: 0;
}
.vnm-header__inner {
position: relative;
z-index: 1; /* above the frosted layer */
height: 50px;
min-height: 0;
max-width: none;
padding-inline: 0;
/* §3 of vnm-chrome.css sets padding-block:10px for the old 72px bar.
Left in place it leaves a 30px content box inside a 50px bar, which
is what pushed the contents out of it. */
padding-block: 0;
/* The nav still needs to wrap onto its own line (flex-basis:100%), so
wrapping stays on — but nothing in the top row may wrap now that it
all fits. */
flex-wrap: wrap;
}
/* ---- the top row has to FIT the 50px bar ---------------------------- *
* The bar was shrunk from 72px to 50px here (§15) but the controls kept the
* sizes §3 of vnm-chrome.css gave them for the taller bar: a 56px logo and
* 10px block padding inside a 50px box. The logo alone was 6px taller than
* the bar, so the brand, burger and actions all rendered past its bottom
* edge. Sized against the bar instead, from a single variable so the bar
* height and its contents cannot drift apart.
* -------------------------------------------------------------------- */
.vnm-header {
--vnm-mobile-bar-h: 50px;
}
.vnm-header__brand {
flex: 0 0 auto;
align-self: center;
}
.vnm-header__logo {
width: 34px;
height: 34px;
}
/* Kept at 44px: that is the minimum comfortable touch target, and it fits
the bar now that the block padding is gone. */
.vnm-header__burger {
width: 44px;
height: 44px;
align-self: center;
/* §3 of vnm-chrome.css gives the burger `margin-inline-start: auto` at
ALL widths, and gives .vnm-header__actions one too on mobile. Two auto
margins SPLIT the free space between them, which left search/login
stranded in the middle of the bar with 84px of air on either side.
Dropping this one makes the actions' auto margin the only one, so all
the slack collects before it and the two sit together at the right
edge, separated by the row's own 12px gap. */
margin-inline-start: 0;
}
.vnm-header__actions {
align-self: center;
}
/* ---- the drawer ------------------------------------------------------ *
* Behind the page (z-index -1) until it opens, which is what lets the
* rotating page reveal it rather than cover it.
* --------------------------------------------------------------------- */
.vnm-header__nav {
position: fixed;
top: 55%;
right: 5%;
bottom: auto;
left: auto;
width: 200px;
max-width: 85vw;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: -1;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
/*
* TWO SELECTORS, TWO WORLDS.
*
* With the script running, the drawer is MOVED OUT of `.wp-site-blocks` for
* the duration of the open state, so it is no longer a sibling of the
* checkbox and the body class is what opens it. That move is not tidiness:
* `.wp-site-blocks` takes `transform: rotate(30deg)` while open, and a
* transformed element becomes the CONTAINING BLOCK for `position: fixed`
* descendants — so a drawer left inside it resolves `top: 55%` against the
* whole rotated page (measured: 1325px) and rotates along with it, which is
* the one thing this effect must not do. The reference has the same split:
* its `.menu-mobile__list` is a sibling of `.pix-slide-content`, not a child.
*
* Without the script nothing moves, nothing rotates, and the original
* checkbox sibling selector still opens the menu in place.
*/
#vnm-nav-toggle:checked ~ .vnm-header__nav,
body.vnm-menu-open .vnm-header__nav {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
}
/* The close animation runs from a body class because the checkbox is already
back to unchecked by the time it plays. */
body.vnm-menu-closing .vnm-header__nav {
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: -1;
}
.vnm-header__nav ul {
display: block;
width: 100%;
margin: 0;
padding: 10px 0 40px;
list-style: none;
}
.vnm-header__nav li {
display: block;
margin: 0;
border: none;
list-style: none;
}
.vnm-header__nav a {
display: block;
padding: 10px 0;
color: rgba(255, 255, 255, 0.9);
font-size: 22px;
font-weight: 600;
letter-spacing: 0.5px;
text-decoration: none;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
transition: color 0.2s ease, padding-right 0.2s ease;
}
/* ---- search: out of the bar, into the drawer ------------------------ *
* solutech puts NO search control in the mobile bar. Its bar is logo,
* hamburger, cart and the account/login cluster — `templates/header/mobile.php`
* lines 15-72 — and the search form lives inside the drawer instead, as the
* FIRST child of `.menu-mobile__list`, immediately above the menu container:
*
*
*
*
...the items...
*
*
* Read from the theme source rather than measured: exam.vania-novikau.me is
* the surviving solutech install, but its DNS records were never added, so
* Caddy has no certificate for it and a browser cannot reach it. The page
* does serve over plain HTTP inside node-1, which is how the markup above
* was confirmed; the numbers below come from `css/single.css` 418-460.
*
* DONE IN CSS, NOT IN THE MARKUP. `.vnm-header__searchbox` is already a
* SIBLING of `.vnm-header__nav` inside `.vnm-header__inner`, and the script
* moves the whole header to as one node, so the box travels with the
* drawer for free and the `#vnm-nav-toggle:checked ~` selector still reaches
* it. Wrapping the two in a drawer element would have read better, but the
* desktop panel opens through `#vnm-search-toggle:checked ~ .vnm-header__searchbox`,
* and a wrapper — even `display: contents` — ends that sibling relationship
* and silently breaks the desktop search. Two fixed boxes stacked by `top`
* costs one variable and touches nothing above 900px.
* --------------------------------------------------------------------- */
.vnm-header {
/* The reference's field is 46px tall; the nav below is offset by exactly
this so the two read as one column. Declared once so they cannot drift. */
--vnm-drawer-search-h: 46px;
/* solutech opens the drawer with 30px of air above the field —
`.pix-mobile-search { padding: 30px 0 0 }`, css/single.css:418. I
quoted that rule when this shipped and then did not apply it, so the
field sat flush against the drawer's top edge. MEASURED against the
live reference (exam.vania-novikau.me, 390x900, drawer open): field
top 525 = drawer top 495 + 30, menu container 571 = 495 + 76. Ours
had field 464 = drawer top + 0 and menu +46. */
--vnm-drawer-search-gap: 30px;
}
/* The bar's magnifier and the panel's close button are the two halves of the
desktop disclosure. Neither exists in the reference's bar, and with the
field permanently in the drawer there is nothing left for them to open or
close. */
.vnm-header__search,
.vnm-header__search-close {
display: none;
}
/* Same geometry as `.vnm-header__nav` above — the drawer is 200px at
`right: 5%`, and the reference's field + button (150 + 46) was sized to
sit in it. */
.vnm-header__searchbox {
position: fixed;
top: calc(55% + var(--vnm-drawer-search-gap));
right: 5%;
bottom: auto;
left: auto;
display: flex;
width: 200px;
max-width: 85vw;
margin: 0;
padding: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: -1;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* The menu starts below the field instead of at the drawer's top edge, which
is what the reference does by listing the search first in the flow. */
.vnm-header__nav {
top: calc(55% + var(--vnm-drawer-search-gap) + var(--vnm-drawer-search-h));
}
/* Opened by the BURGER, not by the search toggle — same two selectors the
nav uses, and for the same reason: the checkbox works when the script has
not run, the body class works after the header has been re-parented. */
#vnm-nav-toggle:checked ~ .vnm-header__searchbox,
body.vnm-menu-open .vnm-header__searchbox {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
}
body.vnm-menu-closing .vnm-header__searchbox {
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: -1;
}
/* A viewport resized from desktop with the search panel open would arrive
here with `#vnm-search-toggle` still checked, and the desktop rule
`#vnm-search-toggle:checked ~ .vnm-header__nav { display: none }` would
take the whole menu away. Same specificity, later in the cascade. */
#vnm-search-toggle:checked ~ .vnm-header__nav {
display: block;
}
.vnm-header__searchbox form {
display: flex;
align-items: center;
width: 100%;
margin: 0;
}
/* Core wraps the field in a