/* =========================================
   COLOR PALETTE (based on logo)
========================================= */

:root {
    --amr-primary: #00AEEF;
    --amr-primary-dark: #0084C7;
    --amr-primary-soft: #E3F6FF;
    --amr-accent: #00CFFF;
    /* Bootstrap primary override to match logo */
    --bs-primary: var(--amr-primary);
    --bs-primary-rgb: 0, 174, 239;
}

[data-bs-theme="dark"] {
    --amr-primary-soft: rgba(0, 174, 239, 0.15);
}

/* =========================================
   GLOBAL
========================================= */

body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* خلفية mesh / gradient */
.gradient-bg {
    pointer-events: none;
    background: radial-gradient(circle at 0% 0%, rgba(0, 207, 255, 0.16), transparent 55%), radial-gradient(circle at 100% 0%, rgba(0, 174, 239, 0.14), transparent 55%), radial-gradient(circle at 0% 100%, rgba(0, 174, 239, 0.10), transparent 55%), radial-gradient(circle at 100% 100%, rgba(227, 246, 255, 0.9), transparent 60%);
    z-index: 0;
}

/* المحتوى فوق الخلفية */
main {
    z-index: 1;
}

/* =========================================
   GENERIC SECTIONS
========================================= */

.section-block {
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 600;
}

.section-subtitle {
    font-size: 0.95rem;
    color: var(--bs-secondary);
}

/* Simple timeline (shared) */
.timeline {
    border-left: 2px solid rgba(108, 117, 125, .4);
    margin-left: 0.5rem;
    padding-left: 1.5rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.75rem;
}

.timeline-badge {
    position: absolute;
    left: -1.8rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: var(--bs-primary);
}

.timeline-content {
    padding-left: 0.25rem;
}

/* =========================================
   BRAND LOGO
========================================= */

.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 14px;
}

/* =========================================
   NAVBAR (navbar-portfolio)
========================================= */

/* Header Transparent / Scroll */
.portfolio-header {
    transition: background-color .25s ease, box-shadow .25s ease;
    will-change: background-color, box-shadow;
}

.navbar-portfolio {
    background: transparent !important;
}

/* يُضاف عند السكروول من JS */
.navbar-scrolled {
    background: var(--bs-body-bg) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* CENTER ALIGN ICONS */
.nav-link .nav-icon {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ACTIVE STATE */
.nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

    .nav-link.active .nav-icon {
        color: var(--bs-primary) !important;
    }

/* =========================================
   FOOTER
========================================= */

.footer-portfolio {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.footer-text {
    color: var(--bs-body-color);
}

.footer-link {
    color: var(--bs-body-color);
    text-decoration: none;
}

    .footer-link:hover {
        color: var(--bs-primary);
    }

.footer-separator {
    color: var(--bs-secondary);
}

/* =========================================
   MOBILE OPTIMIZATION
========================================= */

@media (max-width: 767.98px) {
    /* Navbar always solid on mobile */
    .navbar-portfolio {
        background: var(--bs-body-bg) !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    .portfolio-header {
        background: var(--bs-body-bg) !important;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }
}