/* ==========================================================================
   Nawami Widgets — front-end stylesheet
   --------------------------------------------------------------------------
   STRATEGY:
   1. Tokens are defined on every widget root via .nw-scope (scoped, not :root)
      so theme :root variables can never leak in or out.
   2. Every widget rule is prefixed with .nw- (wrapper) for high specificity.
   3. Buttons use scoped !important on the THREE properties themes hijack
      (background-color, color, border-color). Nothing else.
   4. RTL-first: layout uses flex/grid + logical properties where it matters.
   ========================================================================== */

/* ----- Theme injection guard ---------------------------------------------
   Some themes (Hello Elementor, Astra child themes, GeneratePress) add
   borders or pseudo-elements to <article>, <section>, <header>, or <hr>
   inside the main content area. Our widgets render their own <article>
   and <section> containers — strip any theme-injected chrome that would
   draw blue/colored bars across them.
   ========================================================================== */
.nw-scope article,
.nw-scope > section,
.nw-scope > article,
.nw-scope .nw-featured__article,
.nw-scope .nw-post-template article {
	background: transparent;
}
.nw-scope article {
	border-top: 0 !important;
	border-bottom: 0 !important;
}
.nw-scope article::before,
.nw-scope article::after,
.nw-scope > section::before,
.nw-scope > section::after {
	display: none !important;
	content: none !important;
}
.nw-scope hr {
	display: none;
}

/* ----- Universal icon sizing + button row-lock ---------------------------
   Defensive: every inline SVG inside our scope gets a sane default size, and
   every button locks to a single row. Without these, themes (or unsized SVGs
   from nawami_icon()) can let an icon balloon to fill the button, which then
   pushes the label/arrow onto a new line — turning a clean pill button into
   a giant vertical stack.
   ========================================================================== */

.nw-scope svg {
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
	vertical-align: middle;
}
.nw-btn,
.nw-header__strip-cta,
.nw-header__cta,
.nw-header__mobile-cta,
.nw-featured__readmore,
.nw-post-header__back,
.nw-card__meta-time,
.nw-card__meta-time,
.nw-post-header__meta-time {
	flex-wrap: nowrap;
	white-space: nowrap;
}
.nw-btn svg,
.nw-header__strip-cta svg,
.nw-header__cta svg,
.nw-header__mobile-cta svg {
	width: 1.125rem;
	height: 1.125rem;
}
.nw-btn--small svg,
.nw-header__strip-cta svg {
	width: 0.875rem;
	height: 0.875rem;
}
.nw-btn--large svg {
	width: 1.25rem;
	height: 1.25rem;
}
.nw-card__meta-time svg,
.nw-post-header__meta-time svg,
.nw-featured__meta-time svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* ----- Scoped design tokens ---------------------------------------------- */

