/**
 * Entag Mega Menu — front-end styles
 *
 * Everything is namespaced under .entag-nav so the plugin can drop into any
 * (block or classic) theme without clobbering theme styles. Design tokens are
 * CSS custom properties scoped to .entag-nav — override them in your theme to
 * re-skin the menu without touching this file.
 */

.entag-nav {
    /* ---- Palette: Entag brand (charcoal / white / lime) ----
     Override any token in your theme to re-skin without editing this file. */
    --emm-bar-text: rgba(255, 255, 255, .78);
    /* nav links on the dark bar    */
    --emm-bar-hover: #ffffff;
    --emm-surface: #ffffff;
    /* mega panel background  (clean, minimal)   */
    --emm-surface-2: #646464;
    /* column wells (faint warm-grey)            */
    --emm-card: #383838;
    /* hovered / active card (lime-tinted grey)  */
    --emm-line: rgba(34, 34, 34, .10);
    --emm-line-2: rgba(34, 34, 34, .16);
    --emm-text: #222;
    /* primary copy                              */
    --emm-text-2: #5c6157;
    /* muted copy                                */
    --emm-text-3: #8b9183;
    /* faint labels                              */
    --emm-accent: #88c731;
    /* lime — highlight, icons, CTA              */
    --emm-accent-ink: #4f7d18;
    /* readable green on light surfaces          */
    --emm-accent-soft: rgba(136, 199, 49, .16);
    --emm-charcoal: #222222;
    --emm-charcoal-2: #333333;

    /* ---- Shape ---- */
    --emm-radius: 16px;
    --emm-radius-sm: 11px;
    --emm-col-w: clamp(248px, 21vw, 290px);
    --emm-shadow: 0 26px 70px -28px rgba(34, 34, 34, .42), 0 0 0 1px var(--emm-line);

    position: relative;
    z-index: 50;
    -webkit-font-smoothing: antialiased;
}

.entag-nav *,
.entag-nav *::before,
.entag-nav *::after {
    box-sizing: border-box;
}

/* ============================================================= TOP BAR == */
.entag-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.entag-top {
    position: static;
}

.entag-top__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 12px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--emm-bar-text);
    text-decoration: none;
    border-radius: 10px;
    transition: color .18s ease, background .18s ease;
}

.entag-top__link:hover,
.entag-top.is-open>.entag-top__link {
    color: var(--emm-bar-hover);
    background: rgba(255, 255, 255, .08);
}

.entag-top.has-mega>.entag-top__link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .22s ease, opacity .18s ease;
}

.entag-top.is-open.has-mega>.entag-top__link::after {
    opacity: 1;
}

/* underline tick on the active top item */
.entag-top.has-mega>.entag-top__link {
    position: relative;
}

.entag-top.has-mega>.entag-top__link::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 3px;
    background: var(--emm-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}

.entag-top.is-open.has-mega>.entag-top__link::before {
    transform: scaleX(1);
}

/* ============================================================ MEGA PANEL == */
.entag-mega {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    background: var(--emm-surface);
    border-radius: var(--emm-radius);
    box-shadow: var(--emm-shadow);
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .24s cubic-bezier(.2, .7, .3, 1), visibility .2s;
    height: 90vh;
    overflow-y: auto;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.entag-top.is-open>.entag-mega {
    opacity: 1;
    visibility: visible;
}

/* While the panel is changing column count, lock its box to explicit px (set by
   JS) and tween width/height so the panel glides as it grows / shrinks.
   `overflow: hidden` keeps the incoming column clipped to the rounded box
   during the tween. */
.entag-mega.is-resizing {
    transition:
        width .3s cubic-bezier(.2, .7, .3, 1),
        height .3s cubic-bezier(.2, .7, .3, 1),
        left .3s cubic-bezier(.2, .7, .3, 1);
    overflow: hidden;
}

.entag-mega__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.entag-mega__head {
    display: block;
    max-width: calc(var(--emm-col-w) + 8px);
    padding: 0 4px 2px;
}

.entag-mega__eyebrow {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--emm-accent-ink);
    font-weight: 700;
    margin: 0 0 6px;
}

.entag-mega__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--emm-text);
    margin: 0;
    letter-spacing: -.01em;
}

.entag-mega__lede {
    font-size: 14px;
    color: var(--emm-text-2);
    margin: 6px 0 0;
    max-width: 100%;
    line-height: 1.45;
}

/* ============================================================== COLUMNS == */
.entag-mega__cols {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.entag-col {
    width: var(--emm-col-w);
    flex: 0 0 var(--emm-col-w);
    min-height: 340px;
    border-radius: var(--emm-radius-sm);
    position: relative;
}

/* columns 2-4 are wells that animate in as the user drills */
.entag-col--2,
.entag-col--3,
.entag-col--4 {
    background: var(--emm-surface-2);
    border: 1px solid #222;
    display: none;
    color: #e9e9e9
}
 
.entag-col--2 .entag-card__title ,
.entag-col--3 .entag-card__title,
.entag-col--4 .entag-card__title {
    color:#e9e9e9;
}

.entag-col.is-active {
    display: block;
}

.entag-top:nth-child(1) .entag-mega__cols {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* gentle reveal driven by a transition (no display-toggle keyframe, which
   some renderers/capture tools fail to paint) */
.entag-col--2>.entag-list,
.entag-col--3>.entag-list,
.entag-col--4>.entag-list {
    opacity: 1;
}

/* a thin divider line between col 1 and the wells */
.entag-col--1 {
    padding-right: 4px;
}

.entag-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.entag-col--1>.entag-list {
    display: flex;
    padding: 0 4px;
}

.entag-list.is-active {
    display: flex;
}

/* ---------------------------------------------------------------- CARD --- */
.entag-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--emm-radius-sm);
    padding: 12px 12px;
    cursor: pointer;
    font: inherit;
    transition: background .16s ease, transform .16s ease;
}

