/**
 * Native SEO Core — shared visual tokens for the family.
 *
 * Host plugins enqueue this stylesheet alongside their own admin.css. The
 * file exposes CSS variables plugins can reference to keep the suite
 * visually coherent when two or more family plugins are active together.
 *
 * Usage in a host plugin:
 *   wp_enqueue_style( 'nseo-core-shared', NSEO_CORE_URL . 'assets/shared.css', array(), NSEO_CORE_VERSION );
 *
 * Keep this file minimal. Plugin-specific layout belongs in each host's
 * admin.css; only cross-plugin tokens and hard-to-duplicate primitives
 * live here.
 */

:root {
	--nseo-brand: #2271b1;
	--nseo-brand-hover: #135e96;
	--nseo-accent: #f0f6fc;
	--nseo-border: #dcdcde;
	--nseo-muted: #646970;
}

/* Dashicon next to a heading, inline, tight spacing. */
.nseo-core-icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nseo-core-icon .dashicons {
	color: var(--nseo-brand);
}

/* ----------------------------------------------------------------------
 * Suite-wide inline notices
 *
 * Discreet, in-context replacement for `notice notice-warning` /
 * `notice notice-info` banners. Use these inside the relevant tab or
 * section, not stacked at the top of the page. Inspired by VigIA's
 * `vigia-notice` pattern.
 *
 * Markup:
 *   <div class="nseo-notice nseo-notice--warning">
 *     <span class="dashicons dashicons-warning"></span>
 *     <p><strong>Heading.</strong> Body copy goes here.</p>
 *   </div>
 *
 * Modifiers:
 *   .nseo-notice--info     informational, brand-colored accent (default)
 *   .nseo-notice--warning  yellow accent for caveats
 *   .nseo-notice--error    red accent for blockers
 * -------------------------------------------------------------------- */

.nseo-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 12px;
	margin: 12px 0;
	background: transparent;
	border-left: 3px solid var(--nseo-brand);
	font-size: 13px;
}

.nseo-notice > .dashicons {
	flex-shrink: 0;
	margin-top: 1px;
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--nseo-muted);
}

.nseo-notice p {
	margin: 0;
	line-height: 1.5;
	color: #1d2327;
}

.nseo-notice p + p {
	margin-top: 4px;
}

.nseo-notice strong {
	color: #1d2327;
}

.nseo-notice--info {
	border-left-color: var(--nseo-brand);
}

.nseo-notice--info > .dashicons {
	color: var(--nseo-brand);
}

.nseo-notice--warning {
	border-left-color: #dba617;
}

.nseo-notice--warning > .dashicons {
	color: #dba617;
}

.nseo-notice--error {
	border-left-color: #d63638;
}

.nseo-notice--error > .dashicons {
	color: #d63638;
}