/* ==========================================================================
   SecurTek Security: shared component stylesheet
   File: custom.css (theme add-on layer)
   Install target: /user/themes/quark2/css/custom.css (via cPanel File Manager)
   --------------------------------------------------------------------------
   This file is an ADD-ON component layer for the Quark2-based theme.
   It does NOT reset or override global theme typography, body, header, or
   footer styles. Every rule is scoped to st- prefixed component classes so
   existing pages (which carry the same values inline) render unchanged, and
   new pages can be built from reusable classes instead of inline styles.
   Values were extracted from the verified DEV builds: the news page v2.0
   snapshot (byte-exact) and the build specifications used for the verified
   Security Trends, AI Trends, Research, Education, and Engagement pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base tokens
   -------------------------------------------------------------------------- */
:root {
  --st-accent: #8428DF;        /* brand purple, primary accent */
  --st-accent-mid: #9a63e8;    /* mid purple, map dots and soft accents */
  --st-accent-soft: #b79df0;   /* light purple, legend dots, dark-bg links */
  --st-navy: #0e1330;          /* deep navy, hero and closing bands */
  --st-ink: #23272f;           /* near-black text on light surfaces */
  --st-heading: #101828;       /* media labels and strong headings */
  --st-muted: #6b7280;         /* secondary text */
  --st-caption: #5b6472;       /* media captions */
  --st-faint: #9ca3af;         /* inactive / zero-state text */
  --st-line: #e3ddf3;          /* lavender border */
  --st-line-neutral: #e5e7eb;  /* neutral border */
  --st-tint: #f1eef7;          /* lavender tint fill, bar tracks */
  --st-callout-bg: #faf7ff;    /* callout background */
  --st-chip-bg: #f9fafb;       /* inactive chip background */
  --st-card-bg: #ffffff;
  --st-radius: 12px;           /* standard card radius */
  --st-radius-lg: 16px;        /* hero and band radius */
  --st-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* --------------------------------------------------------------------------
   2. Heroes (dark navy panels, trends pages and research)
   -------------------------------------------------------------------------- */
.st-hero {
  background: var(--st-navy);
  color: #ffffff;
  border-radius: var(--st-radius-lg);
  padding: 44px 36px;
  margin: 0 0 28px;
}
.st-hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.st-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--st-radius);
  margin-bottom: 24px;
}
.st-hero-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 10px;
}
.st-hero-tagline {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
}
.st-hero-sub {
  color: #d7d2ea;
  max-width: 65ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Eyebrows, titles, section heads
   -------------------------------------------------------------------------- */
.st-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--st-accent);
  margin: 0 0 8px;
}
.st-eyebrow--lg {
  font-size: 13px;
  letter-spacing: 1px;
}
.st-hero .st-eyebrow {
  color: var(--st-accent-soft);
}
.st-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 2px solid var(--st-line);
  padding-bottom: 6px;
  margin-bottom: 20px;
}
.st-section-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--st-ink);
  margin: 0;
}
.st-anchor-section {
  scroll-margin-top: 140px;
  margin-bottom: 48px;
}
.st-lede {
  max-width: 65ch;
}

/* --------------------------------------------------------------------------
   4. Stat cards (impact cards on News; stat rows on Trends pages)
   -------------------------------------------------------------------------- */
.st-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.st-stat-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 8px;
}
.st-stat {
  background: var(--st-card-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 18px 20px;
  box-shadow: var(--st-shadow);
}
.st-stat--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.st-stat-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--st-ink);
}
.st-stat--dark .st-stat-value {
  color: #ffffff;
}
.st-stat-label {
  color: var(--st-muted);
  font-size: 14px;
  margin-top: 4px;
}
.st-stat--dark .st-stat-label {
  color: #d7d2ea;
}

/* --------------------------------------------------------------------------
   5. Topic headers (accent bar, Trends pages)
   -------------------------------------------------------------------------- */
