/* ==========================================================================
   Dental Calc Sections - supplemental CSS
   Covers layout details theme.json + core blocks can't fully express:
   responsive card grids, the Tool Embed frame, and small editor polish.
   All colors below reference the same custom properties WordPress writes
   from theme.json, so changing a color in Appearance > Editor > Styles
   updates these too.
   ========================================================================== */

/* Footer grid: force 4 columns on desktop like the mockup, stack on mobile */
@media (min-width: 782px) {
	.wp-block-group.alignwide > .wp-block-group[style*="grid"] {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* Cards inside secondary-cards / trust-and-disclaimer patterns */
.wp-block-columns .wp-block-group[style*="border-radius:10px"] {
	height: 100%;
}

/* Tool Embed frame (front end) */
.dentalcalc-tool-embed {
	width: 100%;
}
.dentalcalc-tool-frame {
	border: 0;
	width: 100%;
}
.dentalcalc-tool-frame--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	border: 1.5px dashed var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-size: 14px;
}

/* Tool Embed - editor view */
.dentalcalc-tool-embed-editor__inner {
	border: 1.5px dashed var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 16px;
	background: var(--wp--preset--color--surface);
}
.dentalcalc-tool-embed-editor__label {
	font-weight: 600;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 10px;
}

/* FAQ accordion (core/details) styling to match the mockup */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 16px 20px;
	background: var(--wp--preset--color--paper);
	margin-bottom: 12px;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* Outline button style, matching the mockup's .btn-ghost */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green);
}

/* Small screens: stop forced grids from squeezing content */
@media (max-width: 600px) {
	.wp-block-group[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
}