/* ======================================================================
   بخش فوتر سایت عمومی
   هم‌راستا با public-header.css و public-contact.css
   آیکن‌ها: Bootstrap Icons (کلاس bi)
   ====================================================================== */

.site-footer {
    /* ---- سطوح (تم تیره: عمق از روشنایی، نه سایه) ---- */
    --footer-950: oklch(14% 0.028 254);
    --footer-900: oklch(17% 0.030 254);
    --footer-850: oklch(19% 0.031 254);
    --footer-800: oklch(21% 0.032 254);
    --footer-700: oklch(25% 0.034 254);
    --footer-line: oklch(33% 0.036 254);
    --footer-line-soft: oklch(28% 0.034 254);

    /* ---- طلایی برند ---- */
    --gold-300: oklch(86% 0.070 82);
    --gold-400: oklch(80% 0.092 80);
    --gold-500: oklch(74% 0.105 78);
    --gold-700: oklch(52% 0.085 72);

    /* ---- متن ---- */
    --ink-100: oklch(94% 0.012 80);
    --ink-300: oklch(80% 0.010 254);
    --ink-400: oklch(68% 0.018 254);
    --ink-500: oklch(56% 0.020 254);

    /* ---- فاصله‌ها (پایه ۴ پیکسل) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;
    --sp-16: 64px;

    --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

    position: relative;
    background: var(--footer-950);
    color: var(--ink-300);
    font-size: .9375rem;
    line-height: 1.95;
    letter-spacing: .012em;
    font-weight: 350;
    border-top: 1px solid var(--footer-line);
}

/* آرایه طلایی لبه بالا: خط باریک + لوزی مرکزی، بدون وابستگی به تصویر */
.site-footer::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-700) 22%, var(--gold-400) 50%, var(--gold-700) 78%, transparent 100%);
    opacity: .85;
}

.footer-crest {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-start: 50%;
    translate: -50% 0;
    width: 13px;
    height: 13px;
    rotate: 45deg;
    background: var(--footer-950);
    border: 1px solid var(--gold-500);
}

/* ===================== شبکه اصلی ===================== */
/* عرض ستون‌ها عمداً نامساوی است تا ریتم بصری یکنواخت نشود */
.footer-main {
    display: grid;
    grid-template-columns: 1.55fr .85fr .95fr 1.35fr;
    gap: var(--sp-12) var(--sp-8);
    padding-block: var(--sp-16) var(--sp-12);
}

/* ===================== ستون برند ===================== */
.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.footer-brand-logo {
    width: 64px;
    height: auto;
    flex: none;
}

.footer-brand-name {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--ink-100);
    letter-spacing: -.01em;
}

.footer-brand-role {
    margin: 2px 0 0;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--gold-400);
}

.footer-brand-motto {
    display: block;
    margin-top: var(--sp-1);
    font-family: system-ui, sans-serif;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--ink-500);
    direction: ltr;
    text-align: right;
}

.footer-brand-text {
    margin: 0;
    max-width: 42ch;
    font-size: .9375rem;
    color: var(--ink-400);
    text-wrap: pretty;
}

/* نشان‌های اعتبار: ردیف افقی، بدون کارت */
.footer-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--footer-line-soft);
}

.footer-credential {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: .8125rem;
    color: var(--ink-400);
}

    .footer-credential i {
        color: var(--gold-500);
        font-size: 1rem;
        line-height: 1;
    }

    .footer-credential b {
        color: var(--ink-100);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* ===================== ستون‌های لینک ===================== */
.footer-col-title {
    margin: 0 0 var(--sp-6);
    position: relative;
    padding-bottom: var(--sp-3);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--gold-400);
}

    .footer-col-title::after {
        content: "";
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        width: 30px;
        height: 2px;
        background: var(--gold-700);
    }

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1);
}

    .footer-links a {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        padding-block: 5px;
        color: var(--ink-300);
        text-decoration: none;
        font-size: .90625rem;
        transition: color .18s var(--ease-out-quart), translate .28s var(--ease-out-expo);
    }

        /* لوزی کوچک که فقط در هاور ظاهر می‌شود */
        .footer-links a::before {
            content: "";
            width: 5px;
            height: 5px;
            flex: none;
            rotate: 45deg;
            border: 1px solid var(--gold-700);
            opacity: 0;
            transition: opacity .18s var(--ease-out-quart), background-color .18s var(--ease-out-quart);
        }

        .footer-links a:hover,
        .footer-links a:focus-visible {
            color: var(--gold-300);
            translate: -6px 0; /* در RTL جهت رو به جلو، سمت چپ است */
        }

            .footer-links a:hover::before,
            .footer-links a:focus-visible::before {
                opacity: 1;
                background: var(--gold-500);
            }

        .footer-links a:focus-visible {
            outline: 2px solid var(--gold-500);
            outline-offset: 4px;
            border-radius: 2px;
        }

/* حالت خالی برای ستون‌های پویا (نبود رکورد فعال در دیتابیس) */
.footer-empty {
    margin: 0;
    padding: var(--sp-3) 0;
    font-size: .8125rem;
    color: var(--ink-500);
}

/* ===================== پنل تماس (تنها سطح برجسته فوتر) ===================== */
.footer-contact-panel {
    background: var(--footer-850);
    border: 1px solid var(--footer-line);
    padding: var(--sp-6);
}

    .footer-contact-panel .footer-col-title {
        margin-bottom: var(--sp-4);
    }

/* شماره تماس، عنصر تبدیل اصلی یک سایت وکالت است */
.footer-phone-stack {
    display: grid;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
}

