/* ==========================================================================
   melp-blog.css — Full redesign matching Next.js blog visual parity
   Version 3.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
	/* ─── Brand colour palette (mirrors globals.css exactly) ─── */
	--melp-red-50: #FEF3F2;
	--melp-red-100: #FEE4E2;
	--melp-red-200: #FCCCC8;
	--melp-red-300: #FCAAA5;
	--melp-red-400: #F87971;
	--melp-red-500: #EE4136;
	--melp-red-600: #DC3126;
	--melp-red-700: #B9251C;
	--melp-red-800: #99231B;
	--melp-red-900: #7F231D;

	/* Deep Black scale */
	--deep-black: #222020;
	--deep-black-100: #F0EEEE;
	--deep-black-200: #DDDADA;
	--deep-black-800: #484445;
	--deep-black-900: #3F3B3B;

	/* Slate Grey scale */
	--slate-gray-200: #D1D0D0;
	--slate-gray-300: #B1AFAF;
	--slate-gray-400: #898787;
	--slate-gray-500: #737070;
	--slate-gray-600: #5E5C5C;
	--slate-gray-800: #464544;

	/* Backgrounds */
	--white: #FFFFFF;
	--light-grey: #F2F2F2;

	/* Brand gradient (exact match) */
	--melp-gradient: linear-gradient(90deg, #F14C2F 0%, #FF0059 100%);
	--melp-gradient-hover: linear-gradient(90deg, #E04328 0%, #E6004F 100%);
	--melp-gradient-soft: linear-gradient(135deg, rgba(241, 76, 47, 0.09) 0%, rgba(255, 0, 89, 0.07) 100%);

	/* Legacy colour refs used in components */
	--melp-red: #F14C2F;
	--melp-pink: #FF0059;
	--melp-accent: #EE4136;

	/* ─── Semantic light-mode tokens ─── */
	--melp-background: #F5F5F7;
	/* NOT white — matches Next.js bg-background */
	--melp-foreground: #222020;
	--melp-card: #FFFFFF;
	--melp-popover: #FFFFFF;
	--melp-muted: #F2F2F2;
	--melp-muted-strong: #EBEBEB;
	--melp-muted-text: #737070;
	/* --muted-foreground in globals.css */
	--melp-border: rgba(209, 208, 208, 0.65);
	/* --border: #D1D0D0 softened */
	--melp-border-solid: #D1D0D0;

	/* ─── Base radius (matches --radius: 0.625rem in globals.css) ─── */
	--melp-radius-base: 0.625rem;
	/* 10px */
	--melp-radius: calc(var(--melp-radius-base) - 2px);
	/* ~8px  */
	--melp-radius-md: var(--melp-radius-base);
	/* 10px */
	--melp-radius-lg: calc(var(--melp-radius-base) + 4px);
	/* 14px */
	--melp-radius-xl: calc(var(--melp-radius-base) + 8px);
	/* 18px */
	--melp-radius-2xl: calc(var(--melp-radius-base) + 14px);
	/* 24px */

	/* ─── Shadows (mirrors globals.css shadow scale) ─── */
	--melp-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.10), 0 8px 24px -4px rgba(0, 0, 0, 0.08);
	--melp-shadow-hover: 0 6px 20px -2px rgba(0, 0, 0, 0.15), 0 12px 32px -4px rgba(0, 0, 0, 0.10);
	--melp-shadow-soft: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 4px 16px -4px rgba(0, 0, 0, 0.06);
	--melp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);

	/* ─── Layout ─── */
	--melp-container: 1180px;
	--melp-container-wide: 1280px;

	/* ─── Typography ─── */
	--melp-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--melp-font-heading: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif;

	/* ─── Melp brand button asymmetric radius ─── */
	/* The signature: all corners rounded EXCEPT top-left which is square */
	--melp-btn-radius: var(--melp-radius-2xl);
}

/* --------------------------------------------------------------------------
   Override variables injected by WordPress plugins (Gutentor, page builders,
   Customizer Additional CSS, etc.) that use blue/purple brand palettes.
   These get declared at :root level and can bleed into our theme if not reset.
   -------------------------------------------------------------------------- */
:root {
	--main-color-one: var(--melp-red);
	--secondary-color: var(--melp-foreground);
	--heading-color: var(--melp-foreground);
	--paragraph-color: var(--melp-muted-text);
	--heading-font: var(--melp-font-heading);
	--body-font: var(--melp-font-body);
	/* Royal Elementor / WP Bakery overrides */
	--e-global-color-primary: var(--melp-red);
	--e-global-color-secondary: var(--melp-foreground);
	--e-global-color-text: var(--melp-foreground);
	--e-global-color-accent: var(--melp-red);
	/* WordPress core palette overrides */
	--wp--preset--color--primary: var(--melp-red);
	--wp--preset--color--secondary: var(--melp-foreground);
	--wp--preset--color--background: var(--melp-background);
	--wp--preset--color--foreground: var(--melp-foreground);
	/* Poppins override — force Montserrat/Inter even if plugin sets Poppins */
	--wp--preset--font-family--heading: var(--melp-font-heading);
	--wp--preset--font-family--body: var(--melp-font-body);
}


