/* The Underlinks v1.0.1 public theme consistency layer.
   Loaded after every generated theme so shared components keep correct contrast. */

/* Header: one selected theme palette on home, inner pages, sticky state and mobile. */
.navbar-area,
.navbar-area.is-sticky,
.navbar-area.nav-light.is-sticky,
.navbar-area.nav-dark.is-sticky {
    min-height: var(--theme-header-height, 88px) !important;
    height: auto !important;
    background: var(--theme-header-bg, #031427) !important;
    color: var(--theme-menu-text, #fff) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-menu-text, #fff) 14%, transparent) !important;
}
.navbar-area .navbar {
    min-height: var(--theme-header-height, 88px) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.navbar-area .navbar-brand img.main-logo,
.navbar-area .navbar-brand img.white-logo,
.navbar-area .mobile-responsive-menu .logo img {
    max-height: var(--theme-logo-height, 54px) !important;
}
.navbar-area .navbar,
.navbar-area .desktop-nav,
.navbar-area .mobile-responsive-nav,
.navbar-area .mobile-responsive-menu,
.navbar-area .offcanvas,
.navbar-area .offcanvas-header,
.navbar-area .offcanvas-body {
    background-color: inherit !important;
}
.desktop-nav .offcanvas-body > .navbar-nav {
    gap: var(--theme-menu-link-gap, 14px) !important;
}
.desktop-nav .offcanvas-body > .navbar-nav > .nav-item > .nav-link,
.navbar-area .nav-others > a,
.navbar-area .nav-others > button {
    color: var(--theme-menu-text, #fff) !important;
    font-family: var(--theme-nav-font, Inter, Arial, sans-serif) !important;
    font-size: var(--theme-menu-font-size, 16px) !important;
    line-height: 1.25 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Select the logo that contrasts with the configured header, on every page. */
body[data-header-tone="dark"] .navbar-area .main-logo { display: none !important; }
body[data-header-tone="dark"] .navbar-area .white-logo { display: block !important; }
body[data-header-tone="light"] .navbar-area .white-logo { display: none !important; }
body[data-header-tone="light"] .navbar-area .main-logo { display: block !important; }
.desktop-nav .offcanvas-body > .navbar-nav > .nav-item > .nav-link:hover,
.desktop-nav .offcanvas-body > .navbar-nav > .nav-item > .nav-link:focus,
.desktop-nav .offcanvas-body > .navbar-nav > .nav-item > .nav-link.active {
    color: var(--theme-accent, #2f6bff) !important;
}
.navbar-area :where(.nav-others i, .responsive-burger-menu i, .offcanvas-header i) {
    color: var(--theme-menu-text, #fff) !important;
}

/* Dropdowns are cards, not extensions of the dark header. */
.navbar-area .dropdown-menu,
.navbar-area .dropdown-menu li {
    background: var(--theme-card-bg, #fff) !important;
    color: var(--theme-card-text, #17212b) !important;
    border-color: var(--theme-border, #dce2ea) !important;
}
.navbar-area .dropdown-menu .nav-link,
.navbar-area .dropdown-menu .dropdown-item,
.navbar-area .dropdown-menu a {
    color: var(--theme-card-text, #17212b) !important;
    background: transparent !important;
    font-size: calc(var(--theme-menu-font-size, 16px) - 1px) !important;
}
.navbar-area .dropdown-menu .nav-link:hover,
.navbar-area .dropdown-menu .nav-link:focus,
.navbar-area .dropdown-menu .dropdown-item:hover,
.navbar-area .dropdown-menu a:hover {
    color: var(--theme-heading-text, #0b1f33) !important;
    background: color-mix(in srgb, var(--theme-accent, #2f6bff) 14%, transparent) !important;
}

/* Theme Studio menu alignment now works instead of always being forced to center. */
@media (min-width: 992px) {
    body[data-menu-alignment="center"] .desktop-nav .navbar-collapse {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: calc(100% - 420px) !important;
        justify-content: center !important;
    }
    body[data-menu-alignment="center"] .desktop-nav .offcanvas-body { justify-content: center !important; }

    body[data-menu-alignment="left"] .desktop-nav .navbar-collapse,
    body[data-menu-alignment="right"] .desktop-nav .navbar-collapse {
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }
    body[data-menu-alignment="left"] .desktop-nav .offcanvas-body { justify-content: flex-start !important; }
    body[data-menu-alignment="right"] .desktop-nav .offcanvas-body { justify-content: flex-end !important; }
}

/* Inner pages: replace the legacy pink/teal gradient with the active theme colors. */
.underlinks-inner-page .navbar-area {
    position: sticky !important;
    top: 0 !important;
}
.underlinks-inner-page .page-banner-area,
.underlinks-inner-page .theme-gradient-3 {
    background-color: var(--theme-header-bg, #031427) !important;
    background-image: linear-gradient(
        135deg,
        var(--theme-header-bg, #031427) 0%,
        color-mix(in srgb, var(--theme-header-bg, #031427) 82%, var(--theme-accent, #2f6bff)) 100%
    ) !important;
}
.underlinks-inner-page .page-banner-area {
    padding-top: clamp(70px, 8vw, 105px) !important;
    padding-bottom: clamp(64px, 7vw, 96px) !important;
}
.underlinks-inner-page .page-banner-area :where(h1, h2, h3, p, a, li, span, .breadcrumb-item, .breadcrumb-item.active) {
    color: var(--theme-menu-text, #fff) !important;
}
.underlinks-inner-page .page-banner-area .breadcrumb-item + .breadcrumb-item::before {
    color: color-mix(in srgb, var(--theme-menu-text, #fff) 68%, transparent) !important;
}
.underlinks-inner-page :where(.our-feature-request, .our-contact-form, .pricing-area, .blog-area, .blog-section) {
    background: var(--theme-page-bg, #f5f7fa) !important;
}
.underlinks-inner-page .term-content {
    padding: clamp(24px, 4vw, 42px) !important;
    color: var(--theme-card-text, #17212b) !important;
}
.underlinks-inner-page .term-content :where(p, li, td, th, span, strong) {
    color: var(--theme-card-text, #17212b) !important;
}
.underlinks-inner-page .term-content :where(h1, h2, h3, h4, h5, h6) {
    color: var(--theme-heading-text, #0b1f33) !important;
}

/* Homepage hero preview card: preserve a dark readable card inside the hero. */
.ts-hero .ts-artist-demo {
    background: color-mix(in srgb, var(--theme-hero-bg, #02101f) 88%, var(--theme-card-bg, #fff)) !important;
    color: var(--theme-hero-text, #fff) !important;
    border-color: color-mix(in srgb, var(--theme-hero-text, #fff) 34%, transparent) !important;
    box-shadow: var(--theme-card-shadow, 0 16px 38px rgba(15, 23, 42, .14)) !important;
}
.ts-hero .ts-artist-demo :where(h1, h2, h3, h4, h5, h6, p, span, .ts-artist-subtitle) {
    color: var(--theme-hero-text, #fff) !important;
}
.ts-hero .ts-artist-demo .ts-artist-subtitle {
    opacity: .76 !important;
}
.ts-hero .ts-demo-link {
    color: var(--theme-hero-text, #fff) !important;
    background: color-mix(in srgb, var(--theme-hero-text, #fff) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-hero-text, #fff) 18%, transparent) !important;
}
.ts-hero .ts-demo-link:hover {
    color: var(--theme-hero-text, #fff) !important;
    background: color-mix(in srgb, var(--theme-accent, #2f6bff) 22%, transparent) !important;
}

/* Keep home sections in a compact, derived palette rather than unrelated hardcoded whites. */
.ts-section-white {
    background: color-mix(in srgb, var(--theme-page-bg, #f5f7fa) 84%, var(--theme-card-bg, #fff)) !important;
}
.ts-section-dark,
.ts-stat-panel {
    background: var(--theme-hero-bg, #02101f) !important;
    color: var(--theme-hero-text, #fff) !important;
}
.ts-stat-panel :where(strong, span, p, h1, h2, h3, h4, h5, h6) {
    color: var(--theme-hero-text, #fff) !important;
}

@media (max-width: 991px) {
    .navbar-area {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .navbar-area .offcanvas {
        background: var(--theme-header-bg, #031427) !important;
    }
    .navbar-area .offcanvas-body > .navbar-nav > .nav-item > .nav-link {
        color: var(--theme-menu-text, #fff) !important;
        font-size: var(--theme-menu-font-size, 16px) !important;
    }
    .navbar-area .dropdown-menu {
        box-shadow: none !important;
    }
    .underlinks-inner-page .page-banner-area {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }
}