/*
Theme Name:   Knowledge Commons
Theme URI:    https://knowledgecommons.ai
Description:  Marketing theme for Knowledge Commons. A block child theme — all
              design lives in theme.json and templates/, so it is versioned in
              git rather than trapped in the database. The palette, type scale
              and spacing are generated from packages/design-tokens/tokens.json,
              the same source the SPA and the React marketing site read.
Author:       Knowledge Commons
Version:      0.1.0
Template:     twentytwentyfive
Requires PHP: 8.1
Text Domain:  knowledgecommons
*/

/*
 * Nearly everything belongs in theme.json, not here — it generates CSS custom
 * properties and utility classes the block editor can also see, so the admin
 * preview matches the front end. Reserve this file for the handful of rules
 * the theme.json schema cannot express.
 *
 * Every value below comes from a token via `--wp--custom--*`, which
 * scripts/sync-design-tokens.py writes into theme.json from tokens.json.
 * No hex codes here: a colour typed into this file is one the sync script
 * cannot keep in step with the rest of the platform.
 *
 * Each utility is matched twice, and both selectors are load-bearing.
 * `.kc-eyebrow` is the hand-written form, used by templates and by anyone
 * typing a class into the block editor's Advanced panel. `.is-style-kc-eyebrow`
 * is what `register_block_style()` in functions.php emits when the style is
 * picked from the block sidebar — WordPress prefixes every registered style
 * name with `is-style-`. Defining only the bare class means the sidebar entry
 * appears, gets chosen, and does nothing.
 */

/* Eyebrow labels above section headings.
 *
 * Deliberately NOT the display face. The established treatment (.kc-eyebrow in
 * the React site's src/index.css) sets the eyebrow in the body sans at 12px
 * with 0.06em tracking, so it reads as a label rather than as a small heading
 * competing with the uppercase Lexend Exa above it. */
.kc-eyebrow,
.is-style-kc-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--color--link-hover);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Panels — the bordered cards used for comparison columns, pricing plans and
   call-outs. Surface + hairline + radius, all from tokens. */
.kc-panel,
.is-style-kc-panel {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

/* A panel sitting on one of the tinted bands needs to lift off it rather than
   disappear into it, so it takes the page's own white as its surface. On the
   dark band it does the opposite. */
.has-accent-5-background-color .kc-panel,
.has-accent-5-background-color .is-style-kc-panel {
	background-color: transparent;
	border-color: color-mix(in srgb, var(--wp--custom--color--on-dark) 25%, transparent);
}

/* The dark band (tone: navy in the source copy — pull quotes and the closing
   statement). theme.json can set the background per block, but the text and
   link colours inside it have to be re-stated or they inherit ink-on-navy. */
.has-accent-5-background-color,
.has-accent-5-background-color :where(h1, h2, h3, h4, h5, h6),
.has-accent-5-background-color :where(p, li, cite, figcaption) {
	color: var(--wp--custom--color--on-dark);
}

.has-accent-5-background-color :where(a) {
	color: var(--wp--preset--color--base);
}

/* Section rhythm. Each imported section is a full-width group; the vertical
   padding is what turns them into bands rather than a continuous column of
   text. Fluid, because a value that frames a hero on a desktop eats a fifth of
   a phone screen. */
.wp-block-post-content > .wp-block-group {
	padding-block: var(--wp--preset--spacing--70);
}

/* Consecutive bands of the same tone would otherwise read as one long section,
   so a hairline separates them. Bands of different tones separate themselves. */
.wp-block-post-content > .wp-block-group:not([class*="has-"]) + .wp-block-group:not([class*="has-"]) {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* Measure is handled by the layout, not by CSS.
 *
 * contentSize (720px) is the prose measure, so paragraphs and headings share
 * one left edge automatically. Blocks that genuinely need the full 1120px
 * container — the column grids and the comparison tables — carry align="wide"
 * in the imported markup and expand to wideSize on their own.
 *
 * An earlier version capped paragraph width in CSS instead. That fought
 * WordPress's constrained layout, which centres any child narrower than the
 * container with `margin-left: auto !important`: overriding it left the
 * paragraphs flush against the viewport edge while the headings stayed
 * centred in the column. Letting the layout do its job removes the conflict
 * entirely. */

/* Ledes take the same measure a little tighter, and the secondary text colour
   the React site gives them. */
.wp-block-post-content .has-large-font-size {
	max-width: 46rem;
	color: var(--wp--custom--color--fg-2);
}

/* In-page jumps (#demo, #early-access, #briefing on the contact page) must
   clear the sticky header, or the anchor lands under it. Matches the 88px
   scroll-margin the React site sets on :target. */
:target {
	scroll-margin-top: 88px;
}

/* FAQ accordions. core/details ships almost unstyled; give it the same
   hairline rhythm as the rest of the page and a pointer on the summary. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding-block: var(--wp--preset--spacing--40);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Tables — the platform comparison. Hairlines rather than heavy rules, and a
   tinted header row so the two columns being compared are legible at a glance. */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: var(--wp--preset--spacing--30);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--accent-2);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
}

/* Screenshots and diagrams of the application. A dark-background capture on a
   white page needs the same hairline as everything else to stop it floating. */
.wp-block-image.kc-framed img,
.wp-block-image.is-style-kc-framed img {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: var(--wp--custom--radius--xl);
}

/* Pull quotes carry the display face, since they are doing a heading's job. */
.wp-block-quote.is-style-large p {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: var(--wp--custom--tracking--tight);
	text-wrap: balance;
}

/* Header. Sticky, like the React site's — the 88px :target scroll-margin above
   is sized for it, so the two have to stay in step. */
.kc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(8px);
}

/* The wordmark beside the logo. Display face at body size, matching the
   `kc-h2 text-base` treatment the React header gives it — it is brand chrome,
   not a heading, so it stays small and does not enter the page outline. */
.kc-wordmark a,
.kc-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Nav links are chrome too: body face, muted until hovered. Without this they
   inherit the global link colour and the header reads as a row of eight
   equally-weighted calls to action. */
.kc-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
}

.kc-header .wp-block-navigation a {
	color: var(--wp--custom--color--fg-2);
	text-decoration: none;
}

.kc-header .wp-block-navigation a:hover {
	color: var(--wp--custom--color--link-hover);
}

/* Sign in. Smaller than a page CTA — it is header chrome sitting next to the
   nav, not a call to action competing with "Request a demonstration". */
.kc-header .kc-signin .wp-block-button__link {
	padding: 0.4rem 0.9rem;
	font-size: 0.875rem;
	border-width: 1px;
}

/* The nav collapses to a hamburger below 600px; the sign-in button must not go
   with it, so give it a little room once the two sit side by side. */
.kc-header .kc-signin {
	margin-left: var(--wp--preset--spacing--20);
}