/* ============================================================
   Design Tokens
   ============================================================ */
:root {
    --primary:        #7D019F;
    --primary-dark:   #5a0173;
    --primary-light:  #9f01c9;
    --accent:         #FED403;
    --success:        #10b981;
    --dark:           #0f172a;
    --dark-2:         #1e293b;
    --light:          #ffffff;
    --card-bg:        #ffffff;
    --text:           #1e293b;
    --text-muted:     #64748b;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow:     0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:  0 20px 60px rgba(0,0,0,.14);
    --shadow-glow: 0 0 30px rgba(125,1,159,.3);

    --radius:      12px;
    --radius-lg:   20px;
    --radius-full: 9999px;

    --ease:  cubic-bezier(.4,0,.2,1);
    --t-fast:  .2s var(--ease);
    --t-base:  .3s var(--ease);
    --t-slow:  .6s var(--ease);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keep every image inside its container on small screens.
   Without this, <img> tags rendered by markdown content (page
   descriptions etc.) load at their full natural width — e.g. a
   1030px-wide screenshot on a ~360px phone — which inflates the
   page width/height and breaks mobile scrolling. */
img { max-width: 100%; height: auto; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--light);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(125,1,159,.1);
    padding: .4rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background var(--t-base), box-shadow var(--t-base);
}

.navbar.scrolled {
    background: rgba(255,255,255,1);
    box-shadow: 0 4px 30px rgba(125,1,159,.15);
}

.navbar-brand {
    transition: transform var(--t-base), filter var(--t-base);
}
.navbar-brand:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(125,1,159,.6));
}

/* max-height (not height) so the logo shrinks proportionally on
   narrow phones where 248px would overflow the viewport */
.navbar-brand img { max-height: 62px; }

.nav-link {
    color: #7D019F !important;
    font-weight: 500;
    font-size: 0.84rem;
    padding: .3rem .55rem !important;
    border-radius: var(--radius);
    transition: color var(--t-fast), background var(--t-fast);
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 50%;
    width: 0; height: 2px;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--t-base);
    transform: translateX(-50%);
}
.nav-link:hover {
    color: var(--primary) !important;
    background: rgba(125,1,159,.08);
}
.nav-link:hover::after { width: 55%; }

/* User Dropdown & Login Button Spacing */
.navbar .btn-link.nav-link.me-3,
.navbar .dropdown {
    margin-right: 0.75rem !important;  /* Add spacing in LTR mode */
}

/* Language Switcher */
.language-switcher {
    display: flex;
    gap: .2rem;
    background: rgba(125,1,159,.08);
    border-radius: var(--radius-full);
    padding: .2rem;
}
.language-switcher button {
    color: rgba(125,1,159,.7);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: .28rem .55rem;
    border-radius: var(--radius-full);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--t-fast);
    text-decoration: none;
}
.language-switcher button:hover {
    color: var(--primary);
    background: rgba(125,1,159,.14);
}
.language-switcher button.active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(125,1,159,.4);
}

/* Language Dropdown Button */
.lang-btn {
    color: #7D019F !important;
    padding: .38rem .8rem !important;
    border-radius: var(--radius-full) !important;
    background: rgba(125,1,159,.08) !important;
    border: 1px solid rgba(125,1,159,.2) !important;
    font-size: .8rem;
    transition: all var(--t-fast) !important;
    line-height: 1.4;
}
.lang-btn:hover,
.lang-btn:focus,
.lang-btn[aria-expanded="true"] {
    background: rgba(125,1,159,.15) !important;
    color: #7D019F !important;
    border-color: rgba(125,1,159,.4) !important;
    box-shadow: none !important;
}
.lang-btn::after { margin-left: .2rem; }

/* Auth Buttons */
.btn-outline-light {
    border-color: rgba(125,1,159,.3) !important;
    color: rgba(125,1,159,.9) !important;
    transition: all var(--t-base) !important;
}
.btn-outline-light:hover {
    background: rgba(125,1,159,.14) !important;
    border-color: rgba(125,1,159,.55) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
}
.btn-outline-danger.btn-sm { transition: all var(--t-base) !important; }
.btn-outline-danger.btn-sm:hover { transform: translateY(-1px); }

/* ============================================================
   Hero Section
   ============================================================ */
.hero-section {
    position: relative;
    background: url("../images/hero-bg.b0b9f6944f92.jpg");
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;
    padding: 6rem 0;
    color: white;
    text-align: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

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

/* ============================================================
   Section Layout
   ============================================================ */
.section { padding: 2rem 0; }

h2.text-center.mb-5 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 3rem !important;
}
h2.text-center.mb-5::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 55px; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: var(--radius-full);
}

/* ============================================================
   Cards (General Bootstrap .card)
   ============================================================ */
.card {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow);
    transition: transform var(--t-base), box-shadow var(--t-base);
    background: var(--card-bg);
    overflow: hidden;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    border-radius: var(--radius-full) !important;
    font-weight: 600;
    padding: .55rem 1.4rem;
    transition: all var(--t-base) !important;
    position: relative;
    overflow: hidden;
}
/* Ripple */
.btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,.22);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: width .55s var(--ease), height .55s var(--ease), opacity .55s;
    opacity: 0;
}
.btn:active::after { width: 220px; height: 220px; opacity: 0; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(125,1,159,.38) !important;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(125,1,159,.52) !important;
}

.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(125,1,159,.3) !important;
}

