/* HerStyleGuide: post content styles. Loaded on the site and inside the block editor. */

.editor-styles-wrapper {
	font-family: var(--sans, 'Poppins', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 300;
	color: #2B2326;
	line-height: 1.75;
}

:where(.entry-content, .editor-styles-wrapper) { font-size: 16.5px; line-height: 1.8; }
:where(.entry-content, .editor-styles-wrapper) p { margin: 0 0 1.2em; }

:where(.entry-content, .editor-styles-wrapper) :is(h2, h3, h4) {
	font-family: var(--head, 'League Spartan', sans-serif);
	font-weight: var(--head-weight, 700);
	line-height: 1.25;
	color: #2B2326;
	margin: 1.8em 0 .5em;
}
:where(.entry-content, .editor-styles-wrapper) h2 { font-size: 30px; }
:where(.entry-content, .editor-styles-wrapper) h3 { font-size: 23px; }
:where(.entry-content, .editor-styles-wrapper) h4 { font-size: 19px; }
:where(.entry-content, .editor-styles-wrapper) strong { font-weight: 600; }

/* Half-highlight links */
:where(.entry-content, .editor-styles-wrapper) a:not(.wp-block-button__link):not(.wp-element-button):not([class*="wprm"]):not([class*="a2a"]):not(.chip):not(.button):not(.btn):not(:has(img, svg)) {
	color: #2B2326;
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(transparent 58%, #F8C6D6 58%);
	padding: 0 2px;
}
:where(.entry-content, .editor-styles-wrapper) a:not(.wp-block-button__link):not(.wp-element-button):not([class*="wprm"]):not([class*="a2a"]):not(.chip):not(.button):not(.btn):not(:has(img, svg)):hover {
	background: linear-gradient(transparent 35%, #F8C6D6 35%);
}

/* Raspberry sub-heading */
.is-style-raspberry,
:where(.entry-content, .editor-styles-wrapper) .is-style-raspberry { color: #CC1450 !important; }

/* Cursive heading */
.is-style-script,
:where(.entry-content, .editor-styles-wrapper) .is-style-script {
	font-family: var(--script, 'Sacramento', cursive) !important;
	font-weight: var(--script-weight, 400) !important;
	font-size: calc(34px * var(--script-scale, 1.45)) !important;
	text-transform: none !important;
	color: #CC1450 !important;
	line-height: 1.2;
}

/* Small caption paragraph + image captions */
.is-style-caption,
:where(.entry-content, .editor-styles-wrapper) p.is-style-caption {
	font-size: 12.5px;
	font-style: italic;
	color: #6A5A60;
	text-align: center;
	margin-top: -.6em;
}
:where(.entry-content, .editor-styles-wrapper) figcaption,
:where(.entry-content, .editor-styles-wrapper) .wp-element-caption {
	font-size: 12.5px;
	font-style: italic;
	color: #6A5A60;
	text-align: center;
	margin-top: 8px;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-image img { border-radius: 6px; }
:where(.entry-content, .editor-styles-wrapper) .wp-block-image.is-style-framed img {
	padding: 8px;
	border: 1.5px solid #CC1450;
	background: #fff;
}

/* Pro tip box: pale pink + bow on the top-left corner */
.wp-block-group.is-style-pro-tip,
.wp-block-group.is-style-pink-box {
	position: relative;
	background: #FCE8EF;
	border-radius: 6px;
	padding: 28px 32px 22px 40px;
	margin: 2.4em 0;
}
.wp-block-group.is-style-pro-tip::before {
	content: "";
	position: absolute;
	top: -20px;
	left: -18px;
	width: 58px;
	height: 48px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52' fill='none' stroke='%23CC1450' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 20C24 6 6 4 6 16C6 26 22 26 32 20Z' fill='%23fff'/%3E%3Cpath d='M32 20C40 6 58 4 58 16C58 26 42 26 32 20Z' fill='%23fff'/%3E%3Ccircle cx='32' cy='20' r='3.5' fill='%23fff'/%3E%3Cpath d='M30 23C26 32 22 40 18 48'/%3E%3Cpath d='M34 23C38 32 42 40 46 48'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}
.wp-block-group.is-style-pro-tip > :first-child,
.wp-block-group.is-style-pink-box > :first-child { margin-top: 0; }
.wp-block-group.is-style-pro-tip > :last-child,
.wp-block-group.is-style-pink-box > :last-child { margin-bottom: 0; }

/* Related articles box (manual) */
.wp-block-group.is-style-outline-box {
	background: #fff;
	border: 1.5px solid #CC1450;
	border-radius: 6px;
	padding: 24px 28px;
	margin: 2.4em 0;
}
.wp-block-group.is-style-outline-box > :first-child { margin-top: 0; }
.wp-block-group.is-style-outline-box > :last-child { margin-bottom: 0; }
.wp-block-group.is-style-outline-box ul { padding-left: 1.1em; }
.wp-block-group.is-style-outline-box li::marker { color: #CC1450; }

/* Lists, quotes, buttons */
:where(.entry-content, .editor-styles-wrapper) li::marker { color: #CC1450; }
:where(.entry-content, .editor-styles-wrapper) blockquote,
:where(.entry-content, .editor-styles-wrapper) .wp-block-quote {
	margin: 2em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid #F8C6D6;
	font-family: var(--head, 'League Spartan', sans-serif);
	font-style: normal;
	font-size: 20px;
}
/* Buttons inside posts: same as the homepage buttons.
   Two classes deep so they beat WordPress's default dark grey button.
   A colour picked in the editor for one button still wins. */
.entry-content .wp-block-buttons,
.editor-styles-wrapper .wp-block-buttons { margin: 1.4em 0 2em; gap: 12px; }
.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.editor-styles-wrapper .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 13px 28px;
	background-color: #CC1450; color: #fff;
	border: 1.5px solid #CC1450; border-radius: 6px;
	font-family: var(--sans, 'Poppins', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 500; font-size: 13px; line-height: 1.2;
	letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
	box-shadow: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover,
.entry-content .wp-block-button__link:focus-visible {
	background-color: #A30F40; border-color: #A30F40; color: #fff;
}
.entry-content .is-style-outline > .wp-block-button__link,
.editor-styles-wrapper .is-style-outline > .wp-block-button__link {
	background-color: #fff; color: #CC1450; border-color: #CC1450;
}
.entry-content .is-style-outline > .wp-block-button__link:hover {
	background-color: #CC1450; color: #fff;
}
/* A lone button paragraph-style link (some posts use a plain link with "button" class) */
.entry-content a.button, .entry-content .btn {
	display: inline-flex; align-items: center; min-height: 48px; padding: 13px 28px;
	background-color: #CC1450; color: #fff; border-radius: 6px; text-decoration: none;
	font-weight: 500; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
}
:where(.entry-content, .editor-styles-wrapper) hr { border: 0; border-top: 1px solid #F3D3DE; margin: 2.4em 0; }

/* WP Recipe Maker accents */
.wprm-recipe-container .wprm-recipe { border-color: #F3D3DE; border-radius: 6px; }
.wprm-recipe-container .wprm-recipe-name { font-family: var(--head, 'League Spartan', sans-serif); font-weight: var(--head-weight, 700); }

/* Space around buttons inside posts: kept even when WordPress/plugin layout
   styles reset block margins. */
.entry-content .wp-block-buttons,
.entry-content > .wp-block-button,
.editor-styles-wrapper .wp-block-buttons {
	margin-top: 1.4em !important;
	margin-bottom: 2.2em !important;
}
.entry-content :is(.wp-block-buttons, .wp-block-button, p:has(> a.button), p:has(> .btn)) + :is(h2, h3, h4, h5),
.editor-styles-wrapper .wp-block-buttons + :is(h2, h3, h4, h5) {
	margin-top: 2.2em !important;
}
.entry-content :is(h2, h3, h4) { margin-top: 1.8em; margin-bottom: .55em; }
.entry-content > :is(h2, h3, h4):first-child { margin-top: 0; }

/* Pro tip / pink / outline boxes: compact like the mockup.
   Classic themes wrap group content in .wp-block-group__inner-container,
   so reset first/last margins there too. */
.entry-content .wp-block-group.is-style-pro-tip,
.entry-content .wp-block-group.is-style-pink-box,
.editor-styles-wrapper .wp-block-group.is-style-pro-tip,
.editor-styles-wrapper .wp-block-group.is-style-pink-box {
	padding: 26px 30px 22px 34px;
	margin: 2.2em 0 !important;
}
.wp-block-group:is(.is-style-pro-tip, .is-style-pink-box, .is-style-outline-box) > .wp-block-group__inner-container > :first-child,
.wp-block-group:is(.is-style-pro-tip, .is-style-pink-box, .is-style-outline-box) > :first-child {
	margin-top: 0 !important;
}
.wp-block-group:is(.is-style-pro-tip, .is-style-pink-box, .is-style-outline-box) > .wp-block-group__inner-container > :last-child,
.wp-block-group:is(.is-style-pro-tip, .is-style-pink-box, .is-style-outline-box) > :last-child {
	margin-bottom: 0 !important;
}
.wp-block-group:is(.is-style-pro-tip, .is-style-pink-box) .is-style-script {
	font-size: calc(26px * var(--script-scale, 1.45)) !important;
	line-height: 1.1 !important;
	margin: 0 0 .25em !important;
}
.wp-block-group:is(.is-style-pro-tip, .is-style-pink-box) p {
	font-size: 15.5px;
	line-height: 1.7;
	margin: 0 0 .8em;
}
@media (max-width: 480px) {
	.entry-content .wp-block-group.is-style-pro-tip,
	.entry-content .wp-block-group.is-style-pink-box { padding: 22px 20px 18px 26px; }
}