/**
 * ClothB2B Child — base layer.
 *
 * Resets, document typography, layout helpers, the button system, form fields,
 * and the script-aware typography block (CJK / Arabic). Depends on tokens.css.
 * Enqueued after astra-theme-css so these rules win the cascade where needed.
 */

/* ============ Catalog mode guards (inquiry-only) ============
 * Migrated from the old theme.css. Belt-and-suspenders CSS so no purchase
 * affordance ever reaches the customer — the PHP filters + mu-plugin do the
 * real work; this is the last line of defense. */
.ast-site-header-cart,
.ast-header-woo-cart,
.site-header-cart,
.ast-header-woo-cart-wrap,
.ast-site-header-cart-li,
.widget_shopping_cart,
.widget_shopping_cart_content,
.woocommerce-mini-cart,
.widget_product_cart,
.woocommerce-message .button.wc-forward,
.woocommerce-message .button.checkout-button,
.woocommerce a.add_to_cart_button,
.woocommerce-ajax-add-to-cart,
a.added_to_cart {
	display: none !important;
}

/* ============ Document base ============ */
body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: var(--cb-font-sans);
	color: var(--cb-text);
	line-height: var(--cb-lh-body);
}

body {
	background: var(--cb-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cb-font-display);
	color: var(--cb-ink);
	font-weight: 700;
	line-height: var(--cb-lh-snug);
	letter-spacing: var(--cb-tracking-tight);
	margin: 0 0 var(--cb-s-4);
}
h1 { font-size: var(--cb-fs-h1); line-height: var(--cb-lh-tight); }
h2 { font-size: var(--cb-fs-h2); }
h3 { font-size: var(--cb-fs-h3); }
h4 { font-size: var(--cb-fs-h4); }

p { margin: 0 0 var(--cb-s-4); }

a {
	color: var(--cb-accent);
	text-decoration: none;
	transition: color var(--cb-dur) var(--cb-ease);
}
a:hover { color: var(--cb-accent-hover); }

/* ============ Accessibility: focus visibility ============
 * Keyboard users get a visible accent ring on every focusable element; mouse
 * users see it only where meaningful (:focus-visible) so clicks stay clean.
 * Form inputs keep a :focus ring always (expected for text entry). */
:focus { outline: none; }
a:focus-visible,
.cb-btn:focus-visible,
.cb-lang-toggle:focus-visible,
.cb-lang-list a:focus-visible,
.cb-fit-card:focus-visible,
.cb-cat-card:focus-visible,
.cb-product-card:focus-visible,
.cb-testi:focus-visible,
.cb-feature:focus-visible,
.cb-faq summary:focus-visible,
.cb-footer a:focus-visible,
.ast-pagination a:focus-visible,
.woocommerce nav.woocommerce-pagination a:focus-visible {
	outline: 2px solid var(--cb-accent);
	outline-offset: 3px;
	border-radius: var(--cb-radius-sm);
}

/* Smooth scrolling for in-page anchors (footer "back to top" etc.). Disabled
 * automatically under prefers-reduced-motion below. */
html { scroll-behavior: smooth; }

/* Brand text selection. */
::selection { background: var(--cb-earth-200); color: var(--cb-ink); }
::-moz-selection { background: var(--cb-earth-200); color: var(--cb-ink); }

/* Respect users who prefer reduced motion — neutralize every transition/
 * animation site-wide. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

img { max-width: 100%; height: auto; display: block; }

/* Entry content (inner pages rendered from the DB) — keep it readable. */
.entry-content {
	font-size: var(--cb-fs-body);
	line-height: var(--cb-lh-body);
}
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }

/* ============ Layout helpers ============ */
.cb-container {
	max-width: var(--cb-maxw);
	margin-inline: auto;
	padding-inline: var(--cb-gutter);
}
.cb-container--narrow { max-width: var(--cb-maxw-narrow); }

/* Front page: own the width so full-bleed sections can escape the Astra column. */
body.cb-front #content .ast-container {
	max-width: 100%;
	padding-inline: 0;
}
body.cb-front #primary { margin: 0; }

/* Generic section padding + a soft eyebrow label + a section header combo. */
.cb-section { padding-block: var(--cb-s-9); }
.cb-section--tight { padding-block: var(--cb-s-8); }
.cb-section--alt { background: var(--cb-bg-alt); }
.cb-section--warm { background: var(--cb-bg-warm); }

