/* App fixes for the website design bundle. The copied bundle stays untouched
   so a new design export can replace it. */

/* The topbar note is left out when registration is closed, so drop the space
   the navbar and hero reserve for it. */
:root:not(:has(.topbar-note)) {
    --tn-h: 0px
}

/* Language switch: the outline goes on the rounded pill. On the square buttons
   the pill's overflow clip cuts the border off at the ends. */
.lang-switch {
    border: 1.5px solid rgba(var(--vz-primary-rgb), .25)
}

.lang-switch .btn {
    border-width: 0
}

.lang-switch.btn-group > .btn + .btn {
    margin-left: 0
}

/* The design's `.nav-actions .btn-primary` breakpoint rules, meant for the
   Start free button, also match the active language button and make the pill
   taller at 992–1199px. Keep both language buttons at their small size. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-actions .lang-switch .btn-primary {
        padding: var(--vz-btn-padding-y) var(--vz-btn-padding-x);
        font-size: var(--vz-btn-font-size)
    }
}

@media (max-width: 991.98px) {
    .nav-actions .lang-switch .btn-primary {
        flex: 1 1 auto
    }
}

/* Client logos: clip the rows sideways only, and give the strip room above and
   below (the negative margins keep the layout), so neither the clip nor the
   fade mask cuts a tile's border and shadow when it lifts on hover. */
.marquee {
    padding: 8px 0 24px;
    margin: -8px 0 -24px
}

.marquee-row {
    overflow-x: clip;
    overflow-y: visible
}

/* Back-to-top: Velzon's `#back-to-top.landing-back-top` ID rule outranks the
   design's offsets and hides the button behind the bot button. */
#back-to-top.landing-back-top {
    right: 20px;
    bottom: calc(82px + env(safe-area-inset-bottom))
}

@media (max-width: 575.98px) {
    #back-to-top.landing-back-top {
        right: 16px
    }
}

/* Security cards: the design colours `.sec-card h5` white, but the titles are
   `<h3 class="h5">`, which get Velzon's dark heading colour on the navy. */
.section-navy .sec-card .h5 {
    color: #fff
}

/* Theme switch: the moon shows in light mode and the sun in dark mode, so the
   icon names the mode a click switches to. */
.theme-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50% !important;
    border: 1.5px solid rgba(var(--vz-primary-rgb), .25);
    background: var(--vz-secondary-bg);
    color: var(--vz-heading-color);
    box-shadow: 0 6px 16px -10px rgba(10, 27, 69, .5)
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--vz-link-color);
    border-color: rgba(var(--vz-primary-rgb), .5)
}

.theme-toggle-sun,
[data-bs-theme=dark] .theme-toggle-moon {
    display: none
}

[data-bs-theme=dark] .theme-toggle-sun {
    display: block
}

@media (max-width: 991.98px) {
    .theme-toggle {
        width: 44px;
        height: 44px
    }
}

/* Dark mode: the BORANG navy palette, set through the design's own tokens so
   most sections follow. Fills keep the brand blue, while --vz-primary-rgb is
   lighter because it also colours text and icons on the navy. */
:root[data-bs-theme=dark][data-theme-colors=blue] {
    --vz-body-bg: #0a1230;
    --vz-body-bg-rgb: 10, 18, 48;
    --vz-body-color: #c5d0ee;
    --vz-body-color-rgb: 197, 208, 238;
    --vz-emphasis-color: #f2f5ff;
    --vz-heading-color: #f2f5ff;
    --vz-secondary-color: #97a6cf;
    --vz-secondary-color-rgb: 151, 166, 207;
    --vz-secondary-bg: #111f48;
    --vz-secondary-bg-rgb: 17, 31, 72;
    --vz-tertiary-bg: #16275a;
    --vz-light: #0d1838;
    --vz-light-rgb: 13, 24, 56;
    --vz-light-bg-subtle: #0e1a40;
    --vz-light-border-subtle: #22356e;
    --vz-border-color: #22356e;
    --vz-border-color-translucent: rgba(125, 155, 255, .18);
    --vz-primary-rgb: 125, 155, 255;
    --vz-primary-text-emphasis: #b4c4ff;
    --vz-primary-bg-subtle: rgba(125, 155, 255, .14);
    --vz-primary-border-subtle: rgba(125, 155, 255, .3);
    --vz-link-color: #8fa8ff;
    --vz-link-color-rgb: 143, 168, 255;
    --vz-link-hover-color: #b4c4ff;
    --vz-link-hover-color-rgb: 180, 196, 255;
    --vz-input-bg-custom: #0d1838;
    --vz-input-border-custom: #22356e;
    --t-ice: #0d1838;
    --t-ice2: #101e46;
    --t-line: #22356e;
    --bn-ice: #0d1838;
    --bn-ice2: #101e46;
    --bn-line: #22356e
}

/* Dark surfaces for the parts the design paints white. */
[data-bs-theme=dark] body,
[data-bs-theme=dark] .legal-page,
[data-bs-theme=dark] .layout-wrapper.landing {
    background: var(--vz-body-bg)
}

[data-bs-theme=dark] .navbar-landing {
    background: rgba(10, 18, 48, .92) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 0 var(--vz-border-color), 0 10px 30px -18px rgba(0, 0, 0, .7)
}