.nw-scope {
	--nw-bg:                 #FBFCFE;
	--nw-fg:                 #071123;
	--nw-card:               #FFFFFF;
	--nw-primary:            #045291;
	--nw-primary-fg:         #FBFCFE;
	--nw-secondary:          #EFF2F7;
	--nw-muted:              #EFF2F7;
	--nw-muted-fg:           #5D646F;
	--nw-accent:             #E6EBF6;
	--nw-gold:               #CD9A50;
	--nw-cream:              #F6F9FC;
	--nw-border:             #E1E5EA;
	--nw-input:              #E5E8ED;
	--nw-ring:               #045291;

	--nw-gradient-royal:    linear-gradient(135deg, #001766 0%, #003789 100%);
	--nw-gradient-subtle:   linear-gradient(180deg, #FBFCFE 0%, #EFF2F7 100%);
	--nw-shadow-royal:       0 20px 50px -20px rgba(0, 36, 114, 0.35);
	--nw-shadow-card:        0 4px 24px -8px rgba(7, 17, 35, 0.08);
	--nw-shadow-card-hover:  0 16px 40px -12px rgba(7, 17, 35, 0.15);

	--nw-radius:             1rem;
	--nw-font:               "Alexandria", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

	font-family: var(--nw-font);
	color: var(--nw-fg);
	-webkit-font-smoothing: antialiased;
	direction: rtl;
}

/* Typography reset inside our scope */
.nw-scope,
.nw-scope p,
.nw-scope span,
.nw-scope a,
.nw-scope li,
.nw-scope blockquote,
.nw-scope small,
.nw-scope button,
.nw-scope input {
	font-family: var(--nw-font);
}
.nw-scope p,
.nw-scope span,
.nw-scope li,
.nw-scope a {
	font-weight: 300;
}
/* Headings: forced to 800 (extrabold) so a theme's body/heading rule cannot
   downgrade them to 600/700. Specific large display headings below override
   to 900 (black) for the Lovable hero / featured / section titles. */
.nw-scope h1,
.nw-scope h2,
.nw-scope h3,
.nw-scope h4,
.nw-scope h5,
.nw-scope h6 {
	font-family: var(--nw-font) !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	margin: 0;
}
.nw-scope strong,
.nw-scope b {
	font-weight: 700;
}

/* Black weight (900) for the hero, featured-section, and post-title display
   headings — Alexandria 800 in Arabic doesn't read as heavy as Latin, so we
   push to 900 for the headline-scale text. Sizes also forced with !important
   so the active theme can't shrink them. */
.nw-scope .nw-hero__title,
.nw-scope .nw-hero__title-accent,
.nw-scope .nw-featured__title,
.nw-scope .nw-articles__heading,
.nw-scope .nw-featured__heading,
.nw-scope .nw-cta-band__title,
.nw-scope .nw-post-header__title,
.nw-scope .nw-related__title,
.nw-scope .nw-inline-cta__title,
.nw-scope .nw-empty__title {
	font-weight: 900 !important;
	letter-spacing: -0.025em;
}
.nw-scope .nw-hero__title         { font-size: 3rem !important; line-height: 1.35 !important; }
.nw-scope .nw-featured__title,
.nw-scope .nw-articles__heading,
.nw-scope .nw-cta-band__title     { font-size: 2.25rem !important; line-height: 1.1 !important; }
.nw-scope .nw-featured__heading   { font-size: 1.875rem !important; line-height: 1.25 !important; }
.nw-scope .nw-post-header__title  { font-size: 2.25rem !important; line-height: 1.15 !important; }
.nw-scope .nw-related__title      { font-size: 1.875rem !important; line-height: 1.1 !important; }
.nw-scope .nw-inline-cta__title   { font-size: 1.5rem !important; line-height: 1.2 !important; }

@media (min-width: 768px) {
	.nw-scope .nw-hero__title         { font-size: 4.5rem !important; }
	.nw-scope .nw-featured__title,
	.nw-scope .nw-articles__heading,
	.nw-scope .nw-cta-band__title     { font-size: 3rem !important; }
	.nw-scope .nw-featured__heading   { font-size: 2.25rem !important; }
	.nw-scope .nw-post-header__title  { font-size: 3.75rem !important; }
	.nw-scope .nw-related__title      { font-size: 2.25rem !important; }
	.nw-scope .nw-inline-cta__title   { font-size: 1.875rem !important; }
}

/* Card titles, body, and excerpts — pinned with !important too so a theme
   can't shrink them. Card titles are font-extrabold (800) per Lovable. */
.nw-scope .nw-card__title             { font-size: 1.25rem !important; font-weight: 800 !important; line-height: 1.375 !important; }
.nw-scope .nw-card__excerpt           { font-size: 0.875rem !important; line-height: 1.625 !important; font-weight: 300 !important; }
.nw-scope .nw-featured__excerpt       { font-size: 1rem !important; line-height: 1.625 !important; font-weight: 300 !important; }
.nw-scope .nw-hero__description       { font-size: 1.125rem !important; line-height: 1.625 !important; font-weight: 300 !important; }
.nw-scope .nw-post-header__excerpt    { font-size: 1.125rem !important; line-height: 1.625 !important; font-weight: 300 !important; }
.nw-scope .nw-cta-band__description   { font-size: 1.125rem !important; line-height: 1.625 !important; font-weight: 300 !important; }
.nw-scope .nw-post-body__content p    { font-size: 1.125rem !important; line-height: 1.9 !important; font-weight: 300 !important; }
.nw-scope .nw-post-body__content li   { font-size: 1.125rem !important; line-height: 1.9 !important; font-weight: 300 !important; }
.nw-scope .nw-post-body__content h2   { font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.25 !important; }
.nw-scope .nw-post-body__content h3   { font-size: 1.25rem !important; font-weight: 800 !important; line-height: 1.35 !important; }

@media (min-width: 768px) {
	.nw-scope .nw-featured__excerpt     { font-size: 1.125rem !important; }
	.nw-scope .nw-post-body__content h2 { font-size: 1.875rem !important; }
}

/* Card titles, footer brand, post-body h2/h3 stay at 800 (substantial but not
   hero-level black). Already covered by the base !important rule. */

/* Box-sizing reset for our scope so theme resets don't break our layouts */
.nw-scope,
.nw-scope *,
.nw-scope *::before,
.nw-scope *::after {
	box-sizing: border-box;
}

/* Container width */
.nw-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1rem;
	width: 100%;
}
.nw-container--narrow {
	max-width: 768px;
}
.nw-container--medium {
	max-width: 1024px;
}

/* ----- Button system (scoped + theme-proof) ------------------------------ */

.nw-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border-radius: 9999px;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	font-family: var(--nw-font);
}
.nw-btn--primary {
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
	border-color: var(--nw-primary) !important;
}
.nw-btn--primary:hover {
	background-color: #001b5a !important;
	color: var(--nw-primary-fg) !important;
	border-color: #001b5a !important;
}
.nw-btn--ghost {
	background-color: var(--nw-card) !important;
	color: var(--nw-fg) !important;
	border-color: var(--nw-border) !important;
}
.nw-btn--ghost:hover {
	background-color: var(--nw-accent) !important;
	color: var(--nw-fg) !important;
	border-color: var(--nw-border) !important;
}
.nw-btn--invert {
	background-color: var(--nw-primary-fg) !important;
	color: var(--nw-primary) !important;
	border-color: var(--nw-primary-fg) !important;
}
.nw-btn--invert:hover {
	background-color: rgba(251, 252, 254, 0.9) !important;
	color: var(--nw-primary) !important;
}
.nw-btn--small {
	padding: 0.4rem 1.1rem;
	font-size: 0.78rem;
}
.nw-btn--large {
	padding: 1rem 2rem;
	font-size: 1.05rem;
}
.nw-btn .nw-arrow {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s;
}
.nw-btn:hover .nw-arrow {
	transform: translateX(0.25rem); /* RTL: arrow moves to the visual right (toward end of read direction) */
}

