/* ═══════════════════════════════════════════════════════════════
   PhishDestroy — Design V2 Unified Polish
   Load AFTER pd-premium.css on all pages
   Fixes: logo, nav, cards, mobile, typography, spacing, consistency
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. NAVBAR: Logo smaller, tighter nav ─── */
.pd-brand img {
  height: 34px !important;
  width: auto !important;
}
@media (max-width: 480px) {
  .pd-brand img {
    height: 28px !important;
  }
}

/* Nav links — consistent sizing */
.pd-nav-link {
  font-size: 0.8rem !important;
  padding: 8px 12px !important;
  letter-spacing: 0.05em !important;
}

/* Ensure nav doesn't overflow on mid-screens */
@media (min-width: 992px) and (max-width: 1279px) {
  .pd-nav-link {
    padding: 8px 8px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
  }
  .pd-nav-live {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
}

/* ─── 2. TYPOGRAPHY: Consistent heading hierarchy ─── */
h1, .h1, [class*="heading-hero"] {
  font-family: 'Orbitron', 'Inter', monospace;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}

/* Section headings — unified style across all pages */
section > .pd-container > h2:first-child,
section > .max-w-6xl > h2:first-child,
section > div > h2:first-of-type,
.section-title,
.section-heading {
  color: var(--pd-text, #f1f5f9);
  margin-bottom: 12px;
}

/* Subtitle / description under section heading */
.section-desc,
.section-subtitle,
section > .pd-container > p:first-of-type,
section > .max-w-6xl > p:first-of-type {
  color: var(--pd-text-dim, #8b9db0);
  max-width: 680px;
  line-height: 1.6;
}

/* ─── 3. CARDS: Unified dark glass style (pipeline/live quality) ─── */
.card,
.glass,
.battle-card,
.stat-card,
.info-card,
.tool-card,
.tip-card,
.evidence-card,
.bank-card,
.flagship-card,
.directory-card,
.article-card,
.news-card,
.scam-card,
.detection-card,
.service-card,
.faq-item,
[class*="pd-card"] {
  background: rgba(15, 22, 32, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease,
              box-shadow 0.3s ease !important;
}

.card:hover,
.glass:hover,
.battle-card:hover,
.stat-card:hover,
.info-card:hover,
.tool-card:hover,
.tip-card:hover,
.evidence-card:hover,
.bank-card:hover,
.flagship-card:hover,
.directory-card:hover,
.article-card:hover,
.news-card:hover,
.scam-card:hover,
.detection-card:hover,
.service-card:hover,
[class*="pd-card"]:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35),
              0 0 20px rgba(34, 197, 94, 0.06) !important;
}

/* Card inner padding consistency */
.card > div:first-child,
.tool-card > div:first-child,
.article-card > div:not(:first-child),
.news-card > div:not(:first-child) {
  padding: 20px 24px;
}

/* ─── 4. BUTTONS: Unified CTA style ─── */
.pd-btn,
.btn,
.cta-button,
.read-btn,
.filter-btn,
button[type="submit"] {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              background 0.2s ease !important;
}

/* Primary green buttons */
.pd-btn-primary,
.btn-primary,
button[type="submit"],
.cta-button {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #06231a !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

.pd-btn-primary:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px -8px rgba(34, 197, 94, 0.5),
              0 0 0 1px rgba(34, 197, 94, 0.3) !important;
}

/* Ghost / outline buttons */
.pd-btn-ghost,
.btn-outline,
.btn-secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--pd-text, #f1f5f9) !important;
}

.pd-btn-ghost:hover,
.btn-outline:hover,
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}

/* ─── 5. BADGES & TAGS: Clean, not cheap ─── */
.badge,
.pd-badge,
.tag,
.signal-tag,
.trust-badge,
[class*="badge-"],
.cat-btn,
.filter-btn {
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
}

