/* TODO (block-first): Refactor notice styles to use block.json styles + theme.json custom properties. Current selectors target legacy .page-section and .simple-callout-inner class names from ftm-page-sections. */

/*--------------------------------------------------------------
# Site Notices
--------------------------------------------------------------*/
.site-notice-remove {
	text-decoration: none;
}

.site-notice-remove .ftmicon-close::before {
	content: "\f00d";
}

.site-notice.header_cart .ftm-site-notice {
    border-radius: 10px;
    overflow: hidden;
}

.site-notice.top {
	position: relative;

	& .ftm-site-notice.has-background {
		max-width: none;
		border-radius: 0;
		padding-top: var(--space-small);
		padding-bottom: var(--space-small);	
	}
}

.site-notice.top .page-section {
	padding: 0;
	margin: 0;
}

.site-notice.top .page-section-inner {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding: var(--space-xsmall) var(--space-normal);
}

.site-notice.top .site-notice-remove {
	position: absolute;
	top: var(--space-normal);
	right: var(--gutter-width);
	color: var(--color-white);
}

.site-notice.top .simple-callout-inner p,
.site-notice.top .ftm-site-notice p {
	margin-top: 0;
	margin-bottom: 0;	
}

/*
 * Invert the wrapper's text + background on buttons.
 *
 * CSS has no currentBackgroundColor, so the block's render.php mirrors
 * the wrapper's chosen background + text colors into --site-notice-bg
 * and --site-notice-fg custom properties (works for both theme presets
 * and custom hex values picked in the editor).
 */
.ftm-site-notice .wp-block-heading {
	color: var(--site-notice-fg, currentcolor);
	font: var(--display-large);
	text-transform: uppercase;
}

/*
 * Selectors are intentionally specific: WordPress emits per-block
 * .wp-elements-<hash> .wp-element-button { color: ... } rules from the
 * block's elements.link.color style, which would otherwise override
 * our inverted color. Doubling .wp-block-button__link.wp-element-button
 * matches WP's own selector specificity and wins via source order.
 */
.ftm-site-notice .wp-block-button .wp-block-button__link.wp-element-button {
	background-color: var(--site-notice-fg, currentcolor);
	color: var(--site-notice-bg, var(--color-white));
}