/*
 * nexus.css  →  Zahwah Global custom stylesheet
 * Extends Bootstrap 5.3 with brand-specific utilities, components, and RTL overrides.
 *
 * Colour palette
 * ─────────────────────────────────────────────
 *  --zg-primary  : #1a2744  Deep navy   (trust, authority)
 *  --zg-accent   : #C9A84C  UAE gold    (luxury, Dubai)
 *  --zg-dark     : #0f1e3a  Near-black  (dark sections)
 *  --zg-light    : #f8fafc  Off-white   (light sections)
 *  --zg-card     : #ffffff  Card bg
 *  --zg-muted    : #6b7a99  Muted text
 */

/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (design tokens)
════════════════════════════════════════════════════════ */
:root {
    --zg-primary      : #1a2744;
    --zg-accent       : #C9A84C;
    --zg-accent-light : #E8C56A;
    --zg-dark         : #0f1e3a;
    --zg-light        : #f8fafc;
    --zg-card         : #ffffff;
    --zg-muted        : #6b7a99;
    --zg-border       : #e2e8f0;
    --zg-shadow       : 0 4px 24px rgba(26, 39, 68, 0.08);
    --zg-shadow-hover : 0 8px 32px rgba(26, 39, 68, 0.16);
    --zg-radius       : 0.75rem;
    --zg-transition   : 0.25s ease;
}

/* ═══════════════════════════════════════════════════════
   UTILITY — BACKGROUNDS
════════════════════════════════════════════════════════ */
.bg-nexus-primary  { background-color: var(--zg-primary) !important; }
.bg-nexus-dark     { background-color: var(--zg-dark)    !important; }
.bg-nexus-light    { background-color: var(--zg-light)   !important; }
.bg-nexus-card     { background-color: var(--zg-card)    !important; }
.bg-nexus-accent   { background-color: var(--zg-accent)  !important; }

/* ═══════════════════════════════════════════════════════
   UTILITY — TEXT
════════════════════════════════════════════════════════ */
.text-nexus-primary { color: var(--zg-primary) !important; }
.text-nexus-accent  { color: var(--zg-accent)  !important; }
.text-nexus-muted   { color: var(--zg-muted)   !important; }
.text-white-75      { color: rgba(255, 255, 255, 0.75) !important; }

/* ═══════════════════════════════════════════════════════
   UTILITY — SPACING  (Bootstrap only ships py-0–5; add py-6)
════════════════════════════════════════════════════════ */
.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.pt-6 { padding-top:  5rem !important; }
.pb-6 { padding-bottom: 5rem !important; }

/* ═══════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════ */
.btn-nexus-primary {
    background-color : var(--zg-primary);
    color            : #fff;
    border           : 2px solid var(--zg-primary);
    border-radius    : var(--zg-radius);
    font-weight      : 600;
    transition       : background-color var(--zg-transition), transform var(--zg-transition), box-shadow var(--zg-transition);
}
.btn-nexus-primary:hover,
.btn-nexus-primary:focus {
    background-color : #243561;
    border-color     : #243561;
    color            : #fff;
    transform        : translateY(-2px);
    box-shadow       : var(--zg-shadow-hover);
}

.btn-nexus-accent {
    background-color : var(--zg-accent);
    color            : var(--zg-dark);
    border           : 2px solid var(--zg-accent);
    border-radius    : var(--zg-radius);
    font-weight      : 700;
    transition       : background-color var(--zg-transition), transform var(--zg-transition), box-shadow var(--zg-transition);
}
.btn-nexus-accent:hover,
.btn-nexus-accent:focus {
    background-color : var(--zg-accent-light);
    border-color     : var(--zg-accent-light);
    color            : var(--zg-dark);
    transform        : translateY(-2px);
    box-shadow       : var(--zg-shadow-hover);
}

/* Outline gold variant */
.btn-outline-nexus-accent {
    border     : 2px solid var(--zg-accent);
    color      : var(--zg-accent);
    border-radius : var(--zg-radius);
    font-weight: 600;
    transition : all var(--zg-transition);
}
.btn-outline-nexus-accent:hover {
    background-color : var(--zg-accent);
    color            : var(--zg-dark);
}

