/*!
 * pd-audit-v1.css — PhishDestroy Premium Design v2 (2026-06-23)
 * Loads LAST. Covers hub, home, about, tools, all static pages.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — warmer deep navy, consistent palette
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --bg:         #070c16;
  --bg2:        #0d1422;
  --card:       #0f1825;
  --card2:      #151f30;
  --border:     rgba(255,255,255,0.055);
  --border2:    rgba(255,255,255,0.10);
  --muted:      #64748b;
  --text2:      #94a3b8;
  --green:      #3ecf8e;   /* tamed from #22c55e */
  --cyan:       #22d3ee;   /* brighter but cleaner */
  --accent:     #3ecf8e;
  --pd-green-soft: rgba(62,207,142,0.10);

  /* Global pd tokens */
  --pd-bg-primary:  #070c16;
  --pd-bg-card:     #0f1825;
  --pd-bg-elevated: #141f30;
  --pd-accent:      #3ecf8e;
  --pd-accent-rgb:  62, 207, 142;
  --pd-accent-soft: rgba(62,207,142,0.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB HERO — atmospheric depth
   ═══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 380px;
  background: radial-gradient(ellipse,
    rgba(34, 211, 238, 0.05) 0%,
    rgba(62, 207, 142, 0.04) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* H1 — crisp white-slate gradient, premium and readable */
.hero h1 {
  background: linear-gradient(160deg, #f1f5f9 0%, #94a3b8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Search box — premium focus ring */
.search-box input:focus {
  border-color: rgba(34, 211, 238, 0.4) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15),
              0 4px 24px rgba(34, 211, 238, 0.06) !important;
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB STAT ROW — monospace data treatment
   ═══════════════════════════════════════════════════════════════════════════ */
.stats-row {
  gap: 2px !important;
}

.stats-row .st {
  position: relative;
  transition: background 0.2s ease;
}

.stats-row .st:hover {
  background: rgba(255,255,255,0.02);
}

/* Monospace data feel for all stat numbers */
.stats-row .st-num {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: 'tnum' !important;
  text-shadow: none !important;
}

/* First stat (Total Tracked) — signature green, tamed */
.stats-row .st:first-child .st-num {
  color: #3ecf8e !important;
  text-shadow: 0 0 28px rgba(62, 207, 142, 0.22) !important;
}

/* Other colored stats — keep their per-color but soften */
.stats-row .st-num[style*="color:var(--red)"] {
  filter: brightness(0.9) !important;
}

.stats-row .st-num[style*="color:var(--yellow)"] {
  filter: brightness(0.85) !important;
}

/* Label refinement */
.stats-row .st-label {
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB BROWSE SECTIONS — section headers + tags
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dividers between browse sections */
.container > section + section {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 44px;
  margin-top: 0 !important;
}

/* Browse tags — hover + mobile */
.pill-tag {
  transition: background 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease !important;
  border-radius: 8px !important;
}

.pill-tag:hover {
  border-color: rgba(34, 211, 238, 0.4) !important;
  background: rgba(34, 211, 238, 0.07) !important;
  color: #22d3ee !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.08) !important;
}

@media (max-width: 640px) {
  .pill-tag {
    font-size: 0.8rem !important;
    padding: 9px 13px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB INFO CARDS — more depth
   ═══════════════════════════════════════════════════════════════════════════ */
.info-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  transition: transform 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease !important;
  display: flex !important;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.info-card:hover {
  border-color: rgba(34, 211, 238, 0.2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4),
              0 0 0 1px rgba(34,211,238,0.08) !important;
}

.info-card h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.info-card p {
  flex: 1;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  color: var(--text2) !important;
}

/* Equal height grid */
.info-grid {
  align-items: stretch !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLS PAGE CARDS — depth, hover, consistency
   ═══════════════════════════════════════════════════════════════════════════ */
.card.reveal {
  border-radius: 14px !important;
  background: rgba(15, 24, 37, 0.6) !important;
  border-width: 1px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1),
              border-color 0.22s ease !important;
  display: flex !important;
  flex-direction: column;
}

.card.reveal:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5),
              0 0 0 1px rgba(255,255,255,0.05),
              0 0 24px var(--card-color, rgba(62,207,142,0.12)) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.card-content {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

/* Card icon treatment */
.card-ico {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid !important;
  font-size: 1.15rem !important;
}

/* Tool card title */
.card-title {
  font-size: 1.0rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE — stat numbers and impact metrics
   ═══════════════════════════════════════════════════════════════════════════ */

/* Home .pd-threat-stat numbers */
.pd-threat-stat .n,
.pd-flag-stat .n {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #3ecf8e !important;
}

/* Large impact numbers on home */
.impact-number,
.counter-value,
.metric-value,
.count-up,
.stat-card-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: #3ecf8e !important;
  letter-spacing: -0.02em !important;
}

/* Service cards (home "Everything we built" section) — more depth */
.service-card {
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.03) !important;
  display: flex !important;
  flex-direction: column;
}

.service-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.service-card .card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — warning icons + red elements
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tailwind text-red-400 → softer rose */
.text-red-400 {
  color: #fca5a5 !important;
  opacity: 0.85;
}

/* Red border cards */
[class*="border-red-4"],
[class*="border-red-5"] {
  border-color: rgba(239, 68, 68, 0.18) !important;
}

.glass[class*="border-red"],
[class*="glass"][class*="border-red"] {
  background: rgba(239, 68, 68, 0.025) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETECTION FEED — alarm fatigue reduction
   ═══════════════════════════════════════════════════════════════════════════ */
.dc-vt {
  background: rgba(239, 68, 68, 0.09) !important;
  color: #fca5a5 !important;
  border-radius: 4px;
}

.dc-drainer {
  color: #fca5a5 !important;
}

[class*="tag-phishing"],
[class*="status-phishing"] {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */
.bread {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 10px 0 16px;
  font-size: 0.8125rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}

.bread a {
  color: var(--muted, #64748b) !important;
  text-decoration: none !important;
  transition: color 0.14s ease;
  white-space: nowrap;
}

.bread a:hover {
  color: #22d3ee !important;
}

.bread > span.sep {
  color: rgba(255,255,255,0.13);
  font-size: 0.68rem;
  user-select: none;
  margin: 0 2px;
}

.bread > span.bread-current,
.bread > [aria-current="page"] {
  color: var(--text2, #94a3b8);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE SYSTEM — normalize competing accent colors
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-badge-orange,
[class*="badge-orange"],
[class*="badge-flagship"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.09) !important;
  color: #8899b0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — prose max-width, footer, labels
   ═══════════════════════════════════════════════════════════════════════════ */
.about-content p,
.article-body p,
.banner-paragraph,
.page-body p {
  max-width: 68ch;
}

/* Footer links — more readable */
.ftr-links-group a {
  font-size: 0.8125rem !important;
  opacity: 0.88 !important;
}

.pd-footer-links-group a {
  font-size: 0.8125rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL CARD DEPTH — all pd-card variants
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.03) !important;
  border-radius: 14px !important;
}

.pd-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — touch targets
   ═══════════════════════════════════════════════════════════════════════════ */
.mob-toggle,
.pd-nav-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE BUTTONS — refined corners
   ═══════════════════════════════════════════════════════════════════════════ */
.banner-btn .buttonpro {
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOMAIN CARDS (hub domain list) — cleaner
   ═══════════════════════════════════════════════════════════════════════════ */
.domain-card {
  border-radius: 10px !important;
  transition: transform 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease !important;
}

.domain-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}