/* Common public-site styles (shared across landing, features, blog, docs, etc.) */

/* One dark base: the dark heroes (hero.css), the dark-mode page and its
   full-width sections all sit on the same near-black. */
:root { --site-dark: #0b0f1a; }

[id] { scroll-margin-top: 80px; }

/* Docs code blocks: keep the first line of code clear of the absolute Copy
   button (which sits top-right of the block). */
.code-block pre { padding-top: 1.75rem; overflow-x: auto; }

/* Long paths and class names in prose code break instead of widening the page. */
:not(pre) > code { overflow-wrap: anywhere; }

/* Touch-screen refinements (the sticky CTA bar is lg:hidden, so scope to
   below the lg breakpoint). */
@media (max-width: 1023px) {
    /* Reserve space so the fixed sticky CTA never covers page content. Use the
       footer's own bottom padding (body padding-bottom gets collapsed at the
       scroll extreme in some browsers). While the bar shows, our own chat
       launcher docks inside it, in space the bar keeps free on its right: a
       launcher stacked above the bar covered body copy and crowded the bar.
       The selectors beat embed.js's own `.emporiqa-chat-button.bottom-right`. */
    body.sticky-cta-visible footer { padding-bottom: 6.5rem; }
    body.sticky-cta-visible .emporiqa-chat-button.bottom-right,
    body.sticky-cta-visible .emporiqa-chat-button.bottom-left { bottom: 6px; }
    body:has(.emporiqa-chat-button.bottom-right) #sticky-cta > div { padding-right: 88px; }
    body:has(.emporiqa-chat-button.bottom-left) #sticky-cta > div { padding-left: 88px; }
    body.sticky-cta-visible .emporiqa-trigger-bubble.bottom-right,
    body.sticky-cta-visible .emporiqa-trigger-bubble.bottom-left { bottom: 80px; }

    /* Without the bar, the 60px launcher at 20px from the corner covered line
       ends and the estimator's results on a phone: tuck it in, and let the
       footer's last line scroll clear of it. */
    body .emporiqa-chat-button.bottom-right,
    body .emporiqa-chat-button.bottom-left {
        width: 52px;
        height: 52px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    body .emporiqa-chat-button.bottom-right { right: 12px; }
    body .emporiqa-chat-button.bottom-left { left: 12px; }
    body:not(.sticky-cta-visible) footer { padding-bottom: 5rem; }

    /* The open mobile menu covers the page: no launcher on top of it. */
    body.mobile-menu-open .emporiqa-chat-button,
    body.mobile-menu-open .emporiqa-trigger-bubble { display: none !important; }

    /* Footer link tap targets reach the 44px minimum. */
    footer ul a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Native details/summary: hide default marker across browsers */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.chat-bubble { animation: float-slow 4s ease-in-out infinite; }

html.dark { background: var(--site-dark) !important; }
html.dark body { background: var(--site-dark) !important; color: #f9fafb !important; }
html.dark main section.dark\:bg-gray-900 { background-color: var(--site-dark); }
html:not(.dark) { background: #f9fafb !important; }
html:not(.dark) body { background: #f9fafb !important; color: #111827 !important; }

.section-heading {
    position: relative;
    display: inline-block;
}
.section-heading::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #4f46e5);
    border-radius: 2px;
}

/* Click-to-expand images (lightbox) */
.image-zoomable {
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.image-zoomable:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.dark .image-zoomable:hover {
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.25);
}

.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.image-lightbox.is-open {
    display: flex;
    opacity: 1;
}
.image-lightbox img {
    max-width: 95vw;
    max-height: 92vh;
    border-radius: 0.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.97);
    transition: transform 0.25s ease;
}
.image-lightbox.is-open img {
    transform: scale(1);
}
.image-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}
body.lightbox-open {
    overflow: hidden;
}

/* Type (2026-10-23): balanced headline lines, and no automatic hyphens in
   them (DE compounds broke mid-word). */
h1, h2 { text-wrap: balance; hyphens: manual; }
/* On phones a DE compound can be wider than the screen: hyphenate there only. */
@media (max-width: 640px) {
    h1, h2 { hyphens: auto; overflow-wrap: break-word; }
}

/* Buttons: one size everywhere, one primary per surface. On the dark heroes
   the primary is .hero-dark-cta (hero.css), the secondary .hero-dark-outline. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.btn-primary { background-color: #4f46e5; color: #ffffff; transition: background-color 0.15s ease; }
.btn-primary:hover { background-color: #4338ca; color: #ffffff; }

/* Keyboard focus that shows on every surface: links (incl. card links),
   buttons, tabs and FAQ summaries. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
input[type="range"]:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Pricing estimator sliders. --fill is set by the estimator script; the
   accent-color is the fallback where the custom track is not drawn. */
.range-input {
    --fill: 0%;
    --track: #e5e7eb;
    accent-color: #6366f1;
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    background: transparent;
}
.dark .range-input { --track: #2a2f45; }
.range-input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 9999px;
    background: linear-gradient(to right, #6366f1 var(--fill), var(--track) var(--fill));
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 0 0 2px #6366f1, 0 1px 3px rgba(0, 0, 0, 0.3);
}
.range-input::-moz-range-track { height: 4px; border-radius: 9999px; background: var(--track); }
.range-input::-moz-range-progress { height: 4px; border-radius: 9999px; background: #6366f1; }
.range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 0 0 2px #6366f1, 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Pricing: the three price tiles share one card. */
.price-tile {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 1.5rem;
    text-align: center;
}
.dark .price-tile { border-color: #374151; background: #111827; }
.price-tile-value { display: flex; align-items: baseline; justify-content: center; min-height: 2.5rem; }

/* /compare/ matrix: Emporiqa is the first vendor column (compare_matrix.VENDORS). */
.cmp-vs-table tr > :nth-child(2) { background-color: rgba(99, 102, 241, 0.08); }

/* Nav disclosure panels (base.html, base.js). Colours sit on the inner spans:
   hero.css colours every nav `a` by scroll state, and the panel is always a
   light (or dark-mode) card whatever the bar behind it looks like. */
.nav-dd { position: relative; display: flex; align-items: center; gap: 0.125rem; }
.nav-dd-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 0.375rem;
}
.nav-dd-toggle:focus-visible { outline: 2px solid #818cf8; outline-offset: 1px; }
/* One chevron for both panels and the language picker: 12px, thin, grey. */
.nav-chevron { width: 12px; height: 12px; color: #9ca3af; flex-shrink: 0; transition: transform 0.16s ease, color 0.16s ease; }
.nav-dd-toggle:hover .nav-chevron, [data-lang-toggle]:hover .nav-chevron { color: currentColor; }
.nav-dd[data-open] .nav-chevron, [data-lang-toggle][aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-panel {
    position: absolute; top: 100%; left: -0.875rem; padding-top: 1.375rem;
    width: 22rem; visibility: hidden; opacity: 0; transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav-panel-wide { width: 36rem; }
.nav-dd[data-open] .nav-panel {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition-delay: 0s;
}
.nav-panel-card {
    background: #fff; border: 1px solid rgb(229, 231, 235); border-radius: 0.75rem;
    box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.22), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    padding: 0.5rem;
}
.nav-panel-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0.125rem 0.25rem;
}
html nav.glass-light .nav-panel a.nav-panel-item {
    display: block; padding: 0.625rem 0.75rem; border-radius: 0.5rem;
}
html nav.glass-light .nav-panel-grid-compact a.nav-panel-item { padding-top: 0.5rem; padding-bottom: 0.5rem; }
html nav.glass-light .nav-panel a.nav-panel-item:hover { background-color: rgb(249, 250, 251); }
.nav-panel-item:focus-visible, .nav-panel-more:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; border-radius: 0.5rem; }
.nav-panel-title { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: rgb(17, 24, 39); }
.nav-panel-line { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; color: rgb(107, 114, 128); }
.nav-panel-item:hover .nav-panel-title { color: rgb(67, 56, 202); }
.nav-panel-item-all .nav-panel-title { color: rgb(79, 70, 229); }
.dark .nav-panel-item-all .nav-panel-title { color: rgb(165, 180, 252); }
.nav-panel-foot {
    margin-top: 0.375rem; padding: 0.625rem 0.75rem 0.375rem;
    border-top: 1px solid rgb(243, 244, 246);
}
.nav-panel-foot-split { display: flex; justify-content: space-between; gap: 1rem; }
.nav-panel-more { display: inline-flex; align-items: center; gap: 0.375rem; }
.nav-panel-more > span { font-size: 0.875rem; font-weight: 500; color: rgb(79, 70, 229); }
.nav-panel-more-quiet > span { color: rgb(75, 85, 99); }
.nav-panel-more:hover > span { color: rgb(55, 48, 163); }
.nav-panel-more > span[aria-hidden] { transition: transform 0.16s ease; }
.nav-panel-more:hover > span[aria-hidden] { transform: translateX(2px); }

.dark .nav-panel-card {
    background: rgb(17, 24, 39); border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
html.dark nav.glass-light .nav-panel a.nav-panel-item:hover { background-color: rgba(255, 255, 255, 0.04); }
.dark .nav-panel-title { color: rgb(243, 244, 246); }
.dark .nav-panel-line { color: rgb(156, 163, 175); }
.dark .nav-panel-item:hover .nav-panel-title { color: rgb(165, 180, 252); }
.dark .nav-panel-foot { border-top-color: rgba(255, 255, 255, 0.06); }
.dark .nav-panel-more > span { color: rgb(165, 180, 252); }
.dark .nav-panel-more-quiet > span { color: rgb(209, 213, 219); }
.dark .nav-panel-more:hover > span { color: rgb(199, 210, 254); }

@media (prefers-reduced-motion: reduce) {
    .nav-panel, .nav-chevron, .nav-panel-more > span[aria-hidden] { transition: none; transform: none; }
    .nav-dd[data-open] .nav-chevron, [data-lang-toggle][aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
}

/* Mobile menu: the sub-links sit indented under their item, quieter, and the
   menu scrolls inside the fixed header when it is taller than the screen. */
.mobile-menu { max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu-sub { margin: 0 0 0.375rem 0.75rem; padding-left: 0.5rem; border-left: 1px solid rgb(229, 231, 235); }
.mobile-menu-sub a { display: flex; align-items: center; min-height: 44px; }
.mobile-menu-icon-close, .mobile-menu-button[aria-expanded="true"] .mobile-menu-icon-open { display: none; }
.mobile-menu-button[aria-expanded="true"] .mobile-menu-icon-close { display: inline-block; }
/* Below the fixed header (z-50), above the page and the sticky bar (z-40). */
.mobile-menu-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.4); }
.mobile-menu-backdrop[hidden] { display: none; }
body.mobile-menu-open { overflow: hidden; }
.mobile-menu-sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-menu-sub-grid > :last-child { grid-column: 1 / -1; }
nav.glass-light .mobile-menu .mobile-menu-sub a:not(.bg-indigo-600) { color: rgb(107, 114, 128); }
.dark .mobile-menu-sub { border-left-color: rgb(55, 65, 81); }
.dark nav.glass-light .mobile-menu .mobile-menu-sub a:not(.bg-indigo-600) { color: rgb(156, 163, 175); }

/* Footer (base.html): five link columns after the brand, legal links in the bottom bar. */
.site-footer { padding: 4rem 0 2rem; }
footer[role="contentinfo"] { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.dark footer[role="contentinfo"] { background-color: var(--site-dark); }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .footer-grid { grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); }
    .footer-brand { grid-column: auto; }
}
.footer-heading { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: rgb(243, 244, 246); margin-bottom: 1rem; }
/* Below 1024px every footer link is already a 44px row (top of this file). */
@media (min-width: 1024px) {
    .footer-list > li + li { margin-top: 0.625rem; }
}
@media (max-width: 1023px) {
    .footer-legal-link { padding: 0.5rem 0; }
}
.footer-link, .footer-legal-link { font-size: 0.875rem; line-height: 1.25rem; color: rgb(156, 163, 175); transition: color 0.15s ease; }
.footer-link:hover, .footer-legal-link:hover { color: #fff; }
.footer-bottom {
    margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(31, 41, 55);
    display: flex; flex-direction: column; gap: 0.75rem;
    font-size: 0.75rem; line-height: 1.125rem; color: rgb(107, 114, 128);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.footer-legal-link { font-size: 0.75rem; line-height: 1.125rem; }
@media (min-width: 1280px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem; }
    .footer-bottom > p { flex-shrink: 0; }
    .footer-legal { justify-content: flex-end; }
}