.st-topic-head {
  border-left: 4px solid var(--st-accent);
  padding: 4px 0 4px 16px;
  margin: 28px 0 14px;
}
.st-topic-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--st-accent);
}
.st-topic-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--st-ink);
  margin: 2px 0 0;
}

/* --------------------------------------------------------------------------
   6. Callouts ("Why it matters", latest incident, instructor, watch boxes)
   -------------------------------------------------------------------------- */
.st-callout {
  border-left: 4px solid var(--st-accent);
  background: var(--st-callout-bg);
  border-radius: 0 var(--st-radius) var(--st-radius) 0;
  padding: 18px 20px;
  margin: 22px 0;
}
.st-callout-label {
  font-weight: 700;
  color: var(--st-ink);
}
.st-callout--dark {
  background: var(--st-navy);
  border-left-color: var(--st-accent-soft);
  color: #ffffff;
  border-radius: var(--st-radius);
}
.st-callout--dark .st-callout-label {
  color: #ffffff;
}
.st-callout--dark a {
  color: var(--st-accent-soft);
}

/* --------------------------------------------------------------------------
   7. Action boxes ("What you can do" / "What this means for you")
   -------------------------------------------------------------------------- */
.st-action-box {
  background: var(--st-card-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 18px 20px;
  margin: 22px 0;
}
.st-action-box-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--st-ink);
  margin: 0 0 10px;
}
.st-action-box ul {
  margin: 0;
  padding-left: 20px;
}
.st-action-box li {
  margin-bottom: 10px;
}
.st-action-box li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Cards and panels (country components, frontier cards, offerings)
   -------------------------------------------------------------------------- */
.st-card {
  background: var(--st-card-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 18px 20px;
}
.st-card--row {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--st-card-bg);
}
.st-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.st-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.st-num-badge {
  font-weight: 800;
  font-size: 20px;
  color: var(--st-accent);
}
.st-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--st-ink);
  margin: 0 0 8px;
}
.st-detail-label {
  font-weight: 700;
  color: var(--st-ink);
}
.st-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--st-muted);
}
.st-price {
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0;
  color: var(--st-ink);
}
.st-terms {
  font-weight: 600;
  color: var(--st-ink);
}

/* --------------------------------------------------------------------------
   9. Pills and chips (characterization pills, filter chips, archive links)
   -------------------------------------------------------------------------- */
.st-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--st-line);
  background: var(--st-card-bg);
  font-size: 14px;
}
.st-pill--accent {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--st-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border: none;
}
.st-pill--dark {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--st-ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border: none;
}
.st-pill--muted {
  border-color: var(--st-line-neutral);
  background: var(--st-chip-bg);
  color: var(--st-faint);
}
.st-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.st-chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--st-line);
  background: var(--st-card-bg);
  color: var(--st-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.st-chip-link--dark {
  background: var(--st-ink);
  color: #ffffff;
  border-color: var(--st-ink);
}

/* --------------------------------------------------------------------------
   10. Sticky pill sub-nav (News; reusable for Research contents bar)
   -------------------------------------------------------------------------- */
.st-subnav {
  position: sticky;
  top: 60px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin: 20px 0 32px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--st-line);
  border-radius: 999px;
}
.st-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--st-line);
  background: var(--st-card-bg);
  color: var(--st-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.st-subnav a.is-active {
  background: var(--st-ink);
  color: #ffffff;
  border-color: var(--st-ink);
}

/* --------------------------------------------------------------------------
   11. Bars and tables (News statistics)
   -------------------------------------------------------------------------- */
.st-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.st-bar-label {
  width: 110px;
  flex-shrink: 0;
  font-weight: 600;
}
.st-bar-track {
  flex: 1;
  background: var(--st-tint);
  border-radius: 999px;
  overflow: hidden;
}
.st-bar-fill {
  background: var(--st-accent);
  border-radius: 999px;
  height: 10px;
}
.st-bar-value {
  width: 24px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 700;
}
.st-w-100 { width: 100%; }
.st-w-75 { width: 75%; }
.st-w-50 { width: 50%; }
.st-w-25 { width: 25%; }
.st-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  margin: 20px 0;
}
.st-table th {
  padding: 10px 12px;
  border-bottom: 2px solid var(--st-ink);
  font-size: 14px;
  letter-spacing: 1px;
}
.st-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--st-line);
}

