/* ==========================================================================
   Article content & block styles
   Loaded on the front end and in the block editor (add_editor_style).
   .entry-content = front end / .is-root-container = editor canvas
   ========================================================================== */

/* Typography
   ========================================================================== */

:where(.entry-content, .is-root-container) {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.9;
}

:where(.entry-content, .is-root-container) > * {
	margin-block: 0;
}

:where(.entry-content, .is-root-container) > * + * {
	margin-block-start: 1.6em;
}

:where(.entry-content, .is-root-container) :where(h2, h3, h4) {
	scroll-margin-top: 24px;
}

:where(.entry-content, .is-root-container) > :where(h2, h3, h4) {
	margin-block-start: 2.6em;
}

:where(.entry-content, .is-root-container) > :where(h2, h3, h4) + * {
	margin-block-start: 1em;
}

:where(.entry-content, .is-root-container) h2 {
	padding-bottom: 0.45em;
	font-size: var(--wp--preset--font-size--x-large);
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left bottom / 3em 3px no-repeat;
	border-bottom: 3px solid var(--wp--preset--color--border);
}

:where(.entry-content, .is-root-container) h3 {
	padding-left: 0.7em;
	font-size: var(--wp--preset--font-size--large);
	border-left: 4px solid var(--wp--preset--color--accent);
}

:where(.entry-content, .is-root-container) h4 {
	font-size: var(--wp--preset--font-size--medium);
}

:where(.entry-content, .is-root-container) a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:where(.entry-content, .is-root-container) :where(ul, ol):where(:not(.is-style-webtan-steps)) {
	padding-left: 1.5em;
}

:where(.entry-content, .is-root-container) li + li {
	margin-top: 0.4em;
}

:where(.entry-content, .is-root-container) :not(pre) > code {
	padding: 0.15em 0.4em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

/* Core blocks
   ========================================================================== */

.wp-block-quote {
	padding: 1em 1.25em;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--border);
}

.wp-block-quote > * + * {
	margin-top: 0.75em;
}

.wp-block-quote cite {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

.wp-block-pullquote {
	padding: 1.5em 0;
	border-block: 2px solid var(--wp--preset--color--border);
}

pre.wp-block-code,
.wp-block-preformatted {
	padding: 1.1em 1.25em;
	overflow-x: auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	border-radius: 8px;
}

pre.wp-block-code {
	color: #e8eaed;
	background: #1f2328;
	tab-size: 4;
}

pre.wp-block-code code {
	white-space: pre;
}

.wp-block-preformatted {
	white-space: pre-wrap;
	background: var(--wp--preset--color--surface);
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	border-collapse: collapse;
}

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

.wp-block-table table :where(thead th, tbody th) {
	font-weight: 700;
	white-space: nowrap;
	background: var(--wp--preset--color--surface);
}

.wp-block-table table thead {
	border-bottom: 2px solid var(--wp--preset--color--border);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-embed figcaption {
	margin-top: 0.6em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.wp-block-image img {
	border-radius: 6px;
}

.wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-details {
	padding: 0.9em 1.1em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
}

.wp-block-details[open] summary {
	margin-bottom: 0.6em;
}

.wp-block-details + .wp-block-details {
	margin-top: 0.75em;
}

.wp-block-details.webtan-faq summary::before {
	margin-right: 0.4em;
	color: var(--wp--preset--color--accent);
	content: "Q.";
}

.wp-block-button__link {
	padding: 0.8em 1.8em;
	text-decoration: none;
}

/* Block styles: boxes (core/group)
   ========================================================================== */

:where(
	.is-style-webtan-conclusion,
	.is-style-webtan-point,
	.is-style-webtan-caution,
	.is-style-webtan-beginner,
	.is-style-webtan-service
) {
	padding: 1.25em 1.5em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

:where(
	.is-style-webtan-conclusion,
	.is-style-webtan-point,
	.is-style-webtan-caution,
	.is-style-webtan-beginner,
	.is-style-webtan-service
) > * {
	margin-block: 0;
}

:where(
	.is-style-webtan-conclusion,
	.is-style-webtan-point,
	.is-style-webtan-caution,
	.is-style-webtan-beginner,
	.is-style-webtan-service
) > * + * {
	margin-block-start: 0.75em;
}

.webtan-box-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.6;
}

.is-style-webtan-conclusion {
	border: 2px solid var(--wp--preset--color--accent);
}

.is-style-webtan-conclusion > .webtan-box-label {
	display: inline-block;
	padding: 0.15em 0.8em;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-radius: 4px;
}

.is-style-webtan-point {
	background: var(--wp--preset--color--accent-soft);
	border-color: transparent;
}

.is-style-webtan-point > .webtan-box-label {
	color: var(--wp--preset--color--accent);
}

.is-style-webtan-caution {
	background: var(--wp--preset--color--caution-soft);
	border-color: transparent;
	border-left: 4px solid var(--wp--preset--color--caution);
}

.is-style-webtan-caution > .webtan-box-label {
	color: var(--wp--preset--color--caution);
}

.is-style-webtan-beginner {
	background: var(--wp--preset--color--surface);
	border-color: transparent;
}

.is-style-webtan-service {
	padding: 1.5em;
	box-shadow: 0 1px 3px rgb(31 35 40 / 0.06);
}

.is-style-webtan-service > .webtan-box-label {
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.05em;
}

.is-style-webtan-service > :where(h2, h3, h4) {
	padding: 0;
	margin-block-start: 0.25em;
	background: none;
	border: 0;
}

/* Block styles: steps (core/list)
   ========================================================================== */

ol.is-style-webtan-steps {
	padding-left: 0;
	list-style: none;
	counter-reset: webtan-step;
}

ol.is-style-webtan-steps > li {
	position: relative;
	min-height: 2em;
	padding-left: 3em;
	counter-increment: webtan-step;
}

ol.is-style-webtan-steps > li + li {
	margin-top: 1.25em;
}

ol.is-style-webtan-steps > li::before {
	position: absolute;
	top: 0.1em;
	left: 0;
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--base);
	content: counter(webtan-step);
	background: var(--wp--preset--color--accent);
	border-radius: 50%;
}

ol.is-style-webtan-steps > li:not(:last-child)::after {
	position: absolute;
	top: 2.5em;
	bottom: -1.1em;
	left: calc(1em - 1px);
	width: 2px;
	content: "";
	background: var(--wp--preset--color--border);
}