.btn-outline-secondary:hover {
    transform: translateY(-2px);
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    border-radius: var(--radius-full) !important;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .3em .7em;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb-nav {
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    color: var(--text-muted);
}
.breadcrumb-nav a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--t-fast);
}
.breadcrumb-nav a:hover { color: var(--primary-dark); }

/* ============================================================
   Footer
   ============================================================ */
footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    color: rgba(255,255,255,.75);
    padding: 3rem 0;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
}
footer h5 { color: #fff; font-weight: 700; margin-bottom: .6rem; }
footer p  { color: rgba(255,255,255,.55); margin-bottom: 0; }

/* ============================================================
   Scroll-Reveal Animation Classes
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.from-left  { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px); }
.reveal.from-left.visible,
.reveal.from-right.visible { transform: translateX(0); }

/* Stagger helper — JS sets --i on each child (capped at 5 in animations.js) */
.stagger-reveal > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 40ms);
}
.stagger-reveal.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    border: none;
    border-radius: var(--radius) !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .hero-section { padding: 4rem 0; }
    .section { padding: 1.5rem 0; }
    h2.text-center.mb-5 { font-size: 1.65rem; }
}

/* ============================================================
   Per-language Font Families  (override Bootstrap vars + force inherit)
   ============================================================ */
html[lang="fa"] {
    --bs-body-font-family:    'IRANYekan', 'Vazirmatn', 'IRANSans', sans-serif;
    --bs-heading-font-family: 'IRANYekan', 'Vazirmatn', 'IRANSans', sans-serif;
    --bs-btn-font-family:     'IRANYekan', 'Vazirmatn', 'IRANSans', sans-serif;
    font-family: 'IRANYekan', 'Vazirmatn', 'IRANSans', sans-serif;
}
html[lang="ar"] {
    --bs-body-font-family:    'Tajawal', 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    --bs-heading-font-family: 'Tajawal', 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    --bs-btn-font-family:     'Tajawal', 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-family: 'Tajawal', 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}
html[lang="en"] {
    --bs-body-font-family:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-heading-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-btn-font-family:     system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Force all descendants to inherit the language font */
html[lang] *,
html[lang] *::before,
html[lang] *::after {
    font-family: inherit;
}

/* ============================================================
   Language Dropdown
   ============================================================ */
.lang-btn {
    color: rgba(255,255,255,.85) !important;
    padding: .38rem .8rem !important;
    border-radius: var(--radius-full) !important;
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    font-size: .8rem;
    transition: all var(--t-fast) !important;
    line-height: 1.4;
}
.lang-btn:hover,
.lang-btn:focus,
.lang-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.3) !important;
    box-shadow: none !important;
}
.lang-btn::after { margin-left: .2rem; }

.lang-code {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7D019F;
}

/* Navbar Toggler Icon - Purple Color */
.navbar-toggler {
    border-color: rgba(125,1,159,.3);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(125, 1, 159, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(125,1,159,.25);
}

.lang-menu {
    background: rgba(15,23,42,.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: var(--radius) !important;
    padding: .35rem !important;
    min-width: 160px;
    box-shadow: 0 16px 50px rgba(0,0,0,.5) !important;
}

.lang-item {
    color: rgba(255,255,255,.72) !important;
    border-radius: 8px !important;
    padding: .5rem .85rem !important;
    font-size: .875rem;
    display: flex !important;
    align-items: center;
    gap: .55rem;
    background: none !important;
    border: none !important;
    width: 100%;
    text-align: start;
    cursor: pointer;
    transition: all var(--t-fast) !important;
}
.lang-item:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}
.lang-item.active {
    color: #fff !important;
    background: rgba(99,102,241,.45) !important;
    font-weight: 600;
}
.lang-flag { font-size: 1.05rem; line-height: 1; }

/* ============================================================
   Card Carousel (arrow-navigated horizontal list)
   ============================================================ */
.card-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.carousel-track-wrap {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    /* Extra padding so card hover shadow/transform is not clipped */
    padding-top: .5rem;
    margin-top: -.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: -1.5rem;
}

.carousel-track {
    display: flex;
    gap: 1.1rem;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.carousel-item-card {
    flex: 0 0 220px;
    text-decoration: none;
}
.carousel-item-card .project-card { height: 100%; }

/* ── Arrow Buttons ────────────────────────────────────── */
.carousel-btn {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(99,102,241,.22);
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-base), color var(--t-base),
                border-color var(--t-base), box-shadow var(--t-base),
                transform var(--t-fast), opacity var(--t-base);
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    z-index: 2;
    padding: 0;
}
.carousel-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 22px rgba(99,102,241,.4);
    transform: scale(1.1);
}
.carousel-btn:disabled {
    opacity: .28;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

/* RTL: flip chevron icons so they point in the correct visual direction.
   In RTL flex the prev btn (‹) ends up on the right, next (›) on the left,
   so we mirror the SVGs to match the direction of travel. */
[dir="rtl"] .carousel-btn svg {
    transform: scaleX(-1);
}

/* ── Centered mode (< 5 items: no arrows, items wrap-centred) ── */
.card-carousel.carousel--centered {
    gap: 0;
}
.card-carousel.carousel--centered .carousel-btn {
    display: none !important;
}
.card-carousel.carousel--centered .carousel-track-wrap {
    overflow: visible;
}
.card-carousel.carousel--centered .carousel-track {
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
    transition: none !important;
    width: 100%;
}

/* ============================================================
   Hero Logo (bigger)
   ============================================================ */
.hero-logo { max-width: 300px !important; }