/* ==========================================================
   Tiger Nav Menu — front-end styles
   ========================================================== */

/* 1. WRAPPER */
.tg-nm-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* 2. INLINE NOTICE */
.tg-nm-notice {
    padding: 20px;
    text-align: center;
    border: 1px dashed #ccc;
    color: #999;
}

/* 3. HAMBURGER */
.tg-nm-hamburger-wrap {
    display: none;
    align-items: center;
}
.tg-nm-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px 8px;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.tg-nm-hamburger i,
.tg-nm-hamburger svg {
    pointer-events: none;
    display: block;
}

/* 4. DESKTOP NAV CONTAINER */
.tg-nm-desktop {
    width: 100%;
}
.tg-nm-wrap .tg-nm-desktop ul,
.tg-nm-wrap .tg-nm-desktop ul ul,
.tg-nm-wrap .tg-nm-oc ul,
.tg-nm-wrap .tg-nm-oc ul ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tg-nm-wrap .tg-nm-desktop ul li,
.tg-nm-wrap .tg-nm-oc ul li {
    list-style: none !important;
    list-style-type: none !important;
}
.tg-nm-wrap .tg-nm-desktop ul li::marker,
.tg-nm-wrap .tg-nm-oc ul li::marker {
    content: none !important;
}
.tg-nm-wrap .tg-nm-desktop ul li::before,
.tg-nm-wrap .tg-nm-oc ul li::before {
    display: none !important;
}
/* Menu Layout applies to BOTH renderings.
   The widget renders `.tg-nm-desktop` normally and `.tg-nm-oc` in drawer/embedded mode. These
   rules used to target `.tg-nm-desktop` only, so the Menu Layout control did nothing whenever
   the `.tg-nm-oc` markup was on screen — the menu stayed stuck in the column direction set by
   the base `.tg-nm-oc ul.tg-nm-menu` rule below, no matter what the user picked.
   3 classes + 2 elements here outranks that base rule (2 classes + 1 element). */
.tg-nm-layout-horizontal .tg-nm-desktop > ul,
.tg-nm-layout-horizontal .tg-nm-oc > nav > ul.tg-nm-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.tg-nm-layout-vertical .tg-nm-desktop > ul,
.tg-nm-layout-vertical .tg-nm-oc > nav > ul.tg-nm-menu {
    display: flex;
    flex-direction: column;
}
.tg-nm-desktop > ul > li {
    position: relative;
}
.tg-nm-desktop > ul > li > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* 5. UNDERLINE INDICATOR */
.tg-nm-underline .tg-nm-desktop > ul > li > a {
    position: relative;
}
.tg-nm-underline .tg-nm-desktop > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.tg-nm-underline .tg-nm-desktop > ul > li:hover > a::after,
.tg-nm-underline .tg-nm-desktop > ul > li.current-menu-item > a::after,
.tg-nm-underline .tg-nm-desktop > ul > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* 6. DROPDOWN SUBMENU */
.tg-nm-desktop .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 200px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}
.tg-nm-desktop .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}
.tg-nm-desktop .sub-menu li {
    position: relative;
}
.tg-nm-desktop .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    text-decoration: none;
    padding: 10px 20px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.tg-nm-wrap[data-open-on="hover"] .tg-nm-desktop > ul > li:hover > .sub-menu,
.tg-nm-wrap[data-open-on="hover"] .tg-nm-desktop .sub-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tg-nm-wrap[data-open-on="click"] .tg-nm-desktop li.tg-nm-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tg-nm-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    transition: transform 0.2s ease;
    pointer-events: none;
}
.tg-nm-wrap li.tg-nm-open > a .tg-nm-arrow,
.tg-nm-wrap li:hover > a .tg-nm-arrow {
    transform: rotate(180deg);
}

/* 7. OVERLAY — fixed full-viewport backdrop */
.tg-nm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    /*
     * A CLOSED overlay must be un-clickable STRUCTURALLY, not merely invisible.
     *
     * In the off-canvas widget an Elementor per-instance rule (Overlay Opacity) outranked the
     * base `opacity: 0` and left a full-viewport, hit-testable layer over the whole page — every
     * click on the site was swallowed, including the hamburger's. This widget has no such control
     * today, but pointer-events is not reachable by any control, so it is a floor that keeps that
     * failure impossible here regardless of what CSS lands on the overlay later.
     */
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.tg-nm-overlay.tg-nm-overlay-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* 8. OFFCANVAS PANEL — fixed slide-in */
.tg-nm-oc {
    position: fixed;
    top: 0;
    z-index: 9999;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*
     * A drawer can never be wider than the screen, whatever Width is configured.
     * Without this, a panel set to e.g. 800px on a 354px phone extends past the edge and part of
     * the menu is unreachable. --tg-nm-vw is this widget's own measured visual viewport (published
     * by tiger-navmenu.js); the 100vw fallback keeps it sane if that script never runs.
     */
    max-width: var(--tg-nm-vw, 100vw);
    /* Content must not widen the drawer — the drawer's own Width setting is authoritative. */
    overflow-x: hidden;
    background-color: #ffffff;
    visibility: hidden;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s,
                opacity 0.35s;
}

