/* ═══════════════════════════════════════════════════════════
   WebPulse — Main Stylesheet v4
   Mobile-first, light footer, accessible colours
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --wp-primary:   #0d6efd;
  --wp-success:   #198754;
  --wp-warning:   #ffc107;
  --wp-danger:    #dc3545;
  --wp-dark:      #1a1d21;
  --wp-footer-bg: #1a1d21;
  --wp-footer-text: #ced4da;       /* light grey — readable on dark */
  --wp-footer-link: #9ec5fe;       /* blue-tinted light — readable */
  --wp-footer-link-hover: #ffffff;
  --wp-footer-muted: #868e96;
  --wp-radius:    12px;
  --wp-radius-sm: 8px;
}

/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #212529;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── Utilities ────────────────────────────────────────────── */
.py-6  { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.bg-gradient-primary { background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%); }
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.cursor-pointer { cursor: pointer; }

/* ─── Navbar ───────────────────────────────────────────────── */
.navbar { min-height: 64px; }
.navbar-brand { font-size: 1.2rem; font-weight: 700; letter-spacing: -.3px; }

/* ─── Cards ────────────────────────────────────────────────── */
.card { border-radius: var(--wp-radius); }

/* ─── ████  FOOTER  ████ ──────────────────────────────────── */
.footer {
  background-color: var(--wp-footer-bg) !important;
  color: var(--wp-footer-text);
  font-size: .9rem;
}

/* All footer text */
.footer,
.footer p,
.footer li,
.footer small,
.footer .text-muted {
  color: var(--wp-footer-text) !important;
}

/* Footer headings */
.footer h5,
.footer h6 {
  color: #ffffff !important;
  font-weight: 600;
}

/* Footer links */
.footer a,
.footer a:link,
.footer a:visited {
  color: var(--wp-footer-link) !important;
  text-decoration: none;
}
.footer a:hover,
.footer a:focus {
  color: var(--wp-footer-link-hover) !important;
  text-decoration: underline;
}

/* Footer divider */
.footer hr { border-color: #343a40 !important; }

/* Footer bottom row */
.footer .footer-copy {
  color: var(--wp-footer-muted) !important;
  font-size: .8rem;
}

/* ─── Forms ────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--wp-primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

/* ─── Tables ───────────────────────────────────────────────── */
.table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: #6c757d;
}

/* ─── Scan type selector cards ─────────────────────────────── */
.scan-type-card {
  transition: all .2s;
  border-color: #dee2e6 !important;
  background: white;
}
.scan-type-card:has(.scan-radio:checked) {
  border-color: var(--wp-primary) !important;
  background: #f0f6ff;
}
.scan-type-card:has(.scan-radio:disabled) {
  background: #f8f9fa;
  cursor: not-allowed !important;
}

/* ─── Blog cards ───────────────────────────────────────────── */
.blog-card {
  transition: transform .15s, box-shadow .15s;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1) !important;
}

/* ─── Report cards ─────────────────────────────────────────── */
.report-card {
  transition: transform .15s, box-shadow .15s;
}
.report-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