/* RTL: the "back-arrow" on shop buttons points left visually; flip on hover */
.nw-btn .nw-arrow--left {
	transform: scaleX(-1);
}
.nw-btn:hover .nw-arrow--left {
	transform: scaleX(-1) translateX(0.25rem);
}

/* ----- Eyebrow / pill chip ----------------------------------------------- */

.nw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.875rem;
	border-radius: 9999px;
	border: 1px solid var(--nw-border);
	background-color: var(--nw-card);
	color: var(--nw-muted-fg);
	font-size: 0.75rem;
	font-weight: 600;
}
.nw-eyebrow__dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: var(--nw-primary);
}

.nw-section-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-primary);
}

/* ----- Cards ------------------------------------------------------------- */

.nw-card {
	background-color: var(--nw-card);
	border: 1px solid var(--nw-border);
	border-radius: 1rem;
	box-shadow: var(--nw-shadow-card);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	color: var(--nw-fg);
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
}
.nw-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--nw-shadow-card-hover);
}
.nw-card__media {
	position: relative;
	overflow: hidden;
	height: 14rem;
}
.nw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s;
}
.nw-card:hover .nw-card__media img {
	transform: scale(1.1);
}
.nw-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}
.nw-card__category {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-primary);
}
.nw-card__title {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.375;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	margin: 0;
}
.nw-card__excerpt {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nw-muted-fg);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 300;
	margin: 0;
}
.nw-card__meta {
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--nw-muted-fg);
}
.nw-card__meta-time {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

/* ===========================================================================
   HEADER widget
   =========================================================================== */

.nw-header__wrapper {
	width: 100%;
}

/* Top strip */
.nw-header__strip {
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
}
.nw-header__strip-inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0.625rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
}
.nw-header__strip-text {
	opacity: 0.8;
	font-size: 0.75rem;
	color: var(--nw-primary-fg);
	margin: 0;
}
.nw-header__strip-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1.25rem;
	border-radius: 9999px;
	background-color: var(--nw-primary-fg) !important;
	color: var(--nw-primary) !important;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none !important;
	transition: opacity 0.2s;
	border: none;
}
.nw-header__strip-cta:hover {
	opacity: 0.9;
	background-color: var(--nw-primary-fg) !important;
	color: var(--nw-primary) !important;
}
.nw-header__strip-cta-icon {
	width: 0.875rem;
	height: 0.875rem;
}

