@charset "utf-8";
/**
 * ViewerTweaks.css -- loaded after ClientViewPage.css and SidebarStyles.css (client_view.php).
 *   1. Subtle Primary-colour gradient across the top of the slide-out sidebar.
 *   2. A lone tab (tour with no written scene descriptions) gets a Primary-tinted header; with two or more tabs the
 *      normal active / inactive shading is kept so tabs stay distinguishable.
 *   3. Logo shadow options: logo-shadow-dark (default, nothing to override) | light | none.
 * NEVER put PHP tags in this file (it is served statically).
 */

/* 1. Top-of-sidebar gradient (Default, Glass, Light; Business already carries a Primary glow; Campus is solid Primary) */
#standard-viewer.sbs-default .sidebar,
#standard-viewer.sbs-glass .sidebar {
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--sidebar-bg-raw, #444) 55%, #000) 0,
        color-mix(in srgb, var(--sidebar-bg-raw, #444) 18%, transparent) 190px,
        transparent 340px);
}
#standard-viewer.sbs-light .sidebar {
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--sidebar-bg-raw, #444) 22%, transparent) 0,
        transparent 260px);
}

/* 2. Single-tab header in the Primary colour */
#standard-viewer .sidebar .tab-nav.one-tab {
    background: color-mix(in srgb, var(--sidebar-bg-raw, #444) 62%, #000);
}
#standard-viewer.sbs-light .sidebar .tab-nav.one-tab {
    background: color-mix(in srgb, var(--sidebar-bg-raw, #444) 85%, #000);
    --tab-inactive-text: var(--footer-btn-text, #fff);
}
#standard-viewer.sbs-light .sidebar .tab-nav.one-tab .tab-btn,
#standard-viewer.sbs-light .sidebar .tab-nav.one-tab .tab-btn.active,
#standard-viewer.sbs-light .sidebar .tab-nav.one-tab .tab-btn small { color: #fff; }

/* 3. Logo shadow: client_view.php computes the whole filter (preset, strength, distance, colour) into --logo-filter.
   The fallback is the original dark shadow, for pages that never set it (e.g. static exports). */
#standard-viewer .client-logo { filter: var(--logo-filter, drop-shadow(0 4px 10px rgba(0,0,0,0.8))); }

/* 4. Text under the logo (Tour Theme > Text Under Logo). Inherits the logo's shadow through the .client-logo filter. */
#standard-viewer .client-logo.has-logo-text { width: min(320px, calc(100vw - 3rem)); }
#standard-viewer .client-logo #hud-logo-text { margin-top: 8px; width: 100%; max-width: 100%; box-sizing: border-box; white-space: pre-line; line-height: 1.35; font-weight: 300; overflow-wrap: anywhere; font-family: 'Outfit', sans-serif; }
/* Gallery theme: the logo is centred over its 240px rail (left:120px; translateX(-50%)), so a wider block would hang off the
   screen's left edge. Keep the block inside the rail and centre the text under the logo. */
@media (min-width: 1400px) {
    #standard-viewer[class*="gallery-controls-"] .client-logo.has-logo-text { width: 216px; }
    #standard-viewer[class*="gallery-controls-"] .client-logo #hud-logo-text { text-align: center; }
}
@media (max-width: 767px) { #standard-viewer .client-logo #hud-logo-text { display: none !important; } }

/* 5. Hotspot shadow (Tour Theme > Hotspot Shadow). The class and --hs-filter are set on <html> by client_view.php and the editor.
   Hotspot images and arrows carry their shadow as an inline filter, hence !important. Floor rings are not affected. */
html.hs-shadow-on .pnlm-hotspot-base [style*="drop-shadow"],
html.hs-shadow-on .flat-hs [style*="drop-shadow"],
html.hs-shadow-on .pnlm-hotspot-base .hs-guide-svg,
html.hs-shadow-on .flat-hs .hs-guide-svg,
html.hs-shadow-on .pnlm-hotspot-base img,
html.hs-shadow-on .flat-hs img { filter: var(--hs-filter, none) !important; }

/* 6. Gallery theme: thumbnails start below the logo and any text under it (--gallery-rail-pt is measured by client_view.php; 130px is the old fixed value). */
#standard-viewer #gallery-rail { padding-top: var(--gallery-rail-pt, 130px); }


/* 7. Motion switch off (visitor unticked "Motion"): hotspot animations hold still, same look as Pulse Hotspots off. */
html.motion-off .floor-ring::after, html.motion-off .floor-ring.hs-still::after { animation: none; }
html.motion-off .hs-guide-halo { animation: none; opacity: 0.5; transform: scale(1.25); }
html.motion-off .hs-arrow-trail { animation: none; opacity: 0.7; }
html.motion-off .pnlm-hotspot-base, html.motion-off .flat-hs { animation: none; }

/* 7. Sidebar footer (Jump to Hotspots / Phone / Web / home icon): a long web address or phone line wraps inside its own space
   instead of pushing the other items out. The buttons keep their size; the contact stack takes whatever room is left. */
#standard-viewer .footer-row { gap: 12px; }
#standard-viewer .footer-row > .hotspot-jump,
#standard-viewer .footer-row > button:not(.hotspot-jump) { flex-shrink: 0; }
#standard-viewer #hud-contact-stack { flex: 1 1 0; min-width: 0; }
#standard-viewer .phone-block { min-width: 0; align-items: flex-start; }
#standard-viewer .phone-label { flex-shrink: 0; }
#standard-viewer .footer-phone { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
#standard-viewer #hud-phone-link { white-space: nowrap; }
#standard-viewer #hud-website-link { font-size: 0.8rem; }
/* Footer Jump to Hotspots is icon-only (same size as the scene-info one at the top of the pane). Its tooltip opens from the
   button's LEFT edge: the button is the first item in the row, so the right-anchored tooltip the scene button uses would run
   off the sidebar's left edge. */
#standard-viewer #btn-jump-hotspots { position: relative; flex: 0 0 48px; width: 48px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
#standard-viewer #btn-jump-hotspots .hotspot-jump-tooltip { right: auto; left: 0; transform-origin: bottom left; }
#standard-viewer #btn-jump-hotspots .hotspot-jump-tooltip::before { right: auto; left: 16px; }
#btn-jump-hotspots:hover .hotspot-jump-tooltip,
#btn-jump-hotspots:focus-visible .hotspot-jump-tooltip { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* 8. Icons only on the Basic / Gallery controls bar (Tour Theme > Icons only on the controls bar): the words go, the icons, aria-labels and
   titles stay. The Motion checkbox keeps its label (a checkbox without one is unclear). */
#standard-viewer.controls-icons-only #basic-controls-cluster .bar-label,
#standard-viewer.controls-icons-only #gallery-controls-cluster .bar-label,
#standard-viewer.controls-icons-only .fs-dock-label { display: none; }


/* 6. Below 1400px (tablet and phone) the Gallery layout's rail, rail tab, floating buttons and controls bar, and the Basic controls
   bar, never show: those widths use the hamburger menu and the slide-out panel for all of that. The logo goes back to its normal
   corner (on desktop it is centred over the 240px rail). Loaded last and id-scoped, so it also beats any theme stylesheet that
   forces these on with display:flex !important, in the Demo layout switcher's views as well. */
@media (max-width: 1399px) {
    #standard-viewer #basic-controls-cluster,
    #standard-viewer #gallery-controls-cluster,
    #standard-viewer #gallery-rail,
    #standard-viewer #gallery-rail-tab,
    #standard-viewer #gallery-cta-stack,
    #gallery-rail, #gallery-rail-tab, #gallery-cta-stack { display: none !important; }
    #standard-viewer[class*="gallery-controls-"] .client-logo { left: 1.5rem !important; transform: none !important; }
    #standard-viewer[class*="gallery-controls-"] .client-logo #hud-client-sub,
    #standard-viewer[class*="gallery-controls-"] .client-logo #hud-client-name { text-align: left; }
}