/* ═══════════════════════════════════════════════════════════════
   BLOG IN-PAGE CSS  — v3.1
   Agensi Pekerjaan Andaraya · Lesen C
   Aligned to tokens.css v3 — standalone, do NOT append to base.css

   Token mapping applied (v3.1):
   - --accent-gold       → --accent-green      (logo lime, primary CTA accent)
   - --accent-gold-lt    → --accent-green-lt   (lighter hover variant)
   - --gradient-gold     → --gradient-green    (logo lime gradient)
   - --gradient-teal     → --gradient-sky      (logo oval blue gradient)
   - --accent-teal       → --accent-sky        (logo oval blue)
   - --text-inverse      → --color-text-inverse (compat alias removed)
   - --text-muted        → --color-text-muted   (compat alias removed)
   - oklch(72% 0.17 60/70), oklch(68% 0.19 65) → var(--color-warning)
     (three scattered amber hardcodes unified to semantic token)
   - 'DM Mono', monospace → var(--font-body), monospace
     (DM Mono not loaded; falls back to system mono correctly)
   ═══════════════════════════════════════════════════════════════ */


/* ============================================================
   BLOG CONTENT LAYOUT
   ============================================================ */
.blog-content {
  background: var(--bg-surface);
  margin: -3rem auto 4rem;
  padding: var(--space-12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.toc-section {
  background: linear-gradient(135deg, var(--bg-alt) 0%, oklch(92% 0.01 250) 100%);
  padding: var(--space-10);
  margin-bottom: var(--space-16);
  margin-top: var(--space-16);
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--accent-gold-lt);   /* was --accent-gold-lt */
  box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.07);
}

.toc-section h3 {
  color: var(--color-primary-900);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
  font-weight: 700;
}

.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.toc-grid a {
  color: var(--color-primary-900);
  text-decoration: none;
  padding: 0.8rem var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition:
    background   var(--duration-normal) var(--ease-standard),
    transform    var(--duration-normal) var(--ease-standard),
    box-shadow   var(--duration-normal) var(--ease-standard),
    color        var(--duration-normal) var(--ease-standard);
}

.toc-grid a::before {
  content: '→';
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.toc-grid a:hover {
  background: var(--accent-gold);        /* was --accent-gold */
  color: var(--color-text-inverse);       /* was --text-inverse */
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.toc-grid a:hover::before { transform: translateX(3px); }


/* ============================================================
   SECTION
   ============================================================ */
.section {
  padding-block: var(--space-12);
}

.section > * + * { margin-top: var(--space-16); }

.section p {
  margin-bottom: var(--space-6);
  line-height: 1.8;
  font-size: var(--text-base);
  color: var(--color-text-muted);           /* was --text-muted */
}


/* ============================================================
   CONTENT BOXES
   ============================================================ */
.warning-box,
.info-box,
.highlight-box {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  margin: var(--space-10) 0;
  border-left: 5px solid transparent;
}

.warning-box h4,
.info-box h4,
.highlight-box h4 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: 1rem;
  font-weight: 700;
}

/* Warning */
.warning-box {
  background: linear-gradient(
    135deg,
    oklch(97% 0.06 85) 0%,
    oklch(98% 0.04 85) 100%
  );
  border-left-color: var(--color-warning);  /* was oklch(72% 0.17 60) — now semantic token */
  box-shadow: 0 4px 15px var(--color-warning-pale);
}

.warning-box h4 {
  color: var(--accent-gold);               /* was --accent-gold — accent colour for heading */
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.warning-box h4::before { content: '⚠️'; }

/* Info */
.info-box {
  background: linear-gradient(
    135deg,
    oklch(95% 0.03 240) 0%,
    oklch(96% 0.03 225) 100%
  );
  border-left-color: var(--color-primary-900);
}

.info-box h4 { color: var(--color-primary-900); }

/* Highlight */
.highlight-box {
  background: linear-gradient(
    135deg,
    oklch(98% 0.05 85) 0%,
    oklch(99% 0.03 85) 100%
  );
  border-left-color: var(--accent-gold);   /* was --accent-gold */
  padding: var(--space-10);
}

.highlight-box h4 { color: var(--accent-gold-lt); }  /* was --accent-gold-lt */


/* ============================================================
   STATS
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  margin: var(--space-12) 0;
}

.stat-card {
  text-align: center;
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-surface) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform   var(--duration-normal) var(--ease-standard),
    box-shadow  var(--duration-normal) var(--ease-standard);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--accent-gold);               /* was --accent-gold */
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-label {
  color: var(--color-primary-900);
  font-weight: 600;
  font-size: var(--text-sm);
}


/* ============================================================
   GRID LAYOUTS
   ============================================================ */
.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-8);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--bg-surface);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--accent-gold); /* was --accent-gold */
  transition:
    transform   var(--duration-normal) var(--ease-standard),
    box-shadow  var(--duration-normal) var(--ease-standard);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card h4 {
  color: var(--color-primary-900);
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: 1.2rem;
  font-weight: 700;
}

