/* =============================================================================
 * Rahkar — Global base  (Phase 1.2 / 1.3)
 * -----------------------------------------------------------------------------
 * The root + element baseline translated from theme.json "styles" (what WP
 * emits as global-styles-inline-css), plus the small set of truly global
 * helpers ported from the WP theme's style.css. Keyed entirely off the tokens
 * in tokens.css so it stays in lockstep with the design contract.
 *
 * Component-specific rules do NOT belong here — they ship per-page from each
 * phase's own stylesheet (see config/theme.yml assets map).
 * ========================================================================== */

/* ---- @font-face: Vazirmatn variable (Phase 1.3) --------------------------
   font-display:swap so first paint shows a fallback, then swaps in the real
   glyphs once the (preloaded) woff2 arrives. One file covers weights 100–900. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations'),
       url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
}

/* ---- Root / body (theme.json styles.color + .typography + .spacing) ------ */
html {
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--vazirmatn);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--rh-fw-base);
  line-height: 1.7;
}

/* RTL + Vazirmatn MUST beat the classic base `assets/css/theme.css`, which core
   still auto-loads AFTER this file and ships `body{direction:ltr;font-family:Manrope}`
   (classic expects a rtlcss-generated theme_rtl.css we deliberately don't use —
   our component CSS is RTL-native via logical properties). A plain `body` rule
   here would lose on source order, so we out-SPECIFY classic's plain `body` with
   the `lang-rtl` body class PrestaShop sets for the Persian (is_rtl) language.
   Do NOT "Generate RTL stylesheets" in BO: rtlcss would invert our intentional
   direction:rtl / logical properties the wrong way. */
body.lang-rtl {
  direction: rtl;
  font-family: var(--wp--preset--font-family--vazirmatn), Tahoma, sans-serif;
}

/* ---- Headings (theme.json styles.elements.heading + h1..h6) -------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--vazirmatn);
  font-weight: var(--rh-fw-heading);
  line-height: 1.3;
  color: var(--wp--preset--color--contrast);
}
h1 { font-size: var(--wp--preset--font-size--4xl); line-height: 1.2; }
h2 { font-size: var(--wp--preset--font-size--3xl); line-height: 1.25; }
h3 { font-size: var(--wp--preset--font-size--2xl); }
h4 { font-size: var(--wp--preset--font-size--xl); }
h5 { font-size: var(--wp--preset--font-size--lg); }
h6 { font-size: var(--wp--preset--font-size--md); }

/* ---- Links (theme.json styles.elements.link) ---------------------------- */
a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
a:hover {
  color: var(--wp--preset--color--primary-dark);
  text-decoration: none;
}

/* ---- Media defaults ----------------------------------------------------- */
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* ---- Thin line icons (Zara-style) --------------------------------------- *
 *  Every UI icon in the theme is an inline <svg ... stroke="currentColor"> on a
 *  24-unit viewBox, with its weight baked in as an inline `stroke-width` attr
 *  (a mix of 2 / 1.8 / 2.5). A CSS `stroke-width` *property* always beats that
 *  presentation attribute, so this one rule thins ALL of them uniformly without
 *  touching any template. Scoped to stroke="currentColor" so it never reaches
 *  fill-based logos or coloured/decorative SVGs. Tune via --rh-icon-stroke. */
svg[stroke="currentColor"] {
  stroke-width: var(--rh-icon-stroke);
}

/* ---- Focus ring --------------------------------------------------------- *
 *  Keyboard users get a clean solid ring. Pointer (mouse/touch) interaction
 *  must NOT show a ring: the classic base theme.css ships `button:focus
 *  {outline:1px dotted}` / `a:focus{outline:...}` (normalize + Bootstrap), which
 *  flashed a dotted box on every tap/click across the theme. `:focus-visible`
 *  only matches keyboard focus, so neutralising `:focus:not(:focus-visible)`
 *  kills the dotted ring on click everywhere while keeping accessible keyboard
 *  focus. `!important` beats the classic `.btn:active:focus` rules regardless of
 *  load order. */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none !important;
}

