/* ══════════════════════════════════════════════════════════════
   Wu-Tang Lab · custom.css
   Dark gold glass-morphism theme
   ══════════════════════════════════════════════════════════════ */

/* ── Google Font ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Root overrides ──────────────────────────────────────────── */
:root {
  --wu-gold:        #f59e0b;
  --wu-gold-bright: #fbbf24;
  --wu-gold-dim:    #92400e;
  --wu-dark:        #0a0908;
  --wu-card-bg:     rgba(15, 14, 10, 0.75);
  --wu-border:      rgba(202, 138, 4, 0.18);
  --wu-border-hover:rgba(251, 191, 36, 0.55);
  --wu-glow:        rgba(251, 191, 36, 0.10);
}

/* ── Global background ───────────────────────────────────────── */
body, #page_wrapper {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(120, 80, 0, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(100, 60, 0, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, #0a0908 0%, #0f0e0a 50%, #09090a 100%) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ── Page title ──────────────────────────────────────────────── */
#page_wrapper h1,
[class*="site-title"],
.page-title {
  background: linear-gradient(90deg, #d97706, #fbbf24, #f59e0b, #d97706);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-shimmer 4s linear infinite;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes gold-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Tab navigation ──────────────────────────────────────────── */
/* Active tab */
[class*="tab"][aria-selected="true"],
[class*="tab"].active {
  color: var(--wu-gold-bright) !important;
  border-bottom: 2px solid var(--wu-gold) !important;
}

/* Inactive tabs */
[class*="tab"] {
  color: rgba(251, 191, 36, 0.5) !important;
  transition: color 0.2s ease;
}

[class*="tab"]:hover {
  color: var(--wu-gold-bright) !important;
}

/* ── Info widget bar ─────────────────────────────────────────── */
#information-widgets {
  background: rgba(10, 9, 8, 0.6) !important;
  border-bottom: 1px solid var(--wu-border) !important;
  backdrop-filter: blur(12px);
}

/* Greeting text */
#information-widgets [class*="greeting"],
#information-widgets [class*="text-"] {
  color: var(--wu-gold) !important;
}

/* ── Service cards — glass morphism ──────────────────────────── */
.service-card,
[class*="service-card"],
[class*="service-container"] > div {
  background: var(--wu-card-bg) !important;
  border: 1px solid var(--wu-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 12px !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease !important;
}

.service-card:hover,
[class*="service-card"]:hover {
  border-color: var(--wu-border-hover) !important;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.15),
    0 4px 24px var(--wu-glow),
    0 0 40px rgba(251, 191, 36, 0.05) !important;
  transform: translateY(-1px) !important;
}

/* ── Service name ────────────────────────────────────────────── */
[class*="service-name"],
[class*="service-title"] {
  color: #f5f0e8 !important;
  font-weight: 600;
}

/* ── Group / section headings ────────────────────────────────── */
[class*="group-header"] h2,
[class*="section-name"],
.group-title {
  color: var(--wu-gold) !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--wu-border) !important;
  padding-bottom: 6px !important;
}

/* ── Widget stat values ──────────────────────────────────────── */
[class*="widget-value"],
[class*="stat-value"] {
  color: var(--wu-gold-bright) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Status dot — online ─────────────────────────────────────── */
[class*="status-dot"][class*="ok"],
[class*="ping"][class*="ok"] {
  background-color: var(--wu-gold) !important;
  box-shadow: 0 0 6px var(--wu-gold) !important;
}

/* ── Search box ──────────────────────────────────────────────── */
[class*="search"] input,
#quicklaunch input {
  background: rgba(15, 14, 10, 0.8) !important;
  border: 1px solid var(--wu-border) !important;
  border-radius: 8px !important;
  color: #f5f0e8 !important;
  caret-color: var(--wu-gold);
  backdrop-filter: blur(8px);
}

[class*="search"] input:focus,
#quicklaunch input:focus {
  border-color: var(--wu-gold) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
  outline: none !important;
}

/* ── Bookmarks ───────────────────────────────────────────────── */
[class*="bookmark"] a {
  color: rgba(245, 240, 232, 0.7) !important;
  transition: color 0.2s ease;
}
[class*="bookmark"] a:hover {
  color: var(--wu-gold-bright) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0a0908; }
::-webkit-scrollbar-thumb { background: var(--wu-gold-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wu-gold); }

/* ── Resources widget bars ───────────────────────────────────── */
[class*="resource-bar"],
[class*="progress-bar"] {
  background: rgba(202, 138, 4, 0.15) !important;
  border-radius: 4px !important;
}
[class*="resource-bar"] > *,
[class*="progress-bar"] > * {
  background: linear-gradient(90deg, var(--wu-gold-dim), var(--wu-gold)) !important;
  border-radius: 4px !important;
}

/* ── Header / top bar ────────────────────────────────────────── */
header, [class*="header"] {
  border-bottom: 1px solid var(--wu-border) !important;
  background: rgba(10, 9, 8, 0.85) !important;
  backdrop-filter: blur(20px) !important;
}

/* ── Favicon pulse animation ─────────────────────────────────── */
@keyframes wu-breathe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px var(--wu-gold)); }
  50%       { opacity: 0.75; filter: drop-shadow(0 0 0px transparent); }
}
header img[alt*="logo"],
header img[alt*="favicon"] {
  animation: wu-breathe 5s ease-in-out infinite;
}

/* ── Wu-Tang logo efter greeting ─────────────────────────────── */
[class*="greeting"]::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  vertical-align: middle;
  background-image: url("https://wutang.dk/favicon.ico");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}