.card--nested {
  padding: var(--space-6);
  box-shadow: none;
  border-top: none;
  background: var(--bg-alt);
  transform: none !important;
  transition: none;
}


/* ============================================================
   LISTS
   ============================================================ */

/* ── BASE LIST ── */
.list { list-style: none; padding: 0; margin: 0; margin-bottom: var(--space-16); }

.list__item {
  position: relative;
  padding: 0.9rem 1.25rem 0.9rem 3rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: 1.65;
  transition:
    background var(--duration-normal) var(--ease-standard),
    transform  var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.list__item::before {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* CHECK */
.list--check .list__item {
  background: var(--bg-alt);
  border-left: 3px solid var(--color-primary-900);
}
.list--check .list__item:hover {
  background: oklch(94% 0.01 250);
  transform: translateX(5px);
  box-shadow: 2px 0 0 0 var(--accent-gold);   /* was --accent-gold */
}
.list--check .list__item::before {
  content: '✓';
  color: var(--accent-gold);                   /* was --accent-gold */
  font-size: var(--text-sm);
}

/* WARNING */
.list--warning .list__item {
  background: oklch(97% 0.025 85);
  border-left: 3px solid var(--color-warning);  /* was oklch(72% 0.17 70) */
}
.list--warning .list__item:hover {
  background: oklch(95% 0.04 85);
  transform: translateX(5px);
}
.list--warning .list__item::before {
  content: '⚠';
  color: var(--color-warning);                  /* was oklch(68% 0.19 65) */
  font-size: 0.95rem;
}

/* CARD */
.list--card .list__item {
  padding: 0.45rem 0 0.45rem 1.6rem;
  margin-bottom: 0.55rem;
  background: transparent;
  border-left: none;
  border-radius: 0;
}
.list--card .list__item::before {
  content: '✦';
  left: 0;
  color: var(--color-brand);
  font-weight: 400;
  font-size: 0.7rem;
}

/* ARROW */
.list--arrow .list__item {
  background: transparent;
  border-left: none;
  padding: 0.5rem 0 0.5rem 2.2rem;
  margin-bottom: 0.5rem;
  border-radius: 0;
}
.list--arrow .list__item::before {
  content: '→';
  left: 0.1rem;
  color: var(--color-primary-900);
  font-size: var(--text-base);
  font-weight: 700;
  transition:
    transform var(--duration-normal) var(--ease-standard),
    color     var(--duration-normal) var(--ease-standard);
}
.list--arrow .list__item:hover::before {
  transform: translateY(-50%) translateX(4px);
  color: var(--accent-gold);                   /* was --accent-gold */
}
.list--arrow .list__item:hover {
  color: var(--color-primary-900);
}

/* CHECK PLAIN */
.list--check-plain .list__item {
  background: transparent;
  border-left: none;
  padding: 0.5rem 0 0.5rem 2.2rem;
  margin-bottom: 0.5rem;
  border-radius: 0;
}
.list--check-plain .list__item::before {
  content: '✓';
  left: 0.1rem;
  color: var(--accent-gold);                   /* was --accent-gold */
  font-size: var(--text-sm);
  font-weight: 700;
  transition: color var(--duration-normal) var(--ease-standard);
}
.list--check-plain .list__item:hover {
  color: var(--color-primary-900);
}
.list--check-plain .list__item:hover::before {
  color: var(--color-primary-900);
}

/* DISC */
ul.disc {
  list-style-type: disc;
  padding-inline-start: 1.5rem;
  margin: 0;
}
ul.disc li {
  font-size: var(--text-base);
  line-height: 1.75;
  margin-bottom: 0.5rem;
}
ul.disc li::marker { color: var(--accent-gold); }  /* was --accent-gold */


/* ============================================================
   NUMBERED STEPS
   ============================================================ */
.numbered-steps {
  counter-reset: step;
  list-style: none;
  margin: var(--space-10) 0;
  padding: 0;
}

.numbered-steps li {
  padding: var(--space-8) var(--space-8) var(--space-8) 5rem;
  margin-bottom: var(--space-6);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  position: relative;
  counter-increment: step;
  box-shadow: var(--shadow-sm);
  transition:
    transform   var(--duration-normal) var(--ease-standard),
    box-shadow  var(--duration-normal) var(--ease-standard);
}

.numbered-steps li:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.numbered-steps li::before {
  content: counter(step);
  background: var(--gradient-gold);          /* was --gradient-gold */
  color: var(--bg-surface);
  font-weight: bold;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 1.5rem;
  top: var(--space-8);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-gold);            /* was --shadow-md — uses brand shadow */
}

.numbered-steps strong {
  color: var(--color-primary-900);
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}


/* ============================================================
   COMPARISON TABLE
   ============================================================ */
@keyframes tableIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.comparison-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid oklch(90% 0.01 250);
  background: var(--bg-surface);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.80),
    var(--shadow-sm),
    var(--shadow-md),
    0 32px 64px oklch(14% 0.08 248 / 0.07);
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  animation: tableIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  font-family: var(--font-body);
}

