/**
 * Karts Mega Menu — frontend styles.
 *
 * Apple.com-quality mega menu, styled for Karts Design.
 * All colors/sizes are driven by CSS custom properties (--karts-mm-*)
 * that are generated by PHP from the plugin settings.
 */

/* ---------------------------------------------------------------------------
 * Base bar
 * ------------------------------------------------------------------------- */
.karts-mm,
.karts-mm * {
        box-sizing: border-box;
}

.karts-mm {
        --_bg: var(--karts-mm-menu-bg, #fff);
        position: relative;
        z-index: 1000;
        width: 100%;
        background: var(--_bg);
        border-bottom: var(--karts-mm-border, 1px solid rgba(0, 0, 0, 0.08));
        font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: var(--karts-mm-link, #111827);
}

.karts-mm--sticky {
        position: sticky;
        top: 0;
        transition: transform 300ms ease;
        will-change: transform;
}

.karts-mm--sticky.karts-mm--hidden {
        transform: translateY(-100%);
}

.karts-mm--glass {
        background: var(--_bg);
        -webkit-backdrop-filter: blur(var(--karts-mm-blur, 12px));
        backdrop-filter: blur(var(--karts-mm-blur, 12px));
}

.karts-mm__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        max-width: var(--karts-mm-max-width, 1280px);
        height: var(--karts-mm-height, 72px);
        margin: 0 auto;
        padding: 0 24px;
}

/* ---------------------------------------------------------------------------
 * Logo
 * ------------------------------------------------------------------------- */
.karts-mm__logo-link {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: -0.01em;
}

.karts-mm__logo-text strong {
        font-weight: 800;
}

.karts-mm__logo-img {
        display: block;
        width: var(--karts-mm-logo-width, 130px);
        height: var(--karts-mm-logo-height, auto);
        object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Primary nav
 * ------------------------------------------------------------------------- */
.karts-mm__nav {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
}

.karts-menu {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
}

.karts-item {
        position: relative;
}

.karts-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 10px 14px;
        text-decoration: none;
        color: var(--karts-mm-link, #111827);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        border-radius: 8px;
        transition: color 150ms ease, background-color 150ms ease;
        white-space: nowrap;
}

.karts-link:hover,
.karts-item.karts-open > .karts-link,
.karts-item.current-menu-item > .karts-link {
        color: var(--karts-mm-link-hover, #1d6aff);
}

.karts-caret {
        transition: transform 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.karts-item.karts-open > .karts-link .karts-caret {
        transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Dropdown / Mega panel
 * ------------------------------------------------------------------------- */
.karts-dropdown {
        position: absolute;
        background: var(--karts-mm-dropdown-bg, #fff);
        color: var(--karts-mm-dropdown-text, #111827);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--karts-mm-anim-speed, 280ms) cubic-bezier(0.25, 0.1, 0.25, 1),
                transform var(--karts-mm-anim-speed, 280ms) cubic-bezier(0.25, 0.1, 0.25, 1),
                visibility 0s linear var(--karts-mm-anim-speed, 280ms);
        z-index: 1001;
}

/* Panel type: floats just under the link. */
.karts-dropdown--panel {
        top: 100%;
        left: 0;
        min-width: 240px;
        border-radius: 0 0 var(--karts-mm-dropdown-radius, 12px) var(--karts-mm-dropdown-radius, 12px);
}

/* Mega type: full-width panel spanning the whole bar. */
.karts-dropdown--mega {
        top: 100%;
        left: 0;
        right: 0;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        border-radius: 0 0 var(--karts-mm-dropdown-radius, 12px) var(--karts-mm-dropdown-radius, 12px);
}

.karts-dropdown__inner {
        max-width: var(--karts-mm-max-width, 1280px);
        margin: 0 auto;
        padding: 32px 24px 36px;
}

.karts-dropdown--panel .karts-dropdown__inner {
        padding: 16px;
}

.karts-dropdown__list {
        margin: 0;
        padding: 0;
        list-style: none;
}

/* Mega layout: columns via flow. */
.karts-dropdown--mega .karts-dropdown__list {
        display: grid;
        gap: 8px 40px;
        grid-auto-flow: column;
        grid-template-rows: repeat(var(--_rows, 6), auto);
        align-content: start;
}

/* Column count helpers set an explicit template so grouping is even. */
.karts-dropdown--mega.karts-cols-1 .karts-dropdown__list { grid-template-columns: 1fr; grid-auto-flow: row; }
.karts-dropdown--mega.karts-cols-2 .karts-dropdown__list { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; }
.karts-dropdown--mega.karts-cols-3 .karts-dropdown__list { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; }
.karts-dropdown--mega.karts-cols-4 .karts-dropdown__list { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; }

/* Animation states — visible. */
.karts-item.karts-open > .karts-dropdown,
.karts-dropdown.karts-dropdown--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity var(--karts-mm-anim-speed, 280ms) cubic-bezier(0.25, 0.1, 0.25, 1),
                transform var(--karts-mm-anim-speed, 280ms) cubic-bezier(0.25, 0.1, 0.25, 1),
                visibility 0s;
}

/* Slide animation. */
.karts-mm--anim-slide .karts-dropdown {
        transform: translateY(-8px);
}
.karts-mm--anim-slide .karts-item.karts-open > .karts-dropdown {
        transform: translateY(0);
}

/* Fade animation. */
.karts-mm--anim-fade .karts-dropdown {
        transform: none;
}

/* None. */
.karts-mm--anim-none .karts-dropdown {
        transition: none;
        transform: none;
}

/* Dropdown items. */
.karts-dropdown-item {
        list-style: none;
}

.karts-dropdown-link {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 10px;
        margin: 0 -10px;
        text-decoration: none;
        color: var(--karts-mm-dropdown-text, #111827);
        border-radius: 8px;
        transition: color 150ms ease, background-color 150ms ease;
}

.karts-dropdown-link:hover {
        color: var(--karts-mm-link-hover, #1d6aff);
        background: rgba(29, 106, 255, 0.06);
}

.karts-section-title {
        display: block;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--karts-mm-section-title, #6b7280);
        margin-bottom: 4px;
}

.karts-dropdown-link__title {
        display: block;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
}

.karts-dropdown-link__desc {
        display: block;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
        color: var(--karts-mm-section-title, #6b7280);
        margin-top: 2px;
}

.karts-dropdown-link__icon {
        flex: 0 0 auto;
        display: inline-flex;
        width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
}

.karts-dropdown-link__icon img {
        max-width: 100%;
        height: auto;
}

/* Forced column starts in a plain (auto-flow) list. */
.karts-dropdown--mega .karts-col-start {
        grid-column-start: auto;
}

.karts-subgroup {
        margin: 4px 0 0;
        padding: 0;
        list-style: none;
}

/* ---------------------------------------------------------------------------
 * Actions (right side): language + CTA + hamburger
 * ------------------------------------------------------------------------- */
.karts-mm__actions {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 0 0 auto;
}

.karts-mm__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background: var(--karts-mm-cta-bg, #1d6aff);
        color: var(--karts-mm-cta-text, #fff);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        border-radius: var(--karts-mm-cta-radius, 8px);
        transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
        white-space: nowrap;
}

.karts-mm__cta:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(29, 106, 255, 0.28);
        color: var(--karts-mm-cta-text, #fff);
}

/* Language switcher. */
.karts-mm__lang {
        position: relative;
}

.karts-mm__lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: 0;
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--karts-mm-lang-color, #111827);
        padding: 8px 6px;
}

.karts-mm__lang-toggle svg {
        transition: transform 220ms ease;
}

.karts-mm__lang.karts-open .karts-mm__lang-toggle svg {
        transform: rotate(180deg);
}

.karts-mm__lang-list {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 120px;
        margin: 6px 0 0;
        padding: 6px;
        list-style: none;
        background: var(--karts-mm-dropdown-bg, #fff);
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
        z-index: 1002;
}

.karts-mm__lang.karts-open .karts-mm__lang-list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}

.karts-mm__lang-list a {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
        color: var(--karts-mm-dropdown-text, #111827);
        border-radius: 6px;
        font-size: 14px;
}

.karts-mm__lang-list a:hover {
        background: rgba(29, 106, 255, 0.08);
        color: var(--karts-mm-link-hover, #1d6aff);
}

/* ---------------------------------------------------------------------------
 * Hamburger
 * ------------------------------------------------------------------------- */
.karts-mm__hamburger {
        display: none;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 8px;
        line-height: 0;
}

.karts-mm__bars {
        position: relative;
        display: block;
        width: 24px;
        height: 16px;
}

.karts-mm__bars span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--karts-mm-hamburger, #111827);
        border-radius: 2px;
        transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 200ms ease, top 300ms ease;
}

.karts-mm__bars span:nth-child(1) { top: 0; }
.karts-mm__bars span:nth-child(2) { top: 7px; }
.karts-mm__bars span:nth-child(3) { top: 14px; }

.karts-mm.karts-mobile-open .karts-mm__bars span:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
}
.karts-mm.karts-mobile-open .karts-mm__bars span:nth-child(2) {
        opacity: 0;
}
.karts-mm.karts-mobile-open .karts-mm__bars span:nth-child(3) {
        top: 7px;
        transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * Overlay (dims the page below the open dropdown)
 * ------------------------------------------------------------------------- */
.karts-mm-overlay {
        position: fixed;
        inset: 0;
        background: var(--karts-mm-overlay, rgba(0, 0, 0, 0.35));
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 0s linear 200ms;
        z-index: 999;
}

.karts-mm-overlay.karts-mm-overlay--visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms ease;
}

/* ---------------------------------------------------------------------------
 * Mobile panel
 * ------------------------------------------------------------------------- */
.karts-mm__mobile {
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(420px, 88vw);
        background: var(--karts-mm-mobile-bg, #fff);
        color: var(--karts-mm-mobile-text, #111827);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
        z-index: 1100;
        overflow-y: auto;
        visibility: hidden;
        transition: transform 320ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 320ms ease, visibility 0s linear 320ms;
        -webkit-overflow-scrolling: touch;
}

.karts-mm__mobile--fullscreen {
        width: 100vw;
}

.karts-mm__mobile--slide-right {
        right: 0;
        transform: translateX(100%);
}
.karts-mm__mobile--slide-left {
        left: 0;
        transform: translateX(-100%);
}
.karts-mm__mobile--fade {
        right: 0;
        opacity: 0;
        transform: none;
}

.karts-mm.karts-mobile-open .karts-mm__mobile {
        visibility: visible;
        transform: translateX(0);
        opacity: 1;
        transition: transform 320ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 320ms ease, visibility 0s;
}

.karts-mm__mobile-inner {
        padding: 88px 24px 40px;
}

.karts-mobile-menu {
        margin: 0;
        padding: 0;
        list-style: none;
}

.karts-mobile-menu li {
        list-style: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.karts-mobile-menu .karts-link,
.karts-mobile-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 4px;
        color: var(--karts-mm-mobile-text, #111827);
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
}

/* Mobile accordion sub-panels. */
.karts-mobile-menu .karts-dropdown {
        position: static;
        width: auto;
        margin: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 320ms ease;
}

.karts-mobile-menu .karts-has-dropdown.karts-open > .karts-dropdown {
        max-height: 1200px;
}

.karts-mobile-menu .karts-dropdown__inner {
        padding: 0 0 12px 12px;
}

.karts-mobile-menu .karts-dropdown__list {
        display: block !important;
}

.karts-mobile-menu .karts-dropdown-link {
        padding: 12px 4px;
        font-size: 15px;
}

.karts-mobile-menu .karts-dropdown-link__title {
        font-size: 15px;
        font-weight: 500;
}

.karts-mm__mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 28px;
}

.karts-mm__mobile-actions .karts-mm__cta {
        width: 100%;
}

/* Prevent body scroll when mobile menu / overlay is open. */
body.karts-mm-no-scroll {
        overflow: hidden;
}

/* Admin helper notice. */
.karts-mm-notice {
        padding: 12px 16px;
        background: #fff8e5;
        border: 1px solid #f0c36d;
        border-radius: 8px;
        font-size: 14px;
        color: #6b5200;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * The active breakpoint is configurable in the admin. JS adds `.karts-is-mobile`
 * to the header when the viewport is at/below the configured breakpoint; the
 * media query below is a no-JS fallback matching the default (1024px).
 * ------------------------------------------------------------------------- */
.karts-mm.karts-is-mobile .karts-mm__nav,
.karts-mm.karts-is-mobile .karts-mm__actions .karts-mm__lang,
.karts-mm.karts-is-mobile .karts-mm__actions .karts-mm__cta {
        display: none;
}

.karts-mm.karts-is-mobile .karts-mm__hamburger {
        display: inline-flex;
}

@media (max-width: 1024px) {
        .karts-mm:not(.karts-is-desktop) .karts-mm__nav,
        .karts-mm:not(.karts-is-desktop) .karts-mm__actions .karts-mm__lang,
        .karts-mm:not(.karts-is-desktop) .karts-mm__actions .karts-mm__cta {
                display: none;
        }

        .karts-mm:not(.karts-is-desktop) .karts-mm__hamburger {
                display: inline-flex;
        }
}