/*
 * Plan Heavy base styles.
 *
 * Consumes the design tokens output as CSS variables by inc/tokens.php. Every
 * value here references a token, never a hard-coded colour or size (rule 2.1).
 * Mobile-first: base rules target small screens, media queries widen up.
 */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--ph-font-body);
	font-size: var(--ph-text-body);
	font-weight: var(--ph-weight-body);
	line-height: 1.65;
	color: var(--ph-color-ink-soft);
	background: var(--ph-color-bg);
}

h1,
h2,
h3 {
	font-family: var(--ph-font-display);
	color: var(--ph-color-ink);
	line-height: 1.25;
	font-weight: var(--ph-weight-heading);
	margin: 0 0 var(--ph-space-4);
}

h1 { font-size: var(--ph-text-h1); }
h2 { font-size: var(--ph-text-h2); }
h3 { font-size: var(--ph-text-h3); }

p { margin: 0 0 var(--ph-space-4); }

a {
	color: var(--ph-color-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

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

/* Layout primitives. */
.ph-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--ph-space-4);
}

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

.ph-section__title {
	margin-bottom: var(--ph-space-5);
}

/* Accessibility: visible skip link on focus. */
.ph-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ph-color-ink);
	color: #fff;
	padding: var(--ph-space-3) var(--ph-space-4);
	z-index: 1000;
}

.ph-skip-link:focus {
	left: var(--ph-space-4);
}

/* Header and footer shells. */
.ph-site-header {
	background: var(--ph-color-surface);
	border-bottom: 1px solid var(--ph-color-line);
}

.ph-site-header__inner,
.ph-site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ph-space-4);
	padding-block: var(--ph-space-4);
	flex-wrap: wrap;
}

.ph-logo {
	font-family: var(--ph-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--ph-color-ink);
}

.ph-menu {
	display: flex;
	gap: var(--ph-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.ph-menu a {
	color: var(--ph-color-ink);
}

.ph-site-footer {
	background: var(--ph-color-ink);
	color: #fff;
	margin-top: var(--ph-space-8);
}

.ph-site-footer a,
.ph-site-footer__copy {
	color: #fff;
}

/* Responsive grid for listing cards. Mobile: one column; widen with space. */
.ph-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ph-space-5);
}

@media (min-width: 640px) {
	.ph-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ph-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}