/*
 * CompanionAxis theme: the glue between WordPress and the design system (site.css, the React site's global.css).
 *  1. The theme.json presets follow the design tokens, so they switch with dark mode like everything else.
 *  2. Layout: CompanionAxis blocks print their own `.w` wrappers (full width, as on the React site); core blocks
 *     dropped onto a page get the same reading width and gutter.
 *  3. Core blocks styled like the site's own type and buttons (block styles primary / ghost / dark, lede, eyebrow…).
 */

/* 1. Presets → tokens (dark mode redefines the tokens; the presets follow). */
body {
	--wp--preset--color--primary: var(--primary);
	--wp--preset--color--primary-fill: var(--primary-fill);
	--wp--preset--color--primary-dark: var(--primary-dark);
	--wp--preset--color--primary-ink: var(--primary-ink);
	--wp--preset--color--primary-soft: var(--primary-soft);
	--wp--preset--color--primary-wash: var(--primary-wash);
	--wp--preset--color--ink: var(--ink);
	--wp--preset--color--ink-2: var(--ink-2);
	--wp--preset--color--muted: var(--muted);
	--wp--preset--color--muted-2: var(--muted-2);
	--wp--preset--color--line: var(--line);
	--wp--preset--color--line-2: var(--line-2);
	--wp--preset--color--surface: var(--surface);
	--wp--preset--color--surface-2: var(--surface-2);
	--wp--preset--color--page: var(--page);
	--wp--preset--color--card: var(--card);
	--wp--preset--color--dk: var(--dk);
	--wp--preset--color--on-dark: var(--on-dark);
	--wp--preset--color--on-dark-muted: var(--on-dark-muted);
	--wp--preset--color--ok-bg: var(--ok-bg);
	--wp--preset--color--ok-fg: var(--ok-fg);
	--wp--preset--color--warn-bg: var(--warn-bg);
	--wp--preset--color--warn-fg: var(--warn-fg);
	--wp--preset--gradient--coral-wash: linear-gradient(180deg, var(--primary-wash), var(--card) 70%);
	--wp--preset--shadow--panel: var(--shadow-panel);
	--wp--preset--shadow--mock: var(--shadow-mock);
}

/* 2. Layout ------------------------------------------------------------------------------------------------- */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
main.ca-main { display: block; margin: 0; }

/* The page body (post content) is a flow: CompanionAxis sections sit edge to edge with their own `.w` wrappers and
   section spacing (.sec), exactly as on the React site. */
.ca-content > [class*="wp-block-ca-"],
.is-root-container > [class*="wp-block-ca-"] { margin-block: 0; }
/* Full width only for sections that wrap their own `.w`; a block that is itself the `.w` keeps the site width (1200px). */
.ca-content > [class*="wp-block-ca-"]:not(.w),
.is-root-container > [class*="wp-block-ca-"]:not(.w) { max-width: none; }

