/*
Theme Name: Porter
Theme URI: http://localhost:8080/porter
Author: Porter
Description: Custom WordPress theme for Portericatures with CMS-managed header and footer.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: porter
*/

:root {
	--red: #db0a15;
	--red-dark: #b00811;
	--orange: #f08c1f;
	--blue: #0a77c7;
	--yellow: #f5c400;
	--pink: #f4c4d6;
	--black: #000000;
	--white: #ffffff;
	--muted: #4a4a4a;
	--paper: #f7f7f7;
	--line: #e6e6e6;
	--font-body: "Poppins", "Nunito", "Segoe UI", sans-serif;
	--font-heading: "Linotte", "Linotte-Bold", "Fredoka", sans-serif;
	--font-logo: "Linotte", "Fredoka", "Comic Sans MS", sans-serif;
	--wrap: 1180px;
}

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

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

h1, h2, h3 {
	font-family: var(--font-heading);
	font-weight: 700;
}

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

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

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--black);
	color: var(--white);
	padding: 0.6rem 1rem;
	z-index: 1000;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.wrap {
	width: min(var(--wrap), calc(100% - 48px));
	margin-inline: auto;
}

.section {
	padding: 4rem 0;
}

.section-title {
	margin: 0 0 1rem;
	font-size: 2.2rem;
	line-height: 1.15;
}

.eyebrow {
	margin: 0 0 0.7rem;
	color: var(--red);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lede {
	max-width: 38rem;
	color: var(--muted);
	margin: 0 0 1.5rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--red);
	color: var(--white);
	padding: 0.85rem 1.25rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.9rem;
	border: 0;
	cursor: pointer;
}

.btn:hover {
	background: var(--red-dark);
}

.btn-ghost {
	background: transparent;
	color: var(--black);
	border: 1px solid var(--black);
}

.card {
	background: var(--white);
	border: 1px solid var(--line);
	padding: 1.4rem;
	border-radius: 12px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin-top: 1.5rem;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.page-hero {
	padding: 3.5rem 0 1.5rem;
}

.page-hero h1 {
	margin: 0;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
}

.content-block p {
	margin: 0 0 1rem;
}

@media (max-width: 860px) {
	.grid-3,
	.split {
		grid-template-columns: 1fr;
	}

	.wrap {
		width: min(var(--wrap), calc(100% - 32px));
	}
}

@media (max-width: 520px) {
	.wrap {
		width: min(var(--wrap), calc(100% - 24px));
	}
}