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

/* ==========================================================================
   Eldval design tokens
   Ref: DESIGN.md §3. Only values that WoodMart Theme Settings cannot express
   live here; everything else stays in Theme Settings.
   ========================================================================== */

:root {
	--eldval-black: #0b0b0c;
	--eldval-ivory: #f7f4ef;
	--eldval-champagne: #c9b79f;
	--eldval-teal: #1f6f73;
	--eldval-teal-hover: #185d61;
	--eldval-amber: #b9823a;
	--eldval-ink: #221f1c;
	--eldval-muted: #6e6862;
	--eldval-line: #ded8cf;
	--eldval-white: #ffffff;
}

/* --------------------------------------------------------------------------
   Button radius — DESIGN.md §7 requires 4px.
   Theme Settings only offers fixed steps (flat/3d = 0px, semi-rounded = 5px,
   rounded = 35px). Its generated CSS is printed after this file and also
   targets :root, so a higher-specificity selector is required here.
   -------------------------------------------------------------------------- */

html:root {
	--btn-default-brd-radius: 4px;
	--btn-accented-brd-radius: 4px;
}

/* --------------------------------------------------------------------------
   Form field radius — DESIGN.md §7 requires 3-4px.
   Theme Settings "semi-rounded" resolves to 5px, so the exact value is
   pinned here. Same specificity note as the button radius above.
   -------------------------------------------------------------------------- */

html:root {
	--wd-form-brd-radius: 4px;
}

/* --------------------------------------------------------------------------
   Secondary button — DESIGN.md §7: transparent background, Ink border.
   WoodMart exposes no border option for buttons, so the border variables
   consumed by the base stylesheet are set directly.
   -------------------------------------------------------------------------- */

.btn.btn-default {
	--btn-brd-width: 1px;
	--btn-brd-style: solid;
	--btn-brd-color: var(--eldval-ink);
}

.btn.btn-default:hover,
.btn.btn-default:focus {
	--btn-brd-color: var(--eldval-ink);
}

/* Primary button keeps a transparent border so its box size matches the
   secondary button (DESIGN.md §7 primary button spec). */

.btn.btn-accent {
	--btn-brd-width: 1px;
	--btn-brd-style: solid;
	--btn-brd-color: transparent;
}

/* --------------------------------------------------------------------------
   Cart page form controls — DESIGN.md §7
   Coupon input and quantity stepper: 48px height, Teal focus border.
   The quantity stepper reads as one cohesive joined group with 4px outer
   radius (inner corners square — already handled by WoodMart's quantity CSS).
   -------------------------------------------------------------------------- */

/* WoodMart's compiled style.min.css contains
   .shop-table-with-img div.quantity { --wd-form-height: 30px } (0,0,2,1).
   The child theme's .woocommerce-cart-form .quantity (0,0,2,0) loses.
   .woocommerce-cart-form .shop-table-with-img div.quantity (0,0,3,1) wins.
   Scoped to the cart form table so the product-page quantity stepper and
   mini-cart are unchanged. */

.woocommerce-cart-form .shop-table-with-img div.quantity {
	--wd-form-height: 48px;
}

/* Coupon input — same height bump. The .wd-coupon-form .input-text rule
   uses min-height: var(--wd-form-height), so overriding the custom property
   is the cleanest approach. */

.wd-coupon-form .input-text {
	--wd-form-height: 48px;
}

/* Border colour inside the quantity group — all edges should be Line
   so the control reads as one cohesive unit. The qty input's
   border-inline-color resolves to currentcolor (Ink) because
   div.quantity input[type=number] { border-inline: none } sets
   border-inline-color: currentcolor as part of the shorthand.
   Explicit border-color overrides it. */

.woocommerce-cart-form .shop-table-with-img .quantity input.qty {
	border-color: var(--eldval-line);
}

/* Focus states — Teal border per DESIGN.md §7 */

.wd-coupon-form .input-text:focus {
	--wd-form-brd-color-focus: var(--eldval-teal);
}

.woocommerce-cart-form .shop-table-with-img .quantity input.qty:focus {
	--wd-form-brd-color-focus: var(--eldval-teal);
}

.woocommerce-cart-form .shop-table-with-img .quantity .minus.btn:focus,
.woocommerce-cart-form .shop-table-with-img .quantity .plus.btn:focus {
	--btn-brd-color: var(--eldval-teal);
}

/* --------------------------------------------------------------------------
   Header colour schemes — DESIGN.md §6, §11
   The Header Builder sets row backgrounds (Champagne top bar, Black header
   rows), but text inside the rows still inherits colours meant for a light
   page: on Black the info-box title measured Ink (#221f1c) and its body text
   Muted (#6e6862) at 3.58:1, and on Champagne the row text measured 2.82:1.
   Both fall under the 4.5:1 AA floor required by §11, so the text colours are
   set per row here. Scoped to .whb-* rows so page content is unaffected.
   -------------------------------------------------------------------------- */

/* Champagne top bar — Black text (§6: "announcement bar, nen Champagne, chu Black") */

.whb-top-bar.whb-color-dark {
	--wd-text-color: var(--eldval-ink);
	--wd-title-color: var(--eldval-ink);
	--wd-link-color: var(--eldval-ink);
	color: var(--eldval-ink);
}

.whb-top-bar.whb-color-dark :is(p, .info-box-title, .wd-info-box-title) {
	color: var(--eldval-ink);
}

/* Black header rows — Ivory text */

.whb-general-header.whb-color-light,
.whb-header-bottom.whb-color-light {
	--wd-text-color: var(--eldval-ivory);
	--wd-title-color: var(--eldval-ivory);
	color: var(--eldval-ivory);
}

.whb-general-header.whb-color-light :is(p, .info-box-title, .wd-info-box-title),
.whb-header-bottom.whb-color-light :is(p, .info-box-title, .wd-info-box-title) {
	color: var(--eldval-ivory);
}

/* --------------------------------------------------------------------------
   Gutenberg button blocks — DESIGN.md §7 (radius 4px)
   wd/button renders .btn without .btn-default/.btn-accent, so it reads the
   base --btn-brd-radius variable rather than the Theme Settings ones set
   above. Measured 0px before this rule.
   .btn-style-link is an underline-only style (--btn-height: none, no
   background); rounding it would have no visible effect, and .btn-shape-round
   / .btn-shape-semi-round are explicit author choices, so all three are
   excluded.
   -------------------------------------------------------------------------- */

.btn:not(.btn-style-link):not(.btn-shape-round):not(.btn-style-round):not(.btn-shape-semi-round):not(.btn-style-semi-round) {
	--btn-brd-radius: 4px;
}

/* Underline style — Ink instead of the inherited grey (#333) so it matches
   the body text colour defined in DESIGN.md §3. el-button.css sets
   .btn-color-primary.btn-style-link { --btn-color: var(--color-gray-800) }
   at (0,2,0), so the colour class must be included here to win. */

.btn.btn-style-link,
.btn.btn-style-link.btn-color-primary,
.btn.btn-style-link.btn-color-alt,
.btn.btn-style-link.btn-color-black {
	--btn-color: var(--eldval-ink);
}

/* Keep cart dropdown visible on cart/checkout pages */
.woocommerce-cart .wd-dropdown-cart,
.woocommerce-checkout .wd-dropdown-cart {
	display: block !important;
}