/*
 * Reusable block styles for content pages (registered in functions.php → hh_register_content_block_styles).
 * Editors pick them from the block sidebar → "Styles"; no per-page CSS.
 * Loaded on the front end and inside the block editor.
 *
 * Classic themes wrap group content in .wp-block-group__inner-container on the front end but not in the
 * editor, so child selectors below cover both shapes.
 * Storefront styles buttons with ".hentry .entry-content .wp-block-button .wp-block-button__link" (4 classes)
 * plus inline customizer CSS; button rules here are written to out-specify both.
 */

/* Migrated content pages use Storefront's Full Width template; center their title. */
.page-template-template-fullwidth-php .hentry .entry-title {
	text-align: center;
}

/* ── Info boxes: core/group → is-style-hh-box-{green,blue,orange,purple,red,gray} ── */
.wp-block-group[class*="is-style-hh-box-"] {
	padding: 25px;
	margin: 25px 0;
	border-radius: 15px;
	border-inline-start: 6px solid;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.wp-block-group.is-style-hh-box-green  { background-color: #e8f5e9; border-color: #4caf50; }
.wp-block-group.is-style-hh-box-blue   { background-color: #e3f2fd; border-color: #2196f3; }
.wp-block-group.is-style-hh-box-orange { background-color: #fff8dc; border-color: #ff9800; }
.wp-block-group.is-style-hh-box-purple { background-color: #f3e5f5; border-color: #9c27b0; }
.wp-block-group.is-style-hh-box-red    { background-color: #ffebee; border-color: #f44336; }
.wp-block-group.is-style-hh-box-gray   { background-color: #f5f5f5; border-color: #9e9e9e; }

.wp-block-group[class*="is-style-hh-box-"] > :first-child,
.wp-block-group[class*="is-style-hh-box-"] > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.wp-block-group[class*="is-style-hh-box-"] > :last-child,
.wp-block-group[class*="is-style-hh-box-"] > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.wp-block-group[class*="is-style-hh-box-"] h2 {
	font-size: 22px;
	margin-bottom: 15px;
}
/* Storefront's h3 is larger than the boxes' h2. */
.wp-block-group[class*="is-style-hh-box-"] h3 {
	font-size: 18px;
	margin-block: 10px;
}

/* ── Yellow note: core/group → is-style-hh-note ── */
.wp-block-group.is-style-hh-note {
	margin: 25px 0;
	padding: 20px;
	background-color: #fff3cd;
	border: 2px solid #ffc107;
	border-radius: 10px;
	color: #856404;
}
.wp-block-group.is-style-hh-note :is(h2, h3, h4) {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 20px;
	color: #856404;
}
.wp-block-group.is-style-hh-note p { margin-top: 0; margin-bottom: 10px; line-height: 1.7; }
.wp-block-group.is-style-hh-note > :last-child,
.wp-block-group.is-style-hh-note > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* ── Call-to-action box: core/group → is-style-hh-cta ── */
.wp-block-group.is-style-hh-cta {
	max-width: 600px;
	margin: 0 auto 30px;
	padding: 20px;
	text-align: center;
	background-color: #fff;
	border: 2px solid #4caf50;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(76, 175, 80, 0.15);
}
.wp-block-group.is-style-hh-cta > p,
.wp-block-group.is-style-hh-cta > .wp-block-group__inner-container > p {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 15px;
}
.wp-block-group.is-style-hh-cta .wp-block-buttons .wp-block-button .wp-block-button__link {
	padding: 12px 30px;
	border-radius: 50px;
	background-color: #4caf50;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s, background-color 0.2s;
}
.wp-block-group.is-style-hh-cta .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	background-color: #43a047;
	transform: translateY(-2px);
}

/* ── Small card (e.g. one kashrut certificate): core/group → is-style-hh-card ── */
.wp-block-group.is-style-hh-card {
	margin: 0 0 15px;
	padding: 18px;
	border-radius: 10px;
	background-color: #f9f9f9;
	border-inline-start: 4px solid #4caf50;
}
.wp-block-group.is-style-hh-card:last-child { margin-bottom: 0; }
.wp-block-group.is-style-hh-card + .wp-block-group.is-style-hh-card { margin-top: 0; }
.wp-block-group.is-style-hh-card > :last-child,
.wp-block-group.is-style-hh-card > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.wp-block-group.is-style-hh-card h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
}
.wp-block-group.is-style-hh-card p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #555;
}
.wp-block-group.is-style-hh-card .wp-block-buttons { margin-top: 10px; }
.wp-block-group.is-style-hh-card .wp-block-buttons .wp-block-button { margin-bottom: 0; }
.wp-block-group.is-style-hh-card .wp-block-buttons .wp-block-button .wp-block-button__link {
	padding: 8px 18px;
	border-radius: 8px;
	background-color: #4caf50;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.wp-block-group.is-style-hh-card .wp-block-buttons .wp-block-button .wp-block-button__link:hover { background-color: #45a049; }

/* ── Collapsible sections: core/details ──
 * is-style-hh-details-{green,blue,orange}: fixed color.
 * is-style-hh-faq: FAQ item; colors cycle green → blue → orange down the page. */
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) {
	--hh-details-bg: #e8f5e9;
	--hh-details-border: #4caf50;
	margin: 20px 0;
	border-radius: 15px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.wp-block-details.is-style-hh-details-blue,
.wp-block-details.is-style-hh-faq:nth-of-type(3n+2) { --hh-details-bg: #e3f2fd; --hh-details-border: #2196f3; }
.wp-block-details.is-style-hh-details-orange,
.wp-block-details.is-style-hh-faq:nth-of-type(3n+3) { --hh-details-bg: #fff8dc; --hh-details-border: #ff9800; }

.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 25px;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	font-weight: 700;
	background-color: var(--hh-details-bg);
	border-inline-start: 6px solid var(--hh-details-border);
}
.wp-block-details[class*="is-style-hh-details-"] > summary { font-size: 20px; }
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > summary::-webkit-details-marker { display: none; }
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > summary::after {
	content: "▼";
	flex-shrink: 0;
	font-weight: 400;
	opacity: 0.6;
	transition: transform 0.3s ease;
}
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"])[open] > summary::after { transform: rotate(180deg); }
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > :not(summary) {
	margin-inline: 25px;
	line-height: 1.7;
}
.wp-block-details.is-style-hh-faq > :not(summary) { color: #555; }
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > summary + * { margin-top: 25px; }
.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"])[open] { padding-bottom: 25px; }
@media (max-width: 768px) {
	.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > summary { padding: 15px 20px; font-size: 16px; }
	.wp-block-details:is(.is-style-hh-faq, [class*="is-style-hh-details-"]) > :not(summary) { margin-inline: 20px; }
}

/* ── Lists ── */
/* core/list → is-style-hh-emoji: no bullets, for items that start with an emoji or typed symbol */
ul.is-style-hh-emoji {
	list-style: none;
	margin-inline-start: 0;
	padding-inline-start: 0;
}
ul.is-style-hh-emoji > li {
	margin-bottom: 8px;
	line-height: 1.6;
}

/* core/list → is-style-hh-check: green ✓ instead of bullets */
ul.is-style-hh-check {
	list-style: none;
	margin-inline-start: 0;
	padding-inline-start: 0;
}
ul.is-style-hh-check > li {
	position: relative;
	margin-bottom: 10px;
	padding-inline-start: 25px;
	line-height: 1.8;
}
ul.is-style-hh-check > li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: #4caf50;
	font-weight: 700;
	font-size: 18px;
	line-height: inherit;
}

/* core/list (ordered) → is-style-hh-steps: numbered step cards */
ol.is-style-hh-steps {
	list-style: none;
	counter-reset: hh-step;
	margin: 20px 0;
	margin-inline-start: 0;
	padding-inline-start: 0;
}
ol.is-style-hh-steps > li {
	counter-increment: hh-step;
	position: relative;
	margin: 12px 0;
	padding-block: 18px;
	padding-inline: 70px 20px;
	min-height: 35px;
	background: #f0f0f0;
	border-inline-start: 5px solid #4caf50;
	border-radius: 10px;
	font-size: 17px;
	line-height: 1.7;
}
ol.is-style-hh-steps > li::before {
	content: counter(hh-step);
	position: absolute;
	inset-inline-start: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #4caf50;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
}
@media (max-width: 768px) {
	ol.is-style-hh-steps > li { font-size: 16px; padding-block: 15px; padding-inline: 62px 18px; }
	ol.is-style-hh-steps > li::before { width: 30px; height: 30px; font-size: 16px; inset-inline-start: 18px; }
}

/* ── Buttons ── */
/* core/button → is-style-hh-pill (green), -blue, -gray: rounded pill button */
.wp-block-buttons > .wp-block-button[class*="is-style-hh-pill"] > a.wp-block-button__link.wp-element-button {
	padding: 12px 30px;
	border-radius: 50px;
	background-color: #4caf50;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s, box-shadow 0.2s;
}
.wp-block-buttons > .wp-block-button.is-style-hh-pill-blue > a.wp-block-button__link.wp-element-button { background-color: #2196f3; }
.wp-block-buttons > .wp-block-button.is-style-hh-pill-gray > a.wp-block-button__link.wp-element-button { background-color: #757575; }
.wp-block-buttons > .wp-block-button[class*="is-style-hh-pill"] > a.wp-block-button__link.wp-element-button:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.wp-block-buttons > .wp-block-button.wp-block-button__width-100[class*="is-style-hh-pill"] > a.wp-block-button__link.wp-element-button {
	padding: 16px 20px;
	font-size: 18px;
}

/* core/buttons → is-style-hh-sticky: the button row stays pinned to the bottom of the screen while scrolling */
.wp-block-buttons.is-style-hh-sticky {
	position: sticky;
	bottom: 20px;
	z-index: 100;
}

/* ── Images: core/image → is-style-hh-framed (rounded corners + shadow) ── */
.wp-block-image.is-style-hh-framed img {
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}