/* ══════════════════════════════════════════════
   Abdulrahman Salem — Premium B2B Theme
   Custom CSS Layer
   ══════════════════════════════════════════════ */

/* ── Base Reset ── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

html {
    /* PERF: Moved smooth scroll to JS for INP optimization.
       CSS scroll-behavior: smooth blocks the rendering pipeline
       during anchor navigation, causing massive presentation delay
       when combined with backdrop-filter on fixed elements. */
    scroll-behavior: auto;
}

/* ── Custom Scrollbar (subtle dark navy) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0c1222; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(94, 106, 210, 0.4); }

/* ── FAQ Accordion Transition & States ── */
.faq-item {
    transition: border-color 0.4s ease;
}
.faq-button[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
    color: oklch(65% 0.20 250); /* electric brand sapphire */
}
.faq-button[aria-expanded="true"] + .faq-answer .faq-text {
    opacity: 1;
    transform: translateY(0);
}

/* ── Selection ── */
::selection {
    background-color: #2563eb;
    color: #fff;
}

/* ── Glassmorphism Nav (dark, used on front-page only) ── */
.glass-nav {
    background: rgba(12, 18, 34, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    /* PERF: Promote navbar to its own GPU compositing layer.
       Without this, backdrop-filter forces the browser to
       re-sample ALL content beneath the navbar on every frame
       during scroll — the #1 cause of presentation delay. */
    will-change: transform;
    contain: layout style;
}
.glass-nav.scrolled {
    background: rgba(12, 18, 34, 0.95);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* ── Logo Constraints ── */
.logo-wrapper a, .logo-wrapper .custom-logo-link { display: flex; align-items: center; }
.logo-wrapper img.custom-logo {
    width: auto !important; 
    height: auto !important;
    max-height: 48px !important;
    max-width: 140px !important;
    object-fit: contain;
}
@media (min-width: 768px) {
    .logo-wrapper img.custom-logo { 
        max-height: 56px !important;
        max-width: 220px !important; 
    }
}
@media (min-width: 1024px) {
    .logo-wrapper img.custom-logo { 
        max-height: 64px !important;
    }
}

/* ── Partners Marquee ── */
/* REMOVED: .partners-marquee, .partners-content, @keyframes marqueeScroll — unused */

/* ── Text Utilities ── */
/* REMOVED: .text-outline, .text-outline-dark — unused */

/* ── Responsive Grid Safety ── */
section { width: 100%; max-width: 100vw; overflow: hidden; }
.max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl { max-width: 100%; }
@media (min-width: 768px) {
    .max-w-7xl { max-width: 80rem; }
    .max-w-5xl { max-width: 64rem; }
    .max-w-4xl { max-width: 56rem; }
    .max-w-3xl { max-width: 48rem; }
}

/* ── PERF: Section rendering containment ──
   content-visibility: auto — skip rendering of off-screen sections entirely.
   contain-intrinsic-size — reserve estimated height to prevent CLS.
   contain: layout style paint — isolate layout recalculations per section. */
section[id] {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* ── LTR Utility ── */
.dir-ltr { direction: ltr; }

/* ── Scroll Reveal Animations (performant, CSS-only) ── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Hide Scrollbar (for carousels) ── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}