/* ============================================================
   obed-brand.css — OBED Café shared premium branding
   Include on every portal page. Adds the glowing logo
   background and brand polish. Pure CSS, no dependencies.
   ============================================================ */

:root {
  --obed-gold:      #c9a45c;
  --obed-gold-soft: rgba(201, 164, 92, 0.55);
  --obed-bg:        #0a0807;
  --obed-bg-2:      #13100d;
}

/* ---- premium glowing logo background ----
   A fixed, layered backdrop: deep gradient + the OBED mandala
   watermark, softly glowing. Sits behind all content. */
.obed-brand-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%,
        rgba(201,164,92,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%,
        rgba(201,164,92,0.07) 0%, transparent 55%),
    linear-gradient(180deg, var(--obed-bg) 0%, var(--obed-bg-2) 100%);
  overflow: hidden;
}

/* the glowing mandala itself */
.obed-brand-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vw, 760px);
  height: min(90vw, 760px);
  transform: translate(-50%, -50%);
  background: url("/assets/logo-transparent.png") center / contain no-repeat;
  opacity: 0.05;
  filter: drop-shadow(0 0 60px rgba(201,164,92,0.65));
  animation: obed-glow 7s ease-in-out infinite;
}

/* a soft halo behind the mandala */
.obed-brand-bg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 540px);
  height: min(70vw, 540px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      rgba(201,164,92,0.16) 0%, transparent 65%);
  animation: obed-pulse 7s ease-in-out infinite;
}

@keyframes obed-glow {
  0%, 100% { opacity: 0.04; filter: drop-shadow(0 0 40px rgba(201,164,92,0.45)); }
  50%      { opacity: 0.085; filter: drop-shadow(0 0 90px rgba(201,164,92,0.85)); }
}
@keyframes obed-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .obed-brand-bg::before,
  .obed-brand-bg::after { animation: none; }
}

/* ---- brand header logo (small, for portal top bars) ---- */
.obed-brand-logo {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(201,164,92,0.45));
}
.obed-brand-logo.lg { height: 88px; }

/* watermark tile for content cards (very subtle) */
.obed-watermark {
  position: relative;
}
.obed-watermark::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 90px;
  height: 90px;
  background: url("/assets/logo-transparent.png") center / contain no-repeat;
  opacity: 0.04;
  pointer-events: none;
}

/* ============================================================
   Background see-through layer
   Portal pages set their own solid body background which would
   hide the glowing logo. We make the body transparent and move
   its colour to an ::before layer ABOVE the glow but BELOW
   content — so the glow shows softly through.
   ============================================================ */
html.obed-branded body {
  background: transparent !important;
}
html.obed-branded body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;                     /* sits below .obed-brand-bg (-1) */
  background: #0a0807;             /* the solid base */
  pointer-events: none;
}

/* ============================================================
   Print-mode cleanup — hides every brand-decorative element when
   the page is being printed, so invoices/receipts/reports come
   out with a pure white background and no ghost watermarks,
   mandalas, or fixed-position artefacts.
   ============================================================ */
@media print {
  html.obed-branded,
  html.obed-branded body { background: #fff !important; color: #000 !important; }
  html.obed-branded body::before,
  .obed-brand-bg,
  .obed-brand-bg::before { display: none !important; }

  /* AI chat widget (injected by /assets/js/ai-chat.js) — a fixed-position
     gold circle at bottom-right. Browsers strip background colors when
     printing, so the gold fill turns white and the circle prints as a
     ghost shape with a shadow. Hide it on print. */
  #aiChatWidget,
  #chatToggle,
  #chatWindow { display: none !important; }

  /* PWA install / Add-to-Home-Screen banner (injected by pwa-head.php on
     iOS / non-installable browsers) — a fixed bottom bar that has no
     business printing. */
  [style*="position:fixed"][style*="bottom:0"],
  [style*="position: fixed"][style*="bottom: 0"] { display: none !important; }
}