/* Buttercup Childcare - brand tokens
   Values lifted from the live Squarespace site's computed styles, not invented.
   Accent  rgb(244,136,71)  #f48847   headings h3, body copy, buttons
   Sage    rgb(205,224,204) #cde0cc   section backgrounds
   Ink     rgb(29,33,41)    #1d2129   dark text
   Paper   rgb(250,250,250) #fafafa   page background
*/

:root {
	--bc-accent: #f48847;
	--bc-accent-dark: #d96f30;
	--bc-sage: #cde0cc;
	--bc-sage-dark: #a8c4a6;
	--bc-ink: #1d2129;
	--bc-black: #000000;
	--bc-paper: #fafafa;
	--bc-white: #ffffff;
	--bc-muted: rgba(29, 33, 41, 0.62);

	--bc-font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bc-weight-body: 300;
	--bc-weight-heading: 500;

	/* Type scale, matched to the live site at 1440px */
	--bc-h1: 67.84px;
	--bc-h2: 46px;
	--bc-h3: 36px;
	--bc-h4: 25.85px;
	--bc-body: 17.4px;

	--bc-lh-heading: 1.4;
	--bc-lh-body: 1.87;

	--bc-max-width: 1200px;
	--bc-gutter: 20px;
	--bc-section-y: 70px;
	--bc-radius: 8px;
}

body {
	font-family: var(--bc-font);
	font-weight: var(--bc-weight-body);
	font-size: var(--bc-body);
	line-height: var(--bc-lh-body);
	color: var(--bc-ink);
	background-color: var(--bc-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bc-font);
	font-weight: var(--bc-weight-heading);
	line-height: var(--bc-lh-heading);
	/* Brief item 4: headings must not wrap to an unnecessary second line.
	   balance distributes heading text evenly instead of orphaning a word. */
	text-wrap: balance;
	margin: 0 0 0.4em;
}

p, li {
	/* pretty prevents a single-word orphan on the last line */
	text-wrap: pretty;
}

h1 { font-size: var(--bc-h1); }
h2 { font-size: var(--bc-h2); }
h3 { font-size: var(--bc-h3); color: var(--bc-accent); }
h4 { font-size: var(--bc-h4); }

a {
	color: var(--bc-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--bc-accent-dark);
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--bc-accent);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

/* Nothing may scroll the page sideways */
html, body {
	overflow-x: clip;
}

/* ---------- Responsive type ---------- */

@media (max-width: 1024px) {
	:root {
		--bc-h1: 48px;
		--bc-h2: 36px;
		--bc-h3: 28px;
		--bc-h4: 22px;
		--bc-section-y: 54px;
	}
}

@media (max-width: 640px) {
	:root {
		--bc-h1: 34px;
		--bc-h2: 27px;
		--bc-h3: 22px;
		--bc-h4: 19px;
		--bc-body: 16.5px;
		--bc-section-y: 40px;
		--bc-gutter: 18px;
	}
}