/* استخراج‌شده از hh-website-prototype.html — سیستم طراحی مصوب (سند ۰۱-بخش‌د) */

/* ==========================================================================
   تعیین‌تکلیف فونت — فاز ۵-A بند ۱۲
   فایل واقعی Vazirmatn (WOFF2 قانونی) هنوز داخل قالب قرار داده نشده؛ بنابراین
   فونت‌خانواده به‌جای اشاره به فایلی که وجود ندارد، فعلاً روی Stack فونت سیستمی
   امن (که در همه دستگاه‌های فارسی‌زبان خوانا است) تنظیم شده.

   نحوه فعال‌سازی Vazirmatn واقعی (توسط توسعه‌دهنده):
   ۱) فایل‌های WOFF2 قانونی را در assets/fonts/vazirmatn/ قرار دهید.
   ۲) بلوک @font-face کامنت‌شده زیر را فعال کنید.
   ۳) در inc/theme-setup.php یک wp_enqueue_style جدا برای preload اضافه کنید:
        echo '<link rel="preload" href="' . HH_THEME_URI . '/assets/fonts/vazirmatn/Vazirmatn-Regular.woff2" as="font" type="font/woff2" crossorigin>';
   ۴) در تعریف --font-fa پایین، 'Vazirmatn' را به ابتدای Stack اضافه کنید.

   @font-face {
     font-family: 'Vazirmatn';
     src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
     font-weight: 400; font-display: swap;
   }
   (بلوک بالا عمداً با کامنت غیرفعال است تا به فایلی که وجود ندارد اشاره نشود)
   ========================================================================== */
:root{
  --font-fa: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
  --navy:#102A43; --navy-dark:#0C2033; --blue:#3E7CB1; --ice:#EAF3F8;
  --warm-white:#FAFAF7; --charcoal:#17212B; --gray-blue:#52606D;
  --brick:#B4534B; --brick-bg:#FDF2F1; --white:#FFFFFF; --border:#D9E2EC;
  --r-sm:8px; --r-md:12px; --sh-1:0 1px 2px rgba(16,42,67,.06);
  --sh-2:0 4px 12px rgba(16,42,67,.08); --sh-3:0 12px 32px rgba(16,42,67,.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--font-fa); background:var(--warm-white); color:var(--charcoal); line-height:1.8; font-size:17px;}
h1,h2,h3,h4{line-height:1.4; color:var(--navy);}
h1{font-size:28px; font-weight:900;}
h2{font-size:24px; font-weight:800;}
h3{font-size:20px; font-weight:700;}
@media(min-width:768px){h1{font-size:40px;} h2{font-size:32px;} h3{font-size:24px;}}
p{color:var(--charcoal);}
.meta{color:var(--gray-blue); font-size:13px;}
@media(min-width:768px){.meta{font-size:14px;}}
a{color:inherit; text-decoration:none;}
.container{max-width:1240px; margin:0 auto; padding:0 20px;}
section{padding:56px 0;}
@media(min-width:768px){section{padding:88px 0;}}

/* ===== Preview switcher (demo tool, not part of real site) ===== */
/* ==========================================================================
   بخش پیش‌نمایش پروتوتایپ — طبق فاز ۵-A کاملاً از قالب وردپرس جدا شد.
   این کلاس‌ها فقط داخل hh-website-prototype.html (با کلاس ریشه hh-prototype)
   معنا دارند و در قالب واقعی وردپرس هرگز رندر نمی‌شوند؛ محدودسازی به namespace
   .hh-prototype برای اطمینان کامل از عدم اثرگذاری روی صفحات واقعی است.
   ========================================================================== */
.hh-prototype .preview-bar{position:sticky; top:0; z-index:100; background:var(--navy-dark); color:#fff; display:flex; gap:6px; padding:10px 12px; overflow-x:auto; font-size:13px;}
.hh-prototype .preview-bar button{background:transparent; border:1px solid rgba(255,255,255,.25); color:#cdd8e3; padding:8px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; font-family:inherit; font-size:13px; transition:.2s;}
.hh-prototype .preview-bar button.active,.hh-prototype .preview-bar button:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.hh-prototype .page{display:none;}
.hh-prototype .page.active{display:block;}

/* ===== Placeholder component ===== */
.ph{border:2px dashed #9FB3C8; border-radius:var(--r-md); background:repeating-linear-gradient(135deg,#F0F4F8,#F0F4F8 10px,#E7EDF3 10px,#E7EDF3 20px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gray-blue); text-align:center; padding:20px;}
.ph .ph-icon{font-size:24px;}
.ph .ph-label{background:var(--brick); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;}
.ph.img-ph{aspect-ratio:4/3; min-height:180px;}
.hero-photo-frame{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.15); aspect-ratio:4/5; max-width:420px; margin-inline:auto;}
.hero-photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-photo-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(16,42,67,.35) 0%, transparent 35%);}

