/*
 * Bricks' base CSS vs the live design. The live site was written against browser defaults;
 * Bricks resets them (body 15px, html 62.5%, buttons inheriting fonts, links without
 * underline, h1/h2 line-height 1.4 ...). This layer is declared after Bricks' own layers, so
 * it overrides them, and like every layer it still loses to the unlayered live CSS (site.css
 * and the page CSS) wherever that sets a value. So: browser defaults wherever live sets none.
 */
@layer cf-browser-defaults {
	/* Not Bricks' own skip links: a layer outranks Bricks' .skip-link rule regardless of specificity. */
	html, body, a:not(.skip-link), p, h1, h2, h3, h4, h5, h6, blockquote, cite, hr, label, figure,
	button, input, optgroup, select, textarea {
		all: revert;
	}
	table { width: revert; }
	/* Bricks caps every element at its container's width; live lets boxes overhang (negative margins). */
	:where([class*=brxe-]) { max-width: revert; }
	/*
	 * img and svg: only the properties Bricks sets. `all: revert` would also override the
	 * element's own presentation attributes (an icon's fill="none" turned solid black).
	 */
	img { height: revert; max-width: revert; outline: revert; vertical-align: revert; border-style: revert; }
	svg { min-width: revert; min-height: revert; }
}

/* Unlayered: Bricks sets this outside its layers. 1rem = 16px, as the live CSS expects. */
html { font-size: 100%; }

/*
 * Bricks wraps the templates and content in <header id="brx-header">, <main id="brx-content">
 * and <footer id="brx-footer">. On live the nav, sections and footer sit directly in <body>.
 * The wrappers take no box here, so (1) the sticky nav sticks to the page, not to an 80px
 * header box, and (2) live rules written for a bare `footer`/`header`/`main` don't land on them.
 */
#brx-header, #brx-content, #brx-footer { display: contents; }