/*
Theme Name: Bricks Child Theme
Theme URI: https://bricksbuilder.io/
Description: Child theme for Karl Singporewala + the design bureau (singporewala.co.uk). Source in ~/Code/karlsingporewala-build/wp/child-theme/.
Author: Mota Creative
Author URI: https://motacreative.co.uk/
Template: bricks
Version: 1.2.0
Text Domain: bricks
*/

/* Baseline reset, mirroring the prototype's bare element rules in src/assets/css/site.css
   lines 29 to 44. Strict fragments state "rem base: 16px" and cannot carry an html rule
   (gotcha B14); Bricks defaults the root to 62.5% (D09), so the real base lives here.
   Body typography and colour are ALSO set in the Theme Style; keep the values identical. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #ffffff; color: #000000; font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* site.css 61 to 66. This file is unlayered and loads after Bricks, so it must carry the step down too
   or it overrides the Theme Style's typographyBody:mbe_720. */
@media (max-width: 720px) { body { font-size: 16px; } }

/* Bricks 2.4.2 element defaults the prototype never had (phase 3, measured on the Contact footer).
   They live in @layer bricks, so these unlayered :where() rules beat them and lose to every class.
   Headings: Bricks sets h1 to h6 to line-height 1.4; the prototype inherits the body 1.45 unless a
   rule says otherwise (the Theme Style still sets h1 and h3). Text links: Bricks makes the link and
   any span inside it inline-flex with a 5px gap; prototype anchors are inline unless a class says so. */
:where(h1, h2, h3, h4, h5, h6) { line-height: inherit; }
:where(.brxe-text-link), :where(.brxe-text-link) :where(span) { display: inline; align-items: normal; gap: normal; }
/* Bricks caps every element at max-width: 100% ([class*="brxe-"]), which squeezes absolutely positioned
   boxes such as the 320px Studio dropdown to their trigger's width; the prototype has no such cap
   (img keeps its own max-width above). Bricks also resets buttons to text-align: inherit, where the
   prototype keeps the browser's centred button text. */
:where([class*="brxe-"]) { max-width: none; }
:where(button) { text-align: center; }
:where(p) { margin-block-end: 1em; } /* @layer bricks sets :where(p) { margin-block: 0 1.2em }; the prototype keeps the browser 1em (phase 4, 404 project number) */
:where(figcaption) { margin: 0; text-align: start; color: inherit; font-size: inherit; } /* @layer bricks: figcaption { margin: 1em 0; text-align: center; font-size: .9em; color: var(--bricks-text-light) } */

:where(svg) { min-width: 0; min-height: 0; } /* @layer bricks: svg:not([width]) { min-width: 1em } and svg:not([height]) { min-height: 1em } grow the 14px Home arrows to the 18px font size (phase 4, Home) */