/**
 * RAGSec Frontend Styles
 * All styles use the ragsec- prefix.
 * No override of theme styles — additive only.
 */

/* ── Base typography reset ── */
body {
  font-family: var(--ragsec-font-stack);
  color: var(--ragsec-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Skip link ── */
.skip-link:focus {
  display: block;
  position: fixed;
  top: 0; left: 0;
  background: var(--ragsec-primary);
  color: var(--ragsec-white);
  padding: 0.5rem 1rem;
  z-index: 9999;
  font-weight: 600;
}

/* ── Direct Answer block ── */
.ragsec-answer {
  background: var(--ragsec-surface);
  border-left: 4px solid var(--ragsec-primary);
  border-radius: var(--ragsec-radius-sm);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-lg);
}

/* ── Definition block ── */
.ragsec-definition {
  background: var(--ragsec-surface);
  border: 1px solid var(--ragsec-border);
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
}

/* ── Security invariant block ── */
.ragsec-invariant {
  background: var(--ragsec-info-bg);
  border: 1px solid #bfdbfe;
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
}

/* ── Evidence block ── */
.ragsec-evidence {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
}

/* ── Threat model block ── */
.ragsec-threat-model {
  background: var(--ragsec-surface);
  border: 1px solid var(--ragsec-border);
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
}

/* ── Verification block ── */
.ragsec-verification {
  background: var(--ragsec-surface);
  border-left: 4px solid var(--ragsec-success);
  border-radius: var(--ragsec-radius-sm);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-lg);
}

/* ── Limitations block ── */
.ragsec-limitations {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
}

/* ── CTA block ── */
.ragsec-cta {
  background: linear-gradient(135deg, var(--ragsec-primary) 0%, var(--ragsec-accent) 100%);
  color: var(--ragsec-white);
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-xl) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-xl);
}
.ragsec-cta h2,
.ragsec-cta h3,
.ragsec-cta p {
  color: var(--ragsec-white);
}
.ragsec-cta .wp-block-button__link {
  background: var(--ragsec-white);
  color: var(--ragsec-primary);
  font-weight: 600;
  border: none;
}
.ragsec-cta .wp-block-button__link:hover,
.ragsec-cta .wp-block-button__link:focus {
  background: var(--ragsec-surface);
}

/* ── Authorization notice ── */
.ragsec-auth-notice {
  border-radius: var(--ragsec-radius-sm);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  background: #fffbeb;
  margin-block: var(--ragsec-space-lg);
}

/* ── Finding card ── */
.ragsec-finding {
  border-radius: var(--ragsec-radius);
  border: 1px solid var(--ragsec-border);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
  background: var(--ragsec-white);
}

/* ── Connector card ── */
.ragsec-connector-card {
  background: var(--ragsec-white);
  border: 1px solid var(--ragsec-border);
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-lg);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ragsec-connector-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ── Last tested meta ── */
.ragsec-last-tested {
  font-size: 0.825rem;
  color: var(--ragsec-muted);
  border-top: 1px solid var(--ragsec-border);
  padding-top: var(--ragsec-space-xs);
  margin-top: var(--ragsec-space-sm);
}

/* ── Severity badges ── */
.ragsec-severity-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}
.ragsec-severity--critical { background: var(--ragsec-critical-bg); color: var(--ragsec-critical-fg); }
.ragsec-severity--high     { background: var(--ragsec-high-bg);     color: var(--ragsec-high-fg); }
.ragsec-severity--medium   { background: var(--ragsec-medium-bg);   color: var(--ragsec-medium-fg); }
.ragsec-severity--low      { background: var(--ragsec-low-bg);      color: var(--ragsec-low-fg); }
.ragsec-severity--info     { background: var(--ragsec-info-bg);     color: var(--ragsec-info-fg); }

/* Severity-styled group blocks */
.is-style-ragsec-critical { border-left: 4px solid var(--ragsec-critical-fg) !important; background: var(--ragsec-critical-bg) !important; }
.is-style-ragsec-high     { border-left: 4px solid var(--ragsec-high-fg) !important;     background: var(--ragsec-high-bg) !important; }
.is-style-ragsec-medium   { border-left: 4px solid var(--ragsec-medium-fg) !important;   background: var(--ragsec-medium-bg) !important; }
.is-style-ragsec-low      { border-left: 4px solid var(--ragsec-low-fg) !important;      background: var(--ragsec-low-bg) !important; }
.is-style-ragsec-informational { border-left: 4px solid var(--ragsec-info-fg) !important; background: var(--ragsec-info-bg) !important; }

/* ── Availability badges ── */
.ragsec-avail-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.ragsec-avail--available { color: var(--ragsec-success);  background: #f0fdf4; }
.ragsec-avail--beta      { color: var(--ragsec-primary);  background: var(--ragsec-info-bg); }
.ragsec-avail--planned   { color: var(--ragsec-muted);    background: var(--ragsec-surface); }
.ragsec-avail--research  { color: var(--ragsec-warning);  background: #fffbeb; }

/* ── Code blocks ── */
pre.wp-block-code,
.wp-block-code code {
  font-family: var(--ragsec-font-mono);
  font-size: 0.875rem;
  border-radius: var(--ragsec-radius-sm);
  background: #0f172a;
  color: #e2e8f0;
  padding: var(--ragsec-space-md);
  overflow-x: auto;
  tab-size: 2;
}
.wp-block-code.is-style-ragsec-vulnerable { background: #1c0505; border-left: 3px solid var(--ragsec-danger); }
.wp-block-code.is-style-ragsec-secure     { background: #011c0a; border-left: 3px solid var(--ragsec-success); }

/* ── Comparison table ── */
.ragsec-comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ragsec-comparison-table th {
  background: var(--ragsec-surface);
  font-weight: 700;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--ragsec-border);
}
.ragsec-comparison-table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--ragsec-border);
  vertical-align: top;
}

/* ── Hero section ── */
.ragsec-hero {
  background: var(--ragsec-ink);
  color: var(--ragsec-white);
}
.ragsec-hero h1,
.ragsec-hero h2,
.ragsec-hero p {
  color: var(--ragsec-white);
}

/* ── Responsive tables ── */
@media (max-width: 640px) {
  .wp-block-table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ragsec-connector-card {
    transition: none;
  }
}

/* ── Related research box ── */
.ragsec-related-research {
  background: var(--ragsec-surface);
  border: 1px solid var(--ragsec-border);
  border-radius: var(--ragsec-radius);
  padding: var(--ragsec-space-md) var(--ragsec-space-lg);
  margin-block: var(--ragsec-space-md);
}