/**
 * SETUP - Our opinionated defaults after reset clears the slate.
 */

/* set global box-model so that padding and borders stay inside */
html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
/* https://www.paulirish.com/2012/box-sizing-border-box-ftw */
/* $todo: Reconsider inherit pattern - is it still necessary? */

a {
	/* we use links as parent elements so often, that we can default to this */
	display: block;

	/* remove defaults */
	text-decoration: none;
	color: inherit;
}
/* $todo: Consider :where() to lower specificity, or scope to classed elements */

/* put the classic link styles back */
p a {
	display: inline;
	/* color: blue; */
	text-decoration: underline;
}

/* picture is inline by default, but we need it to accept block-level images in it */
picture {
	display: block;
	overflow: hidden;
}

/* globally set images to fill their parent and keep their ratio as the default */
img {
	display: block;
	width: 100%;
	height: auto;
}

/* we generally need SVGs to act the same way as images */
svg {
	display: block;
	width: 100%;
	/* $todo: Safari may need height: 100% - test and revisit */
}

/* selects for autonomous customelements which are inline by default */
:where(:not(:defined)) {
	display: block;
}

/**
 * Prevent long unbroken strings from overflowing containers.
 * Without this, a word like "Thisisaverylongwordwithoutspaces"
 * can force its container wider than the viewport, breaking layouts.
 * This only breaks words when necessary to prevent overflow.
 */
body {
	overflow-wrap: break-word;
}