/* Shared dark hero — used on landing, integrations hub, and per-platform pages. */

/* Public nav: scroll-aware frosted glass.
   - At top of page (over the dark hero): dark frosted glass (blends).
   - Scrolled past hero: theme-aware glass (white over light body, dark over dark body).
   Scoped to nav.glass-light so we don't affect auth-form cards that share .glass-light.
   Toggling done by `nav-scroll-aware.js` (adds .nav-scrolled when window.scrollY > 80). */

/* Default — at top of page, sitting over dark hero */
nav.glass-light {
    background: rgba(11, 15, 26, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

/* Bottom edge only: core/base.html's `.dark .glass-light` outranks
   `nav.glass-light { border: none }` and drew a grey frame on the other sides. */
.dark nav.glass-light {
    background: rgba(11, 15, 26, 0.78);
    border-width: 0 0 1px;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Default text colors — light on dark for the top-level nav bar */
nav.glass-light a:not(.bg-indigo-600),
nav.glass-light button {
    color: rgb(226, 232, 240); /* slate-200 */
}

nav.glass-light a:not(.bg-indigo-600):not(.bg-brand-navy):hover,
nav.glass-light button:hover {
    color: rgb(255, 255, 255);
    background-color: transparent;
}

/* Language dropdown ([role="menu"]) — has white bg in light mode, gray-800 in dark.
   Dark text in light, light text in dark. */
nav.glass-light [role="menu"] a {
    color: rgb(55, 65, 81); /* gray-700 */
}

nav.glass-light [role="menu"] a:not(.bg-indigo-600):not(.bg-brand-navy):hover {
    color: rgb(79, 70, 229); /* indigo-600 */
}

nav.glass-light [role="menu"] a[aria-current="true"] {
    color: rgb(79, 70, 229);
}

.dark nav.glass-light [role="menu"] a {
    color: rgb(209, 213, 219); /* gray-300 */
}

.dark nav.glass-light [role="menu"] a:not(.bg-indigo-600):not(.bg-brand-navy):hover,
.dark nav.glass-light [role="menu"] a[aria-current="true"] {
    color: rgb(165, 180, 252); /* indigo-300 */
}

/* Mobile menu — visually identical to the language-switcher dropdown:
   solid white card in light mode, solid gray-800 card in dark mode,
   with rounded corners, shadow, border, and per-item hover-fill. */
nav.glass-light .mobile-menu .glass-light {
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgb(229, 231, 235) !important; /* gray-200 */
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0.5rem 0.75rem 0.75rem;
}

.dark nav.glass-light .mobile-menu .glass-light {
    background: rgb(31, 41, 55) !important; /* gray-800 */
    border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

nav.glass-light .mobile-menu a:not(.bg-indigo-600),
nav.glass-light .mobile-menu button {
    color: rgb(55, 65, 81); /* gray-700 */
    border-radius: 0.375rem;
}

nav.glass-light .mobile-menu a:not(.bg-indigo-600):not(.bg-brand-navy):hover,
nav.glass-light .mobile-menu button:hover {
    color: rgb(79, 70, 229); /* indigo-600 */
    background-color: rgb(243, 244, 246); /* gray-100 — full fill, like the lang dropdown */
}

.dark nav.glass-light .mobile-menu a:not(.bg-indigo-600),
.dark nav.glass-light .mobile-menu button {
    color: rgb(209, 213, 219); /* gray-300 */
}

.dark nav.glass-light .mobile-menu a:not(.bg-indigo-600):not(.bg-brand-navy):hover,
.dark nav.glass-light .mobile-menu button:hover {
    color: rgb(165, 180, 252); /* indigo-300 */
    background-color: rgb(55, 65, 81); /* gray-700 — full fill */
}

/* Scrolled state — past the hero, theme-aware so it reads against body content */
nav.glass-light.nav-scrolled {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.dark nav.glass-light.nav-scrolled {
    background: rgba(11, 15, 26, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

nav.glass-light.nav-scrolled a:not(.bg-indigo-600),
nav.glass-light.nav-scrolled button {
    color: rgb(55, 65, 81); /* gray-700 for light mode body */
}

nav.glass-light.nav-scrolled a:not(.bg-indigo-600):hover,
nav.glass-light.nav-scrolled button:hover {
    color: rgb(79, 70, 229); /* indigo-600 */
}

.dark nav.glass-light.nav-scrolled a:not(.bg-indigo-600),
.dark nav.glass-light.nav-scrolled button {
    color: rgb(209, 213, 219); /* gray-300 for dark mode body */
}

.dark nav.glass-light.nav-scrolled a:not(.bg-indigo-600):hover,
.dark nav.glass-light.nav-scrolled button:hover {
    color: rgb(165, 180, 252); /* indigo-300 */
}

/* The top link of the current section (base.html, aria-current="page"):
   a step stronger than its neighbours in every header state. */
nav.glass-light a[aria-current="page"] { color: rgb(255, 255, 255); font-weight: 500; }
nav.glass-light.nav-scrolled a[aria-current="page"] { color: rgb(17, 24, 39); }
.dark nav.glass-light.nav-scrolled a[aria-current="page"] { color: rgb(255, 255, 255); }
nav.glass-light .mobile-menu a[aria-current="page"] { color: rgb(17, 24, 39); font-weight: 600; }
.dark nav.glass-light .mobile-menu a[aria-current="page"] { color: rgb(255, 255, 255); }

/* Smooth transition between states */
nav.glass-light,
nav.glass-light a,
nav.glass-light button {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* White logo on the dark header, navy logo once the light header scrolls in */
nav.glass-light .nav-logo-on-light { display: none; }
html:not(.dark) nav.glass-light.nav-scrolled .nav-logo-on-dark { display: none; }
html:not(.dark) nav.glass-light.nav-scrolled .nav-logo-on-light { display: block; }

/* Flat, on the one dark base (base.css --site-dark): the glows went 2026-10-23. */
.hero-dark { background-color: var(--site-dark, #0b0f1a); }

.hero-dark-headline {
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.hero-dark-breadcrumb {
    color: #94a3b8;
}

.hero-dark-breadcrumb a {
    color: inherit;
    transition: color 0.15s ease;
}

.hero-dark-breadcrumb a:hover,
.hero-dark-breadcrumb a:focus-visible {
    color: #ffffff;
}

/* The one primary: indigo-600, as .btn-primary (base.css), no glow. */
.hero-dark-cta {
    background-color: #4f46e5;
    color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
}

.hero-dark-cta:hover {
    background-color: #4338ca;
    color: #ffffff;
}

.hero-dark-cta:focus-visible {
    outline: 2px solid #c7d2fe;
    outline-offset: 3px;
}

.hero-dark-link {
    color: #c7d2fe;
    transition: color 0.15s ease;
}

.hero-dark-link:hover,
.hero-dark-link:focus-visible {
    color: #ffffff;
}

.hero-dark-marketplace-link {
    color: #94a3b8;
    transition: color 0.15s ease;
}

.hero-dark-marketplace-link:hover,
.hero-dark-marketplace-link:focus-visible {
    color: #ffffff;
}

.marketplace-light .hero-dark-marketplace-link {
    color: #475569;
}

.marketplace-light .hero-dark-marketplace-link:hover,
.marketplace-light .hero-dark-marketplace-link:focus-visible {
    color: #0f172a;
}

.dark .marketplace-light .hero-dark-marketplace-link {
    color: #94a3b8;
}

.dark .marketplace-light .hero-dark-marketplace-link:hover,
.dark .marketplace-light .hero-dark-marketplace-link:focus-visible {
    color: #ffffff;
}

/* Hero stage (landing.html): the clip and the email card share one frame. */
.hero-frame {
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 48px -16px rgba(0, 0, 0, 0.65);
}

.hero-email-card { background: #ffffff; }
.hero-email-pill { background: #eef2ff; color: #4338ca; }
.hero-email-strong { color: #111827; }
.hero-email-body { color: #1f2937; }
.hero-email-muted { color: #6b7280; }
.hero-email-rule { border-color: #e5e7eb; }

.dark .hero-email-card { background: #151a2e; }
.dark .hero-email-pill { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; }
.dark .hero-email-strong { color: #f9fafb; }
.dark .hero-email-body { color: #e5e7eb; }
.dark .hero-email-muted { color: #9ba3b4; }
.dark .hero-email-rule { border-color: rgba(255, 255, 255, 0.1); }

.hero-caption { color: #9ba3b4; }
.hero-caption-link {
    color: #c7d2fe;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hero-caption summary:hover .hero-caption-link { color: #ffffff; }

/* The one secondary button on dark: white outline. */
.hero-dark-outline {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.hero-dark-outline:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
}