/* Kapono Design — corrections to main.css.
 *
 * assets/css/main.css reads everything from tokens.css, so the retheme needed no
 * edits there. These four rules fix places where main.css encodes an intent the
 * brand guidelines contradict. Enqueue AFTER kdc-main, or fold into main.css and
 * delete this file.
 */

/* 1. Typography hierarchy per the client spec, not main.css's blanket 700.
      H1 Semibold 48/1.1/-0.02em navy · H2 Medium 32/1.2/-0.01em navy
      H3 Medium 20/1.3/0 SLATE BLUE (the one heading level that is not navy). */
.kdc h1, .kdc h2, .kdc h3, .kdc h4 { font-variation-settings: "opsz" var(--opsz-display); }
.kdc h1, .kdc .entry-title { font-weight: var(--fw-h1); }
.kdc h2 { font-weight: var(--fw-h2); }
.kdc h3, .kdc h4 { font-weight: var(--fw-h3); }
.kdc h3 { color: var(--text-heading-3); }
.kdc h5, .kdc h6 { font-weight: var(--fw-semibold); }

/* Body 16/1.6; small 13/1.4/+0.01em; data 14/1.4/+0.02em in Precision Teal. */
.kdc small, .kdc figcaption, .kdc .kdc-stat__note, .kdc .kdc-callout__label {
	line-height: var(--type-body-sm-lh);
	letter-spacing: var(--type-body-sm-ls);
}

.kdc code, .kdc kbd, .kdc samp, .kdc pre,
.kdc .kdc-mono, .kdc .is-style-kdc-mono, .kdc .kdc-tag, .kdc .kdc-flow__step {
	line-height: var(--type-mono-lh);
	letter-spacing: var(--type-mono-ls);
}

.kdc .is-style-kdc-mono { color: var(--text-data); }
.kdc .kdc-hero__strip p, .kdc p.kdc-stat__note { color: var(--text-data-sm); }
.kdc-hero--media .kdc-hero__strip p, .kdc-band p.kdc-stat__note { color: var(--text-data-inverse); }

/* 2. The committed button is Pacific Navy, not teal. Teal is an accent —
      eyebrow rules, meters, focus rings, active states — never a CTA fill. */
.kdc .ast-button,
.kdc .button,
.kdc input[type="submit"],
.kdc .wp-block-button__link,
.kdc-btn--primary {
	background: var(--action-primary);
	color: var(--action-contrast);
	font-weight: var(--fw-semibold);
	font-size: var(--type-body);
	letter-spacing: -0.008em;
	padding: 11px 18px;
}

.kdc .ast-button:hover,
.kdc .button:hover,
.kdc input[type="submit"]:hover,
.kdc .wp-block-button__link:hover,
.kdc-btn--primary:hover { background: var(--action-primary-hover); }

.kdc-btn--primary:active { background: var(--action-primary-press); }

/* The one teal CTA: reserved for a single accent action per page. */
.kdc .is-style-kdc-primary .wp-block-button__link,
.kdc-btn--accent {
	background: var(--accent-primary);
	color: var(--accent-contrast);
}

.kdc .is-style-kdc-primary .wp-block-button__link:hover,
.kdc-btn--accent:hover { background: var(--accent-primary-hover); }

/* 3. Eyebrows are Inter Semibold — the display face is no longer a second
      typeface, so 700 reads heavier than intended at 11px. */
.kdc-eyebrow,
.kdc .is-style-kdc-eyebrow,
.kdc-stat__label,
.kdc-badge,
.kdc-table th,
.kdc .is-style-kdc-data th { font-weight: var(--fw-semibold); }

/* 4. Badges are 3px squared, not pills — squared state reads differently from
      the pill-shaped taxonomy Tag. */
.kdc-badge { border-radius: var(--radius-chip); letter-spacing: 0.01em; text-transform: none; font-size: var(--type-caption); }

/* Focus: one treatment system-wide — 3px Precision Teal at 30%. */
.kdc a:focus-visible,
.kdc button:focus-visible,
.kdc input:focus-visible,
.kdc select:focus-visible,
.kdc textarea:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-color: var(--accent-primary);
}


/* ===========================================================
   BLOCK MARKUP SUPPORT
   main.css was written for hand-authored HTML. These rules make the same
   devices work when Gutenberg emits them, so the patterns can be core blocks
   instead of core/html blobs an editor cannot touch.
   =========================================================== */

/* Case study: core/columns is flex, main.css's .kdc-casestudy is grid. */
.kdc .kdc-casestudy.wp-block-columns {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;
}

.kdc .kdc-casestudy.wp-block-columns > .wp-block-column { flex-basis: auto !important; }

.kdc .kdc-rail.wp-block-column {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Rail and stat paragraphs: core/paragraph carries a margin main.css never expected. */
.kdc .kdc-rail p,
.kdc .kdc-stat p,
.kdc .kdc-callout__label,
.kdc .kdc-flow__step,
.kdc .kdc-card__num { margin: 0; }

.kdc .kdc-rail__num {
	font-size: 40px;
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--kd-teal-700);
}

