/*
Theme Name: LATISLIT Spa
Theme URI: https://latislit.com
Description: LATISLIT Spa — Soft luxury redesign with creamy whites, sage green, blush & gold. European cosmetics delivered to Morocco.
Author: LATISLIT
Template: kadence
Version: 2.0.0
Text Domain: latislit-spa
Tags: woocommerce, rtl-language-support, custom-colors, custom-menu, featured-images
*/

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */

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

:root {
	/* ── New Spa Palette ─────────────────────────────────────── */
	--ll-cream:          #FAF7F2;
	--ll-cream-2:        #F4EFE6;
	--ll-cream-3:        #EDE5D8;
	--ll-sage:           #7A9B7A;
	--ll-sage-light:     #B8CEB8;
	--ll-sage-pale:      #E8F0E8;
	--ll-blush:          #E8C4B0;
	--ll-blush-light:    #F2D9CE;
	--ll-blush-pale:     #FBF3EF;
	--ll-gold:           #C9A84C;
	--ll-gold-light:     #E8D4A0;
	--ll-gold-pale:      #F8F1E0;
	--ll-ink:            #2C2416;
	--ll-ink-2:          #4A3F30;
	--ll-ink-3:          #7A6E5E;
	--ll-white:          #FFFFFF;

	/* Legacy aliases (keep for WooCommerce compat) */
	--ll-black:          #2C2416;
	--ll-gold-dark:      #A8882C;
	--ll-beige:          #F4EFE6;
	--ll-gray-light:     #EDE5D8;
	--ll-gray-mid:       #7A6E5E;
	--ll-off-white:      #FAF7F2;
	--ll-red:            #C0392B;
	--ll-green:          #4A7A4A;

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

	--text-xs:    0.6875rem;
	--text-sm:    0.8125rem;
	--text-base:  1rem;
	--text-lg:    1.125rem;
	--text-xl:    1.25rem;
	--text-2xl:   1.5rem;
	--text-3xl:   1.875rem;
	--text-4xl:   2.25rem;
	--text-5xl:   3rem;
	--text-6xl:   clamp(2.5rem, 6vw, 4rem);
	--text-hero:  clamp(3rem, 8vw, 5.5rem);

	--lh-tight:   1.1;
	--lh-snug:    1.3;
	--lh-normal:  1.65;
	--lh-relaxed: 1.8;

	--ls-tight:   -0.02em;
	--ls-normal:  0;
	--ls-wide:    0.05em;
	--ls-wider:   0.08em;
	--ls-widest:  0.12em;

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

	/* ── Spacing ────────────────────────────────────────────── */
	--space-1:    0.25rem;
	--space-2:    0.5rem;
	--space-3:    0.75rem;
	--space-4:    1rem;
	--space-5:    1.25rem;
	--space-6:    1.5rem;
	--space-8:    2rem;
	--space-10:   2.5rem;
	--space-12:   3rem;
	--space-16:   4rem;
	--space-20:   5rem;
	--space-24:   6rem;
	--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 ─────────────────────────────────────────────────── */
	--radius:          8px;
	--radius-sm:       6px;
	--radius-md:       12px;
	--radius-lg:       20px;
	--radius-xl:       28px;
	--radius-full:     9999px;

	--border-width:    1px;
	--border-color:    var(--ll-cream-3);
	--border:          1px solid var(--ll-cream-3);

	/* ── Transitions ────────────────────────────────────────── */
	--ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast:    150ms;
	--dur-base:    250ms;
	--dur-slow:    400ms;
	--transition-fast:  var(--dur-fast) var(--ease-inout);
	--transition-base:  var(--dur-base) var(--ease-inout);
	--transition-slow:  var(--dur-slow) var(--ease-out);

	/* ── Shadows ────────────────────────────────────────────── */
	--shadow-xs:       0 1px 4px rgba(44,36,22,0.06);
	--shadow-sm:       0 2px 10px rgba(44,36,22,0.08);
	--shadow-md:       0 4px 24px rgba(44,36,22,0.10);
	--shadow-lg:       0 8px 40px rgba(44,36,22,0.13);
	--shadow-xl:       0 16px 60px rgba(44,36,22,0.16);
	--shadow-product:  var(--shadow-sm);
	--shadow-hover:    var(--shadow-md);
	--shadow-drawer:   -4px 0 40px rgba(44,36,22,0.14);

	/* ── Z-index ────────────────────────────────────────────── */
	--z-below:    -1;
	--z-base:      0;
	--z-above:    10;
	--z-dropdown: 200;
	--z-sticky:   500;
	--z-overlay:  700;
	--z-drawer:   800;
	--z-header:   900;
	--z-announce: 1000;
	--z-modal:    1100;
	--z-toast:    1200;

	/* ── Layout ─────────────────────────────────────────────── */
	--container-max:   1280px;
	--container-pad:   clamp(1rem, 4vw, 2.5rem);
	--header-h:        76px;
	--announce-h:      44px;
	--grid-gap:        clamp(0.75rem, 2vw, 1.5rem);

	/* ── Semantic aliases ───────────────────────────────────── */
	--color-text:        var(--ll-ink);
	--color-text-muted:  var(--ll-ink-3);
	--color-bg:          var(--ll-cream);
	--color-bg-alt:      var(--ll-cream-2);
	--color-bg-warm:     var(--ll-blush-pale);
	--color-accent:      var(--ll-sage);
	--color-gold:        var(--ll-gold);
	--color-border:      var(--ll-cream-3);
	--color-success:     var(--ll-green);
	--color-error:       var(--ll-red);
}

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