/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.melp-blog-theme {
	margin: 0;
	background: var(--melp-background);
	color: var(--melp-foreground);
	font-family: var(--melp-font-body);
	font-size: 16px;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body.melp-blog-theme a {
	/* color: inherit; */
	text-decoration: none;
}

body.melp-blog-theme img {
	display: block;
	max-width: 100%;
}

body.melp-blog-theme button {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.melp-container {
	width: min(100% - 32px, var(--melp-container));
	margin-inline: auto;
}

.melp-container-wide {
	width: min(100% - 32px, var(--melp-container-wide));
	margin-inline: auto;
}

.melp-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
	transform: translateY(-140%);
	border-radius: 999px;
	background: var(--melp-foreground);
	color: var(--melp-background);
	padding: 10px 14px;
	font-weight: 700;
	transition: transform 0.2s ease;
}

.melp-skip-link:focus {
	transform: translateY(0);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   4. Header — Two-state: transparent at top, pill/floating when scrolled
      Mirrors Next.js Header.tsx scrolled / non-scrolled className logic
   -------------------------------------------------------------------------- */

/* ── Base state (page at top) ─────────────────────────────────────────── */
.melp-site-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		top 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		width 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		max-width 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		margin-inline 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		border-radius 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		background 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		border-color 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		box-shadow 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

/* ── Scrolled state — pill/card floating header ───────────────────────── */
.melp-site-header.is-scrolled {
	top: 8px;
	width: 95%;
	max-width: 1280px;
	margin-inline: auto;
	border-radius: 16px;
	border-color: var(--melp-border);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ── Inner shell — height animates 80px → 64px ────────────────────────── */
.melp-header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: min(100% - 32px, var(--melp-container-wide));
	min-height: 80px;
	margin-inline: auto;
	transition: min-height 0.3s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

.melp-site-header.is-scrolled .melp-header-shell {
	min-height: 64px;
}

/* ── Logo — scales 140px → 112px on scroll ────────────────────────────── */
.melp-header-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.melp-header-logo img {
	width: 140px;
	height: auto;
	transition: width 0.3s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

.melp-site-header.is-scrolled .melp-header-logo img {
	width: 112px;
}

/* --------------------------------------------------------------------------
   5. Desktop Nav
   -------------------------------------------------------------------------- */
.melp-desktop-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex: 1 1 auto;
}

.melp-nav-group {
	position: static;
	/* children use fixed positioning, not relative */
}

/* Nav triggers — NO background on hover, only text color change + underline.
   Matches Next.js: text-muted-foreground hover:text-foreground with animated
   underline span (implemented via ::after below). */
.melp-nav-trigger,
.melp-nav-link,
.melp-link-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	color: var(--melp-muted-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 16px;
	cursor: pointer;
	transition: color 0.18s ease;
	position: relative;
	/* needed for the ::after underline */
	border-radius: 8px;
	/* still needed for focus ring look */
}

/* Underline for plain nav links (no dropdown) on hover */
.melp-nav-link::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 16px;
	right: 16px;
	height: 2px;
	border-radius: 99px;
	background: var(--melp-foreground);
	transform: scaleX(0);
	transition: transform 0.2s ease;
	transform-origin: left;
}

.melp-nav-link:hover::after {
	transform: scaleX(1);
}

/* Underline for trigger buttons — shown when open (.is-open) */
.melp-nav-trigger::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 16px;
	right: 16px;
	height: 2px;
	border-radius: 99px;
	background: var(--melp-foreground);
	transform: scaleX(0);
	transition: transform 0.2s ease;
	transform-origin: left;
}

.melp-nav-group.is-open .melp-nav-trigger::after {
	transform: scaleX(1);
}

/* Text colour change only — no background */
.melp-nav-trigger:hover,
.melp-nav-trigger:focus-visible,
.melp-nav-group:hover .melp-nav-trigger,
.melp-nav-group.is-open .melp-nav-trigger,
.melp-nav-link:hover,
.melp-link-button:hover {
	background: transparent;
	color: var(--melp-foreground);
}

/* Chevron arrow — animated rotation on hover/open */
.melp-chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

/* .is-open is set by JS — works even when mouse is on the fixed mega-menu */
.melp-nav-group.is-open .melp-chevron,
.melp-nav-trigger[aria-expanded="true"] .melp-chevron,
.melp-mobile-trigger[aria-expanded="true"] .melp-chevron {
	transform: rotate(225deg) translate(-1px, -1px);
}

/* --------------------------------------------------------------------------
   6. Mega Menu — fixed full-width, centred inner container
      Matches Next.js: fixed left-0 right-0, flex justify-center, px-6
   -------------------------------------------------------------------------- */

/* Outer wrapper: fixed to viewport, full width, invisible by default */
.melp-mega-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: 80px;
	/* non-scrolled header height */
	display: flex;
	justify-content: center;
	padding: 0 24px;
	z-index: 999;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.98);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0.18s ease;
}

/* Drop top when header is in pill/scrolled mode */
.melp-site-header.is-scrolled .melp-mega-menu,
.melp-site-header.is-scrolled~* .melp-mega-menu {
	top: 72px;
	/* 64px shell + 8px top offset */
}

/* Open state — driven ONLY by JS .is-open class, NOT CSS :hover
   Reason: position:fixed child is outside .melp-nav-group's visual box,
   so :hover turns false the moment the mouse crosses into the mega-menu. */
.melp-nav-group.is-open .melp-mega-menu,
.melp-nav-group:focus-within .melp-mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

/* Inner card — full width of the centred container, rounded bottom */
.melp-mega-grid {
	display: flex;
	width: 100%;
	max-width: 1152px;
	/* matches Next.js max-w-6xl */
	border: 1px solid rgba(209, 208, 208, 0.5);
	/* border-border/50 */
	border-top: none;
	/* flush with header bottom — no top border/radius */
	border-radius: 0 0 16px 16px;
	/* rounded-b-2xl — bottom corners only */
	background: #ffffff;
	/* Matches Next.js shadow-xl shadow-black/5 — subtle, not heavy */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

/* Left — categories area (flex-1, p-8) */
.melp-mega-categories {
	flex: 1 1 auto;
	padding: 32px;
	display: grid;
	gap: 48px;
	/* gap-12 */
}

/* 2-column category grid (Platform has 2 columns) */
.melp-mega-categories.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Right sidebar — border-left, w-72 (288px), bg-muted/30 */
.melp-mega-sidebar {
	width: 288px;
	flex-shrink: 0;
	border-left: 1px solid var(--melp-border);
	background: rgba(242, 242, 242, 0.30);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Category title (COLLABORATION, PRODUCTIVITY, etc.) */
.melp-mega-title,
.melp-mobile-title {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--melp-border);
	color: var(--melp-muted-text);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Nav icon tile */
.melp-nav-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--melp-muted);
	color: var(--melp-muted-text);
}