/* Core blocks placed directly on a page (landing pages, extra content) get the reading width and the site gutter. */
.ca-content > :where(:not([class*="wp-block-ca-"]):not(.alignfull):not(.alignwide):not(script):not(style)) {
	max-width: calc(var(--wp--style--global--content-size, 720px) + 2 * var(--gutter));
	margin-inline: auto; padding-inline: var(--gutter);
}
.ca-content > .alignwide { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ca-content > .alignfull { max-width: none; margin-inline: 0; }
.ca-content > :where(:not([class*="wp-block-ca-"])):first-child { margin-block-start: 56px; }
.ca-content > :where(:not([class*="wp-block-ca-"])):last-child { margin-block-end: 88px; }
.ca-content > [class*="wp-block-ca-"] + :where(:not([class*="wp-block-ca-"])) { margin-block-start: 56px; }
/* Spacing between core blocks (the theme leaves WordPress's block gap off so the React layouts keep their own). */
.ca-content > :where(:not([class*="wp-block-ca-"])) + :where(:not([class*="wp-block-ca-"])) { margin-block-start: 24px; }
:where(.ca-content, .is-root-container) :where(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container, .wp-block-media-text__content) > * + * { margin-block-start: 1em; }
/* A full-width core group or cover used as a section: inner content on the site's grid. */
.ca-content > .alignfull.wp-block-group.has-background,
.ca-content > .alignfull.wp-block-cover { padding-block: clamp(48px, 8vw, 88px); }
.ca-content > .alignfull.wp-block-group > * { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.ca-content > .alignfull.wp-block-group > .alignfull { max-width: none; padding-inline: 0; }

/* Article bodies (blog, help, legal): the same core blocks, in the site's prose style. */
.prose.wp-block-post-content > * + * { margin-block-start: 14px; }
.prose-md h2.wp-block-heading { font-size: 26px; letter-spacing: -.01em; margin: 40px 0 12px; }
.prose-md h3.wp-block-heading { font-size: 20px; font-weight: 600; margin: 28px 0 8px; }
.prose-md ul, .prose-md ol { padding-left: 22px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.prose-md figure { margin: 24px 0; }
.prose-md figure img { border-radius: var(--r-media-sm); }
.prose-md figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Template bits ------------------------------------------------------------------------------------------- */
.ca-title.wp-block-post-title { margin: 0; }
.ca-title-36.wp-block-post-title { font-size: 36px; margin-top: 12px; }
@media (max-width: 860px) { .ca-title-36.wp-block-post-title { font-size: 30px; } }
.ca-guide-grid { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.ca-cover-wide { margin-top: 32px; }
.wp-block-query-pagination { margin-top: 48px; gap: 12px; font-size: 14px; }
.wp-block-query-pagination a:hover { color: var(--primary-ink); }
.ca-list.wp-block-post-template { list-style: none; padding: 0; margin: 32px 0 0; }
.ca-list .wp-block-post-title { font-size: 18px; font-weight: 500; line-height: 1.3; margin-top: 6px; }
.ca-list .wp-block-post-excerpt__excerpt { font-size: 14px; color: var(--muted); margin-top: 8px; }
.ca-list .wp-block-post-date { font-size: 13px; color: var(--muted); }
.ca-list .wp-block-post-excerpt__more-link { font-size: 14px; font-weight: 500; color: var(--primary-ink); }
.ca-search-form .wp-block-search__inside-wrapper { border: 1px solid var(--line-2); border-radius: 10px; padding: 4px; background: var(--card); max-width: 560px; }
.ca-search-form .wp-block-search__input { border: 0; background: transparent; color: var(--ink); font: 400 15px var(--font); padding: 8px 10px; }
.ca-search-form .wp-block-search__button { margin: 0; }

/* 3. Core blocks in the site's style ------------------------------------------------------------------------ */
:where(.ca-content, .is-root-container, .ca-free) h1.wp-block-heading { font-size: 46px; line-height: 1.08; font-weight: 600; letter-spacing: -.03em; }
:where(.ca-content, .is-root-container, .ca-free) h2.wp-block-heading { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
:where(.ca-content, .is-root-container, .ca-free) h3.wp-block-heading { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
:where(.ca-content, .is-root-container, .ca-free) h4.wp-block-heading { font-size: 18px; font-weight: 600; }
@media (max-width: 860px) {
	:where(.ca-content, .is-root-container, .ca-free) h1.wp-block-heading { font-size: 34px; }
	:where(.ca-content, .is-root-container, .ca-free) h2.wp-block-heading { font-size: 26px; }
}
:where(.ca-content, .is-root-container, .ca-free) > p,
:where(.ca-content, .is-root-container, .ca-free) :where(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container) > p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
:where(.ca-content, .is-root-container, .ca-free) :where(p, li) > a:where(:not([class])) { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
:where(.ca-content, .is-root-container, .ca-free) > :where(ul, ol).wp-block-list { color: var(--ink-2); font-size: 16px; line-height: 1.6; padding-left: calc(var(--gutter) + 20px); }
.wp-block-image img { border-radius: var(--r-media-sm, 20px); }
.wp-block-image.is-style-plain img { border-radius: 0; }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); opacity: 1; }
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: auto; }
.wp-block-quote { font-size: 19px; color: var(--ink); }
.wp-block-quote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; color: var(--muted); }
.wp-block-pullquote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wp-block-table table { border-collapse: collapse; font-size: 15px; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-cover { border-radius: var(--r-media, 28px); overflow: hidden; }
.wp-block-cover.alignfull { border-radius: 0; }
.wp-block-details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.wp-block-details summary { cursor: pointer; font-size: 16px; font-weight: 600; }
.wp-block-code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: 14px; }

/* Paragraph styles: lede, eyebrow, small */
p.is-style-lede { font-size: 17px; color: var(--muted); max-width: 560px; }
p.is-style-eyebrow { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-ink); font-weight: 600; }
p.is-style-small { font-size: 14px; color: var(--muted); }
/* Heading styles: the site's display and muted continuation */
.wp-block-heading.is-style-display { font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; max-width: 780px; }
@media (max-width: 860px) { .wp-block-heading.is-style-display { font-size: 40px; } }
.wp-block-heading.is-style-muted { color: var(--muted); }
/* List style: the site's check list */
ul.wp-block-list.is-style-checks { list-style: none; padding-left: 0; display: grid; gap: 10px; font-size: 15px; }
ul.wp-block-list.is-style-checks li { display: flex; gap: 10px; align-items: flex-start; }
ul.wp-block-list.is-style-checks li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23c81345' stroke-width='1.8'/%3E%3C/svg%3E") center/16px no-repeat; }
:where(.ca-content, .is-root-container) > ul.wp-block-list.is-style-checks { padding-left: var(--gutter); }
/* Group styles: card, dark panel, tinted surface */
.wp-block-group.is-style-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); }
.wp-block-group.is-style-dark { background: var(--dk); color: var(--on-dark); border-radius: var(--radius-lg); padding: 40px; }
.wp-block-group.is-style-dark p { color: var(--on-dark-muted); }
.wp-block-group.is-style-surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media, 28px); padding: 48px; }
@media (max-width: 860px) { .wp-block-group.is-style-dark, .wp-block-group.is-style-surface { padding: 28px; } }
.wp-block-columns { gap: 48px; }
@media (max-width: 860px) { .wp-block-columns { gap: 24px; } }

