/**
 * J Martin Skincare — Global styles
 */

:root {
	--jmartin-olive-dark: #4b5332;
	--jmartin-olive-header: #556048;
	--jmartin-olive-footer: #3f4630;
	--jmartin-olive-light: #6b7a5e;
	--jmartin-cream: #faf9f6;
	--jmartin-beige: #f2f0e9;
	--jmartin-input-beige: #e5e1d8;
	--jmartin-gold: #b8a88a;
	--jmartin-text: #2c2c2c;
	--jmartin-text-muted: #6b6b6b;
	--jmartin-white: #ffffff;
	--jmartin-radius-sm: 8px;
	--jmartin-radius-md: 16px;
	--jmartin-radius-lg: 24px;
	--jmartin-radius-xl: 32px;
	--jmartin-font-heading: "Playfair Display", Georgia, serif;
	--jmartin-font-body: "Montserrat", Arial, sans-serif;
	--jmartin-container: 1200px;
	--jmartin-wide: 1400px;
	--jmartin-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

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

body {
	margin: 0;
	font-family: var(--jmartin-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--jmartin-text);
	background: var(--jmartin-cream);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--jmartin-olive-dark);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a:hover {
	opacity: 0.85;
}

h1,
h2,
h3,
h4,
h5,
h6,
.jmartin-heading {
	font-family: var(--jmartin-font-heading);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jmartin-olive-dark);
}

.jmartin-container {
	width: min(100% - 2rem, var(--jmartin-container));
	margin-inline: auto;
}

.jmartin-container--wide {
	width: min(100% - 2rem, var(--jmartin-wide));
	margin-inline: auto;
}

.jmartin-section {
	padding-block: 4rem;
}

.jmartin-section--beige {
	background: var(--jmartin-beige);
}

.jmartin-section--cream {
	background: var(--jmartin-cream);
}

.jmartin-section--dark {
	background: var(--jmartin-olive-dark);
	color: var(--jmartin-white);
}

.jmartin-section-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
	margin: 0 0 1rem;
}

.jmartin-section-subtitle {
	text-align: center;
	color: var(--jmartin-text-muted);
	max-width: 640px;
	margin: 0 auto 2.5rem;
	font-size: 0.95rem;
}

.jmartin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	border-radius: var(--jmartin-radius-sm);
	font-family: var(--jmartin-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.jmartin-btn--primary {
	background: var(--jmartin-olive-dark);
	color: var(--jmartin-white);
	border-color: var(--jmartin-olive-dark);
}

.jmartin-btn--primary:hover {
	background: var(--jmartin-olive-header);
	border-color: var(--jmartin-olive-header);
	color: var(--jmartin-white);
	opacity: 1;
}

.jmartin-btn--outline {
	background: transparent;
	color: var(--jmartin-olive-dark);
	border-color: var(--jmartin-olive-dark);
}

.jmartin-btn--outline:hover {
	background: var(--jmartin-olive-dark);
	color: var(--jmartin-white);
	opacity: 1;
}

.jmartin-btn--white-outline {
	background: transparent;
	color: var(--jmartin-white);
	border-color: var(--jmartin-white);
}

.jmartin-btn--white-outline:hover {
	background: var(--jmartin-white);
	color: var(--jmartin-olive-dark);
	opacity: 1;
}

.jmartin-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.wp-site-blocks {
	padding-top: 0 !important;
}

@media (min-width: 768px) {
	.jmartin-section {
		padding-block: 5rem;
	}
}

@media (min-width: 1024px) {
	.jmartin-section {
		padding-block: 6rem;
	}
}