.cb-eyebrow {
	display: inline-block;
	font-size: var(--cb-fs-xs);
	font-weight: 700;
	letter-spacing: var(--cb-tracking-wider);
	text-transform: uppercase;
	color: var(--cb-accent);
	margin-bottom: var(--cb-s-3);
}

/* Section heading block: eyebrow + title + optional intro, centered by default. */
.cb-section-head {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--cb-s-7);
}
.cb-section-head__title {
	font-size: var(--cb-fs-h2);
	margin-bottom: var(--cb-s-3);
}
.cb-section-head__intro {
	color: var(--cb-muted);
	font-size: var(--cb-fs-lead);
	margin: 0;
}
.cb-section-head--left { text-align: left; margin-inline: 0; }

/* ============ Buttons ============ */
.cb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cb-s-2);
	padding: var(--cb-s-3) var(--cb-s-6);
	font-family: var(--cb-font-sans);
	font-size: var(--cb-fs-xs);
	font-weight: 700;
	letter-spacing: var(--cb-tracking-wider);
	text-transform: uppercase;
	border-radius: var(--cb-radius-pill);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cb-dur) var(--cb-ease),
	            color var(--cb-dur) var(--cb-ease),
	            border-color var(--cb-dur) var(--cb-ease),
	            transform var(--cb-dur) var(--cb-ease),
	            box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-btn:hover { transform: translateY(-1px); }
.cb-btn:active { transform: translateY(0); }

.cb-btn--solid { background: var(--cb-ink); color: #fff; }
.cb-btn--solid:hover { background: var(--cb-ink-800); color: #fff; }

.cb-btn--light { background: #fff; color: var(--cb-ink); }
.cb-btn--light:hover { background: var(--cb-warm-50); color: var(--cb-ink); }

.cb-btn--accent { background: var(--cb-accent); color: #fff; }
.cb-btn--accent:hover { background: var(--cb-accent-hover); color: #fff; }

.cb-btn--outline { background: transparent; color: var(--cb-ink); border-color: var(--cb-line); }
.cb-btn--outline:hover { border-color: var(--cb-ink); color: var(--cb-ink); }

.cb-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.cb-btn--ghost-light:hover { background: #fff; color: var(--cb-ink); border-color: #fff; }

.cb-btn--sm { padding: var(--cb-s-2) var(--cb-s-4); font-size: var(--cb-fs-xs); }
.cb-btn--lg { padding: var(--cb-s-4) var(--cb-s-7); font-size: var(--cb-fs-sm); }

/* Arrow nudge on hover for directional CTAs. */
.cb-btn--arrow .cb-btn__arrow { transition: transform var(--cb-dur) var(--cb-ease); }
.cb-btn--arrow:hover .cb-btn__arrow { transform: translateX(3px); }

/* ============ Form fields (shared by inquiry form + comment fields) ============ */
.cb-field {
	display: block;
	width: 100%;
	padding: var(--cb-s-3) var(--cb-s-4);
	font: inherit;
	font-size: var(--cb-fs-sm);
	color: var(--cb-text);
	background: #fff;
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-radius);
	transition: border-color var(--cb-dur) var(--cb-ease), box-shadow var(--cb-dur) var(--cb-ease);
}
.cb-field:focus {
	outline: none;
	border-color: var(--cb-accent);
	box-shadow: 0 0 0 3px var(--cb-earth-100);
}

/* ============ Script-aware typography (CJK / Arabic) ============
 * CJK and Arabic never benefit from letter-spacing, and uppercase breaks Arabic
 * letter-joining (and is a no-op on CJK). Rather than enumerate every component,
 * neutralize both globally for these four scripts. !important is required: the
 * component rules (e.g. .cb-eyebrow{letter-spacing:var(--cb-tracking-wider)}) have
 * equal specificity and load later (components.css), so without !important they
 * win. Latin scripts (en/es/fr/de/pt/tr/vi/id) are untouched. Polylang sets
 * <html lang="…"> so :lang() subtag-matches (zh matches zh-CN, ar matches ar-…).
 * This also covers the WooCommerce uppercase selectors (product title, Inquire
 * buttons, tabs) that rtl.css does not patch, so Arabic shop pages keep correct
 * letter-joining. */
:lang(zh), :lang(ja), :lang(ko), :lang(ar) {
	letter-spacing: normal !important;
	text-transform: none !important;
}