/* --------------------------------------------------------------------------
   12. Map (News US map with state hotspots)
   -------------------------------------------------------------------------- */
.st-map {
  position: relative;
  max-width: 959px;
  margin: 0 auto;
}
.st-map img {
  width: 100%;
  height: auto;
  display: block;
}
.st-map-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--st-accent);
  opacity: 0;
  pointer-events: none;
}
.st-map-dot--on {
  opacity: 1;
}
.st-dot {
  display: inline-block;
  border-radius: 50%;
  background: var(--st-accent);
}
.st-dot--lg { width: 20px; height: 20px; }
.st-dot--md { width: 14px; height: 14px; background: var(--st-accent-mid); }
.st-dot--sm { width: 8px; height: 8px; background: var(--st-accent-soft); }

/* --------------------------------------------------------------------------
   13. Bands (highlight band, closing dark band)
   -------------------------------------------------------------------------- */
.st-highlight-band {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--st-tint);
  border-radius: var(--st-radius);
  padding: 18px 20px;
  margin: 22px 0;
}
.st-highlight-item {
  flex: 1 1 140px;
}
.st-highlight-value {
  font-weight: 800;
  font-size: 20px;
  color: var(--st-ink);
  display: block;
}
.st-highlight-label {
  color: var(--st-muted);
  font-size: 14px;
}
.st-band {
  background: var(--st-navy);
  color: #ffffff;
  border-radius: var(--st-radius-lg);
  padding: 32px;
  margin: 32px 0 8px;
}
.st-band a {
  color: var(--st-accent-soft);
}
.st-band-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   14. Media (video and image framing, challenge compare)
   -------------------------------------------------------------------------- */
.st-media {
  text-align: center;
  margin: 20px 0 6px;
}
.st-media-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--st-heading);
}
.st-media video,
.st-media img {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: var(--st-radius);
  display: block;
  margin: 10px auto;
}
.st-media-caption {
  font-size: 14px;
  color: var(--st-caption);
  max-width: 620px;
  margin: 8px auto 0;
}
.st-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--st-radius);
}
.st-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}
.st-compare figcaption {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
  color: var(--st-ink);
}

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */
.st-muted { color: var(--st-muted); }
.st-small { font-size: 14px; }
.st-body-sm { color: var(--st-muted); font-size: 15px; }
.st-mt-0 { margin-top: 0; }
.st-mt-sm { margin-top: 10px; }
.st-mb-sm { margin-bottom: 10px; }
.st-mb-md { margin-bottom: 12px; }
.st-section-gap { margin: 28px 0 14px; }
.st-clickable { cursor: pointer; font-weight: 600; }

/* --------------------------------------------------------------------------
   16. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .st-hero { padding: 32px 22px; }
  .st-hero-title { font-size: 32px; }
  .st-band { padding: 24px 20px; }
  .st-compare { grid-template-columns: 1fr; }
  .st-subnav { top: 52px; }
}

/* Footer: hide the theme built-in credit footer (it contains only the theme credit line) */
#footer { display: none; }

/* Header logo: give the brand mark more presence (theme default is 28px) */
.navbar-brand svg { height: 64px; width: auto; }

/* News breach-statistics table: pin cell backgrounds to the dashboard card
   color. The theme framework paints td/th from its palette variable, which
   is white in light mode and left the pale cell text unreadable. */
#breach-statistics td, #breach-statistics th { background-color: #131c33; }