/* aibotkit-child · chrome.css — the two things Tailwind utilities cannot express. * * ⛔ EVERYTHING ELSE ABOUT THE HEADER AND FOOTER IS `tw:` UTILITIES IN THE PART * MARKUP. That is the settled architecture: tokens and Tailwind compose the * design system, and a hand-written stylesheet is where a decision goes to hide. * Only two things are here, and both are genuinely out of reach of a utility: * a scroll-driven @keyframes, and the @supports guard around it. * * ⛔ NO CASCADE LAYER -- see KD36 and the note in src/css/main.css. */ /* ── ⛔ THE SPECIFICITY FLOOR, AND IT IS THE REASON THIS SECTION EXISTS ─────── * * U1a took Tailwind's utilities out of their cascade layer, which was necessary * and is NOT sufficient. WordPress prints its layout rules from theme.json with * selectors that carry one more unit of specificity than a single class: * * .is-layout-flex > :is(*, div) { margin: 0 } * :root :where(.is-layout-constrained) > :last-child { margin-block-end: 0 } * * `:is(*, div)` takes the specificity of its strongest argument, so that first * selector is (0,1,1) against `.tw\:ml-auto`'s (0,1,0). ⛔ CORE WINS WHEREVER * tw.css SITS IN LOAD ORDER -- load order cannot win a specificity argument. * Measured 2026-09-19: `tw:ml-auto` was in the DOM, in the stylesheet, and * computed to `margin-left: 0px`. * * ⭐ THE SCOPE IS NARROW AND WORTH KNOWING: core only resets MARGIN this way. * Padding, colour, size, flex and display utilities are unaffected. So a margin * utility inside a WordPress layout container needs the `!` suffix -- * `tw:ml-auto!` -- and everything else does not. * * ⚠ style.css:27-31 recorded this same trap for `.abk-nav-*` in an earlier * unit. It is the same mechanism in a new place, and it will keep recurring. */ /* ── the header's own layout ───────────────────────────────────────────────── * Two classes deep throughout, for the reason above. */ .wp-block-group.hdr__bar { width: min(1360px, calc(100% - 80px)); } .wp-block-site-logo.hdr__logo { flex: none; } .wp-block-site-logo.hdr__logo img { height: 30px; width: auto; } /* ⭐ THE NAV TAKES THE AUTO MARGIN, so it is pressed against the actions * rather than centred in the bar. */ .wp-block-group.hdr__nav { margin-left: auto; gap: var(--wp--custom--space--sm); } /* ⛔ R17 IS BOTH AXES. These were 44px tall and 29px wide ("Docs"). WCAG * 2.5.8's inline exemption does not reach a nav link: it is not in a sentence, * and nothing constrains it but our own layout. */ .hdr__nav a.wp-block-navigation-item__content, .hdr__login a { font-size: var(--wp--custom--step--body-small); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--text); color: var(--wp--custom--color--body); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: var(--wp--custom--space--sm); } .hdr__nav a.wp-block-navigation-item__content:hover, .hdr__login a:hover { color: var(--wp--custom--color--heading); } /* ⛔ `Log in` IS A TEXT LINK, NOT AN OUTLINED BUTTON. It was 88 x 42 with a * 1px ring; the prototype is 53 x 44 with no border. Two adjacent buttons read * as two equal offers, and there is only one brand action. */ .wp-block-group.hdr__acts { display: flex; align-items: center; flex: none; gap: var(--wp--custom--space--xs); } p.hdr__login { margin: 0; white-space: nowrap; } .hdr__cta .wp-block-button__link { font-size: 1rem; padding: 0 var(--wp--custom--space--md); min-height: 44px; display: inline-flex; align-items: center; } /* ⛔ THE BREAKPOINT IS 900, NOT 1024. * 1024 came from Elementor's tablet breakpoint and is recorded in style.css. * The design system breaks at 900, measured: logo 90 + Log in 62 + the button * 132 + the 44px burger does not fit below that. ⭐ Only `Log in` leaves. The * button stays, because it is the one brand action. */ .wp-block-group.hdr__burger { display: none; } @media (max-width: 900px) { .wp-block-group.hdr__nav { display: none; } p.hdr__login { display: none; } .wp-block-group.hdr__burger { display: flex; } /* ⭐ THE BURGER SITS ON THE BAR'S RIGHT EDGE. It was inboard of the bar's * own padding, so it read as floating rather than as the bar's corner. */ .wp-block-group.hdr__bar { padding-right: var(--wp--custom--space--xs); } /* ⛔ THE AUTO MARGIN LIVED ON THE NAV, WHICH IS HIDDEN AT THIS WIDTH, so * nothing pushed the actions right. The actions take it themselves. */ .wp-block-group.hdr__acts { margin-left: auto; gap: var(--wp--custom--space--sm); } } /* ⛔ THE BURGER IS A 44px TARGET, AND CORE SHIPS IT AT 24. * R17 is both axes. It also matters to LAYOUT, not only to the finger: the * 20px shortfall pulled the CTA 20px right of where the prototype puts it, * because the actions row is packed from the right edge. Measured 2026-09-19. * ⚠ Core's own button carries no size of its own -- it is an icon in a * zero-padding button -- so both the button and its nav wrapper are sized. */ .hdr__burger .wp-block-navigation__responsive-container-open, .hdr__burger .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--wp--custom--color--heading); } .hdr__burger .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; } .wp-block-group.hdr__burger, .hdr__burger nav.wp-block-navigation { min-height: 44px; align-items: center; } @media (max-width: 520px) { .wp-block-site-logo.hdr__logo img { height: 24px; } } /* ── the offset the fixed header needs ─────────────────────────────────────── * * ⛔ A FIXED HEADER TAKES ITSELF OUT OF FLOW, SO NOTHING RESERVES ITS SPACE. * Without this the bar sits on top of whatever is at the top of the page. On a * page whose hero is DESIGNED to run under a transparent bar that is the point; * on the other 21 pages it simply covers the first few centimetres of content. * * ⭐ 76px = 12px inset + a 64px bar, MEASURED rather than chosen: the bar is * 64px on the rendered page and 64px in the prototype. ⚠ If the bar's padding * or the logo size changes, re-measure -- this number is not derived from them. * * ⛔ THE BAR CONTRACTS BUT NEVER GETS TALLER, so one value covers both states. * * ⭐ `.abk-hero-under` OPTS A PAGE OUT, for a hero built to run beneath the * transparent bar. U6 puts it on 4925. Nothing carries it yet, on purpose: * every page gets the offset until its hero is rebuilt to earn the exception. */ /* ⚠ NOT `.wp-site-blocks > *:first-child` -- THE HEADER IS THAT CHILD. * It is inside wp-site-blocks like everything else, so the obvious selector * pads the header and leaves the content exactly where it was. The padding * belongs on the container. */ body:not(.abk-hero-under) .wp-site-blocks { padding-block-start: 76px; } /* ⚠ AND THE ANCHOR OFFSET, which is the half people forget. An in-page link * scrolls its target to y=0, which is underneath the fixed bar. */ :root { scroll-padding-top: 88px; } /* ── R29 · the header is a floating object that contracts on scroll ────────── * * Measured on voiceflow: fixed, 12px from the top, 1360 wide inset 40, radius * 12, contracting to 880. Plus arcade's fill: the bar is INVISIBLE over the * hero and only assembles itself once there is content to sit on. * * ⛔ OPAQUE, NEVER GLASS at rest. A glass bar needs a light variant, a dark * variant and logic to switch between them; our floor is plain by choice, so * glass would show nowhere and cost all three. */ .hdr__bar { background: transparent; backdrop-filter: blur(0px); box-shadow: none; animation: hdr-veil linear both; animation-timeline: scroll(root block); animation-range: 0 240px; } @keyframes hdr-veil { to { width: min(880px, calc(100% - 80px)); background: color-mix(in oklab, var(--wp--custom--color--paper) 78%, transparent); backdrop-filter: blur(16px); box-shadow: var(--wp--custom--shadow--edge); } } /* ── ⛔ SVC-5 · THE FIREFOX FIX, AND IT IS NOT THE GUARD THAT WAS THERE ─────── * * Firefox does not support `animation-timeline`. It does NOT ignore the rule -- * it falls back to the document timeline, where an absent `animation-duration` * computes to 0s, and `animation-fill-mode: both` then jumps straight to the * END keyframe on load. So the bar paints its SCROLLED state at scroll 0: an * 880px white blurred panel sitting over the hero. Reproduced in Firefox 153. * * ⛔ THE GUARD THAT WAS HERE TESTED `backdrop-filter`, WHICH PROTECTED NOTHING. * Measured 2026-09-19: backdrop-filter is TRUE in Chromium AND in Firefox, so * the guard never fired in the browser that needed it. `animation-timeline` * is the property that actually separates them -- true in Chromium, false in * Firefox, checked in both. * * ⭐ ALPESH CHOSE THE STATIC FULL-WIDTH HEADER for browsers without the * feature, 2026-09-19. The contraction is a flourish, not information, and it * is not worth JavaScript on every page. * * ⚠ THE VEIL IS KEPT, ONLY THE MOVEMENT IS DROPPED -- the same conclusion the * reduced-motion rule below reached, for the same reason. Turning the animation * off entirely leaves the bar transparent at every scroll position, and the * navigation then vanishes over a white section. R26 asks for an alternative, * never for nothing. */ @supports not (animation-timeline: scroll(root block)) { .hdr__bar { animation: none; width: min(1360px, calc(100% - 80px)); background: color-mix(in oklab, var(--wp--custom--color--paper) 78%, transparent); backdrop-filter: blur(16px); box-shadow: var(--wp--custom--shadow--edge); } } /* ⛔ REDUCED MOTION CANNOT MEAN INVISIBLE -- see the note above. */ @media (prefers-reduced-motion: reduce) { .hdr__bar { animation: none; width: min(1360px, calc(100% - 80px)); background: color-mix(in oklab, var(--wp--custom--color--paper) 78%, transparent); backdrop-filter: blur(16px); box-shadow: var(--wp--custom--shadow--edge); } } /* ⚠ A browser with no backdrop-filter would show text on a 78% wash over live * content. The fallback is an opaque panel -- quieter, never unreadable. */ @supports not (backdrop-filter: blur(1px)) { .hdr__bar { background: var(--wp--custom--color--tint); } @keyframes hdr-veil { to { width: min(880px, calc(100% - 80px)); background: var(--wp--custom--color--tint); box-shadow: var(--wp--custom--shadow--edge); } } } /* ── the footer ────────────────────────────────────────────────────────────── * Two classes deep, or `:root`-prefixed, throughout -- see the specificity note * at the top of this file. */ .wp-block-group.ftr { overflow: hidden; background: var(--wp--custom--color--d-neutral); /* ⛔ SET THE INK, NOT ONLY THE GROUND. Without this every paragraph in the * footer inherits the page's body colour -- #0C0C09 on #3E3E2C, which is * 1.4:1 and unreadable. Measured 2026-09-19: the copyright line was * rendering near-black on the dark ground. */ color: var(--wp--custom--color--ink-body); /* ⚠ FLUID, NOT FIXED. It was a flat 96px at every width; the prototype runs * 44px at 390 to 112px at 1440, so the footer read cramped on a phone and * short on a desktop. */ padding-block: clamp(2.75rem, 7.8vw, 7rem) 0; padding-inline: var(--wp--custom--width--gutter); } /* ── the closing CTA band ──────────────────────────────────────────────────── * ⭐ CENTRED. It was aligned to the grid's left edge on my own reasoning and * Alpesh overruled that on 2026-09-16: "shouldn't that be centre-aligned?" */ .wp-block-group.ftr__cta { max-width: 860px; margin: 0 auto var(--wp--custom--space--4-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--wp--custom--space--xl); flex-wrap: wrap; padding: var(--wp--custom--space--xl) var(--wp--custom--space--2-xl); border-radius: var(--wp--custom--rounded--lg); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp--custom--color--ink-body) 18%, transparent); } .wp-block-group.ftr__cta-copy > * { margin: 0; } /* ⛔ A FOOTER COLUMN HEAD IS NOT A PAGE SECTION. They were `

`, so the heading outline told a reader -- and an AI assistant, which PRODUCT.md names as arrival route 3 -- that this page has top-level sections called Products, Resources and Policies. `A TAG IS NOT A SIZE`. They are now `

`, and this rule reproduces the paint they already had: 14px, weight 500, ink-heading, which theme.json's global `elements.h2` was giving them. SVC-13. */ :root .ftr__colhead { font-size: var(--wp--custom--step--body-small); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--text); color: var(--wp--custom--color--ink-heading); margin: 0; } :root .wp-block-group.ftr__cta h2 { color: var(--wp--custom--color--ink-heading); font-size: var(--wp--custom--step--subsection); line-height: var(--wp--custom--leading--display); letter-spacing: var(--wp--custom--tracking--display); } /* ⛔ --ink-body, AND THE PROTOTYPE'S NOTE EXPLAINS WHY IT IS NOT --ink-muted. * That declaration asked for muted and painted body, because a more specific * rule won; it therefore passed contrast BY ACCIDENT at 6.682, and anyone who * "fixed" the specificity would have dropped it to 4.395 -- under the floor. * It declares what it paints. */ :root .wp-block-group.ftr__cta p.ftr__cta-eyebrow { color: var(--wp--custom--color--ink-body); font-size: var(--wp--custom--step--body-small); margin-block-start: var(--wp--custom--space--xs); } /* The banner button inverts: paper ground, ink label. */ :root .ftr__cta-act .wp-block-button__link { background: var(--wp--custom--color--paper); color: var(--wp--custom--color--ink); border-radius: var(--wp--custom--rounded--sm); font-size: 1rem; min-height: 48px; padding: 0 var(--wp--custom--space--lg); display: inline-flex; align-items: center; } :root .ftr__cta-act .wp-block-button__link:hover { background: var(--wp--custom--color--ink-heading); } /* ⭐ THE SECOND BUTTON IS QUIET, and it is quiet by GROUND, not by size. * It keeps the neighbour's height and radius, so the pair reads as one * control group; only the fill differs. Alpesh made the booking link global * on 2026-09-19 (U7c). * ⛔ The hairline is `paper`, not a literal: the band sits on the dark footer * ground, where an ink border is invisible. */ :root .ftr__cta-act .ftr__cta-alt .wp-block-button__link { background: transparent; color: var(--wp--custom--color--paper); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp--custom--color--paper) 42%, transparent); } :root .ftr__cta-act .ftr__cta-alt .wp-block-button__link:hover { background: color-mix(in oklab, var(--wp--custom--color--paper) 14%, transparent); } @media (max-width: 620px) { .wp-block-group.ftr__cta { padding: var(--wp--custom--space--lg); gap: var(--wp--custom--space--lg); } .ftr__cta-act, .ftr__cta-act .wp-block-button, :root .ftr__cta-act .wp-block-button__link { width: 100%; justify-content: center; } } .wp-block-group.ftr__grid { display: grid; max-width: var(--wp--custom--width--figure); margin-inline: auto; /* ⭐ 64px BETWEEN ROWS, 48px BETWEEN COLUMNS. They are not the same number. */ gap: var(--wp--custom--space--3-xl) var(--wp--custom--space--2-xl); } @media (min-width: 760px) { /* ⚠ 760, not Tailwind's 768: the prototype's own column breakpoint. */ .wp-block-group.ftr__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .ftr__logo { display: inline-flex; color: var(--wp--custom--color--ink-heading); } .ftr__logo svg { display: block; height: 42px; width: auto; } .wp-block-group.ftr__brand { max-width: 44ch; } p.ftr__blurb { color: var(--wp--custom--color--ink-body); font-size: var(--wp--custom--step--body-small); margin-block-start: var(--wp--custom--space--md); } /* ⛔ `.ftr__grid` AND NOT `.ftr`, AND THE DIFFERENCE IS A LIVE DEFECT. * `.ftr__cta` sits INSIDE `.ftr`, so `:root .wp-block-group.ftr h2` matched * the closing band's headline too -- same (0,3,1) as the rule 54 lines above * it, and later in the file, so it won. The band's headline painted at 14px * on all 22 pages while its own rule asked for 28px. * ⭐ THE THIRD TIME TODAY THAT ONE OF MY RULES BEAT ANOTHER OF MY RULES: the * footer button, the footer eyebrow, and now this. Two rules of equal * specificity in one file are decided by ORDER, and order is invisible when * you are reading either rule on its own. Scope by the nearest wrapper, not * by the outermost one. Found by ops/measure/check-law.js assertion 8, which * reads tracking off the RENDERED size -- a 28px heading painting at 14px * shows up there as the wrong tracking tier. */ :root .wp-block-group.ftr__grid h2 { color: var(--wp--custom--color--ink-heading); font-size: var(--wp--custom--step--body-small); font-weight: var(--wp--custom--weight--emphasis); /* ⛔ 14px IS THE TEXT TIER, AND theme.json'S h2 RULE GIVES EVERY h2 THE * DISPLAY TRACKING. Tracking follows the RENDERED SIZE, never the tag. * Without this the three column headings tracked -0.0071 at 14px. */ letter-spacing: var(--wp--custom--tracking--text); margin: 0; } /* ⛔ A BUTTON IS NOT A FOOTER TEXT LINK, AND IT HAS TO BE SAID HERE. * This selector is (0,3,1) -- three classes plus the `a` type -- so it beat the * (0,3,0) rule that colours the closing CTA's button, and "Start free" painted * near-white on its own white ground. Measured 2026-09-19. ⭐ The prototype * records the identical trap one rule away, for `.ftr__cta .eyebrow`: same * class count, one extra type selector wins. */ :root .ftr a:not(.ftr__logo):not(.wp-social-link-anchor):not(.wp-block-button__link) { color: var(--wp--custom--color--ink-body); font-size: var(--wp--custom--step--body-small); text-decoration: none; } :root .ftr a:not(.ftr__logo):not(.wp-social-link-anchor):not(.wp-block-button__link):hover { color: var(--wp--custom--color--ink-heading); } /* ⛔ R17 AGAIN -- a social icon was a 24px target. */ .ftr__social .wp-social-link a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* ⛔ 14px ON --ink-body, NOT 12px ON --ink-muted. * Measured: 12px muted is 4.395:1 on this ground -- under the 4.5 floor. The * prototype had already found and fixed that exact pair; ours reintroduced it. */ .wp-block-group.ftr__legal { max-width: var(--wp--custom--width--figure); margin-inline: auto; margin-block-start: var(--wp--custom--space--2-xl); padding-block-start: var(--wp--custom--space--lg); border-block-start: 1px solid var(--wp--custom--color--ink-hairline); } :root .ftr .wp-block-group.ftr__legal p, :root .wp-block-group.ftr__legal p { color: var(--wp--custom--color--ink-body); font-size: var(--wp--custom--step--body-small); margin: 0; } /* ── the giant cropped wordmark ────────────────────────────────────────────── * ⛔ THE CROP IS A NEGATIVE BOTTOM MARGIN, AND CORE ZEROES IT. * `:root :where(.is-layout-constrained) > :last-child { margin-block-end: 0 }` * is (0,2,0); a single `.ftr__wordmark` is (0,1,0), so the margin computed to * 0px and nothing was cropped at any width. Measured 2026-09-19. The `:root` * prefix here makes it (0,2,0) and later in the sheet, so it wins. * ⭐ -0.22em, not -0.18: 0.22 x 240px = 52.8px, the prototype's crop to the pixel. */ :root .ftr p.ftr__wordmark { font-size: clamp(4rem, 19vw, 15rem); font-weight: var(--wp--custom--weight--display); line-height: var(--wp--custom--leading--wordmark); letter-spacing: var(--wp--custom--tracking--display); text-align: center; color: color-mix(in oklab, var(--wp--custom--color--paper) 7%, var(--wp--custom--color--d-neutral)); margin: 0 0 -0.22em; user-select: none; } /* =========================================================================== ⛔ THE CLOSING BAND'S HEADLINE CROSSES A TRACKING TIER, AND THE BREAKPOINT IS DERIVED. It takes `step--subsection`, clamp(1.375rem, 2vw, 1.75rem), whose viewport term reaches 28px at exactly 1400px. Below that the heading renders under 28px and belongs to the LEAD tier, not the display tier. ⚠ AT THE END OF THE FILE ON PURPOSE: a media query adds no specificity, so an override placed above the rule it corrects loses on source order -- at one width only, which is the hardest kind of defect to see. =========================================================================== */ @media (max-width: 1399px) { :root .wp-block-group.ftr__cta h2 { letter-spacing: var(--wp--custom--tracking--lead); } } /* ── ⛔ THE TWO DROPDOWNS, AND NEITHER WAS EVER DESIGNED ────────────────────── * * ⚠ ALPESH FOUND BOTH ON 2026-09-20: "we never designed this dropdown popup, * right? It currently has pointy edges... Also in the mobile version when you * click the hamburger menu, the dropdown is not occurring... The mobile version * is majorly broken." * * ⭐ HE IS RIGHT ON BOTH, AND THEY ARE THE SAME OMISSION: `U5` built the header * BAR and never styled what opens out of it. Measured before the fix -- * the desktop panel painted WordPress's raw default: `border-radius: 0px`, * `box-shadow: none`, a `1px solid rgba(0,0,0,0.15)` border, items centred by * `.hdr__nav a` reaching inside it. * * ⛔ AND THE MOBILE BREAK HAS A CAUSE WORTH KEEPING. Core's overlay is * `position: fixed; inset: 0`. It measured **310 x 64 at top 12** -- the BAR's * own box. ⭐ PROVED with a probe: a bare `position:fixed;inset:0` div appended * to `.hdr__bar` measures the same 310 x 64. * `.hdr__bar` runs `hdr-veil`, which applies `backdrop-filter`, and * ⛔ **`backdrop-filter` ANY value but `none` makes an element a CONTAINING * BLOCK for fixed-position descendants.** ⚠ Setting `backdrop-filter: none` * inline did NOT release it, because an ACTIVE ANIMATION outranks an inline * declaration. The bar can never stop being a containing block while the * veil runs. * * ⭐ SO THE FIX IS NOT TO FIGHT IT. The prototype's mobile menu was never a * full-screen modal: `.nav__sheet` is a 272px panel anchored under the burger. * An ABSOLUTE panel does not care what the containing block is. The bug and the * design want the same thing. * * ⭐ ONE VOCABULARY, WHICH IS ALPESH'S OWN RULING OF 2026-09-16: "it should be * as per our design system. The dropdown needs a white background with the font * colour we have on the desktop version." So the phone sheet IS the desktop * panel at a phone's size -- same ground, same ink, same radius, same shadow. * * SPECIFICITY: core prints its submenu rules at (0,2,0) and its stylesheet can * load after ours, so a tie loses. `:root` takes these to (0,3,0). */ /* A · the desktop panel — the prototype's `.nav__menu` */ :root .hdr__nav .wp-block-navigation__submenu-container { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 232px; width: max-content; display: grid; gap: 2px; padding: var(--wp--custom--space--sm); border: 0; border-radius: var(--wp--custom--rounded--md); /* ⛔ OPAQUE, NEVER A VEIL — R30. A panel that shows the page through it is * a different object from the one the law describes. */ background: var(--wp--custom--color--paper); box-shadow: var(--wp--custom--shadow--depth); } /* ⛔ AND THE WIDTH NEEDS THE OPEN-STATE SELECTOR, NOT THE BASE ONE. * Measured with the browser's own cascade: the rule that wins is * `.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container` * at ⛔ **(0,5,0)** — an attribute selector counts as a class — and it applies * `min-width:200px; width:auto` only while the panel is open, which is the only * time the width is visible. ⚠ The base rule above is (0,3,0) and loses to it, * which is why a 232px minimum kept painting at 200. ⛔ AND THE FIRST ATTEMPT AT * THIS RULE WAS (0,4,0) AND ALSO LOST — the count has to be done, not estimated. * This selector is (0,6,0). */ :root .hdr__nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { min-width: 232px; width: max-content; } /* ⛔ `.hdr__nav a` CENTRES THESE ITEMS FROM OUTSIDE. The prototype hit the same * trap and solved it the same way: raise the specificity and STATE the * alignment rather than trusting a default the parent already overrode. */ :root .hdr__nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content { justify-content: flex-start; min-height: 40px; min-width: 0; padding: 0 var(--wp--custom--space--sm); border-radius: var(--wp--custom--rounded--sm); white-space: nowrap; } :root .hdr__nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover, :root .hdr__burger .wp-block-navigation__responsive-container a.wp-block-navigation-item__content:hover { background: var(--wp--custom--color--tint); color: var(--wp--custom--color--heading); } /* The caret turns when the group is open, as it does in the prototype. */ :root .hdr .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing); } /* ⛔ TWO SHAPES, BECAUSE CORE BUILDS THE TOGGLE TWO WAYS — measured, not read. * desktop: ONE element is both, `button.wp-block-navigation__submenu-icon * .wp-block-navigation-submenu__toggle[aria-expanded]` * overlay: a `button` plus a SEPARATE sibling `span.…__submenu-icon` * ⚠ A selector written for one matches NOTHING in the other and fails * silently, which is how the caret sat still through two rounds. */ :root .hdr [aria-expanded="true"].wp-block-navigation__submenu-icon svg, :root .hdr [aria-expanded="true"] ~ .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { :root .hdr .wp-block-navigation__submenu-icon svg { transition: none; } } /* B · the phone sheet — the prototype's `.nav__sheet`, and the fix for the * containing block at the same time. */ .wp-block-group.hdr__burger { position: relative; } @media (max-width: 900px) { :root .hdr__burger .wp-block-navigation__responsive-container.is-menu-open { position: absolute; inset: auto 0 auto auto; top: calc(100% + 10px); /* ⛔ 220px, FIXED, AND IT NEVER CHANGES WITH THE DISCLOSURE. * ⚠ max-content WAS TRIED FIRST AND HE REFUSED IT: it made the panel * 126px closed and 272px open, and Alpesh, 2026-09-23: "when you open * the dropdown, the pop-up width increases. I think that looks bad... * whenever the dropdowns are open, the width should not increase." * ⭐ HE IS RIGHT AND THE REASON IS WHAT THE PANEL IS: a popover is one * object, and an object that resizes when you touch it reads as the * page reflowing, not as a menu opening. * ⚠ AND 272 WAS THE OTHER COMPLAINT -- "too much white space on the * left". So the number had to be the NARROWEST width at which nothing * wraps, not either end. * ⭐ 220 WAS FOUND BY PAINTING, NOT BY ARITHMETIC. 220, 250 and 272 were * rendered with a group open; at 220 every row, including the longest * -- "AI Chatbot for WordPress" -- still sits on ONE line. A * scrollWidth probe had reported no overflow at 200 either, and it was * wrong: the row is a flex container and its text node is not what * scrollWidth measures. The eye on the paint settled it. */ width: min(220px, calc(100vw - 56px)); min-width: 0; max-width: none; display: block; /* ⛔ NO PADDING HERE, AND THAT IS THE FIX FOR THE JUMPING BURGER. * The close button is pinned to this panel, so the panel's 8px of * padding displaced it by exactly 8px left and 8px down -- measured, * 302,22 at rest against 294,30 open. The padding moves to the list * inside, where it does the same visual job and moves nothing. */ padding: 0; border-radius: var(--wp--custom--rounded--md); background: var(--wp--custom--color--paper); box-shadow: var(--wp--custom--shadow--depth); overflow: visible; } /* Core wraps the content in two boxes that exist to centre a full-screen * modal. In a 272px popover they only add width constraints. */ /* ⛔ AND THE PADDING IS THE POINT, NOT ONLY THE WIDTH. Core reserves room * at the top of the dialog for a full-screen modal's close button, which * put 64px of empty paper above the first row of a 272px popover. Our * close button sits OUTSIDE the panel, where the burger was. */ :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-close, :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-dialog, :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-container-content { max-width: none; width: 100%; padding: 0; margin: 0; } /* ⛔ `grid-template-columns: 1fr`, AND WITHOUT IT `width: 100%` RESOLVES * AGAINST NOTHING. A default grid has ONE `auto` column sized to its * content, so a full-width child fills a column that is itself only as wide * as the longest label. Measured: every row right-aligned to the same * place, and that place was 188px short of the panel's edge. */ :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-container-content, :root .hdr__burger .is-menu-open .wp-block-navigation__container, :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-container { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; } /* ⛔ `box-sizing` IS NOT SET BY WORDPRESS, AND THIS IS THE THIRD TIME IT HAS * COST US. `sections.css` scopes `border-box` to `.section *`, and the * header is not in a section -- so `width: 100%` plus 8px of padding * overflowed by 16px and a right-aligned label sat 8px OUTSIDE the panel. * Measured `About Us: -8`. Scoped to the sheet, not global, because a * global reset here would reach every block on every page. */ :root .hdr__burger .is-menu-open, :root .hdr__burger .is-menu-open *, :root .hdr__burger .is-menu-open *::before, :root .hdr__burger .is-menu-open *::after { box-sizing: border-box; } /* The panel's inset lives here now — see the note on the panel. */ :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-container-content { padding: var(--wp--custom--space--sm); justify-items: stretch; } /* ⛔ AND THE LIST WAS 92px INSIDE A 272px PANEL. It is a grid item that * shrank to its widest label, so every row was content-width and "right" * meant five different places. Measured before anything else was believed. */ :root .hdr__burger .is-menu-open ul.wp-block-navigation__container, :root .hdr__burger .is-menu-open ul.wp-block-navigation__submenu-container { width: 100%; } /* ⭐ RIGHT-ALIGNED, AND ALPESH SETTLED IT FROM A SCREENSHOT ON 2026-09-20: * "everything should be right-aligned there in the menu item and in the * arrow... since all the menu items are right-aligned, it also looks like * it is beside the menu item." * ⭐ THAT IS WHY THE CARET NEEDS NO SEPARATE DECISION. Voiceflow packs the * row to the right, so the caret lands beside its label AND on the panel's * edge at the same time -- the two answers I was about to ask him to choose * between turn out to be one answer. * ⛔ AND IT IS THE ALIGNMENT ONLY. He refused Voiceflow's sheet on * 2026-09-16 -- "we have verbatim copied the voiceflow one" -- and what he * refused was the DARK GROUND and its ink. The panel stays paper with body * ink. Take the idea, never the artefact. */ :root .hdr__burger .is-menu-open a.wp-block-navigation-item__content, :root .hdr__burger .is-menu-open button.wp-block-navigation-item__content { justify-content: flex-end; text-align: right; min-height: 44px; padding: 0 var(--wp--custom--space--sm); border-radius: var(--wp--custom--rounded--sm); font-size: var(--wp--custom--step--body-small); font-weight: var(--wp--custom--weight--emphasis); letter-spacing: var(--wp--custom--tracking--text); color: var(--wp--custom--color--body); text-decoration: none; } /* A sub-item is quieter than its parent, and indented rather than ruled. * ⛔ AND IT IS CLOSED UNTIL ASKED FOR. `position: static` alone left every * child rendered and visible: the sheet measured 632px with 12 rows on an * 800px screen. The prototype opens ONE group at a time. * ⚠ THE TOGGLE IS NOT THE SUBMENU'S PREVIOUS SIBLING -- a `span` for the * caret sits between them -- so this is `~`, not `+`. Measured, because the * obvious selector silently matches nothing. */ /* ⚠ THE INDENT SWAPS SIDES WITH THE ALIGNMENT. Indenting from the left * while the type is right-aligned indents nothing a reader can see. */ :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-container { position: static; width: 100%; border: 0; box-shadow: none; background: transparent; padding: 0 var(--wp--custom--space--sm) 0 0; display: none; gap: 2px; } /* ⛔ `data-abk-open`, NOT `aria-expanded`. hdr-menu.js owns the disclosure * inside the sheet because core's `handleMenuFocusout` closes a group the * moment focus moves to the next one. The attribute a guard or a stylesheet * reads must be one thing writes -- two writers is the defect, not the * selector. */ :root .hdr__burger .is-menu-open [data-abk-open="true"] > .wp-block-navigation__submenu-container { display: grid; } :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content { min-height: 40px; font-weight: var(--wp--custom--weight--body); color: var(--wp--custom--color--secondary); } /* ⛔ CORE'S FULL-SCREEN-MODAL PADDING REACHES THE SUBMENU, AND IT IS 2rem. * `.wp-block-navigation__responsive-container.is-menu-open * .wp-block-navigation__responsive-container-content ... { padding-inline: * 2rem }` matched our submenu and beat our own `0 8px 0 0` -- named by * CDP's CSS.getMatchedStylesForNode, because a stylesheet scan for * "padding-right" would have found our rule and stopped. [Gotcha 67] * ⚠ MEASURED: the sub-rows ended at x=306 while every parent row ended at * x=338. Alpesh saw it as "not right-aligned", and that is exactly what a * 32px inset on a right-aligned list looks like. * ⭐ THE INDENT IS KEPT, AT 16px, AND IT IS NOW OURS. A sub-item should sit * inboard of its parent -- that is how the group reads as a group -- but * 16px is a deliberate step, not core's modal gutter arriving by accident. */ /* ⚠ THE SELECTOR CARRIES SIX CLASSES BECAUSE CORE'S CARRIES FIVE, AND THE * FIRST ATTEMPT AT FOUR LOST SILENTLY -- the padding stayed at 32px and the * measurement said so. Core's is * `.wp-block-navigation__responsive-container.is-menu-open * .wp-block-navigation__responsive-container-content .has-child * .wp-block-navigation__submenu-container` = (0,5,0) * ⭐ THE NUMBER IS THE ARGUMENT. This is not "add a class until it works"; * the browser named the winning rule, its weight was counted, and this * one is one step above it. */ :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { padding: 0 var(--wp--custom--space--md) 0 0; } /* ⚠ AND THE ROWS CLOSE UP. Alpesh: "there is too much spacing... between * the menu items." Measured 45px of pitch for a 40px row. The sub-list is * a nested group and reads as one block, so its rows sit tighter than the * top level's -- 0 gap against the parents' 2px, and the row keeps its own * 36px so the tap target stays honest at the AA floor for a sub-item. */ :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-container { gap: 0; } :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-container li { margin: 0; } :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content { min-height: 36px; } /* ⛔ THE CARET AND ITS LABEL WERE OVERLAPPING BOXES, NOT MERELY CLOSE. * Measured: the label's box ended at x=320.4 and the caret's box began at * x=312 -- eight pixels of overlap, because core gives the icon a negative * inline margin. Alpesh: "the arrow icons are too jammed into the menu * items. A bit of spacing needs to be done." * ⭐ THE ROW OWNS THE GAP NOW. The `li` is already a flex row packed right, * so one `gap` puts real air between the two and cannot be eaten by * either child's padding. The icon's own side padding drops to zero so * the gap is the only thing between them -- one number, one place. * ⚠ 4px, NOT 8. 8px was the first value and Alpesh halved it on sight: * "you added too much gap between the arrow and the menu item." ⭐ The * caret is punctuation on its label, not a separate control -- it should * read as attached to the word, and 8px had started to detach it. */ :root .hdr__burger .is-menu-open li.has-child { gap: var(--wp--custom--space--xs); } :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-icon { margin: 0; padding-left: 0; padding-right: 0; } /* ⛔ CORE HIDES THE CARET IN THE OVERLAY -- measured `display: none` -- so a * group that opens on tap gave no sign that it could be tapped. The * prototype's sheet shows the same chevron the desktop shows, and turns it. */ /* ⚠ NO AUTO MARGIN. The row is packed right, so the caret is already at * the edge; an auto margin would push the LABEL left and undo it. */ :root .hdr__burger .is-menu-open .wp-block-navigation__submenu-icon { display: inline-flex; align-items: center; /* ⚠ A LEFT GAP TOO. The label's own right padding ends where the caret's * box begins, so the two read as one word -- measured 2px of air * between the glyphs. */ /* ⛔ `width: auto` OR THE PADDING BUYS NOTHING. Core gives the caret a * fixed width, and with `border-box` now in force that width ate both * paddings: the content box collapsed and the 10px glyph overflowed 2px * PAST its own right edge. Measured glyph at 6 where the labels sit at * 16. ⚠ The `border-box` fix above is what made this appear -- a fix * that changes a box model changes every box in its scope. */ width: auto; height: 44px; /* 4px read as a collision at 390 -- the caret touched the label's last * letter. 8px is the same air the desktop bar gives it. */ padding-left: var(--wp--custom--space--sm); padding-right: var(--wp--custom--space--sm); color: var(--wp--custom--color--secondary); pointer-events: none; } /* ⛔ `width: 100%` WAS HERE AND IT FORCED THE WRAP. With the group's `li` * now a flex row, a full-width label pushes the caret onto a line of its * own -- which is the fault it was written to avoid, one round earlier. */ :root .hdr__burger .is-menu-open button.wp-block-navigation-submenu__toggle { justify-content: flex-start; } /* ⛔ THE CLOSE BUTTON STAYS, AND THE PROTOTYPE HAS NONE. Core's overlay * takes focus and listens for Escape; removing its only visible exit would * strand a keyboard user inside a panel. It sits where the burger sat. */ :root .hdr__burger .is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: calc(-10px - 44px); right: 0; width: 44px; height: 44px; } /* ⚠ CORE LOCKS PAGE SCROLL FOR A MODAL. This is a popover over a page the * reader can still see, so the lock is wrong here. */ html.has-modal-open { overflow: auto; } } /* ── ⛔ ROUND 2 ON THE MENUS — ALPESH, 2026-09-20: "Still not implemented well" ── * * ⭐ MEASURED ON VOICEFLOW THE SAME DAY, because he asked for it by name. * Its `Resources` control is a `