/*
 * KUMITATE Caption Box.
 *
 * Colours: the main colour is the theme's accent (contrast when there is no
 * accent). The three colour sets are made from it by default; a theme can set
 * its own with --siteframe-tools-capbox-1 to -3 (line and caption) and
 * --siteframe-tools-capbox-1-bg to -3-bg (inside), for example in a child
 * theme's style.css: :root { --siteframe-tools-capbox-1: #b45309; }
 */
.siteframe-tools-capbox {
	--siteframe-tools-capbox-main: var(--wp--preset--color--accent, var(--wp--preset--color--contrast, #2e2e2e));
	--siteframe-tools-capbox-base: var(--wp--preset--color--base, #fff);
	--siteframe-tools-capbox-text: var(--wp--preset--color--contrast, #2e2e2e);
	--siteframe-tools-capbox-on: var(--wp--preset--color--on-accent, #fff);
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-0, var(--siteframe-tools-capbox-main));
	--siteframe-tools-capbox-set-bg: var(--siteframe-tools-capbox-0-bg);
	--siteframe-tools-capbox-bg: var(--siteframe-tools-capbox-set-bg, color-mix(in srgb, var(--siteframe-tools-capbox-color) 7%, var(--siteframe-tools-capbox-base)));
	position: relative;
	box-sizing: border-box;
}
.siteframe-tools-capbox[data-colset="1"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-1, color-mix(in srgb, var(--siteframe-tools-capbox-main) 65%, var(--siteframe-tools-capbox-text)));
	--siteframe-tools-capbox-set-bg: var(--siteframe-tools-capbox-1-bg);
}
.siteframe-tools-capbox[data-colset="2"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-2, color-mix(in srgb, var(--siteframe-tools-capbox-main) 25%, var(--siteframe-tools-capbox-text)));
	--siteframe-tools-capbox-set-bg: var(--siteframe-tools-capbox-2-bg);
}
.siteframe-tools-capbox[data-colset="3"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-3, color-mix(in srgb, var(--siteframe-tools-capbox-main) 82%, var(--siteframe-tools-capbox-base)));
	--siteframe-tools-capbox-set-bg: var(--siteframe-tools-capbox-3-bg);
}
.siteframe-tools-capbox *,
.siteframe-tools-capbox *::before,
.siteframe-tools-capbox *::after {
	box-sizing: inherit;
}
.siteframe-tools-capbox__head {
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.siteframe-tools-capbox .siteframe-tools-capbox__caption {
	margin: 0;
	padding: 0.35em 1em;
	border-radius: 4px 4px 0 0;
	background: var(--siteframe-tools-capbox-color);
	color: var(--siteframe-tools-capbox-on);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.siteframe-tools-capbox__body {
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--siteframe-tools-capbox-color);
	background: var(--siteframe-tools-capbox-bg);
}
.siteframe-tools-capbox__body > :first-child {
	margin-top: 0;
}
.siteframe-tools-capbox__body > :last-child {
	margin-bottom: 0;
}

/* Small caption: a smaller label. */
.siteframe-tools-capbox.is-style-small_ttl .siteframe-tools-capbox__caption {
	padding: 0.2em 0.8em;
	font-size: 0.8rem;
}

/* Caption on the border: the caption sits on the top line. */
.siteframe-tools-capbox.is-style-onborder_ttl,
.siteframe-tools-capbox.is-style-onborder_ttl2 {
	margin-top: calc(0.8em + var(--wp--style--block-gap, 1.5rem));
}
.siteframe-tools-capbox.is-style-onborder_ttl .siteframe-tools-capbox__head,
.siteframe-tools-capbox.is-style-onborder_ttl2 .siteframe-tools-capbox__head {
	position: absolute;
	top: 0;
	left: 1rem;
	max-width: calc(100% - 2rem);
	transform: translateY(-50%);
}
.siteframe-tools-capbox.is-style-onborder_ttl .siteframe-tools-capbox__caption {
	padding: 0 0.5em;
	border-radius: 0;
	background: var(--siteframe-tools-capbox-base);
	color: var(--siteframe-tools-capbox-color);
}
.siteframe-tools-capbox.is-style-onborder_ttl .siteframe-tools-capbox__body,
.siteframe-tools-capbox.is-style-onborder_ttl2 .siteframe-tools-capbox__body {
	padding-top: 1.75rem;
	border-width: 2px;
	border-radius: 4px;
	background: none;
}
.siteframe-tools-capbox.is-style-onborder_ttl2 .siteframe-tools-capbox__caption {
	padding: 0.2em 1.1em;
	border-radius: 999px;
}

/* Caption inside: caption and text share one frame. */
.siteframe-tools-capbox.is-style-inner {
	border: 1px solid var(--siteframe-tools-capbox-color);
	border-radius: 4px;
	background: var(--siteframe-tools-capbox-bg);
}
.siteframe-tools-capbox.is-style-inner .siteframe-tools-capbox__head {
	margin: 0 clamp(1rem, 3vw, 1.5rem);
	padding: 0.9rem 0 0.5rem;
	border-bottom: 1px dashed var(--siteframe-tools-capbox-color);
}
.siteframe-tools-capbox.is-style-inner .siteframe-tools-capbox__caption,
.siteframe-tools-capbox.is-style-shadow .siteframe-tools-capbox__caption,
.siteframe-tools-capbox.is-style-intext .siteframe-tools-capbox__caption {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--siteframe-tools-capbox-color);
	font-size: 1.05rem;
}
.siteframe-tools-capbox.is-style-inner .siteframe-tools-capbox__body,
.siteframe-tools-capbox.is-style-shadow .siteframe-tools-capbox__body,
.siteframe-tools-capbox.is-style-intext .siteframe-tools-capbox__body {
	border: 0;
	background: none;
}

/* Raised: a shadow and a line of the colour on top. */
.siteframe-tools-capbox.is-style-shadow {
	border-top: 3px solid var(--siteframe-tools-capbox-color);
	border-radius: 2px;
	background: var(--siteframe-tools-capbox-base);
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 6px 18px rgb(0 0 0 / 0.1);
}
.siteframe-tools-capbox.is-style-shadow .siteframe-tools-capbox__head,
.siteframe-tools-capbox.is-style-intext .siteframe-tools-capbox__head {
	padding: 1rem clamp(1rem, 3vw, 1.5rem) 0;
}
.siteframe-tools-capbox.is-style-shadow .siteframe-tools-capbox__head + .siteframe-tools-capbox__body,
.siteframe-tools-capbox.is-style-intext .siteframe-tools-capbox__head + .siteframe-tools-capbox__body {
	padding-top: 0.5rem;
}

/* Coloured text: the caption in the colour on a light background. */
.siteframe-tools-capbox.is-style-intext {
	border-radius: 4px;
	background: var(--siteframe-tools-capbox-bg);
}

/*
 * Kinds (0.16.0): information, hint, caution, warning, good and bad example,
 * memo. Each sets the colour; the icon is saved with the block. The colours
 * are made from the theme: hint and information from the main colour, memo
 * from the text colour, and the others mix a fixed hue with the text colour
 * so they sit with the theme (and still read on a dark background). A theme
 * can set its own, for example :root { --siteframe-tools-capbox-warning: #b00020; }
 */
.siteframe-tools-capbox[data-kind] {
	--siteframe-tools-capbox-set-bg: var(--siteframe-tools-capbox-kind-bg);
}
.siteframe-tools-capbox[data-kind="info"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-info, color-mix(in srgb, #1f5fbf 78%, var(--siteframe-tools-capbox-text)));
}
.siteframe-tools-capbox[data-kind="hint"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-hint, var(--siteframe-tools-capbox-main));
}
.siteframe-tools-capbox[data-kind="caution"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-caution, color-mix(in srgb, #b45f06 85%, var(--siteframe-tools-capbox-text)));
}
.siteframe-tools-capbox[data-kind="warning"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-warning, color-mix(in srgb, #c4291c 85%, var(--siteframe-tools-capbox-text)));
}
.siteframe-tools-capbox[data-kind="good"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-good, color-mix(in srgb, #2b7a3d 85%, var(--siteframe-tools-capbox-text)));
}
.siteframe-tools-capbox[data-kind="bad"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-bad, color-mix(in srgb, #c4291c 85%, var(--siteframe-tools-capbox-text)));
}
.siteframe-tools-capbox[data-kind="memo"] {
	--siteframe-tools-capbox-color: var(--siteframe-tools-capbox-memo, color-mix(in srgb, var(--siteframe-tools-capbox-text) 62%, var(--siteframe-tools-capbox-base)));
}

/* The icon beside the caption, in the caption's colour. */
.siteframe-tools-capbox__icon {
	display: inline-flex;
	flex: none;
	font-size: 1.3rem;
	line-height: 1;
}
.siteframe-tools-capbox__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}
.siteframe-tools-capbox--has-icon .siteframe-tools-capbox__head {
	color: var(--siteframe-tools-capbox-color);
}
/* Styles whose caption is a coloured tab: the tab takes in the icon. */
.siteframe-tools-capbox--has-icon:not(.is-style-onborder_ttl):not(.is-style-inner):not(.is-style-shadow):not(.is-style-intext) .siteframe-tools-capbox__head {
	width: fit-content;
	max-width: 100%;
	padding: 0.35em 1em;
	border-radius: 4px 4px 0 0;
	background: var(--siteframe-tools-capbox-color);
	color: var(--siteframe-tools-capbox-on);
	font-size: 0.95rem;
	line-height: 1.5;
}
.siteframe-tools-capbox--has-icon:not(.is-style-onborder_ttl):not(.is-style-inner):not(.is-style-shadow):not(.is-style-intext) .siteframe-tools-capbox__caption {
	padding: 0;
	border-radius: 0;
	background: none;
}
.siteframe-tools-capbox--has-icon:not(.is-style-onborder_ttl):not(.is-style-inner):not(.is-style-shadow):not(.is-style-intext) .siteframe-tools-capbox__icon {
	font-size: 1.15em;
}
.siteframe-tools-capbox--has-icon.is-style-small_ttl .siteframe-tools-capbox__head {
	padding: 0.2em 0.8em;
	font-size: 0.8rem;
}
.siteframe-tools-capbox--has-icon.is-style-onborder_ttl2 .siteframe-tools-capbox__head {
	padding: 0.2em 1.1em;
	border-radius: 999px;
}
.siteframe-tools-capbox--has-icon.is-style-onborder_ttl .siteframe-tools-capbox__head {
	padding: 0 0.5em;
	background: var(--siteframe-tools-capbox-base);
}
.siteframe-tools-capbox--has-icon.is-style-onborder_ttl .siteframe-tools-capbox__caption {
	padding: 0;
}