body {
	font-family: var(--font-body);
	font-weight: var(--w-regular);
	color: var(--ll-ink);
	background-color: var(--ll-cream);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--w-black);
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ll-ink);
	margin-top: 0;
}

a {
	color: var(--ll-ink);
	text-decoration: none;
	transition: color var(--transition-fast);
}

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

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

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

.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;
}

/* ── Global Buttons ─────────────────────────────────────────── */
.ll-btn,
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	font-family: var(--font-body);
	font-weight: var(--w-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	font-size: var(--text-xs);
	cursor: pointer;
	border-radius: var(--radius-full) !important;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ll-btn-primary,
.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--ll-sage) !important;
	color: var(--ll-white) !important;
	border: 2px solid var(--ll-sage) !important;
	padding: 14px 32px !important;
	border-radius: var(--radius-full) !important;
}

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

.ll-btn-ghost {
	background-color: transparent;
	color: var(--ll-sage);
	border: 1.5px solid var(--ll-sage);
	padding: 13px 28px;
	border-radius: var(--radius-full);
}

.ll-btn-ghost:hover {
	background-color: var(--ll-sage);
	color: var(--ll-white);
}

.ll-btn-gold {
	background-color: var(--ll-gold);
	color: var(--ll-ink);
	border: 2px solid var(--ll-gold);
	padding: 14px 32px;
	border-radius: var(--radius-full);
	font-weight: var(--w-bold);
}

.ll-btn-gold:hover {
	background-color: var(--ll-gold-dark);
	border-color: var(--ll-gold-dark);
	color: var(--ll-white);
}

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

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

/* ── Section eyebrow + headings ─────────────────────────────── */
.ll-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--text-xs);
	font-weight: var(--w-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ll-sage);
	margin-bottom: 14px;
}

.ll-eyebrow::before,
.ll-eyebrow::after {
	content: '';
	display: block;
	width: 36px;
	height: 1px;
	background: var(--ll-sage-light);
	flex-shrink: 0;
}

.ll-eyebrow--left::after,
.ll-eyebrow--left::before {
	display: none;
}

.ll-eyebrow--left {
	justify-content: flex-start;
}

.ll-section-head {
	text-align: center;
	margin-bottom: var(--space-10);
}

.ll-section-head .ll-eyebrow {
	justify-content: center;
}

.ll-section-h2 {
	font-family: var(--font-display);
	font-size: var(--text-6xl);
	font-weight: var(--w-black);
	letter-spacing: 0.03em;
	color: var(--ll-ink);
	margin-bottom: 10px;
}

.ll-section-serif {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--ll-ink-3);
	font-weight: var(--w-regular);
}

.ll-link-underline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
	font-weight: var(--w-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ll-sage);
	border-bottom: 1px solid var(--ll-sage-light);
	padding-bottom: 2px;
}

.ll-link-underline:hover {
	color: var(--ll-ink);
	border-bottom-color: var(--ll-ink);
}

/* ── Offset for fixed header ────────────────────────────────── */
.site-top-header {
	padding-top: calc(var(--announce-h) + var(--header-h));
}

@media (max-width: 480px) {
	.site-top-header {
		padding-top: calc(36px + var(--header-h));
	}
}