/* ==========================================================================
   PicSuit — post content
   Styles for everything written in the block editor. Every rule starts with ".prose",
   the class of the content wrapper on the site. The block editor loads this same file
   with ".prose" replaced by its own wrapper, so the editor matches the published post.
   Keep every selector starting with ".prose" and avoid ".prose >" (the editor nests blocks deeper).
   ========================================================================== */

.prose {
	--prose-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--prose-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E");
	--prose-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6.5 6.5 0 0 0-3.8 11.8c.5.4.8 1 .8 1.7V17h6v-.5c0-.7.3-1.3.8-1.7A6.5 6.5 0 0 0 12 3z'/%3E%3C/svg%3E");
	--prose-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7h11M9 12h11M9 17h11M4.5 7h.01M4.5 12h.01M4.5 17h.01'/%3E%3C/svg%3E");
	--prose-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	color: var(--ink, #0F1B33);
	font-size: 17.5px;
	line-height: 1.7;
}

/* Text
   -------------------------------------------------------------------------- */

.prose p {
	margin: 0 0 20px;
	color: var(--soft, #3A4560);
}

.prose h2,
.prose h3,
.prose h4 {
	color: var(--ink, #0F1B33);
	font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
	font-weight: 700;
	text-wrap: balance;
}

.prose h2 {
	margin: 44px 0 16px;
	font-size: clamp(26px, 2.3vw, 31px);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.prose h3 {
	margin: 30px 0 10px;
	font-size: 22px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.prose h4 {
	margin: 26px 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.prose a {
	color: var(--ink, #0F1B33);
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var(--soft, #3A4560);
}

.prose strong {
	color: var(--ink, #0F1B33);
	font-weight: 700;
}

/* Lists written as content: the List block, or a plain list from the classic editor.
   Lists that belong to other blocks (social icons, navigation, galleries) are left alone. */
.prose :is(ul, ol):is(.wp-block-list, :not([class])) {
	margin: 0 0 22px;
	padding: 0 0 0 26px;
	color: var(--soft, #3A4560);
}

.prose ul:is(.wp-block-list, :not([class])) {
	list-style: none;
}

.prose ol:is(.wp-block-list, :not([class])) {
	list-style: decimal;
}

.prose :is(ul, ol):is(.wp-block-list, :not([class])) > li {
	margin: 0 0 10px;
}

.prose ul:is(.wp-block-list, :not([class])) > li {
	position: relative;
}

.prose ul:is(.wp-block-list, :not([class])) > li::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ink, #0F1B33);
}

.prose li > :is(ul, ol):is(.wp-block-list, :not([class])) {
	margin: 10px 0 0;
}

/* Text placed on a colour chosen in the editor, on a cover picture or in a dark table header
   takes the colour of that container instead of the default text colours above. */
.prose :is(.has-text-color, .wp-block-cover, thead th) :is(p, li, strong, h2, h3, h4, cite, a) {
	color: inherit;
}

/* Blocks without a PicSuit design of their own keep a regular distance from the text around them. */
.prose :is(.wp-block-cover, .wp-block-embed, .wp-block-video, .wp-block-audio, .wp-block-details, .wp-block-code, .wp-block-preformatted, .wp-block-verse, .wp-block-columns, .wp-block-media-text, .wp-block-file, .wp-block-group) {
	margin-top: 0;
	margin-bottom: 24px;
}

.prose :is(pre, code, kbd) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.prose pre {
	padding: 16px 18px;
	border: 1px solid var(--line, #E6DFD3);
	border-radius: 12px;
	background: var(--white, #FFFFFF);
	color: var(--ink, #0F1B33);
	line-height: 1.55;
	overflow-x: auto;
}

.prose .wp-block-details summary {
	color: var(--ink, #0F1B33);
	font-weight: 600;
	cursor: pointer;
}

.prose hr {
	margin: 36px 0;
	border: 0;
	border-top: 1px solid var(--line, #E6DFD3);
}

/* Small label and note (paragraph styles)
   -------------------------------------------------------------------------- */

.prose .is-style-picsuit-label {
	margin: 30px 0 12px;
	color: var(--muted, #5B6478);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.prose .is-style-picsuit-note,
.prose figcaption {
	margin: 10px 0 0;
	color: var(--muted, #5B6478);
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.5;
}

.prose p.is-style-picsuit-note {
	margin: 0 0 20px;
}

/* Lists with check marks and badges (list styles)
   -------------------------------------------------------------------------- */

.prose ul.is-style-picsuit-checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
}

.prose ul.is-style-picsuit-checks > li {
	margin: 0;
	padding-left: 30px;
	font-size: 16.5px;
	line-height: 1.5;
}

.prose ul.is-style-picsuit-checks > li::before {
	left: 0;
	top: 0.22em;
	width: 18px;
	height: 18px;
	border-radius: 0;
	-webkit-mask: var(--prose-check) center / contain no-repeat;
	mask: var(--prose-check) center / contain no-repeat;
}

.prose ul.is-style-picsuit-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
}

.prose ul.is-style-picsuit-badges > li {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 4px 14px 4px 38px;
	border: 1px solid var(--line, #E6DFD3);
	border-radius: 10px;
	background: var(--white, #FFFFFF);
	color: var(--soft, #3A4560);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
}

.prose ul.is-style-picsuit-badges > li::before {
	left: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 0;
	-webkit-mask: var(--prose-check) center / contain no-repeat;
	mask: var(--prose-check) center / contain no-repeat;
}

/* Answer panel (group style)
   -------------------------------------------------------------------------- */

.prose .is-style-picsuit-panel {
	margin: 32px 0;
	padding: 26px 28px;
	border: 1px solid var(--line, #E6DFD3);
	border-radius: 20px;
	background: var(--white, #FFFFFF);
}

.prose .is-style-picsuit-panel h2,
.prose .is-style-picsuit-panel h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 22px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.prose .is-style-picsuit-panel h2::before,
.prose .is-style-picsuit-panel h3::before {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--tint, #F1ECE3) var(--prose-bolt) center / 20px no-repeat;
}

.prose .is-style-picsuit-panel ul:last-child,
.prose .is-style-picsuit-panel p:last-child,
.prose .is-style-picsuit-tip p:last-child {
	margin-bottom: 0;
}

/* Tip (group style)
   -------------------------------------------------------------------------- */

.prose .is-style-picsuit-tip {
	position: relative;
	margin: 28px 0;
	padding: 20px 22px 20px 58px;
	border-radius: 16px;
	background: var(--tint, #F1ECE3);
}

.prose .is-style-picsuit-tip::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 21px;
	width: 22px;
	height: 22px;
	background: var(--ink, #0F1B33);
	-webkit-mask: var(--prose-bulb) center / contain no-repeat;
	mask: var(--prose-bulb) center / contain no-repeat;
}

.prose .is-style-picsuit-tip p {
	margin: 0 0 8px;
	color: var(--ink, #0F1B33);
	font-size: 16.5px;
	line-height: 1.55;
}

.prose .is-style-picsuit-tip .is-style-picsuit-label {
	margin: 0 0 4px;
	color: var(--soft, #3A4560);
	font-size: 13px;
	font-weight: 700;
}

/* Checklist (group style)
   -------------------------------------------------------------------------- */

.prose .is-style-picsuit-checklist {
	margin: 16px 0 24px;
	border: 1px solid var(--line, #E6DFD3);
	border-radius: 16px;
	background: var(--white, #FFFFFF);
	overflow: hidden;
}

.prose .is-style-picsuit-checklist h3,
.prose .is-style-picsuit-checklist h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 15px 20px;
	border-bottom: 1px solid var(--line, #E6DFD3);
	background: var(--tint, #F1ECE3);
	font-family: var(--font-body, "Instrument Sans", system-ui, sans-serif);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.prose .is-style-picsuit-checklist h3::before,
.prose .is-style-picsuit-checklist h4::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--ink, #0F1B33);
	-webkit-mask: var(--prose-list) center / contain no-repeat;
	mask: var(--prose-list) center / contain no-repeat;
}

.prose .is-style-picsuit-checklist ul {
	display: block;
	margin: 0;
	padding: 0;
}

.prose .is-style-picsuit-checklist ul > li {
	margin: 0;
	padding: 13px 20px 13px 49px;
	border-bottom: 1px solid var(--line, #E6DFD3);
	color: var(--ink, #0F1B33);
	font-size: 15.5px;
	line-height: 1.5;
}

.prose .is-style-picsuit-checklist ul > li::before {
	left: 20px;
	top: 16px;
	width: 17px;
	height: 17px;
	border-radius: 0;
	-webkit-mask: var(--prose-check) center / contain no-repeat;
	mask: var(--prose-check) center / contain no-repeat;
}

.prose .is-style-picsuit-checklist p {
	margin: 0;
	padding: 4px 20px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.prose .is-style-picsuit-checklist p a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.prose .is-style-picsuit-checklist p a::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--prose-arrow) center / contain no-repeat;
	mask: var(--prose-arrow) center / contain no-repeat;
}

/* Table
   -------------------------------------------------------------------------- */

.prose .wp-block-table {
	margin: 8px 0 24px;
	overflow-x: auto;
}

.prose .wp-block-table table {
	width: 100%;
	min-width: 520px;
	border: 1px solid var(--line, #E6DFD3);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15.5px;
	line-height: 1.45;
}

.prose .wp-block-table th,
.prose .wp-block-table td {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--line, #E6DFD3);
	color: var(--soft, #3A4560);
	text-align: left;
	vertical-align: top;
	word-break: normal;
}

.prose .wp-block-table thead {
	border: 0;
}

/* Column alignment chosen in the editor. */
.prose .wp-block-table .has-text-align-center {
	text-align: center;
}

.prose .wp-block-table .has-text-align-right {
	text-align: right;
}

.prose .wp-block-table thead th {
	border-top: 0;
	background: var(--ink, #0F1B33);
	color: var(--paper, #FAF7F2);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.prose .wp-block-table tbody td:first-child {
	color: var(--ink, #0F1B33);
	font-weight: 600;
}

.prose .wp-block-table tbody tr {
	background: var(--white, #FFFFFF);
}

.prose .wp-block-table tbody tr:nth-child(even) {
	background: #FDFBF8;
}

.prose .wp-block-table tbody tr:first-child td {
	border-top: 0;
}

.prose .wp-block-table thead + tbody tr:first-child td {
	border-top: 1px solid var(--line, #E6DFD3);
}

/* Quotes
   -------------------------------------------------------------------------- */

.prose .wp-block-pullquote,
.prose .wp-block-quote {
	margin: 36px 0;
	padding: 26px 0;
	border: 0;
	border-top: 1px solid var(--line, #E6DFD3);
	border-bottom: 1px solid var(--line, #E6DFD3);
	text-align: left;
}

.prose :is(.wp-block-pullquote, .wp-block-quote).has-text-align-center {
	text-align: center;
}

.prose :is(.wp-block-pullquote, .wp-block-quote).has-text-align-right {
	text-align: right;
}

.prose .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.prose .wp-block-pullquote p,
.prose .wp-block-quote p {
	margin: 0;
	color: var(--ink, #0F1B33);
	font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: clamp(22px, 2.1vw, 27px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
	text-wrap: balance;
}

.prose .wp-block-quote p {
	font-size: 21px;
}

.prose .wp-block-quote p + p {
	margin-top: 12px;
}

.prose .wp-block-pullquote cite,
.prose .wp-block-quote cite {
	display: block;
	margin-top: 12px;
	color: var(--muted, #5B6478);
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Pictures
   -------------------------------------------------------------------------- */

.prose .wp-block-image {
	margin: 0 0 20px;
}

.prose .wp-block-image img {
	height: auto;
	border-radius: 14px;
}

.prose .wp-block-gallery {
	margin: 0 0 20px;
}

.prose .wp-block-gallery.is-style-picsuit-examples {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}

.prose .wp-block-gallery.is-style-picsuit-examples .wp-block-image {
	width: auto !important;
	margin: 0 !important;
}

.prose .wp-block-gallery.is-style-picsuit-examples .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	object-fit: cover;
}

.prose .wp-block-gallery.is-style-picsuit-examples figcaption {
	display: none;
}

/* Buttons
   -------------------------------------------------------------------------- */

.prose .wp-block-buttons {
	margin: 26px 0;
}

.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: var(--accent, #FFB224);
	color: var(--accent-ink, #0F1B33);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.prose .wp-block-button__link:hover {
	color: var(--accent-ink, #0F1B33);
	filter: brightness(0.93);
}

.prose .is-style-outline .wp-block-button__link {
	min-height: 48px;
	padding: 0 20px;
	border: 1.5px solid var(--line-strong, #CFC7B8);
	background: transparent;
	color: var(--ink, #0F1B33);
	font-size: 16px;
	font-weight: 600;
}

.prose .is-style-outline .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	background: currentColor;
	-webkit-mask: var(--prose-arrow) center / contain no-repeat;
	mask: var(--prose-arrow) center / contain no-repeat;
}

.prose .is-style-outline .wp-block-button__link:hover {
	border-color: var(--ink, #0F1B33);
	color: var(--ink, #0F1B33);
	filter: none;
}

/* Call to action (PicSuit block)
   -------------------------------------------------------------------------- */

.prose .post-cta {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin: 36px 0;
	padding: 26px 28px;
	border-radius: 20px;
	background: var(--ink, #0F1B33);
	color: var(--paper, #FAF7F2);
}

.prose .post-cta__body {
	flex: 1 1 280px;
	min-width: 0;
}

.prose .post-cta .post-cta__title {
	margin: 0 0 6px;
	color: var(--paper, #FAF7F2);
	font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.prose .post-cta .post-cta__text {
	margin: 0;
	color: var(--on-dark-muted, #C3CBDB);
	font-size: 16px;
	line-height: 1.5;
}

.prose .post-cta .post-cta__btn {
	box-sizing: border-box;
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 8px 24px;
	border-radius: 12px;
	background: var(--accent, #FFB224);
	color: var(--accent-ink, #0F1B33);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.prose .post-cta textarea {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	resize: none;
}

.prose .post-cta textarea::placeholder {
	color: var(--on-dark-muted, #C3CBDB);
	opacity: 0.7;
}

@media (max-width: 560px) {
	.prose .wp-block-gallery.is-style-picsuit-examples {
		gap: 8px;
	}

	.prose .is-style-picsuit-panel {
		padding: 22px 20px;
	}
}