/* ==========================================================================
   Wejha Store — base: typography, links, focus, buttons, forms, surfaces
   Blocksy renders the markup and sets root font/colours from the Customizer;
   these rules only refine states and add the few shared surfaces we own.
   Logical properties throughout: Arabic (RTL) is the primary layout.
   ========================================================================== */

/* Typography ------------------------------------------------------------- */
body {
	font-family: var(--wejha-font);
	color: var(--wejha-text);
	background-color: var(--wejha-background);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--wejha-heading);
	line-height: var(--wejha-leading-tight);
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

p, li, dd, td, th {
	overflow-wrap: anywhere;
}

/* Links ------------------------------------------------------------------ */
.entry-content a:not(.wp-element-button):not(.button):not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Focus: one visible ring everywhere (keyboard only) ---------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wejha-focus-ring);
	outline-offset: 3px;
	border-radius: var(--wejha-radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Skip link (Blocksy prints one; make it visible on focus) ---------------- */
.skip-link:focus {
	position: fixed;
	inset-block-start: var(--wejha-space-3);
	inset-inline-start: var(--wejha-space-3);
	z-index: 100000;
	padding: var(--wejha-space-2) var(--wejha-space-4);
	background: var(--wejha-primary);
	color: var(--wejha-text-on-primary);
	border-radius: var(--wejha-radius-sm);
}

/* Buttons ---------------------------------------------------------------- */
/* Blocksy/WooCommerce/Blocks buttons already read --theme-button-* (set in tokens.css).
   Variants below are opt-in classes for our own markup. */
.wejha-button,
.wejha-button-secondary,
.wejha-button-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wejha-space-2);
	min-height: var(--wejha-control-height);
	padding-inline: var(--wejha-space-5);
	border-radius: var(--wejha-radius-md);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.wejha-button {
	background: var(--wejha-primary);
	color: var(--wejha-text-on-primary);
}

.wejha-button:hover,
.wejha-button:focus-visible {
	background: var(--wejha-primary-hover);
	color: var(--wejha-text-on-primary);
}

.wejha-button-secondary {
	background: var(--wejha-teal-soft);
	color: var(--wejha-teal-text);
	border-color: transparent;
}

.wejha-button-secondary:hover,
.wejha-button-secondary:focus-visible {
	background: var(--wejha-teal);
	color: #fff;
}

.wejha-button-ghost {
	background: transparent;
	color: var(--wejha-primary);
	border-color: var(--wejha-border);
}

.wejha-button-ghost:hover,
.wejha-button-ghost:focus-visible {
	border-color: var(--wejha-primary);
}

/* Forms ------------------------------------------------------------------ */
/* Field metrics/colours come from --theme-form-field-* (tokens.css). */
input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="url"]),
select,
textarea {
	font-family: inherit;
	font-size: var(--wejha-text-md);
}

textarea {
	min-height: calc(var(--wejha-control-height) * 2.5);
}

label,
.form-row label {
	font-weight: 500;
	color: var(--wejha-heading);
}

/* Surfaces --------------------------------------------------------------- */
.wejha-card {
	background: var(--wejha-white);
	border: 1px solid var(--wejha-border);
	border-radius: var(--wejha-radius-lg);
	box-shadow: var(--wejha-shadow-sm);
	padding: var(--wejha-space-5);
}

.wejha-card--flat {
	box-shadow: none;
}

.wejha-surface {
	background: var(--wejha-surface);
	border-radius: var(--wejha-radius-lg);
	padding: var(--wejha-space-5);
}

/* Badges (small accent usage) ------------------------------------------- */
.wejha-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wejha-space-1);
	padding: 0.15em 0.6em;
	border-radius: var(--wejha-radius-pill);
	font-size: var(--wejha-text-xs);
	font-weight: 500;
	background: var(--wejha-yellow-soft);
	color: var(--wejha-navy);
}

.wejha-badge--sale {
	background: var(--wejha-red-soft);
	color: var(--wejha-red-text);
}

.wejha-badge--new {
	background: var(--wejha-teal-soft);
	color: var(--wejha-teal-text);
}

/* Layout helpers ---------------------------------------------------------- */
.wejha-container {
	width: 100%;
	max-width: var(--wejha-container);
	margin-inline: auto;
	padding-inline: var(--wejha-gutter);
}

.wejha-container--narrow {
	max-width: var(--wejha-container-narrow);
}

/* Never scroll sideways because of a long Arabic/English label or an oversized block. */
html,
body {
	overflow-x: clip;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}