/*
 * base.css
 *
 * Design tokens, element defaults, buttons and layout helpers.
 * Part of the Unitex child theme. Enqueued from inc/enqueue.php.
 */

/* ==========================================================
   1. TOKENS
   ========================================================== */
:root {
	--ux-red:       #E5342A;
	--ux-red-dark:  #C7261D;
	--ux-dark:      #241C1B;
	--ux-bg:        #FBF7F5;
	--ux-line:      #EADFDC;
	--ux-line-soft: #F2E7E5;
	--ux-muted:     #8A7D7B;
	--ux-tint:      #FBF0EE;
}

/* ==========================================================
   2. BASE - zero radius, typography
   ========================================================== */
body {
	background: var(--ux-bg);
	color: var(--ux-dark);
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

/* horizontal overflow lives on html, not body - body would create a
   containing block and clip fixed off-canvas panels (side cart) */
html { overflow-x: hidden; }

h1, h2, h3, h4, h5,
.wd-entities-title,
.woocommerce-loop-product__title {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--ux-dark);
}

h1 { font-size: 56px; line-height: 1; }
h2 { font-size: 42px; line-height: 1.05; }
h3 { font-size: 27px; }

a       { color: var(--ux-red); text-decoration: none; }
a:hover { color: var(--ux-red-dark); }

/* ==========================================================
   3. BUTTONS
   ========================================================== */
.wp-block-button__link,
.btn, .button, button[type="submit"] {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 18px 32px;
	border: 0;
	transition: background .2s ease, color .2s ease;
}

.ux-btn-dark  .wp-block-button__link       { background: var(--ux-dark); color: #fff; }
.ux-btn-dark  .wp-block-button__link:hover { background: #fff; color: var(--ux-red); }
.ux-btn-red   .wp-block-button__link       { background: var(--ux-red); color: #fff; }
.ux-btn-red   .wp-block-button__link:hover { background: var(--ux-dark); color: #fff; }
.ux-btn-ghost .wp-block-button__link       { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.ux-btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--ux-red); }

/* ==========================================================
   4. LAYOUT HELPERS
   ========================================================== */
.ux-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

/* nothing in the chain may clip a full-bleed section */
.wd-content-layout,
.site-content,
.main-page-wrapper,
.entry-content,
.entry-content > * { overflow: visible !important; }

/* break a section out of any container, full viewport width.
   .ux-footer no longer needs this: footer.php now renders it outside
   .wd-page-content, where it is already full width. */
.ux-full {
	width: auto !important;
	max-width: none !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
}

/* no gap between the header and the first section on the front page */
.home .wd-content-layout { padding-block: 0 !important; }

/* kill Gutenberg block margins ONLY where sections must touch,
   so every other section keeps its own padding-based rhythm */
.home .entry-content > .ux-hero,
.home .entry-content > .ux-usp,
.home .entry-content > p:has(> .ux-usp) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}