/*
 * global.css — Minow Mango
 * All font sizes use clamp() to scale fluidly between 768px and 1920px.
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Force light color scheme for browser elements */
  color-scheme: light;
  
  /* Colors */
  --clr-primary:     #f58220;
  --clr-primary-950: #5c1f00;
  --clr-primary-900: #823000;
  --clr-primary-800: #a84605;
  --clr-primary-700: #cf6311;
  --clr-primary-500: #ffa44a;
  --clr-primary-400: #ffbe73;
  --clr-primary-300: #ffd49c;
  --clr-primary-200: #ffe8c4;
  --clr-primary-100: #fff8ed;
  --clr-primary-50:  #fffbeb;

  --clr-secondary:     #0a946f;
  --clr-secondary-950: #00211c;
  --clr-secondary-900: #004739;
  --clr-secondary-800: #026e55;
  --clr-secondary-600: #17b988;
  --clr-secondary-500: #38c797;
  --clr-secondary-400: #5dd4a8;
  --clr-secondary-300: #87e0bc;
  --clr-secondary-200: #b4edd4;
  --clr-secondary-100: #e6faf1;
  --clr-secondary-50:  #e6faf1;

  --clr-neutral-key: #020a0a;
  --clr-neutral-900: #171717;
  --clr-neutral-800: #262626;
  --clr-neutral-700: #404040;
  --clr-neutral-600: #525252;
  --clr-neutral-500: #737373;
  --clr-neutral-400: #a1a1a1;
  --clr-neutral-300: #d4d4d4;
  --clr-neutral-200: #e5e5e5;
  --clr-neutral-100: #f5f5f5;
  --clr-neutral-50:  #fafafa;

  --clr-bg:           var(--clr-neutral-50);
  --clr-surface:      #ffffff;
  --clr-text:         var(--clr-neutral-900);
  --clr-text-muted:   var(--clr-neutral-600);
  --clr-border:       var(--clr-neutral-200);
  --clr-accent:       var(--clr-primary);
  --clr-accent-hover: var(--clr-primary-700);

  /*
   * Fonts — AzarMehr FD listed first throughout the site.
   *
   * "FD" = Farsi Digits: this variant of AzarMehr renders the Unicode
   * code-points 0x0030–0x0039 (0–9) as their Persian equivalents
   * (۰–۹) automatically at the font-shaping layer, with no JavaScript
   * required.  All other glyphs (Latin, Arabic, Persian letters) are
   * identical to the regular AzarMehr variant, so substituting FD as
   * the primary font is visually transparent for every character except
   * numerals, which become Persian as intended.
   *
   * Fallback chain:
   *   1. AzarMehr FD  — loaded from assets/fonts via theme.json @font-face
   *   2. AzarMehr     — loaded from assets/fonts via theme.json @font-face
   *   3. sans-serif   — system fallback
   */
  --font-primary:   'AzarMehr FD', 'AzarMehr', sans-serif;
  --font-secondary: 'AzarMehr FD', 'AzarMehr', sans-serif;

  /* Fluid type scale — clamp(min, preferred-vw, max)
     Designed for 768px–1920px viewport range            */
  --text-xs:  clamp(11px, 0.7vw,  13px);
  --text-sm:  clamp(12px, 0.8vw,  14px);
  --text-md:  clamp(13px, 0.9vw,  16px);
  --text-lg:  clamp(16px, 1.4vw,  20px);
  --text-xl:  clamp(22px, 2vw,    32px);
  --text-2xl: clamp(28px, 2.5vw,  40px);
  --text-3xl: clamp(32px, 3vw,    48px);

  /* Letter spacing */
  --ls-xl: -0.03em;
  --ls-lg: -0.03em;
  --ls-md: -0.03em;

  /* Line heights */
  --lh-xl: 1.5;
  --lh-lg: 1.6;
  --lh-md: 2;

  /* Fluid spacing — scales with viewport */
  --space-1:  clamp(3px,   0.2vw, 4px);
  --space-2:  clamp(6px,   0.4vw, 8px);
  --space-3:  clamp(8px,   0.6vw, 12px);
  --space-4:  clamp(12px,  0.8vw, 16px);
  --space-5:  clamp(14px,  1vw,   20px);
  --space-6:  clamp(16px,  1.2vw, 24px);
  --space-8:  clamp(20px,  1.6vw, 32px);
  --space-10: clamp(24px,  2vw,   40px);
  --space-12: clamp(28px,  2.5vw, 48px);
  --space-16: clamp(36px,  3.3vw, 64px);

  /* Border radius */
  --radius-sm: clamp(6px,  0.5vw, 8px);
  --radius-md: clamp(10px, 0.9vw, 16px);
  --radius-lg: clamp(20px, 1.7vw, 32px);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  direction: rtl;
  /* AzarMehr FD as global default — digits render as Persian numerals */
  font-family: var(--font-primary);
  font-size: var(--text-md);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: var(--lh-md);
  min-height: 100vh;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--clr-text);
  background: transparent;
  line-height: var(--lh-lg);
  font-weight: 700;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

