/* P4N block styles. Loaded on the front end and inside the block editor canvas.
   Every rule is scoped to the post body (.p4n-prose) or the editor canvas (.editor-styles-wrapper). */

/* ---- Base rhythm fixes ---- */
:is(.p4n-prose, .editor-styles-wrapper) ul,
:is(.p4n-prose, .editor-styles-wrapper) ol { padding-left: 1.4em; margin: 1.2em 0 0; }
:is(.p4n-prose, .editor-styles-wrapper) li + li { margin-top: .4em; }
:is(.p4n-prose, .editor-styles-wrapper) li > ul,
:is(.p4n-prose, .editor-styles-wrapper) li > ol { margin-top: .4em; }
:is(.p4n-prose, .editor-styles-wrapper) p:empty { display: none; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-separator { border: 0; border-top: 1px solid var(--p4n-line); opacity: 1; width: 100%; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-separator.is-style-wide { width: 100%; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-separator.is-style-dots { border: 0; text-align: center; color: var(--p4n-muted); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-table table { width: 100%; border-collapse: collapse; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-table th,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-table td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--p4n-line); text-align: left; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-table th { font-family: var(--p4n-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p4n-muted); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--p4n-surface) 60%, transparent); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-table.is-style-stripes { border: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-image img { border-radius: var(--p4n-radius); height: auto; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-image figcaption { margin-top: 8px; font-size: 13px; color: var(--p4n-muted); text-align: center; }

/* ---- Buttons block on the theme recipe ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--p4n-btn-h, 40px); padding: 0 18px;
	border: var(--p4n-btn-border, 1px) solid var(--p4n-btn-edge);
	border-radius: var(--p4n-btn-radius, 8px) !important;
	background: var(--p4n-btn-tint) !important;
	color: var(--p4n-accent) !important;
	font-family: var(--p4n-font-sans); font-size: 15px; font-weight: var(--p4n-btn-weight, 600); line-height: 1;
	text-decoration: none; transition: background .15s, border-color .15s;
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-button__link:hover { background: var(--p4n-btn-tint-hover) !important; border-color: var(--p4n-accent); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-button.is-style-p4n-quiet .wp-block-button__link {
	background: transparent !important; border-color: var(--p4n-line); color: var(--p4n-ink) !important;
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link:hover,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-button.is-style-p4n-quiet .wp-block-button__link:hover { border-color: var(--p4n-accent); color: var(--p4n-accent) !important; }

/* ---- Media & Text ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-media-text { gap: 28px; align-items: center; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__media img { border-radius: var(--p4n-radius-lg); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__content { padding: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-media-text.is-style-p4n-card {
	padding: 24px; background: var(--p4n-surface); border: 1px solid var(--p4n-line); border-radius: var(--p4n-radius-lg);
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-media-text.is-style-p4n-card .wp-block-media-text__media img { border-radius: var(--p4n-radius); }

/* ---- Callouts (Group block styles: Tip / Warning / Note) ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-tip,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-warning,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-note {
	--p4n-co: var(--p4n-accent);
	position: relative;
	padding: 18px 20px 18px 24px;
	background: color-mix(in srgb, var(--p4n-co) 8%, var(--p4n-surface));
	border: 1px solid color-mix(in srgb, var(--p4n-co) 30%, transparent);
	border-left: 4px solid var(--p4n-co);
	border-radius: var(--p4n-radius);
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-warning { --p4n-co: #f59e0b; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-note { --p4n-co: var(--p4n-muted); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-tip::before,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-warning::before,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-note::before {
	content: "Tip";
	display: block; margin-bottom: 6px;
	font-family: var(--p4n-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
	color: var(--p4n-co);
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-warning::before { content: "Warning"; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-note::before { content: "Note"; }
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-tip, .is-style-p4n-warning, .is-style-p4n-note, .is-style-p4n-tip > .wp-block-group__inner-container, .is-style-p4n-warning > .wp-block-group__inner-container, .is-style-p4n-note > .wp-block-group__inner-container) > * { margin-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-tip, .is-style-p4n-warning, .is-style-p4n-note, .is-style-p4n-tip > .wp-block-group__inner-container, .is-style-p4n-warning > .wp-block-group__inner-container, .is-style-p4n-note > .wp-block-group__inner-container) > * + * { margin-top: .6em; }
:is(.p4n-prose, .editor-styles-wrapper) :is(.is-style-p4n-tip, .is-style-p4n-warning, .is-style-p4n-note) p { font-size: 16px; }

/* ---- Card (plain surface box) and Key takeaways ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-card,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-takeaways,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-facts {
	padding: 22px 24px;
	background: var(--p4n-surface); border: 1px solid var(--p4n-line); border-radius: var(--p4n-radius-lg);
}
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-card, .is-style-p4n-takeaways, .is-style-p4n-facts, .is-style-p4n-card > .wp-block-group__inner-container, .is-style-p4n-takeaways > .wp-block-group__inner-container, .is-style-p4n-facts > .wp-block-group__inner-container) > * { margin-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-card, .is-style-p4n-takeaways, .is-style-p4n-facts, .is-style-p4n-card > .wp-block-group__inner-container, .is-style-p4n-takeaways > .wp-block-group__inner-container, .is-style-p4n-facts > .wp-block-group__inner-container) > * + * { margin-top: 12px; }
:is(.p4n-prose, .editor-styles-wrapper) :is(.is-style-p4n-card, .is-style-p4n-takeaways, .is-style-p4n-facts) > :is(h2, h3, h4) {
	margin-top: 0; font-size: 13px; font-family: var(--p4n-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p4n-muted); font-weight: 600;
}
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-takeaways ul { list-style: none; padding: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-takeaways li { position: relative; padding-left: 28px; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-takeaways li + li { margin-top: 8px; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-takeaways li::before {
	content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%;
	background: var(--p4n-btn-tint); border: 1px solid var(--p4n-btn-edge);
}
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-takeaways li::after {
	content: ""; position: absolute; left: 5px; top: calc(.35em + 4px); width: 5px; height: 8px;
	border: solid var(--p4n-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Facts: a list of "Label: value" lines laid out as rows */
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-facts ul { list-style: none; padding: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-facts li { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--p4n-line); margin: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-facts li:first-child { border-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-facts li strong { font-family: var(--p4n-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p4n-muted); font-weight: 600; padding-top: 3px; }

/* In the editor each list item's text sits in an extra wrapper element; give that wrapper the two columns. */
.editor-styles-wrapper .is-style-p4n-facts li { display: block; }
.editor-styles-wrapper .is-style-p4n-facts li > div { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: 12px; }

/* ---- Steps (ordered List block style) ---- */
:is(.p4n-prose, .editor-styles-wrapper) ol.is-style-p4n-steps { list-style: none; padding: 0; counter-reset: p4n-step; }
:is(.p4n-prose, .editor-styles-wrapper) ol.is-style-p4n-steps > li { counter-increment: p4n-step; position: relative; padding: 0 0 0 48px; min-height: 32px; }
:is(.p4n-prose, .editor-styles-wrapper) ol.is-style-p4n-steps > li + li { margin-top: 14px; }
:is(.p4n-prose, .editor-styles-wrapper) ol.is-style-p4n-steps > li::before {
	content: counter(p4n-step); position: absolute; left: 0; top: 0;
	width: 32px; height: 32px; display: grid; place-items: center;
	background: var(--p4n-btn-tint); border: 1px solid var(--p4n-btn-edge); border-radius: 50%;
	font-family: var(--p4n-font-mono); font-size: 13px; font-weight: 600; color: var(--p4n-accent);
}

/* ---- Stat row (Columns block style) ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-columns.is-style-p4n-stats { gap: 14px; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-columns.is-style-p4n-stats > .wp-block-column {
	padding: 18px 20px; background: var(--p4n-surface); border: 1px solid var(--p4n-line); border-radius: var(--p4n-radius);
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-columns.is-style-p4n-stats > .wp-block-column > * { margin-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-columns.is-style-p4n-stats > .wp-block-column > p:first-child {
	font-family: var(--p4n-font-mono); font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--p4n-accent); letter-spacing: -.01em;
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-columns.is-style-p4n-stats > .wp-block-column > p + p {
	margin-top: 6px; font-size: 13px; color: var(--p4n-muted);
}

/* ---- Quotes ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-quote { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--p4n-accent); color: var(--p4n-muted); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-quote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--p4n-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-pullquote {
	margin: 0; padding: 28px 24px; border: 0; border-top: 1px solid var(--p4n-line); border-bottom: 1px solid var(--p4n-line); text-align: center;
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-pullquote p { font-size: 24px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--p4n-ink); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-pullquote p::before { content: "\201C"; color: var(--p4n-accent); margin-right: 2px; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-pullquote p::after { content: "\201D"; color: var(--p4n-accent); margin-left: 2px; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-pullquote cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--p4n-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p4n-muted); }

/* ---- CTA card (Group block style) ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-group.is-style-p4n-cta {
	padding: 32px 28px; text-align: center;
	background: color-mix(in srgb, var(--p4n-glow, var(--p4n-accent)) 6%, var(--p4n-surface));
	border: 1px solid var(--p4n-btn-edge); border-radius: var(--p4n-radius-lg);
}
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-cta, .is-style-p4n-cta > .wp-block-group__inner-container) > * { margin-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-cta, .is-style-p4n-cta > .wp-block-group__inner-container) > * + * { margin-top: 12px; }
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-cta, .is-style-p4n-cta > .wp-block-group__inner-container) > :is(h2, h3) { margin-top: 0; font-size: 24px; }
:is(.p4n-prose, .editor-styles-wrapper) :where(.is-style-p4n-cta, .is-style-p4n-cta > .wp-block-group__inner-container) > p { color: var(--p4n-muted); max-width: 520px; margin-left: auto; margin-right: auto; }
:is(.p4n-prose, .editor-styles-wrapper) .is-style-p4n-cta .wp-block-buttons { justify-content: center; margin-top: 18px; }

/* ---- Section label (Heading block style) ---- */
:is(.p4n-prose, .editor-styles-wrapper) :is(h2, h3, h4).is-style-p4n-label {
	font-family: var(--p4n-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--p4n-accent); font-weight: 600;
}

/* ---- Editor canvas base: look like the site ---- */
.editor-styles-wrapper {
	background: var(--p4n-ground); color: var(--p4n-ink);
	font-family: var(--p4n-font-sans); font-size: 17px; line-height: 1.65;
}
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4 { color: var(--p4n-ink); font-family: var(--p4n-font-sans); line-height: 1.2; }
.editor-styles-wrapper h2 { font-size: 28px; letter-spacing: -.01em; }
.editor-styles-wrapper h3 { font-size: 22px; }
.editor-styles-wrapper h4 { font-size: 18px; }
.editor-styles-wrapper a { color: var(--p4n-accent); }
.editor-styles-wrapper .editor-post-title__input, .editor-styles-wrapper .wp-block-post-title {
	color: var(--p4n-ink); font-family: var(--p4n-font-sans); font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
}
.editor-styles-wrapper code { font-family: var(--p4n-font-mono); font-size: .92em; padding: 2px 5px; background: var(--p4n-surface); border-radius: 4px; }
.editor-styles-wrapper .wp-block-code { background: var(--p4n-surface); border: 1px solid var(--p4n-line); border-radius: var(--p4n-radius); padding: 16px; font-family: var(--p4n-font-mono); }

/* ---- Rank Math TOC and FAQ blocks ---- */
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block {
	padding: 18px 22px; background: var(--p4n-surface); border: 1px solid var(--p4n-line); border-radius: var(--p4n-radius-lg);
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block > :first-child {
	margin: 0 0 10px; font-family: var(--p4n-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--p4n-muted); font-weight: 600;
}
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block nav ul,
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block nav ol { margin: 0; padding-left: 1.2em; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block li + li { margin-top: 4px; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block a { font-size: 15px; text-decoration: none; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-toc-block a:hover { text-decoration: underline; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-faq-block .rank-math-faq-item { padding: 16px 0; border-top: 1px solid var(--p4n-line); }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-faq-block .rank-math-faq-item:first-child { border-top: 0; padding-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-faq-block .rank-math-question { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-faq-block .rank-math-answer > * { margin-top: 0; }
:is(.p4n-prose, .editor-styles-wrapper) .wp-block-rank-math-faq-block .rank-math-answer > * + * { margin-top: .6em; }

/* ---- Rank Math block editing UI (FAQ, TOC, HowTo) on the theme while editing ---- */
.editor-styles-wrapper .rank-math-block { background: var(--p4n-surface) !important; color: var(--p4n-ink) !important; border: 1px solid var(--p4n-line); border-radius: var(--p4n-radius-lg) !important; padding: 16px !important; }
.editor-styles-wrapper .rank-math-block ul, .editor-styles-wrapper .rank-math-block ol { padding: 0; margin: 0; list-style: none; }
.editor-styles-wrapper .rank-math-block li { background: var(--p4n-ground) !important; color: var(--p4n-ink) !important; border: 1px solid var(--p4n-line) !important; border-radius: var(--p4n-radius) !important; box-shadow: none !important; margin: 0 0 12px !important; padding: 14px 16px !important; }
.editor-styles-wrapper .rank-math-block li + li { margin-top: 0; }
.editor-styles-wrapper .rank-math-block .rank-math-block-title,
.editor-styles-wrapper .rank-math-block .rank-math-faq-question,
.editor-styles-wrapper .rank-math-block h3,
.editor-styles-wrapper .rank-math-block h4 { color: var(--p4n-ink); font-family: var(--p4n-font-sans); font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.editor-styles-wrapper .rank-math-block .rank-math-faq-answer,
.editor-styles-wrapper .rank-math-block .rank-math-item-content,
.editor-styles-wrapper .rank-math-block [contenteditable] { color: var(--p4n-ink); }
.editor-styles-wrapper .rank-math-block [data-rich-text-placeholder]::before { color: var(--p4n-muted); }
.editor-styles-wrapper .rank-math-block .components-button.is-primary { background: var(--p4n-btn-tint); color: var(--p4n-accent); border: 1px solid var(--p4n-btn-edge); border-radius: var(--p4n-btn-radius, 8px); box-shadow: none; }
.editor-styles-wrapper .rank-math-block .components-button.is-primary:hover { background: var(--p4n-btn-tint-hover); color: var(--p4n-accent); }