/* Heejab brand foundation — tokens, typography, buttons, announcement bar.
   Values come from the approved mockups (logo gold #A1835B; buttons/bars #8C6A36). */

:root {
	/* surfaces */
	--hj-paper: #FFFFFF;
	--hj-ivory: #FBF8F2;
	--hj-sand: #F3ECE0;
	--hj-wash: #F6EFE3;
	--hj-mist: #F4F2EE;
	/* ink */
	--hj-ink: #1E1A15;
	--hj-ink-2: #3A332B;
	--hj-muted: #6E6558;
	--hj-line: #E7DFD1;
	--hj-line-2: #D9CFBE;
	/* brand gold */
	--hj-accent: #A1835B;
	--hj-accent-deep: #8C6A36;
	--hj-accent-hover: #7A5B2C;
	--hj-accent-soft: #D9C6A3;
	--hj-accent-light: #E8D9BC;
	/* semantic */
	--hj-sale: #B23A32;
	--hj-ok: #2E7D4F;
	--hj-flash: #E00000;
	--hj-wa: #1FAF54;
	/* type */
	--hj-sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--hj-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	/* layout */
	--hj-wrap: 1180px;
	--hj-gut: clamp(16px, 3.2vw, 44px);

	/* Elementor + plugin bridges: both read these, so the brand set once drives
	   the theme, Elementor global colours and the plugin chrome. */
	--e-global-color-primary: #1E1A15;
	--e-global-color-secondary: #8C6A36;
	--e-global-color-accent: #A1835B;
	--e-global-color-text: #3A332B;
	--global-palette-btn-bg: #8C6A36;
	--qav-brand-primary: #8C6A36;
	--qav-brand-accent: #A1835B;
}

body {
	background: var(--hj-paper);
	color: var(--hj-ink);
	font-family: var(--hj-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hj-sans);
	font-weight: 500;
	color: var(--hj-ink);
	text-wrap: balance;
}

/* Section headings in the mockups are wide-tracked uppercase. */
.hj-h-track {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: clamp(17px, 1.6vw, 21px);
	text-align: center;
}

.hj-eyebrow {
	font-size: 11.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hj-accent-deep);
	font-weight: 500;
}

.hj-tagline {
	font-family: var(--hj-serif);
	font-style: italic;
	font-weight: 500;
	color: var(--hj-accent-deep);
}

a { color: var(--hj-ink); }
a:hover { color: var(--hj-accent-deep); }

:focus-visible {
	outline: 2px solid var(--hj-accent-deep);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- buttons */
.hj-btn,
button, input[type="submit"], .button, .wp-element-button {
	font-family: var(--hj-sans);
}

.hj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	background: var(--hj-accent-deep);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background .2s;
}
.hj-btn:hover { background: var(--hj-accent-hover); color: #fff; }

.hj-btn--ghost {
	background: transparent;
	color: var(--hj-ink);
	border: 1px solid var(--hj-ink);
}
.hj-btn--ghost:hover { background: var(--hj-ink); color: #fff; }

/* Underlined text link used under hero/banner copy. */
.hj-link-u {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1.5px solid currentColor;
}

/* ---------------------------------------------------------------- announcement bar */
.hj-announce {
	background: var(--hj-ink);
	color: var(--hj-accent-light);
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 9px 16px;
}
.hj-announce b { color: #fff; font-weight: 500; }
.hj-announce a { color: inherit; text-decoration: none; }

@media (max-width: 900px) {
	.hj-announce { font-size: 10.5px; letter-spacing: .14em; padding: 8px 12px; }
}

/* ---------------------------------------------------------------- WhatsApp float */
.hj-wa {
	position: fixed;
	right: 20px;
	bottom: 22px;
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hj-wa);
	color: #fff;
	border-radius: 999px;
	padding: 11px 18px 11px 14px;
	font-size: 13.5px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(31, 175, 84, .35);
}
.hj-wa:hover { color: #fff; }
.hj-wa svg { flex: none; }

@media (max-width: 900px) {
	/* clear of TSC's bottom nav on phones */
	.hj-wa { padding: 0; width: 48px; height: 48px; justify-content: center; right: 14px; bottom: 78px; }
	.hj-wa span { display: none; }
	body.woocommerce-cart .hj-wa,
	body.woocommerce-checkout .hj-wa { bottom: 84px; }
}