/* Buttons: core buttons as the site's .btn-primary / .btn-ghost / .btn-dark */
.wp-block-buttons { gap: 12px; }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 18px;
	font: 600 14px var(--font); line-height: 1.5; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.wp-block-button:where(:not(.is-style-ghost):not(.is-style-dark):not(.is-style-outline)) .wp-block-button__link:where(:not(.has-background)) { background: var(--primary-fill); color: var(--on-primary); }
.wp-block-button:where(:not(.is-style-ghost):not(.is-style-dark):not(.is-style-outline)) .wp-block-button__link:where(:not(.has-background)):hover { background: var(--primary-dark); color: var(--on-primary); }
.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link { background: var(--card); border-color: var(--line-2); color: var(--ink); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--ink); color: var(--ink); }
.wp-block-button.is-style-dark .wp-block-button__link { background: var(--inv); color: var(--on-inv); }
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: var(--ink-2); color: var(--primary); }
.wp-block-button.is-style-ghost-dark .wp-block-button__link { background: transparent; border-color: var(--dark-line-2); color: var(--on-dark); }
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover { border-color: var(--primary); color: var(--primary); }
.wp-block-button.has-custom-font-size .wp-block-button__link { font-size: inherit; }
.is-style-dark .wp-block-button:not(.is-style-ghost-dark):not(.is-style-ghost) .wp-block-button__link:where(:not(.has-background)) { background: var(--primary-fill); }

/* Landing templates */
.hd-min { border-bottom: 1px solid var(--line); background: var(--page); }
.hd-min .hd-bar { display: flex; }
.ft-min { padding: 28px 0 36px; border-top: 1px solid var(--line); margin-top: 0; }
.ft-min .ft-base { margin-top: 0; padding-top: 0; border-top: 0; }

/* Editor canvas: the site's light defaults where the editor has its own. */
.editor-styles-wrapper { background: var(--page); color: var(--ink); font-family: var(--font); }
.editor-styles-wrapper .ca-block-edit { min-height: 24px; }

/* "Page: wide content": core blocks use the site's full width (1200px) instead of the reading width. */
.ca-wide.ca-content > :where(:not([class*="wp-block-ca-"]):not(.alignfull):not(.alignwide):not(script):not(style)) { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
/* Bordered blocks keep their border on the reading column, not out in the gutter. */
.ca-content > :is(.wp-block-quote, .wp-block-pullquote, .wp-block-table, .wp-block-code, .wp-block-details) {
	max-width: var(--wp--style--global--content-size, 720px); margin-inline: max(var(--gutter), calc((100% - var(--wp--style--global--content-size, 720px)) / 2));
	padding-inline: 20px 0; box-sizing: border-box;
}
.ca-content > :is(.wp-block-table, .wp-block-code, .wp-block-details) { padding-inline: 0; }
.ca-content > .wp-block-code { padding: 16px; }