/*
 * Cluedit theme foundations (board #6).
 *
 * Presentation only. Colours, font sizes, radii, shadows and motion
 * come from theme.json (--wp--preset--* / --wp--custom--*).
 * Layout percentages and breakpoints mirror docs/04-design-system.md §4.
 * Custom properties cannot be used inside @media, so the breakpoints
 * repeat --wp--custom--breakpoint--mobile (800px) / --tablet (1100px).
 *
 * Loaded on the front end and, via add_editor_style(), in the editor
 * canvas, where WordPress scopes it to .editor-styles-wrapper.
 */

/* ---------- Layout tokens ---------- */
:root {

	/* Minimum side padding: 40 / 32 / 6vw. */
	--cluedit-gutter: var(--wp--custom--layout--gutter);

	/* Edges of the 1200px content container. */
	--cluedit-free-x: calc(100% - var(--wp--custom--layout--container));
	--cluedit-pad-x: max(var(--cluedit-gutter), calc(var(--cluedit-free-x) / 2));

	/* Header bar: 1440px max, edges at max(5%, centred),
	   never narrower than the content container. */
	--cluedit-gutter-wide: 5%;
	--cluedit-free-wide: calc(100% - var(--wp--custom--layout--header));
	--cluedit-edge-wide: max(var(--cluedit-gutter-wide), calc(var(--cluedit-free-wide) / 2));
	--cluedit-pad-wide: min(var(--cluedit-pad-x), var(--cluedit-edge-wide));

	/* Home and article hero: 1296px max; header edges at <=1440px. */
	--cluedit-hero-extra: calc(var(--wp--custom--layout--hero) - var(--wp--custom--layout--container));
	--cluedit-hero-edge: calc(var(--cluedit-pad-x) - var(--cluedit-hero-extra) / 2);
	--cluedit-pad-hero: max(var(--cluedit-hero-edge), var(--cluedit-pad-wide));

	/* Motion. */
	--cluedit-ease: var(--wp--custom--motion--ease);
	--cluedit-duration: var(--wp--custom--motion--base);
}

@media (max-width: 1100px) {

	:root {
		--cluedit-gutter: var(--wp--custom--layout--gutter-tablet);
	}
}

@media (max-width: 800px) {

	:root {
		--cluedit-gutter: var(--wp--custom--layout--gutter-mobile);
		--cluedit-gutter-wide: var(--wp--custom--layout--gutter-mobile);
	}
}

/* Template parts and sections carry their own spacing. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Opt-in layout helpers: add as "Additional CSS class(es)" on a group. */
.cluedit-shell {
	padding-inline: var(--cluedit-pad-x);
}

.cluedit-shell-wide {
	padding-inline: var(--cluedit-pad-wide);
}

.cluedit-shell-hero {
	padding-inline: var(--cluedit-pad-hero);
}

/* ---------- Typography ---------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

/* ---------- Buttons (core/button) ---------- */
.wp-element-button,
.wp-block-button__link {
	line-height: 1.5;
	transition:
		transform var(--cluedit-duration) var(--cluedit-ease),
		box-shadow var(--cluedit-duration) var(--cluedit-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow:
		0 8px 24px
		color-mix(in srgb, var(--wp--preset--color--navy) 13%, transparent);
}

/* ---------- Icons (inc/icons.php, assets/icons/*.svg) ---------- */
.cluedit-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* Button style "Arrow": the label stays plain editable text; the
   decorative arrow is appended at render time (inc/icons.php). */
.wp-block-button.is-style-cluedit-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Reference .cc-button: 28px gap before an 18px "↗" glyph, 57px box.
	   The 24px icon box has ~7px built-in whitespace, hence 23px / -5px. */
	gap: 23px;
	min-height: 57px;
}

.wp-block-button.is-style-cluedit-arrow .wp-block-button__link .cluedit-icon {
	width: 24px;
	height: 24px;
	margin-block: -3px;
	margin-inline-end: -5px;
	stroke-width: 2;
}

/* Editor canvas (no render-time icon): same arrow as a CSS mask. */
.wp-block-button.is-style-cluedit-arrow
.wp-block-button__link:not(:has(.cluedit-icon))::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	margin-block: -3px;
	margin-inline-end: -5px;
	background-color: currentcolor;
	-webkit-mask: url(../icons/arrow-up-right.svg) center / contain no-repeat;
	mask: url(../icons/arrow-up-right.svg) center / contain no-repeat;
}

/* ---------- Focus ---------- */

/* Reference ring: 2px, 3px offset. Dusk blue passes 3:1 on light
   surfaces; dark areas switch to lilac via .cluedit-on-dark. */
.wp-site-blocks :focus-visible {
	outline: 2px solid var(--wp--preset--color--dusk-blue);
	outline-offset: 3px;
}

.cluedit-on-dark :focus-visible {
	outline-color: var(--wp--preset--color--lilac);
}

/* ---------- Skip link (core injects it for block themes) ---------- */
.skip-link.screen-reader-text:focus {
	top: 10px;
	left: 20px;
	z-index: 100000;
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	outline: 2px solid var(--wp--preset--color--dusk-blue);
	outline-offset: 2px;
}

/* ---------- Salesforce Partner badge (official artwork) ---------- */

/* Sized by height in each component; the ratio reserves the width
   before the file loads (400×117 source). */
.cluedit-partner-badge img {
	width: auto;
	max-width: 100%;
	aspect-ratio: 400 / 117;
}

/* ---------- Screen-reader text helper ---------- */
.cluedit-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Motion ---------- */

/* Reduced motion stops animation and transitions; it never hides
   content or controls. html.cluedit-motion-paused is the hook for the
   footer "Pause motion" control (board #9). */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

html.cluedit-motion-paused {
	scroll-behavior: auto;
}

html.cluedit-motion-paused *,
html.cluedit-motion-paused *::before,
html.cluedit-motion-paused *::after {
	animation: none !important;
	transition: none !important;
}

/* ---------- Full-width section pages (templates/front-page.html) ---------- */

/* Sections carry their own spacing: no flow-layout gaps between them. */
.cluedit-sections,
.cluedit-sections .cluedit-sections__content,
.cluedit-sections .cluedit-sections__content > * {
	margin-block: 0;
}