/* ══════════════════════════════════════════════════════════
   COMPONENTS — buttons, section utilities, project cards,
   writing list, stat grid
   (former Additional CSS sections 5, 7, 8, 9, 11)

   All utility class NAMES are unchanged (ks-card, ks-dark,
   ks-writing-item, section-num, …) so the classes already
   saved in your Gutenberg content keep working with zero
   content edits.

   !important removed throughout: this stylesheet is enqueued
   AFTER wp-block-library (see functions.php), so equal-
   specificity selectors win over core block styles by source
   order — no Kadence stylesheet left to fight.
   ══════════════════════════════════════════════════════════ */


/* ── BUTTONS (former section 5) ──────────────────────────── */

/* Primary button — dark ink fill */
.wp-block-button__link,
.btn,
button[type="submit"],
input[type="submit"] {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 0;
  padding: 0.85rem 2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  text-decoration: none;
}

.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--accent);
  color: var(--paper);
  transform: translateY(-1px);
}

/* Outline / secondary button — Button block style "Outline" */
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:visited {
  background-color: transparent;
  color: var(--mid);
  border: 1px solid var(--rule);
  padding: 0.85rem 2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--ink);
  border-color: var(--ink);
  background-color: transparent;
  transform: none;
}

/* Contact bar — terracotta primary button */
.ks-contact-primary .wp-block-button__link {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.ks-contact-primary .wp-block-button__link:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Contact bar — ghost secondary button */
.ks-contact-secondary .wp-block-button__link {
  background-color: transparent;
  color: var(--paper);
  border: 1px solid #3a3a38;
}

.ks-contact-secondary .wp-block-button__link:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}


/* ── SECTION UTILITY CLASSES (former section 7) ──────────── */

/* Section number label — e.g. "01 — About" */
.section-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Dark ink background section */
.ks-dark {
  background-color: var(--ink);
  color: var(--paper);
}

.ks-dark h1,
.ks-dark h2,
.ks-dark h3,
.ks-dark p {
  color: var(--paper);
}

.ks-dark h2,
.ks-dark .wp-block-heading {
  font-size: 2.25rem;
  color: var(--paper);
}

.ks-dark a {
  color: var(--accent-muted);
}

/* Warm sand background section */
.ks-warm {
  background-color: var(--warm-mid);
}

/* Hero tagline max-width */
.ks-tagline {
  max-width: 560px;
}

/* Pull quote — large serif text in dark sections */
.ks-pull {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.35;
  max-width: 640px;
}

/* Body text in dark sections */
.ks-about-body {
  max-width: 600px;
  line-height: 1.75;
}

/* Contact subheading */
.ks-contact-sub {
  max-width: 480px;
  margin-bottom: 2rem;
}

/* Text link with underline — "Read more →" etc. */
.ks-text-link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ks-text-link a {
  color: #f5f2ed;
  border-bottom: 1px solid #3a3a38;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.ks-text-link a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Metadata tag chip — e.g. "Title IV · Compliance" */
.ks-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  background: var(--warm-mid);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  margin: 0.15rem;
}

/* Shared narrow-page wrapper — keeps every section on a
   dedicated page (e.g. About) aligned to the same centered
   column. Apply to a single outer Group block wrapping the
   whole page's content. */
.ks-page-narrow {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Inside the narrow-page wrapper, let .ks-pull and
   .ks-about-body fill the shared column instead of their
   own (narrower) max-width — which is still needed as-is
   for their original use in homepage dark sections. */
.ks-page-narrow .ks-pull,
.ks-page-narrow .ks-about-body,
.ks-page-narrow .ks-tag-row {
  max-width: 100%;
}

/* Differentiator tag block — larger labeled chip with a
   heading + description line, used on the About page.
   Apply "ks-tag-row" to the wrapping Row Group block.
   Apply "ks-tag-block" to each child Group block inside it. */
.ks-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.5rem 0 2rem;
}

.ks-tag-block {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--mid);
  background: var(--warm-mid);
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  flex: 1 1 calc(50% - 0.25rem);
  max-width: calc(50% - 0.25rem);
  box-sizing: border-box;
}

