/*
 * Artfolio Pro — Design System
 * Ahmed AlSaadi Art
 *
 * Proportion: ~45% pearl / sandstone · ~35% falcon black / oud · ~8% desert gold.
 * Gold foil is used once per item (a rule, a badge edge or an accent — never all three).
 * One motif per page, low contrast (enforced in PHP by AFP_Design::motif()).
 */

:root {
	/* Palette */
	--afp-gold: #B8894A;       /* Desert Gold */
	--afp-pearl: #F3F0EB;      /* Pearl White */
	--afp-black: #141210;      /* Falcon Black */
	--afp-oud: #4A2E20;        /* Oud Brown */
	--afp-sand: #D6C3A5;       /* Sandstone Beige */

	/* Derived tones */
	--afp-pearl-2: #EAE4DA;
	--afp-sand-2: #E4D6C1;
	--afp-ink: #2A211B;
	--afp-muted: #6E5A4C;
	--afp-line: rgba(74, 46, 32, .16);
	--afp-line-light: rgba(243, 240, 235, .16);
	--afp-buy: #141210;        /* Falcon black + gold edge — configurable in Settings */

	/* Type */
	--afp-font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
	--afp-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--afp-font-arabic: 'Aref Ruqaa', 'Amiri', 'Noto Naskh Arabic', serif;

	--afp-fs-xs: .75rem;
	--afp-fs-sm: .875rem;
	--afp-fs-base: 1rem;
	--afp-fs-lg: 1.25rem;
	--afp-fs-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
	--afp-fs-2xl: clamp(2.2rem, 1.5rem + 3vw, 3.75rem);
	--afp-fs-3xl: clamp(2.8rem, 1.8rem + 4.5vw, 5.25rem);

	/* Space — generous */
	--afp-s1: .5rem;
	--afp-s2: 1rem;
	--afp-s3: 1.5rem;
	--afp-s4: 2.5rem;
	--afp-s5: 4rem;
	--afp-s6: 6.5rem;
	--afp-gutter: clamp(16px, 4vw, 56px);
	--afp-max: 1320px;
	--afp-max-text: 42rem;

	--afp-radius: 2px;
	--afp-ease: cubic-bezier(.22, .61, .36, 1);
	--afp-shadow: 0 30px 60px -32px rgba(20, 18, 16, .45);
}

/* ---------- Base (scoped so themes are never overridden) ---------- */
.afp,
.afp-page .afp-main {
	font-family: var(--afp-font-body);
	font-weight: 300;
	font-size: var(--afp-fs-base);
	line-height: 1.75;
	color: var(--afp-ink);
	-webkit-font-smoothing: antialiased;
}
.afp *,
.afp *::before,
.afp *::after { box-sizing: border-box; }
.afp img { max-width: 100%; height: auto; display: block; }

