/* =========================================
   KanisaHub — custom overrides
   Loaded after new_assets/css/style.css
   ========================================= */


/* =========================================
   Font Awesome — collapse unused weights
   =========================================
   The markup only ever uses .fas (solid) and .fab (brands), but the theme
   leaks stray font-weights (100/300/400/500) onto icons and icon pseudo-
   elements, so the browser matched and downloaded the Light (185KB) and
   Regular (169KB) faces too — 354KB for a handful of glyphs.

   Re-pointing those two @font-face weights at the Solid file (which loads
   anyway, and in FA5 Free is a superset of Regular) means every icon
   resolves to one already-downloaded font. Declared here because this file
   loads after font-awesome.min.css, so these win on family+weight. Paths are
   relative to /public. Targeting the faces rather than the elements also
   catches ::before/::after icons, which no class selector could reach. */
@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(new_assets/fonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(new_assets/fonts/fa-solid-900.woff2) format("woff2");
}

/* =========================================
   Preloader — fade out (see main-layout.blade.php)
   ========================================= */
#preloader {
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================
   Hero banner — dashboard preview & scroll fade
   ========================================= */
.kh-hero-area {
    position: relative;
    overflow: hidden;
}

.kh-hero-area.default-padding {
    padding-bottom: 0;
}

.kh-hero-content-scrub,
.kh-dash-scrub {
    will-change: transform, opacity;
}

/* Framed browser mockup. GSAP ScrollTrigger (see hero.blade.php script)
   pins this to the vertical center of the viewport once it gets there,
   using position: fixed under the hood — no positioning needed here. */
.kh-dash-scrub {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 80px auto 0;
    margin-bottom: -3rem;
}

/* The frame is a fixed 16/9 box, so its height is driven entirely by its
   width — at the full 1080px it stands ~640px tall, which is more than the
   usable viewport on a 1280x720 or 1366x768 laptop. GSAP then pins it at
   "center center" and the top and bottom get clipped off screen. Cap the
   width by the available viewport height as well, so the whole window
   mockup always fits. The 210px reserve covers the window chrome bar, the
   pinned zoom below, and clearance for the fixed navbar.
   Browsers without min()/calc() keep the 1080px above. */
.kh-dash-scrub {
    max-width: min(1080px, calc((100vh - 210px) * 16 / 9));
}

/* Zoom cue: makes it clear the hold is intentional, not the page hanging.
   Applied to .kh-dash-frame rather than .kh-dash-scrub, because GSAP's pin
   sets its own inline transform on .kh-dash-scrub (the pinned element),
   which would silently override a class-based transform placed there.
   The translateY re-centres the frame into the band *below* the fixed
   navbar: the pin centres it in the raw viewport, so without this the
   navbar sits over the top ~28px of the window chrome on short screens. */
.kh-dash-scrub.is-pinned .kh-dash-frame {
    transform: translateY(40px) scale(1.045);
}

/* Soft glow behind the frame */
.kh-dash-scrub::before {
    content: '';
    position: absolute;
    inset: -10% -8%;
    /* background: radial-gradient(ellipse at 50% 20%, rgba(5, 150, 105, 0.28) 0%, transparent 65%); */
    filter: blur(24px);
    pointer-events: none;
}

/* Gradient ring around the window */
.kh-dash-frame {
    position: relative;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(5, 150, 105, 0.45) 45%, rgba(255, 255, 255, 0.55) 100%);
    box-shadow:
        0 45px 90px -25px rgba(6, 95, 70, 0.35),
        0 18px 40px -18px rgba(15, 23, 42, 0.25);
    transition: transform 0.5s ease;
}

.kh-dash-frame__inner {
    border-radius: 17px;
    overflow: hidden;
    background: #ffffff;
}

/* Window top bar. height:auto is forced because GSAP's pin (see
   hero.blade.php) leaves this flex row's auto-height calculation stuck at
   the frame's full height instead of its own small content height — the
   !important is required, a plain override doesn't win against it. */
.kh-dash-frame__bar {
    display: flex;
    align-items: center;
    flex: none;
    padding: 12px 18px;
    background: #ffffff;
    border-bottom: 1px solid #eef1f4;
    position: relative;
    height: auto !important;
}

.kh-dash-frame__dots {
    display: flex;
    gap: 7px;
}

