/*
 * Kwital header mega menu (Features dropdown), desktop panel + mobile drawer accordion.
 * Markup: site/partials/header.blade.php (.km-*). Behaviour: [data-ks-drop] in js/site.js.
 * Uses its own WhatsApp palette so the menu looks the same on pages with and without wa.css.
 */

.km-mega {
    --km-wa: #25d366;
    --km-teal: #128c7e;
    --km-dark: #075e54;
    --km-ink: #0b1f1a;
    --km-text: #2f403b;
    --km-muted: #5d6f69;
    --km-line: #e1ebe6;
    --km-tint: #effaf4;
}
.km-group { --t1: #25d366; --t2: #128c7e; }
.km-group[data-tone="audience"] { --t1: #38bdf8; --t2: #2563eb; }
.km-group[data-tone="engagement"] { --t1: #fb923c; --t2: #ea580c; }
.km-group[data-tone="automation"] { --t1: #a78bfa; --t2: #6d28d9; }
.km-group[data-tone="operations"] { --t1: #2dd4bf; --t2: #0f766e; }

/* ---------- Toggle ---------- */
.ks-nav-drop.is-open > .ks-nav-drop-toggle { color: #075e54; background: #e9f8f1; }
.ks-nav-drop-toggle i { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Items (shared by desktop and mobile) ---------- */
.km-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.km-group-head {
    display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0 10px;
    color: var(--km-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.4;
}
.km-group-head i { font-size: 15px; color: var(--t2); }
.km-group-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--km-line), transparent); }

.km-link {
    position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 10px; border-radius: 14px;
    color: var(--km-ink); text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.km-link:hover, .km-link:focus-visible {
    color: var(--km-ink); background: linear-gradient(135deg, rgba(37, 211, 102, .09), rgba(18, 140, 126, .05));
    box-shadow: inset 0 0 0 1px rgba(18, 140, 126, .14); transform: translateY(-1px);
}
.km-link:focus-visible { outline: 3px solid rgba(18, 140, 126, .45); outline-offset: 1px; }
.km-icon {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(135deg, var(--t1), var(--t2)); color: #fff; font-size: 19px;
    box-shadow: 0 8px 16px -8px var(--t2), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.km-link:hover .km-icon, .km-link:focus-visible .km-icon { transform: scale(1.07) rotate(-4deg); }
.km-text { display: flex; flex-direction: column; min-width: 0; }
.km-title { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }
.km-title i { font-size: 14px; color: var(--km-teal); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.km-link:hover .km-title i, .km-link:focus-visible .km-title i { opacity: 1; transform: none; }
.km-desc {
    display: -webkit-box; overflow: hidden; color: var(--km-muted); font-size: 12.5px; line-height: 1.4;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.km-link.is-current { background: var(--km-tint); box-shadow: inset 0 0 0 1px rgba(18, 140, 126, .28); }
.km-link.is-current::after {
    content: ""; position: absolute; top: 50%; right: 12px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
    background: var(--km-wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18);
}
.km-link.is-current .km-text { padding-right: 18px; }

/* ---------- Featured panel ---------- */
.km-panel {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px;
    border-radius: 20px; color: rgba(255, 255, 255, .78);
    background:
        radial-gradient(260px circle at 100% 0%, rgba(37, 211, 102, .38), transparent 60%),
        radial-gradient(220px circle at 0% 100%, rgba(18, 140, 126, .45), transparent 60%),
        linear-gradient(160deg, #075e54 0%, #0a4a42 55%, #0b2f2a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.km-panel-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #7ff0ae; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.km-panel-eyebrow i { font-size: 15px; }
.km-panel-title { color: #fff; font-size: 19px; font-weight: 750; line-height: 1.25; letter-spacing: -.015em; }
.km-panel p { margin: 0; font-size: 13.5px; line-height: 1.55; }

.km-chat { margin: 6px 0 4px; overflow: hidden; border-radius: 16px; background: #efeae2; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.km-chat-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #0b3d36; color: #fff; font-size: 12.5px; line-height: 1.2; }
.km-chat-head b { display: block; font-weight: 650; }
.km-chat-head small { color: #7ff0ae; font-size: 11px; }
.km-chat-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #dff5ea; color: #075e54; font-size: 15px; }
.km-chat-body { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.km-bubble {
    max-width: 86%; padding: 6px 9px; border-radius: 10px; color: #111b21; font-size: 12px; line-height: 1.4;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .12);
    animation: km-pop .4s cubic-bezier(.2, .8, .2, 1) both;
}
.km-bubble.is-in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.km-bubble.is-out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; animation-delay: .25s; }
.km-bubble i { margin-left: 2px; color: #53bdeb; font-size: 13px; vertical-align: -2px; }

.km-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: auto; padding: 0 16px;
    border-radius: 12px; background: #25d366; color: #0b141a; font-size: 14.5px; font-weight: 700; text-decoration: none;
    box-shadow: 0 12px 24px -12px rgba(37, 211, 102, .8); transition: filter .18s, transform .18s, box-shadow .18s;
}
.km-cta:hover, .km-cta:focus-visible { color: #0b141a; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(37, 211, 102, .9); }
.km-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.km-cta i { transition: transform .18s; }
.km-cta:hover i { transform: translateX(3px); }

/* ---------- Footer strip ---------- */
.km-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
    margin-top: 12px; padding: 12px 10px 2px; border-top: 1px dashed var(--km-line); color: var(--km-muted); font-size: 13px;
}
.km-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.km-foot > span:first-child i { color: var(--km-teal); font-size: 16px; }
.km-foot-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.km-foot-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--km-dark); font-weight: 650; text-decoration: none; }
.km-foot-links a:hover { color: var(--km-teal); }
.km-foot-links .ti-brand-whatsapp { color: var(--km-wa); font-size: 16px; }

@keyframes km-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes km-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Desktop panel ---------- */
@media (min-width: 961px) {
    .ks-nav-drop { position: static; }
    .km-mega {
        position: absolute; top: calc(100% - 4px); left: 50%; z-index: 60;
        display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px;
        width: min(1140px, calc(100vw - 32px)); padding: 20px; border: 1px solid rgba(225, 235, 230, .95); border-radius: 24px;
        background: #fff;
        box-shadow: 0 40px 80px -30px rgba(7, 94, 84, .38), 0 14px 32px -14px rgba(11, 31, 26, .16);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translate(-50%, 10px) scale(.985); transform-origin: 50% 0;
        transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s;
    }
    .km-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
    .km-mega::after {
        content: ""; position: absolute; top: -1px; left: 40px; right: 40px; height: 3px; border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, transparent, #128c7e 20%, #25d366 50%, #128c7e 80%, transparent);
    }
    .ks-nav-drop.is-open .km-mega {
        opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1);
        transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s;
    }
    .km-main { display: flex; flex-direction: column; min-width: 0; padding: 6px 2px 0; }
    .km-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
    .km-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
    .km-panel { opacity: 0; transform: translateX(10px); transition: opacity .3s ease .12s, transform .35s cubic-bezier(.2, .8, .2, 1) .12s; }
    .ks-nav-drop.is-open .km-col, .ks-nav-drop.is-open .km-panel { opacity: 1; transform: none; }
    .ks-nav-drop.is-open .km-col:nth-child(2) { transition-delay: .04s; }
    .ks-nav-drop.is-open .km-col:nth-child(3) { transition-delay: .08s; }
    .km-bubble { animation-play-state: paused; }
    .ks-nav-drop.is-open .km-bubble { animation-play-state: running; }
}
@media (min-width: 961px) and (max-width: 1180px) {
    .km-mega { grid-template-columns: minmax(0, 1fr) 250px; padding: 16px; gap: 14px; }
    .km-cols { gap: 6px 8px; }
    .km-panel { padding: 18px; }
    .km-panel-title { font-size: 17px; }
    .km-cta { padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
    .km-link { gap: 10px; padding: 8px; }
    .km-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; }
}

/* ---------- Mobile drawer ---------- */
@media (max-width: 960px) {
    .km-mega {
        display: none; gap: 14px; margin: 2px 0 10px; padding: 12px; border: 1px solid var(--km-line); border-radius: 18px;
        background: linear-gradient(180deg, #f6fbf8, #fff);
    }
    .ks-nav-drop.is-open .km-mega { display: grid; animation: km-drop .25s ease both; }
    .ks-nav-drop.is-open > .ks-nav-drop-toggle { border-radius: 12px; }
    .km-main, .km-cols, .km-col { display: grid; gap: 14px; min-width: 0; }
    .km-link { padding: 8px; gap: 11px; }
    .km-link:hover, .km-link:focus-visible { transform: none; }
    .km-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
    .km-title { font-size: 15px; }
    .km-desc { -webkit-line-clamp: 1; line-clamp: 1; }
    .km-foot, .km-chat, .km-panel p { display: none; }
    .km-panel { gap: 8px; padding: 16px; border-radius: 16px; }
    .km-panel-title { font-size: 16px; }
    .km-cta { margin-top: 4px; }
    body:has(.ks-nav.is-open) .kh-wa-fab { display: none; }
}