.ks-tag-block strong,
.ks-tag-block p:first-child {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.ks-tag-block p {
  margin: 0;
}

/* Closing line after the differentiator tag row — italic,
   muted. Apply to a Paragraph block. */
.ks-thesis-close {
  font-style: italic;
  color: var(--mid);
}


/* ── PROJECT CARDS (former section 8) ────────────────────── */

.ks-card-grid {
  gap: 1px;
  background-color: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2.5rem;
}

/* The Kadence margin-bottom-on-last-grid-child bug that
   clipped the ::before hover bar no longer exists — that rule
   was Kadence's. No workaround needed. */

.ks-card {
  background-color: var(--paper);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s;
}

/* Terracotta hover bar at top of card */
.ks-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.ks-card:hover::before,
.ks-card:focus-within::before {
  transform: scaleX(1);
}

.ks-card:hover,
.ks-card:focus-within {
  background-color: var(--warm-mid);
}

/* Eyebrow role label — e.g. "Vibe-Coded App · Product Direction".
   Used by the registered "Project Card" block pattern. If your
   live cards already use a different class for this, tell me its
   name and we'll match it here instead. */
.ks-card-eyebrow {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.ks-card h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.ks-card p {
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.6;
}

/* Clickable card modifier — for project cards that link out
   to a Writing post, unlike the other static info-only cards.
   Apply alongside "ks-card" on the same Group block. */
.ks-card-link {
  cursor: pointer;
}

.ks-card-link h3 {
  text-decoration: none;
}

.ks-card-link h3 a {
  color: inherit;
}

.ks-card-link:hover h3 a {
  color: var(--accent);
}

/* "Read the story" affordance line — apply to a Paragraph
   block as the last item inside a ks-card-link card */
.ks-card-read-link {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1rem;
}

/* Card bottom margin — on the live site this rule countered a
   Kadence bug (margin-bottom: 0 forced on the last grid child,
   which clipped the ::before hover bar). That Kadence rule no
   longer exists, but this is kept so staging matches live
   spacing exactly. If staging shows LARGER gaps between card
   rows than live, delete this rule — its original purpose is
   gone. Verify in the inspector. */
.ks-card-grid .wp-block-group.ks-card {
  margin-bottom: 2rem;
}


/* ── WRITING PREVIEW LIST — homepage (former section 9) ──── */

.ks-writing-list {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}

.ks-writing-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: all 0.2s;
}

.ks-writing-item:first-child {
  border-top: 1px solid var(--rule);
}

.ks-writing-item:hover h3 {
  color: var(--accent);
}

.ks-writing-item h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 0.3rem;
  transition: color 0.2s;
}

.ks-writing-item p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.5;
}

/* Date column — fixed width prevents content shifting */
.writing-date {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.25rem;
  min-width: 100px;
  flex-shrink: 0;
}


/* ── STAT BOX GRID — About (former section 11) ───────────── */

.ks-stats .wp-block-column {
  background-color: #181816;
  padding: 1.5rem;
  border: 1px solid #2a2a28;
}

.ks-stats .wp-block-column h3 {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--paper);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.ks-stats .wp-block-column p {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6560;
}


/* ── RESPONSIVE (from former section 13) ─────────────────── */

@media (max-width: 768px) {
  .ks-writing-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .writing-date {
    min-width: unset;
  }

  .ks-card {
    padding: 1.5rem;
  }

  .ks-pull {
    font-size: 1.35rem;
  }

  .ks-tag-block {
    max-width: 100%;
    flex: 1 1 100%;
  }
}


/* ── FRAMEWORK COMPARISON TABLE — blog posts ──────────────
   (former Additional CSS section 14)
   Side-by-side "principle / question / practice" layouts,
   e.g. the Auditable by Design framework table.
   Apply "ks-framework" to the wrapping Group block,
   "ks-framework-row" to each principle's Group block,
   "ks-framework-name" to the principle name Paragraph,
   "ks-framework-num" to the number label inside it,
   "ks-framework-q" / "ks-framework-practice" to the two
   column Groups/Paragraphs.
   ---------------------------------------------------------- */

.ks-framework {
  margin: 2.5rem 0;
}

.ks-framework-headers {
  display: grid;
  grid-template-columns: 190px 1fr 1fr;
  gap: 0;
}

.ks-framework-headers span {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 0 28px 0.7rem 0;
  border-bottom: 1px solid var(--ink);
  display: block;
}

.ks-framework-headers .ks-h-practice {
  color: var(--accent);
}

.ks-framework-row {
  display: grid;
  grid-template-columns: 190px 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

.ks-framework-row:last-child {
  border-bottom: 1px solid var(--ink);
}

.ks-framework-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink);
  padding: 1.85rem 24px 1.85rem 0;
}

.ks-framework-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.ks-framework-q,
.ks-framework-practice {
  padding: 1.85rem 28px;
}

.ks-framework-q p,
.ks-framework-practice p {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.ks-framework-q {
  border-right: 1px solid var(--rule);
}

.ks-framework-q p {
  color: var(--mid);
  font-style: italic;
}

.ks-framework-practice {
  background-color: rgba(201, 68, 15, 0.05);
}

.ks-framework-practice p {
  color: var(--ink);
}

.ks-framework-q::before,
.ks-framework-practice::before {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.ks-framework-q::before {
  content: 'Question';
  color: var(--mid);
}

.ks-framework-practice::before {
  content: 'In practice';
  color: var(--accent);
}

@media (max-width: 768px) {
  .ks-framework-headers {
    display: none;
  }

  .ks-framework-row {
    grid-template-columns: 1fr;
  }

  .ks-framework-name {
    padding: 1.6rem 0 0.5rem 0;
  }

  .ks-framework-q,
  .ks-framework-practice {
    padding: 1rem 0 1.6rem 0;
    border-right: none;
  }
}