/**
 * Wild & Raw — Global Design Tokens, Fonts & Typography
 */

/* ── Google Fonts ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,300;1,6..12,400&display=swap');

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
	--wr-color-heading:      #334633;
	--wr-color-accent-1:     #D3B46B;
	--wr-color-accent-2:     #947F57;
	--wr-color-bg-1:         #FAF6EF;
	--wr-color-bg-2:         #E8DFC8;
	--wr-color-body:         #4A4A4A;
	--wr-color-footer-bg:    #334633;
	--wr-color-footer-text:  #FAF6EF;
	--wr-color-overlay-text: #1A2B1A;

	--wr-font-heading: 'Cormorant Garamond', Georgia, serif;
	--wr-font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Astra theme colour slots — keeps Elementor/Astra pickers in sync */
	--ast-global-color-0: #334633;
	--ast-global-color-1: #D3B46B;
	--ast-global-color-2: #947F57;
	--ast-global-color-3: #FAF6EF;
	--ast-global-color-4: #E8DFC8;
	--ast-global-color-5: #4A4A4A;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
body {
	font-family: var(--wr-font-body);
	color:        var(--wr-color-body);
}

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.ast-woocommerce-container .entry-title {
	font-family: var(--wr-font-heading);
	color:        var(--wr-color-heading);
}

/* ── WPForms — global field/submit container reset ─────────────────────── */
.wpforms-submit-container,
.wpforms-field-container {
	background: white !important;
	margin:     0 !important;
}

/* ── Off-Canvas / Mobile Menu ───────────────────────────────────────────── */
.ast-mobile-header-content,
.ast-mobile-header-content .main-header-menu,
.ast-mobile-header-content .ast-nav-menu {
	background-color: var(--wr-color-footer-bg) !important; /* #334633 */
}

.ast-mobile-header-content .menu-link,
.ast-mobile-header-content .menu-link:visited,
.ast-mobile-header-content .menu-item > a,
.ast-mobile-header-content .menu-item > a:visited {
	color:          var(--wr-color-footer-text) !important; /* #FAF6EF */
	font-family:    var(--wr-font-heading) !important;
	font-size:      1.25rem !important;
	font-weight:    400 !important;
	letter-spacing: 0.04em !important;
	padding-top:    16px !important;
	padding-bottom: 16px !important;
	text-shadow:    none !important;
}

.ast-mobile-header-content .menu-link:hover,
.ast-mobile-header-content .menu-item > a:hover {
	color: var(--wr-color-accent-1) !important; /* #D3B46B gold */
}

/* Divider between items */
.ast-mobile-header-content .menu-item {
	border-color: rgba(250, 246, 239, 0.15) !important;
}

/* Mobile toggle button */
.menu-toggle.main-header-menu-toggle {
	/* background-color: var(--wr-color-heading) !important; */
	/* color:            var(--wr-color-footer-text) !important; */
	border-radius:    4px !important;
}

/* Mobile hamburger trigger fill */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill {
	background-color: #FAF6EF;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer,
#ast-footer-overlay {
	background-color: var(--wr-color-footer-bg);
	color:            var(--wr-color-footer-text);
}

.site-footer,
.site-footer p,
.site-footer a,
.site-footer .ast-footer-copyright,
.site-footer .widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
	color: var(--wr-color-footer-text);
}

/* Footer widget area links */
.footer-widget-area[data-section="section-fb-html-2"] a,
.footer-widget-area[data-section="section-fb-html-1"] a,
#astra-footer-menu .menu-item > a {
	color: #FAF6EF;
}

/* Footer social icon SVG */
.ast-footer-social-1-wrap .ast-social-color-type-custom svg {
	fill: #FAF6EF;
}

/* ── Header — transparent at top ────────────────────────────────────────── */
#masthead {
	background-color: transparent;
	transition:       background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

/* On pages with hero: overlay header on top of content */
body.home #masthead,
body.page-template-default #masthead {
	position: absolute;
	top:      0;
	left:     0;
	right:    0;
	width:    100%;
	z-index:  999;
}

/* Nav links — white over hero */
#masthead .main-header-menu a,
#masthead .ast-header-html-markup a,
#masthead .site-navigation a,
#masthead .menu-item a {
	color:       #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	transition:  color 0.25s ease;
}

#masthead .main-header-menu a:hover,
#masthead .site-navigation a:hover,
#masthead .menu-item a:hover {
	color: var(--wr-color-accent-1);
}

/* CTA button — outlined white at top */
#masthead .ast-header-html-markup .ast-custom-button,
#masthead .header-widget-area .ast-custom-button,
#masthead [class*="elementor-button"]:not(.wr-header-scrolled *),
#masthead .wr-header-cta {
	border-color: #ffffff !important;
	color:        #ffffff !important;
}

/* ── Scrolled state (solid bg, dark text) ───────────────────────────────── */
#masthead.wr-header-scrolled {
	background-color: var(--wr-color-bg-1);
	box-shadow:       0 2px 16px rgba(51, 70, 51, 0.10);
}

#masthead.wr-header-scrolled .main-header-menu a,
#masthead.wr-header-scrolled .ast-header-html-markup a,
#masthead.wr-header-scrolled .site-navigation a,
#masthead.wr-header-scrolled .menu-item a {
	color:       var(--wr-color-heading);
	text-shadow: none;
}

#masthead.wr-header-scrolled .main-header-menu a:hover,
#masthead.wr-header-scrolled .site-navigation a:hover,
#masthead.wr-header-scrolled .menu-item a:hover {
	color: var(--wr-color-accent-2);
}

/* ── Sticky Header (fixed + scrolled) ───────────────────────────────────── */
#masthead.wr-header-sticky,
body.home #masthead.wr-header-sticky,
body.page-template-default #masthead.wr-header-sticky {
	position:         fixed;
	top:              0;
	left:             0;
	right:            0;
	width:            100%;
	z-index:          9999;
	background-color: rgba(250, 246, 239, 0.97);
	box-shadow:       0 2px 16px rgba(51, 70, 51, 0.14);
}

#masthead.wr-header-sticky .main-header-menu a,
#masthead.wr-header-sticky .ast-header-html-markup a,
#masthead.wr-header-sticky .site-navigation a,
#masthead.wr-header-sticky .menu-item a {
	color:       #334633;
	text-shadow: none;
}

#masthead.wr-header-sticky .main-header-menu a:hover,
#masthead.wr-header-sticky .site-navigation a:hover,
#masthead.wr-header-sticky .menu-item a:hover {
	color: var(--wr-color-accent-2);
}

/* ── Footer HTML widget image ───────────────────────────────────────────── */
.ast-footer-html-2 .ast-builder-html-element img {
	border:        1px solid #000;
	border-radius: 50%;
}