/* Stat as a group of three paragraphs. */
.kdc .kdc-stat.wp-block-group { display: flex; flex-direction: column; gap: var(--space-2); }
.kdc p.kdc-stat__value {
	font-family: var(--font-mono);
	font-size: var(--type-metric);
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--text-data);
	font-variant-numeric: tabular-nums;
}
.kdc p.kdc-stat__label { font-size: var(--type-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--type-eyebrow-ls); color: var(--text-muted); }
.kdc p.kdc-stat__note { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-muted); }
.kdc-band p.kdc-stat__value { color: var(--kd-teal-300); }
.kdc-band p.kdc-stat__label { color: var(--kd-slate-300); }
.kdc-band p.kdc-stat__note { color: var(--kd-slate-400); }

/* Proof / callout stat grids: even columns, no flex-basis surprises. */
.kdc .kdc-band > .kdc-container > .wp-block-columns,
.kdc .kdc-callout > .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-12);
}

.kdc .kdc-band > .kdc-container > .wp-block-columns > .wp-block-column,
.kdc .kdc-callout > .wp-block-columns > .wp-block-column { flex-basis: auto !important; }

/* Service cards: a column IS the card, three across, even heights. */
.kdc .kdc-service-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--gutter);
	margin-top: var(--space-12);
}

.kdc .kdc-service-grid > .wp-block-column.kdc-card { flex-basis: auto !important; }
.kdc .kdc-card h3 { margin-top: 0; margin-bottom: var(--space-3); }
.kdc .kdc-card h3 a { color: inherit; text-decoration: none; }
.kdc .kdc-card h3 a:hover { color: var(--text-link-hover); }
.kdc .kdc-card .kdc-icon-tile { margin-bottom: var(--space-4); }
.kdc p.kdc-card__num { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: 0.08em; color: var(--kd-slate-300); margin-bottom: var(--space-2); }

/* Flow: chevrons are CSS, so the pattern carries no inline SVG. */
.kdc .kdc-flow.wp-block-group { gap: var(--space-2); }
.kdc .kdc-flow__step + .kdc-flow__step::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 10px;
	vertical-align: 1px;
	border-right: 2px solid var(--kd-teal-400);
	border-bottom: 2px solid var(--kd-teal-400);
	transform: rotate(-45deg);
}

/* Hero strip as a flex group of paragraphs. */
.kdc .kdc-hero__strip.wp-block-group { gap: var(--space-3) var(--space-10); }
.kdc .kdc-hero__strip p { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.kdc-hero--media .kdc-hero__strip p { color: rgba(255, 255, 255, .72); }
.kdc-hero--media .kdc-hero__strip { border-top-color: rgba(255, 255, 255, .18); }

/* Astra's base stylesheet carries `body .wp-block-cover:not(.has-text-color
   .has-link-color) p { color: var(--ast-global-color-3) }` — (0,3,2)
   specificity, higher than any of the hero-paragraph rules above, so it was
   winning regardless of load order and forcing the hero copy (lead line,
   eyebrow, discipline strip) into the site's default charcoal body-text
   colour on top of the dark photo instead of white. Out-specificity it
   directly rather than relying on source order. */
body.kdc-has-hero .kdc-hero--media.wp-block-cover .kdc-hero__body p {
	color: rgba(255, 255, 255, .88);
}

body.kdc-has-hero .kdc-hero--media.wp-block-cover .kdc-hero__strip p {
	color: rgba(255, 255, 255, .72);
}

body.kdc-has-hero .kdc-hero--media.wp-block-cover .kdc-hero__body .is-style-kdc-mono {
	color: var(--text-data-inverse);
}

/* Top-level content sections: tokens.css zeroes Astra's default block
   padding entirely (its 100px/80px was oversized AND doubled up with each
   group's own constrained-width centering), but zero on both sides just
   makes sibling sections run into each other with no seam — the pullquote,
   the CTA line and the contact heading now abut directly. Put back
   deliberate vertical rhythm on the 8pt grid; horizontal stays 0 since the
   constrained layout already handles that. A block with its own inline
   padding (the CTA band) keeps it — inline style always outranks this. */
.kdc .entry-content > .wp-block-group,
.kdc .entry-content > .wp-block-columns {
	padding-block: var(--space-16);
}

/* core/cover hero: the scrim is ours, not core's dim overlay. */
.kdc .kdc-hero--media.wp-block-cover { align-items: flex-end; padding: 0; }
.kdc .kdc-hero--media.wp-block-cover > .wp-block-cover__background { background: var(--scrim-left) !important; opacity: 1; }
.kdc .kdc-hero--media.wp-block-cover > .wp-block-cover__inner-container {
	width: min(var(--container), 100% - (var(--gutter) * 2));
	margin-inline: auto;
}

/* Eyebrow as a heading block: kill the heading margin main.css didn't allow for. */
.kdc h6.is-style-kdc-eyebrow { margin-top: 0; margin-bottom: var(--space-3); }

/* Separator block style. */
.kdc .is-style-kdc-rule { border: 0; border-top: 1px solid var(--border-hairline); opacity: 1; max-width: none; }