/* ============================================================
 * Novara v7.3.0 — PERCEIVED QUALITY FINAL PASS
 *
 * This is the very last CSS layer. It exists to eliminate the
 * tiny imperfections that separate a great theme from a flagship
 * commercial product.
 *
 * Loaded AFTER motion-system.css. Pure refinement.
 * ============================================================ */

/* ──────────────────────────────────────────────
 * 1) VISUAL RHYTHM — 8-point grid enforcement
 * Tiny consistency tweaks that the eye notices
 * ────────────────────────────────────────────── */
.novara-container {
	padding-left:  clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
}
.novara-section {
	padding-top:    clamp(48px, 6vw, 80px);
	padding-bottom: clamp(48px, 6vw, 80px);
}
.novara-section--tight {
	padding-top:    clamp(32px, 4vw, 48px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

/* ──────────────────────────────────────────────
 * 2) TYPOGRAPHY SOPHISTICATION
 * Optical refinements only the trained eye sees
 * ────────────────────────────────────────────── */
body {
	font-variant-numeric: oldstyle-nums proportional-nums;
}
.novara-meta,
.novara-trending__meta,
time,
.novara-byline {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}
h1, h2, h3, .novara-headline {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
	text-rendering: geometricPrecision;
}
.novara-headline,
.novara-post-card__title,
.novara-card__title {
	text-wrap: balance;
}
p, .novara-lede {
	text-wrap: pretty;
}

/* Drop-cap option for editorial first-paragraph */
.novara-article__content > p:first-of-type::first-letter {
	font-family: var(--font-heading, "Playfair Display", Georgia, serif);
	font-size: 3.4em;
	font-weight: 800;
	line-height: 0.9;
	float: left;
	padding-right: 10px;
	padding-top: 4px;
	color: var(--novara-crimson, #E63946);
}
@media (max-width: 640px) {
	.novara-article__content > p:first-of-type::first-letter {
		font-size: 2.8em;
		padding-right: 8px;
	}
}

/* ──────────────────────────────────────────────
 * 3) PREMIUM FEEDBACK STATES
 * Tiny details that scream "expensive product"
 * ────────────────────────────────────────────── */

/* Pressed state for ALL interactive elements */
button:active,
a:active,
[role="button"]:active,
.novara-card:active {
	transition-duration: 60ms !important;
}

/* Loading state on a button (data-loading="true") */
.novara-btn[data-loading="true"],
.button[data-loading="true"] {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.novara-btn[data-loading="true"]::after,
.button[data-loading="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: novaraSpin 0.7s linear infinite;
}

/* Disabled state — subtle and clear */
button:disabled,
.button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	filter: saturate(0.6);
}

/* ──────────────────────────────────────────────
 * 4) INTERACTION FLUIDITY
 * Eliminate every remaining "click delay"
 * ────────────────────────────────────────────── */
button,
[role="button"],
.novara-btn,
.novara-icon-btn,
.novara-card,
a {
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
/* But keep text selectable */
p, h1, h2, h3, h4, h5, h6,
.novara-article__content,
.entry-content,
.novara-lede {
	-webkit-user-select: auto;
	user-select: auto;
}

/* ──────────────────────────────────────────────
 * 5) LUXURY POLISH — subtle gradients & shadows
 * ────────────────────────────────────────────── */

/* Article images — premium aspect-ratio container */
.novara-article__featured,
.novara-hero__image,
.novara-card__thumb,
.novara-post-card__thumb {
	background:
		linear-gradient(135deg, rgba(15, 22, 32, 0.04) 0%, transparent 60%),
		var(--bg-secondary, #f1f3f5);
	overflow: hidden;
}

/* Premium card shadow on rest (very subtle) */
.novara-card,
.novara-post-card,
article.post {
	box-shadow:
		0 1px 1px rgba(15, 22, 32, 0.02),
		0 2px 6px rgba(15, 22, 32, 0.025);
}
[data-theme="dark"] .novara-card,
[data-theme="dark"] .novara-post-card,
[data-theme="dark"] article.post {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.2),
		0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ──────────────────────────────────────────────
 * 6) RESPONSIVENESS CONSISTENCY
 * Eliminate jumpy layout shifts on breakpoint changes
 * ────────────────────────────────────────────── */
.novara-grid {
	display: grid;
	gap: clamp(16px, 2.5vw, 28px);
}
.novara-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.novara-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.novara-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Eliminate iframe weirdness */
iframe {
	max-width: 100%;
	border: 0;
}

/* Fluid images never overflow */
img, picture, video {
	max-width: 100%;
	height: auto;
}

/* ──────────────────────────────────────────────
 * 7) EDITORIAL SOPHISTICATION
 * Pull-quotes, asides, fancy lists
 * ────────────────────────────────────────────── */
.novara-article__content blockquote,
.entry-content blockquote {
	margin: 28px 0;
	padding: 8px 0 8px 28px;
	border-left: 4px solid var(--novara-crimson, #E63946);
	font-family: var(--font-heading, "Playfair Display", Georgia, serif);
	font-size: clamp(18px, 1.8vw + 12px, 22px);
	font-style: italic;
	line-height: 1.55;
	color: var(--text-primary, #0F1620);
}
.novara-article__content blockquote cite,
.entry-content blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	font-family: var(--font-body, "Inter", system-ui, sans-serif);
	color: var(--text-muted, #6b7280);
}

.novara-article__content ul,
.novara-article__content ol,
.entry-content ul,
.entry-content ol {
	padding-left: 22px;
	line-height: 1.7;
}
.novara-article__content li + li,
.entry-content li + li {
	margin-top: 6px;
}

/* ──────────────────────────────────────────────
 * 8) APP-LIKE RESPONSIVENESS — soft scrollbar
 * Already in luxury-refine.css; here we add smooth
 * overscroll behavior to prevent body bouncing
 * ────────────────────────────────────────────── */
html {
	overscroll-behavior-y: contain;
}
.novara-mobile-menu,
.novara-search-overlay,
.novara-modal {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────────
 * 9) FINAL POLISH — outline cleanup
 * Removes the default ugly browser focus while
 * keeping accessibility via :focus-visible
 * ────────────────────────────────────────────── */
:focus:not(:focus-visible) {
	outline: none;
}

/* ──────────────────────────────────────────────
 * 10) BACKDROP-FILTER PROGRESSIVE ENHANCEMENT
 * Only apply where supported — clean fallback
 * ────────────────────────────────────────────── */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
	.novara-search-overlay,
	.novara-modal__backdrop,
	.novara-mobile-menu-backdrop {
		backdrop-filter: saturate(160%) blur(10px);
		-webkit-backdrop-filter: saturate(160%) blur(10px);
		background-color: rgba(15, 22, 32, 0.55);
	}
}
@supports not (backdrop-filter: blur(10px)) {
	.novara-search-overlay,
	.novara-modal__backdrop,
	.novara-mobile-menu-backdrop {
		background-color: rgba(15, 22, 32, 0.78);
	}
}

/* ──────────────────────────────────────────────
 * 11) DARK MODE FINAL CONSISTENCY
 * ────────────────────────────────────────────── */
[data-theme="dark"] {
	color-scheme: dark;
}
[data-theme="light"] {
	color-scheme: light;
}
[data-theme="dark"] .novara-article__content blockquote,
[data-theme="dark"] .entry-content blockquote {
	border-left-color: var(--novara-gold, #F4B942);
}
[data-theme="dark"] .novara-article__content > p:first-of-type::first-letter {
	color: var(--novara-gold, #F4B942);
}

/* ──────────────────────────────────────────────
 * 12) FLAGSHIP-GRADE: feels expensive
 * ────────────────────────────────────────────── */

/* Brand dot gentle glow on focus */
.novara-logo-link:focus-visible .novara-logo__dot {
	box-shadow: 0 0 0 8px rgba(230, 57, 70, 0.2);
}

/* Number formatting in stats — tabular for alignment */
.novara-stat,
.novara-counter,
.novara-trending__rank,
.novara-social-card__count {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Subtle border-radius scale — premium products use one consistent scale */
:root {
	--r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
}

/* Final touch: subtle inner highlight on filled buttons (luxury detail) */
.novara-btn--primary::before,
.novara-subscribe-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 60%);
	pointer-events: none;
}
.novara-btn--primary,
.novara-subscribe-btn {
	position: relative;
	isolation: isolate;
}