/* ==========================================================================
   Jitha Furniture Factory — base styles
   Design tokens, base elements, buttons and the dialog shell, layout
   primitives, photo placeholders, the
   watermark, bidi fixes and the scroll-reveal states. Loaded first on every
   page; css/components/* and css/pages/* build on these tokens.

   Brand colors sampled from the JITHA logo: deep brown #5f4018 and gold
   #cd8f2a. Direction: left-aligned & asymmetric, over-rounded containers,
   pill buttons, soft circular decoration, washed photography.

   Desktop-first: rules target wide screens and max-width queries narrow
   them. Breakpoints used across the stylesheets: 1020px (tablet), 720px
   (phone), 480px and 400px (small phones); a few components add 460px.
   ========================================================================== */

/* Webfonts (Caprasimo/Figtree for Latin, Cairo/Tajawal for Arabic) load from
   a <link> in each page's <head>, not an @import here: an @import can't be
   discovered until this whole stylesheet has downloaded and parsed, which
   chained the font requests behind it and held up first render. */

:root {
  /* Brand palette — sampled directly from the JITHA logo (deep brown mark
     #5f4018, gold mark #cd8f2a), warmed through to the neutrals so the rest
     of the UI reads as one family with the mark rather than a cool-toned
     site with a warm logo dropped on top. */
  --color-bg: #fdfbf7;
  --color-surface: #f1ece4;
  --color-text: #241a10;
  --color-accent: #cd8f2a;
  --color-accent-2: #5f4018;
  --color-divider: color-mix(in srgb, #241a10 16%, transparent);

  /* Tonal ramps — generated on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #faf8f5;
  --color-neutral-200: #f1ece4;
  --color-neutral-300: #e2d9cb;
  --color-neutral-400: #c7b9a4;
  --color-neutral-500: #a3927b;
  --color-neutral-600: #7e6c56;
  --color-neutral-700: #5c4d3c;
  --color-neutral-800: #3c3225;
  --color-neutral-900: #241a10;

  --color-accent-100: #fbf1de;
  --color-accent-200: #f3ddb1;
  --color-accent-300: #e9c583;
  --color-accent-400: #ddab5c;
  --color-accent-500: #cd8f2a;
  --color-accent-600: #b17820;
  --color-accent-700: #8f5f1a;
  --color-accent-800: #6b4714;
  --color-accent-900: #46300d;

  --color-accent-2-100: #f1e9df;
  --color-accent-2-200: #ddc9ab;
  --color-accent-2-300: #c2a172;
  --color-accent-2-400: #a17c4a;
  --color-accent-2-500: #7f5f2e;
  --color-accent-2-600: #5f4018;
  --color-accent-2-700: #4a3213;
  --color-accent-2-800: #33220d;
  --color-accent-2-900: #1f1408;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft brown-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #241a10 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #241a10 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #241a10 22%, transparent);

  /* Keyboard focus ring. The brand gold (--color-accent) is only 2.7:1 on
     the cream page — under the 3:1 a focus indicator needs — so the ring
     uses the darker accent-700 (5.3:1). Sections with a gold or dark
     background set their own value. */
  --focus-ring-color: var(--color-accent-700);

  /* Letter-tracking scale — Latin display type reads better with a squeeze on
     headings and a stretch on small caps-style labels. Arabic has no such
     convention: tracking breaks cursive joining between letterforms, so
     html[dir="rtl"] zeroes every step out rather than each rule doing it. */
  --tracking-tight: -0.015em;
  --tracking-wide-sm: 0.02em;
  --tracking-wide-md: 0.04em;
  --tracking-wide-lg: 0.08em;
  --tracking-kicker: 0.14em;

  /* Brand-mark decoration — a circle with a ~90° wedge cut out (straight cut
     edges meeting at the centre), traced from the reference site's own
     decoration asset. Shared as one token since it's used as a background
     mask in more than one section, recolored per-use via mask + background. */
  --shape-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 427 427'%3E%3Cpath fill='%23000' d='m427 213.5c0 42.226-12.522 83.504-35.981 118.614-23.46 35.11-56.804 62.475-95.816 78.634-39.012 16.16-81.94 20.388-123.355 12.15s-79.4568-28.572-109.3153-58.431c-29.8585-29.858-50.1924-67.9-58.43032-109.315-8.23795-41.415-4.0099535-84.343 12.14932-123.355 16.1594-39.0119 43.5242-72.3561 78.6341-95.8158 35.1102-23.4597 76.3882-35.98121934 118.6142-35.98122119v213.50002119z'/%3E%3C/svg%3E");
}

/* Arabic is the default language — swap in Arabic-capable webfonts and retune
   the rhythm around them. Caprasimo/Figtree have no Arabic glyphs, so
   [dir="rtl"] repoints the same --font-heading/--font-body roles rather than
   duplicating rules. Cairo/Tajawal also read best a touch larger and looser
   than the Latin pairing, so size/line-height/tracking move together here. */
html[dir="rtl"] {
  --font-heading: "Cairo", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Tajawal", system-ui, sans-serif;
  --tracking-tight: 0;
  --tracking-wide-sm: 0;
  --tracking-wide-md: 0;
  --tracking-wide-lg: 0;
  --tracking-kicker: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* ══════════════════════════════════════════════════════════════════════════
   Base elements
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute loses to any author display rule (.gal-search-clear's
   display:flex, .prod-slider-nav's display:grid…), so el.hidden = true in
   the scripts silently did nothing on those: the search box's clear button
   showed with nothing to clear, and the lightbox/quick-view photo arrows
   stayed up on single-photo products. */
[hidden] { display: none !important; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: var(--tracking-wide-lg); text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }

/* Arabic reads looser: Cairo/Tajawal want more line-height than the tight
   Latin display rhythm, and a modest size bump keeps visual weight parity
   with the Latin pairing at the same pixel size. */
html[dir="rtl"] body { font-size: 16px; line-height: 1.7; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { line-height: 1.35; }
html[dir="rtl"] h1 { font-weight: 900; }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
/* Sections js/components/in-page-links.js focuses after an in-page jump (tabindex="-1", never
   in the Tab order) — that focus move sets the keyboard/screen-reader reading
   position; a ring around a whole section would just be noise. */
[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-text); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
/* accent-700, not the base accent: #cd8f2a on the light page is 2.7:1, under
   the 4.5:1 WCAG AA text minimum; accent-700 is 5.3:1 and already the
   kickers' color. */
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 44px; height: 44px; padding: 0; }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — rounded frame: everything softens, small controls go pill — */
.dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn { border-radius: 999px; }


/* ══════════════════════════════════════════════════════════════════════════
   Page layout
   ══════════════════════════════════════════════════════════════════════ */

/* --- Layout primitives -------------------------------------------------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: calc(var(--space-8) * 2.4) 0; }
.section-alt { background: var(--color-neutral-100); border-radius: var(--radius-lg); }

/* In-page nav/footer links all target these ids directly (#collections,
   #catalogue, #craft, #process, #contact). js/components/in-page-links.js already
   offsets its own smooth-scroll by the header's height, but that JS only runs
   on click — a direct hash load, a bookmarked link, or browser back/forward
   restoring a hash position all land the browser's native (unoffset) jump,
   which tucks the section title right under the sticky header. This keeps
   both paths landing in the same place. */
#collections, #catalogue, #craft, #process, #contact {
  scroll-margin-top: calc(var(--space-8) * 3);
}
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 50;
  background: var(--color-accent); color: var(--color-text);
  padding: var(--space-2) var(--space-4); border-radius: 999px;
}
.skip:focus-visible { inset-inline-start: var(--space-4); top: var(--space-4); }

.kicker {
  font-size: 12px; letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: var(--space-2);
}
/* Arabic has no uppercase/tracking distinction to lean on for an "eyebrow"
   label — a medium Tajawal weight carries that same small-caps-like emphasis. */
html[dir="rtl"] .kicker { font-weight: 600; }
.sec-head { max-width: 46ch; margin-bottom: var(--space-8); }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); }
.sec-head-row {
  max-width: none; display: flex; gap: var(--space-8);
  align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
}
.sec-note {
  max-width: 42ch; margin: 0;
  /* Was 62% — right at the 4.5:1 contrast floor for normal-size text.
     72% gives real margin above it while still reading as secondary text. */
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* Pill buttons — the system's rounded voice */
.btn { border-radius: 999px; padding: var(--space-3) var(--space-6); }
.btn-icon { border-radius: 999px; padding: 0; }

/* --- Image placeholders (swap for real photography) --------------------- */
.ph {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  /* The washed grade is baked into these tints rather than applied with a
     CSS filter — 25 filtered layers on one page is too much compositing. */
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--color-accent-300) 55%, var(--color-neutral-200)) 0 8px,
      color-mix(in srgb, var(--color-surface) 70%, var(--color-neutral-100)) 8px 18px);
}
.ph::after {
  content: attr(data-ph);
  position: absolute; inset: auto var(--space-3) var(--space-3) var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: var(--tracking-wide-md); text-transform: uppercase;
  color: var(--color-neutral-800);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  padding: var(--space-1) var(--space-2); border-radius: 999px;
}
/* None of the Latin monospace stack above has Arabic glyphs — left as-is,
   the browser would silently substitute an unrelated system font. Tajawal
   at a medium weight keeps the "technical label" feel without that gap. */