.melp-nav-icon-tile svg {
	width: 16px;
	height: 16px;
}

/* fallback icon wrapper */
.melp-mega-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--melp-muted);
	color: var(--melp-muted-text);
	font-size: 10px;
	font-weight: 900;
}

.melp-mega-icon svg {
	width: 16px;
	height: 16px;
}

/* Individual nav link row */
.melp-mega-link {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 12px;
	align-items: flex-start;
	border-radius: 8px;
	padding: 10px 12px;
	transition: background 0.18s ease, transform 0.18s ease;
}

.melp-mega-link:hover {
	background: var(--melp-muted);
	transform: translateX(2px);
}

.melp-mega-link strong {
	display: block;
	color: var(--melp-foreground);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.melp-mega-link small {
	display: block;
	margin-top: 3px;
	color: var(--melp-muted-text);
	font-size: 12px;
	line-height: 1.4;
}

/* Items list spacing */
.melp-mega-items {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ── Sidebar: "Enter Meeting Link" input section ───────────────────── */
.melp-sidebar-input {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--melp-border);
}

.melp-sidebar-input-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.melp-sidebar-input-title svg {
	width: 16px;
	height: 16px;
	color: var(--melp-foreground);
	flex-shrink: 0;
}

.melp-sidebar-input-title span {
	font-size: 14px;
	font-weight: 600;
	color: var(--melp-foreground);
}

.melp-sidebar-input input[type="text"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--melp-border);
	border-radius: 8px;
	background: var(--melp-card);
	color: var(--melp-foreground);
	font-family: inherit;
	font-size: 13px;
	padding: 9px 12px;
	margin-bottom: 8px;
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.melp-sidebar-input input[type="text"]:focus {
	border-color: var(--melp-foreground);
	box-shadow: 0 0 0 3px rgba(34, 32, 32, 0.08);
}

.melp-sidebar-input input[type="text"]::placeholder {
	color: var(--melp-muted-text);
}

.melp-sidebar-join-btn {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--melp-btn-radius);
	border-top-left-radius: 0;
	background: var(--melp-gradient);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}

.melp-sidebar-join-btn:hover {
	background: var(--melp-gradient-hover);
	transform: translateY(-1px);
}

/* ── Sidebar: featured app card ───────────────────────────────────── */
.melp-mega-feature {
	flex: 1 1 auto;
	overflow: hidden;
	border-radius: 12px;
	background: var(--melp-muted);
	transition: transform 0.2s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.melp-mega-feature:hover {
	transform: scale(1.01);
}

.melp-mega-feature img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	object-position: top;
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.melp-mega-feature-body {
	padding: 14px;
	flex: 1;
}

.melp-mega-feature-body p {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--melp-foreground);
	line-height: 1.3;
}

.melp-mega-feature-body span {
	display: block;
	color: var(--melp-muted-text);
	font-size: 12px;
	line-height: 1.45;
	margin-bottom: 0;
}

.melp-mega-feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--melp-foreground);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: gap 0.18s ease;
}

a.melp-mega-feature-cta:visited {
	color: var(--melp-foreground);
}

.melp-mega-feature-cta:hover {
	gap: 7px;
}

/* --------------------------------------------------------------------------
   7. Header Actions
   -------------------------------------------------------------------------- */
.melp-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* "Try for free" primary CTA button
   Next.js: variant="brand-primary" size="sm" = h-9 (36px) px-5, small font
   Melp signature: all corners rounded EXCEPT top-left (square) */
.melp-brand-button,
.melp-mobile-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: 8px;
	/* sm radius — not pill, not huge */
	border-top-left-radius: 0;
	/* Melp signature asymmetric corner */
	background: var(--melp-gradient);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 20px;
	/* h-9 px-5 equivalent */
	box-shadow: none;
	/* no shadow — matches Next.js */
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
}

.melp-brand-button:hover,
.melp-mobile-cta:hover {
	background: var(--melp-gradient-hover);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   8. Mobile Menu Toggle
   -------------------------------------------------------------------------- */
.melp-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-md);
	background: #fff;
	cursor: pointer;
	padding: 0;
}