/* ---- Mobile: never zoom into a form field on focus ---------------------- *
 *  iOS Safari auto-zooms the viewport when a focused text field's font-size is
 *  below 16px. Pin every text-entry control to 16px on small screens so tapping
 *  an input/select/textarea never zooms (the field's visual size is driven by
 *  height/padding per component, so this only affects the typed text size). */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---- Page content width ------------------------------------------------- *
 *  FLUID container: full width with a side gutter, capped at the site wide-size
 *  (1676px) on big screens — matching the header / footer / home inner exactly.
 *  Above 1676px it centres at 1676; below it the content fills the viewport with
 *  the --rh-gutter padding so it never touches the edges (Digikala-style).
 *
 *  This overrides Bootstrap's fixed-width `.container` steps (540/720/960/1140)
 *  at ALL breakpoints — otherwise mid-size screens render a narrow fixed box with
 *  big empty side margins instead of full-width-with-gutter. `#wrapper > .container`
 *  (1,1,0) outranks Bootstrap's `.container` rules (0,1,0), incl. its width +
 *  padding. Covers every page (all layouts extend `#wrapper > .container`). */
#wrapper > .container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1676px);
  margin-inline: auto;
  padding-inline: var(--rh-gutter, clamp(12px, 3vw, 28px));
}

/* ---- blockwishlist heart on product cards ------------------------------- *
 *  blockwishlist injects <div class="wishlist-button"> into each card's
 *  .thumbnail-container (aliased onto .rpc-card__media). Pin it to the free
 *  top corner — badges sit top-inline-start, swatches bottom-inline-end, so
 *  the heart takes top-inline-end. */
.rpc-card .wishlist-button {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 3;
  margin: 0;
}

/* =============================================================================
 *  Globals ported from the WP theme's style.css (apply theme-wide).
 * ========================================================================== */

/* iOS Safari zooms in when an input's computed font-size < 16px.
   Floor every form control at 16px on touch viewports. */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  textarea,
  select {
    font-size: max(1em, 16px);
  }
}

/* Shared bottom-sheet backdrop (created by bottom-sheet.js — Phase 2+).
   Mirrors .rh-atc__backdrop so every bottom sheet looks identical. */
.rh-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 17, 21, 0.45);
  opacity: 0;
  transition: opacity 200ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.rh-sheet-backdrop.is-visible { opacity: 1; }
.rh-sheet-backdrop[hidden] { display: none; }

html.rh-sheet-lock,
html.rh-sheet-lock body {
  overflow: hidden;
  touch-action: none;
}

/* Dialog bottom sheets opened via show() need explicit z-index. */
@media (max-width: 900px) {
  .rh-rev-modal[open],
  .rh-var-modal[open],
  .rh-desc-modal[open],
  .rh-list-modal[open] {
    z-index: 1000;
  }
}

/* Kill focus ring on buttons for touch-primary devices.
   Prevents blue outline flash on hamburger/close after tap. */
@media (pointer: coarse) {
  button:focus-visible,
  [role="button"]:focus-visible {
    outline: none;
  }
}

/* =============================================================================
 * Phase 2 — PrestaShop chrome glue
 * -----------------------------------------------------------------------------
 * header.css drops in verbatim, but the WP source makes the FSE template-part
 * WRAPPER (header.wp-block-template-part) sticky, not the inner .rahkar-site-header.
 * In PrestaShop the equivalent wrapper is the layout's <header id="header">, so
 * the sticky rule lives here (theme-owned glue) to keep header.css untouched.
 * ========================================================================== */
#header {
  position: sticky;
  top: 0;
  z-index: 90;
}
/* The classic #header had no background; ensure the sticky bar is opaque so
   content doesn't bleed through as it scrolls under it. */
#header { background: var(--wp--preset--color--base, #fff); }