/* ==========================================================================
   NEXUS™ Enterprise Communications — Core Production Stylesheet
   Brand Palette: Squid Ink (#232F3E), Smile Orange (#FF6200), Prime Blue (#0578FF)
   ========================================================================== */

@font-face {
    font-family: 'Amazon Ember';
    src: url('../fonts/AmazonEmber.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   COMPILED NEXUS™ BRAND COLOR, BACKGROUND, BORDER & TYPOGRAPHY UTILITIES
   (Guarantees instant zero-flash rendering across all pages)
   ========================================================================== */
.font-logo {
    font-family: 'Audiowide', sans-serif !important;
}

.font-sans {
    font-family: 'Amazon Ember', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Background Colors */
.bg-nexus-squid { background-color: #232F3E !important; }
.bg-nexus-squidDeep { background-color: #18212C !important; }
.bg-nexus-squidDeep\/90 { background-color: rgba(24, 33, 44, 0.90) !important; }
.bg-nexus-orange { background-color: #FF6200 !important; }
.bg-nexus-orangeHover { background-color: #E05600 !important; }
.bg-nexus-orange\/20 { background-color: rgba(255, 98, 0, 0.20) !important; }
.bg-nexus-blue { background-color: #0578FF !important; }
.bg-nexus-blue\/15 { background-color: rgba(5, 120, 255, 0.15) !important; }
.bg-nexus-blueLight { background-color: #EBF4FF !important; }

/* Hover Background Colors */
.hover\:bg-nexus-orangeHover:hover { background-color: #E05600 !important; }
.hover\:bg-nexus-squid:hover { background-color: #232F3E !important; }
.hover\:bg-nexus-squidDeep:hover { background-color: #18212C !important; }

/* Text Colors */
.text-nexus-squid { color: #232F3E !important; }
.text-nexus-orange { color: #FF6200 !important; }
.text-nexus-blue { color: #0578FF !important; }
.text-nexus-border { color: #34455B !important; }

/* Hover & Group-Hover Text Colors */
.hover\:text-nexus-orange:hover { color: #FF6200 !important; }
.hover\:text-nexus-blue:hover { color: #0578FF !important; }
.group:hover .group-hover\:text-nexus-blue { color: #0578FF !important; }
.group:hover .group-hover\:text-nexus-orange { color: #FF6200 !important; }

/* Border Colors */
.border-nexus-squid { border-color: #232F3E !important; }
.border-nexus-orange { border-color: #FF6200 !important; }
.border-nexus-blue { border-color: #0578FF !important; }
.border-nexus-blue\/40 { border-color: rgba(5, 120, 255, 0.40) !important; }
.border-nexus-border { border-color: #34455B !important; }
.border-nexus-border\/60 { border-color: rgba(52, 69, 91, 0.60) !important; }

/* Directional Border Colors (Top & Left Accents) */
.border-t-nexus-blue { border-top-color: #0578FF !important; }
.border-t-nexus-orange { border-top-color: #FF6200 !important; }
.border-t-nexus-squid { border-top-color: #232F3E !important; }
.border-l-nexus-orange { border-left-color: #FF6200 !important; }
.border-l-nexus-blue { border-left-color: #0578FF !important; }
.border-l-nexus-squid { border-left-color: #232F3E !important; }

/* Hover & Focus Border Colors */
.hover\:border-nexus-blue:hover { border-color: #0578FF !important; }
.hover\:border-nexus-orange:hover { border-color: #FF6200 !important; }
.hover\:border-nexus-squid:hover { border-color: #232F3E !important; }
.focus\:border-nexus-blue:focus { border-color: #0578FF !important; }

/* Dividers, Underlines & Text Selection */
.divide-nexus-border > :not([hidden]) ~ :not([hidden]) { border-color: #34455B !important; }
.decoration-nexus-orange { text-decoration-color: #FF6200 !important; }
.selection\:bg-nexus-orange *::selection,
.selection\:bg-nexus-orange::selection {
    background-color: #FF6200 !important;
    color: #FFFFFF !important;
}

/* Smooth Page Entry Animation */
.nexus-fade-in {
    animation: nexusFadeIn 0.3s ease-out;
}

@keyframes nexusFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   EXACT N-TO-S EDGE-JUSTIFIED LOGO LOCKUP WITH TOP-FLUSH FLOATING TM
   ========================================================================== */
.nexus-logo-core {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: 142px;
    position: relative;
}

.nexus-logo-core-sm {
    width: 114px;
}

.nexus-wordmark-row {
    font-family: 'Audiowide', sans-serif;
    font-size: 2rem;
    line-height: 0.86;
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.nexus-wordmark-row-sm {
    font-size: 1.55rem;
    line-height: 0.86;
}

.nexus-tm-floating {
    position: absolute;
    left: 100%;
    top: 0px;
    margin-left: 3px;
    font-family: 'Amazon Ember', system-ui, -apple-system, sans-serif;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 900;
    color: #FF6200;
    pointer-events: none;
}

.nexus-tm-floating-sm {
    font-size: 0.52rem;
}

.nexus-divider-dark {
    height: 1.5px;
    background-color: #FFFFFF;
    width: 100%;
    margin: 5px 0 3px 0;
}

.nexus-alternating-line {
    position: relative;
    height: 15px;
    width: 100%;
    overflow: hidden;
}

.nexus-alternating-line-sm {
    height: 12px;
}

.nexus-alt-item {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.74rem;
    font-weight: 700;
    color: #0578FF;
    transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out;
}

.nexus-alt-item-sm {
    font-size: 0.6rem;
}

.nexus-alt-item.hidden-state {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

.nexus-alt-item.visible-state {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   DESKTOP HOVER DROPDOWNS & VISUAL STORY LOOP ANIMATIONS
   ========================================================================== */
.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}

@keyframes pulseFlow {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.99);
    }
    50% {
        opacity: 1;
        transform: scale(1.01);
    }
}

.story-loop-step {
    animation: pulseFlow 3.2s infinite ease-in-out;
}

.story-loop-step-delay-1 {
    animation-delay: 1s;
}

.story-loop-step-delay-2 {
    animation-delay: 2s;
}