.melp-menu-toggle span:not(.screen-reader-text) {
	width: 18px;
	height: 2px;
	border-radius: 99px;
	background: var(--melp-foreground);
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.melp-site-header.is-open .melp-menu-toggle span:nth-child(2) {
	transform: translateY(3.5px) rotate(45deg);
}

.melp-site-header.is-open .melp-menu-toggle span:nth-child(3) {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   9. Mobile Menu
   -------------------------------------------------------------------------- */
.melp-mobile-menu {
	display: none;
	border-top: 1px solid var(--melp-border);
	background: rgba(255, 255, 255, 0.98);
}

.melp-site-header.is-open .melp-mobile-menu {
	display: block;
}

.melp-mobile-menu-inner {
	width: min(100% - 32px, 680px);
	margin-inline: auto;
	padding: 10px 0 20px;
}

.melp-mobile-trigger,
.melp-mobile-plain {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--melp-border);
	background: transparent;
	color: var(--melp-foreground);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 0;
	cursor: pointer;
}

.melp-mobile-panel {
	display: none;
	padding: 6px 0 12px;
}

.melp-mobile-trigger[aria-expanded="true"]+.melp-mobile-panel {
	display: block;
}

.melp-mobile-panel a {
	display: block;
	border-radius: var(--melp-radius);
	color: var(--melp-muted-text);
	font-size: 14px;
	padding: 9px 12px;
	transition: background 0.15s ease, color 0.15s ease;
}

.melp-mobile-panel a:hover {
	background: var(--melp-muted);
	color: var(--melp-foreground);
}

.melp-mobile-section {
	border: 0;
}

.melp-mobile-cta {
	width: 100%;
	margin-top: 14px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   10. Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes melpFadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes melpScaleIn {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes melpSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Entry animation utility — JS adds .is-visible to trigger */
.melp-anim {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		transform 0.5s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}

.melp-anim.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Hero inner children staggered via CSS animation */
.melp-hero-inner>* {
	animation: melpFadeInUp 0.65s cubic-bezier(0.21, 0.47, 0.32, 0.98) both;
}

.melp-hero-inner>*:nth-child(1) {
	animation-delay: 0s;
}

.melp-hero-inner>*:nth-child(2) {
	animation-delay: 0.10s;
}

.melp-hero-inner>*:nth-child(3) {
	animation-delay: 0.20s;
}

.melp-hero-inner>*:nth-child(4) {
	animation-delay: 0.30s;
}

/* --------------------------------------------------------------------------
   11. Grid Background Pattern
   -------------------------------------------------------------------------- */
.melp-grid-bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(34, 32, 32, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(34, 32, 32, 0.04) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 65%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 65%, transparent 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. Blog Index — Hero Section
   -------------------------------------------------------------------------- */
.melp-blog-main {
	min-height: 60vh;
}

.melp-blog-hero {
	position: relative;
	overflow: hidden;
	background: var(--melp-background);
	padding: 0;
}

.melp-hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
	padding: 88px 0 72px;
}

/* eyebrow badge */
.melp-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius);
	background: rgba(255, 255, 255, 0.85);
	color: var(--melp-muted-text);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	box-shadow: 0 4px 16px rgba(34, 32, 32, 0.06);
	backdrop-filter: blur(8px);
	margin-bottom: 28px;
}

.melp-hero-badge svg {
	width: 15px;
	height: 15px;
	color: var(--melp-muted-text);
}

.melp-hero-badge .melp-sparkle-icon {
	color: var(--melp-muted-text);
}

.melp-hero-badge span:last-child {
	color: var(--melp-muted-text);
}

/* main H1 */
.melp-hero-inner h1 {
	max-width: 820px;
	margin: 0 0 20px;
	font-family: var(--melp-font-heading);
	font-size: clamp(2.6rem, 6vw, 5rem);
	font-weight: 700;
	line-height: 1.0;
}

.melp-hero-inner h1 span {
	background: var(--melp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.melp-hero-inner>p {
	max-width: 640px;
	margin: 0 0 28px;
	color: var(--melp-muted-text);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.75;
}

/* stats row */
.melp-hero-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.melp-hero-stats span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--melp-border);
	border-radius: 999px;
	background: #fff;
	color: var(--melp-muted-text);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
}

.melp-hero-stats span svg {
	width: 15px;
	height: 15px;
}

/* --------------------------------------------------------------------------
   13. Blog Tools — Search & Section Header
   -------------------------------------------------------------------------- */
.melp-blog-tools {
	border-block: 1px solid var(--melp-border);
	background: linear-gradient(180deg, var(--melp-muted) 0%, var(--melp-background) 100%);
}

.melp-tools-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 28px 0 20px;
}

.melp-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* icon tile next to section title */
.melp-section-title>span,
.melp-section-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius);
	background: #fff;
	color: var(--melp-red);
}

.melp-section-icon-wrap svg {
	width: 16px;
	height: 16px;
}

.melp-section-title h2 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.melp-tools-inner>div>p {
	margin: 6px 0 0 44px;
	color: var(--melp-muted-text);
	font-size: 13.5px;
}

/* search form */
.melp-search-form {
	position: relative;
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	gap: 8px;
	width: min(100%, 440px);
	border: 1px solid var(--melp-border);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(34, 32, 32, 0.06);
	padding: 6px;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.melp-search-form:focus-within {
	border-color: rgba(238, 65, 54, 0.35);
	box-shadow: 0 0 0 3px rgba(238, 65, 54, 0.08), 0 4px 20px rgba(34, 32, 32, 0.06);
}

.melp-search-form>span,
.melp-search-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--melp-muted);
	color: var(--melp-muted-text);
	flex-shrink: 0;
}

.melp-search-form>span svg,
.melp-search-icon-wrap svg {
	width: 15px;
	height: 15px;
}

.melp-search-form input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--melp-foreground);
	font-family: inherit;
	font-size: 14px;
}

.melp-search-form input::placeholder {
	color: var(--melp-muted-text);
}

.melp-search-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--melp-btn-radius);
	border-top-left-radius: 0;
	background: var(--melp-gradient);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 16px;
	box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.10);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.melp-search-form button:hover {
	background: var(--melp-gradient-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.15);
}

.melp-search-suggestions {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 30;
	border: 1px solid rgba(209, 208, 208, 0.9);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 20px 44px -22px rgba(34, 32, 32, 0.32);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	overflow: hidden;
}

.melp-search-suggestion-list {
	list-style: none;
	margin: 0;
	padding: 8px;
}

.melp-search-suggestion-item {
	border-radius: 14px;
}

.melp-search-suggestion-item+.melp-search-suggestion-item {
	margin-top: 4px;
}

.melp-search-suggestion-item.is-active,
.melp-search-suggestion-item:hover {
	background: rgba(242, 242, 242, 0.9);
}

.melp-search-suggestion-link,
.melp-search-suggestion-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 12px 14px;
	color: var(--melp-foreground);
}

.melp-search-suggestion-link {
	text-decoration: none;
}

.melp-search-suggestion-title {
	min-width: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}