/* Header */
.comparison-table thead tr {
  background: var(--gradient-sky);            /* was --gradient-teal */
}

.comparison-table thead th {
  color: oklch(100% 0 0 / 0.45);
  font-family: var(--font-body), monospace;   /* was 'DM Mono' — not loaded */
  font-weight: 400;
  text-align: left;
  padding: 1.1rem 1.4rem;
  font-size: var(--text-lg);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-right: 1px solid oklch(100% 0 0 / 0.07);
}

.comparison-table thead th:last-child  { border-right: none; }

.comparison-table thead th:first-child {
  color: oklch(100% 0 0 / 0.90);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  border-radius: var(--radius-xl) 0 0 0;
  position: relative;
}

.comparison-table thead th:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%; bottom: 18%;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--accent-sky),                        /* was --accent-teal */
    color-mix(in oklch, var(--accent-sky) 15%, transparent)
  );
  border-radius: 0 2px 2px 0;
}

.comparison-table thead th:last-child {
  border-radius: 0 var(--radius-xl) 0 0;
}

/* Cells */
.comparison-table td {
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid oklch(94% 0.007 250);
  border-right: 1px solid oklch(94% 0.007 250);
  vertical-align: top;
  font-size: var(--text-sm);
  line-height: 1.62;
  color: var(--color-text-muted);             /* was --text-muted */
  transition:
    background  var(--duration-fast) var(--ease-standard),
    color       var(--duration-fast) var(--ease-standard);
}

.comparison-table td:last-child  { border-right: none; }
.comparison-table tr:last-child td { border-bottom: none; }

/* First column — label */
.comparison-table td:first-child {
  color: var(--color-primary-600);
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-display);
  letter-spacing: -0.008em;
  white-space: nowrap;
  background: var(--bg-base);
  width: 195px;
  border-right: 1px solid oklch(90% 0.01 250);
  vertical-align: middle;
}

/* Row hover */
.comparison-table tbody tr:not(.section-row):hover td {
  background: var(--bg-base);
  color: var(--color-text-muted);             /* was --text-muted */
}

.comparison-table tbody tr:not(.section-row):hover td:first-child {
  background: oklch(94.5% 0.02 250);
  color: var(--color-primary-600);
}

/* Section rows */
.section-row td {
  background: var(--gradient-gold) !important;  /* was --gradient-gold */
  color: oklch(100% 0 0 / 0.48);
  font-family: var(--font-body), monospace;   /* was 'DM Mono' */
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.55rem 1.4rem;
  border-bottom: none !important;
  border-right: none !important;
}

.section-row td span {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
}

.section-row td span::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: oklch(100% 0 0 / 0.20);
  border-radius: 2px;
}

/* Status badges — independent semantic colours, untouched */
.status-strict,
.status-aligned,
.status-complementary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.22em 0.65em;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-body), monospace;   /* was 'DM Mono' */
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-bottom: 0.3em;
}

.status-strict::before,
.status-aligned::before,
.status-complementary::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.status-strict {
  background: oklch(97% 0.03 20);
  color: oklch(38% 0.14 20);
  border: 1px solid oklch(90% 0.06 20);
}
.status-strict::before { background: oklch(58% 0.18 20); }

