/* ==========================================================================
   شركة السلامة للتطوير العقاري والمقاولات - تحسينات التصميم والتجاوب 100%
   ALSALAMAH Real Estate & Contracting - Design Enhancements & Responsive UX
   ========================================================================== */

/* --- 1. الأساسيات والتحسينات اللمسية والشاشات والخطوط --- */
html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
}

body {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "IBM Plex Sans Arabic", "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
    letter-spacing: -0.015em;
}

/* شريط التمرير المخصص المتناسق */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f7f7f5;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #f7f7f5;
}

::-webkit-scrollbar-thumb:hover {
    background: #f6932d;
}

/* --- 2. الهيدر والشعار والقائمة --- */
.site-header-logo {
    min-width: 0;
}

.site-header-logo-img {
    display: block;
    width: auto;
    height: 42px;
    max-width: 220px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.site-header-logo:hover .site-header-logo-img {
    transform: scale(1.02);
}

.site-footer-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 190px;
    max-height: 76px;
    object-fit: contain;
}

.site-footer-logo-card {
    width: fit-content;
    padding: 0.875rem 1rem;
    border-radius: 14px;
    background: #f7f7f5;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.site-footer-logo-card:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- 3. تحسينات الهيرو والتجاوب الميداني --- */
@media (max-width: 640px) {
    .site-header-logo-img {
        height: 36px;
        max-width: 175px;
    }
}

@media (max-width: 1023px) {
    .mobile-hero-image-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(33, 42, 55, 0.08) 0%,
                rgba(33, 42, 55, 0.15) 22%,
                rgba(33, 42, 55, 0.35) 34%,
                rgba(33, 42, 55, 0.88) 45%,
                rgba(33, 42, 55, 0.96) 65%,
                rgba(33, 42, 55, 0.98) 100%
            ) !important;
    }
    
    /* القائمة الجانبية ولوحات السحب في الهواتف */
    .mobile-menu-panel,
    #mobileFiltersPanel {
        will-change: transform;
        transform: translate3d(0, 100%, 0);
        transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
        touch-action: pan-y;
    }

    #mobileMenu.visible .mobile-menu-panel,
    #mobileFiltersSheet.visible #mobileFiltersPanel {
        transform: translate3d(0, 0, 0);
    }

    .mobile-menu-panel.is-dragging,
    #mobileFiltersPanel.is-dragging {
        transition: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}

