/*
 * A1Host — Global Design Tokens
 * Source of truth for all design values.
 * Derived from actual DESIGN.md and code.html design files.
 */

/* ─── Font Face Declarations ──────────────────────────────────────────────── */

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
	font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Exo';
	src: url('../fonts/exo/Exo-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Exo';
	src: url('../fonts/exo/Exo-SemiBold.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}

/* ─── Design Tokens (from DESIGN.md + actual code.html) ──────────────────── */

:root {
	/* ── Primary: very dark navy — buttons, headings ── */
	--a1-primary:              #0a192f;
	--a1-primary-container:    #0d1c32;
	--a1-primary-light:        #39475f;
	--a1-primary-fixed:        #d6e3ff;
	--a1-on-primary:           #ffffff;
	--a1-on-primary-container: #76849f;

	/* ── Secondary: soft gold — CTAs, accents, badges ── */
	--a1-secondary:            #775a19;
	--a1-secondary-container:  #fed488;
	--a1-secondary-fixed:      #ffdea5;
	--a1-secondary-fixed-dim:  #e9c176;
	--a1-on-secondary:         #ffffff;
	--a1-on-secondary-container: #785a1a;

	/* ── Surface: warm near-white ── */
	--a1-surface:              #fbf9fb;
	--a1-surface-bg:           #ffffff;
	--a1-surface-muted:        #f8f9fa;
	--a1-surface-container-low:  #f5f3f5;
	--a1-surface-container:      #efedef;
	--a1-surface-container-high: #eae7ea;
	--a1-surface-container-highest: #e4e2e4;
	--a1-surface-dim:          #dbd9db;

	/* ── Text ── */
	--a1-text-high-contrast:   #0a192f;
	--a1-text-body:            #1d212f;
	--a1-text-muted:           #6c757d;
	--a1-on-surface:           #1b1b1d;
	--a1-on-surface-variant:   #44474d;

	/* ── Outline ── */
	--a1-outline:              #75777e;
	--a1-outline-variant:      #c5c6cd;

	/* ── Footer ── */
	--a1-footer-bg:            #515f78;

	/* ── Status ── */
	--a1-error:                #ba1a1a;
	--a1-success:              #16a34a;

	/* ── Typography ── */
	--a1-font-persian:         'Vazirmatn', Tahoma, Arial, sans-serif;
	--a1-font-latin:           'Exo', 'Inter', sans-serif;

	/* Font sizes */
	--a1-text-xs:    0.75rem;    /* 12px */
	--a1-text-sm:    0.875rem;   /* 14px */
	--a1-text-base:  1rem;       /* 16px */
	--a1-text-lg:    1.125rem;   /* 18px */
	--a1-text-xl:    1.25rem;    /* 20px */
	--a1-text-2xl:   1.5rem;     /* 24px */
	--a1-text-3xl:   2rem;       /* 32px */
	--a1-text-4xl:   3rem;       /* 48px */

	/* ── Spacing — 8pt system ── */
	--a1-space-1:   8px;
	--a1-space-2:   16px;
	--a1-space-3:   24px;
	--a1-space-4:   32px;
	--a1-space-6:   48px;
	--a1-space-8:   64px;

	/* ── Border radius ── */
	--a1-radius-sm:    4px;
	--a1-radius-md:    8px;
	--a1-radius-lg:    12px;
	--a1-radius-xl:    16px;
	--a1-radius-2xl:   1rem;
	--a1-radius-full:  9999px;

	/* ── Shadows ── */
	--a1-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
	--a1-shadow-md:   0 4px 16px rgba(10,25,47,0.10);
	--a1-shadow-lg:   0 8px 32px rgba(10,25,47,0.14);
	--a1-shadow-xl:   0 16px 48px rgba(10,25,47,0.18);

	/* ── Transitions ── */
	--a1-transition:  250ms ease;

	/* ── Layout ── */
	--a1-container:   1280px;
	--a1-gutter:      24px;
	--a1-header-h:    80px;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

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

html {
	direction: rtl;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

/* ── Force Vazirmatn everywhere — overrides Hello Elementor parent theme ── */
body, body * {
	font-family: var(--a1-font-persian) !important;
}
/* Restore icon fonts */
.material-symbols-outlined,
.material-symbols-outlined * {
	font-family: 'Material Symbols Outlined' !important;
}
/* Restore Exo for numeric/Latin labels */
.a1-price-num,
.a1-label-caps,
[class*="a1-badge"] {
	font-family: var(--a1-font-latin) !important;
}

body {
	font-family:      var(--a1-font-persian);
	font-size:        var(--a1-text-base);
	line-height:      1.6;
	color:            var(--a1-on-surface);
	background-color: var(--a1-surface);
	margin: 0; padding: 0;
}

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

a { color: var(--a1-primary); text-decoration: none; }
a:hover { color: var(--a1-primary-light); }

:focus-visible {
	outline: 3px solid var(--a1-secondary);
	outline-offset: 2px;
	border-radius: var(--a1-radius-sm);
}

/* Remove query strings from version params */

/* ─── Layout utilities ─────────────────────────────────────────────────────── */

.a1-container {
	max-width:     var(--a1-container);
	margin-inline: auto;
	padding-inline: var(--a1-gutter);
}

/* ─── Elementor: sticky header offset ──────────────────────────────────────── */

:target {
	scroll-margin-top: calc(var(--a1-header-h) + 16px);
}

/* ─── Blog prose ────────────────────────────────────────────────────────────── */

.a1-prose {
	font-size:   var(--a1-text-lg);
	line-height: 1.85;
	color:       var(--a1-text-body);
}
.a1-prose h2 {
	font-size:     var(--a1-text-3xl);
	font-weight:   700;
	color:         var(--a1-text-high-contrast);
	margin-top:    var(--a1-space-8);
	margin-bottom: var(--a1-space-3);
}
.a1-prose h3 {
	font-size:     var(--a1-text-2xl);
	font-weight:   600;
	margin-top:    var(--a1-space-6);
	margin-bottom: var(--a1-space-2);
}
.a1-prose p { margin-bottom: var(--a1-space-3); }
.a1-prose ul, .a1-prose ol {
	padding-inline-start: var(--a1-space-3);
	margin-bottom: var(--a1-space-3);
}
.a1-prose li { margin-bottom: var(--a1-space-1); }
.a1-prose blockquote {
	border-inline-start: 4px solid var(--a1-secondary);
	padding-inline-start: var(--a1-space-3);
	margin-inline: 0;
	color: var(--a1-text-muted);
}
.a1-prose code {
	font-family:      var(--a1-font-latin);
	background-color: var(--a1-surface-container-low);
	padding:          2px 6px;
	border-radius:    var(--a1-radius-sm);
	font-size:        0.875em;
}

/* ─── Global header/footer (Elementor Theme Builder) ──────────────────────── */

.a1-glass-header {
	background:       rgba(255,255,255,0.70);
	backdrop-filter:  blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom:    1px solid rgba(255,255,255,0.30);
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

.a1-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         12px 32px;
	border-radius:   var(--a1-radius-lg);
	font-family:     var(--a1-font-persian);
	font-size:       var(--a1-text-lg);
	font-weight:     700;
	cursor:          pointer;
	transition:      all var(--a1-transition);
	border:          none;
	text-decoration: none;
}

.a1-btn-primary {
	background: var(--a1-secondary);
	color:      var(--a1-on-primary);
	box-shadow: var(--a1-shadow-lg);
}
.a1-btn-primary:hover { filter: brightness(1.1); color: #fff; }

.a1-btn-outline {
	background:  transparent;
	color:       var(--a1-primary);
	border:      2px solid var(--a1-primary);
}
.a1-btn-outline:hover {
	background: var(--a1-primary);
	color:      var(--a1-on-primary);
}

/* ─── Cards ─────────────────────────────────────────────────────────────────── */

.a1-card {
	background:    var(--a1-surface-bg);
	border-radius: var(--a1-radius-2xl);
	border:        1px solid rgba(197,198,205,0.40);
	padding:       32px;
	transition:    box-shadow var(--a1-transition), transform var(--a1-transition);
}
.a1-card:hover {
	box-shadow: var(--a1-shadow-lg);
	transform:  translateY(-4px);
}

/* ─── RTL fixes ─────────────────────────────────────────────────────────────── */

input::placeholder, textarea::placeholder { text-align: right; }
input[type="number"], input[type="tel"] { direction: ltr; text-align: left; }

/* Price numbers use Latin font */
.a1-price-num { font-family: var(--a1-font-latin); }

/* ─── Pricing table card ─────────────────────────────────────────────────────── */

.a1-plan-card {
	background:    var(--a1-surface-bg);
	border:        1px solid var(--a1-outline-variant);
	border-radius: var(--a1-radius-2xl);
	padding:       32px;
	display:       flex;
	flex-direction: column;
	text-align:    right;
	transition:    transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
}
.a1-plan-card:hover { transform: translateY(-8px); box-shadow: var(--a1-shadow-xl); }

.a1-plan-card--featured {
	border:     2px solid var(--a1-secondary);
	box-shadow: var(--a1-shadow-xl);
	transform:  scale(1.05);
	z-index:    10;
	position:   relative;
}

/* ─── Cycle tabs ────────────────────────────────────────────────────────────── */

.a1-cycle-tabs {
	display:         inline-flex;
	background:      var(--a1-surface-container);
	border-radius:   var(--a1-radius-xl);
	padding:         4px;
	gap:             4px;
	margin-bottom:   var(--a1-space-6);
}
.a1-cycle-tab {
	border:          none;
	background:      transparent;
	padding:         8px 24px;
	border-radius:   var(--a1-radius-lg);
	font-family:     var(--a1-font-persian);
	font-size:       var(--a1-text-base);
	font-weight:     700;
	color:           var(--a1-on-surface-variant);
	cursor:          pointer;
	transition:      all 200ms ease;
}
.a1-cycle-tab.active {
	background: var(--a1-surface-bg);
	color:      var(--a1-on-surface);
	box-shadow: var(--a1-shadow-sm);
}

/* ─── Mobile ─────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	:root { --a1-gutter: 16px; }
	.a1-plan-card--featured { transform: none; }
}