/*
 * Block-built marketing pages (page-zume-blocks.php, inc/zume-blocks.php).
 * Loaded on those pages and in the block editor when editing them. Layout
 * and colour come from Tailwind classes on the blocks; this file covers what
 * core blocks need on top: Group wrappers, default block margins, the Zume
 * button and list styles, and editor-only touches.
 */

/* Classic themes wrap Group contents in .wp-block-group__inner-container.
   Let its children take part in the Group's own flex or grid layout. */
.zume-blocks .wp-block-group__inner-container,
.editor-styles-wrapper .wp-block-group__inner-container {
	display: contents;
}

/* Core block defaults that would fight the Tailwind spacing. Zero
   specificity, so any Tailwind margin class on a block still wins. */
:where(.zume-blocks) :where(.wp-block-image, .wp-block-buttons, .wp-block-button, .wp-block-list, .wp-block-heading, .wp-block-quote, figure, p, h1, h2, h3, h4, ul, ol, blockquote) {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Buttons: the theme's raised Zume buttons (Styles panel of a Button block)
 * ---------------------------------------------------------------------- */

:where(.zume-blocks, .editor-styles-wrapper) .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

:where(.zume-blocks, .editor-styles-wrapper) :is(.is-style-zume-blue, .is-style-zume-purple, .is-style-zume-white) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	border: 1px solid #9ca3af;
	border-radius: 0.25rem;
	padding: 0.25rem 0.75rem;
	font-family: var(--font-safiro-regular), sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2rem;
	text-decoration: none;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	transition: background-color 0.15s ease, transform 0.05s ease;
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-blue .wp-block-button__link {
	/* The 2px darker lip sits below the face, as on the original raised buttons. */
	padding-bottom: calc(0.25rem + 2px);
	background: #3d93fa;
	color: #fff;
	box-shadow: inset 0 -2px 0 #0675f8, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-blue .wp-block-button__link:hover {
	background: #0675f8;
	color: #fff;
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-purple .wp-block-button__link {
	/* The 2px darker lip sits below the face, as on the original raised buttons. */
	padding-bottom: calc(0.25rem + 2px);
	background: #8053f6;
	color: #fff;
	box-shadow: inset 0 -2px 0 #591ef3, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-purple .wp-block-button__link:hover {
	background: #591ef3;
	color: #fff;
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-white .wp-block-button__link {
	padding-top: 0.6875rem;
	padding-bottom: 0.6875rem;
	background: #fff;
	color: #374151;
	box-shadow: inset 0 -2px 0 #e5e7eb, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-white .wp-block-button__link:hover {
	background: #f9fafb;
	color: #374151;
}

.zume-blocks :is(.is-style-zume-blue, .is-style-zume-purple, .is-style-zume-white) .wp-block-button__link:active {
	transform: translateY(2px);
	box-shadow: none;
}

.zume-blocks :is(.is-style-zume-blue, .is-style-zume-purple, .is-style-zume-white) .wp-block-button__link:focus-visible {
	outline: 2px solid #3d93fa;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Lists (Styles panel of a List block)
 * ---------------------------------------------------------------------- */

:where(.zume-blocks, .editor-styles-wrapper) :is(.is-style-zume-ticks, .is-style-zume-checkmarks) {
	list-style: none;
	padding: 0;
}

:where(.zume-blocks, .editor-styles-wrapper) :is(.is-style-zume-ticks, .is-style-zume-checkmarks) > li {
	display: flex;
	gap: 0.5rem;
}

/* A plain ✓ before each item. */
:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-ticks > li::before {
	content: "\2713";
	flex-shrink: 0;
	color: #3d93fa;
}

/* A drawn check mark, as on the plan cards. */
:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-checkmarks > li {
	gap: 0.75rem;
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-checkmarks > li::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.5rem;
	background: #0675f8;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-circle-checks {
	list-style: none;
}

:where(.zume-blocks, .editor-styles-wrapper) .is-style-zume-circle-checks > li::before {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	vertical-align: middle;
	background: #3d93fa;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Details: question with a plus that turns into a minus when open. */
:where(.zume-blocks, .editor-styles-wrapper) .wp-block-details.is-style-zume-plus > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75rem;
	list-style: none;
	cursor: pointer;
}

:where(.zume-blocks, .editor-styles-wrapper) .wp-block-details.is-style-zume-plus > summary::-webkit-details-marker {
	display: none;
}

:where(.zume-blocks, .editor-styles-wrapper) .wp-block-details.is-style-zume-plus > summary::after {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.75rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}

:where(.zume-blocks, .editor-styles-wrapper) .wp-block-details.is-style-zume-plus[open] > summary::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M3.75 12a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M3.75 12a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Block editor canvas
 * ---------------------------------------------------------------------- */

/* Classic-theme editor defaults cap blocks at 840px with auto margins,
   which would also centre items inside flex columns. */
.editor-styles-wrapper :where(.wp-block) {
	max-width: none;
}

/* Same weight as the editor's own centring rule; Tailwind margin classes
   (loaded after this file, same weight) still win. */
.editor-styles-wrapper .wp-block {
	margin: 0;
}

/* The editor's default quote style (left border, indent, italics). */
.editor-styles-wrapper .wp-block-quote {
	border-left: 0;
	padding-left: 0;
	margin: 0;
	font-style: normal;
}

/* Let images size from their block's classes, not the resize handles. */
.editor-styles-wrapper .wp-block-image .components-resizable-box__container {
	display: contents;
}

:where(.editor-styles-wrapper) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
	margin-top: 0;
	margin-bottom: 0;
}

.editor-styles-wrapper {
	color: #111827;
	line-height: 1.5;
}

.zume-edit-preview a,
.zume-edit-preview button {
	pointer-events: none;
}

/* Server-side previews add a plain wrapper div; when the block itself is
   display:contents, let the preview take part in the parent layout too. */
.editor-styles-wrapper .zume-edit-preview.contents > div {
	display: contents;
}

.zume-edit-pricing {
	background: #f9fafb;
	padding-bottom: 2rem;
}

.zume-edit-pricing-hero {
	padding: 4rem 1rem 3rem;
	text-align: center;
	background: radial-gradient(ellipse at top left, #67e8f9, #e0f2fe, #bae6fd);
}

.zume-edit-pricing.is-dark {
	background: #111827;
}

.zume-edit-pricing.is-dark .zume-edit-pricing-hero {
	background: radial-gradient(ellipse at bottom, #3730a3, #111827 70%);
}

.zume-edit-pricing.is-plain {
	background: #fff;
}

.zume-edit-pricing.is-plain .zume-edit-pricing-hero {
	background: #fff;
	padding-top: 2.5rem;
}

.zume-edit-pricing.is-purple {
	background: #f9fafb;
}

.zume-edit-pricing.is-purple .zume-edit-pricing-hero {
	background: radial-gradient(ellipse at top left, #b9a1fa, #8053f6 45%, #410bce);
	color: #fff;
}

.zume-edit-pricing.is-dark .zume-edit-pricing-plans {
	color: #d1d5db;
}

.zume-edit-pricing-hero > * {
	max-width: 56rem;
	margin-left: auto;
	margin-right: auto;
}

.zume-edit-pricing-hero a {
	color: #0675f8;
	font-weight: 500;
}

.zume-edit-cpanel {
	margin-left: 0.5rem;
	font-style: normal;
	font-weight: 700;
	color: #ff6c2c;
}

.zume-edit-pricing-plans {
	max-width: 56rem;
	margin: 1.5rem auto 0;
	padding: 0 1rem;
	font-size: 0.875rem;
	color: #4b5563;
	text-align: center;
}

.zume-edit-plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.zume-edit-plan {
	display: flex;
	flex-direction: column;
	min-width: 9rem;
	padding: 0.75rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #fff;
	color: #111827;
}

.zume-edit-plan.is-featured {
	border-color: #3d93fa;
}

.zume-edit-decor {
	position: static;
}

.zume-edit-decor-label {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 2px 8px;
	border: 1px dashed #9ca3af;
	border-radius: 4px;
	background: #fff;
	font-size: 11px;
	color: #4b5563;
}