.afp h1, .afp h2, .afp h3, .afp h4,
.afp .afp-display {
	font-family: var(--afp-font-display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.005em;
	color: inherit;
	margin: 0 0 var(--afp-s2);
}
.afp h1 { font-size: var(--afp-fs-2xl); }
.afp h2 { font-size: var(--afp-fs-xl); }
.afp h3 { font-size: var(--afp-fs-lg); }
.afp p { margin: 0 0 var(--afp-s2); }
.afp a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* Slow gold underline on hover (brand website concept). */
.afp a:not(.afp-btn):not(.afp-card__link):not(.afp-collections__link):not(.afp-exhibitions__link):not(.afp-cv-item__image) {
	text-decoration: none;
	background-image: linear-gradient(var(--afp-gold), var(--afp-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .9s var(--afp-ease);
}
.afp a:not(.afp-btn):not(.afp-card__link):not(.afp-collections__link):not(.afp-exhibitions__link):not(.afp-cv-item__image):hover,
.afp a:not(.afp-btn):not(.afp-card__link):not(.afp-collections__link):not(.afp-exhibitions__link):not(.afp-cv-item__image):focus-visible { background-size: 100% 1px; }

/* Arabic titles — Aref Ruqaa, right-to-left */
.afp-ar,
.afp [lang="ar"] {
	font-family: var(--afp-font-arabic);
	direction: rtl;
	unicode-bidi: isolate;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
}
/* Arabic subtitles follow the page's reading edge, not their own (LTR site: left; RTL site: right). */
.afp p.afp-ar, .afp span.afp-ar, .afp .afp-ar[lang="ar"] { text-align: left; }
.rtl .afp p.afp-ar, .rtl .afp span.afp-ar, .rtl .afp .afp-ar[lang="ar"] { text-align: right; }

.afp-eyebrow {
	font-family: var(--afp-font-body);
	font-size: var(--afp-fs-xs);
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--afp-muted);
	margin: 0 0 var(--afp-s2);
}

.afp-lede {
	font-family: var(--afp-font-display);
	font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
	line-height: 1.55;
	max-width: var(--afp-max-text);
}

.afp-container {
	width: 100%;
	max-width: var(--afp-max);
	margin-inline: auto;
	padding-inline: var(--afp-gutter);
}

.afp-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Surfaces ---------- */
.afp-surface--black { background: var(--afp-black); color: var(--afp-pearl); }
.afp-surface--oud { background: var(--afp-oud); color: var(--afp-pearl); }
.afp-surface--pearl { background: var(--afp-pearl); color: var(--afp-ink); }
.afp-surface--sand { background: var(--afp-sand); color: var(--afp-oud); }
.afp-surface--black .afp-eyebrow,
.afp-surface--oud .afp-eyebrow { color: var(--afp-sand); }

/* The single gold-foil accent of an item */
.afp .afp-foil-rule,
.afp-foil-rule {
	display: block; width: 56px; height: 1px; border: 0 !important; opacity: 1; color: transparent; margin: var(--afp-s3) 0;
	background: linear-gradient(90deg, #9C7036, var(--afp-gold) 35%, #E1C08A 55%, var(--afp-gold) 75%, #9C7036);
}
.afp-foil-rule--center { margin-inline: auto; }

/* ---------- Motifs (one per page, low contrast) ---------- */
.afp-motif { position: relative; isolation: isolate; }
.afp-motif::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .07;
	background-repeat: repeat;
}
.afp-surface--black.afp-motif::before,
.afp-surface--oud.afp-motif::before { opacity: .09; }
.afp-motif--arch::before { background-image: var(--afp-motif-url-arch); background-size: 54px 99px; }
.afp-motif--roundel::before { background-image: var(--afp-motif-url-roundel); background-size: 88px 88px; }
.afp-motif--dune::before { background-image: var(--afp-motif-url-dune); background-size: 480px 120px; background-position: center bottom; }
.afp-motif--palm::before {
	background-image: var(--afp-motif-url-palm);
	background-repeat: no-repeat;
	background-size: min(520px, 70%);
	background-position: right -40px bottom -40px;
	opacity: .1;
}

/* ---------- Buttons ---------- */
.afp-btn,
.afp a.afp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 48px; padding: .85em 1.9em;
	font-family: var(--afp-font-body); font-size: var(--afp-fs-sm); font-weight: 400;
	letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
	border: 1px solid currentColor; border-radius: var(--afp-radius);
	background: transparent; color: inherit; cursor: pointer;
	transition: background-color .35s var(--afp-ease), color .35s var(--afp-ease), border-color .35s var(--afp-ease);
}
.afp-btn:hover, .afp-btn:focus-visible, .afp a.afp-btn:hover { background: var(--afp-black); color: var(--afp-pearl); border-color: var(--afp-black); }
.afp-surface--black .afp-btn:hover, .afp-surface--oud .afp-btn:hover { background: var(--afp-pearl); color: var(--afp-black); border-color: var(--afp-pearl); }
.afp-btn--solid { background: var(--afp-black); color: var(--afp-pearl); border-color: var(--afp-black); }
.afp-btn--solid:hover { background: var(--afp-oud); border-color: var(--afp-oud); }

/* Buy Now — falcon black with a gold accent edge, full width on mobile */
.afp-btn--buy,
.afp a.afp-btn--buy {
	position: relative;
	background: var(--afp-buy);
	color: var(--afp-pearl);
	border-color: var(--afp-buy);
	box-shadow: inset 0 -2px 0 var(--afp-gold);
}
.afp-btn--buy:hover, .afp-btn--buy:focus-visible,
.afp a.afp-btn--buy:hover, .afp a.afp-btn--buy:focus-visible {
	background: var(--afp-black); border-color: var(--afp-gold); color: var(--afp-pearl);
}
.afp-btn--buy .afp-btn__price { color: var(--afp-sand); letter-spacing: .08em; }
@media (max-width: 640px) {
	.afp-btn--buy { display: flex; width: 100%; }
}

.afp-btn:focus-visible,
.afp a:focus-visible,
.afp button:focus-visible,
.afp select:focus-visible,
.afp input:focus-visible { outline: 1px solid var(--afp-gold); outline-offset: 3px; }

/* ---------- Badges ---------- */
.afp-badge {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--afp-font-body); font-size: .6875rem; font-weight: 400; font-style: normal;
	letter-spacing: .2em; text-transform: uppercase; line-height: 1;
	padding: .55em .9em; border: 1px solid var(--afp-line); border-radius: 99px;
	color: var(--afp-oud); background: transparent;
}
/* Palette only — the heritage accent tones never appear in the interface. */
.afp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-sizing: border-box; }
.afp-badge--available { color: var(--afp-oud); border-color: var(--afp-line); }
.afp-badge--available::before { background: var(--afp-gold); }
.afp-badge--reserved { color: var(--afp-oud); border-color: var(--afp-line); }
.afp-badge--reserved::before { background: transparent; border: 1px solid var(--afp-gold); }
.afp-badge--sold { color: var(--afp-muted); border-color: var(--afp-line); }
.afp-badge--sold::before { background: var(--afp-oud); }
.afp-surface--black .afp-badge { color: var(--afp-sand); border-color: var(--afp-line-light); }