/* ─── 6. SECTIONS: Better spacing rhythm ─── */
section,
.section,
[class*="section"] {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* Reduce massive gaps between sections */
section + section,
.section + .section {
  margin-top: 0;
}

/* ─── 7. STAT COUNTERS: Unified green gradient numbers ─── */
.stat-num,
.counter-num,
.impact-metric-value,
[class*="stat"] > [class*="num"],
[class*="stat"] > [class*="value"],
.counter-box .count,
.counter-box h2 {
  background: linear-gradient(135deg, #22c55e, #06b6d4) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}

/* ─── 8. EYEBROW / LABEL: Consistent micro-label ─── */
.pd-eyebrow,
.eyebrow,
[class*="eyebrow"],
.section-label {
  font-family: 'Orbitron', 'Inter', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--pd-accent, #22c55e) !important;
}

/* ─── 9. FAQ ACCORDIONS: Unified look ─── */
.faq-item,
.faq-question,
details > summary {
  cursor: pointer;
}

.faq-item {
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.faq-question,
details > summary {
  padding: 18px 24px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-answer,
.faq-answer-inner,
details > div {
  padding: 0 24px 20px !important;
  color: var(--pd-text-muted, #cbd5e1);
  line-height: 1.7;
  font-size: 0.92rem;
}

/* ─── 10. GRIDS: Consistent card grids ─── */
.tools-grid,
.news-grid,
.articles-grid,
.features-grid,
.cards-grid {
  display: grid !important;
  gap: 20px !important;
}

@media (min-width: 1024px) {
  .tools-grid,
  .news-grid,
  .articles-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .tools-grid,
  .news-grid,
  .articles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 639px) {
  .tools-grid,
  .news-grid,
  .articles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 11. MOBILE FIXES ─── */

@media (max-width: 768px) {
  /* Body text readable */
  body {
    font-size: 15px !important;
  }

  /* No horizontal overflow ever */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Container padding */
  .container,
  .pd-container,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  [class*="container"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Headings don't overflow */
  h1, h2, h3, .h1, .h2, .h3 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Hero section smaller on mobile */
  h1, .h1, [class*="heading-hero"] {
    font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  /* Cards stack properly */
  .flex,
  [class*="flex"],
  .row {
    flex-wrap: wrap !important;
  }

  /* Images don't overflow */
  img, video, iframe, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Touch targets min 44px */
  a, button, .btn, .pd-btn, .tag, .badge,
  input[type="submit"], [role="button"] {
    min-height: 44px;
  }

  /* Stat grids 2 cols on mobile */
  .impact-metrics-grid,
  .stats-grid,
  .counter-row,
  .counters {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Footer links bigger touch targets */
  .pd-footer-links-group a {
    padding: 8px 6px !important;
    min-height: 36px !important;
  }

  /* Section padding tighter on mobile */
  section, .section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

@media (max-width: 480px) {
  /* Even tighter */
  h1, .h1, [class*="heading-hero"] {
    font-size: clamp(1.4rem, 8vw, 2rem) !important;
  }

  h2, .h2 {
    font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;
  }

  /* Single column stats */
  .impact-metrics-grid,
  .stats-grid,
  .counter-row,
  .counters {
    grid-template-columns: 1fr !important;
  }

  /* Cards no padding bloat */
  .card,
  .glass,
  .battle-card,
  .stat-card,
  .tool-card,
  [class*="pd-card"] {
    border-radius: 12px !important;
  }
}

/* ─── 12. HOME PAGE: Tame the monster ─── */

/* Home hero — cleaner */
.home-header-section h1,
.hero-section h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  max-width: 800px;
}

/* Home sections — tighter spacing */
body[class*="home"] section,
.home-section {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Home search input */
.hero-domain-scan input {
  background: rgba(15, 22, 32, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  padding: 14px 18px !important;
}

.hero-domain-scan input:focus {
  border-color: var(--pd-accent, #22c55e) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

/* ─── 13. TOOLS PAGE: Fix empty sections ─── */

/* Tool cards — unified grid */
.tool-card,
.toolbox-card {
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-card h3,
.toolbox-card h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--pd-text, #f1f5f9) !important;
}

.tool-card p,
.toolbox-card p {
  font-size: 0.85rem !important;
  color: var(--pd-text-dim, #8b9db0) !important;
  line-height: 1.55 !important;
}

/* ─── 14. ABOUT PAGE: Better visibility ─── */

/* About sections — ensure text is readable */
.about-section,
body[data-page="about"] section {
  color: var(--pd-text, #f1f5f9);
}

/* Timeline / path cards */
.timeline-card,
.path-card,
.milestone {
  background: rgba(15, 22, 32, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

/* ─── 15. NEWS PAGE: Better card layout ─── */

.article-card,
.news-card {
  overflow: hidden !important;
}

.article-card img,
.news-card img {
  border-radius: 14px 14px 0 0 !important;
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}

/* Article card meta */
.article-card .meta,
.news-card .meta,
.article-card time,
.news-card time {
  font-size: 0.75rem !important;
  color: var(--pd-text-dim, #8b9db0) !important;
  letter-spacing: 0.02em;
}

/* ─── 16. APPEALS PAGE: Polish ─── */

/* Steps cards — number circle */
.step-card,
[class*="step-"] {
  position: relative;
}

/* Form inputs */
.appeal-form input,
.appeal-form textarea,
.appeal-form select,
input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  background: rgba(15, 22, 32, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: var(--pd-text, #f1f5f9) !important;
  padding: 12px 16px !important;
  font-size: 0.92rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--pd-accent, #22c55e) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
  outline: none !important;
}

/* ─── 17. LIVE FEED PAGE: Card consistency ─── */

.threat-card,
.tf-card,
.detection-card {
  background: rgba(15, 22, 32, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  transition: all 0.25s ease !important;
}

.threat-card:hover,
.tf-card:hover,
.detection-card:hover {
  border-color: rgba(34, 197, 94, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Status badges in feed */
.tf-status,
.threat-status,
[class*="status-active"],
[class*="status-killed"] {
  font-family: var(--pd-font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* ─── 18. CRITICAL-ACTION PAGE: Keep the good parts ─── */

/* Emergency CTA — keep prominent */
.emergency-cta,
.seal-cta,
[class*="emergency"] .btn {
  font-size: 1rem !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
}

/* Numbered steps */
.step-number,
.step-circle,
[class*="step-num"] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  font-weight: 900;
  font-size: 0.85rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  flex-shrink: 0;
}

/* ─── 19. FOOTER: Unified compact ─── */

footer.pd-site-footer,
.pd-site-footer {
  margin-top: 48px !important;
}

/* Footer link groups — ensure they wrap */
.pd-footer-links-group {
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
}

.pd-footer-links-group a {
  font-size: 0.76rem !important;
  color: #4b5e73 !important;
}

.pd-footer-links-group a:hover {
  color: #22c55e !important;
}

/* ─── 20. ANIMATIONS: Subtle, not distracting ─── */

/* Reduce gratuitous transforms */
.card:hover,
.stat-card:hover,
.tool-card:hover {
  transform: translateY(-3px) !important;
  /* NOT -5px — too jumpy */
}

/* Smooth page-level content reveal */
.pd-reveal,
[data-aos] {
  transition-duration: 0.5s !important;
}

/* Kill excessive glow on hover */
*:hover {
  text-shadow: none;
}

/* Allow intentional glows */
.pd-nav-link:hover::after,
.stat-num,
.impact-metric-value {
  text-shadow: initial;
}

/* ─── 21. SCROLLBAR: Refined ─── */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 197, 94, 0.25);
}

/* ─── 22. PIPELINE PAGE: Respect inline styles but fix overflow ─── */

.pipeline-container,
[class*="pipeline"] {
  max-width: 100%;
  overflow-x: hidden;
}

/* ─── 23. Tailwind page overrides — pages using tw.min.css ─── */

/* Ensure Tailwind dark bg pages match tokens */
.bg-gray-950,
.bg-slate-950,
.bg-\[#0a0f14\],
[class*="bg-gray-9"],
[class*="bg-slate-9"] {
  background-color: var(--pd-bg-primary, #0a0f14) !important;
}

/* Tailwind card backgrounds — match glass style */
.bg-gray-900\/50,
.bg-slate-900\/50,
.bg-gray-800\/50,
[class*="bg-gray-900"],
[class*="bg-slate-800"] {
  background: rgba(15, 22, 32, 0.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tailwind borders — match design tokens */
.border-gray-800,
.border-slate-800,
.border-gray-700,
[class*="border-gray-8"],
[class*="border-slate-7"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ─── 24. PRINT CLEANUP ─── */
@media print {
  .pd-site-header,
  .pd-site-footer,
  .back-to-top,
  #scroll-progress,
  .pd-nav-toggle,
  [class*="particle"],
  canvas {
    display: none !important;
  }
}