/** * LefiL Theme — responsive breakpoint helpers. * Breakpoint: 1024px (Figma desktop frame 1440px / mobile frame 390px). * Any element carrying a class containing "--desktop" or "--mobile" is * toggled by this single rule set, so new sections don't need new CSS. * * This used to split at 768px while the header alone switched at 1024px * (its desktop nav — tagline + 5 links + pill button in one row — gets * uncomfortably tight before 768px). That mismatch left a 768-1024px "gap * zone" where the header showed its mobile hamburger UI while every other * section still rendered its desktop layout — and several sections * (Concept's absolutely-positioned photo scatter, News' 712px+520px+48px * grid, ~1280px min-width) were never designed to fit in that range, so * they visibly overflowed/broke there. Moving every section to the * header's 1024px breakpoint removes the mismatch; the simpler * (already-designed-for-390px) mobile layouts scale up to tablet widths * far more gracefully than the desktop ones scale down. * * NOTE 1: these elements always have other utility classes appended after * the --desktop/--mobile token (e.g. "site-header--desktop has-background"), * so this MUST be a substring match ([class*=]), not an ends-with match * ([class$=]) — ends-with only matches when --desktop/--mobile happens to * be the last class in the attribute, which is never the case here. * * NOTE 2: every rule here needs !important. WordPress's own block-library * CSS ships `body .is-layout-flex{display:flex}`, which has specificity * (0,1,1) — higher than a bare attribute selector (0,1,0) — and every one * of our flex-layout --desktop/--mobile groups carries the is-layout-flex * class. Without !important that core rule silently wins regardless of * source order, and both variants stay visible at every width. * * NOTE 3: when a hidden group is revealed again, it needs the SAME display * value it would have had natively — "flex" for a flex-layout group (the * WP-added is-layout-flex class marks these), "block" for a constrained/ * flow-layout group (the block default). A single blanket display value * would break whichever type it doesn't match, so the two are split below. */ /* * WordPress's global styles apply the root blockGap (24px) to every * top-level block inside .wp-site-blocks via * :where(.wp-site-blocks) > * { margin-block-start: ... } — a LOGICAL * property, not margin-top, so a plain margin-top:0 silently loses (it's a * different property that happens to map to the same physical edge). * Targeting .wp-block-group directly also missed the footer's case: the * block renders an EXTRA wrapping