@media (min-width: 1024px) {
    .home-hero-desktop-shell {
        padding-top: 3.5rem;
    }

    .home-hero-desktop-image {
        aspect-ratio: 16 / 11;
    }

    .site-nav-link {
        overflow: hidden;
        transform: translateY(0);
    }

    .site-nav-link::after {
        content: "";
        position: absolute;
        right: 1rem;
        left: 1rem;
        bottom: 0;
        height: 2.5px;
        border-radius: 999px;
        background: #f6932d;
        transform: scaleX(0);
        transform-origin: right center;
        opacity: 0.95;
        transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .site-nav-link:hover,
    .site-nav-link:focus-visible {
        transform: translateY(-1px);
    }

    .site-nav-link:hover::after,
    .site-nav-link:focus-visible::after {
        transform: scaleX(1);
    }

    .site-nav-active-line {
        animation: siteNavActiveIn 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .als-projects-filter-bar {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .als-projects-filter-shell {
        align-items: center;
    }

    .als-projects-filter-controls {
        flex: 1 1 auto;
        overflow: visible;
        white-space: nowrap;
    }

    .als-projects-category-tabs {
        flex: 0 1 auto;
        min-width: 0;
        gap: 0.25rem;
    }

    .als-projects-category-button {
        flex: 0 1 auto;
        white-space: nowrap;
        padding-inline: 0.85rem !important;
    }

    .als-projects-filter-select {
        flex: 0 0 auto;
        width: auto;
        min-width: 9.25rem;
        max-width: 10.75rem;
        white-space: nowrap;
        padding-inline: 0.85rem !important;
    }

    .als-projects-view-tools {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* --- 4. لمسات التفاعل الدقيقة والحيوية للمشاريع والبطاقات --- */
.als-card-hover {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.als-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -6px rgba(33, 42, 55, 0.12), 0 4px 10px -2px rgba(33, 42, 55, 0.05);
}

/* تكبير ناعم للصور عند التمرير */
.als-image-zoom-container {
    overflow: hidden;
}

.als-image-zoom-container img {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.als-card-hover:hover .als-image-zoom-container img,
.group:hover .als-image-zoom-container img {
    transform: scale(1.05);
}

/* --- 5. استجابة أشرطة الفلترة والبطاقات على أجهزة مختلفة --- */
@media (min-width: 1024px) and (max-width: 1280px) {
    .als-projects-filter-shell {
        gap: 0.625rem;
    }

    .als-projects-filter-controls {
        gap: 0.5rem;
    }

    .als-projects-category-button {
        font-size: 0.8125rem;
        padding-inline: 0.65rem !important;
    }

    .als-projects-filter-select {
        min-width: 8.25rem;
        max-width: 9.5rem;
        font-size: 0.8125rem;
        padding-inline: 0.65rem !important;
    }
}

/* الشاشات الكبيرة والعملاقة 1920px+ */
@media (min-width: 1920px) {
    .max-w-7xl {
        max-width: 1536px !important;
    }
    
    body {
        font-size: 1.05rem;
    }
}

/* أجهزة الهواتف الصغيرة جداً (320px - 380px) */
@media (max-width: 380px) {
    .px-4 {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    h1 {
        font-size: 1.65rem !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }
}

/* --- 6. أنيميشن ودعم إمكانية الوصول --- */
/* --- 6. حالات الواجهات المنبثقة وإدارة التمرير --- */
body.site-menu-open,
body.projects-filters-open,
body.project-gallery-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.site-menu-open #siteHeader {
    z-index: 30;
    transition-property: background-color, border-color, box-shadow, backdrop-filter;
}

.mobile-menu-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: #f7f7f5;
    color: #212a37;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.mobile-menu-close-button:active {
    transform: scale(0.92);
}

.mobile-sheet-drag-zone {
    cursor: grab;
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-sheet-drag-zone:active,
.is-dragging .mobile-sheet-drag-zone {
    cursor: grabbing;
}

.mobile-sheet-handle-wrap {
    cursor: grab;
    touch-action: none !important;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

.mobile-sheet-handle {
    width: 46px;
    height: 5.5px;
    border-radius: 9999px;
    background-color: #cbd5e1;
    transition: background-color 200ms ease, width 200ms ease, transform 200ms ease;
}

.mobile-sheet-drag-zone:hover .mobile-sheet-handle,
.mobile-sheet-drag-zone:active .mobile-sheet-handle,
.is-dragging .mobile-sheet-handle {
    background-color: #f6932d;
    width: 56px;
}

.mobile-sheet-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-backdrop,
#mobileFiltersBackdrop {
    transition: opacity 300ms ease;
    will-change: opacity;
}

.mobile-menu-backdrop.is-dragging,
#mobileFiltersBackdrop.is-dragging {
    transition: none !important;
}

#mobileMenu[aria-hidden="false"],
#mobileFiltersSheet[aria-hidden="false"] {
    overscroll-behavior: contain;
}

@media (max-width: 1023px) {
    #mobileMenu .mobile-menu-panel,
    #mobileFiltersPanel {
        display: flex;
        flex-direction: column;
        max-height: min(90dvh, 46rem) !important;
    }

    #mobileMenu .mobile-menu-panel > .mobile-sheet-content,
    #mobileFiltersPanel > .mobile-sheet-content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overscroll-behavior: contain;
    }

    #mobileMenu .mobile-menu-panel > div:last-child,
    #mobileFiltersPanel > div:last-child {
        flex: 0 0 auto;
    }
}

/* رابط التخطي يبقى مرئياً وقابلاً للاستخدام عند انتقال التركيز إليه. */
body > a[href="#main-content"].sr-only:focus,
body > a[href="#main-content"].sr-only:focus-visible {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 200 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    border-radius: 0.65rem !important;
    background: #212a37 !important;
    color: #ffffff !important;
    outline-color: #f6932d !important;
}

/* مؤشر تركيز عالي التباين مع حلقة ثانوية من لون الهوية. */
:focus-visible {
    outline: 3px solid #212a37 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(246, 147, 45, 0.48) !important;
    transition-property: color, background-color, border-color, transform, opacity !important;
}

.input-field:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #212a37 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(246, 147, 45, 0.42) !important;
}

.site-footer a:focus-visible,
.project-lightbox__thumbnail:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 5px #f6932d !important;
}

.btn-accent,
.btn-accent:hover,
.btn-primary:hover {
    background-color: #f6932d !important;
    color: #212a37 !important;
}

.page-services .group:hover [class~="group-hover:bg-[#f6932d]"] .text-white {
    color: #212a37 !important;
}

main nav[aria-label^="مسار"] a:hover,
main nav[aria-label^="مسار"] a:focus-visible {
    color: #212a37 !important;
    text-decoration: underline;
    text-decoration-color: #f6932d;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
}

