/* Core blocks inside the former Elementor layout: undo the block defaults so they render like the Elementor widgets.
 * Kept at low specificity where possible, so the Elementor rules in site.css still decide. */

/* Buttons: core/buttons > core/button stands where Elementor had div.elementor-button-wrapper > a.elementor-button. */
.ash .wp-block-buttons {
	display: block;
	margin: 0;
}
.ash .wp-block-buttons > .wp-block-button.ash-button-wrapper {
	display: block;
	margin: 0;
	width: auto;
}
:where(.ash-button-wrapper) > .wp-block-button__link {
	height: auto;
	word-break: normal;
	align-content: normal;
	letter-spacing: normal; /* OceanWP gives .wp-block-button__link .1em; Elementor buttons had none */
	/* Elementor's text sat in an inline-block span, so a single long word ("Tilbakemeldingsverktøy" on a 360 px
	 * phone) ran past the padding instead of breaking. */
	overflow-wrap: normal;
}

/* Quotes: OceanWP styles .wp-block-quote (margin 1.5em auto) differently from a plain blockquote, which is what the
 * Elementor text had. Same margins as OceanWP's "blockquote" rules. */
:where(.ash) .wp-block-quote {
	margin: 20px 40px;
}
@media only screen and (max-width: 480px) {
	:where(.ash) .wp-block-quote {
		margin: 20px 0;
	}
}

/* Accordions: core/details per item. The summary takes the place of Elementor's .elementor-tab-title. Where that
 * was an h3 (accordion group .ash-title-h3) it gets what the h3 had from the theme (OceanWP heading typography:
 * Source Sans Pro 18px, #333); a div title inherits. The plus/minus icon is the summary's ::before, sized and
 * coloured by the accordion rules in site.css. */
.ash-accordion-item > summary {
	display: block;
	list-style: none;
}
.ash-title-h3 .ash-accordion-item > summary {
	font-family: "Source Sans Pro";
	font-size: 18px;
	color: #333;
}
.ash-accordion-item > summary::-webkit-details-marker {
	display: none;
}
.ash-accordion-item > summary::before {
	content: "\f067";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
	float: left;
	text-align: left;
	line-height: 1;
	/* Elementor's icon was an inline-block i in a block span, one pixel taller than the line, so a wrapped title's
	 * second line stayed indented beside it. */
	padding-bottom: 1px;
	-webkit-font-smoothing: antialiased;
}
.ash-accordion-item[open] > summary::before {
	content: "\f068";
}
.ash-accordion-item[open] > .ash-tab-content {
	display: block;
}

/* Info boxes: the whole box was one link; now the title's link covers the box. The image block's figure takes the
 * place of the bare img. */
.ash-infobox {
	position: relative;
}
.ash-infobox .title a,
.ash-infobox .title a:hover {
	color: inherit;
}
.ash-infobox .title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ash-infobox-icon .wp-block-image {
	margin: 0;
}
.ash-infobox-icon .wp-block-image img {
	vertical-align: baseline;
}

/* Icon lists: each item is just its link; the icon is the link's ::before, standing in for Elementor's
 * span.elementor-icon-list-icon > i.fas (size, width and transition from the rules in site.css). The text had its
 * own colour on a span while the icon took the link colour, so the icon gets the theme's link colours (Customizer:
 * #6e98ba, hover #a3be8c) and the text colour stays on the link. */
.ash-icon-list-items .ash-icon-list-item a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	margin-inline-end: 5px;
	flex-shrink: 0;
	color: #6e98ba;
}
.ash-icon-list-items .ash-icon-list-item a:hover::before {
	color: #a3be8c;
}
.ash-icon-fas-fa-arrow-right .ash-icon-list-item a::before {
	content: "\f061";
}

/* Counters: the number is a paragraph; its ::before and ::after are the empty prefix and suffix that centred it. */
.ash-counter .ash-counter-number-wrapper {
	margin: 0;
}
.ash-counter .ash-counter-number-wrapper::before,
.ash-counter .ash-counter-number-wrapper::after {
	content: "";
}

/* Banners: core/image whose link takes the place of Stratum's div.stratum-banner__wrapper (rules in site.css). */
.stratum-banner > .stratum-banner__link {
	display: block;
}

/* Tool cards: each card was one link (a.tool-card); now the title's link covers the card. The card's own look is in
 * the page's style element. The image block's figure and the title paragraph take the place of the bare img and div. */
.tools-wrapper .tool-card {
	position: relative;
}
.tools-wrapper .tool-card .wp-block-image {
	margin: 0;
}
.tools-wrapper .tool-card .wp-block-image img {
	display: block;
}
.tools-wrapper .tool-card .tool-title {
	margin: 0;
}
.tools-wrapper .tool-card .tool-title a,
.tools-wrapper .tool-card .tool-title a:hover {
	color: inherit;
	text-decoration: none;
}
.tools-wrapper .tool-card .tool-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Images: core/image is a figure around the img; Elementor had the img on its own. */
.ash .ash-widget-container > .wp-block-image {
	margin: 0;
}
.ash .ash-widget-container > .wp-block-image > a,
.ash .ash-widget-container > .wp-block-image > img {
	vertical-align: middle;
}