html[dir="rtl"] .ph::after { font-family: var(--font-body); font-weight: 600; }

/* Real photography, swapped in on a .ph exactly as the comment above invites —
   same div, same aspect-ratio/radius/overflow/hover-transform rules every
   context (hero, promo, cp tile, product card, quick-view) already has for
   free. Only two things change: the placeholder pattern gives way to the
   photo (set per-instance as a real inline background-image, e.g.
   style="background-image:url('assets/factory/factory-2.png')" — deliberately
   not a --custom-property here: a relative url() inside a custom property
   resolves inconsistently across browsers, the exact bug already hit once on
   this page with the watermark. A literal url() on the actual property
   doesn't have that problem, the same way <img src="assets/..."> never does),
   and the debug-style "data-ph" caption — meaningless on a real photo —
   disappears. */
.ph-photo {
  background-size: cover; background-position: center;
}
.ph-photo::after { content: none; }

/* --- Watermark -------------------------------------------------------------
   Real <img> elements (see index.html), not a CSS mask-image pseudo-element:
   a plain <img src> + opacity is the single most basic, universally-supported
   way to put an image on a page, with no dependency on mask-image support,
   relative-url()-inside-a-custom-property resolution, or a contentless
   pseudo-element correctly sizing itself — all real, inspectable-in-DevTools
   points of failure this replaces. Source is assets/logos/jitha-mark.svg, the
   calligraphic mark cropped out of jitha-logo.svg (icon only, no wordmark
   — that text is far too fine-lined to read as anything but noise at
   watermark scale/opacity).

   Position: these sections are full-bleed (only .wrap inside them caps at
   1240px and centers), but the watermark needs to read as anchored to the
   visible content column, not to the section's own edge — otherwise on a
   wide monitor the empty gutter outside .wrap pushes it visibly away from
   everything else in the section. inset-inline-end below reproduces "flush
   with .wrap's own edge" without nesting the <img> inside .wrap (which would
   need every other child of .wrap repositioned above it in the stacking
   order too): it's the same distance-from-edge math .wrap's own centering
   produces, expressed directly as a value for the img's own inset property.
   max() falls back to the plain edge margin once the section is narrower
   than .wrap's own cap and .wrap stops being centered at all.

   Size: no negative bleed off any edge — every watermark stays fully inside
   its section's box, so nothing here depends on overflow:hidden clipping it
   to a particular crop. */
