/*
Theme Name: RahkarTheme
Theme URI: https://airano.ir/
Author: Airano
Author URI: https://airano.ir/
Description: A production-grade, ultra-fast block-based (FSE) WordPress theme built RTL-first for Persian sites, branded and extended for KT خودرو (ktkhodro.airano.ir). Optimized for Nginx + PHP-FPM + Redis.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rahkartheme
Tags: full-site-editing, block-theme, rtl-language-support, custom-colors, custom-logo, wide-blocks, editor-style
*/

/*
 * Intentionally minimal. All design tokens live in theme.json (single source of truth).
 * Per-feature CSS is loaded conditionally via functions.php; do not add component styles here.
 */

/*
 * No site-wide horizontal-overflow clip.
 *
 *   Earlier revisions added `overflow-x: clip` here (first on html/body,
 *   then on .wp-site-blocks) to hide a small horizontal page overflow
 *   caused by the mobile nav drawer that sits off-screen at negative
 *   inset until it's opened. In practice that clip also breaks
 *   `position: sticky` on descendants in Chrome — the header and the
 *   product gallery stop pinning. The fix belongs on the drawer
 *   itself (clip-path, transform, or display:none until activated)
 *   rather than at the page root. The few pixels of overflow are
 *   harmless on mobile.
 */

/* 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).
   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. Without it
   the sheet sits below the shared .rh-sheet-backdrop (z-index:999) — the
   backdrop covers the sheet, so it looks dimmed and any tap dismisses it. */
@media (max-width: 900px) {
	.rh-rev-modal[open],
	.rh-var-modal[open],
	.rh-desc-modal[open],
	.rh-list-modal[open],
	.rh-tm-modal[open],
	.rh-share-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;
	}
}

/* ------------------------------------------------------------------ */
/*  WooCommerce price: move currency symbol AFTER the number (RTL)    */
/*                                                                    */
/*  WooCommerce outputs:                                               */
/*    <span class="woocommerce-Price-amount amount">                   */
/*      <span class="woocommerce-Price-currencySymbol">﷼</span>       */
/*      ۱.۶۵۰.۰۰۰                                                      */
/*    </span>                                                          */
/*                                                                    */
/*  In RTL, the currency symbol renders at the START of the line      */
/*  (right side), which reads as "ریال ۱.۶۵۰.۰۰۰" — the user wants     */
/*  "۱.۶۵۰.۰۰۰ ریال" (number first, then symbol with a gap).            */
/*  Using flex+order reflows the symbol to after the number without    */
/*  touching the HTML markup WooCommerce generates.                    */
/* ------------------------------------------------------------------ */
.woocommerce-Price-amount {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em; /* visual separation between number and currency */
	flex-direction: row;
}

/* In RTL context, the symbol is the first child and the number is the
   inline text node after it. flex-direction:row in RTL puts the first
   child (symbol) on the right. We need it on the LEFT, so reverse. */
[dir="rtl"] .woocommerce-Price-amount {
	flex-direction: row-reverse;
}

/* The currency symbol span becomes a flex item — make sure it keeps
   its inline appearance and doesn't stretch. */
.woocommerce-Price-currencySymbol {
	flex: 0 0 auto;
	white-space: nowrap;
}