/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* =========================================================
   QUICK REFERENCE
   ========================================================= */

/*
 * UNITS
 * -----
 * Font sizes        → rem
 * Fluid font sizes  → clamp() with rem
 * Line height       → unitless
 * Letter spacing    → em
 * Component padding → rem normally; em when tied to text size
 * Borders           → px
 *
 *
 * TYPOGRAPHY
 * ----------
 * --text-xs
 * --text-sm
 * --text-base
 * --text-md
 * --text-lg
 * --text-xl
 *
 * --text-h6
 * --text-h5
 * --text-h4
 * --text-h3
 * --text-h2
 * --text-h1
 *
 *
 * SPACING
 * -------
 * --space-xs
 * --space-sm
 * --space-md
 * --space-lg
 * --space-xl
 * --space-2xl
 * --space-3xl
 * --space-4xl
 *
 * --section-space-sm
 * --section-space-md
 * --section-space-lg
 *
 *
 * COLOURS
 * -------
 * Defined in GeneratePress Global Colors:
 *
 * --color-text
 * --color-text-muted
 * --color-bg
 * --color-surface
 * --color-surface-alt
 * --color-primary
 * --color-secondary
 * --color-accent
 * --color-border
 *
 *
 * CONTAINERS
 * ----------
 * --container-text
 * --container-default
 * --container-wide
 * --gutter
 *
 *
 * RADII
 * -----
 * --radius-sm
 * --radius-md
 * --radius-lg
 * --radius-pill
 */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {

	/* Typography */

	--font-primary: "Poppins", sans-serif;
	--font-body: "Source Sans 3", sans-serif;
	--font-accent: "Parisienne", cursive;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;

	--text-h6: 1rem;
	--text-h5: 1.125rem;
	--text-h4: 1.25rem;

	--text-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
	--text-h2: clamp(2rem, 1.75rem + 1vw, 3rem);
	--text-h1: clamp(2.75rem, 2rem + 2.5vw, 4.75rem);


	/* Spacing */

	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;


	/* Section spacing */

	--section-space-sm: clamp(3rem, 2rem + 3vw, 5rem);
	--section-space-md: clamp(4rem, 3rem + 4vw, 7rem);
	--section-space-lg: clamp(5rem, 4rem + 5vw, 9rem);


	/* Layout */

	--container-text: 48rem;
	--container-default: 75rem;
	--container-wide: 82.5rem;

	--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);


	/* Borders */

	--border-width: 1px;

	--radius-sm: 0.375rem;
	--radius-md: 0.625rem;
	--radius-lg: 1rem;
	--radius-pill: 999px;


	/* Shadows */

	--shadow-sm:
		0 1px 2px rgb(0 0 0 / 0.15);

	--shadow-md:
		0 8px 24px rgb(0 0 0 / 0.2);

	--shadow-lg:
		0 16px 48px rgb(0 0 0 / 0.25);


	/* Motion */

	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

}


/* =========================================================
   BASE
   ========================================================= */

html {
	font-size: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-primary);
	color: var(--color-text);
}

h1 {
	font-size: var(--text-h1);
	font-weight: 700;
	line-height: 1.05;
}

h2 {
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: 1.15;
}

h3 {
	font-size: var(--text-h3);
	font-weight: 600;
	line-height: 1.25;
}

h4 {
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: 1.3;
}

h5 {
	font-size: var(--text-h5);
	font-weight: 600;
	line-height: 1.35;
}

h6 {
	font-size: var(--text-h6);
	font-weight: 600;
	line-height: 1.4;
}


/* Accent / decorative text */

.text-accent {
	font-family: var(--font-accent);
	font-weight: 400;
}


/* Small uppercase section labels */

.eyebrow {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Small light text labels */

.text-light {
	font-family:var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.12em;
	color: var(--color-primary);
}


/* =========================================================
   LINKS
   ========================================================= */

a {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--color-secondary);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.container {
	width: min(
		var(--container-default),
		calc(100% - (var(--gutter) * 2))
	);
	margin-inline: auto;
}

.container--text {
	max-width: var(--container-text);
}

.container--wide {
	width: min(
		var(--container-wide),
		calc(100% - (var(--gutter) * 2))
	);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
	padding-block: var(--section-space-md);
}

.section--sm {
	padding-block: var(--section-space-sm);
}

.section--lg {
	padding-block: var(--section-space-lg);
}


/* =========================================================
   SURFACES
   ========================================================= */

.surface {
	background-color: var(--color-surface);
}

.surface-alt {
	background-color: var(--color-surface-alt);
}

.card {
	padding: var(--space-xl);
	background-color: var(--color-surface);
	border:
		var(--border-width)
		solid
		var(--color-border);
	border-radius: var(--radius-lg);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button-primary,
.button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: var(--space-xs);

	padding: 0.875em 1.5em;

	font-family: var(--font-primary);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1;

	text-decoration: none;

	border:
		var(--border-width)
		solid transparent;

	border-radius: var(--radius-md);

	cursor: pointer;

	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		transform var(--transition-fast);
}


/* Primary */

.button-primary {
	color: var(--color-bg);
	background-color: var(--color-accent);
}

.button-primary:hover,
.button-primary:focus-visible {
	color: var(--color-bg);
	background-color: var(--color-primary);
}


/* Secondary */

.button-secondary {
	color: var(--color-text);
	background-color: transparent;
	border-color: var(--color-primary);
}

.button-secondary:hover,
.button-secondary:focus-visible {
	color: var(--color-bg);
	background-color: var(--color-primary);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}