/* ==========================================================================
   Design tokens - Scandinavian, minimal, high-contrast, warm neutrals.
   ========================================================================== */
:root {
	/* Blocksy's own header/UI accent (links, hover states, buttons) defaults
	   to blue and is otherwise disconnected from our design system - point it
	   at the same green so the stock header/menu/cart UI matches the rest of
	   the site instead of looking like a different theme. */
	--theme-palette-color-1: #2c5f4a;
	--theme-palette-color-2: #204636;

	--elc-bg: #faf8f5;
	--elc-bg-alt: #f0ede6;
	--elc-surface: #ffffff;
	--elc-text: #1e2422;
	--elc-text-muted: #5b665f;
	--elc-border: #ddd8cd;
	--elc-accent: #2c5f4a;
	--elc-accent-hover: #204636;
	--elc-accent-contrast: #ffffff;
	--elc-warning-bg: #fbf3e7;
	--elc-warning-text: #6b4b1f;
	--elc-warning-border: #e8d3ab;
	--elc-focus: #1559ed;

	--elc-space-1: 0.5rem;
	--elc-space-2: 1rem;
	--elc-space-3: 1.5rem;
	--elc-space-4: 2rem;
	--elc-space-5: 3rem;
	--elc-space-6: 4.5rem;
	--elc-space-7: 6rem;

	--elc-radius-s: 6px;
	--elc-radius-m: 10px;
	--elc-radius-l: 16px;

	--elc-container: 1180px;
	--elc-container-narrow: 760px;

	--elc-font-size-sm: 0.9375rem;
	--elc-font-size-base: 1rem;
	--elc-font-size-lg: 1.125rem;
	--elc-font-size-xl: 1.375rem;
	--elc-font-size-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--elc-font-size-3xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);

	--elc-shadow-s: 0 2px 8px rgba(30, 36, 34, 0.06);
	--elc-shadow-m: 0 8px 24px rgba(30, 36, 34, 0.08);
}

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Reset essentials + accessibility fundamentals
   ========================================================================== */
.elc-scope, .elc-scope * , .elc-scope *::before, .elc-scope *::after {
	box-sizing: border-box;
}

.elc-scope img,
.elc-scope svg {
	max-width: 100%;
	display: block;
}

.elc-scope {
	color: var(--elc-text);
	-webkit-font-smoothing: antialiased;
}

.elc-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.elc-skip-link {
	position: absolute;
	left: 0.5rem;
	top: -3rem;
	background: var(--elc-accent);
	color: var(--elc-accent-contrast);
	padding: 0.75rem 1.25rem;
	border-radius: var(--elc-radius-s);
	z-index: 10000;
	transition: top 0.15s ease;
	text-decoration: none;
	font-weight: 600;
}
.elc-skip-link:focus {
	top: 0.5rem;
}

/* Visible, consistent focus states everywhere in our scope - never remove
   outline without replacing it. */
.elc-scope a:focus-visible,
.elc-scope button:focus-visible,
.elc-scope input:focus-visible,
.elc-scope textarea:focus-visible,
.elc-scope select:focus-visible,
.elc-scope [tabindex]:focus-visible {
	outline: 3px solid var(--elc-focus);
	outline-offset: 2px;
	border-radius: var(--elc-radius-s);
}

@media (prefers-reduced-motion: reduce) {
	.elc-scope *,
	.elc-scope *::before,
	.elc-scope *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.elc-container {
	width: 100%;
	max-width: var(--elc-container);
	margin-inline: auto;
	padding-inline: var(--elc-space-3);
}

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

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

.elc-section--alt {
	background: var(--elc-bg-alt);
}

.elc-section__heading {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var(--elc-space-5);
}

.elc-eyebrow {
	display: inline-block;
	font-size: var(--elc-font-size-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--elc-accent);
	margin-bottom: var(--elc-space-2);
}

.elc-section__heading h2 {
	font-size: var(--elc-font-size-2xl);
	line-height: 1.15;
	margin: 0 0 var(--elc-space-2);
}

.elc-section__heading p {
	color: var(--elc-text-muted);
	font-size: var(--elc-font-size-lg);
	margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.elc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: var(--elc-font-size-base);
	line-height: 1.2;
	padding: 0.9rem 1.75rem;
	border-radius: var(--elc-radius-m);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	min-height: 48px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.elc-btn:active {
	transform: translateY(1px);
}

.elc-btn--primary {
	background: var(--elc-accent);
	color: var(--elc-accent-contrast);
}
.elc-btn--primary:hover {
	background: var(--elc-accent-hover);
	color: var(--elc-accent-contrast);
}

.elc-btn--outline {
	background: transparent;
	border-color: var(--elc-accent);
	color: var(--elc-accent);
}
.elc-btn--outline:hover {
	background: var(--elc-accent);
	color: var(--elc-accent-contrast);
}

.elc-btn--block {
	width: 100%;
}

/* ==========================================================================
   Placeholder image boxes (see inc/placeholders.php)
   ========================================================================== */
.elc-scope .elefantlas-placeholder {
	width: 100%;
	background: repeating-linear-gradient(
		135deg,
		var(--elc-bg-alt),
		var(--elc-bg-alt) 10px,
		var(--elc-surface) 10px,
		var(--elc-surface) 20px
	);
	border: 1px dashed var(--elc-border);
	border-radius: var(--elc-radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--elc-space-2);
}

.elc-scope .elefantlas-placeholder__label {
	font-size: var(--elc-font-size-sm);
	font-weight: 600;
	color: var(--elc-text-muted);
	line-height: 1.5;
}
.elc-scope .elefantlas-placeholder__label small {
	font-weight: 400;
	opacity: 0.8;
}

.elc-scope img.elefantlas-image {
	border-radius: var(--elc-radius-m);
}

/* ==========================================================================
   Check-mark list (reused across homepage + product page)
   ========================================================================== */
.elc-scope .elefantlas-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.elc-scope .elefantlas-check-list li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.5;
}
.elc-scope .elefantlas-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: var(--elc-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 60% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* ==========================================================================
   Safety notice (shared look between homepage + product page)
   ========================================================================== */
.elc-scope .elefantlas-safety-notice {
	background: var(--elc-warning-bg);
	border: 1px solid var(--elc-warning-border);
	color: var(--elc-warning-text);
	border-radius: var(--elc-radius-m);
	padding: var(--elc-space-3);
	font-size: var(--elc-font-size-sm);
	line-height: 1.6;
}
.elc-scope .elefantlas-safety-notice p {
	margin: 0;
}

/* ==========================================================================
   Site-wide footer (see inc/site-footer.php)
   ========================================================================== */
.elefantlas-site-footer {
	background: var(--elc-text);
	color: rgba(255, 255, 255, 0.82);
	padding-block: var(--elc-space-5);
}
.elefantlas-site-footer a {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 3px;
}
.elefantlas-site-footer a:hover {
	text-decoration-color: #ffffff;
}
.elefantlas-site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--elc-space-4);
}
.elefantlas-site-footer__brand {
	font-size: var(--elc-font-size-lg);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 0.5rem;
}
.elefantlas-site-footer h2 {
	font-size: var(--elc-font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	margin: 0 0 0.85rem;
}
.elefantlas-site-footer p,
.elefantlas-site-footer address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	font-size: var(--elc-font-size-sm);
}
.elefantlas-site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: var(--elc-font-size-sm);
}
.elefantlas-site-footer .elefantlas-check-list li::before {
	background: #ffffff;
}

@media (max-width: 900px) {
	.elefantlas-site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.elefantlas-site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--elc-space-3);
	}
}