/**
 * Client Public Site Styles
 *
 * Shared component styles for the marketing / public pages.
 * Uses the semantic theme tokens defined in input.css so the public site
 * adapts to light / dark / system preferences.
 */

/* Gradient text used in hero headings and 404 page */
.gradient-text {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero section overlay */
.hero-gradient {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

/* Card lift hover effect */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Navigation link underline */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--color-accent);
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}

/* Fade-in entrance animation */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Floating animation used on the 404 page */
.animate-float {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Feature icon gradient background */
.feature-icon {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

/* ============================================================
   NAVBAR THEME DROPDOWN OVERRIDES
   ============================================================
   The shared theme-ui.css is built for the inverse sidebar where the
   panel opens upward. The navbar sits at the top of the page, so its
   theme menu panel opens downward and is anchored to the right.
   ============================================================ */

.navbar-theme-menu .theme-menu-panel {
    left: auto;
    right: 0;
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.5rem;
    min-width: 11rem;
}

/* Mobile: full-width panel inside the drawer. */
@media (max-width: 767px) {
    .navbar-theme-menu .theme-menu-panel {
        left: 0;
        right: 0;
        position: relative;
    }
}

/* The public navbar uses the inverse (always-dark) palette, so the
   existing theme-ui.css inverse tokens already match. We only smooth the
   chevron transition for the navbar trigger. */
.navbar-theme-menu [data-action="theme-menu"] .theme-menu-chevron {
    transition: transform 0.2s ease;
}