/* =============================================================================
   02-base.css — element defaults
   Bare-element rules only: no component or page classes. Loads second so every
   later file can override it without !important.
   ============================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--js-font);
	color: var(--js-black);
}

/* overflow-x: clip stops a wide banner causing sideways scroll. Unlike
   `hidden` it does not turn <main> into a scroll container, so position:
   sticky (the blog sidebar) keeps working inside it. */
main {
	position: relative;
	overflow-x: clip;
}

/* --- Links ---------------------------------------------------------------- */

a {
	color: inherit;
	text-decoration: none;
}

p a,
ul li a {
	font-family: var(--js-font);
	color: var(--js-black);
}

/* --- Headings -------------------------------------------------------------
   clamp(MIN, PREFERRED, MAX): the browser uses PREFERRED but never goes below
   MIN or above MAX. The rem term is the fixed part and the vw term is the part
   that grows with the window, so headings scale smoothly instead of jumping at
   a breakpoint. Roughly 32/24/19px at 375px wide, 62/51/36px at 1200px.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--js-font-bold);
	font-weight: 400;
}

/* Only h1–h3 lose their top margin: h4–h6 barely appear outside blog posts,
   which set their own margins in 17-blog-post.css. */
h1,
h2,
h3 {
	margin-top: 0;
}

h1 {
	font-size: clamp(2rem, 1.2rem + 4vw, 3.9rem);
	line-height: 1.05;
	margin-bottom: 1.875rem;
	color: var(--js-black);
}

h2 {
	font-size: clamp(1.5rem, 1rem + 2vw, 3.2rem);
	line-height: 1.15;
	margin-bottom: 1.0625rem;
}

h3 {
	font-size: clamp(1.2rem, 0.8rem + 1.5vw, 2.25rem);
	line-height: 1.25;
	margin-bottom: 1.125rem;
}

/* --- Body text ------------------------------------------------------------ */

p {
	font-family: var(--js-font);
	font-size: 1rem;
	line-height: 1.3;
	margin: 0.3rem 0;
}

p strong {
	font-family: var(--js-font-bold);
}

/* Three step-ups from body text, used for intros and standfirsts. */
p.large {
	font-size: 1.3rem;
	line-height: 1.5;
}

p.special {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0.8rem 0 1rem;
	color: var(--js-grey);
}

p.special-smaller {
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 0.8rem 0 1rem;
	color: var(--js-grey);
}

/* --- Lists ----------------------------------------------------------------
   ul.special replaces the bullet with the JobShop tick graphic. Because it is
   a background-image, anything that wants a plain list has to switch it off
   again with background-image: none (see .footer_links li, .resource_item).
   -------------------------------------------------------------------------- */
ul.special {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.special li {
	font-family: var(--js-font);
	font-size: 1.25rem;
	line-height: 1.35;
	margin-bottom: 0.9375rem;
	padding: 0 0 0.5rem 2.5rem;
	list-style: none;
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-list.png");
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 5px 5px;
}

ul.special li strong {
	display: block;
	position: relative;
	top: 6px;
	font-family: var(--js-font-bold);
	font-size: 1.5rem;
	margin-bottom: 0.625rem;
}

/* =============================================================================
   RESPONSIVE
   One breakpoint ladder across the whole theme:
       1000px  desktop → tablet
        750px  tablet  → large phone
        500px  phone
   Every file keeps its own responsive rules at the bottom, after the base rules
   they override, so they win on source order without !important.
   ============================================================================= */

@media (max-width: 1000px) {
	/* Hand-placed line breaks in headings are tuned for desktop widths and
	   break badly once the text reflows. */
	h1 br,
	h2 br {
		display: none;
	}

	p {
		font-size: 1.125rem;
		line-height: 1.3;
	}

	p.special {
		font-size: 1.5rem;
		line-height: 1.2;
	}

	/* NOTE: these two only ever applied below 1000px, which is how the theme
	   has always behaved — on desktop a plain <ul> keeps browser defaults.
	   Worth making unconditional one day, but that is a visual change. */
	ul {
		margin: 0 !important;
	}

	ul li {
		list-style: none;
		font-size: 1.125rem;
		line-height: 1.3;
		margin-bottom: 8px;
	}

	ul.special li {
		background-size: 19px;
		background-position: 0 1px;
		padding-left: 1.8125rem;
	}
}

@media (max-width: 750px) {
	/* Deliberately LARGER than the desktop size: on a phone this is the lead
	   paragraph and there is nothing beside it competing for attention. */
	p.large {
		font-size: 1.75rem;
		line-height: 1.15;
		margin-bottom: 0;
	}
}