/*
Theme Name: LATISLIT Child
Theme URI: https://latislit.com
Description: LATISLIT brand child theme for Kadence — Moroccan beauty & personal care
Author: LATISLIT
Template: kadence
Version: 1.0.0
Text Domain: latislit-child
Tags: woocommerce, rtl-language-support, custom-colors, custom-menu, featured-images
*/

/* ============================================================
   GLOBAL RESETS & BRAND OVERRIDES
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* --- Brand Colors --- */
	--ll-black:         #121212;
	--ll-pure-black:    #000000;
	--ll-white:         #ffffff;
	--ll-off-white:     #f3f3f3;
	--ll-gold:          #d4af37;
	--ll-gold-light:    #e8c84a;
	--ll-gold-dark:     #b8962e;
	--ll-beige:         #f5e9da;
	--ll-charcoal:      #222222;
	--ll-gray-mid:      #666666;
	--ll-gray-light:    #dddddd;

	/* --- Typography --- */
	--font-display:     'Big Shoulders Display', sans-serif;
	--font-body:        'Raleway', sans-serif;
	--font-arabic:      'Cairo', sans-serif;

	/* --- Font Weights --- */
	--w-light:          300;
	--w-regular:        400;
	--w-medium:         500;
	--w-semibold:       600;
	--w-bold:           700;
	--w-black:          900;

	/* --- Spacing Scale --- */
	--space-xs:   0.25rem;
	--space-sm:   0.5rem;
	--space-md:   1rem;
	--space-lg:   1.5rem;
	--space-xl:   2rem;
	--space-2xl:  3rem;
	--space-3xl:  4rem;
	--space-4xl:  6rem;
	--space-5xl:  8rem;

	/* --- UI Tokens --- */
	--radius:           0px;    /* Sharp edges — brand requirement */
	--transition-fast:  150ms ease;
	--transition-base:  250ms ease;
	--transition-slow:  400ms ease;

	/* --- Shadows --- */
	--shadow-product:   0 4px 20px rgba(0, 0, 0, 0.08);
	--shadow-hover:     0 8px 40px rgba(0, 0, 0, 0.15);
	--shadow-drawer:    -4px 0 40px rgba(0, 0, 0, 0.2);

	/* --- Z-index --- */
	--z-announce:  1000;
	--z-header:     900;
	--z-drawer:     800;
	--z-overlay:    700;
	--z-above:      100;

	/* --- Layout --- */
	--container-max:  1280px;
	--container-pad:  clamp(1rem, 4vw, 2.5rem);
	--header-h:       72px;
	--announce-h:     40px;
}

/* Base */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-weight: var(--w-regular);
	color: var(--ll-black);
	background-color: var(--ll-white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Arabic RTL body font */
html[lang="ar"] body {
	font-family: var(--font-arabic);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--w-black);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ll-black);
	margin-top: 0;
}

/* Links */
a {
	color: var(--ll-black);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--ll-gold);
}

/* Buttons — global brand override */
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	border-radius: var(--radius) !important;
	font-family: var(--font-body);
	font-weight: var(--w-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background-color var(--transition-fast),
	            color var(--transition-fast),
	            border-color var(--transition-fast),
	            transform var(--transition-fast);
}

/* Primary button */
.btn-primary,
.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--ll-black) !important;
	color: var(--ll-white) !important;
	border: 2px solid var(--ll-black) !important;
	padding: 14px 32px !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-primary:hover,
.button.alt:hover {
	background-color: var(--ll-gold) !important;
	border-color: var(--ll-gold) !important;
	color: var(--ll-black) !important;
}

/* Secondary / ghost button */
.btn-secondary {
	background-color: transparent;
	color: var(--ll-white);
	border: 2px solid var(--ll-white);
	padding: 14px 32px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-secondary:hover {
	background-color: var(--ll-white);
	color: var(--ll-black);
}

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

/* Container */
.ll-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visually hide Kadence header when using custom header */
.site-top-header {
	padding-top: calc(var(--announce-h) + var(--header-h));
}

/* Gold underline utility */
.ll-gold-line {
	position: relative;
	display: inline-block;
}

.ll-gold-line::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 40px;
	height: 3px;
	background-color: var(--ll-gold);
}

/* Section spacing */
.ll-section {
	padding-block: var(--space-4xl);
}

@media (max-width: 768px) {
	.ll-section {
		padding-block: var(--space-3xl);
	}
}