.tg-nm-slide-left {
    left: 0;
    right: auto;
    transform: translateX(-105%);
}
/*
 * Anchored to the LEFT edge in both directions — published by tiger-navmenu.js.
 *
 * `right: 0` ties a drawer to the right edge of its containing block, which the PAGE can move:
 * any horizontally-overflowing content pushes that edge past the screen and the drawer opens into
 * the overflow, invisible. Measured live at a 430px viewport: a container hardcoded to 1200px took
 * document.scrollWidth to 815, and the drawer opened correctly against 815 — off-screen.
 *
 * `left: 0` cannot be moved by right-side overflow, so it is stable on every theme and template.
 * --tg-nm-vw is the measured visual viewport; % in translateX resolves against the drawer's own
 * width, so `--tg-nm-vw - 100%` lands it flush to the screen edge at any configured width.
 */
.tg-nm-slide-right {
    left: 0;
    right: auto;
    transform: translateX(var(--tg-nm-vw, 100vw));
}

.tg-nm-oc.tg-nm-oc-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}
.tg-nm-slide-right.tg-nm-oc-open {
    transform: translateX(calc(var(--tg-nm-vw, 100vw) - 100%));
}

/* 8b. EMBEDDED MODE — the same panel, rendered inline inside a host that already opens it
   (a Tiger Off-Canvas widget, a popup, a custom drawer).

   Everything here undoes the "floating drawer" behaviour ONLY; all the item-level styling from
   the Offcanvas Panel controls still applies, which is the whole point of reusing .tg-nm-oc.
   Without this the panel would be position:fixed at 100vh INSIDE its host and slid off-screen.

   No !important: `.tg-nm-embedded .tg-nm-oc` (0,2,0) already outranks `.tg-nm-oc` (0,1,0), and
   the slide classes are never emitted in embedded mode. Keeping specificity low means the user's
   own per-instance Elementor CSS can still override any of it. */
.tg-nm-embedded .tg-nm-oc {
    padding: 0;                      /* the host panel supplies the padding */
    position: static;
    height: auto;
    max-height: none;
    width: 100%;
    z-index: auto;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    overflow-y: visible;
    background-color: transparent;   /* the host panel owns the background */
    box-shadow: none;
}

/* Belt-and-braces: if a saved layout still carries a slide class (e.g. the widget was switched
   to embedded after being configured as a drawer), don't let it translate off-screen. */
.tg-nm-embedded .tg-nm-oc.tg-nm-slide-left,
.tg-nm-embedded .tg-nm-oc.tg-nm-slide-right {
    transform: none;
    left: auto;
    right: auto;
}

/* Drawer chrome never renders in embedded mode, but hide it defensively so a stale cached
   markup fragment can't show an orphan hamburger/close button inside the host panel. */
.tg-nm-embedded .tg-nm-hamburger-wrap,
.tg-nm-embedded .tg-nm-overlay,
.tg-nm-embedded .tg-nm-oc-header {
    display: none;
}

.tg-nm-oc-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.tg-nm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.tg-nm-close i,
.tg-nm-close svg {
    pointer-events: none;
    display: block;
}
.tg-nm-oc ul.tg-nm-menu {
    display: flex;
    flex-direction: column;
}
.tg-nm-oc ul.tg-nm-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    padding: 12px 0;
    transition: color 0.2s ease;
}
.tg-nm-oc ul.tg-nm-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    display: none;
    padding-left: 16px;
    transition: none;
    pointer-events: auto;
}
.tg-nm-oc ul.tg-nm-menu li.tg-nm-open > .sub-menu {
    display: block;
}
body.tg-nm-body-lock {
    overflow: hidden !important;
}

/* ==============================================
   9. BREAKPOINTS LOGIC
   ============================================== */

/* ALWAYS — hamburger always shown */
.tg-nm-bp-always .tg-nm-hamburger-wrap { display: flex !important; }
.tg-nm-bp-always .tg-nm-desktop { display: none !important; }