@media (max-width: 640px) {
	.nw-header__strip-text {
		display: none;
	}
	.nw-header__strip-inner {
		justify-content: center;
	}
}

/* Main nav */
.nw-header__main {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--nw-border);
	background-color: rgba(251, 252, 254, 0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.nw-header__main-inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Logo */
.nw-header__logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none !important;
	color: var(--nw-fg);
}
.nw-header__logo-image {
	height: 2.75rem;
	width: auto;
	max-width: 160px;
	display: block;
	flex-shrink: 0;
	border-radius: 0.5rem;
	object-fit: contain;
}
.nw-header__logo-subtitle {
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nw-muted-fg);
	margin: 0;
}

/* Desktop nav */
.nw-header__nav {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.nw-header__nav-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(7, 17, 35, 0.7) !important;
	text-decoration: none !important;
	transition: color 0.2s;
}
.nw-header__nav-link:hover,
.nw-header__nav-link.is-active {
	color: var(--nw-fg) !important;
}

/* Header CTA — a separate, theme-proofed copy of nw-btn--primary */
.nw-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border-radius: 9999px;
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none !important;
	transition: opacity 0.2s;
	border: none;
}
.nw-header__cta:hover {
	opacity: 0.9;
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
}
.nw-header__cta-icon {
	width: 1rem;
	height: 1rem;
}

/* Mobile menu toggle */
.nw-header__toggle {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--nw-border);
	background-color: var(--nw-card);
	color: var(--nw-fg);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.nw-header__toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Mobile dropdown */
.nw-header__mobile {
	display: none;
	background-color: var(--nw-bg);
	border-bottom: 1px solid var(--nw-border);
	padding: 1rem;
}
.nw-header__mobile.is-open {
	display: block;
}
.nw-header__mobile-link {
	display: block;
	padding: 0.75rem 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--nw-fg) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--nw-border);
}
.nw-header__mobile-link:last-child {
	border-bottom: none;
}
.nw-header__mobile-cta {
	display: inline-flex;
	margin-top: 1rem;
}

@media (max-width: 768px) {
	.nw-header__nav,
	.nw-header__cta {
		display: none;
	}
	.nw-header__toggle {
		display: inline-flex;
	}
}

/* ===========================================================================
   HERO widget
   =========================================================================== */

