﻿/* ==========================================
   MAIN CSS
   مؤسسة الأمانة الثمينة للحراسات الأمنية
   ========================================== */


/* ==========================================
   1. الملفات الأساسية
   ========================================== */

@import url('site.css');
@import url('header.css');
@import url('privacy.css');
@import url('footer.css');
@import url('services-page.css');


/* ==========================================
   2. ملفات الأقسام
   ========================================== */

@import url('hero.css');
@import url('services.css');
@import url('about.css');
@import url('why-us.css');
@import url('statistics.css');
@import url('clients.css');
@import url('cta.css');
@import url('gallery.css');


/* ==========================================
   3. ملفات المكونات
   ========================================== */

@import url('backtotop.css');
@import url('animations.css');


/* ==========================================
   الهوية البصرية
   مؤسسة الأمانة الثمينة للحراسات الأمنية
   ========================================== */

:root {
    /* اللون الأساسي - أزرق مياه البحر */
    --amana-primary: #008FA3;
    /* أزرق داكن */
    --amana-dark: #006F82;
    /* أزرق فاتح */
    --amana-light: #00AFC1;
    /* أزرق شديد الفتح */
    --amana-soft: #E8F8FA;
    /* الأبيض */
    --amana-white: #FFFFFF;
    /* النص الداكن */
    --amana-text-dark: #073B47;
    /* النص الرمادي */
    --amana-text: #5F6B72;
    /* الحدود */
    --amana-border: rgba(0,143,163,.15);
    /* ظل */
    --amana-shadow: rgba(0,90,110,.15);
}


/* ==========================================
   تحسينات إضافية للـ SEO والأداء
   ========================================== */


/* ==========================================
   SKIP LINK
   ========================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--amana-primary);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 10000;
    font-weight: 700;
    text-decoration: none;
    transition: top .3s ease;
}

    .skip-link:focus {
        top: 20px;
    }


/* ==========================================
   BREADCRUMB WRAPPER
   ========================================== */

.breadcrumb-wrapper {
    background: #F7FCFD;
    padding: 12px 0;
    border-bottom: 1px solid #E2F0F2;
    margin-top: 76px;
}


/* ==========================================
   BREADCRUMB
   ========================================== */

.breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}

.breadcrumb-item a {
    color: var(--amana-primary);
    text-decoration: none;
    transition: .3s;
}

    .breadcrumb-item a:hover {
        color: var(--amana-dark);
        text-decoration: underline;
    }

.breadcrumb-item.active {
    color: #6C757D;
}


/* ==========================================
   VISUALLY HIDDEN
   ========================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}


/* ==========================================
   تحسين الصور
   ========================================== */

img,
video {
    width: 100%;
    height: auto;
    max-width: 100%;
}


/* ==========================================
   تحسينات عامة للروابط
   ========================================== */

a {
    transition: color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}


/* ==========================================
   تحسينات للجوال
   ========================================== */

@media (max-width: 768px) {

    .breadcrumb-wrapper {
        margin-top: 60px;
    }
}


/* ==========================================
   تحسين الطباعة
   ========================================== */

@media print {

    .skip-link,
    .breadcrumb-wrapper,
    .back-to-top,
    .whatsapp-btn {
        display: none !important;
    }
}
