/* Core neutraliser — DECLARED differences from core, so the ported pages render on
 * the baseline chalkhillventures.com was built on (WordPress, twentytwelve base + Elementor), not on
 * core's Tailwind preflight and demo-theme body. Same mechanism as Andrea Bertoli
 * and SAPient (~/clients/andrea-bertoli/site/src/features/andrea-bertoli/css).
 *
 * 1. Tailwind preflight lives in @layer base; this rule sits in the same layer and
 *    rolls every property back past it with `revert-layer`. Unlayered CSS (10-wp.css,
 *    20-port.css) still wins; core blocks' utilities are untouched.
 * 2. Core's body colours/font and film grain, which the site never had.
 * `data-chv-chrome` is on the header, so none of this reaches /admin.
 */
@layer base {
  :root:has([data-chv-chrome]),
  :root:has([data-chv-chrome]) *,
  :root:has([data-chv-chrome]) ::before,
  :root:has([data-chv-chrome]) ::after,
  :root:has([data-chv-chrome]) ::marker,
  :root:has([data-chv-chrome]) ::placeholder,
  :root:has([data-chv-chrome]) ::backdrop,
  :root:has([data-chv-chrome]) ::file-selector-button {
    all: revert-layer;
  }
}

:where(:root:has([data-chv-chrome])) {
  --grain-opacity: 0;
  font-size: 100%;
}
:where(:root:has([data-chv-chrome])) .grain::after {
  content: none;
}

/* 3. Tailwind utilities that share a name with a WordPress / Bootstrap class the
 *    ported markup carries (`size-full` on WordPress images → width/height 100%,
 *    Bootstrap's `container`, `hidden`, `block`, `flex`, `invisible`, `table`).
 *    Core's Tailwind generates them because the names occur in this site's files.
 *    Rolled back inside the utilities layer, at a higher rank than the utility, so
 *    the live rules (unlayered, 10-wp.css) and the img width/height attributes apply
 *    exactly as on WordPress. */
@layer utilities {
  :where(html:has([data-chv-chrome])) img.size-full,
  :where(html:has([data-chv-chrome])) div.container,
  :where(html:has([data-chv-chrome])) *.hidden.hidden,
  :where(html:has([data-chv-chrome])) *.block.block,
  :where(html:has([data-chv-chrome])) *.flex.flex,
  :where(html:has([data-chv-chrome])) *.invisible.invisible,
  :where(html:has([data-chv-chrome])) *.table.table {
    width: revert-layer;
    height: revert-layer;
    max-width: revert-layer;
    display: revert-layer;
    visibility: revert-layer;
  }
  /* core's <html class="antialiased">: WordPress left font smoothing at the browser
     default (measured: auto), which changes glyph rasterisation. */
  html.antialiased:where(:has([data-chv-chrome])) {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
}