/**
 * fraew theme skin for Custom Adverts.
 *
 * Loaded on top of frontend.css only when the active theme declares
 * current_theme_supports( 'fraew-design-tokens' ). It frames the advert in the
 * theme's archival style using the theme's own design tokens (--fraew-*), with
 * neutral fallbacks. This is how the plugin adopts the fraew - modern light look
 * without the theme carrying any plugin code.
 */

.fcad-advert-widget {
	margin-bottom: 40px;
	padding-top: 12px;
	border-top: 1px solid var(--fraew-rule, #d8d3c4);
}

/* Honest labelling — a paid placement is marked, not disguised as content. */
.fcad-advert-widget::before {
	content: "Advertisement";
	display: block;
	margin-bottom: 12px;
	font-family: var(--fraew-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fraew-dim, #8f948e);
}

/* Square off the base 4px radius to match the theme's hard edges. */
.fcad-advert-widget .fcad-advert-image {
	border: 1px solid var(--fraew-rule, #d8d3c4);
	border-radius: 0;
	background: var(--fraew-rule-soft, #e2ddd0);
}

.fcad-advert-widget .fcad-advert-link:hover {
	opacity: 1;
}
.fcad-advert-widget .fcad-advert-link:hover .fcad-advert-image {
	border-color: var(--fraew-teal, #3d7d6c);
}

/* In the theme's dark footer, the hairline needs to read against dark. */
.fraew-footer .fcad-advert-widget {
	border-top-color: rgba(255, 255, 255, 0.12);
}