.melp-search-suggestion-meta {
	flex-shrink: 0;
	color: var(--melp-muted-text);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.melp-search-suggestion-label,
.melp-search-suggestion-item.is-loading .melp-search-suggestion-label,
.melp-search-suggestion-item.is-empty .melp-search-suggestion-label {
	color: var(--melp-muted-text);
	font-size: 13px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   14. Category Filter Pills
   -------------------------------------------------------------------------- */
.melp-category-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 0 0 24px;
	scrollbar-width: none;
}

.melp-category-row::-webkit-scrollbar {
	display: none;
}

.melp-category-row a {
	flex: 0 0 auto;
	border: 1px solid var(--melp-border);
	border-radius: 999px;
	background: #fff;
	color: var(--melp-muted-text);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.melp-category-row a:hover {
	border-color: var(--melp-border-solid);
	background: #F2F2F2;
	color: var(--melp-foreground);
}

.melp-category-row a.is-active {
	border-color: var(--melp-foreground);
	background: var(--melp-foreground);
	color: #fff;
}

.melp-category-row a:focus-visible {
	outline: 2px solid var(--melp-foreground);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   15. Posts Section Wrapper
   -------------------------------------------------------------------------- */
.melp-posts-section {
	padding: 56px 0 80px;
}

/* --------------------------------------------------------------------------
   16. Featured Post Card
   -------------------------------------------------------------------------- */
.melp-featured-wrapper {
	margin-bottom: 16px;
}

.melp-featured-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.melp-featured-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius);
	background: #fff;
	color: var(--melp-foreground);
}

.melp-featured-header-icon svg {
	width: 16px;
	height: 16px;
}

.melp-featured-header h2 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
}

.melp-featured-post {
	overflow: hidden;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-lg);
	background: var(--melp-popover);
	box-shadow: var(--melp-shadow);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.melp-featured-post:hover {
	box-shadow: 0 28px 80px rgba(34, 32, 32, 0.13);
	border-color: var(--melp-border-strong);
}

.melp-featured-link {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	min-height: 420px;
}

.melp-featured-media {
	position: relative;
	overflow: hidden;
	background: var(--melp-muted);
}

.melp-featured-media img {
	height: 100%;
	object-fit: cover;
}

.melp-featured-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent 60%, rgba(255, 255, 255, 0.95) 100%);
	pointer-events: none;
}

.melp-post-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--melp-muted), var(--melp-muted-strong));
}

.melp-featured-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
}

.melp-kicker {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.melp-featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--melp-radius);
	background: var(--melp-foreground);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 10px;
}

.melp-featured-badge svg {
	width: 12px;
	height: 12px;
}

.melp-kicker-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--melp-muted-text);
	font-size: 13px;
}

.melp-kicker-meta svg {
	width: 14px;
	height: 14px;
}

.melp-featured-content h2 {
	margin: 0 0 14px;
	font-family: var(--melp-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: normal;
	color: #222020;
}

.melp-featured-content>p {
	margin: 0 0 24px;
	color: var(--melp-muted-text);
	font-size: 1.05rem;
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.melp-featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--melp-radius-lg);
	border-top-left-radius: 0;
	/* Melp signature */
	background: var(--melp-gradient);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 20px;
	box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.10), 0 8px 24px -4px rgba(0, 0, 0, 0.08);
	width: fit-content;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.melp-featured-cta svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.melp-featured-post:hover .melp-featured-cta {
	background: var(--melp-gradient-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.15), 0 12px 32px -4px rgba(0, 0, 0, 0.10);
}

.melp-featured-post:hover .melp-featured-cta svg {
	transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   17. Post Grid & Post Card
   -------------------------------------------------------------------------- */
.melp-grid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.melp-grid-label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.melp-grid-label-bar {
	width: 48px;
	height: 4px;
	border-radius: 999px;
	background: var(--melp-gradient);
}

.melp-grid-label h3 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.melp-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.melp-post-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-lg);
	background: var(--melp-background);
	box-shadow: 0 4px 16px rgba(34, 32, 32, 0.05);
	transition: transform 0.28s cubic-bezier(0.21, 0.47, 0.32, 0.98),
		box-shadow 0.28s ease,
		border-color 0.28s ease;
}

.melp-post-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(34, 32, 32, 0.12);
	border-color: var(--melp-border-strong);
}

.melp-post-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.melp-post-card-link {
	color: #222020;
}

.melp-post-card-media {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--melp-muted);
}

.melp-post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.melp-post-card:hover .melp-post-card-media img {
	transform: scale(1.05);
}

.melp-post-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(34, 32, 32, 0.5) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.melp-post-card:hover .melp-post-card-media::after {
	opacity: 1;
}

.melp-card-date-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: var(--melp-radius);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	color: var(--melp-muted-text);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 9px;
	box-shadow: 0 2px 8px rgba(34, 32, 32, 0.1);
}

.melp-card-date-badge svg {
	width: 12px;
	height: 12px;
}

.melp-post-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 20px;
}

.melp-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.melp-post-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: var(--melp-radius);
	background: var(--melp-muted);
	color: var(--melp-muted-text);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 8px;
}

.melp-post-meta-pill svg {
	width: 12px;
	height: 12px;
}

.melp-post-card-body h2 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.melp-post-card-body>p {
	margin: 0;
	color: var(--melp-muted-text);
	font-size: 13.5px;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.melp-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--melp-border);
}

.melp-read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--melp-foreground);
	font-size: 13px;
	font-weight: 700;
	transition: color 0.18s ease;
}

.melp-read-more svg {
	width: 15px;
	height: 15px;
	transition: transform 0.2s ease;
}

.melp-post-card:hover .melp-read-more {
	color: var(--melp-red);
}

.melp-post-card:hover .melp-read-more svg {
	transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   18. Empty State
   -------------------------------------------------------------------------- */
.melp-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 20px;
	text-align: center;
}

.melp-empty-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-md);
	background: var(--melp-muted);
	color: var(--melp-muted-text);
	margin-bottom: 24px;
}

.melp-empty-icon-wrap svg {
	width: 36px;
	height: 36px;
}

.melp-empty-state h2 {
	margin: 0 0 10px;
	font-size: 1.6rem;
	font-weight: 700;
}

.melp-empty-state p {
	margin: 0 0 24px;
	color: var(--melp-muted-text);
	max-width: 380px;
}

