/* ==========================================================================
   OCM Mega Menu — Frontend Styles

   Architecture note:
   Mega menus are FULLY decoupled from Bootstrap's dropdown system.
   - Mega triggers use data-ocmmm-toggle="mega", not data-bs-toggle="dropdown"
   - The panel uses .mega-container, NOT .dropdown-menu
   - Open/close is managed entirely by our own JS using .ocmmm-open
   - Regular dropdowns still use Bootstrap normally

   Panel positioning:
   - position: fixed — sits in viewport space, unaffected by parent overflow/z-index
   - JS calculates top (bottom edge of the trigger) and sets it dynamically
   - Width and centering controlled by CSS vars, consistent across all instances
   ========================================================================== */

/* ------------------------------------------------------------------
   Caret on mega triggers (Bootstrap adds one for .dropdown-toggle,
   we add our own since we don't use that class on mega items)
   ------------------------------------------------------------------ */
.ocmmm-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.3em;
    vertical-align: middle;
    border-top:   4px solid currentColor;
    border-right: 4px solid transparent;
    border-left:  4px solid transparent;
    transition: transform 0.2s ease;
}

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

/* ------------------------------------------------------------------
   Mega panel — fixed positioning keeps it consistent and out of
   any overflow:hidden parent traps
   ------------------------------------------------------------------ */
