/* ==========================================================================
   app.css — سیستم طراحی سایت مطب دندانپزشکی
   --------------------------------------------------------------------------
   بدون فریم ورک. چیدمان با Grid و Flexbox.
   رنگ برند #77A11C از سایت قبلی حفظ شده است.
   ========================================================================== */

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn/Vazirmatn-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   توکن ها
   -------------------------------------------------------------------------- */
:root {
    /* --- سبز برند -------------------------------------------------------
       brand-500 رنگ اصلی سایت است و تغییر نمی کند. کنتراستش روی سفید ۳٫۰۴
       است ، پس فقط برای سطح ، حاشیه ، آیکون و تیتر بزرگ به کار می رود.
       هر متنی که باید خوانده شود از brand-700 استفاده می کند : ۵٫۸۵ روی سفید ،
       و متن سفید روی brand-700 هم همان ۵٫۸۵ را می دهد.
    */
    --brand-50:  #F4F8EC;
    --brand-100: #E6F0D2;
    --brand-200: #CFE3A8;
    --brand-300: #95C62F;
    --brand-500: #77A11C;
    --brand-600: #628516;
    --brand-700: #516E12;
    --brand-800: #3D530D;
    --brand-900: #2D4F0D;

    /* سبز روشنِ مخصوص متن روی زمینه ی سبز تیره ی فوتر.
       brand-300 روی brand-700 فقط ۲٫۹ کنتراست می دهد که زیر حداقل ۳ برای
       متن بزرگ است ؛ این یکی ۴٫۰۳ می دهد. */
    --brand-on-dark: #C0E374;

    /* --- خنثی ها ، کمی متمایل به سبز تا کنار برند غریبه نباشند ---------- */
    --ink:       #14180F;
    --ink-2:     #4A5243;
    --ink-3:     #79826F;
    --line:      #E0E4D9;
    --line-soft: #EFF2EA;
    --surface:   #FFFFFF;
    --surface-2: #F8FAF4;
    --ground:    #F2F5EC;

    --danger:  #A93226;
    --danger-soft: #FBEAE7;

    /* --- تایپوگرافی ------------------------------------------------------
       فارسی به ارتفاع خط بازتر از لاتین نیاز دارد.
    */
    --font: 'Vazirmatn', 'IRANSans', Tahoma, system-ui, sans-serif;

    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-base: 1.0625rem;
    --text-lg:   1.1875rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.125rem;
    --text-4xl:  2.75rem;
    --text-5xl:  3.5rem;

    --lh-tight:   1.35;
    --lh-normal:  1.65;
    --lh-relaxed: 1.95;

    /* --- فاصله ----------------------------------------------------------- */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.25rem;  --s6: 1.5rem;   --s8: 2rem;     --s10: 2.5rem;
    --s12: 3rem;    --s16: 4rem;    --s20: 5rem;    --s24: 6rem;

    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(20,24,15,.05);
    --shadow:    0 2px 6px rgba(20,24,15,.05), 0 12px 28px -18px rgba(20,24,15,.35);
    --shadow-lg: 0 4px 12px rgba(20,24,15,.06), 0 28px 56px -28px rgba(20,24,15,.4);

    --wrap: 1180px;
    --wrap-narrow: 760px;
    --header-h: 72px;
}

/* --------------------------------------------------------------------------
   پایه
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--s4);
    line-height: var(--lh-tight);
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); line-height: var(--lh-normal); }
h5 { font-size: var(--text-lg); line-height: var(--lh-normal); }

@media (max-width: 767px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
}

p { margin: 0 0 var(--s4); }

a { color: var(--brand-700); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-900); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

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

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s10) 0; }

/* --------------------------------------------------------------------------
   چیدمان
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--s5);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s16); }
.section-sm { padding-block: var(--s10); }
.section-tint { background: var(--surface-2); }

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s8); }

.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ستون اصلی + ستون کناری */
.with-aside {
    display: grid;
    gap: var(--s10);
    grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
    .with-aside { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --------------------------------------------------------------------------
   عنوان بخش
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-700);
    background: var(--brand-50);
    border-radius: var(--radius-full);
    padding: var(--s1) var(--s4);
    margin-bottom: var(--s4);
}

