/*
Theme Name: Nogreh (Blocksy child)
Theme URI: https://nogreh.com/
Description: قالب فرزند بلاکسی برای نقره دات کام. بلاکسی قالب فعال است (سبک، سازگار با گوتنبرگ، به‌روزشونده)؛ این فرزند سه فونت سایت (IRANSans، Vazirmatn، Sahel) را به گزینه‌های تایپوگرافی بلاکسی می‌دهد، پالت تیرهٔ سایت را پالت بلاکسی می‌کند و هدر/فوتر/الگوهای صفحه و قاعده‌های قالب قبلی (nogreh-theme) را نگه می‌دارد. رنگ و شکل اجزا از شیوه‌نامهٔ افزونهٔ AI Site Scenario می‌آید.
Author: Nogreh
Template: blocksy
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nogreh-blocksy
Tags: rtl-language-support, e-commerce, block-patterns
*/

/* Every colour, shape and component rule lives in the plugin's site stylesheet
   (scenario/nogreh/css/site.css → sample «nogreh-stylesheet»). This file keeps the
   structure the templates need before that stylesheet loads, the phone type scale for
   pages that are not built from a sample, and the Blocksy variables that make Blocksy's
   own components (forms, buttons, WooCommerce pages) match the dark design. */

:root {
	--ng-container: 1250px;
	--ng-tap: 44px;

	/* Blocksy components follow the site's palette (the Customizer values are the same
	   colours; these are the fallbacks for elements Blocksy styles without an option). */
	--theme-button-border-radius: 12px;
	--theme-form-field-background-initial-color: var(--wp--preset--color--surface-2);
	--theme-form-field-background-focus-color: var(--wp--preset--color--surface-2);
	--theme-form-field-border-initial-color: var(--wp--preset--color--border-2);
	--theme-form-field-border-focus-color: var(--wp--preset--color--gold);
	--theme-form-text-initial-color: var(--wp--preset--color--text);
	--theme-form-text-focus-color: var(--wp--preset--color--text);
	--theme-form-selection-field-initial-color: var(--wp--preset--color--border-2);
	--theme-form-selection-field-active-color: var(--wp--preset--color--gold);
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

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

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* Blocksy wraps the header/footer patterns in <header id="header"> / <footer id="footer">. */
#header, #footer {
	position: relative;
}

/* --- structure only; colours and shapes come from the plugin stylesheet ------------- */
.ng-header__bar {
	display: flex;
	flex-wrap: nowrap; /* 25 Sep 2026 (owner's note #1658): logo, menu and icons in one row */
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.25rem;
	max-width: var(--ng-container);
	margin-inline: auto;
}

.ng-header__logo {
	flex: 0 0 auto;
}

.ng-header__logo img {
	display: block;
	width: 120px;
	height: 44px;
	object-fit: contain;
}

.ng-header__actions {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.ng-header .ng-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap; /* 24 Sep 2026: at 390 px «ثبت سفارش» broke into three lines */
}

.ng-header .ng-cta {
	flex-shrink: 0;
}

.ng-header .ng-icon {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

.ng-main {
	padding-block: 1.25rem 3rem;
}

.ng-main.ng-content {
	padding-block-start: 0;
}

.ng-content__title {
	max-width: var(--ng-container);
	margin: 1.25rem auto .5rem;
	padding-inline: 16px;
}

.ng-content .wp-block-post-content > :where(:not(.ng-page):not(.elementor)) {
	max-width: var(--ng-container);
	margin-inline: auto;
	padding-inline: 16px;
}

.ng-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	max-width: var(--ng-container);
	margin-inline: auto;
}

.ng-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ng-404__code {
	display: block;
	font-size: 64px;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	line-height: 1;
	margin-block: .5rem 1rem;
}

/* --- phone ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	h1, .wp-block-post-title.is-h1 { font-size: 19px !important; }
	h2 { font-size: 16px !important; }
	h3 { font-size: 14px !important; }

	.ng-header__logo img { width: 100px; height: 36px; }
	.ng-header__actions { margin-inline-start: auto; }
	.ng-header .ng-cta .wp-block-button__link { padding: .5rem .85rem; font-size: 13px; }
	.ng-404__code { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* fonts (D-65/D-67): the page font is Blocksy's typography option (Customizer → General →
   Typography → Base Font; faces in assets/fonts.css). Elementor's kit stylesheet sets the body
   font through `.elementor-kit-N` on every page while Elementor is active, so the rule below
   outranks it; every control inherits the page font. */
body, body[class*="elementor-kit-"] { font-family: var(--theme-font-family, var(--wp--preset--font-family--iransans)); }
button,input,select,textarea,.wp-element-button,.wc-block-components-button,.mnswmc,.mnswmc *{font-family:inherit;}

/* Stage 3: messenger icons beside each phone number in the footer; product photos in the checkout summary */
.ng-footer__im {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-inline-start: .35rem;
	vertical-align: middle;
}

.ng-footer__im a {
	display: inline-flex;
	align-items: center;
}

.ng-footer__im img {
	width: 20px;
	height: 20px;
}

.ng-checkout-item {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.ng-checkout-item img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 10px;
	background: var(--wp--preset--color--surface-2);
	padding: 4px;
	flex: 0 0 auto;
}

/* Sales paused (D-79, inc/sales-paused.php): the «call to order» button that replaces the cart form on product pages (gold style from the site's .ng-cta). */
.ng-order-cta { margin-block: .75rem 0; }
.ng-order-cta .wp-block-button { flex: 1 1 100%; }
.ng-order-cta .wp-block-button__link { display: block; width: 100%; text-align: center; }
#ng-footer-contact { scroll-margin-top: 1rem; }