.mega-container {
    position: fixed;
    z-index: 9999;

    /* Width: centered in the viewport, capped to container size */
    left: 50%;
    transform: translateX(-50%);
    width: var(--ocmmm-panel-width, min(1140px, calc(100vw - 2rem)));
    min-width: var(--ocmmm-panel-min-width, 580px);

    /* top is set by JS to the bottom edge of the navbar */

    /* Layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ocmmm-panel-gap, 2rem);
    padding: var(--ocmmm-panel-padding, 1.5rem 2rem);

    /* Appearance */
    background: var(--ocmmm-panel-bg, #fff);
    border-top: 3px solid var(--ocmmm-accent, #0d6efd);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);

    /* Hidden state — use opacity+visibility so transitions work */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Open state — JS adds .ocmmm-open to the <li>, not the panel */
.ocmmm-mega-item.ocmmm-open > .mega-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* ------------------------------------------------------------------
   Featured image — left side of the panel
   ------------------------------------------------------------------ */
.ocmmm-featured-image {
    flex: 0 0 var(--ocmmm-image-width, 200px);
    width: var(--ocmmm-image-width, 200px);
    border-radius: 0.375rem;
    overflow: hidden;
    align-self: stretch;
    background: var(--ocmmm-image-bg, #f0f0f0);
}

.ocmmm-featured-image-link { display: block; height: 100%; }

.ocmmm-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.ocmmm-featured-image-link:hover .ocmmm-featured-img {
    transform: scale(1.04);
    opacity: 0.9;
}

/* ------------------------------------------------------------------
   Columns — equal-width flex children filling remaining panel space
   ------------------------------------------------------------------ */
.mega-container > .mega-child {
    flex: 1 1 0;
    min-width: var(--ocmmm-col-min-width, 130px);
    list-style: none;
    margin: 0;
    padding: 0 var(--ocmmm-col-gap, 1.25rem);
    border-right: 1px solid var(--ocmmm-col-divider, rgba(0,0,0,0.08));
}

.mega-container > .mega-child:first-of-type { padding-left: 0; }
.mega-container > .mega-child:last-child    { border-right: none; padding-right: 0; }

/* ------------------------------------------------------------------
   Column heading
   ------------------------------------------------------------------ */
.mega-heading {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ocmmm-heading-color, #212529);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--ocmmm-accent, #0d6efd);
    white-space: nowrap;
}

.mega-heading a,
.mega-heading span { color: inherit; text-decoration: none; }
.mega-heading a:hover { color: var(--ocmmm-accent, #0d6efd); }

/* ------------------------------------------------------------------
   Grandchild links
   ------------------------------------------------------------------ */
.mega-grand { list-style: none; }

.mega-grand-link {
    display: block;
    padding: 0.28rem 0;
    color: var(--ocmmm-link-color, #495057);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.mega-grand-link:hover,
.mega-grand-link:focus {
    color: var(--ocmmm-accent, #0d6efd);
    padding-left: 0.35rem;
}

.mega-grand-link.active {
    color: var(--ocmmm-accent, #0d6efd);
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Item description (optional sub-label)
   ------------------------------------------------------------------ */
.ocmmm-item-desc {
    display: block;
    font-size: 0.72rem;
    opacity: 0.6;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1px;
}

/* ------------------------------------------------------------------
   Regular Bootstrap dropdowns — no changes, let Bootstrap handle them
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Mobile — below lg breakpoint
   Panel switches from fixed to static block inside the collapsed nav
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .mega-container {
        /* Reset fixed positioning */
        position: static;
        left: auto;
        top: auto !important;  /* override JS-set top */
        width: 100% !important;
        min-width: 0;
        transform: none;

        /* Reset transitions — jQuery slideDown handles animation */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;

        /* Start hidden */
        display: none;

        /* Mobile layout */
        flex-direction: column;
        gap: 0;
        padding: 0.25rem 0;
        border-top: 2px solid var(--ocmmm-accent, #0d6efd);
        border-radius: 0;
        box-shadow: none;
    }

    .ocmmm-mega-item.ocmmm-open > .mega-container {
        /* JS slideDown will show it; this ensures the open state is visible */
        display: flex;
        transform: none;
    }

    .mega-container > .mega-child {
        flex: none;
        width: 100%;
        min-width: 0;
        padding: 0.4rem 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .mega-container > .mega-child:first-of-type { padding-left: 1rem; }
    .mega-container > .mega-child:last-child    { border-bottom: none; }

    .ocmmm-featured-image {
        flex: none;
        width: 100%;
        max-height: 150px;
        border-radius: 0;
        align-self: auto;
    }
    .ocmmm-featured-img { max-height: 150px; }
}

/* ==========================================================================
   CSS custom properties — override in your child theme:

   :root {
       --ocmmm-accent:          #0d6efd;
       --ocmmm-panel-bg:        #ffffff;
       --ocmmm-panel-width:     min(1140px, calc(100vw - 2rem));
       --ocmmm-panel-min-width: 580px;
       --ocmmm-panel-padding:   1.5rem 2rem;
       --ocmmm-panel-gap:       2rem;
       --ocmmm-heading-color:   #212529;
       --ocmmm-link-color:      #495057;
       --ocmmm-col-min-width:   130px;
       --ocmmm-col-gap:         1.25rem;
       --ocmmm-col-divider:     rgba(0,0,0,0.08);
       --ocmmm-image-width:     200px;
       --ocmmm-image-bg:        #f0f0f0;
   }
   ========================================================================== */

/* ------------------------------------------------------------------
   Regular dropdown hover/click open state
   Managed by our JS via .ocmmm-open — NOT Bootstrap's .show
   ------------------------------------------------------------------ */
.navbar-nav > .dropdown > .dropdown-menu {
    /* Override Bootstrap display:none so our transition can run */
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.navbar-nav > .dropdown.ocmmm-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

@media (max-width: 991.98px) {
    .navbar-nav > .dropdown > .dropdown-menu {
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }
    .navbar-nav > .dropdown.ocmmm-open > .dropdown-menu {
        display: block;
    }
}

/* ------------------------------------------------------------------
   Items set to Custom Link with href="#" — render as plain text,
   not as clickable links (useful for section headings in dropdowns)
   ------------------------------------------------------------------ */
.ocmmm-no-link {
    cursor: default;
    pointer-events: none;
    color: var(--ocmmm-no-link-color, #212529) !important;
    text-decoration: none !important;
    padding-left: 0 !important; /* suppress hover indent */
}

.ocmmm-no-link:hover,
.ocmmm-no-link:focus {
    color: var(--ocmmm-no-link-color, #212529) !important;
    background: transparent !important;
}