/*
Theme Name: Asawral Jamal 2026 Design
Theme URI: https://asawraljamal.com.iq/
Author: Asawral Jamal
Description: A gold-and-glass responsive theme for Asawral Jamal Gold, Bullion and Jewellery Trading, with Arabic and Sorani Kurdish RTL plus English LTR homepages.
Version: 3.3.11
Requires at least: 6.0
Requires PHP: 7.0
Tested up to: 6.8
Text Domain: asawral-jamal
*/

/* ==========================================================================
   1. Design tokens
   The single source of truth. Every other sheet consumes these.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Ink and ground */
  --ink: #1d241f;
  --ink-soft: #4a524b;
  --muted: #777b72;
  --paper: #f5f6f3;
  --paper-warm: #eef1ec;
  --paper-deep: #e3e9e2;
  --line: rgba(29, 52, 43, .12);

  /* Jewel greens */
  --green: #183f35;
  --green-deep: #0e2b24;
  --green-darkest: #081d18;

  /* Gold ramp: the core brand gradient */
  --gold: #b3975f;
  --gold-deep: #8a6f3c;
  --gold-light: #d7c294;
  --gold-pale: #efe3c6;
  --gold-bright: #f6ecd2;
  --champagne: #e8d5aa;
  --gold-gradient: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold) 22%, var(--gold-bright) 48%, var(--gold-light) 72%, var(--gold-deep) 100%);
  --gold-sweep: linear-gradient(100deg, transparent 20%, rgba(255, 252, 242, .78) 48%, transparent 76%);

  /* Accents */
  --rust: #9b5543;

  /* Glass system */
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(245, 248, 244, .5));
  --glass-bg-dark: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
  --glass-border: rgba(255, 255, 255, .82);
  --glass-border-dark: rgba(255, 255, 255, .24);
  --glass-blur: blur(18px) saturate(155%);
  --glass-blur-strong: blur(24px) saturate(165%);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .92);
  --glass-sheen-dark: inset 0 1px 0 rgba(255, 255, 255, .28);
  --glass-shadow: 0 14px 40px rgba(15, 37, 29, .09);
  --glass-shadow-lift: 0 24px 58px rgba(15, 37, 29, .16);
  --glass-shadow-dark: 0 20px 52px rgba(4, 14, 11, .3);

  /* Typography */
  --font-body: "Alexandria", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-display: "Alexandria", "Noto Sans Arabic", sans-serif;
  --fs-display: clamp(2.45rem, 5.1vw, 4.25rem);
  --fs-h2: clamp(1.95rem, 3.3vw, 2.95rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.5rem);
  --fs-lead: clamp(.9rem, 1.05vw, 1rem);
  --fs-body: clamp(.82rem, .92vw, .92rem);
  --fs-small: clamp(.68rem, .76vw, .74rem);
  --fs-micro: clamp(.6rem, .68vw, .66rem);

  /* Spacing scale: one rhythm for the whole site */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 18px;
  --space-md: 26px;
  --space-lg: 38px;
  --space-xl: 56px;
  --space-2xl: clamp(56px, 7vw, 92px);
  --space-3xl: clamp(76px, 9.5vw, 136px);
  --section-pad: clamp(78px, 9vw, 132px);
  --gutter: clamp(18px, 4vw, 48px);
  --content: 1240px;
  --shell: min(var(--content), calc(100% - (var(--gutter) * 2)));

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Motion */
  --ease-glass: cubic-bezier(.22, .68, 0, 1);
  --ease-spring: cubic-bezier(.2, .75, .25, 1);
  --dur-fast: 200ms;
  --dur-mid: 360ms;
  --dur-slow: 720ms;
  --dur-reveal: 900ms;

  /* Set by JS */
  --scroll-progress: 0%;
  --header-height: 92px;
}

html[lang="ar"] body {
  --font-body: "Alexandria", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-display: "Alexandria", "Noto Sans Arabic", Tahoma, sans-serif;
}

html[lang="ckb"] body {
  --font-body: "Noto Sans Arabic", Tahoma, sans-serif;
  --font-display: "Noto Sans Arabic", "Alexandria", Tahoma, sans-serif;
}

html[lang="en"] body {
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Manrope", "Segoe UI", sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 12% 8%, rgba(215, 194, 148, .13), transparent 28rem),
    radial-gradient(ellipse at 92% 44%, rgba(46, 105, 83, .07), transparent 34rem),
    var(--paper);
  direction: rtl;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.95;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body,
button,
input,
a { font-family: var(--font-body); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  color: inherit;
  font: inherit;
}

::selection {
  color: #fff;
  background: var(--green);
}

/* A single gold focus ring for every interactive element. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: var(--space-xs);
  inset-inline-end: var(--space-xs);
  padding: 10px 18px;
  color: #fff;
  background: var(--green-deep);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  transform: translateY(-180%);
  transition: transform var(--dur-mid) var(--ease-spring);
}

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

/* Shared horizontal container. */
.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* Shared vertical rhythm. */
.section { padding-block: var(--section-pad); }

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}