/* ═══════════════════════════════════════════════════════
   DIVIDERS
════════════════════════════════════════════════════════ */
.nexus-divider {
    width      : 56px;
    height     : 3px;
    background : linear-gradient(90deg, var(--zg-accent), var(--zg-accent-light));
    border     : none;
    border-radius : 2px;
    margin     : 0.75rem 0 1.5rem;
}

/* ═══════════════════════════════════════════════════════
   PAGE HERO — full-width top sections
════════════════════════════════════════════════════════ */
.page-hero {
    position         : relative;
    overflow         : hidden;
    background-image : linear-gradient(135deg, var(--zg-dark) 0%, var(--zg-primary) 60%, #243561 100%);
}
.page-hero::before {
    /* subtle geometric pattern overlay */
    content          : '';
    position         : absolute;
    inset            : 0;
    background-image : radial-gradient(circle at 80% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 60%);
    pointer-events   : none;
}

/* Breadcrumb on dark backgrounds */
.breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
    color : rgba(255,255,255,0.4);
}
.breadcrumb-light .breadcrumb-item.active {
    color : var(--zg-accent);
}

/* ═══════════════════════════════════════════════════════
   HOME HERO
════════════════════════════════════════════════════════ */
.hero-section {
    min-height       : 100vh;
    display          : flex;
    align-items      : center;
    background-image : linear-gradient(135deg, var(--zg-dark) 0%, var(--zg-primary) 55%, #1e3060 100%);
    position         : relative;
    overflow         : hidden;
}
.hero-section::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : radial-gradient(ellipse at 75% 50%, rgba(201,168,76,.18) 0%, transparent 65%);
    pointer-events : none;
}

/* Hero image (replaces animated circles) */
.hero-img {
    width         : 100%;
    max-height    : 440px;
    object-fit    : cover;
    border-radius : var(--zg-radius);
    box-shadow    : 0 24px 64px rgba(0, 0, 0, 0.35);
    display       : block;
}

/* Keep keyframe in case other pages use it */
@keyframes pulse-ring {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.04); opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════
   SERVICE CARDS
════════════════════════════════════════════════════════ */
.service-card {
    border        : 1px solid var(--zg-border);
    border-radius : var(--zg-radius);
    background    : var(--zg-card);
    transition    : transform var(--zg-transition), box-shadow var(--zg-transition), border-color var(--zg-transition);
    overflow      : hidden;
}
.service-card:hover {
    transform    : translateY(-6px);
    box-shadow   : var(--zg-shadow-hover);
    border-color : var(--zg-accent);
}
.service-card .service-icon {
    width         : 64px;
    height        : 64px;
    border-radius : 50%;
    background    : rgba(201,168,76,.12);
    display       : flex;
    align-items   : center;
    justify-content : center;
    font-size     : 1.75rem;
    color         : var(--zg-accent);
    margin-bottom : 1rem;
    transition    : background var(--zg-transition);
}
.service-card:hover .service-icon {
    background : rgba(201,168,76,.22);
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIAL CARDS
════════════════════════════════════════════════════════ */
.testimonial-card {
    border-left  : 4px solid var(--zg-accent);
    border-radius: 0 var(--zg-radius) var(--zg-radius) 0;
    background   : var(--zg-card);
    box-shadow   : var(--zg-shadow);
    padding      : 1.75rem;
}
[dir="rtl"] .testimonial-card {
    border-left  : none;
    border-right : 4px solid var(--zg-accent);
    border-radius: var(--zg-radius) 0 0 var(--zg-radius);
}

/* ═══════════════════════════════════════════════════════
   TEAM CARDS
════════════════════════════════════════════════════════ */
.team-card {
    text-align   : center;
    border        : 1px solid var(--zg-border);
    border-radius : var(--zg-radius);
    transition    : box-shadow var(--zg-transition), transform var(--zg-transition);
}
.team-card:hover {
    box-shadow : var(--zg-shadow-hover);
    transform  : translateY(-4px);
}
.team-avatar {
    width         : 96px;
    height        : 96px;
    border-radius : 50%;
    background    : linear-gradient(135deg, var(--zg-primary), #243561);
    display       : flex;
    align-items   : center;
    justify-content : center;
    font-size     : 2.25rem;
    color         : var(--zg-accent);
    margin        : 0 auto 1rem;
    border        : 3px solid rgba(201,168,76,.3);
}

/* ═══════════════════════════════════════════════════════
   WHY US SECTION — icon wrapper
════════════════════════════════════════════════════════ */
.why-icon-wrap {
    width         : 80px;
    height        : 80px;
    border-radius : 50%;
    background    : linear-gradient(135deg, var(--zg-primary), #243561);
    display       : flex;
    align-items   : center;
    justify-content : center;
    font-size     : 2rem;
    color         : var(--zg-accent);
    margin        : 0 auto 1.25rem;
    box-shadow    : 0 4px 16px rgba(26,39,68,.25);
}

/* Why Us cards (dark section) */
.why-us-card {
    background   : rgba(255, 255, 255, 0.05);
    border       : 1px solid rgba(201, 168, 76, 0.18);
    transition   : background var(--zg-transition), border-color var(--zg-transition), transform var(--zg-transition);
}
.why-us-card:hover {
    background   : rgba(201, 168, 76, 0.10);
    border-color : rgba(201, 168, 76, 0.45);
    transform    : translateY(-4px);
}

/* ═══════════════════════════════════════════════════════
   CTA BANNERS
════════════════════════════════════════════════════════ */
.cta-banner {
    background    : linear-gradient(135deg, var(--zg-dark), var(--zg-primary));
    border-radius : var(--zg-radius);
    position      : relative;
    overflow      : hidden;
}
.cta-banner::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.15) 0%, transparent 65%);
    pointer-events : none;
}
.cta-inline {
    background    : var(--zg-light);
    border-radius : var(--zg-radius);
    border        : 1px solid var(--zg-border);
    padding       : 2rem;
}