/* ---------- Metadata list ---------- */
.afp-meta {
	display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .65rem 2rem;
	margin: 0; padding: var(--afp-s3) 0; border-top: 1px solid var(--afp-line); border-bottom: 1px solid var(--afp-line);
}
.afp-meta dt { font-size: var(--afp-fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--afp-muted); padding-top: .3em; }
.afp-meta dd { margin: 0; font-family: var(--afp-font-display); font-size: 1.15rem; line-height: 1.4; }

/* ---------- Form controls ---------- */
.afp-select, .afp-input, .afp-textarea {
	font: 300 var(--afp-fs-sm)/1.4 var(--afp-font-body);
	color: var(--afp-ink); background: transparent;
	border: 0; border-bottom: 1px solid var(--afp-line); border-radius: 0;
	padding: .7em 1.6em .7em 0; min-height: 44px;
}
.afp-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--afp-oud) 50%), linear-gradient(135deg, var(--afp-oud) 50%, transparent 50%); background-position: right 6px center, right 1px center; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.afp-textarea { width: 100%; padding-right: 0; min-height: 6rem; }

/* ---------- RTL ---------- */
[dir="rtl"] .afp .afp-meta dd, .rtl .afp .afp-meta dd { font-family: var(--afp-font-arabic); }
.rtl .afp-btn--buy { box-shadow: inset 0 -2px 0 var(--afp-gold); }
.rtl .afp-motif--palm::before { background-position: left -40px bottom -40px; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
	.afp *, .afp *::before, .afp *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Add to cart — quiet outline beside the falcon-black "Buy now" */
.afp-btn--cart.is-loading { opacity: .6; pointer-events: none; }
.afp-btn--cart.is-added { border-color: var(--afp-gold); }
@media (max-width: 640px) {
	.afp-btn--cart { display: flex; width: 100%; }
}