/* KHK Automation — supplemental styles for things theme.json can't express */

.khk-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.khk-section--paper { background: var(--wp--preset--color--paper); }
.khk-section--dark  { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--steel-100); }
.khk-section--dark h1, .khk-section--dark h2, .khk-section--dark h3 { color: #fff; }
.khk-section--dark p { color: var(--wp--preset--color--steel-300); }

/* eyebrow ------------------------------------------------------------ */
.khk-eyebrow {
  font-family: var(--wp--preset--font-family--head);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wp--preset--color--vermilion);
  display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem;
}
.khk-eyebrow::after { content:""; flex:1; height:2px; background: currentColor; opacity:.25; max-width:80px; }
.khk-section--dark .khk-eyebrow { color: var(--wp--preset--color--vermilion-light); }

/* lede --------------------------------------------------------------- */
.khk-lede { font-size: clamp(1.1rem,1.8vw,1.3rem); max-width: 60ch; color: #33383F; }
.khk-section--dark .khk-lede { color: var(--wp--preset--color--steel-300); }

/* hero --------------------------------------------------------------- */
.khk-hero { position: relative; overflow: hidden; background: var(--wp--preset--color--charcoal); color:#fff;
  padding-block: clamp(4rem,10vw,7.5rem); }
.khk-hero::before {
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.028) 38px 39px),
    radial-gradient(120% 90% at 78% 12%, rgba(198,57,39,.34), transparent 60%);
}
.khk-hero > * { position: relative; }
.khk-hero h1 { color:#fff; max-width: 16ch; }
.khk-hero .khk-lede { color: var(--wp--preset--color--steel-300); max-width: 54ch; }
.khk-hero--sub { padding-block: clamp(3rem,6vw,4.5rem); }
.khk-hero--sub h1 { max-width: 22ch; }

/* trust bar ---------------------------------------------------------- */
.khk-trustbar { border-top: 1px solid rgba(255,255,255,.14); margin-top: clamp(2.5rem,5vw,4rem); padding-top: 1.5rem; }
.khk-trustbar ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 2.2rem;
  font-family: var(--wp--preset--font-family--head); font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--wp--preset--color--steel-300); font-weight:600; }
.khk-trustbar li::before { content:"\25B8  "; color: var(--wp--preset--color--vermilion-light); }

/* cards -------------------------------------------------------------- */
.khk-card { background:#fff; border:1px solid var(--wp--preset--color--steel-100);
  border-top:3px solid var(--wp--preset--color--vermilion); padding:1.75rem; height:100%; }
.khk-card h3 { margin:0 0 .4rem; }
.khk-card p:last-child { margin-bottom:0; }
.khk-section--dark .khk-card { background: var(--wp--preset--color--steel-800); border-color:#33383F;
  border-top-color: var(--wp--preset--color--vermilion); }
.khk-cards { gap: clamp(1.25rem,2.5vw,2rem) !important; margin-top: 2.75rem; }
@media (max-width: 900px) {
  .khk-cards { flex-wrap: wrap !important; }
  .khk-cards .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}
@media (max-width: 599px) {
  .khk-cards .wp-block-column { flex-basis: 100% !important; }
}

/* stats -------------------------------------------------------------- */
.khk-stat { border-left:3px solid var(--wp--preset--color--vermilion); padding-left:1.1rem; }
.khk-stat__num { font-family: var(--wp--preset--font-family--head); font-weight:800; line-height:1;
  font-size: clamp(1.9rem,3.4vw,2.8rem); margin:0; }
.khk-section--dark .khk-stat__num { color:#fff; }
.khk-stat__label { font-size:.92rem; color: var(--wp--preset--color--steel-500); margin:.4rem 0 0; }
.khk-section--dark .khk-stat__label { color: var(--wp--preset--color--steel-300); }
.khk-stats { gap:1.75rem !important; margin-top: 2.5rem; }

/* process flow ------------------------------------------------------- */
.khk-flow ul, .khk-flow ol { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:2rem 0 0; padding:0; }
.khk-flow li { flex:1 1 105px; background: var(--wp--preset--color--steel-800); border:1px solid #33383F;
  padding:.9rem .6rem; text-align:center; font-family: var(--wp--preset--font-family--head);
  font-weight:700; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  color: var(--wp--preset--color--steel-100); }
.khk-flow li:nth-child(odd) { border-bottom:3px solid var(--wp--preset--color--vermilion); }

/* tables ------------------------------------------------------------- */
.wp-block-table table { border-collapse: collapse; width:100%; }
.wp-block-table th, .wp-block-table td { padding:.9rem 1rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--wp--preset--color--steel-100); }
.wp-block-table thead th { background: var(--wp--preset--color--charcoal); color:#fff; border-bottom:none;
  font-family: var(--wp--preset--font-family--head); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.wp-block-table tbody tr:nth-child(even) { background: var(--wp--preset--color--paper); }

/* callout ------------------------------------------------------------ */
.khk-callout { border-left:4px solid var(--wp--preset--color--vermilion);
  background: var(--wp--preset--color--paper); padding:1.25rem 1.5rem; margin:2rem 0; font-size:.95rem; }
.khk-callout p:last-child { margin-bottom:0; }

/* cta strip ---------------------------------------------------------- */
.khk-cta { background: var(--wp--preset--color--vermilion); color:#fff; text-align:center;
  padding-block: clamp(2.5rem,5vw,4rem); }
.khk-cta h2, .khk-cta p { color:#fff; }
.khk-cta p { max-width:54ch; margin-inline:auto; }
.khk-cta .khk-btn-row { justify-content:center; }
.khk-cta .wp-block-button__link { background:#fff !important; color: var(--wp--preset--color--vermilion) !important; }
.khk-cta .wp-block-button__link:hover { background: var(--wp--preset--color--jet) !important; color:#fff !important; }

/* header / footer ---------------------------------------------------- */
.khk-brand { font-family: var(--wp--preset--font-family--head); font-weight:800; font-size:1.7rem;
  letter-spacing:-.02em; color: var(--wp--preset--color--vermilion);
  text-shadow: 2px 2px 0 var(--wp--preset--color--mahogany); line-height:1; text-decoration:none; }
.khk-header { border-bottom:1px solid var(--wp--preset--color--steel-100); position:sticky; top:0; z-index:60;
  background:#fff; }
.khk-header .wp-block-navigation { font-family: var(--wp--preset--font-family--head); font-weight:600;
  font-size:.88rem; letter-spacing:.05em; text-transform:uppercase; }
.khk-footer { background: var(--wp--preset--color--jet); color: var(--wp--preset--color--steel-300);
  padding-block: 3.5rem 2rem; font-size:.92rem; }
.khk-footer a { color: var(--wp--preset--color--steel-100); }
.khk-footer h4 { color:#fff; }

/* images ------------------------------------------------------------- */
.khk-shot img { width:100%; height:auto; display:block; }
.khk-shot figcaption { font-size:.85rem; color: var(--wp--preset--color--steel-500); margin-top:.6rem; }
.khk-shot img[src=""], .khk-shot img:not([src]) {
  min-height: 260px; background: repeating-linear-gradient(45deg,#EFEFEC 0 12px,#E6E6E2 12px 24px);
  outline: 1px dashed var(--wp--preset--color--steel-300);
}
