/* vmpix-remove-hud-border.css
   Removes the SVG HUD border/frame (the red outline) but keeps the translucent box + text.
   This targets the actual source of the border: <svg class="neonFrame"> in index.html.
*/

/* Hide the SVG border entirely */
.neonFrame {
  display: none !important;
}

/* Keep the container as the translucent panel */
.neonFrameWrap {
  /* Keep your existing translucency; these are safe defaults if none exists */
  background: rgba(20, 10, 12, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: none !important;
  box-shadow: none !important;
  border-radius: 18px;
}

/* If you have any extra "corner" / line layers, hide them too */
.neonFrameWrap .corner,
.neonFrameWrap .frame,
.neonFrameWrap .line,
.neonFrameWrap [class*="corner"],
.neonFrameWrap [class*="line"] {
  background: none !important;
  box-shadow: none !important;
}
/* =========================================================
   TYPOGRAPHY + FACEBOOK/MESSENGER WEBVIEW SANITY PATCH
   - Prevents iOS/FB in-app text autosizing from blowing up or clipping
   - Makes small UI text (buttons/chips/meta) scale down gracefully
   ========================================================= */

/* Prevent in-app browsers from auto-resizing text */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.webview, html.messenger, html.facebook, html.instagram, html.twitter, html.x{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* =========================================================
   NAV "BUBBLE" LABEL FIT (HOME / MUSIC / WRESTLING / ...)
   - Fixes truncated labels like "HOM", "MUS", "WRESTL" on mobile/webviews.
   - Root cause: pill label uses a width-in-"ch" typing animation; "ch" can
     under-measure Orbitron/letter-spacing so the last characters clip.
   - On small screens + in-app webviews, prefer stable, always-visible labels.
   ========================================================= */

:root{
  --vmpix-nav-font: clamp(11px, 3.3vw, 13px);
  --vmpix-nav-pad-y: clamp(5px, 1.2vw, 7px);
  --vmpix-nav-pad-x: clamp(10px, 2.4vw, 14px);
}

/* Only the legacy wrapped NAV stub. Leave the new dropdown menu panel alone. */
.hudContent > .hudStub:not(.hudMain):not(.hudMenuPanel){
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2.2vw, 12px);
  /* extra top padding so pill borders/glow never clip in IG/FB webviews */
  padding: 14px 12px 12px;
  /* override base .hudStub overflow:hidden so pill corners/glow aren't cut off */
  overflow: visible !important;
}

/* Make pill text scale down gracefully and never clip */
.hudIntroText:not(.hudMenuItem){
  font-size: var(--vmpix-nav-font) !important;
  padding: var(--vmpix-nav-pad-y) var(--vmpix-nav-pad-x) !important;
}

/* Kill the "width: ch" typing clip on smaller screens / webviews */
@media (max-width: 760px){
  .hudIntroType{
    width: auto !important;
    overflow: visible !important;
    animation: none !important;
    white-space: nowrap;
  }

  /* Fix mobile overlap: base grid row is shorter than the logo image.
     Let rows size naturally and scale logo down on small screens. */
  .hudContent{
    grid-template-rows: auto 0 1fr !important;
  }
  .hudTopbar{
    padding: 10px 12px !important;
  }
  .hudBrandImg{
    height: 72px !important;
    max-width: 100% !important;
  }

  .hudMenuOverlay{
    position: absolute !important;
    left: 20px !important;
    right: auto !important;
    width: min(320px, calc(100% - 24px)) !important;
    max-width: calc(100% - 24px) !important;
    transform: none !important;
    background: #000 !important;
    opacity: 1 !important;
    z-index: 999 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
    border-radius: 18px !important;
  }

  .hudMenuOverlay .hudMenuItem{
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    min-height: 42px !important;
    padding: 11px 16px !important;
    background: #000 !important;
    text-align: left !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: none !important;
    transform: none !important;
    align-items: center !important;
    justify-items: start !important;
    line-height: 1.15 !important;
  }
}

.hudMenuOverlay{
  background: #000 !important;
}

.hudMenuOverlay .hudMenuItem{
  background: #000 !important;
}

.hudMenuOverlay .hudMenuSubItem{
  min-height: 38px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  padding-left: 28px !important;
}

.hudMenuOverlay .hudMenuItem .hudIntroType{
  display: block !important;
  width: 100% !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

html.webview .hudIntroType,
html.messenger .hudIntroType,
html.facebook .hudIntroType,
html.instagram .hudIntroType,
html.twitter .hudIntroType,
html.x .hudIntroType{
  width: auto !important;
  overflow: visible !important;
  animation: none !important;
}

/* =========================================================
   MOBILE / WEBVIEW LAYOUT HARDENING
   - Prevents "100vh" traps in iOS + in-app browsers
   - Ensures the HUD main panel scrolls instead of clipping
   ========================================================= */

/* Use the device-aware --vh value (set in index.html + vmpix-webview.js) */
.view{
  min-height: calc(var(--vh) * 100) !important;
}

/* iOS notch / safe-area padding (does nothing on non-notch devices) */
body{
  padding-bottom: env(safe-area-inset-bottom);
}

/* Grid scroll fix: allow the 3rd row (main content) to actually scroll */
.hudContent{
  min-height: 0 !important;
  /*
    Device-aware top/bottom insets:
    - safe-area-* handles iOS notches
    - --vv-top/--vv-bottom (set via visualViewport in index.html) handles
      in-app browser UI overlap (Instagram/X/FB, etc.)
  */
  padding-top: calc(14px + env(safe-area-inset-top) + var(--vv-top, 0px)) !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)) !important;
}
.hudStub.hudMain{
  height: 100% !important;
  min-height: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/*
  In IG/FB/Messenger webviews, the main panel's top frame line can visually
  "connect" into the nav pills when the nav wraps to 2 rows. Give the main
  panel a little breathing room on touch/mobile so the line sits below the pills.
*/
@media (hover: none){
  .hudStub.hudMain{
    margin-top: 10px !important;
  }
}
@media (max-width: 900px){
  .hudStub.hudMain{
    margin-top: 10px !important;
  }
}

/* On phones, align content to the top so long lists don't feel "stuck" */
@media (max-width: 600px){
  .hudMainPlain{
    place-items: start !important;
    text-align: left !important;
  }
}

/* Respect touch devices: reduce hover-only affordances that can "stick" after taps */
@media (hover: none){
  .smug-photo-box:hover .photoHoverMeta,
  .waSmug-photo-box:hover .waPhotoHoverMeta,
  .albumRowCard:hover{
    /* Keep interaction stable on tap; modules can provide tap UI if desired */
    transform: none !important;
  }
}

/* Base readable sizing (keeps desktop unchanged, helps small screens) */
:root{
  --vmpix-body-font: clamp(13px, 3.6vw, 16px);
  --vmpix-ui-font: clamp(11px, 3.2vw, 12px);
  --vmpix-micro-font: clamp(10px, 2.9vw, 11px);
}
body{
  font-size: var(--vmpix-body-font);
}

/* HUD text line: keep it from clipping in tighter webviews */
html.webview .neonFrameTextInner .hudMainType{
  font-size: clamp(12px, 3.4vw, 14px) !important;
  line-height: 1.35 !important;
}

/* On narrow screens inside FB/Messenger: allow scrolling rather than cutting text */
@media (max-width: 520px){
  html.webview .neonFrameTextInner{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Common UI micro-text used across modules */
.backToBandsBtn,
.backToAlbumsBtn,
.waBackBtn,
#homeContentRoot .homeQuickBtn{
  font-size: var(--vmpix-ui-font) !important;
}

/* Chips + labels */
.albumKeywordLabel,
.albumKeywordChip,
.waAlbumKeywordChip,
.waAlbumKeywordEmpty{
  font-size: var(--vmpix-micro-font) !important;
}

/* Photo hover meta + lightbox titles (avoid truncation on small screens) */
.photoHoverMeta .fn,
.photoHoverMeta .sub,
.waPhotoHoverMeta .fn,
.waPhotoHoverMeta .sub,
.lightboxTitle .line1,
.lightboxTitle .line2,
.lightboxCounter{
  font-size: var(--vmpix-micro-font) !important;
  line-height: 1.2 !important;
}