/*
Theme Name: HerbalNest
Theme URI: https://herbalnestguide.com
Author: HerbalNest
Author URI: https://herbalnestguide.com
Description: An editorial, evidence-aware botanical magazine theme for HerbalNest. Lightweight, accessible, no jQuery and no CSS framework.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: herbalnest
*/

/* ==========================================================================
   Design system — tokens
   ========================================================================== */
:root {
	/* Colour */
	--hn-forest: #2d5a4a;
	--hn-forest-dark: #1f4035;
	--hn-accent: #4a7c6f;
	--hn-sage: #8ba896;
	--hn-olive: #a39c84;
	--hn-cream: #fdfbf8;
	--hn-warm: #f5ede4;
	--hn-sand: #f5e6d3;
	--hn-light-sage: #e0e8e4;
	--hn-evidence: #f0f5f2;
	--hn-beige: #e8dfd5;
	--hn-beige-dark: #e0d5c8;
	--hn-safety-bg: #fef3e0;
	--hn-safety-border: #d4a574;
	--hn-safety-text: #7a5a0f;
	--hn-white: #fff;
	--hn-text: #3a3a3a;
	--hn-body: #555;
	--hn-muted: #6b6b6b;
	--hn-footer-muted: #c9d2cb;

	/* Typography */
	--hn-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--hn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Spacing scale */
	--hn-s-1: 4px;
	--hn-s-2: 8px;
	--hn-s-3: 12px;
	--hn-s-4: 16px;
	--hn-s-5: 20px;
	--hn-s-6: 24px;
	--hn-s-7: 28px;
	--hn-s-8: 32px;
	--hn-s-10: 40px;
	--hn-s-15: 60px;
	--hn-s-20: 80px;

	/* Layout */
	--hn-gutter: 20px;
	--hn-section: 40px;
	--hn-wide: 1200px;
	--hn-narrow: 800px;
	--hn-radius: 6px;
	--hn-radius-sm: 4px;
	--hn-pill: 20px;
	--hn-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	--hn-shadow-hover: 0 6px 20px rgba(45, 90, 74, 0.12);
	--hn-gradient-hero: linear-gradient(135deg, #2d5a4a 0%, #4a7c6f 100%);
	--hn-gradient-news: linear-gradient(135deg, #4a7c6f 0%, #2d5a4a 100%);
	--hn-gradient-media: linear-gradient(135deg, #a39c84 0%, #8ba896 100%);
	--hn-gradient-media-alt: linear-gradient(135deg, #8ba896 0%, #a39c84 100%);
}

@media (min-width: 768px) {
	:root {
		--hn-gutter: 40px;
		--hn-section: 80px;
	}
}

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

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

body {
	margin: 0;
	font-family: var(--hn-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--hn-text);
	background-color: var(--hn-cream);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--hn-font-serif);
	font-weight: 600;
	line-height: 1.2;
	color: var(--hn-forest);
}

p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--hn-forest);
	text-decoration: none;
}

a:hover {
	color: var(--hn-forest-dark);
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--hn-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.site-footer :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.newsletter :focus-visible {
	outline-color: var(--hn-sand);
}

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

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

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

.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--hn-forest);
	color: var(--hn-cream);
	font-weight: 600;
	border-radius: var(--hn-radius-sm);
}

.skip-link:focus {
	top: 12px;
	color: var(--hn-cream);
}

.container {
	width: 100%;
	max-width: var(--hn-wide);
	margin-inline: auto;
	padding-inline: var(--hn-gutter);
}

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

.icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}