/* TABLET — < 1025px */
@media (max-width: 1024px) {
    .tg-nm-bp-tablet .tg-nm-hamburger-wrap { display: flex !important; }
    .tg-nm-bp-tablet .tg-nm-desktop { display: none !important; }
}
@media (min-width: 1025px) {
    .tg-nm-bp-tablet:not(.tg-nm-embedded) .tg-nm-oc,
    .tg-nm-bp-tablet:not(.tg-nm-embedded) .tg-nm-overlay {
        display: none !important;
        transition: none !important;
    }
}

/* MOBILE — < 768px */
@media (max-width: 767px) {
    .tg-nm-bp-mobile .tg-nm-hamburger-wrap { display: flex !important; }
    .tg-nm-bp-mobile .tg-nm-desktop { display: none !important; }
}
@media (min-width: 768px) {
    .tg-nm-bp-mobile:not(.tg-nm-embedded) .tg-nm-oc,
    .tg-nm-bp-mobile:not(.tg-nm-embedded) .tg-nm-overlay {
        display: none !important;
        transition: none !important;
    }
}

/* NONE — hamburger never shown */
.tg-nm-bp-none .tg-nm-hamburger-wrap { display: none !important; }
.tg-nm-bp-none:not(.tg-nm-embedded) .tg-nm-oc,
.tg-nm-bp-none:not(.tg-nm-embedded) .tg-nm-overlay {
    display: none !important;
}

/* ==========================================================
   THEME ISOLATION — keep this widget STANDALONE.

   Nothing in this plugin was ever setting menu link colours, yet menus kept
   rendering in the active theme's link colour (orange on this site) and the
   widget's own colour controls appeared to "not work". Cause: the THEME styles
   `a` inside our markup, and a theme rule like `.site a{color:...}` can easily
   outrank an unset control -- when a control has no value Elementor emits NO
   rule at all, so the theme simply wins by default.

   These resets neutralise inherited theme styling so the widget starts from a
   blank slate and the widget's OWN controls are the only source of colour.

   Deliberately LOW specificity (one class + element) and NO !important, so:
     - any Elementor control (`.elementor-<post> .elementor-element-<id> ...`,
       3 classes) always outranks them, and
     - a user's custom CSS can still override.
   ========================================================== */
.tg-nm-wrap a,
.tg-nm-wrap a:link,
.tg-nm-wrap a:visited {
    color: inherit;              /* not the theme's link colour */
    text-decoration: none;
    background: none;
    box-shadow: none;
}
.tg-nm-wrap a:hover,
.tg-nm-wrap a:focus,
.tg-nm-wrap a:active {
    color: inherit;              /* theme hover colour must not win either */
    text-decoration: none;
    background: none;
}
.tg-nm-wrap button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}

/* Menu Alignment — mapped to the correct axis for the current layout.
   The control writes `--tg-nm-align`; horizontal menus align along the main axis
   (justify-content), vertical menus along the cross axis (align-items). Without this the
   control emitted justify-content unconditionally, which is a no-op in a column container. */
.tg-nm-layout-horizontal .tg-nm-menu { justify-content: var(--tg-nm-align, flex-start); }
.tg-nm-layout-vertical   .tg-nm-menu { align-items:     var(--tg-nm-align, flex-start); }

/* List-item spacing must come from the widget, never the theme.
   A theme styling `li { margin: 7px 0 }` leaked in and produced DIFFERENT spacing in the editor
   vs the front end: on the front end the drawer is portaled to <body>, escaping the theme's
   content-scoped rule, while in the editor it is not. Same widget, two spacings.
   Item spacing is owned by the Item Spacing control (gap), so zeroing the inherited margin makes
   the widget render identically wherever it lives. Low specificity, no !important — any control
   or user CSS still wins. */
.tg-nm-wrap ul li,
.tg-nm-wrap ol li,
.tg-nm-wrap ul,
.tg-nm-wrap ol {
    /* `ul li` / `ol li` (0,1,2) deliberately outranks a theme's `.some-article li` (0,1,1),
       which otherwise wins purely on load order — this site's single.css ships
       `.tgkb-article li { margin: 7px 0 }` and it was injecting spacing into the menu in the
       editor while the front end (portaled out of that scope) showed none. Still below any
       Elementor control (0,4,2), so user settings continue to win, and no !important. */
    margin-block-start: 0;
    margin-block-end: 0;
}

/*
 * Viewport re-measure must not animate — see tiger-navmenu.js.
 * Without this the CLOSED drawer transitioned between the old and new viewport widths,
 * sweeping across the screen on a device-mode switch (it read as a blink). Scoped to that
 * one mutation, so the open/close slide is unaffected. !important is required because
 * Elementor's per-instance rule sets transition-duration at higher specificity, and this
 * state lasts a single frame.
 */
.tg-nm-vw-sync .tg-nm-oc,
.tg-nm-vw-sync .tg-nm-overlay {
    transition: none !important;
}