.melp-empty-state a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--melp-btn-radius);
	border-top-left-radius: 0;
	background: var(--melp-gradient);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 22px;
	box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.10);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.melp-empty-state a:hover {
	background: var(--melp-gradient-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   19. Pagination
   -------------------------------------------------------------------------- */
.melp-pagination-wrap {
	padding-top: 48px;
}

.melp-pagination-wrap .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.melp-pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius);
	background: #fff;
	color: var(--melp-muted-text);
	font-size: 14px;
	font-weight: 600;
	padding: 0 12px;
	transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.melp-pagination-wrap .page-numbers:hover {
	background: var(--melp-muted);
	color: var(--melp-foreground);
}

.melp-pagination-wrap .page-numbers.current {
	background: var(--melp-gradient);
	border-color: transparent;
	color: #fff;
}

.melp-pagination-wrap .page-numbers.dots {
	border: 0;
	background: transparent;
}

.melp-pagination-wrap .prev,
.melp-pagination-wrap .next {
	padding: 0 14px;
}

/* ==========================================================================
   SINGLE POST PAGE
   ========================================================================== */

/* 20. Breadcrumb */
.melp-breadcrumb {
	border-bottom: 1px solid var(--melp-border);
	background: rgba(247, 247, 247, 0.6);
}

.melp-breadcrumb .melp-container {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 14px;
	padding-bottom: 14px;
}

.melp-breadcrumb a {
	color: var(--melp-muted-text);
	font-size: 13.5px;
}

.melp-breadcrumb a:hover {
	color: var(--melp-foreground);
}

.melp-breadcrumb span {
	color: var(--melp-muted-text);
	font-size: 13.5px;
}

.melp-breadcrumb-sep {
	display: inline-flex;
	color: var(--melp-border-strong);
}

.melp-breadcrumb-sep svg {
	width: 14px;
	height: 14px;
}

/* 21. Single Hero */
.melp-single-main {
	min-height: 70vh;
}

.melp-single-hero {
	position: relative;
	overflow: hidden;
	background: var(--melp-background);
	padding: clamp(48px, 8vw, 96px) 0;
}

.melp-single-hero .melp-grid-bg {
	-webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 100%);
}

.melp-single-hero .melp-container {
	position: relative;
}

.melp-single-hero-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius);
	background: var(--melp-popover);
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.12), 0 10px 30px -8px rgba(0, 0, 0, 0.08);
}

.melp-single-hero-card.has-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 380px;
}

.melp-single-hero-media {
	position: relative;
	overflow: hidden;
	background: var(--melp-muted);
}

.melp-single-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.melp-single-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent 0%, rgba(245, 245, 247, 0.2) 60%, var(--melp-background) 100%);
	pointer-events: none;
}

.melp-single-hero-content {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	gap: 24px;
}

.melp-single-hero-meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.melp-single-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--melp-radius);
	background: var(--melp-foreground);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 4px 10px;
	letter-spacing: 0.01em;
}

.melp-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--melp-border-solid);
}

.melp-single-hero-content h1 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--melp-foreground);
}

.melp-single-hero-content>p {
	margin: 0;
	color: var(--melp-muted-text);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.melp-single-hero-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: linear-gradient(to top, var(--melp-background), transparent);
	pointer-events: none;
}

/* 22. Article Layout */
.melp-article-layout {
	display: flex;
	gap: 40px;
	padding-top: 0;
	padding-bottom: 64px;
}

.melp-article-sidebar {
	flex: 0 0 288px;
	align-self: flex-start;
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: calc(100vh - 112px);
}

.melp-article-content {
	min-width: 0;
	flex: 1;
}

/* 23. TOC Card */
.melp-toc-card {
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-md);
	background: var(--melp-popover);
	padding: 20px;
	min-height: 0;
	flex: 1;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.melp-toc-card::-webkit-scrollbar {
	display: none;
}

.melp-toc-card h2 {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--melp-muted-text);
}

.melp-toc-card nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.melp-toc-card nav a {
	display: block;
	color: var(--melp-muted-text);
	font-size: 13.5px;
	line-height: 1.55;
	padding: 6px 0;
	transition: color 0.18s;
}

.melp-toc-card nav a:hover {
	color: var(--melp-foreground);
}

.melp-toc-card nav a.is-active {
	color: var(--melp-foreground);
	font-weight: 600;
}

.melp-toc-card nav a.level-3 {
	padding-left: 16px;
	font-size: 13px;
	border-left: 1px solid var(--melp-border);
	margin-left: 4px;
}

/* Mobile TOC */
.melp-mobile-toc {
	padding: 0 0 24px;
}

.melp-mobile-toc details {
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-md);
	background: rgba(242, 242, 242, 0.3);
	overflow: hidden;
}

.melp-mobile-toc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--melp-foreground);
	cursor: pointer;
	list-style: none;
}

.melp-mobile-toc summary::-webkit-details-marker {
	display: none;
}

.melp-mobile-toc-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.melp-mobile-toc-label svg {
	width: 16px;
	height: 16px;
}

.melp-mobile-toc-chevron {
	display: inline-flex;
	color: var(--melp-muted-text);
	transition: transform 0.2s ease;
}

.melp-mobile-toc-chevron svg {
	width: 16px;
	height: 16px;
}

.melp-mobile-toc details[open] .melp-mobile-toc-chevron {
	transform: rotate(180deg);
}

.melp-mobile-toc details[open] summary {
	border-bottom: 1px solid var(--melp-border);
}

.melp-mobile-toc nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 12px 16px 16px;
}

.melp-mobile-toc nav a {
	display: block;
	color: var(--melp-muted-text);
	font-size: 13.5px;
	padding: 5px 0;
	transition: color 0.18s;
}

.melp-mobile-toc nav a.level-3 {
	padding-left: 16px;
	font-size: 13px;
	border-left: 1px solid var(--melp-border);
	margin-left: 4px;
}

