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

/* Highlight defaults (::selection, ::target-text, ::search-text) and the
   .no-select utility live in styles/typography.css. */

/* 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? */

/* Remove the grey/blue tap-highlight flash on iOS (and Android) when tapping
   links, buttons, and other interactive elements. WebKit treats this property
   as inherited, so setting it on html cascades to everything. */
html {
	-webkit-tap-highlight-color: transparent;
}

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. `.link` is the explicit opt-in for
   non-prose contexts (lists, cards, anywhere outside a <p>). Reserved for
   real text links — never use `.link` as a generic nav-link marker. */
p a,
a.link {
	display: inline;
	color: var(--accent);
	text-decoration: underline;
}

/* heading anchors stay inline so the focus ring hugs the text run instead
   of stretching the full heading width. inherits heading color/weight — no
   color or text-decoration change. */
:where(h1, h2, h3, h4, h5, h6) a {
	display: inline;
}

/* Opt-out for contexts where a prose link should keep the surrounding text
   color instead of popping with accent — e.g. helper text under a form
   control, or a quiet sidebar where accent would shout. Works on a
   container (`<p class='subtle'>...<a>...</a></p>`) or directly on the
   link (`<a class='subtle'>`). */
.subtle a,
a.subtle {
	color: inherit;
}

/* 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;
}
/* we prefer to use more readable elements like <figure-module> and <inner-column>  over <div class='inner-column'... and these are autonomous / not js registered elements */

/**
 * 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;
}


/**
 * Visually hidden — present in the document (and the accessibility tree) but
 * not rendered for sighted users. Use for content that's redundant visually
 * but necessary for assistive tech. Common cases:
 *   - a section heading made obvious by layout but still needed in the outline
 *   - an explicit label inside a generic "Read" / "More" link
 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* remove list styles and put them back in the context where they'd be wanted */
ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}