main nav[aria-label^="مسار"] a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

#gridViewButton,
#listViewButton,
#desktopGridViewButton,
#desktopListViewButton,
#mobileFiltersClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

[data-mobile-filter] {
    min-height: 2.75rem;
}

/* --- 7. بطاقات المشاريع وعرض القائمة الحقيقي --- */
#projectsGrid {
    align-items: start;
}

#projectsGrid .project-card,
#projectsGrid .project-card > div:last-child,
.project-card h3,
.project-card > div:last-child > div,
.project-card > div:last-child > div > span {
    min-width: 0;
}

.project-card h3,
.project-card > div:last-child > div > span {
    overflow-wrap: anywhere;
}

.project-card > div:last-child > div {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.project-card > div:last-child > span:first-child {
    color: #212a37 !important;
    border-bottom: 2px solid #f6932d;
}

.project-card:hover h3,
.project-card:focus-visible h3,
.project-card:active h3 {
    color: #212a37 !important;
    text-decoration: underline;
    text-decoration-color: #f6932d;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.project-card .bg-\[\#f6932d\],
.project-card .bg-emerald-500\/90 {
    color: #212a37 !important;
}

.bg-\[\#f6932d\].text-white,
.hover\:bg-\[\#f6932d\]:hover,
.active\:bg-\[\#f6932d\]:active {
    color: #212a37 !important;
}

.bg-\[\#f6932d\] > .bg-white {
    background-color: #212a37 !important;
}

.site-nav-link.text-\[\#f6932d\] {
    color: #212a37 !important;
}

#projectsGrid.projects-grid--list {
    grid-template-columns: minmax(0, 1fr) !important;
}

#projectsGrid.projects-grid--list .project-card {
    display: grid;
    grid-template-columns: minmax(104px, 34%) minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
}

#projectsGrid.projects-grid--list .project-card[hidden] {
    display: none !important;
}

#projectsGrid.projects-grid--list .project-card > div:first-child {
    aspect-ratio: auto !important;
    min-height: 100%;
    height: 100%;
}

#projectsGrid.projects-grid--list .project-card > div:last-child {
    align-self: center;
    padding: 0.875rem !important;
}

#projectsGrid.projects-grid--list .project-card h3 {
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

#projectsGrid.projects-grid--list .project-card > div:last-child > div {
    column-gap: 0.75rem;
    font-size: 0.75rem;
}

.page-index .snap-x > .snap-start {
    flex: 0 0 min(280px, calc(100vw - 40px));
    width: min(280px, calc(100vw - 40px));
    min-width: 0;
}

.page-index .snap-x > .snap-start > .project-card {
    display: block;
    width: 100%;
}

.page-project-details .snap-x > .snap-start {
    width: min(280px, calc(100vw - 40px)) !important;
}

@media (min-width: 640px) {
    #projectsGrid.projects-grid--list .project-card {
        grid-template-columns: minmax(210px, 30%) minmax(0, 1fr);
    }

    #projectsGrid.projects-grid--list .project-card > div:first-child {
        min-height: 170px;
    }

    #projectsGrid.projects-grid--list .project-card > div:last-child {
        padding: 1.25rem !important;
    }

    #projectsGrid.projects-grid--list .project-card h3 {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    #projectsGrid.projects-grid--list .project-card {
        grid-template-columns: minmax(290px, 28%) minmax(0, 1fr);
    }

    #projectsGrid.projects-grid--list .project-card > div:first-child {
        min-height: 190px;
    }

    #projectsGrid.projects-grid--list .project-card > div:last-child {
        padding: 1.5rem !important;
    }

    #projectsGrid.projects-grid--list .project-card h3 {
        font-size: 1.25rem;
    }
}

@media (min-width: 1920px) {
    #projectsGrid.projects-grid--list .project-card {
        grid-template-columns: 360px minmax(0, 1fr);
    }
}

/* --- 8. معرض المشروع وصندوق العرض الكامل --- */
.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.project-gallery-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(33, 42, 55, 0.16);
    border-radius: 0.875rem;
    background: #212a37;
    box-shadow: 0 4px 14px rgba(33, 42, 55, 0.08);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.project-gallery-item__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #212a37;
}

.project-gallery-item__number {
    position: absolute;
    inset-inline-end: 0.625rem;
    bottom: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    background: rgba(33, 42, 55, 0.88);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

@media (hover: hover) {
    .project-gallery-item:hover {
        transform: translateY(-3px);
        border-color: #f6932d;
        box-shadow: 0 12px 26px rgba(33, 42, 55, 0.16);
    }

    .project-contact-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(246, 147, 45, 0.28);
    }
}

