/* =========================================
   DragonCore Canada — Global Styles
   Black & Gold Theme
   ========================================= */
:root {
  --dc-black:       #0a0a0a;
  --dc-surface:     #141414;
  --dc-surface-2:   #1e1e1e;
  --dc-gold:        #FFD700;
  --dc-gold-dim:    #b8960c;
  --dc-text:        #f0f0f0;
  --dc-text-muted:  #8e8e8e;
  --dc-border:      rgba(255, 215, 0, 0.15);
}

/* ── Reset / Base ─────────────────────────── */
html, body {
  background-color: var(--dc-black) !important;
  color: var(--dc-text);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  scroll-behavior: smooth;
}

/* ── Typography ─────────────────────────── */
.cinzel { font-family: 'Cinzel', serif; }
h1, h2, h3 { font-family: 'Cinzel', serif; }

a { color: var(--dc-gold); }
a:hover { color: #fff; }

/* ── Bootstrap overrides ─────────────────────────── */
.btn-primary { background-color: var(--dc-gold); border-color: var(--dc-gold); color: #000; font-weight: 600; }
.btn-primary:hover { background-color: var(--dc-gold-dim); border-color: var(--dc-gold-dim); color: #000; }
.btn-dark { background-color: var(--dc-surface-2); border-color: var(--dc-surface-2); color: var(--dc-text); }
.btn-dark:hover { background-color: var(--dc-gold); border-color: var(--dc-gold); color: #000; }
.card { background-color: var(--dc-surface); border-color: var(--dc-border); color: var(--dc-text); }
.form-control {
  background-color: var(--dc-surface-2) !important;
  border-color: var(--dc-border) !important;
  color: var(--dc-text) !important;
}
.form-control:focus {
  background-color: var(--dc-surface-2) !important;
  border-color: var(--dc-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(255,215,0,0.15) !important;
  color: var(--dc-text) !important;
}
.form-control::placeholder { color: var(--dc-text-muted) !important; }
.btn-outline-light { border-color: var(--dc-border); color: var(--dc-text); }
.btn-outline-light:hover { background: var(--dc-gold); color: #000; border-color: var(--dc-gold); }

/* ── Section base ─────────────────────────── */
section {
  padding: 5rem 0;
  background: var(--dc-black);
  color: var(--dc-text);
}
section.inverse {
  background: var(--dc-surface);
}
section + section { border-top: 1px solid var(--dc-border); }

/* ── Gold divider ─────────────────────────── */
.gold-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dc-gold), transparent);
  border: none;
  margin: 2rem 0;
}

/* ── Utility ─────────────────────────────── */
.text-gold { color: var(--dc-gold) !important; }
.bg-surface { background: var(--dc-surface) !important; }
.bg-surface-2 { background: var(--dc-surface-2) !important; }
.border-gold { border-color: var(--dc-gold) !important; }
/* Ensure Bootstrap .text-muted honours our dark-theme muted colour */
.text-muted { color: var(--dc-text-muted) !important; }

/* ── DragonCore wordmark ─────────────────── */
/* Larger initial cap for D and C in brand name */
.brand-initial { font-size: 1.2em; }

/* ── Global button classes ───────────────── */
.dc-btn-gold { background: var(--dc-gold, #FFD700) !important; color: #000 !important; border: none; font-weight: 700; }
.dc-btn-gold:hover { background: var(--dc-gold-dim, #b8960c) !important; color: #000 !important; }
.dc-btn-outline { border: 1px solid var(--dc-border, rgba(255,215,0,0.15)) !important; color: var(--dc-text, #f0f0f0) !important; background: transparent !important; }
.dc-btn-outline:hover { border-color: var(--dc-gold, #FFD700) !important; color: var(--dc-gold, #FFD700) !important; background: rgba(255,215,0,0.05) !important; }

/* ── Scroll-reveal ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Avatar portal hover effect ────────────────────────────────────── */
.emp-photo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.avatar-portal {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.5px;
  margin-left: -0.5px;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 208, 0, 0);
  animation: portal-rotate 1.2s linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
}

.nest-emp-btn:hover .avatar-portal,
.hm-emp-btn:hover .avatar-portal {
  opacity: 1;
  box-shadow: 0 0 65px 28px rgba(255, 208, 0, 0.65);
}

.emp-portal-spark {
  position: absolute;
  width: 1px;
  background: linear-gradient(orange, transparent);
  transform-origin: top left;
  animation: portal-spark-resize 1s ease-in-out infinite;
}

@keyframes portal-rotate {
  to { transform: rotate(360deg); }
}

@keyframes portal-spark-resize {
  0%, 100% { height: 55px; }
  50%       { height: 85px; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-portal { animation: none; }
  .emp-portal-spark { animation: none; }
}

/* ── Blazor error UI ────────────────────────────────────────────────── */
#blazor-error-ui {
  color-scheme: light only;
  background: #b32121;
  color: #fff;
  bottom: 0; left: 0; right: 0;
  padding: 0.6rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 10000;
  display: none;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ── Validation ─────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--dc-gold); }
.invalid { outline: 1px solid #ff4444; }
.validation-message { color: #ff6666; font-size: 0.85rem; margin-top: 0.25rem; }