.watermark {
  position: absolute; z-index: 0; pointer-events: none;
  height: auto; opacity: 0.12;
  inset-inline-end: max(var(--space-6), calc(50% - 620px + var(--space-6)));
}

/* Entrance used by the hero slides (css/pages/home.css) and the nav dropdown
   (css/components/site-header.css). */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- RTL polish ------------------------------------------------------------
   Model codes, dimensions and phone numbers stay Western-numeral and must not
   be reordered by the bidi algorithm inside Arabic paragraphs. flex/grid
   auto-reverse under dir="rtl" already handles element order. --- */
.model-code, .qv-specs dd, a[href^="tel:"], a[href^="mailto:"] { unicode-bidi: isolate; }

/* --- Reveal --------------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Responsive ---------------------------------------------------------*/
@media (max-width: 1020px) {
  /* Belt-and-suspenders against any one component's own mobile overflow (a
     nowrap heading, a fixed-pixel transform, a too-wide fixed-width child)
     turning into page-wide horizontal scroll — every such bug found on
     this page has been fixed at its own source too, but this is the
     backstop for whatever the next one is. Scoped to mobile/tablet only —
     desktop never needed it and a stray horizontal scrollbar there is a
     real bug worth seeing, not something to silently mask. */
  html, body { overflow-x: hidden; }
}
@media (max-width: 720px) {
  .section { padding: calc(var(--space-8) * 1.4) 0; }
}