/* =============================================================================
   02-utilities.css
   Generic helpers: containers, widths, spacing, typography resets.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ==========================================================================
   UTILITIES
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------------
   FONTS - Effra, the JobShop brand typeface
   -----------------------------------------------------------------------------
   PATHS ARE RELATIVE TO THIS FILE, NOT TO THE THEME ROOT.

   A url() in CSS resolves against the location of the stylesheet that contains
   it. These rules used to live in style.css at the theme root, where
   "./fonts/..." correctly meant /themes/jobshop/fonts/. Now that they live in
   /themes/jobshop/css/, "./fonts/..." would mean /themes/jobshop/css/fonts/,
   which does not exist - the files 404 and every browser silently falls back to
   a default serif.

   Hence "../fonts/" - up one level out of css/, then into fonts/.

   If you ever move this file again, these two lines need updating.

   The font files themselves are in /fonts. Note that fonts/ also contains
   .woff2 versions (effra_std_rg.woff2, effra_std_bd.woff2) which are smaller
   and better supported than the .woff files referenced here - worth switching
   to, but they may be a different cut of the typeface, so compare them visually
   before swapping rather than assuming they are identical.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "effraregular";
	src: url("../fonts/effra_std_rg-webfont.woff");
	font-weight: 400;
	font-style: normal;
	/* Show fallback text immediately, swap to Effra when it arrives, rather than
	   leaving headings invisible while the font downloads. */
	font-display: swap;
}
@font-face {
	font-family: "effrabold";
	src: url("../fonts/effra_std_bd-webfont.woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
html,
body {
	padding: 0;
	margin: 0;
	font-family:
		gt america regular,
		Arial;
	color: var(--js-black);
}
main {
	position: relative;
	overflow: hidden;
}
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	outline: 0;
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}
.clear:after {
	content: ".";
	visibility: hidden;
	display: block;
	clear: both;
}

/* || COLORS */
.purple_txt, .col4 {
	color: var(--js-purple);
}
.purple_background, .col4bk {
	background-color: var(--js-purple) !important;
}
.blue_txt, .col2 {
	color: var(--js-blue);
}
.blue_background, .col2bk {
	background-color: var(--js-blue) !important;
}
.orange_txt, .col3 {
	color: var(--js-orange);
}
.orange_background, .col3bk {
	background-color: var(--js-orange) !important;
}
.yellow_txt, .col1 {
	color: var(--js-yellow);
}
.yellow_background, .col1bk {
	background-color: var(--js-yellow) !important;
}

.right {
	float: right;
}
.left {
	float: left;
}

/* ===TODO: ADD MORE WIDTH OPTIONS === */
/* ---      To utilise full width --- */
.width_1200 {
	max-width: 1200px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "effrabold";
	font-weight: 400;
}
h2 {
	margin-top: 0pc;
	font-size: 21pt;
	line-height: 26pt;
	font-family: "effrabold";
	margin-bottom: 28px;
}
p {
	font-family: "effraregular";
	font-size: 15pt;
	line-height: 20pt;
}
p.large,
#mainbanner p.large {
	font-family: "effraregular";
	font-size: 26pt;
	line-height: 27pt;
}
p strong {
	font-family: "effrabold";
}
p.special {
	font-size: 21pt;
	line-height: 26pt;
}
label a {
	color: var(--js-black);
}