[data-bs-theme=dark] .legal-nav {
    background: rgba(10, 18, 48, .92)
}

[data-bs-theme=dark] .lang-switch,
[data-bs-theme=dark] .lang-switch .btn-outline-primary,
[data-bs-theme=dark] .plan-badge-soft,
[data-bs-theme=dark] .feature-card:hover,
[data-bs-theme=dark] #faq .accordion-item,
[data-bs-theme=dark] .contact-embed,
[data-bs-theme=dark] .contact-embed-body,
[data-bs-theme=dark] .compare-table th:first-child,
[data-bs-theme=dark] .compare-table td:first-child {
    background: var(--vz-secondary-bg)
}

[data-bs-theme=dark] .share-tile:hover,
[data-bs-theme=dark] .ce-person,
[data-bs-theme=dark] .legal-toc-list a:hover,
[data-bs-theme=dark] .compare-table tbody tr:hover td:not(.table-primary-col) {
    background: var(--vz-tertiary-bg)
}

[data-bs-theme=dark] .hero-section .hero-shape-svg svg path {
    fill: var(--vz-body-bg)
}

[data-bs-theme=dark] .compare-table {
    --vz-table-bg: var(--vz-secondary-bg);
    --vz-table-color: var(--vz-body-color)
}

[data-bs-theme=dark] .compare-scroll {
    background: linear-gradient(90deg, var(--vz-secondary-bg) 30%, rgba(17, 31, 72, 0)) left center/40px 100% no-repeat local,
    linear-gradient(270deg, var(--vz-secondary-bg) 30%, rgba(17, 31, 72, 0)) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .5), transparent) right center/14px 100% no-repeat scroll
}

[data-bs-theme=dark] .ce-direct,
[data-bs-theme=dark] .ce-grid .ce-direct {
    background: linear-gradient(180deg, var(--vz-secondary-bg), var(--t-ice))
}

[data-bs-theme=dark] .ce-divider span {
    background: var(--vz-secondary-bg)
}

[data-bs-theme=dark] .embed-skeleton span {
    background: linear-gradient(90deg, #16275a 25%, #1c3068 37%, #16275a 63%);
    background-size: 400% 100%
}

/* Client logos are dark artwork, so their tiles stay light, a step down from
   white to sit quietly on the navy. */
[data-bs-theme=dark] .client-tile {
    background: #e6ecf8;
    border-color: transparent
}

[data-bs-theme=dark] .icon-effect .avatar-title {
    box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08)
}

/* Text the design colours with the deep brand blue, which is too dark to read
   on the navy. */
[data-bs-theme=dark] .navbar-landing .navbar-nav .nav-item .nav-link:hover,
[data-bs-theme=dark] .navbar-landing .navbar-nav .nav-item .nav-link.active,
[data-bs-theme=dark] .icon-effect .avatar-title,
[data-bs-theme=dark] .plan-box .avatar-title,
[data-bs-theme=dark] .contact-card .avatar-title,
[data-bs-theme=dark] .plan-box li .text-success,
[data-bs-theme=dark] #usecases li .text-success {
    color: var(--vz-link-color) !important
}

[data-bs-theme=dark] .btn-soft-primary,
[data-bs-theme=dark] .plan-badge-soft,
[data-bs-theme=dark] .lang-switch .btn-outline-primary,
[data-bs-theme=dark] .quick button,
[data-bs-theme=dark] .share-tile,
[data-bs-theme=dark] #faq .accordion-button:not(.collapsed),
[data-bs-theme=dark] .legal-toc-title,
[data-bs-theme=dark] .legal-toc-list a:hover,
[data-bs-theme=dark] .legal-sec h2 .num,
[data-bs-theme=dark] .legal-sec a,
[data-bs-theme=dark] .legal-sec code,
[data-bs-theme=dark] .legal-details summary::after,
[data-bs-theme=dark] .ce-lock,
[data-bs-theme=dark] .ce-avatar {
    color: var(--vz-link-color)
}

[data-bs-theme=dark] .lang-switch .btn-outline-primary:hover {
    color: var(--vz-link-hover-color)
}

[data-bs-theme=dark] .btn-outline-primary {
    background: transparent;
    color: var(--vz-link-color)
}

[data-bs-theme=dark] #faq .accordion-button,
[data-bs-theme=dark] .float-card {
    color: var(--vz-heading-color)
}

[data-bs-theme=dark] .float-card .text-muted {
    color: var(--vz-secondary-color) !important
}

/* Velzon's red on its own translucent tint falls just short of AA on navy. */
[data-bs-theme=dark] .bg-danger-subtle.text-danger {
    color: #ff8a70 !important
}

[data-bs-theme=dark] .legal-intro,
[data-bs-theme=dark] .legal-sec p,
[data-bs-theme=dark] .legal-sec li {
    color: var(--vz-body-color)
}

/* The white call-to-action buttons on the blue bands keep the brand blue,
   and Velzon's dark outline-light turns grey, so it is put back to white. */
[data-bs-theme=dark] .btn-light.text-primary {
    color: var(--vz-primary) !important
}

[data-bs-theme=dark] .btn-outline-light {
    --vz-btn-color: #fff;
    --vz-btn-border-color: rgba(255, 255, 255, .55);
    --vz-btn-hover-color: var(--vz-primary);
    --vz-btn-hover-bg: #fff
}