/* ═══════════════════════════════════════════════════════
   CASE STUDY CARDS
════════════════════════════════════════════════════════ */
.case-study-card {
    border-top    : 3px solid var(--zg-accent);
    border-radius : 0 0 var(--zg-radius) var(--zg-radius);
    background    : var(--zg-card);
    box-shadow    : var(--zg-shadow);
    transition    : box-shadow var(--zg-transition);
    padding       : 1.5rem;
}
.case-study-card:hover {
    box-shadow : var(--zg-shadow-hover);
}
.case-number {
    font-size   : 2.5rem;
    font-weight : 800;
    color       : rgba(201,168,76,.18);
    line-height : 1;
}
.success-story-card {
    border-radius : var(--zg-radius);
    background    : var(--zg-light);
    border        : 1px solid var(--zg-border);
    padding       : 1.5rem;
    transition    : box-shadow var(--zg-transition), transform var(--zg-transition);
}
.success-story-card:hover {
    box-shadow : var(--zg-shadow);
    transform  : translateY(-2px);
}

/* ═══════════════════════════════════════════════════════
   SERVICE SIDEBAR — active state
════════════════════════════════════════════════════════ */
.active-service {
    color      : var(--zg-accent)  !important;
    font-weight: 700;
    background : rgba(201,168,76,.08);
    border-radius : 4px;
}

