/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ============================================================================
 * SCOPE OF THIS FILE
 *
 * This is the render-blocking safety net: rules that must be correct on the
 * very first paint, before anything else loads.
 *
 * Everything to do with type, colour, spacing, components and motion now
 * lives in assets/css/struxa-design-system.css, which is enqueued after this
 * one. If you are looking for "why does the button look like that", it is
 * there, not here.
 *
 * ---------------------------------------------------------------------------
 * WHAT WAS REMOVED FROM THIS FILE, AND WHY
 *
 * 1.  @font-face { font-family:'Arboria-Book'; src:url('../fonts/...') }
 *     style.css lives in /themes/woodmart-child/, so ../fonts/ resolved to
 *     /themes/fonts/ — one level too high. No such directory exists, and no
 *     Arboria file exists anywhere in the install. The @font-face never
 *     loaded anything.
 *
 * 2.  p, span { font-family:'Arboria-Book', sans-serif !important; }
 *     Because of (1) this resolved to the browser's generic sans — Arial on
 *     Windows, Helvetica on macOS. Every paragraph on every page of the site
 *     was set in Arial, while Inter sat loaded and unused.
 *
 * 3.  h1,h2,h3,h4,h5,h6 { font-family:'Poppins', sans-serif !important; }
 *     The !important beat every .font-serif in the Struxa design system, so
 *     Cormorant Garamond — the brand's display face, loaded on every page —
 *     never rendered once, anywhere. Confirmed in the live DOM: elements
 *     carrying .font-serif computed to "Poppins, sans-serif".
 *
 *     Together (2) and (3) meant the site's entire typographic identity was
 *     Arial + Poppins. Removing them is the single change that does the most
 *     for how the site reads.
 *
 * 4.  The @import of Poppins. Inter and Cormorant Garamond are now enqueued
 *     properly in functions.php (an @import inside a stylesheet serialises:
 *     the browser cannot even start fetching the font until this file has
 *     downloaded and parsed).
 *
 * 5.  The header glass block, the product-grid padding and the .fade-in-block
 *     override. All three moved to the design system, where they sit next to
 *     the rest of the header / shop rules instead of three files apart.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * Page canvas. Needs to be here rather than in the design system so the
 * first paint is already black — otherwise a white flash shows between the
 * HTML arriving and the later stylesheets applying.
 * ------------------------------------------------------------------------ */
.wd-page-content,
body,
.wd-footer {
	background-color: #000 !important;
}

.wd-copyrights.copyrights-wrapper.wd-layout-centered {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pre-utility flash guard for the Struxa full-bleed hero sections.
 *
 * Utility CSS arrives after this file, so for one frame a hero <img> would
 * paint at its natural (very large) size before object-fit and sizing apply.
 * Locking the section height and the image fit here makes the first paint
 * correct; the utility layer then re-applies identical values.
 * ------------------------------------------------------------------------ */
section[class*="h-[52vh]"],
section[class*="h-[46vh]"],
section[class*="h-[40vh]"],
section[class*="h-[36vh]"] {
	position: relative;
	width: 100%;
	overflow: hidden;
}

section[class*="h-[52vh]"] { height: 52vh; min-height: 360px; }
section[class*="h-[46vh]"] { height: 46vh; min-height: 320px; }
section[class*="h-[40vh]"] { height: 40vh; min-height: 300px; }
section[class*="h-[36vh]"] { height: 36vh; min-height: 260px; }

section[class*="h-[52vh]"] > img,
section[class*="h-[46vh]"] > img,
section[class*="h-[40vh]"] > img,
section[class*="h-[36vh]"] > img,
section[class*="h-[52vh]"] > video,
section[class*="h-[40vh]"] > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Homepage masthead: the hero photograph starts under the header from the
 * first frame, rather than only once WoodMart's scroll-triggered sticky
 * header fires.
 *
 * An earlier version forced the header itself to position:fixed, which
 * fought WoodMart's own sticky JS (whb-scroll-stick / .whb-sticked) and made
 * it snap instead of animate. The header is left completely alone here —
 * still static, still driven entirely by WoodMart — and the hero is pulled
 * up underneath it by the theme's own --wd-header-h custom property, which
 * WoodMart keeps in sync at every breakpoint.
 *
 * :not(.whb-sticked) keeps this z-index bump out of the way once WoodMart's
 * own sticky class takes over.
 * ------------------------------------------------------------------------ */
body.page-template-template-home .whb-header:not(.whb-sticked) {
	position: relative;
	z-index: 20;
}

body.page-template-template-home .struxa-masthead {
	margin-top: calc(-1 * var(--wd-header-h));
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Brand colour utilities — render-blocking safety net.
 *
 * These four colours exist only in the Struxa utility layer. This file is a
 * real <link> and is therefore present on the first paint, so listing them
 * here means a section never paints with no background at all. The utility
 * layer emits identical declarations, so nothing fights — these simply get
 * there first.
 *
 * Only the custom brand colours are listed. Never add generic utilities
 * (.flex, .block, .border) here — those would leak into WooCommerce and
 * WoodMart markup site-wide.
 * ------------------------------------------------------------------------ */
.bg-cream    { background-color: #e3d7c8; }
.bg-gold     { background-color: #C5A059; }
.bg-ink      { background-color: #0d0d0d; }
.text-gold   { color: #C5A059; }
.text-cream  { color: #e3d7c8; }
.text-ink    { color: #0d0d0d; }
.border-gold { border-color: #C5A059; }
.border-ink  { border-color: #0d0d0d; }