/**
 * Urbatect Advance Menu — Frontend Styles v1.3.0
 * Changes:
 *  ✅ Mega menu center aligned, no default bg/shadow
 *  ✅ Offcanvas full width
 *  ✅ Mobile chevron indicators
 *  ✅ Mobile mega panel inside offcanvas
 *  ✅ Overflow hidden fix for all themes
 */

/* ─────────────────────────────────────────────
   CSS Variables
───────────────────────────────────────────── */
:root {
    --uam-speed:           0.24s;
    --uam-ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --uam-sub-z:           9990;
    --uam-mega-z:          9989;
    --uam-canvas-z:        10001;
    --uam-overlay-z:       10000;
    --uam-mega-inner-width: 1200px; /* max-width of mega content, override per-widget */
}

/* ─────────────────────────────────────────────
   THEME OVERRIDE — prevents overflow:hidden from
   clipping submenus (Astra, Hello, GeneratePress…)
───────────────────────────────────────────── */
.elementor-widget-uam_advance_menu,
.elementor-widget-uam_advance_menu .elementor-widget-container,
.uam-nav-wrapper,
.uam-desktop-nav,
.uam-nav-menu,
.uam-nav-menu > li {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

/* ─────────────────────────────────────────────
   Reset
───────────────────────────────────────────── */
.uam-nav-wrapper,
.uam-nav-wrapper * { box-sizing: border-box; }

.uam-nav-wrapper ul { list-style: none; margin: 0; padding: 0; }

.uam-nav-wrapper a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--uam-speed) var(--uam-ease),
                background-color var(--uam-speed) var(--uam-ease);
}

/* ─────────────────────────────────────────────
   Desktop Nav
───────────────────────────────────────────── */
.uam-desktop-nav { display: block; }

/* Hamburger hidden on desktop — widget injects breakpoint <style> */
.uam-mobile-toggle-wrap { display: none; }

/* ─────────────────────────────────────────────
   Top-Level Menu UL
───────────────────────────────────────────── */
.uam-nav-menu {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    position: relative;
}

.uam-layout--vertical .uam-nav-menu {
    flex-direction: column;
    align-items: flex-start;
}

/* ─────────────────────────────────────────────
   Top-Level Items LI
───────────────────────────────────────────── */
.uam-nav-menu > li {
    position: relative;
    display: flex;
    align-items: center;
}

.uam-nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    position: relative;
}

/* ─────────────────────────────────────────────
   SVG Indicator
───────────────────────────────────────────── */
.uam-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--uam-speed) var(--uam-ease);
    pointer-events: none;
    line-height: 1;
}

.uam-indicator svg {
    display: block;
    width: 12px;
    height: 12px;
    overflow: visible;
}

/* Rotate on hover/open */
.uam-nav-menu > li:hover > a .uam-indicator:not(.uam-indicator--right),
.uam-nav-menu > li.uam-is-open > a .uam-indicator:not(.uam-indicator--right) {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────────
   DROPDOWN SUBMENU — CSS :hover driven
───────────────────────────────────────────── */
.uam-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--uam-sub-z);
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    border-radius: 4px;
    overflow: visible !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition:
        opacity    var(--uam-speed) var(--uam-ease),
        visibility var(--uam-speed) var(--uam-ease),
        transform  var(--uam-speed) var(--uam-ease);
}

/* Nested submenu */
.uam-submenu .uam-submenu {
    top: 0;
    left: 100%;
    transform: translateX(6px);
}

