/* --------------------------------------------------------------------------
Shared foundation. Every rule here is a constraint the previous four builds
proved necessary, not a style choice -- the look of each site comes from its
own tokens file, loaded after this one.
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
/* a 1px border on a max-width:100% image overflows a 320px viewport by 2px --
the only thing that overflowed the whole of the previous job */
img { box-sizing: border-box; }
a { color: inherit; }
table { max-width: 100%; }
/* Skip link: visually hidden but keyboard-reachable. The 1x1+clip pattern is
deliberate -- the mobile audit skips clipped elements rather than counting
this as a failed tap target, which is what it is not. */
.skip {
position: absolute; left: -1px; top: 0; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
background: #fff; color: #000; z-index: 999;
/* NO padding in the hidden state. With box-sizing:border-box a 1px box
with 10px/16px padding still lays out at 32x20 -- the link was not
hidden at all, and the mobile audit reported it as a failed tap target
on every page. Padding belongs to the focused state, which is the only
state anyone sees. */
padding: 0;
}
.skip:focus {
width: auto; height: auto; clip: auto; clip-path: none;
padding: 10px 16px; left: 0;
}
/* missing-image fallback, wired in js/site.js */
img.img-missing {
background: repeating-linear-gradient(135deg,#efece6 0 10px,#e6e2d8 10px 20px);
min-height: 40px; object-fit: contain;
}
@media (max-width: 900px) {
/* iOS Safari zooms the whole page when a focused control is under 16px.
Name the CLASSES the stylesheet uses, not just the element types -- a
bare `input` selector loses on specificity to any `.field` rule and the
fix ships inert. That happened on the previous job. */
input, select, textarea, button,
.field, .field2, input[type="text"], input[type="email"], input[type="tel"] {
font-size: 16px;
}
input, select, textarea, button { min-height: 44px; }
/* every tap target reaches 44x44 */
nav a, .nav a, footer a, .btn { min-height: 44px; display: inline-flex;
align-items: center; }
/* a.tap is stamped at build time by mark_tap_targets(): a link that is the
whole of its
or
. min-WIDTH too -- an inline-flex box shrinks to
its text, and "Bonjing" is 60px wide however tall it is. */
a.tap { min-height: 44px; min-width: 44px; display: inline-flex;
align-items: center; }
.also li { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* --------------------------------------------------------------------------
The theme's own stylesheets ship untouched. Everything here is additive and
scoped to the blocks this rebuild introduces, so the original rendering is
unchanged.
-------------------------------------------------------------------------- */
/* The theme's header sits in normal flow but every archived page opens with a
full-bleed hero that pushes the content clear of it. A page built WITHOUT a
hero has nothing doing that job, so the navigation printed straight over the
first two hundred pixels of the menu -- measured, not guessed: .menu-wrap
ends at 184px while main.content started at 26px. Same class of defect as
the absolutely-positioned nav on the previous job, and the mobile audit now
checks landmark blocks for intersection so it cannot come back. */
body.bb-nohero main.content { padding-top: 196px; }
@media (max-width: 991px) { body.bb-nohero main.content { padding-top: 116px; } }
@media (max-width: 767px) { body.bb-nohero main.content { padding-top: 96px; } }
/* --------------------------------------------------------------------------
Mobile tap targets. Every selector below names markup that was MEASURED at
under 44x44 in the audit, at 320px and 390px; nothing here is precautionary
and nothing applies above 900px, so the desktop rendering is byte-for-byte
what the theme produces.
The class names matter. sitegen's shared block says `input, select, textarea
{ min-height: 44px }`, and this theme's Contact Form 7 fields carry
`.wpcf7-form-control { height: 40px }` -- a class selector, which beats a
bare element selector, so the shared rule shipped inert and the fields
measured 196x40. Second time that specificity trap has cost a build; the
answer is to name what the markup actually uses.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* the mobile menu is #mobile-menu-container, NOT the