/* Tip block
   Linen card with a 1px brass frame inset from the edge. The Fraunces title sits on the frame's
   top edge, the linen background breaking the line behind it, with left-aligned text below.
   Phones: tighter side padding so the copy keeps its width. Older tips saved with centred text
   are shown left-aligned too.
--------------------------------------------- */

.block-tip {
	--tip-gap: 12px;          /* linen edge to brass frame, sides and bottom */
	--tip-gap-top: 29px;      /* more above, so the top half of the title has linen behind it */
	--tip-pad-x: 16px;        /* frame to text */
	--tip-frame-top: 14px;    /* frame's top edge to the title's bottom half */
	font-family: var(--wp--preset--font-family--secondary);
	border-radius: var(--wp--custom--border-radius--small);
	overflow: visible;
}
.block-tip.has-background,
.editor-styles-wrapper .block-tip.has-background {
	padding: var(--tip-gap-top) var(--tip-gap) var(--tip-gap);
}
.block-tip__frame {
	position: relative;
	border: 1px solid var(--wp--preset--color--quaternary);
	border-radius: var(--wp--custom--border-radius--small);
	padding: var(--tip-frame-top) var(--tip-pad-x) 18px;
}
.block-tip__inner > *:first-child {
	margin-top: 0;
}
.block-tip__inner > *:last-child {
	margin-bottom: 0;
}
.block-tip__inner > *,
.block-tip__inner > .has-text-align-center { /* older tips were saved centred */
	text-align: left;
}

/* Title on the frame's top edge: pulled up by the frame's top padding plus half its own height,
   on a linen background that breaks the line behind it */
.block-tip .block-tip__title {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: calc(-1 * (var(--tip-frame-top) + 0.575em)) 0 10px -10px; /* 0.575em: half the line height */
	padding: 0 10px;
	border: 0;
	background: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.15;
	color: var(--wp--preset--color--brass-dark); /* the plaque titles (Tip, Common Questions) are Brass Dark */
}
/* Text inside the box reads at the body copy's size and line height */
.block-tip p {
	font-size: inherit;
	line-height: inherit;
	color: var(--wp--preset--color--black);
}
.block-tip p + p {
	margin-top: 0.75em;
}

/* Lists: bullets on the title's left edge, text indented after them */
.block-tip ul,
.block-tip ol {
	margin: 14px 0 0;
	padding: 0 0 0 1.1em;
	list-style-position: outside;
	font-size: inherit;
	line-height: inherit;
	color: var(--wp--preset--color--black);
}
.block-tip li {
	margin: 0 0 6px;
}
.block-tip li::marker {
	color: var(--wp--preset--color--quaternary);
}

/* Tablet and up: 18px gap around the frame (24px above), roomier text padding, bigger type */
@media (min-width: 768px) {
	.block-tip {
		--tip-gap: 18px;
		--tip-gap-top: 27px;
		--tip-pad-x: 28px;
	}
	.block-tip {
		--tip-frame-top: 18px;
	}
	.block-tip__frame {
		padding: var(--tip-frame-top) var(--tip-pad-x) 28px;
	}
	.block-tip .block-tip__title {
		margin-left: -14px;
		padding: 0 14px;
		font-size: 1.5rem;
	}
}