/* ============================================================
   KPBG Dynamic Nav Buttons — v1.0.0
   Professional sticky navigation with icon + keyword buttons
   ============================================================ */

/* ── Design tokens (overridden per-block via inline style) ── */
.kpbg-nav-wrap {
    --kpbg-nav-accent:       #0073aa;
    --kpbg-nav-hover:        #005d8c;
    --kpbg-nav-bg:           #ffffff;
    --kpbg-nav-border:       rgba(0, 115, 170, 0.18);
    --kpbg-nav-text:         #374151;
    --kpbg-nav-text-hover:   #ffffff;
    --kpbg-nav-shadow:       0 4px 24px rgba(0, 0, 0, 0.10);
    --kpbg-nav-radius-pill:  50px;
    --kpbg-nav-radius-round: 12px;
    --kpbg-nav-radius-sharp: 4px;
    --kpbg-nav-transition:   all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --kpbg-nav-active-glow:  0 0 0 3px rgba(0, 115, 170, 0.25);
}

/* ── Outer wrapper ──────────────────────────────────────────── */
.kpbg-nav-wrap {
    position: relative;
    z-index: 100;
    margin: 0 0 28px;
    padding: 0;
    background: transparent;
    width: 100%;
}

/* ── Sticky pinned state — DISABLED: nav always stays in normal document flow ── */
.kpbg-nav-wrap.kpbg-nav--sticky.kpbg-nav--pinned {
    position: relative;
    top: auto;
    z-index: 100;
    margin-bottom: 0;
    padding: 10px 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: none;
    animation: none;
}

/* ── Inner flex row ─────────────────────────────────────────── */
.kpbg-nav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Alignment variants */
.kpbg-nav--align-left   .kpbg-nav-inner { justify-content: flex-start; }
.kpbg-nav--align-center .kpbg-nav-inner { justify-content: center; }
.kpbg-nav--align-right  .kpbg-nav-inner { justify-content: flex-end; }

/* ── Base button ────────────────────────────────────────────── */
.kpbg-nav-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         9px 18px 9px 14px;
    text-decoration: none;
    font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size:       13.5px;
    font-weight:     600;
    letter-spacing:  0.01em;
    line-height:     1;
    white-space:     nowrap;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    border:          1.5px solid var(--kpbg-nav-border);
    color:           var(--kpbg-nav-text);
    background:      var(--kpbg-nav-bg);
    transition:      var(--kpbg-nav-transition);
    box-shadow:      0 1px 4px rgba(0, 0, 0, 0.07);
    user-select:     none;
}

/* Ripple pseudo-element */
.kpbg-nav-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--kpbg-nav-accent);
    opacity:    0;
    transition: opacity 0.22s;
}

/* ── Hover state ────────────────────────────────────────────── */
.kpbg-nav-btn:hover {
    color:        var(--kpbg-nav-text-hover);
    border-color: var(--kpbg-nav-accent);
    background:   var(--kpbg-nav-accent);
    box-shadow:   0 4px 16px rgba(0, 0, 0, 0.15);
    transform:    translateY(-2px);
}

.kpbg-nav-btn:hover .kpbg-nav-icon svg {
    stroke: #fff;
}

/* ── Active / current section — no active highlight ─────────── */
.kpbg-nav-btn.kpbg-nav-btn--active {
    /* intentionally unstyled — no active color indicator */
}

/* ── Focus (keyboard accessibility) ─────────────────────────── */
.kpbg-nav-btn:focus-visible {
    outline: 2px solid var(--kpbg-nav-accent);
    outline-offset: 3px;
}

/* ── Icon wrapper ───────────────────────────────────────────── */
.kpbg-nav-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.05);
    transition:      background 0.22s, transform 0.22s;
}

.kpbg-nav-btn:hover .kpbg-nav-icon {
    background: rgba(255, 255, 255, 0.20);
    transform:  rotate(-6deg) scale(1.1);
}