.nw-hero {
	position: relative;
	overflow: hidden;
	background: var(--nw-gradient-subtle);
}
.nw-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 5rem 1rem;
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
	align-items: center;
}
.nw-hero__title {
	margin-top: 1.5rem;
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
}
.nw-hero__title-accent {
	color: var(--nw-primary);
	display: block;
	margin-top: 0.25em;
}
.nw-hero__description {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--nw-muted-fg);
	font-weight: 300;
}
.nw-hero__ctas {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.nw-hero__media {
	position: relative;
}
.nw-hero__image-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	box-shadow: var(--nw-shadow-royal);
}
.nw-hero__image-wrap img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.nw-hero__stat {
	position: absolute;
	bottom: -1.5rem;
	inset-inline-end: 1.5rem;
	background-color: var(--nw-card);
	border: 1px solid var(--nw-border);
	border-radius: 1rem;
	padding: 1.25rem;
	box-shadow: var(--nw-shadow-card);
	display: none;
}
.nw-hero__stat-value {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--nw-fg);
	margin: 0;
}
.nw-hero__stat-label {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-muted-fg);
}

@media (min-width: 768px) {
	.nw-hero__inner {
		padding: 7rem 1rem;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.nw-hero__title {
		font-size: 4.5rem;
	}
	.nw-hero__image-wrap img {
		aspect-ratio: 5 / 6;
	}
	.nw-hero__stat {
		display: block;
	}
}

/* ===========================================================================
   SEARCH BAR widget
   =========================================================================== */

.nw-search-section {
	border-block: 1px solid var(--nw-border);
	background-color: var(--nw-bg);
	padding: 2rem 0;
}
.nw-search-section__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.nw-search__form {
	max-width: 42rem;
	margin-inline: auto;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	border: 1px solid var(--nw-border);
	background-color: var(--nw-card);
	box-shadow: var(--nw-shadow-card);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.nw-search__form:focus-within {
	border-color: var(--nw-primary);
	box-shadow: var(--nw-shadow-card-hover);
}
.nw-search__icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--nw-muted-fg);
	flex-shrink: 0;
}
.nw-search__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: 1rem;
	color: var(--nw-fg);
	font-family: var(--nw-font);
	font-weight: 300;
}
.nw-search__input::placeholder {
	color: var(--nw-muted-fg);
}
.nw-search__submit {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 50%;
	color: var(--nw-muted-fg);
}
.nw-search__submit:hover {
	color: var(--nw-fg);
	background-color: var(--nw-accent);
}

.nw-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
}
.nw-categories__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-muted-fg);
	margin-inline-end: 0.5rem;
}
.nw-chip {
	border-radius: 9999px;
	border: 1px solid var(--nw-border);
	background-color: var(--nw-card);
	color: var(--nw-fg) !important;
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none !important;
	display: inline-block;
}
.nw-chip:hover {
	border-color: var(--nw-primary);
	color: var(--nw-primary) !important;
}
.nw-chip.is-active {
	border-color: var(--nw-primary);
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
}

/* ===========================================================================
   FEATURED POST widget
   =========================================================================== */

