/*
 * Enjezly POS marketing page — production identity alignment.
 * The original page composition remains in pos_landing.html.
 */

:root[data-ej-theme="dark"] {
    --pos-dark: var(--ej-page);
    --pos-darker: var(--ej-page);
    --pos-mid: var(--ej-surface-subtle);
    --pos-accent: var(--ej-action-primary);
    --pos-accent2: var(--ej-action-primary-hover);
    --pos-green: var(--ej-success);
    --pos-teal: var(--ej-success);
    --pos-light: var(--ej-page-raised);
    --pos-white: var(--ej-color-neutral-0);
    --pos-text: var(--ej-text);
    --pos-muted: var(--ej-text-muted);
    --shadow-soft: var(--ej-shadow-md);
    --shadow-card: var(--ej-shadow-sm);
    --radius-lg: var(--ej-radius-lg);
    --radius-md: var(--ej-radius-md);
}

/* Shared public shell. */
.main-header {
    background: var(--ej-header-bg);
    border-color: var(--ej-border);
    box-shadow: none;
    backdrop-filter: blur(14px);
}
.nav-links a:not(.login-button) { color: var(--ej-text-muted); }
.nav-links a:not(.login-button):hover { color: var(--ej-primary); }
.login-button,
.btn-primary-pos {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text) !important;
    box-shadow: none;
    transition: background var(--ej-duration-fast) var(--ej-ease),
                transform var(--ej-duration-fast) var(--ej-ease);
}
.login-button:hover,
.btn-primary-pos:hover {
    background: var(--ej-action-primary-hover);
    box-shadow: none;
    transform: translateY(-1px);
}
.main-footer { background: var(--ej-page-raised); border-color: var(--ej-border); }

/* Preserve the hero dashboard while removing decorative movement and glow. */
.pos-hero { background: var(--ej-page); }
.pos-hero::before,
.pos-hero::after,
.pos-cta-section::before { display: none; }
.pos-hero-badge {
    background: var(--ej-primary-soft);
    border-color: var(--ej-border-brand);
    color: var(--ej-primary);
}
.pos-hero-badge span.dot { background: var(--ej-primary); animation: none; }
.pos-hero h1 em,
.pos-stat-num { color: var(--ej-primary); }
.btn-ghost-pos {
    border-color: var(--ej-border);
    color: var(--ej-text-muted);
    transition: background var(--ej-duration-fast) var(--ej-ease),
                border-color var(--ej-duration-fast) var(--ej-ease),
                color var(--ej-duration-fast) var(--ej-ease);
}
.btn-ghost-pos:hover {
    background: var(--ej-surface-subtle);
    border-color: var(--ej-border-brand);
    color: var(--ej-text);
}
.hero-dashboard-card {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    box-shadow: var(--ej-shadow-md);
    backdrop-filter: none;
    animation: none;
}
.hero-float-badge {
    background: var(--ej-surface-subtle);
    border: 1px solid var(--ej-border);
    box-shadow: var(--ej-shadow-sm);
    animation: none;
}
.hero-float-badge .badge-text strong { color: var(--ej-text); }

/* The graph animation is functional and remains, but its color is unified. */
.hdc-bar-fill { background: var(--ej-action-primary); }

/* Shared section hierarchy. */
.pos-stats-strip,
#how-it-works-pos,
#pos-seo-content { background: var(--ej-page); }
#pos-features,
#pos-roles,
#pos-faq,
.pos-showcase:nth-child(even) { background: var(--ej-page-raised); }
.pos-section-label {
    background: var(--ej-primary-soft);
    border: 1px solid var(--ej-border-brand);
    color: var(--ej-primary);
}
.feat-card,
.role-card,
.seo-content-box,
.pos-faq-item {
    background: var(--ej-surface);
    border-color: var(--ej-border);
}
.feat-card::before { display: none; }
.feat-icon {
    background: var(--ej-primary-soft);
    color: var(--ej-primary);
}
.feat-card,
.role-card {
    transition: border-color var(--ej-duration-fast) var(--ej-ease),
                box-shadow var(--ej-duration-fast) var(--ej-ease),
                transform var(--ej-duration-fast) var(--ej-ease);
}
.feat-card:hover,
.role-card:hover {
    border-color: var(--ej-border-brand);
    box-shadow: var(--ej-shadow-sm);
    transform: translateY(-2px);
}
.feature-checklist li::before { background-color: var(--ej-success); }
.mock-screen {
    border-color: var(--ej-border);
    box-shadow: var(--ej-shadow-md);
}
.step-num { color: var(--ej-border-brand); }
.role-card.owner .role-card-header,
.role-card.supervisor .role-card-header { background: var(--ej-surface-subtle); }
.role-card.cashier .role-card-header { background: var(--ej-primary-soft); }
.role-card.cashier .role-name { color: var(--ej-primary); }
.role-card.cashier .role-desc { color: var(--ej-text-muted); }
.seo-content-box h2,
.pos-faq-item summary { color: var(--ej-heading); }
.seo-content-box p { color: var(--ej-text-muted); }
.pos-faq-item:hover { box-shadow: var(--ej-shadow-sm); }

/* Content is immediately available; only counters and chart bars animate. */
.reveal,
.reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
}

.pos-cta-section {
    background: var(--ej-page-raised);
    border-top: 1px solid var(--ej-border);
}

.login-button:focus-visible,
.pos-hero a:focus-visible,
.pos-faq-item summary:focus-visible,
.pos-cta-section a:focus-visible {
    outline: 3px solid var(--ej-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}