/*
 * 10-BASE.CSS
 * Site-wide basics: box sizing, page colours, body text, headings, links, images, and the page wrapper.
 * Uses colour roles and tokens only; no real colour values in this file.
 */


/* ============================================================
 * 1. RESET
 * Widths include padding and borders; images never overflow.
 * ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

button {
	font: inherit;
	color: inherit;
}


/* ============================================================
 * 2. PAGE AND BODY TEXT
 * ============================================================ */

body {
	margin: 0;
	background: var(--jm-colour-background);
	color: var(--jm-colour-text);
	font-family: var(--jm-font-body);
	font-size: var(--jm-text-m);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* While a pop-up or the menu is open, the page behind stops scrolling. */
body.is-locked {
	overflow: hidden;
}


/* ============================================================
 * 3. HEADINGS (real H1 to H3, styled once)
 * Smaller variants use a modifier, e.g. .jm-heading--small.
 * ============================================================ */

h1,
h2,
h3 {
	margin: 0 0 var(--jm-space-3);
	color: var(--jm-colour-heading);
	font-family: var(--jm-font-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

h1 { font-size: var(--jm-text-xl); }
h2 { font-size: var(--jm-text-l); }
h3 { font-size: var(--jm-text-m); }

/* Helper text: small, italic, greyed, like a disclaimer. Works inside a heading too
   (drops the heading's capitals and spacing). Size and colour are tokens. */
.jm-helper {
	color: var(--jm-colour-helper);
	font-family: var(--jm-font-body);
	font-size: var(--jm-text-helper);
	font-style: italic;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.jm-heading--small {
	font-size: var(--jm-text-s);
	letter-spacing: 0.08em;
}


/* ============================================================
 * 4. LINKS
 * .jm-link is the small, underlined, uppercase link (OPEN MIX).
 * ============================================================ */

a {
	color: var(--jm-colour-link);
}

.jm-link {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: var(--jm-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.jm-link:disabled {
	cursor: default;
	opacity: 0.8;
}


/* ============================================================
 * 5. PAGE WRAPPER
 * .jm-page holds a page's main content; variants set its width.
 * ============================================================ */

.jm-page {
	width: 100%;
	max-width: var(--jm-page-width);
	margin: 0 auto;
	padding: var(--jm-space-4) var(--jm-space-3) var(--jm-space-6);
}

.jm-page--text {
	max-width: 720px;
}

.jm-empty {
	color: var(--jm-colour-text-soft);
	text-align: center;
	padding: var(--jm-space-6) 0;
}


/* ============================================================
 * 6. REDUCED MOTION
 * People who switch motion off in their device settings get no
 * movement anywhere (pop-ups simply appear).
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important; /* the one allowed !important: an accessibility override must win */
		transition-duration: 1ms !important;
	}
}


/* ============================================================
 * 7. HELPERS
 * .jm-offscreen: in the page but never seen (e.g. the box a Copy
 * button uses when the clipboard is blocked).
 * ============================================================ */

.jm-offscreen {
	position: fixed;
	left: -9999px;
	top: 0;
	opacity: 0;
}

/* Drop a picture on a block (JM.dropImage, site.js 7): it grows a little while a picture hovers over it, and dims while
   the picture saves. Desktop only (phones don't drag files). */
[data-jm-drop] {
	transition: transform var(--jm-motion-time) var(--jm-ease-out), box-shadow var(--jm-motion-time);
}

[data-jm-drop].is-dropping {
	transform: scale(1.04);
	box-shadow: 0 0 0 2px var(--jm-colour-action), var(--jm-shadow-2);
}

[data-jm-drop].is-busy {
	opacity: 0.6;
	cursor: progress;
}