/* Open: CSS hover */
.uam-nav-menu > li:hover > .uam-submenu         { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.uam-submenu li:hover > .uam-submenu             { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
/* Open: JS class */
.uam-nav-menu > li.uam-is-open > .uam-submenu   { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.uam-submenu li.uam-is-open > .uam-submenu       { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }

.uam-submenu > li { position: relative; }

.uam-submenu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: #333;
    width: 100%;
    transition: color var(--uam-speed) ease, background var(--uam-speed) ease;
}

.uam-submenu > li > a:hover,
.uam-submenu > li:hover > a { background: rgba(0,0,0,0.04); }

/* ─────────────────────────────────────────────
   MEGA MENU PANEL
   KEY FIX: position:fixed instead of absolute.
   — Eliminates JS left-offset calculation entirely
   — No flicker on first hover
   — No admin-bar shift
   — top is set via CSS custom property updated by JS
     only once on init (not on every hover)
───────────────────────────────────────────── */
.uam-mega-panel {
    position: fixed;
    /* top is calculated once by JS and set as CSS var */
    top: 70px;
    left: 0;
    right: 0;
    width: 100vw !important;
    z-index: var(--uam-mega-z);
    background: transparent;
    box-shadow: none;
    overflow: visible !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity    var(--uam-speed) var(--uam-ease),
        visibility var(--uam-speed) var(--uam-ease),
        transform  var(--uam-speed) var(--uam-ease);
}

/* Full-width — already handled by position:fixed + left:0 + width:100vw */
.uam-mega--full {
    /* nothing extra needed — position:fixed does it all */
}

/* CENTER the Elementor template content inside full-width panel */
.uam-mega-panel > *,
.uam-mega-panel > .elementor,
.uam-mega-panel > .elementor-section-wrap,
.uam-mega-panel > .e-container,
.uam-mega-panel > .e-con {
    max-width: var(--uam-mega-inner-width, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Open: CSS hover */
.uam-nav-menu > li:hover > .uam-mega-panel       { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* Open: JS class */
.uam-nav-menu > li.uam-is-open > .uam-mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Reset Elementor container widths inside mega */
.uam-mega-panel .elementor-section,
.uam-mega-panel .e-container,
.uam-mega-panel .e-con {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mega editor placeholder */
.uam-mega-editor-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
    text-align: center;
    background: #f0f7ff;
    border: 2px dashed #90c0f0;
    font-size: 13px;
    color: #3a7bd5;
}
.uam-mega-editor-ph .eicon-apps { font-size: 28px; }
.uam-mega-editor-ph small { color: #999; font-size: 11px; }

/* ─────────────────────────────────────────────
   Hover Pointer Effects
───────────────────────────────────────────── */
/* Underline */
.uam-nav-wrapper[data-pointer="underline"] .uam-nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width var(--uam-speed) var(--uam-ease);
}
.uam-nav-wrapper[data-pointer="underline"] .uam-nav-menu > li:hover > a::after,
.uam-nav-wrapper[data-pointer="underline"] .uam-nav-menu > li.current-menu-item > a::after { width: 80%; }

/* Overline */
.uam-nav-wrapper[data-pointer="overline"] .uam-nav-menu > li > a::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width var(--uam-speed) var(--uam-ease);
}
.uam-nav-wrapper[data-pointer="overline"] .uam-nav-menu > li:hover > a::before { width: 80%; }

/* Framed */
.uam-nav-wrapper[data-pointer="framed"] .uam-nav-menu > li > a {
    border: 2px solid transparent;
    transition: border-color var(--uam-speed) ease, color var(--uam-speed) ease;
}
.uam-nav-wrapper[data-pointer="framed"] .uam-nav-menu > li:hover > a { border-color: currentColor; }

/* ─────────────────────────────────────────────
   HAMBURGER BUTTON
───────────────────────────────────────────── */
.uam-mobile-toggle-wrap {
    display: none; /* shown via inline breakpoint <style> */
    align-items: center;
}

.uam-hamburger-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 4px;
    line-height: 1;
    transition: background var(--uam-speed) ease;
}

.uam-hamburger-wrap:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Three Lines */
.uam-hamburger--lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.uam-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform var(--uam-speed) ease, opacity var(--uam-speed) ease;
}

/* Animate to X when open */
.uam-hamburger--lines.is-active .uam-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.uam-hamburger--lines.is-active .uam-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.uam-hamburger--lines.is-active .uam-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dots */
.uam-hamburger--dots { display: flex; flex-direction: row; gap: 5px; align-items: center; }
.uam-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Cross */
.uam-hamburger--cross { line-height: 1; display: flex; align-items: center; }

.uam-hamburger-label { font-size: 14px; font-weight: 500; }

/* ─────────────────────────────────────────────
   OFFCANVAS OVERLAY
───────────────────────────────────────────── */
.uam-offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: var(--uam-overlay-z);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--uam-speed) var(--uam-ease), visibility var(--uam-speed) var(--uam-ease);
}