/* ═══════════════════════════════════════════════════════
   NAVBAR OVERRIDES
════════════════════════════════════════════════════════ */
.navbar {
    padding-top    : 0.75rem;
    padding-bottom : 0.75rem;
}
/* legacy SVG logo (still used in footer) */
.navbar-brand img {
    max-height : 44px;
    width      : auto;
}
/* HTML wordmark text in navbar brand */
.navbar-brand .brand-name {
    font-size   : 1.1rem;
    font-weight : 900;
    letter-spacing : 0.18em;
    color       : #fff;
    line-height : 1;
}
.navbar-brand .brand-sub {
    font-size   : 0.65rem;
    letter-spacing : 0.22em;
    color       : var(--zg-accent);
    line-height : 1;
    display     : block;
    margin-top  : 4px;
}
/* nav-link as button (dropdown toggles) */
.navbar-dark .navbar-nav .nav-link.btn-link {
    color      : rgba(255, 255, 255, 0.85);
    text-decoration : none;
    /* Fix alignment: match <a> nav-link height exactly */
    line-height : 1.5;
    padding     : 0.5rem 0;
}
.navbar-dark .navbar-nav .nav-link.btn-link:hover,
.navbar-dark .navbar-nav .nav-link.btn-link:focus,
.navbar-dark .navbar-nav .nav-link.btn-link.active {
    color : var(--zg-accent) !important;
}
/* Language dropdown button same fix */
.navbar .nav-item > .btn-link.dropdown-toggle {
    line-height : 1.5;
    padding     : 0.5rem 0;
    vertical-align : middle;
}
/* Navbar brand slogan text */
.navbar-brand .brand-slogan {
    font-size   : 0.62rem;
    letter-spacing : 0.12em;
    color       : var(--zg-accent);
    font-weight : 600;
    line-height : 1;
    display     : block;
    margin-top  : 3px;
}
.nav-link {
    font-weight : 500;
    font-size   : 0.9375rem;
    transition  : color var(--zg-transition);
    padding-left : 0.85rem !important;
    padding-right: 0.85rem !important;
}
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color : var(--zg-accent) !important;
}
.dropdown-menu {
    border        : 1px solid var(--zg-border);
    border-radius : var(--zg-radius);
    box-shadow    : var(--zg-shadow);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color : var(--zg-light);
    color            : var(--zg-primary);
}

/* ═══════════════════════════════════════════════════════
   FORM OVERRIDES
════════════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
    border-color : var(--zg-accent);
    box-shadow   : 0 0 0 0.2rem rgba(201,168,76,.2);
}

/* ═══════════════════════════════════════════════════════
   ACCORDION (FAQ) OVERRIDES
════════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
    background-color : rgba(201,168,76,.08);
    color            : var(--zg-primary);
    box-shadow       : none;
}
.accordion-button:focus {
    box-shadow  : 0 0 0 0.2rem rgba(201,168,76,.2);
    border-color: var(--zg-accent);
}

/* ═══════════════════════════════════════════════════════
   FOOTER  — contrast fixes (text-muted fails WCAG on dark bg)
════════════════════════════════════════════════════════ */
footer a,
footer .text-muted {
    color      : rgba(255, 255, 255, 0.72) !important;
    transition : color var(--zg-transition);
}
footer a:hover,
footer a:focus {
    color : var(--zg-accent) !important;
}
footer p.text-muted,
footer span.text-muted,
footer small.text-muted {
    color : rgba(255, 255, 255, 0.60) !important;
}

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY
════════════════════════════════════════════════════════ */
.skip-to-content {
    position   : absolute;
    left       : -9999px;
    top        : 0;
    z-index    : 9999;
    padding    : 0.5rem 1rem;
    background : var(--zg-accent);
    color      : var(--zg-dark);
    font-weight: 700;
    border-radius : 0 0 var(--zg-radius) 0;
}
.skip-to-content:focus {
    left : 0;
}

/* ═══════════════════════════════════════════════════════
   RTL OVERRIDES  (used when dir="rtl" on <html>)
════════════════════════════════════════════════════════ */
[dir="rtl"] .ms-auto { margin-left : unset !important; margin-right : auto !important; }
[dir="rtl"] .me-auto { margin-right: unset !important; margin-left  : auto !important; }
[dir="rtl"] .me-2    { margin-right: unset !important; margin-left  : 0.5rem !important; }
[dir="rtl"] .me-3    { margin-right: unset !important; margin-left  : 1rem   !important; }
[dir="rtl"] .ms-2    { margin-left : unset !important; margin-right : 0.5rem !important; }
[dir="rtl"] .ms-3    { margin-left : unset !important; margin-right : 1rem   !important; }
[dir="rtl"] .nexus-divider { margin-left: auto; margin-right: 0; }
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .service-sidebar { border-right: none; border-left: 1px solid var(--zg-border); }

/* ═══════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════ */
@media print {
    .navbar, footer, .skip-to-content, .btn { display: none !important; }
    .hero-section { min-height: auto; }
    body { color: #000; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE HELPERS
════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .hero-section { min-height: 70vh; }
    .hero-img { max-height: 260px; }
    .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}