/* ============================================================
   Moodlr General Functions — component styles
   Self-contained styles for the plugin's own components (newsletter
   form + [see-more]). Uses the active theme's design tokens when present
   (e.g. the Moodlr Nebula theme) and falls back gracefully otherwise.
   ============================================================ */

/* ---------- Newsletter form ([moodlr_newsletter]) ---------- */
.mnl-wrap {
	max-width: 560px;
	margin: 2rem auto;
	padding: clamp(1.5rem, 4vw, 2.6rem);
	background: var(--surface, #ffffff);
	border: 1px solid var(--line, rgba(23, 24, 27, 0.1));
	border-radius: var(--radius-lg, 22px);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(23, 24, 27, 0.06));
	font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	color: var(--ink, #17181b);
	box-sizing: border-box;
}
.mnl-head { margin-bottom: 1.3rem; }
.mnl-title {
	font-family: var(--serif, Georgia, "Times New Roman", serif);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.6rem;
	color: var(--ink, #17181b);
}
.mnl-desc { margin: 0; color: var(--muted, #6b6f76); font-size: 0.98rem; line-height: 1.55; }
.mnl-form { display: flex; flex-direction: column; gap: 0.7rem; }
.mnl-input {
	width: 100%;
	padding: 0.8rem 1.05rem;
	border-radius: var(--radius-sm, 9px);
	border: 1px solid var(--line-strong, rgba(23, 24, 27, 0.18));
	background: var(--surface, #fff);
	color: var(--ink, #17181b);
	font: inherit;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.mnl-input:focus {
	outline: none;
	border-color: var(--accent, #15604a);
	box-shadow: 0 0 0 3px var(--accent-soft, rgba(21, 96, 74, 0.15));
}
.mnl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.82rem 1.4rem;
	border: none;
	border-radius: 100px;
	background: var(--accent, #15604a);
	color: var(--accent-fg, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s, transform 0.18s;
}
.mnl-btn:hover { background: var(--accent-strong, #0f4a39); transform: translateY(-1px); }
.mnl-notice {
	padding: 0.8rem 1.05rem;
	border-radius: var(--radius-sm, 9px);
	margin-bottom: 1rem;
	font-size: 0.94rem;
}
.mnl-success { background: var(--accent-soft, #e7f0ec); color: var(--accent-strong, #0f4a39); border: 1px solid var(--accent, #15604a); }
.mnl-error { background: #fdecea; color: #8a1705; border: 1px solid #e3b4ad; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- [see-more] — 3 related posts ---------- */
.see-more-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(1.2rem, 2.5vw, 1.8rem);
	margin: 2rem 0;
}
.see-more-item { display: flex; }
.see-more-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; width: 100%; }
.see-more-thumb {
	overflow: hidden;
	border-radius: var(--radius, 14px);
	aspect-ratio: 3 / 2;
	background: var(--surface-2, #f4f2ec);
	margin-bottom: 0.85rem;
}
.see-more-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.see-more-link:hover .see-more-thumb img { transform: scale(1.045); }
.see-more-title {
	font-family: var(--serif, Georgia, serif);
	font-size: 1.12rem;
	font-weight: 560;
	line-height: 1.25;
	margin: 0;
	color: var(--ink, #17181b);
}
.see-more-link:hover .see-more-title { color: var(--accent, #15604a); }