/* ============================================================
   Wyrmwood BASE FOUNDATION  (Phase 5 of the Divi removal)
   ------------------------------------------------------------
   A lean standalone base layer that replaces the global foundation
   Divi's style-static.min.css currently provides (box-sizing, reset,
   typography, links, media, container). Enqueued EARLY (before Divi's
   CSS) so while Divi is still present its rules win and the live look
   is unchanged; once Divi is removed, this becomes the foundation.

   Values come from wwg-tokens.css (Figma Style Guide + Design System PDF;
   1448px content width) so it is a
   no-op visually while Divi is loaded.
   ============================================================ */

/* ---- Web fonts ----
   Type is Inegale OT (headings, wwg-tokens.css) and Source Sans 3 (everything else) per the
   Wyrmwood Design System. Paths are relative to this file (includes/css/ → theme /fonts/). */
/* Source Sans 3 (body font + sidenav) — Divi-provided Google Fonts, now
   self-hosted. Google's current release is "Source Sans 3" (the same typeface as
   the deprecated "Source Sans Pro"); the theme uses the modern name throughout.
   Variable woff2 (weights 200–900), split by subset. */
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('../../fonts/source-sans/source-sans-3-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('../../fonts/source-sans/source-sans-3-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Box model + minimal reset ---- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: 'Source Sans 3', Helvetica, Arial, Lucida, sans-serif;
	font-size: 16px;
	line-height: var(--wwg-text-md-line); /* paragraph MD 16/26 (was 1.7em = 27.2px) */
	color: var(--wwg-color-text-primary);       /* theme role: Caput Mortuum Extra Dark / Signature Gypsum */
	background-color: var(--wwg-color-bg-primary); /* page ground: Bone Extra Light / Signature Ivory */
	-webkit-font-smoothing: antialiased;
}

/* ---- Headings ----
   Role-based type from the Figma Style Guide "Global Component Blank" modules:
   Figma assigns text styles by what the text does, not by tag. Plain tags get a
   role default, then known components are mapped to their role. Desktop values,
   switching to the mobile values at <=767px. Tokens live in wwg-tokens.css.

     h1                         -> hero title (H1)
     h2                         -> section title (H3), incl. image panel titles
     h3                         -> feature / card title (H5)
     h4-h6                      -> small feature title (H6)
     card h2s (trio/family/     -> feature title (H5)
       about blocks)
     sticky shop bar title      -> H4; Source Sans 14/24 on mobile
     product card names         -> Source Sans SemiBold 16/26 (not header text)

   !important is deliberate: page templates, component sheets and inline style
   attributes set their own heading fonts/sizes; this block is the single source
   of truth. Selectors sit in :where() (zero specificity) so source order alone
   decides between these rules: later, more specific roles win. */
h1, h2, h3, h4, h5, h6 {
	color: var(--wwg-color-text-primary);
	margin: 0 0 0.5em;
}
:where(h1, h2, h3, h4, h5, h6, .wwg_psuedo_h1, .wwg_psuedo_h2, .wwg_psuedo_h3, .wwg_psuedo_h4, .wwg_psuedo_h5, .wwg_psuedo_h6) {
	font-family: var(--wwg-font-display) !important;
	font-weight: 400 !important;
}
:where(h1, .wwg_psuedo_h1) { font-size: var(--wwg-type-hero-size) !important; line-height: var(--wwg-type-hero-line) !important; letter-spacing: var(--wwg-type-hero-tracking) !important; }
:where(h2, .wwg_psuedo_h2) { font-size: var(--wwg-type-section-size) !important; line-height: var(--wwg-type-section-line) !important; letter-spacing: var(--wwg-type-section-tracking) !important; }
:where(h3, .wwg_psuedo_h3) { font-size: var(--wwg-type-feature-size) !important; line-height: var(--wwg-type-feature-line) !important; letter-spacing: var(--wwg-type-feature-tracking) !important; }
:where(h4, h5, h6, .wwg_psuedo_h4, .wwg_psuedo_h5, .wwg_psuedo_h6) { font-size: var(--wwg-type-feature-sm-size) !important; line-height: var(--wwg-type-feature-sm-line) !important; letter-spacing: var(--wwg-type-feature-sm-tracking) !important; }

/* Card titles marked up as h2 */
:where(.wwg-about-trio-item h2, .wwg-about-block h2, .ps-trio-item h2, .ps-family-item h2) { font-size: var(--wwg-type-feature-size) !important; line-height: var(--wwg-type-feature-line) !important; letter-spacing: var(--wwg-type-feature-tracking) !important; }

