/*
 * WordTenance Core blocks: code snippet, code tabs, callout (markup from Core, look from the theme).
 * Loaded only on pages that contain one of these blocks (inc/assets.php) and in the editor.
 * Code colours meet 4.5:1 on the dark surface; line numbers come from CSS, so copying never includes them.
 */
.wt-code {
	--code-bg: var(--wp--preset--color--stage);
	--code-head: var(--wp--preset--color--stage-raised);
	--code-border: #3a4160;
	--code-text: var(--wp--preset--color--stage-contrast);
	--code-muted: var(--wp--preset--color--stage-muted);
	margin: 1.5rem 0;
	overflow: hidden;
	border: 1px solid var(--code-head);
	border-radius: 0.625rem;
	background: var(--code-bg);
	color: var(--code-text);
}
.wt-code__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.375rem 0.5rem 0.375rem 1rem;
	background: var(--code-head);
	color: var(--code-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
}
.wt-code__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wt-code__language {
	padding: 0.05rem 0.45rem;
	border: 1px solid var(--code-border);
	border-radius: 999px;
	color: var(--code-muted);
	font-size: 0.75rem;
}
.wt-code__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.25rem;
	margin-inline-start: auto;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--code-border);
	border-radius: 0.375rem;
	background: transparent;
	color: var(--code-text);
	font: inherit;
	cursor: pointer;
}
.wt-code__copy::before {
	content: "";
	width: 0.95rem;
	height: 0.95rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wt-code__copy:hover,
.wt-code__copy:focus-visible {
	border-color: var(--code-muted);
	background: #252b42;
}
.wt-code__copy:focus-visible,
.wt-code__pre:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}
.wt-code__copy.is-copied {
	border-color: #22c55e;
	color: #86efac;
}
.wt-code__pre {
	margin: 0;
	padding: 1rem 0;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--code-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.875rem;
	line-height: 1.7;
	tab-size: 4;
}
.wt-code__code {
	display: block;
	width: max-content;
	min-width: 100%;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: normal; /* Newlines between lines are for copying; each line keeps its own spacing. */
	counter-reset: wt-line;
}
.wt-code__line {
	display: block;
	min-height: 1.7em;
	padding-inline: 1.25rem;
	white-space: pre;
}
.has-line-numbers .wt-code__line {
	padding-inline-start: 0.75rem;
}
.has-line-numbers .wt-code__line::before {
	content: counter(wt-line);
	counter-increment: wt-line;
	display: inline-block;
	width: 2.25em;
	margin-inline-end: 1.25em;
	color: var(--code-muted);
	text-align: end;
	user-select: none;
}
.wt-code__line.is-marked {
	background: rgb(242 179 61 / 0.12);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
}
.wt-code .tok-keyword { color: #ff9b73; }
.wt-code .tok-string { color: #9fe0a8; }
.wt-code .tok-comment { color: var(--code-muted); font-style: italic; }
.wt-code .tok-number { color: #f2b33d; }
.wt-code .tok-variable { color: #8fb8ff; }
.wt-code .tok-function { color: #ffd38a; }
.wt-code .tok-tag { color: #ff9b73; }
.wt-code .tok-attr { color: #f2b33d; }
.wt-code .tok-punct { color: #d6d1c7; }

/* Editor: plain textarea look. */
.wt-code--editor .wt-code__editor {
	display: block;
	width: 100%;
	padding: 1rem 1.25rem;
	border: 0;
	background: var(--code-bg);
	color: var(--code-text);
	font-size: 0.875rem;
	line-height: 1.7;
}

.wt-code-tabs {
	margin: 1.5rem 0;
}
.wt-code-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--docs-border, var(--wp--preset--color--border));
}
.wt-code-tabs__list[hidden] {
	display: none;
}
.wt-code-tabs__tab {
	min-height: 2.75rem;
	margin-bottom: -1px;
	padding: 0.5rem 0.875rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--docs-muted, var(--wp--preset--color--muted));
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}
.wt-code-tabs__tab:hover {
	color: var(--docs-text, var(--wp--preset--color--ink));
}
.wt-code-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--docs-accent, var(--wp--preset--color--primary));
	color: var(--docs-accent, var(--wp--preset--color--primary));
}
.wt-code-tabs__panel > .wt-code {
	margin: 0;
}
.wt-code-tabs:not(.is-enhanced) .wt-code-tabs__panel + .wt-code-tabs__panel {
	margin-top: 1rem;
}
.wt-code-tabs--editor .wt-code-tabs__hint {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
}

.wt-callout {
	--callout-bg: var(--wp--preset--color--surface);
	--callout-border: var(--wp--preset--color--border);
	--callout-icon: var(--wp--preset--color--ink-soft);
	--callout-title: var(--wp--preset--color--ink);
	--callout-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
	position: relative;
	margin: 1.5rem 0;
	padding: 1rem 1.125rem 1rem 3rem;
	border: 1px solid var(--callout-border);
	border-radius: 0.625rem;
	background: var(--callout-bg);
	color: var(--wp--preset--color--ink);
}
.wt-callout::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: 1.125rem;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--callout-icon);
	-webkit-mask: var(--callout-mask) center / contain no-repeat;
	mask: var(--callout-mask) center / contain no-repeat;
}
.wt-callout--tip {
	--callout-bg: #f0fdf4;
	--callout-border: #bbf7d0;
	--callout-icon: #15803d;
	--callout-title: #14532d;
	--callout-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.wt-callout--warning {
	--callout-bg: #fdf3dc;
	--callout-border: #f2cf86;
	--callout-icon: #8a5a00;
	--callout-title: #5c3c00;
	--callout-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.wt-callout--danger {
	--callout-bg: #fef2f2;
	--callout-border: #fecaca;
	--callout-icon: #b91c1c;
	--callout-title: #7f1d1d;
	--callout-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
.wt-callout__title {
	margin: 0 0 0.25rem;
	color: var(--callout-title);
	font-weight: 700;
}
.wt-callout__body > :first-child {
	margin-top: 0;
}
.wt-callout__body > :last-child {
	margin-bottom: 0;
}
.wt-callout a {
	color: var(--callout-title);
	text-decoration: underline;
}