/**
 * AKNB Global — Base Layer
 * ---------------------------------------------------------------------------
 * Modern reset + global element defaults + layout primitives + a11y helpers.
 * Uses CSS logical properties throughout so the layout mirrors correctly for
 * RTL (Arabic) without a separate stylesheet.
 *
 * @package AKNB_Global
 */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern", "liga", "cv11";
	overflow-x: clip;
}

/* RTL body font swap when the document is Arabic */
html[lang="ar"] body,
html[dir="rtl"] body {
	font-family: var(--font-arabic);
}

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

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

button {
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
	color: var(--color-link-hover);
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * Typography defaults
 * ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-3xl);
}
h2 {
	font-size: var(--text-2xl);
}
h3 {
	font-size: var(--text-xl);
}
h4 {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
}

p {
	text-wrap: pretty;
}

small {
	font-size: var(--text-sm);
}

strong,
b {
	font-weight: var(--fw-semibold);
}

/* Eyebrow / overline — used above section titles */
.aknb-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-secondary);
}

/* Numeric contexts (prices, quantities) use tabular figures for alignment */
.aknb-tabular {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------------- */

/* Centered content container with consistent gutters */
.aknb-container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.aknb-container--wide {
	max-width: var(--content-width-wide);
}

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

/* 12-column grid — collapses 12 → 8 (tablet) → 4 (mobile) semantics via
   auto-fit minmax where a fluid grid is preferred over fixed columns. */
.aknb-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gap);
}

/* Fluid auto grid for product/category cards */
.aknb-autogrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 260px), 1fr));
	gap: var(--grid-gap);
}

.aknb-section {
	padding-block: var(--section-gap);
}

.aknb-section--sm {
	padding-block: var(--section-gap-sm);
}

/* Section heading cluster */
.aknb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-end: var(--space-8);
}

.aknb-section__title {
	font-size: var(--text-2xl);
}

.aknb-section__link {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-secondary);
	white-space: nowrap;
}

/* Stack utility */
.aknb-stack > * + * {
	margin-block-start: var(--stack-gap, var(--space-4));
}

/* ---------------------------------------------------------------------------
 * Accessibility helpers
 * ------------------------------------------------------------------------- */

/* Visually hidden but available to screen readers */
.screen-reader-text,
.aknb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link — visible on focus */
.aknb-skip-link {
	position: absolute;
	inset-inline-start: var(--space-4);
	inset-block-start: -100%;
	z-index: var(--z-skip-link);
	padding: var(--space-3) var(--space-5);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: var(--radius-md);
	font-weight: var(--fw-medium);
	transition: inset-block-start var(--dur-fast) var(--ease-standard);
}

.aknb-skip-link:focus {
	inset-block-start: var(--space-4);
	color: var(--color-on-primary);
}

/* Global visible focus — never remove outlines, only restyle.
   :focus-visible keeps mouse clicks clean while honoring keyboard users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--focus-outline-width) solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* Remove default outline only where we replace it with a ring shadow */
:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Utility: aspect-locked media (consistent product image proportions)
 * ------------------------------------------------------------------------- */
.aknb-ratio {
	position: relative;
	overflow: hidden;
	background-color: var(--color-surface-sunken);
}

.aknb-ratio > img,
.aknb-ratio > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A complete ratio scale, deliberately including members the theme's own
 * templates don't currently use — these are utilities for page authors and child
 * themes, not component classes. Pick the one that matches the registered image
 * size being rendered (see the pairing table in inc/setup.php); a mismatch makes
 * object-fit: cover crop the difference away. */
.aknb-ratio--square {
	aspect-ratio: 1 / 1;
}
.aknb-ratio--portrait {
	aspect-ratio: 3 / 4;
}
.aknb-ratio--landscape {
	aspect-ratio: 4 / 3;
}
.aknb-ratio--wide {
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------------
 * Selection + scrollbar polish
 * ------------------------------------------------------------------------- */
::selection {
	background-color: var(--blue-100);
	color: var(--navy-950);
}

/* Focus trap helper (JS toggles this on body when drawer/modal open) */
.aknb-no-scroll {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * First-screen entrance — pure CSS, for content that is already on screen.
 *
 * Deliberately NOT the scroll-reveal primitive below. That one hides its element
 * until deferred app.js reaches it, which is right for content you have to
 * scroll to and wrong for anything above the fold: it would hold the largest
 * contentful paint until DOMContentLoaded and throw away the hero image's
 * fetchpriority="high". This runs off the first frame of CSS with no script
 * involved, so LCP lands as soon as the pixels do.
 *
 * No animation-delay here, for the same reason — a stagger on the LCP element
 * is a stagger on the metric.
 * ------------------------------------------------------------------------- */
[data-aknb-rise] {
	animation: aknb-rise var(--dur-slow) var(--ease-out) both;
}
@keyframes aknb-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Scroll reveal primitive (progressive enhancement).
 *
 * Two-step on purpose. app.js arms an element (.is-armed) only once it has
 * decided the element is below the fold, then adds .is-revealed when it scrolls
 * in. Nothing is hidden by CSS alone, so:
 *   - if app.js never loads or throws, every section stays visible;
 *   - content already on screen at boot is never hidden, so there is no
 *     flash-of-hidden and no JS in the critical rendering path.
 * A per-element delay arrives as --aknb-reveal-delay (see initReveal).
 * ------------------------------------------------------------------------- */
[data-aknb-reveal].is-armed {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
	transition-delay: var(--aknb-reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-aknb-reveal].is-armed.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-aknb-rise] {
		animation: none;
	}
	[data-aknb-reveal].is-armed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}