/* ============================================================
   TT MEGA MENU
   Woodmart-independent replacement for wd_extra_menu_list.
   Visual treatment intentionally mirrors the tuned Woodmart
   dropdown in global-design-system.css (14px radius, layered
   shadow, 0.35s cubic-bezier slide) so the rebuild is a
   like-for-like swap rather than a redesign.
   Works LTR (English) and RTL (Arabic).
   ============================================================ */

.tt-nav,
.tt-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
}

.tt-nav-item {
    position: relative;
}

.tt-nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.85rem 0.25rem;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tt-navy, #0A1628);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.tt-nav-item > a:hover,
.tt-nav-item > a:focus-visible,
.tt-nav-item.is-current > a {
    color: var(--tt-blue, #1E5DAB);
}

/* caret ------------------------------------------------------ */
.tt-caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tt-has-mega:hover > a .tt-caret,
.tt-has-mega:focus-within > a .tt-caret {
    transform: rotate(-135deg) translateY(-2px);
}

/* panel ------------------------------------------------------ */
.tt-mega {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: var(--tt-z-dropdown, 100);
    width: min(var(--tt-mega-w, 800px), calc(100vw - 2rem));
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(10, 22, 40, 0.06);
    border-radius: 14px;
    box-shadow: 0 18px 50px -14px rgba(10, 22, 40, 0.28),
                0 8px 20px -12px rgba(10, 22, 40, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) translateZ(0);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* keep the panel on screen near the end of the bar */
.tt-nav-item:nth-last-child(-n+2) .tt-mega {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.tt-has-mega:hover > .tt-mega,
.tt-has-mega:focus-within > .tt-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tt-mega-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem 2rem;
}

/* column heading — matches the old .item-with-label treatment */
.tt-mega-title {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: #000;
    border-bottom: 1px solid rgba(10, 22, 40, 0.1);
}

.tt-mega-links > li > a {
    display: block;
    padding: 2px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.9;
    color: var(--tt-navy, #0A1628);
    text-decoration: none;
    transition: color 0.2s ease, padding-inline-start 0.2s ease;
}

.tt-mega-links > li > a:hover,
.tt-mega-links > li > a:focus-visible {
    color: var(--tt-blue, #1E5DAB);
    padding-inline-start: 4px;
}

/* plain (non-mega) dropdowns --------------------------------- */
.tt-sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: var(--tt-z-dropdown, 100);
    min-width: 220px;
    padding: 0.75rem 0;
    background: #fff;
    border: 1px solid rgba(10, 22, 40, 0.06);
    border-radius: 14px;
    box-shadow: 0 18px 50px -14px rgba(10, 22, 40, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tt-nav-item:hover > .tt-sub-menu,
.tt-nav-item:focus-within > .tt-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tt-sub-menu > li > a {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--tt-navy, #0A1628);
    text-decoration: none;
}

.tt-sub-menu > li > a:hover {
    background: var(--tt-blue-light, #E8F0FE);
    color: var(--tt-blue, #1E5DAB);
}

/* mobile ------------------------------------------------------ */
@media (max-width: 1024px) {
    .tt-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-mega,
    .tt-sub-menu,
    .tt-caret { transition-duration: 0.01ms; }
}