.uam-offcanvas-overlay.uam-is-visible { opacity: 1; visibility: visible; }

/* ─────────────────────────────────────────────
   OFFCANVAS PANEL — FULL WIDTH
───────────────────────────────────────────── */
.uam-offcanvas {
    position: fixed;
    top: 0;
    /* Full width by default — override via Elementor style control */
    width: 100vw !important;
    height: 100%;
    background: #fff;
    z-index: var(--uam-canvas-z);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transition: transform var(--uam-speed) var(--uam-ease);
}

.uam-offcanvas--left  { left: 0;  transform: translateX(-110%); }
.uam-offcanvas--right { right: 0; transform: translateX(110%); }
.uam-offcanvas.uam-is-open { transform: translateX(0); }

.uam-offcanvas-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0;
}

/* Header row with close button */
.uam-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.uam-offcanvas-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 10px !important;
    border-radius: 0px !important;
    line-height: 1;
    transition: color var(--uam-speed) ease, background var(--uam-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uam-offcanvas-close:hover { color: #000; background: rgba(0,0,0,0.06); }
.uam-offcanvas-close svg { display: block; width: 22px; height: 22px; }

/* ─────────────────────────────────────────────
   MOBILE NAV — custom tree with chevrons + mega
───────────────────────────────────────────── */
.uam-mobile-nav {
    width: 100%;
    flex: 1;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Each top-level mobile item */
.uam-mobile-item {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.uam-mobile-item:last-child { border-bottom: none; }

/* Row: link + chevron button side by side */
.uam-mobile-item-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.uam-mobile-item-row > a {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #222;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color var(--uam-speed) ease;
}

.uam-mobile-item-row > a:hover { color: #000; }

/* Chevron toggle button */
.uam-mobile-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    color: #555;
    padding: 0 !important;
    transition: background var(--uam-speed) ease, color var(--uam-speed) ease;
    background-color: transparent !important;
    border: none;
}

.uam-mobile-chevron:hover { background: rgba(0,0,0,0.04); color: #000; }

.uam-mobile-chevron-svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform var(--uam-speed) var(--uam-ease);
}

/* Rotate chevron when panel open */
.uam-mobile-chevron.uam-is-open .uam-mobile-chevron-svg {
    transform: rotate(180deg);
}

/* ── Mobile Panel (sub-menu or mega) ── */
.uam-mobile-panel {
    display: none;
    width: 100%;
}

.uam-mobile-panel.uam-is-open { display: block; }

/* Sub-menu panel */
.uam-mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,0.02);
    border-top: 1px solid rgba(0,0,0,0.06);
}

.uam-mobile-submenu .uam-mobile-item-row > a {
    padding-left: 32px;
    font-size: 14px;
    font-weight: 400;
    color: #444;
}

.uam-mobile-submenu .uam-mobile-item { border-bottom-color: rgba(0,0,0,0.05); }

/* Mega panel inside offcanvas */
.uam-mobile-mega-panel {
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    padding: 10px;
    
}

/* Ensure Elementor content inside mobile mega panel is full width */
.uam-mobile-mega-panel .elementor,
.uam-mobile-mega-panel .elementor-section,
.uam-mobile-mega-panel .e-container,
.uam-mobile-mega-panel .e-con {
    width: 100% !important;
    max-width: 100% !important;
}

/* ─────────────────────────────────────────────
   No-menu notices
───────────────────────────────────────────── */
.uam-no-menu-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px;
    background: #fffbf0;
    border: 2px dashed #f0c85a;
    border-radius: 6px;
    gap: 8px;
    color: #5a4a00;
}

/* ─────────────────────────────────────────────
   Body lock when offcanvas open
───────────────────────────────────────────── */
body.uam-offcanvas-active { overflow: hidden; }

/* ─────────────────────────────────────────────
   Accessibility
───────────────────────────────────────────── */
.uam-nav-menu a:focus-visible,
.uam-submenu a:focus-visible,
.uam-mobile-nav a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────
   Print
───────────────────────────────────────────── */
@media print {
    .uam-offcanvas,
    .uam-offcanvas-overlay,
    .uam-mobile-toggle-wrap { display: none !important; }
}