/* =============================================================================
   grnstore — "Earthy Modern" design system
   Loaded AFTER style.css (child) so this layer wins. Phase 0 = global only:
   tokens, typography, links, buttons, forms, header, footer, layout shell.
   WooCommerce + page sections are layered in later phases.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root {
	/* Surfaces */
	--paper:        #F4F1EA;   /* warm cream — page background            */
	--surface:      #FBFAF6;   /* cards / elevated panels                 */
	--surface-2:    #FFFFFF;   /* crispest white (inputs, media)          */
	--tint:         #EAF3E5;   /* soft green block                        */

	/* Brand / ink */
	--ink:          #14281D;   /* headings, near-black green              */
	--text:         #3A4A40;   /* body                                    */
	--muted:        #6B7A6F;   /* captions, meta                          */
	--forest:       #1E5631;   /* primary accent                          */
	--forest-d:     #173F24;   /* hover                                   */
	--lime:         #8BC34A;   /* secondary accent / highlight            */
	--line:         #E3DED2;   /* warm hairline borders                   */

	/* Radius */
	--r-sm: 10px;
	--r:    16px;
	--r-lg: 24px;
	--r-pill: 999px;

	/* Shadow — soft, warm-green, low opacity */
	--shadow-sm: 0 2px 8px rgba(30, 86, 49, .06);
	--shadow:    0 12px 32px rgba(30, 86, 49, .08);
	--shadow-lg: 0 24px 60px rgba(20, 40, 29, .12);

	/* Layout */
	--content: 1200px;
	--content-wide: 1320px;
	--gutter: clamp(18px, 4vw, 48px);
	--section-y: clamp(56px, 8vw, 120px);

	/* Type */
	--font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* -----------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body,
.ast-container,
#page {
	background-color: var(--paper);
}

body {
	font-family: var(--font) !important;
	color: var(--text);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Force the new family across Astra/Elementor/Woo text that hard-set fonts */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-widget-container,
.woocommerce, .woocommerce-page,
.menu-link, .ast-header-account-wrap {
	font-family: var(--font) !important;
}

/* -----------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title {
	color: var(--ink);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

h1, .entry-title { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.5rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); }
h4 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }

p { color: var(--text); }
a { color: var(--forest); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--forest-d); }

.ast-container { max-width: var(--content); }

/* -----------------------------------------------------------------------------
   Buttons (global) — pill, warm, accessible
   Covers Astra, Elementor, WooCommerce, and native submit buttons.
   --------------------------------------------------------------------------- */
.button, button, input[type="submit"],
.wp-block-button__link,
.elementor-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.ast-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	padding: 13px 28px;
	border: 1.5px solid var(--forest);
	border-radius: var(--r-pill);
	background: var(--forest);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
	background: var(--forest-d);
	border-color: var(--forest-d);
	color: #fff;
}
.button:active, button:active { transform: translateY(1px); }

/* Outline / secondary variant */
.button.alt-outline, .is-style-outline .wp-block-button__link,
.woocommerce a.button.wc-forward.added_to_cart {
	background: transparent;
	color: var(--forest);
}
.button.alt-outline:hover {
	background: var(--forest);
	color: #fff;
}

/* -----------------------------------------------------------------------------
   Form controls (global)
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
input[type="url"], textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	color: var(--text);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--forest) !important;
	box-shadow: 0 0 0 3px rgba(30, 86, 49, .13);
	outline: none;
}

/* -----------------------------------------------------------------------------
   Header — solid, sticky, minimal (transparent header is disabled in settings)
   --------------------------------------------------------------------------- */
.site-header,
#masthead {
	background-color: var(--surface) !important;
	border-bottom: 1px solid var(--line);
}
.main-header-bar {
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
/* Sticky */
.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* Nav links */
.main-header-menu .menu-link,
.ast-builder-menu .menu-link {
	color: var(--ink) !important;
	font-weight: 500;
	letter-spacing: .01em;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu .menu-item:hover > .menu-link,
.ast-builder-menu .current-menu-item > .menu-link {
	color: var(--forest) !important;
}

/* Header cart + account icons */
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-header-account-wrap {
	color: var(--ink);
}
.ast-site-header-cart i.astra-icon,
.account-icon { color: var(--ink); }

/* -----------------------------------------------------------------------------
   Footer — warm dark, clean columns
   --------------------------------------------------------------------------- */
.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-below-footer-wrap {
	background-color: var(--ink) !important;
	color: #cdd8ce;
}
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: #fff;
	font-weight: 700;
	margin-bottom: .8em;
}
.site-footer a, .ast-footer-copyright a { color: #cdd8ce; }
.site-footer a:hover, .ast-footer-copyright a:hover { color: var(--lime); }
.site-primary-footer-wrap { padding-block: clamp(40px, 6vw, 72px); }

/* -----------------------------------------------------------------------------
   Layout helpers (used by Phase 2 coded sections; safe to ship now)
   --------------------------------------------------------------------------- */
.gs-section { padding-block: var(--section-y); }
.gs-wrap { max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); }
.gs-wrap--wide { max-width: var(--content-wide); }
.gs-tint { background: var(--tint); }
.gs-surface { background: var(--surface); }
.gs-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--forest);
	margin-bottom: 12px;
}
.gs-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
}

/* =============================================================================
   Navbar refinement + responsive hardening (2.5.0)
   ============================================================================= */
/* Unify the whole header onto one slim, sticky surface */
.site-header, #masthead,
.ast-primary-header-bar.main-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: var(--surface) !important;
}
.site-header { box-shadow: 0 1px 0 var(--line); }
.ast-primary-header-bar.main-header-bar { border-bottom: 0 !important; }

/* Logo: cap height so the bar stays slim no matter the source image */
.custom-logo,
.site-logo-img .custom-logo {
	max-height: 48px !important;
	width: auto !important;
	max-width: 180px !important;
	object-fit: contain;
}

/* Nav links — tuned for the uppercase labels */
.ast-builder-menu-1 .menu-item > .menu-link {
	letter-spacing: .015em;
	font-weight: 600 !important;
}
.ast-site-header-cart .ast-woo-header-cart-total { color: var(--ink) !important; font-weight: 700; }

/* Kill Astra's tablet/mobile side-margins that detach the header bar from the edges */
@media (max-width: 921px) {
	.ast-desktop .ast-primary-header-bar.main-header-bar,
	.ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.ast-mobile-popup-content .main-header-menu .menu-link { font-weight: 600; }
}

/* Global mobile safety: nothing should cause horizontal scroll */
@media (max-width: 768px) {
	html, body { overflow-x: hidden; }
}