/* Sticky shop bar product name */
:where(#wwg_Sticky_Price_Wrap :is(h1, h2, h3, h4, h5, h6)) { font-size: var(--wwg-type-sticky-size) !important; line-height: var(--wwg-type-sticky-line) !important; letter-spacing: var(--wwg-type-sticky-tracking) !important; }

/* Product page (Figma "Product Page" file): title is H4; "Product Description" and
   key feature titles are feature titles (Figma "Product Overview" / "Feature Title");
   FAQ questions are Source Sans SemiBold, not header text. Section titles (Key
   Features, Dimensions, FAQs, upsells) keep the h2 section default (H3). */
:where(.wwg-product-top .product_title) { font-size: var(--wwg-type-product-title-size) !important; line-height: var(--wwg-type-product-title-line) !important; letter-spacing: var(--wwg-type-product-title-tracking) !important; }
:where(.wwg-product-details .wwg-block-title, .wwg-product-extras .wwg_carousel_slide h5) { font-size: var(--wwg-type-feature-size) !important; line-height: var(--wwg-type-feature-line) !important; letter-spacing: var(--wwg-type-feature-tracking) !important; }
:where(.wwg_accordion_single_head h5) {
	font-family: var(--wwg-font-body) !important;
	font-weight: var(--wwg-btn-weight) !important;
	font-size: var(--wwg-btn-md-size) !important;
	line-height: var(--wwg-btn-md-line) !important;
	letter-spacing: var(--wwg-btn-tracking) !important;
}


/* Table builder (Figma "Builder Product Pages"): title = product title (H4); step
   headings = the product page's Section Title (Inegale Demi, H6 size). */
:where(.wwg_config_title h1) { font-size: var(--wwg-type-product-title-size) !important; line-height: var(--wwg-type-product-title-line) !important; letter-spacing: var(--wwg-type-product-title-tracking) !important; }
:where(#wwg_config_accordion > h2) { font-weight: 600 !important; font-size: var(--wwg-type-option-group-size) !important; line-height: var(--wwg-type-option-group-line) !important; letter-spacing: 0 !important; }

/* Product card names — body face, not header text */
:where(.wwg_grid_item_product h2, .wwg-product-card-title, .bundled_product_title, .wwg-upsell-name) {
	font-family: var(--wwg-font-body) !important;
	font-weight: var(--wwg-type-product-name-weight) !important;
	font-size: var(--wwg-type-product-name-size) !important;
	line-height: var(--wwg-type-product-name-line) !important;
	letter-spacing: 0 !important;
}

@media (max-width: 767px) {
	:where(h1, .wwg_psuedo_h1) { font-size: var(--wwg-type-hero-size-mobile) !important; line-height: var(--wwg-type-hero-line-mobile) !important; }
	:where(h2, .wwg_psuedo_h2) { font-size: var(--wwg-type-section-size-mobile) !important; line-height: var(--wwg-type-section-line-mobile) !important; }
	:where(h3, .wwg_psuedo_h3) { font-size: var(--wwg-type-feature-size-mobile) !important; line-height: var(--wwg-type-feature-line-mobile) !important; letter-spacing: 0 !important; }
	:where(h4, h5, h6, .wwg_psuedo_h4, .wwg_psuedo_h5, .wwg_psuedo_h6) { font-size: var(--wwg-type-feature-sm-size-mobile) !important; line-height: var(--wwg-type-feature-sm-line-mobile) !important; }
	:where(.wwg-about-trio-item h2, .wwg-about-block h2, .ps-trio-item h2, .ps-family-item h2) { font-size: var(--wwg-type-feature-size-mobile) !important; line-height: var(--wwg-type-feature-line-mobile) !important; letter-spacing: 0 !important; }
	:where(#wwg_Sticky_Price_Wrap :is(h1, h2, h3, h4, h5, h6)) {
		font-family: var(--wwg-font-body) !important;
		font-size: var(--wwg-type-sticky-size-mobile) !important;
		line-height: var(--wwg-type-sticky-line-mobile) !important;
		letter-spacing: 0 !important;
	}
	:where(.wwg_grid_item_product h2, .wwg-product-card-title, .bundled_product_title, .wwg-upsell-name) { font-size: var(--wwg-type-product-name-size-mobile) !important; line-height: var(--wwg-type-product-name-line-mobile) !important; }
	/* Product page roles last, so they win over the tag defaults above. */
	:where(.wwg-product-top .product_title) { font-size: var(--wwg-type-product-title-size-mobile) !important; line-height: var(--wwg-type-product-title-line-mobile) !important; }
	:where(.wwg-product-details .wwg-block-title, .wwg-product-extras .wwg_carousel_slide h5) { font-size: var(--wwg-type-feature-size-mobile) !important; line-height: var(--wwg-type-feature-line-mobile) !important; letter-spacing: 0 !important; }
	:where(.wwg_accordion_single_head h5) { font-size: var(--wwg-btn-sm-size) !important; line-height: var(--wwg-btn-sm-line) !important; }
	:where(.wwg_config_title h1) { font-size: var(--wwg-type-product-title-size-mobile) !important; line-height: var(--wwg-type-product-title-line-mobile) !important; }
	:where(#wwg_config_accordion > h2) { font-size: var(--wwg-type-option-group-size-mobile) !important; line-height: var(--wwg-type-option-group-line-mobile) !important; }
}
/* ---- Text elements ---- */
p { margin: 0 0 1em; }
/* Links: Text/CTA-Text, Button-CTA-Text-Hover on hover (theme roles). */
a { color: var(--wwg-color-link); text-decoration: none; }
a:hover { color: var(--wwg-color-link-hover); }
/* Links in running text: Figma Fluid Buttons Borderless — Emphasis on Classic pages, Visibility on
   Signature (dark) pages: Source Sans SemiBold, 1px underline ~1px under the baseline (Design System PDF),
   colours from --wwg-color-link. Classed links (buttons, cards, nav) style themselves. */
:where(p, li, dd, td, blockquote, figcaption, .wwg-product-description, .wwg-add-to-cart-message) a:not([class]) {
	font-weight: var(--wwg-btn-weight);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}
/* Landing templates reset their anchors (`#id a { color: inherit; text-decoration: none }`) for
   cards and buttons; running-text links there still get the body-link style. */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing, #wwg-trade-program, #wwg-portfolio) :is(p, li, dd, td, blockquote, figcaption) a:not([class]) {
	color: var(--wwg-color-link);
	font-weight: var(--wwg-btn-weight);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing, #wwg-trade-program, #wwg-portfolio) :is(p, li, dd, td, blockquote, figcaption) a:not([class]):hover {
	color: var(--wwg-color-link-hover);
}
strong, b { font-weight: 700; }
blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 4px solid var(--wwg-color-accent-neutral); }
hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--wwg-ivory) 10%, transparent); margin: 1.5em 0; }

