/* Bridges core block markup onto the theme's design. Loaded after style.css, on the front end and (via editor.css) in the editor, so a page built in the editor looks like a page built by the templates. */ /* --------------------------------------------------------------- The inner-container problem --------------------------------------------------------------- A core/group with no explicit layout is rendered as
children
on a theme with no theme.json. Every layout class in this theme styles its DIRECT children, so that lone wrapper would collapse each one to a single column. `display: contents` removes the wrapper from layout entirely and promotes its children back into the grid or flex row they belong to. The alternative — giving each group an explicit layout so core skips the wrapper — makes core emit its own grid/flex CSS at the same specificity as the theme's, and the two then fight. This is the smaller, quieter fix. */ .split > .wp-block-group__inner-container, .grid > .wp-block-group__inner-container, .award > .wp-block-group__inner-container, .hero-stats > .wp-block-group__inner-container, .btn-row > .wp-block-group__inner-container, .info-list > .wp-block-group__inner-container { display: contents; } /* Core's flow layout adds vertical rhythm between siblings. Inside a grid or a flex row that turns into stray margins on the first item. */ .split > .wp-block-group__inner-container > *, .grid > .wp-block-group__inner-container > * { margin-block: 0; } /* --------------------------------------------------------------- Grids of cards --------------------------------------------------------------- A card row built from Group blocks is unbalanced out of the box, and it is not the grid's fault. WordPress gives every Group the flow layout and emits :root :where(.is-layout-flow) > * { margin-block-start: 24px } :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 } In a stack that is the space between blocks. In a grid it lands on the grid ITEMS: the first card keeps a zero top margin and every other card is pushed down 24px inside its own cell, so a row of three sits at two different heights. The gap between them is already the grid's job. Written as .wp-block-group.grid rather than .grid so it outranks the core rule outright — :where() contributes nothing, but :root does, and a tie would be settled by whichever stylesheet happened to print last. --------------------------------------------------------------- */ /* Every theme container that lays its own children out, rather than just the two that were noticed first. The list is not a guess: it is every class used on a Group block in this site's pages whose rule sets display:flex or display:grid. Miss one and it shows up as a row where the first item sits higher than the rest — the hero stats did exactly that while .grid and .split were already fixed. */ .wp-block-group.grid > *, .wp-block-group.split > *, .wp-block-group.hero > *, .wp-block-group.hero-stats > *, .wp-block-group.award > *, .wp-block-group.checklist > *, .wp-block-group.feature-icon > *, .wp-block-buttons.btn-row > * { margin-block-start: 0; margin-block-end: 0; } /* Equal height is what makes a row read as a row. Grid items stretch by default, so this is only about what happens inside a card: the content stacks, and anything that ends it — a button, a link — is pushed to the bottom so the calls to action line up across the row even when one card has a sentence more than its neighbour. */ .card { display: flex; flex-direction: column; } /* The theme's own margins set the rhythm inside a card — core's 24px between every child is too loose for a box this size and fights the tighter spacing .feature already asks for. */ .card > * { margin-block-start: 0; } .card > :last-child { margin-block-end: 0; } .card > .wp-block-buttons, .card > .btn-row { margin-top: auto; padding-top: 1.1rem; /* Left, not stretched: a full-width flex child would make a single button as wide as the card. */ align-self: flex-start; } /* A stat is a figure and the words under it — one unit, not two blocks with a gap. The label sits tight under the number the way the design draws it, and the row aligns on the figures. */ .hero-stat > * { margin-block: 0; } .hero-stat .hero-stat-label { margin-top: 0.35rem; } .hero-stats { align-items: flex-start; } /* --------------------------------------------------------------- Section shells --------------------------------------------------------------- */ /* .section only supplies padding and .wrap only a max-width, so their own inner containers are harmless — but the wrapper must not introduce a width of its own inside .wrap. */ .wrap > .wp-block-group__inner-container { width: 100%; } /* Blocks inside a section should not also carry core's default block margins at the top and bottom of the section. */ .section > .wp-block-group__inner-container > :first-child, .wrap > .wp-block-group__inner-container > :first-child { margin-block-start: 0; } .section > .wp-block-group__inner-container > :last-child, .wrap > .wp-block-group__inner-container > :last-child { margin-block-end: 0; } /* --------------------------------------------------------------- Core blocks wearing the theme's clothes --------------------------------------------------------------- */ /* core/heading and core/paragraph render with a wp-block-* class; the theme styles bare h2/p, so nothing is needed there. Buttons are the exception, and they have one trap in them. A core/button is TWO elements — a wrapper div and the anchor inside it — and any class set on the block lands on the WRAPPER. Putting .btn/.btn--ghost there made both elements match the theme's button rules, so each drew its own border and a ghost button rendered as a set of nested rings. So the skin is attached in style.css to `.wp-block-button > .wp-block-button__link` — the anchor, never the wrapper — and the ghost variant is a registered block style (is-style-venue-ghost) rather than a theme class, which also gives it a proper Styles control in the editor. The wrapper is then flattened here so nothing it inherits can draw a second box. */ .wp-block-buttons.btn-row { margin-top: 1.9rem; gap: 0.85rem; } .wp-block-buttons .wp-block-button { margin: 0; padding: 0; border: 0; min-height: 0; background: none; box-shadow: none; } .wp-block-button > .wp-block-button__link:hover { text-decoration: none; } /* The list block is a real