/*!
 * pd-fixes-v1.css  —  design audit overrides 2026-06-21
 * Load LAST. Single-file kill-switch (delete <link> to revert).
 * Scope: domain page (C1, C2, M5), live page (C3, C5), global stats (M1).
 */

/* =========================================================================
   C1. Domain H1 stops breaking mid-syllable on mobile.
   word-break:break-all was forcing "started-le|dger[.]was|mer[.]app".
   Aggressive font-size cap so it fits one or two clean lines on mobile.
   ========================================================================= */
.domain-copy,
.verdict-domain {
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  font-variant-numeric: tabular-nums;
}
/* Specificity battle: existing rules use html[data-page=domain] h1 and
   [data-page="domain"] h1 + !important. We need to outweigh those. */
@media (max-width: 480px) {
  html[data-page=domain] h1.domain-copy,
  html[data-page=domain] .verdict-domain,
  body [data-page="domain"] h1.domain-copy,
  body .verdict-hero h1.domain-copy,
  body .verdict-hero .verdict-domain {
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}
@media (max-width: 360px) {
  html[data-page=domain] h1.domain-copy,
  body [data-page="domain"] h1.domain-copy,
  body .verdict-hero h1.domain-copy {
    font-size: clamp(13px, 3.8vw, 17px) !important;
  }
}

/* =========================================================================
   C2. Domain mobile breadcrumb no longer hides under fixed 72px header.
   ========================================================================= */
@media (max-width: 768px) {
  .pd-domain-wrap,
  main.pd-domain,
  .domain-page-wrap {
    padding-top: calc(var(--pd-header-h, 72px) + 12px);
  }
  .verdict-breadcrumb,
  .pd-breadcrumb {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
}

/* =========================================================================
   C3. Live page hero <h1>: tighten readability on mobile.
   Markup: <h1>Every <span class="strike">scam</span> domain.<br><em>Logged…</em></h1>
   Strike is intentional design; just clean its rendering so it doesn't blur.
   ========================================================================= */
.hero .strike {
  position: relative;
  display: inline-block;
  color: var(--pd-text-dim, #8b9db0);
  text-decoration: none;
}
.hero .strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 2px !important;
  background: rgba(239, 68, 68, 0.85) !important;
  transform: skewY(-2deg);
  box-shadow: none !important;
}
.hero h1 em {
  font-style: italic;
  color: var(--pd-cyan, #06b6d4);
}
@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(28px, 7.5vw, 34px);
    line-height: 1.2;
    padding-inline: 8px;
  }
  .hero .strike::after { height: 2px !important; top: 50%; }
}

/* =========================================================================
   C5. Live feed cards: skeleton instead of empty black box while
   urlscan screenshot is pending.
   ========================================================================= */
.threat-card .screenshot,
.threat-card .threat-screenshot,
.threat-card .card-screenshot {
  position: relative;
  min-height: 180px;
  background: var(--pd-bg-elevated, #141b25);
  overflow: hidden;
}
.threat-card .screenshot:empty::after,
.threat-card .threat-screenshot:empty::after,
.threat-card .card-screenshot:empty::after,
.threat-card .screenshot[data-loading="1"]::after,
.threat-card .threat-screenshot[data-loading="1"]::after {
  content: "Screenshot pending";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--pd-text-dim, #8b9db0);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent) 0/200% 100% no-repeat,
    var(--pd-bg-elevated, #141b25);
  animation: pdSkeletonShimmer 1.6s linear infinite;
}
@keyframes pdSkeletonShimmer {
  to { background-position: -200% 0, 0 0; }
}

/* =========================================================================
   M1. Drop the cyan-neon on stat numbers. Several existing rules with
   specificity (0,3,0) override naive .st-num, so we use a longer chain.
   Keep ONE primary accent figure per group (first stat).
   ========================================================================= */
/* specificity bumped via class-doubling hack to beat
   [data-page*=hub] .stats-row [class*=num]:first-of-type {0,4,0} */
body .stats-row .st .st-num.st-num,
body .stats-row .st-num.st-num,
body [data-page*=hub] .stats-row .st-num.st-num,
body .hero-stat strong.strong,
body .threats-today.threats-today,
body .threats-week.threats-week,
body .stat-number.stat-number,
body .pd-stat-value.pd-stat-value {
  color: var(--pd-text, #f1f5f9) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  letter-spacing: -0.02em;
}
body .stats-row .st:first-child .st-num.st-num,
body [data-page*=hub] .stats-row .st:first-child .st-num.st-num {
  color: var(--pd-accent, #22c55e) !important;
}
.st-label,
.stat-label,
.pd-stat-label,
.hub-stat-label,
.about-stat-label {
  color: var(--pd-text-dim, #8b9db0);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* =========================================================================
   M5. Domain page risk score ring: add "/ 100" label so it reads as a score.
   ========================================================================= */
.score-ring,
.verdict-score {
  position: relative;
}
.score-ring::after,
.verdict-score::after {
  content: "RISK SCORE / 100";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-text-dim, #8b9db0);
  white-space: nowrap;
  pointer-events: none;
}

/* =========================================================================
   m2. One tag-pill component for REPORTED/URGENT/FBI/etc to stop the
   three-style mishmash. Non-destructive: only normalizes if .pd-tag added.
   ========================================================================= */
.pd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.pd-tag--danger { color: var(--pd-danger, #ff4757); }
.pd-tag--warn   { color: var(--pd-warning, #fbbf24); }
.pd-tag--info   { color: var(--pd-cyan, #06b6d4); }
.pd-tag--ok     { color: var(--pd-accent, #22c55e); }

/* =========================================================================
   Safety: respect reduced-motion for the skeleton shimmer.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .threat-card .screenshot:empty::after,
  .threat-card .threat-screenshot:empty::after,
  .threat-card .card-screenshot:empty::after {
    animation: none;
  }
}

/* =========================================================================
   PolishExtra. Mobile nav drawer was semi-transparent and overlapped the
   hero text behind it. Give it a solid backdrop + readable hierarchy.
   ========================================================================= */
@media (max-width: 768px) {
  body.menu-open,
  body[class*="nav-open"] {
    overflow: hidden !important;
  }
  body.menu-open::before,
  body[class*="nav-open"]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 12, 0.78);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    z-index: 9990;
    pointer-events: none;
  }
  [class*="mobile-menu"][class*="open"],
  nav[class*="open"],
  .pd-mobile-nav.is-open,
  .pd-nav-drawer.is-open,
  [aria-expanded="true"] + nav,
  [aria-expanded="true"] + ul {
    background: rgba(10, 15, 21, 0.96) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  }
}

/* =========================================================================
   PolishExtra. Footer column layout on mobile — break 4 stacked into 2x2.
   ========================================================================= */
@media (max-width: 768px) {
  .footer-cols,
  .pd-footer-grid,
  footer .grid,
  footer [class*="cols"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
  footer h4,
  .footer-col h4,
  .pd-footer-heading {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--pd-text-dim, #8b9db0) !important;
    margin-bottom: 8px !important;
  }
}

/* =========================================================================
   PolishExtra. Cookie banner — float as a bottom card, not full-width slab.
   ========================================================================= */
.cookie-banner,
#cookie-banner,
.pd-cookie-banner,
[class*="cookie"][class*="banner"] {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  max-width: 720px;
  margin: 0 auto !important;
  border-radius: var(--pd-radius, 16px) !important;
  background: rgba(15, 22, 32, 0.96) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--pd-border, rgba(148, 163, 184, 0.12)) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
  z-index: 8000;
}
@media (min-width: 1024px) {
  .cookie-banner,
  #cookie-banner,
  .pd-cookie-banner {
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    max-width: 460px;
  }
}

/* =========================================================================
   PolishExtra. Live page: the "scam" word + strike on tiny mobile — tighten
   so the line doesn't visually escape the word edges.
   ========================================================================= */
@media (max-width: 480px) {
  .hero .strike {
    padding-inline: 4px;
  }
  .hero .strike::after {
    left: 0;
    right: 0;
    transform: skewY(-1.5deg);
  }
}