.nw-featured {
	max-width: 1280px;
	margin-inline: auto;
	padding: 5rem 1rem 0;
}
.nw-featured__head {
	margin-bottom: 3rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.nw-featured__title {
	margin-top: 0.75rem;
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	line-height: 1.1;
}
@media (min-width: 768px) {
	.nw-featured__title {
		font-size: 3rem;
	}
}
.nw-featured__article {
	display: grid;
	overflow: hidden;
	border-radius: 1.5rem;
	border: 1px solid var(--nw-border);
	background-color: var(--nw-card);
	box-shadow: var(--nw-shadow-card);
	transition: box-shadow 0.3s;
	color: var(--nw-fg);
	text-decoration: none !important;
}
.nw-featured__article:hover {
	box-shadow: var(--nw-shadow-card-hover);
}
.nw-featured__media {
	position: relative;
	overflow: hidden;
	height: 18rem;
	background-color: var(--nw-cream);
}
.nw-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s;
}
.nw-featured__article:hover .nw-featured__media img {
	transform: scale(1.05);
}
.nw-featured__badge {
	position: absolute;
	top: 1rem;
	inset-inline-end: 1rem;
	padding: 0.4rem 0.875rem;
	border-radius: 9999px;
	background-color: var(--nw-card);
	color: var(--nw-fg);
	font-size: 0.75rem;
	font-weight: 700;
}
.nw-featured__body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.25rem;
}
.nw-featured__category {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-primary);
}
.nw-featured__heading {
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	margin: 0;
}
.nw-featured__excerpt {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--nw-muted-fg);
	font-weight: 300;
	margin: 0;
}
.nw-featured__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--nw-muted-fg);
}
.nw-featured__dot {
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background-color: rgba(93, 100, 111, 0.4);
}
.nw-featured__readmore {
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--nw-primary) !important;
	text-decoration: none !important;
	transition: gap 0.2s;
	width: fit-content;
}
.nw-featured__readmore:hover {
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.nw-featured__article {
		grid-template-columns: 1fr 1fr;
	}
	.nw-featured__media {
		height: auto;
	}
	.nw-featured__body {
		padding: 3rem;
	}
	.nw-featured__heading {
		font-size: 2.25rem;
	}
	.nw-featured__excerpt {
		font-size: 1.125rem;
	}
}

/* ===========================================================================
   ARTICLES GRID widget
   =========================================================================== */

.nw-articles {
	max-width: 1280px;
	margin-inline: auto;
	padding: 5rem 1rem;
}
.nw-articles__head {
	margin-bottom: 3rem;
}
.nw-articles__heading {
	margin-top: 0.75rem;
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	line-height: 1.1;
}
@media (min-width: 768px) {
	.nw-articles__heading {
		font-size: 3rem;
	}
}
.nw-articles__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.nw-articles__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.nw-articles__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Pagination */
.nw-pagination {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.nw-pagination a,
.nw-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: 9999px;
	border: 1px solid var(--nw-border);
	background-color: var(--nw-card);
	color: var(--nw-fg);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none !important;
	transition: all 0.2s;
}
.nw-pagination a:hover {
	border-color: var(--nw-primary);
	color: var(--nw-primary);
}
.nw-pagination .current {
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
	border-color: var(--nw-primary);
}

/* Empty state */
.nw-empty {
	margin-top: 1rem;
	border-radius: 1.5rem;
	border: 1px dashed var(--nw-border);
	background-color: var(--nw-card);
	padding: 3rem;
	text-align: center;
}
.nw-empty__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--nw-fg);
}
.nw-empty__description {
	margin-top: 0.5rem;
	color: var(--nw-muted-fg);
}
.nw-empty__reset {
	margin-top: 1.5rem;
}

/* ===========================================================================
   CTA BAND widget
   =========================================================================== */

.nw-cta-band {
	background-color: var(--nw-primary) !important;
	color: var(--nw-primary-fg) !important;
}
.nw-cta-band__inner {
	max-width: 1024px;
	margin-inline: auto;
	padding: 5rem 1rem;
	text-align: center;
}
.nw-cta-band__title {
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nw-primary-fg);
	margin: 0;
	line-height: 1.1;
}
.nw-cta-band__description {
	margin: 1.25rem auto 0;
	max-width: 42rem;
	font-size: 1.125rem;
	line-height: 1.625;
	opacity: 0.8;
	color: var(--nw-primary-fg);
	font-weight: 300;
}
.nw-cta-band__cta {
	margin-top: 2rem;
}
@media (min-width: 768px) {
	.nw-cta-band__title {
		font-size: 3rem;
	}
}

/* ===========================================================================
   FOOTER widget
   =========================================================================== */