.melp-mobile-toc nav a:hover {
	color: var(--melp-foreground);
}

/* 24. Sidebar CTA */
.melp-side-cta {
	border: 1px solid rgba(34, 32, 32, 0.2);
	border-radius: var(--melp-radius-md);
	background: linear-gradient(135deg, rgba(34, 32, 32, 0.05) 0%, var(--melp-background) 50%, rgba(34, 32, 32, 0.05) 100%);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
}

.melp-side-cta-pill {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	border-radius: 999px;
	background: rgba(34, 32, 32, 0.1);
	color: var(--melp-foreground);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
}

.melp-side-cta h2 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--melp-foreground);
}

.melp-side-cta p {
	margin: 0;
	color: var(--melp-muted-text);
	font-size: 13.5px;
	line-height: 1.6;
}

.melp-side-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--melp-btn-radius);
	border-top-left-radius: 0;
	background: var(--melp-gradient);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 18px;
	align-self: flex-start;
	transition: filter 0.2s ease;
}

.melp-side-cta a:hover {
	filter: brightness(1.05);
}

/* 25. Article Prose */
.melp-article-content p,
.melp-article-content li {
	color: var(--melp-muted-text);
	font-size: 1.05rem;
	line-height: 1.82;
	margin-bottom: 1.2em;
}

.melp-article-content h2 {
	margin: 2.5rem 0 1rem;
	padding-bottom: 0.5rem;
	font-family: var(--melp-font-heading);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
	scroll-margin-top: 96px;
}

.melp-article-content h3 {
	margin: 2rem 0 0.8rem;
	font-family: var(--melp-font-heading);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	scroll-margin-top: 96px;
}

.melp-article-content h4 {
	margin: 1.6rem 0 0.6rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.melp-article-content a {
	color: var(--melp-accent);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(238, 65, 54, 0.3);
	text-underline-offset: 4px;
}

.melp-article-content a:hover {
	text-decoration-color: var(--melp-accent);
}

.melp-article-content strong {
	color: var(--melp-foreground);
	font-weight: 600;
}

.melp-article-content blockquote {
	margin: 2rem 0;
	border-left: 4px solid rgba(34, 32, 32, 0.6);
	border-radius: 0 var(--melp-radius) var(--melp-radius) 0;
	background: rgba(242, 242, 242, 0.5);
	padding: 1rem 1.5rem;
}

.melp-article-content blockquote p {
	color: var(--melp-muted-text);
	margin: 0;
}

.melp-article-content code {
	background: var(--melp-muted-strong);
	border-radius: 5px;
	color: var(--melp-foreground);
	font-size: 0.88em;
	padding: 2px 6px;
}

.melp-article-content pre {
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius-md);
	background: var(--melp-muted-strong);
	overflow-x: auto;
	padding: 1.2rem 1.5rem;
	margin: 1.6rem 0;
}

.melp-article-content pre code {
	background: transparent;
	padding: 0;
}

.melp-article-content ul,
.melp-article-content ol {
	padding-left: 1.6rem;
	margin: 1rem 0 1.6rem;
}

.melp-article-content hr {
	border: 0;
	border-top: 1px solid var(--melp-border);
	margin: 2.5rem 0;
}

.melp-article-content table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--melp-border);
	border-radius: var(--melp-radius);
	overflow: hidden;
	margin: 1.6rem 0;
}

.melp-article-content th {
	background: var(--melp-muted);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--melp-border);
}

.melp-article-content td {
	padding: 10px 14px;
	font-size: 14px;
	border-top: 1px solid var(--melp-border);
	color: var(--melp-muted-text);
}

/* 26. Share Card */
.melp-share-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 48px 0;
	padding: 32px 0;
	border-top: 1px solid var(--melp-border);
	border-bottom: 1px solid var(--melp-border);
}

.melp-share-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--melp-foreground);
}

.melp-share-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.melp-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--melp-border-solid);
	border-radius: 999px;
	background: transparent;
	color: var(--melp-foreground);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 0 14px;
	transition: background 0.18s, border-color 0.18s;
}

.melp-share-btn img {
	width: 14px;
	height: 14px;
}

.melp-share-btn svg {
	width: 16px;
	height: 16px;
}

.melp-share-btn:hover {
	background: var(--melp-muted);
	border-color: var(--melp-border-solid);
}

.melp-share-btn.is-copied {
	background: rgba(16, 185, 129, 0.1);
	border-color: rgba(16, 185, 129, 0.3);
	color: #047857;
}

@media (max-width: 640px) {
	.melp-share-copy-label {
		display: none;
	}

	.melp-share-btn.js-copy-link {
		padding: 0;
	}
}

/* Article divider */
.melp-article-divider {
	border: 0;
	border-top: 1px solid var(--melp-border);
	margin: 0;
}

/* 27. Related Posts */
.melp-related-section {
	background: var(--melp-background);
	padding: 48px 0 64px;
}

.melp-related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 12px;
}

.melp-related-head h2 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--melp-foreground);
}

.melp-related-viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--melp-muted-text);
	font-size: 13.5px;
	font-weight: 500;
	transition: color 0.18s;
}

.melp-related-viewall:hover {
	color: var(--melp-foreground);
}

.melp-related-viewall svg {
	width: 14px;
	height: 14px;
}

.melp-related-viewall-mobile {
	display: none;
	margin-top: 24px;
	text-align: center;
}

/* 28. Bottom CTA */
.melp-bottom-cta {
	border-top: 1px solid var(--melp-border);
	background: rgba(242, 242, 242, 0.3);
}

.melp-bottom-cta .melp-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 48px;
	padding-bottom: 48px;
}

.melp-bottom-cta-copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.melp-bottom-cta h2 {
	margin: 0;
	font-family: var(--melp-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--melp-foreground);
}

.melp-bottom-cta p {
	margin: 0;
	color: var(--melp-muted-text);
	font-size: 14px;
}

