/**
 * Shared design tokens for Deline blocks. Loaded on the front end and inside
 * the block editor (enqueue_block_assets), so every block can rely on them.
 *
 * Use these in new blocks rather than hard-coding widths.
 */

:root {
	/* Content width. Full-width blocks keep their background edge to edge and
	   hold their content to this width. */
	--dlb-max-width: 1440px;

	/* Side padding that keeps content off the screen edges on small screens. */
	--dlb-gutter: clamp(16px, 4vw, 48px);

	/* Width of the content box: the max width, or the screen minus gutters. */
	--dlb-content-width: min(100% - 2 * var(--dlb-gutter), var(--dlb-max-width));

	/* Brand colors. */
	--dlb-blue: #0076a8;
	--dlb-green: #6cc24a;
	--dlb-accent: var(--dlb-green);
}

/* "Accent" text format (Deline blocks' rich text toolbar). */
.dlb-accent {
	color: var(--dlb-accent);
}

/* ---------------------------------------------------------------------------
   Shared section primitives for Deline blocks. A block's section uses
   .dlb-section, its content .dlb-inner, and its header .dlb-heading/.dlb-intro.
   --------------------------------------------------------------------------- */

.dlb-section {
	box-sizing: border-box;
	margin: 0;
	padding: clamp(48px, 7vw, 96px) 0;
	color: #333;
}

.dlb-section *,
.dlb-section *::before,
.dlb-section *::after {
	box-sizing: border-box;
}

/* Full width outside the editor, even inside the legacy page container. */
.dlb-section.alignfull:not(.block-editor-block-list__block) {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.dlb-inner {
	width: var(--dlb-content-width, min(100% - 32px, 1440px));
	margin: 0 auto;
}

.dlb-section .dlb-heading {
	margin: 0;
	padding: 0;
	color: var(--dlb-heading-color, #1a1a1a);
	font-family: inherit;
	font-size: clamp(26px, 1.2rem + 1.6vw, 40px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.dlb-section .dlb-intro {
	margin: 1rem 0 0;
	color: #333;
	font-size: clamp(15px, .8rem + .3vw, 17px);
	line-height: 1.5;
}

.dlb-section .dlb-header {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.dlb-section .dlb-header.is-center {
	text-align: center;
}

.dlb-section .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}