p {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  letter-spacing: var(--ls-md);
  color: var(--clr-text);
  background: transparent;
}

a {
  color: var(--clr-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover, a:focus { color: var(--clr-accent-hover); }

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

/* ============================================================
   4. SITE LAYOUT
   ============================================================ */
.site-header {
  padding: var(--space-4) var(--space-8);
  background-color: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}

.site-footer {
  padding: var(--space-6) var(--space-8);
  background-color: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
}

/* ============================================================
   5. WORDPRESS BLOCK RESETS
   ============================================================ */
.wp-block-group { box-sizing: border-box; }
.wp-site-blocks { padding: 0; }
.wp-block { background: transparent; }

.logged-in .wp-block:not(.wp-block-template-part):not(.wp-block-query) {
  outline: none !important;
  box-shadow: none !important;
}

/* Global Currency SVG Badge Resets */
.mm-pc__currency-badge,
.mm-price__currency-badge,
.mm-single__price-currency,
.mm-related__card-currency,
.mm-grouped-row__currency,
.mm-trust-bar__currency,
.mm-global-currency-badge {
    height: 1.2em;
    width: auto;
    display: inline-block !important;
    vertical-align: middle;
    object-fit: contain;
}

/* 
 * WooCommerce Blocks Currency Fix
 * Targets: Cart/Checkout blocks where HTML symbols are stripped.
 */
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    direction: ltr !important; /* Numbers stay LTR */
    unicode-bidi: bidi-override;
}

/* Add Toman badge via pseudo-element to Block-based price elements */
.wc-block-formatted-money-amount::after,
.wc-block-components-formatted-money-amount::after,
.wc-block-components-totals-item__value .wc-block-formatted-money-amount::after,
.wc-block-components-totals-footer-item-tax-value::after,
.wc-block-components-product-price__value::after {
    content: "";
    display: inline-block;
    width: 2.4em;
    height: 1.1em;
    background-image: url('../img/currency-toman.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 6px;
    margin-left: 2px;
}

/* Rial version for Cart and Checkout pages (Block-based) */
.woocommerce-cart .wc-block-formatted-money-amount::after,
.woocommerce-cart .wc-block-components-formatted-money-amount::after,
.woocommerce-cart .wc-block-components-totals-item__value .wc-block-formatted-money-amount::after,
.woocommerce-cart .wc-block-components-totals-footer-item-tax-value::after,
.woocommerce-cart .wc-block-components-product-price__value::after,
.woocommerce-checkout .wc-block-formatted-money-amount::after,
.woocommerce-checkout .wc-block-components-formatted-money-amount::after,
.woocommerce-checkout .wc-block-components-totals-item__value .wc-block-formatted-money-amount::after,
.woocommerce-checkout .wc-block-components-totals-footer-item-tax-value::after,
.woocommerce-checkout .wc-block-components-product-price__value::after {
    background-image: url('../img/currency-rial.svg');
}

/* If the block somehow renders a text symbol, we let it be or hide it if it's plain text */
/* For now, we prioritize the icon via pseudo-element */