/* Rubato on OceanWP — resets only.
   OceanWP's stylesheet is written for its own container markup. The Rubato page
   template bypasses that chrome, so these rules stop the leftover typographic
   and link defaults from leaking in.

   EVERY reset below is wrapped in :where(), which contributes zero specificity.
   That matters: an ordinary `.rubato-page .rb-section p { margin: 0 }` scores
   higher than `.rb-mt-m`, so it silently flattened every margin utility on the
   page. :where() lets the utility classes always win. Add resets the same way.

   No new design values here — every value is a token from rubato-tokens.css. */

/* ---------- Page shell ---------- */
body.rubato-page {
  background: var(--rb-navy-tempo);
  color: var(--rb-white-warm);
  font: 400 18px/1.65 var(--rb-font-structure);
}
:where(body.rubato-page #main, body.rubato-page .rubato-main) {
  padding: 0; margin: 0; max-width: none; width: auto; float: none;
}

/* OceanWP sets margins globally; Rubato sections manage their own spacing. */
:where(.rubato-page .rb-section) :where(p, h1, h2, h3, h4) { margin: 0; }
:where(.rubato-page .rb-section) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* Links: OceanWP paints these with its own accent. Rubato governs its own. */
:where(.rubato-page .rb-section a) { text-decoration: none; }
:where(.rubato-page a.rb-btn):is(:link, :visited, :hover, :focus) {
  color: var(--rb-navy-tempo); text-decoration: none;
}

/* Headings: OceanWP applies its own family/colour/transform at ELEMENT level
   (h1, h2, h3), which outranks a zero-specificity :where() rule. This one is
   deliberately NOT wrapped in :where() — it needs real specificity to win.
   Only the margin/padding resets above use :where(); colour resets must not. */
.rubato-page .rb-h1,
.rubato-page .rb-h2,
.rubato-page .rb-h3 {
  font-family: var(--rb-font-structure);
  color: inherit;
  text-transform: none;
}

/* Images shouldn't pick up OceanWP's border/shadow treatments. */
:where(.rubato-page .rb-figure img) { border: 0; border-radius: 0; box-shadow: none; }

/* Gutenberg group blocks default to flow-root; the Rubato layouts need their
   own display. These are display-only, so they don't fight the utilities. */
.rubato-page .rb-grid-2,
.rubato-page .rb-grid-cards-2,
.rubato-page .rb-grid-cards-3,
.rubato-page .rb-grid-cards-4,
.rubato-page .rb-grid-5,
.rubato-page .rb-list { display: grid; }
.rubato-page .rb-pills,
.rubato-page .rb-chips,
.rubato-page .rb-actions { display: flex; }

/* Core block wrappers must not add their own box — but must not flatten the
   margin utilities either, hence :where(). */
:where(.rubato-page .wp-block-group, .rubato-page .wp-block-column, .rubato-page .wp-block-columns) {
  margin: 0; padding: 0;
}
/* No padding re-declarations needed: because the wrapper reset above is
   :where()-scoped, .rb-container / .rb-module / .rb-card keep the padding they
   already have in rubato-tokens.css, and .rb-flush can still override it. */

/* core/image inside a Rubato figure */
:where(.rubato-page .rb-figure) :where(.wp-block-image, figure) { margin: 0; height: 100%; }
:where(.rubato-page .rb-figure .wp-block-image img) {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* OceanWP's scroll-top button sits above the coral CTA otherwise. */
:where(.rubato-page #scroll-top) { z-index: 40; }

/* The admin bar offsets the sticky header. */
.admin-bar .rb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .rb-header { top: 46px; } }

/* ---------- The .wp-block-group__inner-container problem ----------
   On a classic theme (no theme.json) WordPress renders every core/group with an
   extra <div class="wp-block-group__inner-container"> around its children. The
   saved block markup does NOT contain it — it is injected at render time — so it
   is invisible in the editor and only breaks the front end.

   The damage: that wrapper becomes the SINGLE child of every grid and flex row,
   so .rb-grid-2 collapsed both columns into one, .rb-pills stacked vertically
   instead of wrapping, and every `> * + *` stack utility had no sibling to space.

   display:contents removes the wrapper from the layout tree, so the real children
   become the grid/flex items again. It is a plain <div> with no semantics, so
   there is no accessibility cost. Selector matching is unaffected by
   display:contents, which is why the stack utilities are also taught to pierce
   the wrapper in rubato-site.css. */
.rubato-page .wp-block-group__inner-container { display: contents; }