/* ===== Header ===== */
header.site{position:sticky; top:0; z-index:90; background:rgba(250,250,247,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{font-weight:900; font-size:18px; color:var(--navy);}
.logo span{color:var(--blue);}
nav.main-menu{display:none; font-size:15px; color:var(--charcoal);}
nav.main-menu ul{list-style:none; margin:0; padding:0; display:flex; gap:22px;}
nav.main-menu li{margin:0;}
@media(min-width:1024px){nav.main-menu{display:flex;}}

/* ===== منوی موبایل — فاز ۵-A بند ۵ ===== */
@media(max-width:1023px){
	nav.main-menu{
		display:none; position:fixed; inset-block-start:64px; inset-inline:0; bottom:0;
		background:var(--warm-white); z-index:95;
		padding:20px; overflow-y:auto; box-shadow:0 8px 24px rgba(16,42,67,.12);
	}
	nav.main-menu ul{flex-direction:column; gap:4px;}
	nav.main-menu.is-open{display:flex;}
	nav.main-menu a{display:block; padding:14px 12px; font-size:17px; border-bottom:1px solid var(--border); min-height:48px;}
}
.hamburger-btn{
	display:flex; align-items:center; justify-content:center; width:44px; height:44px;
	border-radius:var(--r-sm); border:1px solid var(--border); background:#fff;
	font-size:20px; cursor:pointer; color:var(--navy);
}
@media(min-width:1024px){.hamburger-btn{display:none;}}
body.hh-menu-open{overflow:hidden;} /* جلوگیری از اسکرول پس‌زمینه هنگام باز بودن منو */

/* ===== جست‌وجوی استاندارد وردپرس ===== */
.search-form{display:flex; align-items:center; gap:6px;}
.search-form .search-field{
	width:38px; min-height:38px; padding:8px 10px; border:1px solid var(--border);
	border-radius:var(--r-sm); font-family:inherit; font-size:14px; transition:width .25s ease;
}
.search-form .search-field:focus{width:180px;}
.search-form .search-submit{
	width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
	background:#fff; cursor:pointer; font-size:15px;
}

/* ===== focus-visible استاندارد — فاز ۵-A بند ۱۳ ===== */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.hamburger-btn:focus-visible, .role-card:focus-visible, .card:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	border-radius: 4px;
}
/* outline پیش‌فرض مرورگر هرگز بدون جایگزین حذف نمی‌شود؛ فقط با نسخه واضح‌تر بالا جایگزین شده است */
.hdr-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; background:#fff; cursor:pointer;}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:var(--r-sm); font-size:16px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:.2s; min-height:48px;}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-dark);}
.btn-secondary{background:transparent; color:var(--blue); border:2px solid var(--blue);}
.btn-secondary:hover{background:var(--ice);}
.btn-white{background:#fff; color:var(--navy);}
.btn-text{color:var(--blue); text-decoration:underline; padding:8px;}

/* ===== Hero ===== */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%); color:#fff; padding:64px 0 72px; position:relative; overflow:hidden;}
.hero .container{display:grid; gap:36px; position:relative; z-index:2;}
@media(min-width:1024px){.hero .container{grid-template-columns:1.15fr .85fr; align-items:center;}}
.hero h1{color:#fff; margin-bottom:16px;}
.hero p.lead{color:#C9D6E3; font-size:17px; max-width:52ch; margin-bottom:24px;}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px;}
.trust-note{font-size:13px; color:#9FB3C8;}
.orbs{position:absolute; inset:0; z-index:1; pointer-events:none;}
.orb{position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(62,124,177,.55), rgba(62,124,177,.05)); filter:blur(1px); animation:float 18s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.orb{animation:none;}}
.orb1{width:220px; height:220px; top:-40px; left:5%; animation-duration:22s;}
.orb2{width:140px; height:140px; top:60%; left:20%; animation-duration:16s; animation-delay:-4s;}
.orb3{width:90px; height:90px; top:15%; left:60%; animation-duration:14s; animation-delay:-8s;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-24px) translateX(14px);}}

/* ===== Credibility bar ===== */
.credbar{background:var(--ice); padding:18px 0;}
.credbar .container{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; font-size:14px; color:var(--navy); font-weight:600;}
.credbar span{white-space:nowrap;}
.credbar .dot{color:var(--blue); font-weight:400;}

/* ===== Cards / grids ===== */
.grid{display:grid; gap:20px;}
.g2{grid-template-columns:1fr;} @media(min-width:768px){.g2{grid-template-columns:1fr 1fr;}}
.g3{grid-template-columns:1fr;} @media(min-width:768px){.g3{grid-template-columns:repeat(3,1fr);}}
.g4{grid-template-columns:1fr 1fr;} @media(min-width:768px){.g4{grid-template-columns:repeat(4,1fr);}}
.g6{grid-template-columns:1fr 1fr;} @media(min-width:768px){.g6{grid-template-columns:repeat(3,1fr);}}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-1); transition:.2s;}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue);}
.card .icon{width:44px; height:44px; border-radius:10px; background:var(--ice); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px;}
.card h3{margin-bottom:8px;}
.card p{color:var(--gray-blue); font-size:15px;}
.card a.more{display:inline-block; margin-top:12px; color:var(--blue); font-size:14px; font-weight:600;}
.eyebrow{display:inline-block; color:var(--blue); font-weight:700; font-size:13px; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase;}