.kpbg-nav-icon svg {
    display: block;
    width:   14px;
    height:  14px;
    stroke:  var(--kpbg-nav-accent);
    transition: stroke 0.22s;
}

/* ── Label ───────────────────────────────────────────────────── */
.kpbg-nav-label {
    position: relative;
    z-index:  1;
}

/* Hide label (icon-only mode) */
.kpbg-nav--no-label .kpbg-nav-label { display: none; }
.kpbg-nav--no-label .kpbg-nav-btn   { padding: 9px 12px; }

/* ── Style variants ─────────────────────────────────────────── */

/* Pill */
.kpbg-nav--pill .kpbg-nav-btn {
    border-radius: var(--kpbg-nav-radius-pill);
}

/* Rounded */
.kpbg-nav--rounded .kpbg-nav-btn {
    border-radius: var(--kpbg-nav-radius-round);
}

/* Sharp */
.kpbg-nav--sharp .kpbg-nav-btn {
    border-radius: var(--kpbg-nav-radius-sharp);
}

/* Underline / minimal */
.kpbg-nav--underline .kpbg-nav-btn {
    border:           none;
    border-bottom:    2px solid transparent;
    border-radius:    0;
    background:       transparent;
    box-shadow:       none;
    padding-left:     8px;
    padding-right:    8px;
}

.kpbg-nav--underline .kpbg-nav-btn:hover {
    background:    transparent;
    color:         var(--kpbg-nav-accent);
    border-bottom: 2px solid var(--kpbg-nav-accent);
    transform:     none;
    box-shadow:    none;
}

.kpbg-nav--underline .kpbg-nav-btn:hover .kpbg-nav-icon svg {
    stroke: var(--kpbg-nav-accent);
}

/* Filled (solid background default) */
.kpbg-nav--filled .kpbg-nav-btn {
    border-radius: var(--kpbg-nav-radius-pill);
    background:    color-mix(in srgb, var(--kpbg-nav-accent) 10%, #fff);
    border-color:  transparent;
    color:         var(--kpbg-nav-accent);
}

.kpbg-nav--filled .kpbg-nav-btn .kpbg-nav-icon {
    background: color-mix(in srgb, var(--kpbg-nav-accent) 15%, transparent);
}



/* ── Mobile toggle ─────────────────────────────────────────── */
.kpbg-nav-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--kpbg-nav-border);
    border-radius: 12px;
    background: var(--kpbg-nav-bg);
    color: var(--kpbg-nav-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.kpbg-nav-toggle__icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.kpbg-nav-toggle__icon span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.kpbg-nav-wrap.kpbg-nav--mobile-open .kpbg-nav-toggle__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.kpbg-nav-wrap.kpbg-nav--mobile-open .kpbg-nav-toggle__icon span:nth-child(2) {
    opacity: 0;
}

.kpbg-nav-wrap.kpbg-nav--mobile-open .kpbg-nav-toggle__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ── Editor preview (no sticky in editor) ───────────────────── */
.editor-styles-wrapper .kpbg-nav-wrap {
    position: relative !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kpbg-nav-toggle {
        display: inline-flex;
    }

    .kpbg-nav-inner {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
    }

    .kpbg-nav-wrap.kpbg-nav--mobile-open .kpbg-nav-inner {
        display: flex;
    }

    .kpbg-nav-btn {
        width: 100%;
        justify-content: flex-start;
        font-size: 13px;
        padding: 10px 14px 10px 12px;
    }

    .kpbg-nav-icon {
        width: 18px;
        height: 18px;
    }

    .kpbg-nav-icon svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 640px) {
    .kpbg-nav-toggle {
        padding: 11px 13px;
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .kpbg-nav-btn {
        padding: 7px 10px;
    }

    /* Collapse to icon-only on very small screens */
    .kpbg-nav-label {
        display: none;
    }
}