.nw-footer {
	border-top: 1px solid var(--nw-border);
	background-color: var(--nw-cream);
}
.nw-footer__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 4rem 1rem;
}
.nw-footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.nw-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.nw-footer__brand-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.nw-footer__brand-image {
	height: 3rem;
	width: auto;
	max-width: 220px;
	display: block;
	border-radius: 0.5rem;
	object-fit: contain;
}
.nw-footer__description {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--nw-muted-fg);
	font-weight: 300;
}
.nw-footer__col-title {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-muted-fg);
}
.nw-footer__links {
	margin-top: 1rem;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.nw-footer__links li {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nw-fg);
}
.nw-footer__links a {
	color: var(--nw-fg) !important;
	text-decoration: none !important;
	transition: color 0.2s;
}
.nw-footer__links a:hover {
	color: var(--nw-primary) !important;
}
.nw-footer__cta-description {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--nw-muted-fg);
	font-weight: 300;
}
.nw-footer__cta-btn {
	margin-top: 1.25rem;
}
.nw-footer__bottom {
	margin-top: 3rem;
	border-top: 1px solid var(--nw-border);
	padding-top: 1.5rem;
	text-align: center;
	font-size: 0.75rem;
	color: var(--nw-muted-fg);
}
.nw-footer__credit {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--nw-muted-fg);
}
.nw-footer__credit a {
	color: var(--nw-primary) !important;
	font-weight: 600;
	text-decoration: none !important;
}
.nw-footer__credit a:hover {
	text-decoration: underline !important;
}

/* ===========================================================================
   POST HEADER widget
   =========================================================================== */

.nw-post-header {
	max-width: 768px;
	margin-inline: auto;
	padding: 4rem 1rem 2.5rem;
	text-align: center;
}
@media (min-width: 768px) {
	.nw-post-header {
		padding-top: 6rem;
	}
}
.nw-post-header__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nw-muted-fg) !important;
	text-decoration: none !important;
	transition: color 0.2s;
}
.nw-post-header__back:hover {
	color: var(--nw-primary) !important;
}
.nw-post-header__back-icon {
	width: 0.875rem;
	height: 0.875rem;
}
.nw-post-header__category {
	margin-top: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--nw-primary);
}
.nw-post-header__title {
	margin-top: 2rem;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
}
@media (min-width: 768px) {
	.nw-post-header__title {
		font-size: 3.75rem;
	}
}
.nw-post-header__excerpt {
	margin-top: 1.5rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--nw-muted-fg);
	font-weight: 300;
}
.nw-post-header__meta {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--nw-muted-fg);
}
.nw-post-header__meta-dot {
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background-color: rgba(93, 100, 111, 0.4);
}
.nw-post-header__meta-time {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

/* Cover image (used by all-in-one post template AND standalone) */
.nw-post-cover {
	max-width: 1024px;
	margin-inline: auto;
	padding: 0 1rem;
}
.nw-post-cover__wrap {
	overflow: hidden;
	border-radius: 1.5rem;
	box-shadow: var(--nw-shadow-card);
}
.nw-post-cover__wrap img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ===========================================================================
   POST BODY widget
   =========================================================================== */

.nw-post-body {
	max-width: 48rem;
	margin-inline: auto;
	padding: 4rem 1rem;
}
.nw-post-body__content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.nw-post-body__content > * + * {
	margin-top: 0;
}
/* Section breaks: any h1/h2/h3/h4 after a paragraph gets larger top spacing,
   matching Lovable's space-y-10 between sections. */
.nw-post-body__content > p + h1,
.nw-post-body__content > p + h2,
.nw-post-body__content > p + h3,
.nw-post-body__content > p + h4,
.nw-post-body__content > ul + h1,
.nw-post-body__content > ul + h2,
.nw-post-body__content > ul + h3,
.nw-post-body__content > ul + h4,
.nw-post-body__content > ol + h1,
.nw-post-body__content > ol + h2,
.nw-post-body__content > ol + h3,
.nw-post-body__content > ol + h4,
.nw-post-body__content > blockquote + h1,
.nw-post-body__content > blockquote + h2,
.nw-post-body__content > blockquote + h3,
.nw-post-body__content > blockquote + h4 {
	margin-top: 1.5rem;
}
.nw-post-body__content section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.nw-post-body__content > section + section {
	margin-top: 1.5rem;
}
.nw-post-body__content h1,
.nw-post-body__content h2 {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	margin: 0;
	line-height: 1.25;
}
.nw-post-body__content h3,
.nw-post-body__content h4 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--nw-fg);
	margin: 0;
	line-height: 1.35;
}
.nw-post-body__content p {
	font-size: 1.125rem;
	line-height: 1.9;
	color: rgba(7, 17, 35, 0.85);
	font-weight: 300;
	margin: 0;
}
.nw-post-body__content ul,
.nw-post-body__content ol {
	font-size: 1.125rem;
	line-height: 1.9;
	color: rgba(7, 17, 35, 0.85);
	padding-inline-start: 1.5rem;
	font-weight: 300;
	margin: 0;
}
.nw-post-body__content ul li,
.nw-post-body__content ol li {
	margin-bottom: 0.4rem;
}
.nw-post-body__content blockquote {
	border-inline-start: 4px solid var(--nw-primary);
	padding: 0.5rem 1.25rem;
	font-style: italic;
	color: var(--nw-muted-fg);
	margin: 0;
}
.nw-post-body__content img {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
	margin: 0;
}
.nw-post-body__content a {
	color: var(--nw-primary);
	text-decoration: underline;
}
@media (min-width: 768px) {
	.nw-post-body__content h1,
	.nw-post-body__content h2 {
		font-size: 1.875rem;
	}
}

