/**
 * Frontend styles for Nubimancy 4th Wall Break Blocks
 * 
 * Meta Insight: Meta-styled callout in lore content
 * Lore Glimpse: Lore-styled callout in meta content
 * 
 * Uses theme CSS variables for consistent styling
 */

/* ==========================================================================
   Meta Insight Block (Meta peek in Lore context)
   ========================================================================== */

.nubimancy-meta-insight {
	background: linear-gradient(135deg, #f8f9fa 0%, var(--nubi-bg-secondary, #e9ecef) 100%);
	border-left: 4px solid var(--nubi-accent-primary, #0066cc);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	font-family: var(--nubi-font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	color: var(--nubi-text-primary, #212529);
}

.meta-insight-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.meta-insight-icon {
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

.meta-insight-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--nubi-accent-primary, #0066cc);
	margin: 0;
	line-height: 1.4;
}

.meta-insight-content {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--nubi-text-secondary, #495057);
}

.meta-insight-content p:first-child {
	margin-top: 0;
}

.meta-insight-content p:last-child {
	margin-bottom: 0;
}

/* Icon type variations */
.nubimancy-meta-insight[data-icon-type="warning"] {
	background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
	border-left-color: #f57c00;
}

.nubimancy-meta-insight[data-icon-type="warning"] .meta-insight-title {
	color: #f57c00;
}

.nubimancy-meta-insight[data-icon-type="tip"] {
	background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
	border-left-color: #8e24aa;
}

.nubimancy-meta-insight[data-icon-type="tip"] .meta-insight-title {
	color: #8e24aa;
}

/* ==========================================================================
   Lore Glimpse Block (Lore peek in Meta context)
   Uses theme's in-lore color palette for authentic fantasy styling
   ========================================================================== */

.nubimancy-lore-glimpse {
	/* Use warm parchment background from theme's in-lore mode */
	background: linear-gradient(135deg, #F4E8C1 0%, var(--nubi-bg-primary, #FEF3C7) 100%);
	border: 2px solid var(--nubi-accent-primary, #6B46C1);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0;
	box-shadow: 0 4px 12px rgba(107, 70, 193, 0.15),
	            inset 0 1px 0 rgba(255, 255, 255, 0.4);
	font-family: var(--nubi-font-body, 'Merriweather', 'Georgia', serif);
	color: var(--nubi-text-primary, #1E293B);
	position: relative;
}

/* Decorative corner flourishes using theme accent color */
.nubimancy-lore-glimpse::before,
.nubimancy-lore-glimpse::after {
	content: '✦';
	position: absolute;
	color: var(--nubi-accent-primary, #6B46C1);
	font-size: 1rem;
	opacity: 0.5;
}

.nubimancy-lore-glimpse::before {
	top: 0.75rem;
	left: 0.75rem;
}

.nubimancy-lore-glimpse::after {
	bottom: 0.75rem;
	right: 0.75rem;
}

.lore-glimpse-header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.875rem;
}

.lore-glimpse-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 0 4px rgba(107, 70, 193, 0.3));
}

.lore-glimpse-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--nubi-accent-primary, #6B46C1);
	margin: 0;
	line-height: 1.4;
	font-style: italic;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.lore-glimpse-content {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--nubi-text-primary, #1E293B);
	font-style: normal;
}

.lore-glimpse-content p:first-child {
	margin-top: 0;
}

.lore-glimpse-content p:last-child {
	margin-bottom: 0;
}

.lore-glimpse-content em {
	color: var(--nubi-accent-primary, #6B46C1);
	font-style: italic;
}

.lore-glimpse-content strong {
	color: var(--nubi-text-primary, #1E293B);
	font-weight: 700;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
	.nubimancy-meta-insight,
	.nubimancy-lore-glimpse {
		padding: 1rem 1.25rem;
		margin: 1rem 0;
	}
	
	.meta-insight-title,
	.lore-glimpse-title {
		font-size: 1rem;
	}
	
	.meta-insight-content,
	.lore-glimpse-content {
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Editor-specific adjustments (for block editor preview)
   ========================================================================== */

.block-editor-block-list__block .nubimancy-meta-insight,
.block-editor-block-list__block .nubimancy-lore-glimpse {
	margin: 1rem 0;
}

/* Ensure RichText areas are editable */
.block-editor-block-list__block .meta-insight-title,
.block-editor-block-list__block .lore-glimpse-title,
.block-editor-block-list__block .meta-insight-content,
.block-editor-block-list__block .lore-glimpse-content {
	min-height: 1.5em;
}