/* ---------------------------------------------------------------------------
wp.css -- the bridge between the approved design (site.css) and the markup
WordPress actually emits. Loaded AFTER site.css, so it wins on equal
specificity. Nothing here is new design; it only re-attaches the approved
rules to core block classes.
--------------------------------------------------------------------------- */
/* Core injects its own skip link in a block theme, so the theme adds none and
dresses core's as the approved build's `.skip` instead. Two skip links is
what you get otherwise, and it is the first thing a keyboard user meets. */
.skip-link.screen-reader-text,
.skip {
position: absolute;
left: -9999px;
background: var(--red-btn);
color: #fff;
padding: 12px 18px;
z-index: 99;
text-decoration: none;
/* Core's screen-reader-text clamps this to a 36x24 box, so the one control
a keyboard user meets first was the smallest target on the page. It is
off-screen until focused, so sizing it properly costs nothing visually. */
min-height: 44px;
line-height: 20px;
box-sizing: border-box;
}
.skip-link.screen-reader-text:focus,
.skip:focus {
left: 8px;
top: 8px;
clip: auto;
clip-path: none;
width: auto;
height: auto;
font-size: 17px;
}
/* A paragraph that generates no box. The converter wraps runs of inline
content (a row of .btn links) in one of these, so a flex row stays a flex
row even though a
now holds it. */
.is-contents { display: contents; }
/* post-content must not introduce a second layout container; the design's own
.wrap / .sect sections handle width and rhythm. */
.site-main > .entry-content,
.wp-block-post-content { max-width: none; margin: 0; }
.site-main { padding: 0; }
/* 🛑 Block gap. Core emits `:where(.wp-block-group) > * + * { margin-block-start: 24px }`,
so inside the header group the nav picked up a 24px top margin. `.top` is a
flex row that spaces itself with `gap: 20px`, so that margin is pure surplus:
it made the header 95px instead of 72px on every page, and that extra 23px is
what drove the
under the fixed header at 390px. The phone button and the
logo escaped it only because one is first and the other is display:contents. */
header.top > * { margin-block: 0; }
/* ---------------- header: site-logo stands in for .brand ---------------- */
.wp-block-site-logo.brand { line-height: 0; }
.wp-block-site-logo.brand img,
.wp-block-site-logo.brand a { display: block; }
.wp-block-site-logo.brand img { height: 40px; width: auto; max-width: none; }
/* ---------------- header: core/navigation stands in for .menu ----------- */
.menu.wp-block-navigation { gap: 0; }
.menu .wp-block-navigation__container {
display: flex;
gap: clamp(14px, 1.8vw, 30px);
align-items: center;
}
.menu .wp-block-navigation-item__content {
font-size: 17px;
font-weight: 500;
color: var(--mute-2);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1.5px solid transparent;
transition: color .2s;
}
.menu .wp-block-navigation-item__content:hover,
.menu .current-menu-item > .wp-block-navigation-item__content,
.menu a[aria-current="page"] {
color: #fff;
border-bottom-color: var(--red);
}
/* The hamburger core renders, dressed as the design's .burger.
🛑 Needs `nav.menu button...` specificity, not `.menu ...`: at two classes a
core rule was winning and the button inherited 17px/27.5px line-height,
making it 50px tall. The header is sized by its tallest item, so that alone
took the whole header from the design's 72px to 106px — which is what put
the
under the fixed header on /contact/ at 390px. Keep this under 40px. */
nav.menu button.wp-block-navigation__responsive-container-open {
background: none;
border: 1px solid var(--hair);
color: #fff;
line-height: 1;
padding: 11px 13px;
cursor: pointer;
min-width: 0;
height: auto;
align-self: center;
}
/* Core ships, verbatim:
.wp-block-navigation__responsive-container-open ×3 { font-size: inherit }
A deliberate anti-override at (0,3,0), which beats `nav.menu button.x`
at (0,2,1) — so the button inherited the 17px body size and stood 50px
tall. Matching its specificity instead of reaching for !important. */
nav.menu button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
font-family: inherit;
font-size: 15px;
font-weight: 400;
}
nav.menu button.wp-block-navigation__responsive-container-open svg { display: none; }
nav.menu button.wp-block-navigation__responsive-container-open::after { content: "Menu"; }
/* The nav is a flex item of .top; keep it on the same optical line as the
logo and the phone button rather than letting core's container size it. */
nav.menu.wp-block-navigation { align-self: center; }
/* 🛑 THE BREAKPOINT DEFECT, fixed here on purpose.
site.css collapses the navigation at 980px. Core's overlayMenu:"mobile"
collapses at 600px. Without this block, every viewport between 601px and
980px -- i.e. every tablet -- gets NO navigation at all: the design has
hidden .menu while core has not yet shown its button. Neither stylesheet is
wrong on its own, which is exactly why render-it-on-a-phone.md says a
cascade can only be checked in a browser. */
@media (min-width: 601px) and (max-width: 980px) {
.menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* The open drawer, matching `.top.open .menu` in the approved build. */
.menu .wp-block-navigation__responsive-container.is-menu-open {
background: var(--ink-2);
padding: 0 var(--gut) 10px;
}
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
padding-block: 14px; /* >= 32px tall: check-mobile small-tap-target */
border-bottom: 1px solid var(--hair-2);
width: 100%;
}
.menu .wp-block-navigation__responsive-container-close { color: #fff; }
/* ---------------- header: the phone button ------------------------------
The approved build drew the handset as an inline