/*
 * Impact Support Solutions theme base. Only what every page needs before a module's own stylesheet takes over:
 * a box model, the brand type and a content width for the fallback templates.
 */
*, *::before, *::after { box-sizing: border-box; }

/*
 * The base BeTheme gave every page, which the Impact modules were built on: its reset (no default
 * margins, unstyled lists, no link underline) and the typography from its theme options
 * (static.css). Selectors sit inside :where(), so any module rule outranks them.
 */
:where(html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address,
  cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
  center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
  tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
  nav, output, ruby, section, summary, time, mark, audio, video) {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
:where(ol, ul) { list-style: none; }
:where(blockquote, q) { quotes: none; }
:where(h1, h2, h3, h4, h5, h6) { margin-bottom: 15px; color: #3a4752; font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
:where(p) { margin: 0 0 15px; }
:where(b, strong, dt) { font-weight: 700; }
:where(a, a:focus, a:visited) { color: #C00000; text-decoration: none; outline: 0; }
:where(a:hover) { color: #9A0000; text-decoration: underline; }
:where(a:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
:where(h1, h2, h3, h4, h5, h6) :where(a, a:hover) { color: inherit; }
:where(blockquote) { color: #444; }
:where(iframe) { max-width: 100%; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: #fcfcfc; }
body {
	margin: 0;
	background: #fcfcfc;
	color: #3a4752;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
:where(h1) { font-size: 56px; line-height: 56px; font-weight: 700; }
:where(h2) { font-size: 40px; line-height: 44px; font-weight: 600; }
:where(h3) { font-size: 32px; line-height: 34px; font-weight: 500; }
:where(h4) { font-size: 24px; line-height: 34px; font-weight: 500; }
:where(h5) { font-size: 20px; line-height: 25px; font-weight: 500; }
:where(h6) { font-size: 16px; line-height: 22px; font-weight: 500; }
@media (min-width: 768px) and (max-width: 959px) {
	body { font-size: 14px; line-height: 20px; }
	:where(h1) { font-size: 48px; line-height: 48px; }
	:where(h2) { font-size: 34px; line-height: 37px; }
	:where(h3) { font-size: 27px; line-height: 29px; }
	:where(h4) { font-size: 20px; line-height: 29px; }
	:where(h5) { font-size: 17px; line-height: 21px; }
	:where(h6) { font-size: 14px; line-height: 19px; }
}
@media (min-width: 480px) and (max-width: 767px) {
	body { font-size: 13px; line-height: 19px; }
	:where(h1) { font-size: 42px; line-height: 42px; }
	:where(h2) { font-size: 30px; line-height: 33px; }
	:where(h3) { font-size: 24px; line-height: 26px; }
	:where(h4) { font-size: 18px; line-height: 26px; }
	:where(h5) { font-size: 15px; line-height: 19px; }
	:where(h6) { font-size: 13px; line-height: 19px; }
}
@media (max-width: 479px) {
	body { font-size: 13px; line-height: 19px; }
	:where(h1) { font-size: 34px; line-height: 34px; }
	:where(h2) { font-size: 24px; line-height: 26px; }
	:where(h3) { font-size: 19px; line-height: 20px; }
	:where(h4) { font-size: 14px; line-height: 20px; }
	:where(h5), :where(h6) { font-size: 13px; line-height: 19px; }
}
:where(img, svg, video) { max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000;
	background: #fff; padding: 12px 20px; left: 8px; top: 8px;
}


/* Fallback templates (index.php, woocommerce.php) */
.impact-theme-full { width: 100%; }
.impact-theme-wrap { max-width: 1312px; margin: 0 auto; padding: 48px 24px 80px; }
.impact-theme-title { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 24px; font-weight: 700; }
.impact-theme-content > * + * { margin-top: 1em; }
.impact-theme-list { list-style: none; padding: 0; margin: 0; }
.impact-theme-list li { padding: 14px 0; border-bottom: 1px solid #e6e2da; display: flex; gap: 16px; justify-content: space-between; }
.impact-theme-404 { padding: 64px 0; max-width: 640px; }
.impact-theme-eyebrow { font-weight: 700; color: #c8102e; margin: 0 0 8px; letter-spacing: .08em; }
@media (max-width: 767px) { .impact-theme-wrap { padding: 32px 18px 64px; } }

/* From BeTheme's theme options (custom CSS): WooCommerce's "View cart" link after an AJAX add to
   basket stays hidden, the basket drawer opens instead. The rest of that CSS only styled BeTheme
   markup. */
.woocommerce .cart .added_to_cart { display: none; }