/* ===========================================================================
   INLINE CTA widget
   =========================================================================== */

.nw-inline-cta {
	max-width: 48rem;
	margin-inline: auto;
	padding: 0 1rem 4rem;
}
.nw-inline-cta__card {
	border-radius: 1.5rem;
	border: 1px solid var(--nw-border);
	background: var(--nw-gradient-subtle);
	padding: 2rem;
	text-align: center;
}
@media (min-width: 768px) {
	.nw-inline-cta__card {
		padding: 2.5rem;
	}
}
.nw-inline-cta__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--nw-fg);
	margin: 0;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.nw-inline-cta__title {
		font-size: 1.875rem;
	}
}
.nw-inline-cta__description {
	margin: 0.75rem auto 0;
	max-width: 28rem;
	color: var(--nw-muted-fg);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
}
.nw-inline-cta__btn {
	margin-top: 1.5rem;
}

/* ===========================================================================
   RELATED POSTS widget
   =========================================================================== */

.nw-related {
	border-top: 1px solid var(--nw-border);
	background: var(--nw-gradient-subtle);
	padding: 5rem 0;
}
.nw-related__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 1rem;
}
.nw-related__head {
	margin-bottom: 3rem;
	text-align: center;
}
.nw-related__title {
	margin-top: 0.75rem;
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nw-fg);
	line-height: 1.1;
}
@media (min-width: 768px) {
	.nw-related__title {
		font-size: 2.25rem;
	}
}
.nw-related__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.nw-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.nw-related__card .nw-card__media {
	height: 13rem;
}
.nw-related__card .nw-card__title {
	font-size: 1.125rem;
}

/* ===========================================================================
   POST TEMPLATE (all-in-one) widget
   The all-in-one wrapper just composes the parts above; the only special
   rules it needs are the spacing between blocks.
   =========================================================================== */

.nw-post-template {
	background-color: var(--nw-bg);
}

/* ===========================================================================
   Mobile overflow protection (catch-all)
   =========================================================================== */

.nw-scope img,
.nw-scope video {
	max-width: 100%;
}
.nw-scope {
	overflow-wrap: break-word;
}