.status-aligned {
  background: oklch(96% 0.04 155);
  color: oklch(38% 0.12 155);
  border: 1px solid oklch(88% 0.07 155);
}
.status-aligned::before { background: oklch(55% 0.17 155); }

.status-complementary {
  background: oklch(97% 0.05 75);
  color: oklch(42% 0.12 75);
  border: 1px solid oklch(88% 0.10 75);
}
.status-complementary::before { background: oklch(62% 0.16 75); }

/* Tag */
.tag {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-body), monospace;   /* was 'DM Mono' */
  background: var(--bg-surface);
  color: var(--color-text-muted);             /* was --text-muted */
  border: 1px solid oklch(90% 0.01 250);
}

/* Scrollbar */
.comparison-table-wrapper::-webkit-scrollbar       { height: 5px; }
.comparison-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-base);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.comparison-table-wrapper::-webkit-scrollbar-thumb {
  background: oklch(85% 0.01 250);
  border-radius: var(--radius-pill);
}


/* ============================================================
   COMPARISON GRID
   ============================================================ */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin: var(--space-10) 0;
}

.comparison-box {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border-left: 5px solid transparent;
}

.comparison-box h4 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Fail state — independent semantic, untouched */
.comparison-box.fail {
  background: linear-gradient(
    135deg,
    oklch(96% 0.04 20) 0%,
    oklch(93% 0.06 20) 100%
  );
  border-left-color: oklch(58% 0.20 20);
}
.comparison-box.fail h4 { color: oklch(58% 0.20 20); }

/* Pass state — independent semantic, untouched */
.comparison-box.pass {
  background: linear-gradient(
    135deg,
    oklch(96% 0.05 155) 0%,
    oklch(92% 0.07 155) 100%
  );
  border-left-color: oklch(58% 0.18 155);
}
.comparison-box.pass h4 { color: oklch(58% 0.18 155); }


/* ============================================================
   CTA BOX
   ============================================================ */
.cta-box {
  background: var(--gradient-sunset);       /* correct v3 token — no change */
  padding: var(--space-12);
  border-radius: var(--radius-xl);
  text-align: center;
  color: var(--color-text-inverse);         /* was --text-inverse */
  margin: var(--space-12) 0;
  box-shadow: var(--shadow-lg);
}

.cta-box h3 {
  color: var(--color-text-inverse);         /* was --text-inverse */
  margin-bottom: var(--space-6);
  font-size: var(--h3-font-size);
  font-weight: 700;
}

.cta-box p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  opacity: 0.95;
}


/* ============================================================
   LEGEND
   ============================================================ */
.legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-left: auto;
  padding-top: 2px;
}

.legend-label {
  font-family: var(--font-body), monospace;  /* was 'DM Mono' */
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);            /* was --text-muted */
  margin-right: 0.2em;
}


/* ============================================================
   HEADING + ICON ALIGNMENT (scoped to blog content)
   ============================================================ */
.blog-content h4,
.blog-content h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-content .icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ≤968px */
@media (max-width: 968px) {
  .blog-content {
    padding: var(--space-10) var(--space-6);
  }
  .numbered-steps li {
    padding-left: var(--space-16);
  }
  .comparison-grid,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ≤768px — stacked table */
@media (max-width: 768px) {
  .comparison-table { min-width: 100%; }

  .comparison-table thead { display: none; }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table td { display: block; width: 100%; }

  .comparison-table tbody {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .comparison-table tr:not(.section-row) {
    background: var(--bg-base);
    border: 1px solid oklch(90% 0.01 250);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .comparison-table td {
    border: none !important;
    border-bottom: 1px solid oklch(94% 0.007 250) !important;
    padding: 0.7rem 1rem;
    white-space: normal;
  }

  .comparison-table td:first-child {
    background: var(--bg-base);
    width: 100%;
    font-size: var(--text-xs);
  }

  .comparison-table td:last-child { border-bottom: none !important; }

  .comparison-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.67rem;
    font-family: var(--font-body), monospace;  /* was 'DM Mono' */
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);            /* was --text-muted */
    margin-bottom: 0.3rem;
    opacity: 0.7;
  }
  .comparison-table td:first-child::before { display: none; }

  .section-row { border-radius: var(--radius-md) !important; }
  .section-row td {
    border-radius: 0 !important;
    padding: 0.55rem 1rem;
  }
  .section-row td::before { display: none; }

  .comparison-grid { grid-template-columns: 1fr; }
}