.kh-dash-frame__dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.kh-dash-frame__dots span:nth-child(1) { background: #ff5f57; }
.kh-dash-frame__dots span:nth-child(2) { background: #febc2e; }
.kh-dash-frame__dots span:nth-child(3) { background: #28c840; }

.kh-dash-frame__url {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 100px;
    padding: 5px 18px;
    line-height: 1.4;
}

.kh-dash-frame__url i {
    font-size: 9px;
    color: #059669;
}

/* Screen area */
.kh-dash-frame__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #f8fafc;
    overflow: hidden;
}

/* Real screenshot (once available) */
.kh-dash-frame__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Sliding track that carries the rotating dashboard previews */
.kh-dash-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.kh-dash-slide {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    height: 100%;
}

/* Loading bar that sweeps across the window chrome right before a preview
   swap, simulating the browser navigating to a new page */
.kh-dash-frame__loadbar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: #059669;
    opacity: 0;
}

.kh-dash-frame__loadbar.is-active {
    animation: kh-loadbar-sweep 1.1s ease forwards;
}

@keyframes kh-loadbar-sweep {
    0% { width: 0; opacity: 1; }
    45% { width: 100%; opacity: 1; }
    70% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}


/* Bottom fade into the next section */
.kh-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 80%, #f8f9fa68 20%);
    pointer-events: none;
    z-index: 2;
}

/* Short laptop screens (1280x720, 1366x768 …). Paired with min-width so it
   never catches phones in portrait, which are narrow but also short. The
   theme's 120px hero padding and 80px display heading push the frame most of
   a screen down on these, so tighten the copy block above it too. */
@media (min-width: 992px) and (max-height: 820px) {
    .kh-hero-area.default-padding {
        padding-top: 70px;
    }

    .kh-hero-area .banner-one-content h2 {
        font-size: 54px;
        margin-bottom: 20px;
    }

    .kh-hero-area .banner-one-content .button.mt-30 {
        margin-top: 18px;
    }

    .kh-dash-scrub {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .kh-dash-frame__url {
        display: none;
    }

    .kh-dash-ph__side {
        min-width: 84px;
        padding: 14px 12px;
    }

    .kh-dash-ph__main {
        padding: 16px;
        gap: 12px;
    }

    .kh-dash-ph__cards {
        gap: 8px;
    }

    .kh-dash-ph__cards span {
        height: 40px;
    }

    .kh-hero-fade {
        height: 110px;
    }
}

/* =========================================
   Cursor tracker (dot + trailing ring + glow)
   ========================================= */
.kh-cursor__dot,
.kh-cursor__ring,
.kh-cursor__glow {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.kh-cursor__dot {
    width: 6px;
    height: 6px;
    background: #059669;
    z-index: 100002;
    transition: opacity 0.3s ease;
}

.kh-cursor__ring {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(5, 150, 105, 0.55);
    background: rgba(5, 150, 105, 0);
    z-index: 100001;
    transition:
        opacity 0.3s ease,
        width 0.25s ease,
        height 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.kh-cursor__glow {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.13) 0%, transparent 70%);
    mix-blend-mode: multiply;
    z-index: 100000;
    transition: opacity 0.5s ease;
}

/* Shown after first mouse move, hidden when leaving the window */
body.kh-cursor-on .kh-cursor__dot,
body.kh-cursor-on .kh-cursor__ring,
body.kh-cursor-on .kh-cursor__glow {
    opacity: 1;
}

/* Expand over links, buttons & inputs */
body.kh-cursor-hover .kh-cursor__ring {
    width: 60px;
    height: 60px;
    border-color: rgba(5, 150, 105, 0.3);
    background: rgba(5, 150, 105, 0.08);
}

/* Squeeze on click */
body.kh-cursor-down .kh-cursor__ring {
    width: 26px;
    height: 26px;
    border-color: rgba(5, 150, 105, 0.9);
}

@media (hover: none), (pointer: coarse) {
    .kh-cursor {
        display: none;
    }
}

/* =========================================
   Features page — quick-nav pills & checklist
   ========================================= */
.kh-quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.kh-quicklinks a {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 100px;
    background: #ffffff;
    border: 1px solid rgba(5, 150, 105, 0.25);
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.kh-quicklinks a:hover {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    transform: translateY(-2px);
}

.kh-check-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.kh-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.6;
}

.kh-check-list li i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.text-light .kh-check-list li i {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* =========================================
   Back to top button
   ========================================= */
.kh-back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #059669;
    color: #ffffff;
    font-size: 16px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.kh-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kh-back-to-top:hover {
    background: #047857;
    color: #ffffff;
}

@media (max-width: 767px) {
    .kh-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* =========================================
   Announcement bar
   ========================================= */
:root {
    --kh-announcement-offset: 0px;
}

/* The theme's fixed nav defaults to top:0 (see validnavs.css); push it down
   below the announcement bar. Skipped once scrolled (.sticked) since the bar
   has already scrolled out of view by then. */
nav.navbar.validnavs.navbar-fixed.no-background:not(.sticked) {
    top: var(--kh-announcement-offset, 0px);
}

.kh-announcement-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 48px;
    background: #059669;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
}

.kh-announcement-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kh-announcement-message {
    font-weight: 500;
}

.kh-announcement-cta {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.kh-announcement-cta:hover {
    color: #d1fae5;
}

.kh-announcement-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #ffffff;
    opacity: 0.8;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.kh-announcement-close:hover {
    opacity: 1;
}

@media (max-width: 575px) {
    .kh-announcement-bar {
        padding: 10px 40px;
        font-size: 13px;
    }
}