.melp-bottom-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--melp-radius-md);
	background: var(--melp-foreground);
	color: var(--melp-background);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	transition: opacity 0.2s, box-shadow 0.2s;
}

.melp-bottom-cta-btn:hover {
	opacity: 0.9;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.melp-bottom-cta-btn svg {
	width: 16px;
	height: 16px;
}

/* 29. Footer — matches Next.js Footer.tsx
   bg-muted/30, grid-cols-5, social gap-1 no-border, badges w-12 h-12
   -------------------------------------------------------------------------- */
.melp-footer {
	position: relative;
	border-top: 1px solid var(--melp-border);
	background: rgba(242, 242, 242, 0.30);
	/* bg-muted/30 */
	overflow: hidden;
}

.melp-footer-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at bottom, rgba(34, 32, 32, 0.03) 0%, transparent 50%);
	pointer-events: none;
}

.melp-footer-shell {
	position: relative;
	width: min(100% - 32px, var(--melp-container-wide));
	margin-inline: auto;
	padding: 48px 0 24px;
}

/* 5-column grid: brand (220px) + 4 link columns */
.melp-footer-grid {
	display: grid;
	grid-template-columns: 220px repeat(4, minmax(0, 1fr));
	gap: 32px 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--melp-border);
}

/* Brand column — logo only, no description */
.melp-footer-brand a {
	display: inline-block;
}

.melp-footer-brand img {
	width: 130px;
	height: auto;
}

/* Link column headings — "text-sm font-semibold text-foreground" (NOT uppercase) */
.melp-footer-column h3,
.melp-footer-column h2 {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--melp-foreground);
	text-transform: none;
	letter-spacing: normal;
}

.melp-footer-column ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.melp-footer-column a {
	color: var(--melp-muted-text);
	font-size: 13.5px;
	transition: color 0.18s ease;
}

.melp-footer-column a:hover {
	color: var(--melp-foreground);
}

/* Middle row: social + badges, padding 32px top/bottom */
.melp-footer-middle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 32px 0 28px;
	border-bottom: 1px solid var(--melp-border);
}

/* Social links — gap-1 (4px), NO border, hover bg-[#F2F2F2] */
.melp-social-links {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* w-9 h-9 p-2 rounded-lg hover:bg-[#F2F2F2] — no border */
.melp-social-icon,
.melp-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	/* p-2: icon area = 36-16 = 20px */
	border: 0;
	border-radius: 8px;
	/* rounded-lg */
	background: transparent;
	color: var(--melp-muted-text);
	transition: background 0.3s ease;
	flex-shrink: 0;
}

.melp-social-icon:hover,
.melp-social-links a:hover {
	background: #F2F2F2;
	transform: none;
}

/* Icon fills padded area (20×20px usable) */
.melp-social-icon img,
.melp-social-links a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}

/* Compliance badges — flex gap-4, each: 48×48 icon + label */
.melp-compliance-badges {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.melp-badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/* w-12 h-12 rounded-lg bg-transparent group-hover:bg-[#F2F2F2] */
.melp-badge-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: transparent;
	transition: background 0.3s ease;
	overflow: hidden;
}

.melp-badge-item:hover .melp-badge-icon {
	background: #F2F2F2;
}

/* object-contain p-1 — image fits inside 48px container with 4px padding */
.melp-badge-icon img {
	width: 40px;
	/* 48 - 4px each side */
	height: 40px;
	object-fit: contain;
	display: block;
}

.melp-badge-item span,
.melp-compliance-badges span {
	font-size: 10px;
	font-weight: 700;
	color: var(--melp-muted-text);
	letter-spacing: 0.02em;
}

/* Bottom bar */
.melp-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 24px;
}

.melp-footer-bottom p {
	margin: 0;
	color: var(--melp-muted-text);
	font-size: 13px;
}

.melp-footer-bottom nav {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.melp-footer-bottom nav a {
	color: var(--melp-muted-text);
	font-size: 13px;
	transition: color 0.18s ease;
}

.melp-footer-bottom nav a:hover {
	color: var(--melp-foreground);
}

/* 30. Responsive */
@media (max-width: 1024px) {
	.melp-desktop-nav {
		display: none;
	}

	.melp-link-button {
		display: none;
	}

	.melp-menu-toggle {
		display: flex;
	}

	.melp-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.melp-featured-link {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.melp-featured-media {
		aspect-ratio: 16/9;
	}

	.melp-featured-media img {
		position: relative;
		inset: auto;
		height: 100%;
	}

	.melp-featured-media::after {
		background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, transparent 50%);
	}

	.melp-single-hero-card.has-image {
		grid-template-columns: 1fr;
	}

	.melp-single-hero-media {
		aspect-ratio: 16/10;
	}

	.melp-single-hero-media img {
		position: relative;
		inset: auto;
		height: 100%;
	}

	.melp-single-hero-overlay {
		background: linear-gradient(to top, rgba(245, 245, 247, 0.8), transparent);
	}

	.melp-article-layout {
		flex-direction: column;
	}

	.melp-article-sidebar {
		display: none;
	}

	.melp-related-viewall--desktop {
		display: none;
	}

	.melp-related-viewall-mobile {
		display: block;
	}
}

@media (max-width: 768px) {
	.melp-post-grid {
		grid-template-columns: 1fr;
	}

	.melp-hero-inner {
		padding: 60px 0 50px;
	}

	.melp-tools-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.melp-search-form {
		width: 100%;
	}

	.melp-footer-grid {
		grid-template-columns: 1fr;
	}

	.melp-footer-middle {
		flex-direction: column;
		align-items: flex-start;
	}

	.melp-bottom-cta .melp-container {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.melp-brand-button {
		display: none;
	}

	.melp-single-hero-content h1 {
		font-size: 1.7rem;
	}

	.melp-featured-content h2 {
		font-size: 1.8rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.melp-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}