.footer-phone-primary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--ink-100);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    transition: color .18s var(--ease-out-quart);
}

    .footer-phone-primary i {
        color: var(--gold-500);
        font-size: 1.25rem;
        line-height: 1;
        flex: none;
    }

    .footer-phone-primary:hover,
    .footer-phone-primary:focus-visible {
        color: var(--gold-300);
    }

.footer-phone-secondary {
    padding-inline-start: 32px;
    color: var(--ink-400);
    text-decoration: none;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    transition: color .18s var(--ease-out-quart);
}

    .footer-phone-secondary:hover {
        color: var(--gold-400);
    }

.footer-contact-rows {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--footer-line-soft);
}

.footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: .875rem;
    line-height: 1.85;
    color: var(--ink-400);
}

    .footer-contact-row i {
        color: var(--gold-500);
        font-size: 1rem;
        line-height: 1;
        margin-top: 7px;
        flex: none;
    }

    .footer-contact-row a {
        color: var(--ink-300);
        text-decoration: none;
        transition: color .18s var(--ease-out-quart);
    }

        .footer-contact-row a:hover {
            color: var(--gold-300);
        }

    /* برچسب معنایی برای صفحه‌خوان، پنهان از دید */
    .footer-contact-row dt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .footer-contact-row dd {
        margin: 0;
    }

.footer-hours-badge {
    display: inline-block;
    margin-inline-start: var(--sp-2);
    padding: 1px 7px;
    vertical-align: 1px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--gold-400);
    border: 1px solid var(--gold-700);
}

/* ===================== نوار پیام‌رسان‌ها ===================== */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-6);
    border-top: 1px solid var(--footer-line-soft);
}

.footer-social-label {
    margin: 0;
    margin-inline-end: auto;
    font-size: .8125rem;
    color: var(--ink-500);
}

.footer-social-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px; /* حداقل هدف لمسی */
    padding: 0 var(--sp-4);
    background: var(--footer-800);
    border: 1px solid var(--footer-line);
    border-radius: 999px;
    color: var(--ink-300);
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 600;
    transition: border-color .2s var(--ease-out-quart), background-color .2s var(--ease-out-quart), color .2s var(--ease-out-quart), translate .25s var(--ease-out-expo);
}

    .footer-social-pill i {
        color: var(--gold-500);
        font-size: 1rem;
        line-height: 1;
    }

    .footer-social-pill img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .footer-social-pill:hover,
    .footer-social-pill:focus-visible {
        border-color: var(--gold-500);
        background: var(--footer-700);
        color: var(--ink-100);
        translate: 0 -2px;
    }

    .footer-social-pill:focus-visible {
        outline: 2px solid var(--gold-500);
        outline-offset: 3px;
    }

/* ===================== نوار پایانی ===================== */
.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-4) var(--sp-8);
    align-items: center;
    padding-block: var(--sp-6) var(--sp-8);
    border-top: 1px solid var(--footer-line);
}

.footer-legal {
    margin: 0;
    max-width: 72ch;
    font-size: .75rem;
    line-height: 2;
    color: var(--ink-500);
    text-wrap: pretty;
}

    .footer-legal strong {
        color: var(--ink-400);
        font-weight: 600;
    }

    .footer-legal span {
        font-variant-numeric: tabular-nums;
    }

.footer-to-top {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    background: none;
    border: 1px solid var(--footer-line);
    color: var(--ink-400);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s var(--ease-out-quart), color .2s var(--ease-out-quart);
}

    .footer-to-top i {
        font-size: 1rem;
        line-height: 1;
        transition: translate .3s var(--ease-out-expo);
    }

    .footer-to-top:hover {
        border-color: var(--gold-500);
        color: var(--gold-300);
    }

        .footer-to-top:hover i {
            translate: 0 -3px;
        }

    .footer-to-top:focus-visible {
        outline: 2px solid var(--gold-500);
        outline-offset: 3px;
    }

/* ===================== واکنش‌گرایی ===================== */
@media (max-width: 1080px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12) var(--sp-8);
        padding-block: var(--sp-12) var(--sp-8);
    }

    .footer-brand,
    .footer-contact-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
        padding-block: var(--sp-8);
    }

    .footer-brand-text {
        max-width: none;
    }

    .footer-phone-primary {
        font-size: 1.3125rem;
    }

    /* در موبایل ستون‌های لینک جمع‌شو می‌شوند تا فوتر بی‌دلیل بلند نشود */
    .footer-collapse {
        border-block-end: 1px solid var(--footer-line-soft);
    }

        .footer-collapse .footer-col-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 0;
            padding-block: var(--sp-3);
            cursor: pointer;
        }

            .footer-collapse .footer-col-title::after {
                display: none;
            }

        .footer-collapse[open] .footer-col-title {
            margin-bottom: var(--sp-4);
        }

        .footer-collapse .footer-chevron {
            color: var(--ink-500);
            transition: rotate .3s var(--ease-out-expo);
        }

        .footer-collapse[open] .footer-chevron {
            rotate: 180deg;
        }

    .footer-bottom {
        grid-template-columns: 1fr;
        padding-block: var(--sp-6);
    }

    .footer-social-label {
        flex-basis: 100%;
        margin-inline-end: 0;
    }
}

/* در دسکتاپ details همیشه باز و غیرتعاملی است */
@media (min-width: 641px) {
    .footer-collapse > summary {
        display: block;
        list-style: none;
        pointer-events: none;
    }

        .footer-collapse > summary::-webkit-details-marker {
            display: none;
        }

    .footer-collapse .footer-chevron {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer *,
    .site-footer *::before {
        transition-duration: .01ms !important;
    }
}