/* ===== Featured product block ===== */
.featured{background:var(--ice); border-radius:16px; padding:32px 24px;}
@media(min-width:768px){.featured{padding:48px;}}
.featured .grid-2{display:grid; gap:32px;}
@media(min-width:1024px){.featured .grid-2{grid-template-columns:1fr 1fr; align-items:center;}}

/* ===== Section header helper ===== */
.sec-head{max-width:680px; margin-bottom:32px;}
.sec-head.center{margin-inline:auto; text-align:center;}
.sec-head p{color:var(--gray-blue); font-size:16px;}

/* ===== Stepper ===== */
.stepper{display:flex; flex-direction:column; gap:0;}
@media(min-width:900px){.stepper{flex-direction:row;}}
.step{flex:1; display:flex; gap:14px; align-items:flex-start; position:relative; padding:14px 0;}
@media(min-width:900px){.step{flex-direction:column; align-items:center; text-align:center;}}
.step .num{width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.step-line{display:none;}
@media(min-width:900px){.step:not(:last-child)::after{content:'';position:absolute; top:18px; left:calc(-50% + 18px); width:calc(100% - 36px); height:2px; background:var(--border); z-index:-1;}}

/* ===== Footer ===== */
footer.site{background:var(--navy); color:#C9D6E3; padding:56px 0 24px; margin-top:40px;}
footer.site h4{color:#fff; font-size:15px; margin-bottom:14px;}
footer.site .grid{grid-template-columns:1fr; gap:28px;}
@media(min-width:768px){footer.site .grid{grid-template-columns:repeat(4,1fr);}}
footer.site a{display:block; padding:5px 0; font-size:14px; color:#AEC2D6;}
footer.site a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:20px; font-size:13px; color:#8FA5BC; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:13px; color:var(--gray-blue); padding:16px 0;}
.breadcrumb a{color:var(--blue);}

/* ===== FAQ Accordion ===== */
.faq details{background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:10px; padding:16px 18px;}
.faq summary{cursor:pointer; font-weight:700; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-size:22px; color:var(--blue);}
.faq details[open] summary::after{content:'−';}
.faq p{margin-top:10px; color:var(--gray-blue); font-size:15px;}

/* ===== Form ===== */
.form-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--sh-2);}
@media(min-width:768px){.form-card{padding:40px;}}
.field{margin-bottom:18px;}
.field label{display:block; font-size:14px; font-weight:600; color:var(--navy); margin-bottom:7px;}
.field input, .field select, .field textarea{width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-family:inherit; font-size:15px; background:#fff; min-height:48px;}
.field textarea{min-height:96px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue);}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
	outline: 3px solid var(--blue); outline-offset: 1px;
}
.field .hint{font-size:12px; color:var(--gray-blue); margin-top:5px;}
.field-row{display:grid; gap:16px;}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr;}}
.form-steps{display:flex; gap:8px; margin-bottom:28px;}
.form-steps .s{flex:1; height:4px; border-radius:4px; background:var(--border);}
.form-steps .s.done{background:var(--blue);}
.consent{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--gray-blue);}

/* ===== Risk radar (static representative) ===== */
.radar-wrap{display:flex; justify-content:center; padding:16px 0;}
.radar-labels{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:20px; font-size:14px; color:var(--charcoal);}
.radar-labels li{display:flex; align-items:center; gap:8px;}
.radar-labels li::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--blue);}

/* ===== Warning callout ===== */
.callout{background:var(--brick-bg); border-inline-start:4px solid var(--brick); border-radius:var(--r-sm); padding:16px 18px; font-size:14px; color:#7a3b35;}

/* ===== Role selector cards ===== */
.role-card{background:#fff; border:2px solid var(--border); border-radius:var(--r-md); padding:20px; text-align:center; cursor:pointer; transition:.2s;}
.role-card:hover{border-color:var(--blue); box-shadow:var(--sh-2);}

/* ===== Sticky mobile CTA ===== */
.sticky-cta{position:fixed; bottom:0; inset-inline:0; background:#fff; border-top:1px solid var(--border); padding:12px 16px; display:flex; z-index:80; box-shadow:0 -4px 16px rgba(16,42,67,.1);}
@media(min-width:1024px){.sticky-cta{display:none;}}
.sticky-cta .btn{width:100%;}
.page{padding-bottom:76px;}
@media(min-width:1024px){.page{padding-bottom:0;}}

/* small label for placeholder tags legend */
.legend{background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 18px; font-size:13px; color:var(--gray-blue); margin-bottom:24px;}
.legend b{color:var(--navy);}