/* ==========================================================================
   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. */

/* The Helix off-canvas *style* partial (offcanvas_style = 1-LeftAlign) renders its
   own burger via features/logo.php INSIDE the panel, which duplicates the DOM id
   "offcanvas-toggler" that the signage layout already uses for the floating burger.
   The panel has its own .close-offcanvas control, so the inner one is redundant —
   hide it here (signage bodies only) rather than editing the shared logo.php,
   which every page on all 37 domains renders. */
body.cmptv-signage .offcanvas-menu #offcanvas-toggler { display: none !important; }

/* --------------------------------------------------------------------------
   4. Off-canvas positioning — self-contained.
   The signage layout deliberately does NOT load the template's compiled
   master stylesheet (index.php does that via $theme->add_scss('master',...)),
   because that stylesheet is what brings back the header/footer chrome. But
   the off-canvas panel's positioning rules live in that same file, so without
   them main.js toggles .offcanvas-active and nothing visually happens.
   These are the minimal rules copied from templates/j-network/css/template.css
   so the drawer works in signage mode independently of the template CSS.
   -------------------------------------------------------------------------- */
body.cmptv-signage .offcanvas-menu {
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    overflow: inherit;
    transition: all .4s;
    z-index: 10000;
    background: #08488D;
}
body.cmptv-signage .offcanvas-inner { padding: 50px 30px 30px; overflow-y: auto; max-height: 100%; }

/* Closed / open positions follow the off-canvas side. */
body.cmptv-signage.offcanvs-position-left  .offcanvas-menu { left: -300px; }
body.cmptv-signage.offcanvs-position-right .offcanvas-menu { right: -300px; }
body.cmptv-signage.offcanvas-active.offcanvs-position-left  .offcanvas-menu { left: 0; }
body.cmptv-signage.offcanvas-active.offcanvs-position-right .offcanvas-menu { right: 0; }

body.cmptv-signage .offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    transition: .4s;
}
body.cmptv-signage.offcanvas-active .offcanvas-overlay { opacity: 1; visibility: visible; }

/* Close (×) control inside the panel. */
body.cmptv-signage .close-offcanvas { position: absolute; top: 25px; right: 15px; z-index: 1; }
body.cmptv-signage .close-offcanvas .burger-icon { width: 25px; cursor: pointer; }
body.cmptv-signage .close-offcanvas .burger-icon > span {
    display: block; height: 2px; margin: 5px 0; background-color: #fff;
}
/* Panel nav links must be readable on the dark drawer. */
body.cmptv-signage .offcanvas-inner .menu > li > a,
body.cmptv-signage .offcanvas-inner .menu a { color: #fff; text-decoration: none; }
body.cmptv-signage .offcanvas-inner .menu a:hover { color: #ffd200; }
body.cmptv-signage .offcanvas-inner .menu-child { list-style: none; padding-left: 14px; }

/* --------------------------------------------------------------------------
   5. Nothing floats in front of the signage canvas.
   On a TV / kiosk display the signage modules are the content — any overlay
   widget sitting on top of them is visual noise (and unusable without a
   mouse). These extensions are enabled site-wide across the network, so they
   are suppressed HERE (signage bodies only) rather than being disabled
   globally, which would affect all 37 domains.
   -------------------------------------------------------------------------- */
/* JChat (com_jchat / mod_jchat / mod_jchat_messaging) floating chat bars. */
body.cmptv-signage #jchat_container,
body.cmptv-signage [id^="jchat"],
body.cmptv-signage [class^="jchat"],
body.cmptv-signage [class*=" jchat"],
body.cmptv-signage .mod_jchat,
body.cmptv-signage .jchat_toolbar,
body.cmptv-signage .jchat_docked,
/* plg_system_accessibility icon + its slide-out menu. */
body.cmptv-signage #_access-icon,
body.cmptv-signage ._access-icon,
body.cmptv-signage #_access-menu,
body.cmptv-signage ._access-menu,
body.cmptv-signage #_access,
body.cmptv-signage ._access,
body.cmptv-signage #access_read_guide_bar,
/* Joomla accessibility checker (plg_system_jooa11y) badge. */
body.cmptv-signage #jooa11y-container,
body.cmptv-signage .jooa11y-toggle,
/* Scroll-to-top and any cookie/consent bar. */
body.cmptv-signage .sp-scroll-up,
body.cmptv-signage #sp-scroll-up,
body.cmptv-signage .cc-window,
body.cmptv-signage #cookie-consent {
    display: none !important;
}