/* ==========================================================================
   CMP TV — Signage / Kiosk enhancements
   Loaded on the J-Network template. Provides:
     1. A left hot-edge that reveals the off-canvas menu on mouse-over.
     2. An in-page fullscreen toggle button (PWA / kiosk experience).
   Kept fully self-contained so the service worker can pre-cache it and so
   template updates never clobber it (it lives under /media, not /templates).
   ========================================================================== */

/* ---- 1. Mouse-over off-canvas hot-edge ---------------------------------- */

/* Invisible hover strip pinned to the left edge. Hovering it (or the burger)
   opens the off-canvas menu; leaving the menu area closes it. The strip sits
   below the off-canvas panel so it never blocks the menu once open. */
#cmptv-hotedge {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 100vh;
    z-index: 1029;            /* under the off-canvas panel (usually >= 1030) */
    background: transparent;
    /* subtle affordance so users discover the edge */
    box-shadow: inset 3px 0 0 rgba(8, 72, 141, 0.0);
    transition: box-shadow .25s ease;
    pointer-events: auto;
}
#cmptv-hotedge:hover {
    box-shadow: inset 3px 0 0 rgba(8, 72, 141, 0.55);
}

/* On touch / coarse pointers there is no hover, so hide the strip and rely on
   the normal burger tap. */
@media (hover: none), (pointer: coarse) {
    #cmptv-hotedge { display: none; }
}

/* When the menu is open via hover, give the burger a "pressed" look. */
body.cmptv-hovering .offcanvas-toggler .burger-icon span {
    background-color: #08488D;
}

/* ---- 2. Fullscreen toggle button ---------------------------------------- */

#cmptv-fs-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #08488D;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: transform .15s ease, background .2s ease, opacity .2s ease;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
}
#cmptv-fs-btn:hover {
    transform: scale(1.08);
    background: #0a5cb0;
}
#cmptv-fs-btn:active { transform: scale(.96); }
#cmptv-fs-btn:focus-visible { outline: 3px solid #7db9ff; outline-offset: 2px; }

#cmptv-fs-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
}
/* swap icon glyph when already fullscreen */
#cmptv-fs-btn .icon-exit { display: none; }
body.cmptv-fullscreen #cmptv-fs-btn .icon-enter { display: none; }
body.cmptv-fullscreen #cmptv-fs-btn .icon-exit  { display: block; }

/* When running as an installed PWA in fullscreen/standalone display mode the
   browser chrome is already gone, so the manual button is redundant — hide it. */
@media all and (display-mode: fullscreen),
       all and (display-mode: standalone) {
    #cmptv-fs-btn { display: none; }
}

/* Give a clean, distraction-free canvas while in page fullscreen. */
body.cmptv-fullscreen .sp-scroll-up { display: none; }

/* ==========================================================================
   3. Signage layout (tmpl=tv) — chrome-free kiosk view
   Only applies on the dedicated CMP TV signage body so the normal site is
   untouched. Provides a professional floating burger for the off-canvas menu
   (the default Helix burger lives in the header, which the signage layout
   omits) and removes any residual header spacing.
   ========================================================================== */

/* Signage body: no header offset, own background matching the PWA manifest. */
body.cmptv-signage {
    margin: 0;
    padding: 0;
    background: #050c1a;   /* matches manifest background_color */
}
body.cmptv-signage .body-wrapper,
body.cmptv-signage .body-innerwrapper { padding: 0; margin: 0; }

/* Floating burger — top corner professional pill, always reachable.
   Side follows the off-canvas position (Helix adds offcanvas-toggler-left /
   -right); default to right if neither is present. */
body.cmptv-signage #offcanvas-toggler.cmptv-burger {
    position: fixed;
    top: 16px;
    right: 16px;
    left: auto;
    float: none;
    margin: 0;
    z-index: 2050;
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #08488D;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: transform .15s ease, background .2s ease, opacity .2s ease;
    opacity: .85;
}
body.cmptv-signage #offcanvas-toggler.cmptv-burger:hover {
    opacity: 1;
    transform: scale(1.08);
    background: #0a5cb0;
}
/* If the off-canvas opens from the left, put the burger top-left to match. */
body.cmptv-signage #offcanvas-toggler.cmptv-burger.offcanvas-toggler-left {
    left: 16px;
    right: auto;
}
body.cmptv-signage #offcanvas-toggler.cmptv-burger .burger-icon { width: 22px; }
/* Force white bars regardless of template defaults (which use #000). */
body.cmptv-signage #offcanvas-toggler.cmptv-burger .burger-icon > span {
    background-color: #fff !important;
}

/* Once the off-canvas menu is open, fade the burger so it doesn't overlap
   the close (×) control inside the panel. */
body.open-offcanvs.cmptv-signage #offcanvas-toggler.cmptv-burger,
body.offcanvas-active.cmptv-signage #offcanvas-toggler.cmptv-burger { opacity: 0; pointer-events: none; }

/* Hide the burger while running as an installed fullscreen/standalone PWA?
   No — keep it: the off-canvas menu is the ONLY navigation in signage mode. */