/* ---- Lists ---- */
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .25em; }

/* ---- Media ---- */
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }
figure { margin: 0; }

/* ---- Forms / buttons (base only; components style themselves) ---- */
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button { cursor: pointer; }

/* ---- Tables ---- */
table { border-collapse: collapse; width: 100%; }

/* ---- Content container (Divi's .container contract) ---- */
.container {
	position: relative;
	width: 80%;
	max-width: 1448px;
	margin: 0 auto;
}
.clearfix::after { content: ""; display: table; clear: both; }


/* ---- Form labels from plugins (WooCommerce account forms, Gravity Forms) ----
   Guide: labels are Source Sans SemiBold at paragraph MD; helper text at SM.
   The body prefix outranks the plugin sheets, which load after this file
   (woocommerce.css; Gravity Forms' legacy "gravity-theme" form styles). */
body .woocommerce form .form-row label,
body .gform_wrapper.gravity-theme .gfield_label {
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	font-weight: var(--wwg-btn-weight);
}
body .gform_wrapper.gravity-theme label.gform-field-label--type-sub,
body .gform_wrapper.gravity-theme .gfield_required,
body .gform_wrapper.gravity-theme .gfield_description,
body .gform_wrapper.gravity-theme .gform_fileupload_rules,
body .gform_wrapper.gravity-theme .gform_drop_instructions {
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
}
body .gform_wrapper.gravity-theme .gform_button_select_files {
	font-size: var(--wwg-btn-md-size);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
	font-weight: var(--wwg-btn-weight);
}
@media (max-width: 767px) {
	body .gform_wrapper.gravity-theme .gform_button_select_files { font-size: var(--wwg-btn-md-size-mobile); line-height: var(--wwg-btn-md-line-mobile); }
	body .woocommerce form .form-row label,
	body .gform_wrapper.gravity-theme .gfield_label { font-size: var(--wwg-text-md-size-mobile); line-height: var(--wwg-text-md-line-mobile); }
	body .gform_wrapper.gravity-theme label.gform-field-label--type-sub,
	body .gform_wrapper.gravity-theme .gfield_required,
	body .gform_wrapper.gravity-theme .gfield_description,
	body .gform_wrapper.gravity-theme .gform_fileupload_rules,
	body .gform_wrapper.gravity-theme .gform_drop_instructions { font-size: var(--wwg-text-sm-size-mobile); line-height: var(--wwg-text-sm-line-mobile); }
}