/* (c) 2024-2026 ASSISTUK Lars Tiedemann. All Rights Reserved.
   Licensed for use exclusively on dp3.assistuk-apps.net */
/* =========================================================================
   dp-footer.css — Unified DP3 legal footer (powered-by · version · AssistUK
                   · Impressum · Datenschutz · AGB).
   Apply consistently across SuperHub, every sub-hub, and every paint app.

   Design:
     - 32 px fixed bottom bar (CSS variable --dp-footer-height)
     - subtle 0.45 opacity in default state, 1.0 on hover (full row glows)
     - never blocks click on the tiles ABOVE it (pointer-events: none on
       outer wrapper; the actual <a> elements are pointer-events: auto)
     - i18n labels are set by dp-footer-i18n.js (already covers 23 langs)
     - body of host page gets `padding-bottom: var(--dp-footer-height)`
       via the helper class .dp-has-footer (added by dp-footer.js) so
       tile grids that compute their height as 100vh shrink by the footer
       height instead of being covered.
   ========================================================================= */
:root {
  --dp-footer-height: 32px;
  --dp-footer-bg:     rgba(0, 0, 0, 0.78);
  --dp-footer-fg:     rgba(255, 255, 255, 0.55);
  --dp-footer-fg-hover: rgba(255, 255, 255, 0.95);
  --dp-footer-sep:    rgba(255, 255, 255, 0.18);
}

/* Reserve space at the bottom of the page so tiles don't end up under
   the footer. Added by dp-footer.js when the footer is injected.
   We reserve the footer height PLUS a small breathing gap so content always
   ends cleanly ABOVE the footer (never pressing against / spilling under it)
   — the SuperHub model, applied uniformly to every surface (hubs, apps,
   museum, overlays). The gap also clears the safe-area inset on notched
   devices. This `!important` previously pinned the padding to exactly the
   footer height, which overrode the hubs' own `footer + 6px` and left the
   bottom row touching the bar; the `+ max(8px, …)` restores the gap globally. */
body.dp-has-footer {
  padding-bottom: calc(var(--dp-footer-height) + max(8px, env(safe-area-inset-bottom, 0px))) !important;
  box-sizing: border-box;
}

/* 2026-05-18: helper variable apps can read in JS to compute heights that
   respect the footer (e.g. window.innerHeight - DP_FOOTER_HEIGHT). */
body.dp-has-footer {
  --dp-footer-px: 32;
}

/* Make sure grid layouts using vh/dvh actually leave room for the footer.
   The body box-sizing handles this automatically when the inner layout
   uses flexbox or grid that respect the body's content area — but many
   apps use `position:fixed` overlays that ignore body padding. Those need
   to add the footer height to their `bottom:` value (helpers below). */
body.dp-has-footer .dp-app-canvas,
body.dp-has-footer canvas#defaultCanvas0 {
  /* Canvas is not affected by body padding-bottom because it's
     position:fixed; subtract the footer height from its height instead. */
  max-height: calc(100vh - var(--dp-footer-height)) !important;
  max-height: calc(100dvh - var(--dp-footer-height)) !important;
}

/* Fixed-bottom UI strips inside apps (toolbars, mode pickers, breadcrumb)
   should sit ABOVE the footer, not behind it. Apps that opt-in get an
   extra `--dp-footer-height` offset via this class.
   NOTE: #dp-breadcrumb is NOT in this list — it positions itself via
   _positionBreadcrumb() (dp-breadcrumb.js) using the body's padding-bottom
   (=footer height) directly, so adding margin-bottom here would double-count
   the footer offset and push the pill 32px too high. */
body.dp-has-footer .dp-above-footer,
body.dp-has-footer .dp-paint-mode-bar,
body.dp-has-footer .dp-dwell-feedback-toast {
  margin-bottom: var(--dp-footer-height);
}

/* Make tile-grid content slightly more compact so it fits comfortably
   above the footer without elements pressing against it. Acts ONLY on
   hub-style pages (body with --grid-rows variable set in the style attr). */
body.dp-has-footer[style*="--grid-rows"] {
  /* Each tile's own inner content shrinks 4%, leaving a touch more
     breathing room top and bottom (which goes to the footer + first row). */
  font-size: 96%;
}

/* The footer itself — overrides whatever inline styles old hub/app HTMLs
   placed on <.dp-legal>. */
.dp-legal {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--dp-footer-height) !important;
  padding: 0 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: var(--dp-footer-bg) !important;
  color: var(--dp-footer-fg) !important;
  font-family: var(--dp-font, system-ui, -apple-system, "Segoe UI", sans-serif) !important;
  font-size: clamp(10px, 1.1vw, 13px) !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.55 !important;
  /* z-index has to sit ABOVE every selection overlay (49000) and every
     generic .dp-overlay (1000) so the legal footer is always reachable. */
  z-index: 99999 !important;
  pointer-events: auto !important;
  transition: opacity 0.2s, background 0.2s !important;
  backdrop-filter: blur(4px);
}

/* Whole row brightens on hover, exactly like SuperHub's other UI strips. */
.dp-legal:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.92) !important;
}

/* Default link styling. */
.dp-legal a,
.dp-legal a:visited {
  color: var(--dp-footer-fg) !important;
  text-decoration: none !important;
  padding: 4px 4px !important;
  transition: color 0.15s !important;
}
.dp-legal a:hover,
.dp-legal a:focus-visible {
  color: var(--dp-footer-fg-hover) !important;
  text-decoration: underline !important;
}

/* Subtle separators between items (the existing markup uses inline <span>|
   separators; we override their inline colours so they match the theme). */
.dp-legal > span,
.dp-legal .dp-footer-sep {
  color: var(--dp-footer-sep) !important;
  user-select: none;
}

/* Version number gets the "muted" fg colour. */
.dp-legal .dp-footer-version,
.dp-legal > span:first-child {
  opacity: 0.85;
}

/* Powered-by sponsor slot — gets injected by dp-sponsor-render.renderFooter
   into the same <.dp-legal>. We keep it left-aligned. */
.dp-legal .dp-sponsor-footer {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: inherit;
  color: inherit;
}
.dp-legal .dp-sponsor-footer img {
  height: 18px;
  width: auto;
  vertical-align: middle;
  border-radius: 3px;
}

/* Mobile / very-narrow viewport: hide separators, wrap to two rows is OK */
@media (max-width: 480px) {
  .dp-legal {
    font-size: 10px !important;
    gap: 8px !important;
    padding: 0 6px !important;
  }
  .dp-legal > span:not(.dp-footer-version) {
    display: none;
  }
}