/**
 * JAFRA — Base
 *
 * Reset, document defaults, typography, containers, grid and focus behaviour.
 * Every value resolves to a token from tokens.css.
 *
 * LOGICAL PROPERTIES
 * This file is authored with CSS logical properties (margin-inline,
 * padding-inline, inset-inline, border-inline, text-align: start/end) so the
 * foundation is RTL-ready without a mirrored stylesheet. See decision B2 and
 * docs/DESIGN-DISCREPANCIES.md §3. rtl.css therefore carries only the genuine
 * direction-specific exceptions, not a duplicate of this file.
 */

/* ==========================================================================
 * 1. Reset
 * The designs use a `box-sizing: border-box` + zeroed margin/padding reset
 * (`.jf, .jf * { box-sizing: border-box; margin: 0; padding: 0; }`).
 * ========================================================================== */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
	padding: 0;
}

ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* ==========================================================================
 * 2. Document
 * ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: var(--jafra-color-bg);
	color: var(--jafra-color-text);
	font-family: var(--jafra-font-body);
	font-weight: var(--jafra-weight-regular);

	/*
	 * Base size and leading are left at the browser defaults (16px / normal),
	 * because that is what the designs assume: the `.jf` wrapper in every
	 * .dc.html sets font-family and colour but never font-size or line-height,
	 * and each element then declares its own.
	 *
	 * Do NOT set a global line-height here. An earlier pass used 1.6 and it
	 * inflated every block that relies on `normal` — the newsletter band came
	 * out 23px too tall, and the Arabic display line 7px too tall. Elements
	 * that need a specific leading declare it from the token scale.
	 */
	font-size: var(--jafra-text-16);
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* DM Sans carries an `opsz` 9..40 axis. `auto` is the initial value; it is
	 * stated explicitly here so nobody removes it believing it is inert.
	 * See docs/DESIGN-TOKENS.md §2.1. */
	font-optical-sizing: auto;
}

/* Skip link — visible only when focused. */
.jafra-skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: var(--jafra-z-drawer);
	padding: var(--jafra-space-12) var(--jafra-space-16);
	background: var(--jafra-color-ink);
	color: var(--jafra-color-text-on-dark);
	font-size: var(--jafra-text-12-5);
	font-weight: var(--jafra-weight-semibold);
	letter-spacing: var(--jafra-ls-13);
	text-transform: uppercase;
	transform: translateY(-100%);
}

.jafra-skip-link:focus {
	transform: translateY(0);
}

/* ==========================================================================
 * 3. Typography helpers
 * These mirror the design's own helper classes (.serif / .kufi / .ar) so that
 * markup maps one-to-one onto the source designs.
 * ========================================================================== */

.jafra-serif {
	font-family: var(--jafra-font-serif);
}

/* Arabic display type. `direction: rtl` is applied LOCALLY — Arabic is
 * editorial display content inside an LTR page, not a locale switch. */
.jafra-kufi {
	font-family: var(--jafra-font-kufi);
	direction: rtl;
	unicode-bidi: isolate;
}

/* Arabic body copy. */
.jafra-ar {
	font-family: var(--jafra-font-arabic);
	direction: rtl;
	unicode-bidi: isolate;
}

/* Mixed Arabic/English in a single string (e.g. the announcement message
 * "قصص عربية تُلبَس · Stories you can wear"). Isolation keeps the bidi
 * algorithm from reordering the punctuation between the two runs. */
.jafra-bidi {
	unicode-bidi: isolate;
}

/*
 * Headings inherit `normal` leading, NOT a scale value.
 *
 * The designs never set 1.25 on a heading: each one either declares its own
 * line-height (.92, .95, 1, 1.05) or relies on the browser default. Imposing
 * 1.25 here silently changed several — the community heading came out 9px
 * short and the reviews heading 1px tall — so it is left alone and each
 * component states what it needs.
 */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--jafra-weight-semibold);
	line-height: normal;
}

/* ==========================================================================
 * 4. Links
 * The designs strip underlines globally and reintroduce them as an animated
 * pseudo-element on .jafra-link-underline (see components.css).
 * ========================================================================== */

a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
 * 5. Media
 * ========================================================================== */

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
}

img {
	block-size: auto;
}

/* ==========================================================================
 * 6. Forms — inherit type by default; styling lives in components.css
 * ========================================================================== */

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* `padding: 0` matters: the UA default is `1px 6px`, which pushed the mobile
 * header's icon button 6px off its designed position and made it 2px taller.
 * The designs draw bare icons with no button padding. */
button {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

textarea {
	resize: vertical;
}

/* ==========================================================================
 * 7. Focus
 * Focus must stay clearly visible without altering the supplied design.
 * `:focus-visible` keeps the ring off mouse clicks, so the visual design is
 * untouched for pointer users while keyboard users get a strong indicator.
 * ========================================================================== */

:focus-visible {
	outline: 2px solid var(--jafra-color-burgundy);
	outline-offset: 2px;
}

/* Only suppress the default ring where :focus-visible is supported, so
 * older engines keep their fallback indicator. */
:focus:not(:focus-visible) {
	outline: none;
}

/* On dark surfaces the burgundy ring lacks contrast — use the cream instead. */
.jafra-on-dark :focus-visible {
	outline-color: var(--jafra-color-text-on-dark);
}

/* ==========================================================================
 * 8. Containers
 * Canonical container is 1240px with a 44px desktop gutter and an 18px/24px
 * mobile gutter. Mobile gutters follow the source designs rather than being
 * standardised — the header uses 18px, content sections use 24px.
 * ========================================================================== */

.jafra-container {
	inline-size: 100%;
	max-inline-size: var(--jafra-container);
	margin-inline: auto;
	padding-inline: var(--jafra-gutter-mobile-section);
}

.jafra-container--wide {
	max-inline-size: var(--jafra-container-wide);
}

.jafra-container--checkout {
	max-inline-size: var(--jafra-container-checkout);
}

.jafra-container--editorial {
	max-inline-size: var(--jafra-container-editorial);
}

.jafra-container--narrow {
	max-inline-size: var(--jafra-container-narrow);
}

/* Header and footer use their own gutters at mobile (18px / 24px) and share
 * the 44px desktop gutter. */
.jafra-container--flush {
	padding-inline: 0;
}

@media (min-width: 1024px) {
	.jafra-container {
		padding-inline: var(--jafra-gutter);
	}
}

/* ==========================================================================
 * 9. Grid primitives
 * ========================================================================== */

.jafra-grid {
	display: grid;
	gap: var(--jafra-space-24);
}

/* Product-style grid: 2 columns on mobile (as designed), 3 on tablet
 * (derived — no tablet artboard exists), 4 on desktop.
 * See docs/IMPLEMENTATION-DECISIONS.md §4. */
.jafra-grid--products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.jafra-grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.jafra-grid--products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * 10. Utilities
 * ========================================================================== */

/*
 * The cart link's label is a WooCommerce FRAGMENT: the script replaces the whole
 * element after every cart change, so it cannot carry a utility class that the
 * replacement markup would have to remember to repeat. It gets the same
 * treatment by name instead.
 */
.jafra-cart-link__label,
.jafra-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jafra-no-scroll {
	overflow: hidden;
}

/* ==========================================================================
 * 11. Motion
 * The designs use one easing curve throughout. Honour reduced-motion by
 * collapsing transitions and animations rather than removing the end state.
 * ========================================================================== */

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