.section-head { margin-bottom: var(--s10); }
.section-head p { color: var(--ink-2); max-width: 62ch; margin: 0; }
.section-head.center { text-align: center; }
.section-head.center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   سربرگ
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
}

.site-header.is-scrolled { box-shadow: var(--shadow); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--s3); flex: none; }
.brand img { width: 44px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.brand__name { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.brand__sub { font-size: var(--text-xs); color: var(--ink-3); }

.nav { display: flex; align-items: center; gap: var(--s1); margin-inline-start: auto; }

.nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--s3);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
}

.nav a:hover, .nav a[aria-current="page"] {
    color: var(--brand-700);
    background: var(--brand-50);
}

.nav__group { position: relative; }

.nav__group > summary {
    display: flex;
    align-items: center;
    gap: var(--s1);
    min-height: 44px;
    padding-inline: var(--s3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.nav__group > summary::-webkit-details-marker { display: none; }
.nav__group > summary::marker { content: ''; }

.nav__group > summary:hover,
.nav__group[open] > summary { color: var(--brand-700); background: var(--brand-50); }

.nav__group > summary svg { transition: transform .18s ease; }
.nav__group[open] > summary svg { transform: rotate(180deg); }

.nav__menu {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 4px);
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--s2);
    display: flex;
    flex-direction: column;
}

.header-cta { flex: none; margin-inline-start: var(--s3); }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-inline-start: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

@media (max-width: 991px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: var(--s3);
    }

    .site-header.is-open .nav { display: flex; }

    .nav__menu { position: static; border: 0; box-shadow: none; padding-inline-start: var(--s5); }

    .header-cta { display: none; }
}

/* --------------------------------------------------------------------------
   دکمه ها
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 46px;
    padding: var(--s2) var(--s6);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary { background: var(--brand-700); color: #fff; }
.btn-primary:hover { background: var(--brand-900); color: #fff; }

.btn-outline { background: transparent; border-color: var(--brand-500); color: var(--brand-700); }
.btn-outline:hover { background: var(--brand-50); border-color: var(--brand-700); color: var(--brand-900); }

.btn-ghost { background: var(--surface-2); color: var(--ink-2); }
.btn-ghost:hover { background: var(--brand-50); color: var(--brand-700); }

.btn-lg { min-height: 54px; font-size: var(--text-base); padding-inline: var(--s8); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   کارت
   -------------------------------------------------------------------------- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.card:hover { box-shadow: var(--shadow); border-color: var(--brand-200); transform: translateY(-3px); }

.card__media { aspect-ratio: 3 / 2; background: var(--surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
    .card__media img { transition: transform .45s ease; }
    .card:hover .card__media img { transform: scale(1.05); }
}

.card__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; }
.card__title { font-size: var(--text-lg); font-weight: 700; margin: 0; line-height: var(--lh-normal); }
.card__text { color: var(--ink-2); font-size: var(--text-sm); margin: 0; }
.card__more { margin-top: auto; padding-top: var(--s3); font-weight: 600; font-size: var(--text-sm); }

/* کل کارت قابل کلیک ، ولی لینک واقعی باقی می ماند تا با کیبورد و خزنده کار کند */
.card__link::after { content: ''; position: absolute; inset: 0; }
.card { position: relative; }

/* --------------------------------------------------------------------------
   فرم
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }

.input, .textarea, select.input {
    width: 100%;
    min-height: 46px;
    padding: var(--s2) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
}

.textarea { min-height: 140px; padding-block: var(--s3); resize: vertical; }

.input:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

.field-error { color: var(--danger); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   جستجو
   -------------------------------------------------------------------------- */
.searchbar { display: flex; gap: var(--s2); }
.searchbar .input { flex: 1; }

/* --------------------------------------------------------------------------
   برچسب
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-inline: var(--s4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tag:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }

/* --------------------------------------------------------------------------
   چیپ برچسب
   در فهرست مقالات ، صفحه ی مقاله ، فهرست خدمات و صفحه ی خدمت استفاده می شود.
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* داخل کارتی که کل سطحش لینک است ، چیپ ها باید بالای آن لایه بنشینند */
.chips--over { position: relative; z-index: 1; }