@media (min-width: 640px) {
    .project-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .project-gallery-grid {
        gap: 1rem;
    }

    .project-gallery-grid--even {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.project-contact-cta {
    box-shadow: 0 8px 18px rgba(246, 147, 45, 0.2);
}

.project-lightbox[hidden] {
    display: none !important;
}

.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    color: #ffffff;
}

.project-lightbox__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 42, 55, 0.94);
    cursor: zoom-out;
}

.project-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(74rem, 100%);
    height: min(92dvh, 56rem);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    background: #212a37;
    box-shadow: 0 24px 70px rgba(33, 42, 55, 0.45);
    animation: projectLightboxEnter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.project-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.project-lightbox__title {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-lightbox__counter {
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.75rem;
}

.project-lightbox__close,
.project-lightbox__control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: #ffffff;
    color: #212a37;
    box-shadow: 0 4px 14px rgba(33, 42, 55, 0.22);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.project-lightbox__stage {
    position: relative;
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #212a37;
    touch-action: pan-y;
}

.project-lightbox__image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    object-fit: contain;
    opacity: 1;
    transition: opacity 150ms ease;
}

.project-lightbox__image.is-loading {
    opacity: 0.42;
}

.project-lightbox__control {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

.project-lightbox__control--previous {
    right: 0.65rem;
}

.project-lightbox__control--next {
    left: 0.65rem;
}

.project-lightbox__thumbnails {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    scrollbar-color: #f6932d #212a37;
    scroll-snap-type: x proximity;
}

.project-lightbox__thumbnail {
    flex: 0 0 4.25rem;
    width: 4.25rem;
    height: 3.35rem;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 0.65rem;
    background: #212a37;
    opacity: 0.66;
    scroll-snap-align: center;
    transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.project-lightbox__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #212a37;
}

.project-lightbox__thumbnail.is-current,
.project-lightbox__thumbnail[aria-pressed="true"] {
    border-color: #f6932d;
    opacity: 1;
}

@media (hover: hover) {
    .project-lightbox__close:hover,
    .project-lightbox__control:hover {
        transform: scale(1.06);
        box-shadow: 0 7px 18px rgba(33, 42, 55, 0.3);
    }

    .project-lightbox__control:hover {
        transform: translateY(-50%) scale(1.06);
    }

    .project-lightbox__thumbnail:hover {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@media (max-width: 480px) {
    .project-lightbox {
        padding: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left));
    }

    .project-lightbox__dialog {
        width: 100%;
        height: calc(100dvh - 0.8rem);
        border-radius: 1rem;
    }

    .project-lightbox__control {
        width: 2.55rem;
        height: 2.55rem;
    }

    .project-lightbox__control--previous {
        right: 0.4rem;
    }

    .project-lightbox__control--next {
        left: 0.4rem;
    }
}

@keyframes projectLightboxEnter {
    from {
        opacity: 0;
        transform: scale(0.975) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- 9. تذييل أكثر اختصاراً ووضوحاً على الهاتف --- */
.site-footer-email {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .site-footer-grid {
        gap: 1.75rem !important;
        padding-block: 2rem !important;
    }

    .site-footer-logo-card {
        margin-bottom: 1rem !important;
        padding: 0.65rem 0.8rem;
    }

    .site-footer-logo-img {
        max-width: 164px;
        max-height: 52px;
    }

    .site-footer-summary {
        max-width: 38rem;
        margin-bottom: 0 !important;
    }

    .site-footer-services {
        display: none;
    }

    .site-footer h2,
    .site-footer h3 {
        margin-bottom: 1rem !important;
    }

    .site-footer-nav ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem 0.75rem;
    }

    .site-footer-nav ul > li,
    .site-footer-contact ul > li {
        margin-top: 0 !important;
    }

    .site-footer-nav a {
        min-height: 2.75rem;
    }

    .site-footer-contact a {
        min-height: 2.75rem;
        align-items: center;
    }

    .site-footer-contact ul {
        display: grid;
        gap: 0.65rem;
    }

    .site-footer-bottom {
        padding-block: 1.25rem !important;
        text-align: center;
    }

    .site-footer-bottom-links {
        display: none;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .site-footer-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }
}

/* --- 10. الحركة ودعم إمكانية الوصول --- */
@keyframes siteNavActiveIn {
    from {
        transform: scaleX(0.35);
        opacity: 0.35;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}