, and section 2
gives every
a 1em bottom margin, which lands between the two rows. */
@media (max-width: 560px) {
.t-topbar-inner {
gap: 0 16px;
padding: 6px 0;
}
.t-topbar-start {
margin-bottom: 0;
padding-bottom: 0;
}
.t-topbar-end {
margin-top: 0;
padding-top: 0;
}
.t-topbar-start > *,
.t-topbar-end > *,
.t-topbar p,
.t-topbar ul,
.t-topbar div {
margin-block: 0;
}
.t-topbar a {
padding-block: 2px;
}
}
/* ---- 9.5d Search panel: stack the two halves instead of overflowing ----
The 3fr/2fr split leaves each input under ~150px below tablet width. */
@media (max-width: 992px) {
.t-feature-top .t-search-panel .t-search-panel-contents {
grid-template-columns: 1fr;
}
}
/* Single-column inputs on a phone.
NOTE the button: section 6 sets grid-column-start:1 / grid-column-end:3 on
it. In a one-column grid, line 3 does not exist, so the browser creates an
implicit second column to satisfy it — which is itself a cause of the page
scrolling sideways. grid-column: 1 / -1 spans "to the last line" whatever
the column count, so it is correct at every width. */
@media (max-width: 560px) {
.t-feature-top .t-search-panel .t-search-panel-contents .t-search-grid {
grid-template-columns: 1fr;
}
.t-feature-top .t-search-panel .t-search-panel-contents .t-search-grid button.t-btn {
grid-column: 1/-1;
}
}
/* ---- 9.5e Don't pull the search panel over the hero on phones ----
Two separate negative margins stack up here: .t-feature-top (-6rem,
section 6) and .t-search-panel (-40px, section 4). Zeroing only the first
still leaves the panel 40px over the hero image, so both are released. */
@media (max-width: 480px) {
.t-feature-top {
margin-top: 0;
}
.t-search-panel,
.t-feature-top .t-search-panel {
margin-top: 0;
}
}
/* =============================================================
9.6 MOBILE DRAWER — anchor it to the sticky header
The drawer used to be a normal-flow sibling after , i.e.
parked at the top of the document. .t-header is position:sticky, so
the burger follows you down the page while the panel did not: tapping
it at scroll offset 2000px opened the drawer 2000px above the
viewport. The click and the JS were fine — the panel was simply
off-screen, which read as "the burger does nothing unless you are at
the top of the page."
index.php now renders the drawer inside