.chips > span {
    font-size: var(--text-sm);
    color: var(--ink-3);
    margin-inline-end: var(--s1);
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: var(--s3);
    border-radius: var(--radius-full);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
    font-size: var(--text-xs);
    line-height: 1.5;
    transition: background-color .15s ease, border-color .15s ease;
}

.chip:hover { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-900); }

.chips--lg .chip { min-height: 36px; font-size: var(--text-sm); padding-inline: var(--s4); }

/* ردیف برچسب انتهای یک مطلب */
.tagrow { margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   پانویس
   -------------------------------------------------------------------------- */
.site-footer { background: var(--brand-700); color: #fff; margin-top: var(--s20); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--brand-on-dark); }

.site-footer h2, .site-footer h3 { color: var(--brand-on-dark); font-size: var(--text-lg); }

/* --- جستجوی فوتر ---
   روی زمینه ی سبز تیره می نشیند ، پس خود ورودی سفید است تا متن تایپ شده
   بیشترین کنتراست را داشته باشد. */
.footer-search { padding-block: var(--s10) 0; display: flex; flex-direction: column; gap: var(--s3); }

.footer-search__label { font-size: var(--text-lg); font-weight: 700; color: var(--brand-on-dark); }

.footer-search__row { display: flex; gap: var(--s3); max-width: 620px; }

.footer-search__input {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    padding-inline: var(--s5);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
}

.footer-search__input::placeholder { color: var(--ink-3); }

.footer-search__input:focus {
    outline: none;
    border-color: var(--brand-300);
    box-shadow: 0 0 0 3px rgba(149,198,47,.35);
}

.footer-search__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    flex: none;
    min-height: 50px;
    padding-inline: var(--s6);
    border: 1px solid var(--brand-300);
    border-radius: var(--radius-sm);
    background: var(--brand-300);
    color: var(--brand-900);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.footer-search__go:hover { background: #A8DA3A; border-color: #A8DA3A; }

@media (max-width: 520px) {
    .footer-search__row { flex-direction: column; }
    .footer-search__go { width: 100%; }
}

.site-footer__grid {
    display: grid;
    gap: var(--s10);
    grid-template-columns: 1fr;
    padding-block: var(--s10);
}

@media (min-width: 800px) {
    .site-footer__grid { grid-template-columns: 2fr 1.5fr 1fr; }
}

.site-footer p, .site-footer li { color: rgba(255,255,255,.92); font-size: var(--text-sm); }

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--s3); }

/* لینک های پانویس هم باید هدف لمسی قابل قبول داشته باشند */
.contact-list a { display: inline-flex; align-items: center; min-height: 36px; }
.contact-list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; opacity: .9; }

.site-footer .tag {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}

.site-footer .tag:hover { background: rgba(255,255,255,.2); color: #fff; }

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.18);
    padding-block: var(--s5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    justify-content: space-between;
    font-size: var(--text-xs);
    color: rgba(255,255,255,.75);
}

/* --------------------------------------------------------------------------
   دکمه شناور تماس — موبایل
   -------------------------------------------------------------------------- */
.quick-contact {
    position: fixed;
    inset-block-end: var(--s5);
    inset-inline-end: var(--s5);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.quick-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-full);
    background: var(--brand-700);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.quick-contact a:hover { background: var(--brand-900); color: #fff; }
.quick-contact svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   کمکی ها
   -------------------------------------------------------------------------- */
.muted { color: var(--ink-2); }
.center { text-align: center; }
.measure { max-width: 68ch; }
.prose { line-height: var(--lh-relaxed); }
.prose :where(h2, h3) { margin-top: var(--s10); }
.prose img { border-radius: var(--radius); margin-block: var(--s6); }
.prose ul, .prose ol { padding-inline-start: var(--s6); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; inset-inline-start: var(--s4); top: -100px;
    z-index: 100; background: var(--surface); padding: var(--s3) var(--s5);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    transition: top .15s ease;
}

.skip-link:focus { top: var(--s4); }