`. * * The AI is instructed (system prompt + `data/seed/conventions/html-container-rule.md`) * that the platform owns this element's width and side gutters, so it writes no * width/padding for it. That rule was never actually shipped: only the legacy * block-builder wrapper (`.ambld-section__inner` above) was styled, so every * AI-generated section rendered edge-to-edge with its content touching the * viewport. This is that missing rule. * * Two selectors, both (0,2,0) so a theme's own bare `.container` (0,1,0) cannot * win: * - `.ambld-page .container` → the builder's own page template * - `[data-amb-section] > .container` → any other render path (a page using the * theme's template, a header/footer template), since the section wrapper is * mandatory and always present. * * A page's own stylesheet loads AFTER this file, so anything the AI writes for a * specific section (`.pricing-section .container { max-width: 960px }`) still * wins on source order. */ .ambld-page .container, [data-amb-section] > .container { width: 100%; max-width: var(--ambld-spacing-container-max, 1200px); margin-inline: auto; padding-inline: var(--ambld-spacing-container-gutter, 24px); } @media (max-width: 640px) { .ambld-page .container, [data-amb-section] > .container { padding-inline: var(--ambld-spacing-container-gutter-sm, 18px); } } /** * Full-Width page template: same markup, edge to edge. `is-full-width` is put on * by the page template when that preset is selected; without this it was * a class nothing acted on. */ body.is-full-width .ambld-page .container, body.is-full-width [data-amb-section] > .container { max-width: none; padding-inline: 0; } /* Row */ .ambld-block--row { display: flex; flex-wrap: wrap; } @media (max-width: 768px) { .ambld-block--row { flex-direction: column; } .ambld-block--column { width: 100% !important; } } /* Divider */ .ambld-block--divider { border: none; border-top: 1px solid var(--ambld-color-border, #e2e8f0); } /* Header & Footer */ .ambld-header, .ambld-footer { width: 100%; } /* Main content area */ .ambld-main { min-height: 100vh; } /** * Neutralize theme form-control chrome inside builder pages. * * Themes (notably Astra) set fixed heights on `input[type="text"]` etc. at * specificity (0,1,1). Page CSS often styles the same controls with a single * class (`.contact-input` → (0,1,0)) and loses even when printed last. These * resets sit under `.ambld-page` at (0,2,1) so themes cannot pin height / * line-height; the compiled page stylesheet still wins for intentional design * (it loads after this file and is additionally scope-prefixed). */ .ambld-page input[type="text"], .ambld-page input[type="number"], .ambld-page input[type="email"], .ambld-page input[type="url"], .ambld-page input[type="password"], .ambld-page input[type="search"], .ambld-page input[type="tel"], .ambld-page input[type="date"], .ambld-page input[type="datetime-local"], .ambld-page input[type="month"], .ambld-page input[type="week"], .ambld-page input[type="time"], .ambld-page select, .ambld-page textarea { height: auto; line-height: inherit; max-width: 100%; } /* * Dropdown hosts waiting for a menu. * * A nav built menu-ready carries an EMPTY `[data-amb-submenu]` container so * that connecting a WordPress menu needs no markup edit. Until it is * connected there is nothing to show, and the container must not render — an * empty box with the dropdown's own padding/border/shadow hanging under a nav * item is the whole reason "it looks broken before you attach a menu". * * Owned by the builder rather than left to page CSS: the reveal rule is * whatever the designer wrote, and one that forgets `:empty` produces exactly * that empty box. `!important` because it has to beat a `:hover` reveal. * Rendered output is unaffected — the resolver only emits the container for * items that actually have sub-items, and strips the marker as it does. */ [data-amb-submenu]:empty { display: none !important; } /* * …and the same for a container that only LOOKS empty. `:empty` is defeated * by a single newline, and `

\n` is exactly how * hand- and AI-written markup is formatted, so the rule above would miss the * common case. `:has()` counts element children only. Kept in its own block: * one unsupported selector invalidates a whole selector list, and the plain * `:empty` rule above has to keep working in browsers without `:has()`. */ [data-amb-submenu]:not(:has(*)) { display: none !important; } /* Lazy loading fade-in */ img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease; } img[loading="lazy"].loaded, img[loading="lazy"][src] { opacity: 1; } .ambld-template .site-footer { width: 100%; max-width: 100% !important; } .ambld-template .site-header { width: 100%; max-width: 100% !important; }