/* DEXA PEPTIDES BRAND STYLE GUIDE */
/* Version 1.0 | May 2024 */

/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Color Variables */
:root {
	/* Primary Brand Colors */
	--brand-primary-red: #bb0d12;
	--brand-black: #000000;
	--brand-white: #ffffff;

	/* Gray Scale */
	--brand-dark-gray: #282828;
	--brand-medium-gray: #787878;
	--brand-light-gray: #aaaaaa;
	--brand-off-white: #d9d9d9;
}

/* Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	/* Contain full-bleed (100vw) sections so the scrollbar width can't leak
	   horizontal overflow. clip preserves position: sticky; hidden is fallback. */
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	color: var(--brand-dark-gray);
	background-color: var(--brand-white);
	line-height: 1.6;
	overflow-x: hidden;
	overflow-x: clip;
}

/* Responsive safety net for editor/WooCommerce content */
img,
video {
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object,
table {
	max-width: 100%;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
a {
	overflow-wrap: break-word;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--brand-black);
	font-weight: 600;
}

/* Primary Brand Accents */
.accent-primary {
	color: var(--brand-primary-red);
}

.bg-primary {
	background-color: var(--brand-primary-red);
}

.border-primary {
	border-color: var(--brand-primary-red);
}

/* Secondary Brand Accents */
.accent-dark {
	color: var(--brand-dark-gray);
}

.bg-dark {
	background-color: var(--brand-dark-gray);
}

.accent-light {
	color: var(--brand-light-gray);
}

.bg-light {
	background-color: var(--brand-off-white);
}

/* Container & Layout */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

main {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 200px);
}

@media (max-width: 480px) {
	.container {
		padding: 0 1rem;
	}
}