/* ─── Risk score circle ────────────────────────────────────── */
.risk-score-circle {
  width: 130px; height: 130px; border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 800; border: 7px solid;
  margin: 0 auto;
}
.score-low    { border-color: #198754; color: #198754; }
.score-medium { border-color: #ffc107; color: #b88600; }
.score-high   { border-color: #dc3545; color: #dc3545; }
.score-unknown{ border-color: #6c757d; color: #6c757d; }

/* ─── Signal rows ──────────────────────────────────────────── */
.signal-row   { border-left: 4px solid; }
.flag-row     { border-left-color: #dc3545; }
.trust-row    { border-left-color: #198754; }
.opp-row      { border-left-color: #198754; }
.locked-row   { border-left-color: #6c757d; }

/* ─── Skeleton loader ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  min-height: 40px;
}
@keyframes shimmer {
  0%  { background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}

/* ─── Dashboard sidebar ────────────────────────────────────── */
@media (min-width: 768px) {
  .sidebar-fixed { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

/* ─── Blog article typography ──────────────────────────────── */
.article-body { font-size: 1.02rem; line-height: 1.8; color: #333; }
.article-body h2 {
  font-size: 1.35rem; font-weight: 700;
  margin-top: 2rem; margin-bottom: .75rem;
  padding-bottom: 8px; border-bottom: 2px solid #f0f4f8;
  color: #1a1d21;
}
.article-body h3 {
  font-size: 1.1rem; font-weight: 600;
  margin-top: 1.5rem; margin-bottom: .5rem;
}
.article-body p  { margin-bottom: 1.1rem; }
.article-body ul { margin-bottom: 1.1rem; padding-left: 1.5rem; }
.article-body ul li { margin-bottom: .4rem; }
.article-body a  { color: var(--wp-primary); }
.article-body strong { font-weight: 600; }
.article-body code { background: #f4f4f4; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.article-body blockquote {
  border-left: 4px solid var(--wp-primary);
  padding: 12px 16px; color: #555;
  background: #f8f9ff; border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

/* ─── Comment section ──────────────────────────────────────── */
.comment-card { border-left: 3px solid #dee2e6; }
.comment-card:hover { border-left-color: var(--wp-primary); }

/* ─── Reaction buttons ─────────────────────────────────────── */
.reaction-btn { transition: all .15s; }
.reaction-btn.active-like    { color: var(--wp-success) !important; border-color: var(--wp-success) !important; }
.reaction-btn.active-dislike { color: var(--wp-danger)  !important; border-color: var(--wp-danger)  !important; }

/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .py-6  { padding-top: 3rem; padding-bottom: 3rem; }
  .display-4 { font-size: 2rem; }
  .display-5 { font-size: 1.7rem; }
  .display-6 { font-size: 1.4rem; }
  .navbar-brand { font-size: 1.1rem; }
  .risk-score-circle { width: 100px; height: 100px; }
  .risk-score-circle div:first-child { font-size: 1.8rem; }
  .hero-section { text-align: center; }
  /* Stack sidebar below on mobile */
  .col-md-2.bg-dark { display: none !important; }
  /* Full-width tables on mobile */
  .table-responsive { font-size: .8rem; }
  /* Article sidebar hidden on mobile */
  .blog-sidebar { display: none; }
}

/* ─── Misc ─────────────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .01em; }
.accordion-button:not(.collapsed) { color: var(--wp-primary); background: #f0f6ff; }
.accordion-button:focus { box-shadow: none; }
.font-monospace { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: .875em; }
.min-vh-100 { min-height: 100vh; }

/* ─── MOBILE IMPROVEMENTS ──────────────────────────────────────────────────── */

/* Ensure no horizontal overflow on any screen */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Cards never overflow on mobile */
.card { overflow: hidden; }

/* Tables scroll horizontally on mobile rather than breaking layout */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Dashboard sidebar: full width on mobile, hidden by default */
@media (max-width: 767px) {
  /* Navbar */
  .navbar-brand { font-size: 1rem; }
  .navbar .btn  { font-size: .8rem; padding: .25rem .6rem; }

  /* Dashboard layout: stack everything */
  .row.flex-nowrap { flex-wrap: wrap !important; }
  [class*="col-md-2"].bg-dark,
  [class*="col-md-3"].bg-dark { display: none !important; }

  /* Scan type cards: 1 per row on mobile */
  .scan-type-card { margin-bottom: .75rem; }

  /* Article pages */
  .article-body h2 { font-size: 1.15rem; }
  .blog-sidebar    { display: none; }

  /* Admin tables: smaller text */
  .table          { font-size: .75rem; }
  .table th       { white-space: nowrap; }

  /* Buttons: full width in button groups on mobile */
  .d-flex.gap-2.flex-wrap .btn { font-size: .8rem; }

  /* Risk score circle */
  .risk-score-circle { width: 90px; height: 90px; }

  /* Opportunities cards: single column */
  #opp-card .row   { flex-direction: column; }

  /* Reco cards */
  .reco-card .row  { flex-direction: column; }

  /* Reduce padding on small screens */
  .card-body.p-4   { padding: 1rem !important; }
  .py-6            { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Admin sidebar: horizontal scroll tabs on mobile */
  .list-group-flush a { padding: .5rem .75rem; font-size: .85rem; }

  /* Forms: full width inputs */
  .input-group > .form-control { min-width: 0; }

  /* Footer: stack columns */
  .footer .col-lg-4,
  .footer .col-lg-2 { margin-bottom: 1rem; }

  /* Analytics table: compact */
  .table td { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Tablet (768-991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .card-body.p-4 { padding: 1.25rem !important; }
  .display-4     { font-size: 2.2rem; }
  .display-5     { font-size: 1.9rem; }
}

/* Touch-friendly tap targets */
@media (hover: none) {
  .btn { min-height: 40px; }
  .nav-link { padding: .5rem .75rem; }
  .form-control { font-size: 16px; } /* prevents iOS zoom on focus */
  .form-select  { font-size: 16px; }
}