.entag-card:hover,
.entag-card.is-active {
    background: var(--emm-card);
    color: #e9e9e9;
}


.entag-card.is-active {
    box-shadow: inset 0 0 0 1.5px rgba(136, 199, 49, .45);
}

.entag-card.is-active .entag-card__icon {
    color: #fff;
}

.entag-card__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--emm-accent-soft);
    color: var(--emm-accent-ink);
    margin-top: 1px;
}

.entag-card__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.entag-card__icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.entag-card__body {
    min-width: 0;
    flex: 1;
}

.entag-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--emm-text);
    line-height: 1.25;
}

.entag-card.is-active .entag-card__title,
.entag-card:hover .entag-card__title {
    color: #88C731;
}

.entag-card__chev {
    margin-left: auto;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #88C731;
    transition: transform .18s ease, color .18s ease;
}

.entag-card:hover .entag-card__chev,
.entag-card.is-active .entag-card__chev {
    color: var(--emm-accent-ink);
    transform: translateX(2px);
}

.entag-card__sub {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    text-wrap: pretty;
}

.entag-mega[aria-label="Our Services"] .entag-col--1 .entag-card__sub {
	font-size: 1em;
}
/* leaf links (anchor column) read a touch lighter */
.entag-col--4 .entag-card__icon {
    display: none;
}

.entag-col--4 .entag-card {
    padding-left: 14px;
}

.entag-col--4 .entag-card__title::before {
    content: "#";
    color: var(--emm-accent);
    font-weight: 600;
    margin-right: 2px;
}

/* column heading inside a well */
.entag-col__head {
    padding: 12px 14px 4px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--emm-text-3);
}

/* ============================================== BUTTONS (global pair) ==== */
.entag-mega__buttons {
    display: flex;
    gap: 10px;
    padding: 4px;
    margin-top: auto;
    margin-bottom: 0;
}

.entag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.entag-btn--primary {
    background: var(--emm-charcoal);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(34, 34, 34, .55);
}

.entag-btn--primary:hover {
    background: #000;
}

.entag-btn--ghost {
    background: transparent;
    border-color: var(--emm-line-2);
    color: var(--emm-text);
}

.entag-btn--ghost:hover {
    border-color: var(--emm-accent);
    color: var(--emm-text);
}

/* lime CTA variant */
.entag-btn--lime {
    background: var(--emm-accent);
    color: var(--emm-charcoal);
    font-weight: 700;
}

.entag-btn--lime:hover {
    background: #79b528;
}

/* ==================================== FOOTER (2-col: text | cta) ========= */
.entag-mega__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 16px 6px 4px;
    border-top: 1px solid var(--emm-line);
    margin-top: 0;
    margin-bottom: 0;
    align-self: flex-end;
}

.entag-mega__note {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--emm-text-2);
    max-width: 800px;
}

.entag-mega__note strong {
    color: var(--emm-accent-ink);
    font-weight: 700;
}

.entag-mega__footer .entag-btn {
    flex: 0 0 auto;
}

/* ============================================================ MOBILE ===== */
.entag-burger,
.entag-drawer {
    display: none;
}

@media (max-width: 1300px) {
    .entag-menu {
        display: none;
    }

    .entag-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid #fff;
        border-radius: 10px;
        background: transparent;
        color: #fff;
        cursor: pointer;
        margin-left: 1em;
    }

    .entag-burger svg {
        width: 22px;
        height: 22px;
    }

    .entag-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: var(--emm-surface);
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.2, .7, .3, 1);
        overflow: hidden;
        /* always fill the viewport so short menus don't leave an odd stub of panel */
        min-height: 100vh;
        min-height: 100dvh;
    }

    .entag-drawer.is-open {
        transform: translateX(0);
    }

    .entag-drawer__bar {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 60px;
        padding: 0 14px;
        border-bottom: 1px solid var(--emm-line);
    }

    .entag-drawer__back,
    .entag-drawer__close {
        width: 40px;
        height: 40px;
        display: none;
        place-items: center;
        background: transparent;
        border: 0;
        color: var(--emm-text);
        border-radius: 10px;
        cursor: pointer;
    }

    .entag-drawer__back.is-shown {
        display: grid;
    }

    .entag-drawer__close {
        display: grid;
        margin-left: auto;
    }

    .entag-drawer__back svg,
    .entag-drawer__close svg {
        width: 22px;
        height: 22px;
    }

    .entag-drawer__title {
        font-size: 17px;
        font-weight: 700;
        color: var(--emm-text);
        margin: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* sliding stack of panels */
    .entag-drawer__viewport {
        position: absolute;
        inset: 60px 0 0;
        overflow: hidden;
    }

    .entag-drawer__track {
        display: flex;
        height: 100%;
        transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    }

    .entag-panel {
        flex: 0 0 100%;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 10px 28px;
    }

    .entag-panel .entag-card {
        padding: 14px 12px;
        align-items: center;
    }

    .entag-panel .entag-card__chev {
        color: var(--emm-text-3);
    }

    /* mobile button row pinned style */
    .entag-panel .entag-mobile-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 6px 0;
    }

    .entag-panel .entag-mobile-buttons .entag-btn {
        width: 100%;
    }

    .wp-block-entag-mega-menu {order: 3;}
}

@media (prefers-reduced-motion: reduce) {

    .entag-mega,
    .entag-col--2,
    .entag-col--3,
    .entag-col--4,
    .entag-drawer,
    .entag-drawer__track,
    .entag-btn,
    .entag-card {
        transition: none !important;
        animation: none !important;
    }
}