/*
 * HeyJames Brand Overrides
 * Overrides AppKit Landing template colours with HeyJames brand palette.
 * Primary: #3498db (translate-blue)
 * Accent:  #2ecc71 (listening-green)
 * Load AFTER assets/css/styles.css
 */

/* ===== Smooth scrolling ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Brand colour variables ===== */
:root {
    --hj-primary:   #3498db;
    --hj-primary-d: #2980b9;
    --hj-accent:    #2ecc71;
    --hj-accent-d:  #27ae60;
    --hj-dark:      #1a1a2e;
}

/* ===== Button overrides ===== */
.btn-primary {
    background: var(--hj-primary);
    border-color: var(--hj-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--hj-primary-d);
    border-color: var(--hj-primary-d);
    color: #fff;
}

/* ===== Carousel indicators ===== */
.carousel-indicators button[data-bs-target].active {
    background-color: var(--hj-primary);
}

/* ===== Header / Logo ===== */
.header .logo .highlight,
.header.header-scrolled .logo {
    color: var(--hj-primary);
}

.header.header-scrolled .logo .logo-icon-wrapper {
    background: var(--hj-primary);
}

.header.header-scrolled .main-nav .nav .active .nav-link {
    border-bottom-color: var(--hj-primary);
}

/* ===== Hero section: gradient backgrounds (no image dependency) ===== */
.hero-carousel .carousel-inner .item-1 {
    background-image: none;
    background: linear-gradient(145deg, #0d1117 0%, #0f2a4a 55%, #1a3a6b 100%);
}

.hero-carousel .carousel-inner .item-2 {
    background-image: none;
    background: linear-gradient(145deg, #0d1117 0%, #1a2a4a 55%, #16213e 100%);
}

.hero-carousel .carousel-inner .item-3 {
    background-image: none;
    background: linear-gradient(145deg, #0f1a3a 0%, #1a2a6b 55%, #0d1117 100%);
}

/* ===== About section icon colour ===== */
.about-icon {
    color: var(--hj-primary);
}

.about-section .items-wrapper .item-title {
    color: var(--hj-primary);
}

/* ===== Feature nav ===== */
.feature-nav .nav-link:hover,
.feature-nav .nav-link.active {
    color: var(--hj-primary);
}

/* ===== Feature mockup cards ===== */
.feature-mockup {
    background: #fff;
    border-radius: 8px;
}

.feature-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(52, 152, 219, 0.12);
    color: var(--hj-primary);
    flex-shrink: 0;
}

.feature-demo-bar {
    background: #f0f7ff;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.lang-badge {
    background: rgba(52, 152, 219, 0.10);
    color: var(--hj-primary);
    border: 1px solid rgba(52, 152, 219, 0.25);
    font-size: 12px;
}

/* ===== Large-text display demo ===== */
.large-text-demo {
    background: #0d1117;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.display-demo-text {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.display-demo-subtext {
    font-size: 1.8rem;
    font-weight: 600;
    color: #cdd6e0;
}

/* ===== Latency breakdown ===== */
.latency-step {
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.latency-time {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--hj-primary);
}

.latency-label {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* ===== Step numbers (How It Works) ===== */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hj-primary);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}

/* ===== Testimonials section override (replaced with How It Works) ===== */
.testimonials-section {
    background: var(--hj-primary) !important;
    background-image: none !important;
}

/* ===== Contact section: remove map.png dependency ===== */
.contact-section {
    background-image: none !important;
    background: #494d55 !important;
}

/* ===== Footer ===== */
.footer a {
    color: var(--hj-primary);
}

/* ===== Listening pulse animation ===== */
@keyframes listening-pulse {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.6; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

.listening-pulse {
    animation: listening-pulse 1.4s ease-in-out infinite;
    color: var(--hj-accent);
}

.listening-pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hj-accent);
    animation: listening-pulse 1.4s ease-in-out infinite;
}

/* ===== SVG phone mockup sizing ===== */
.phone-mockup {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* ===== Docs page ===== */
.docs-page {
    min-height: 100vh;
    background: #fafbfc;
}

.docs-sidebar {
    border-right: 1px solid #e8ecf0;
    min-height: calc(100vh - 70px);
    background: #fff;
}

.docs-nav-link {
    color: #555;
    font-size: 14px;
    padding: 5px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.docs-nav-link:hover,
.docs-nav-link:focus {
    color: var(--hj-primary);
    background: rgba(52, 152, 219, 0.06);
    text-decoration: none;
}

.docs-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid var(--hj-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
}

.docs-section {
    scroll-margin-top: 80px;
}

/* Steps list for docs */
.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hj-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

/* Data flow diagram */
.docs-flow {
    background: #f0f7ff;
    border: 1px solid rgba(52, 152, 219, 0.25);
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
}

.flow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hj-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 767px) {
    .phone-mockup {
        width: 200px;
    }

    .display-demo-text {
        font-size: 1.8rem;
    }

    .display-demo-subtext {
        font-size: 1.3rem;
    }
}