/*!
 * Nizwas Service Areas — front-end styles
 * Colors/fonts are CSS custom properties, overridden live from the
 * Customizer (see NSA_Customizer::get_css_variables()). Defaults below
 * match the Nizwas IT Solutions brand (deep purple + Poppins/Inter).
 *
 * WHY EVERY SELECTOR BELOW IS PREFIXED WITH #nsa-app:
 * This site runs Elementor. Elementor's Global Colors/Fonts are output
 * as sitewide rules (e.g. targeting `h1,h2,h3...` or `a` directly) that
 * (a) carry !important and (b) are enqueued LATE in the page — by
 * design, so Elementor always "wins" against other plugins. A plugin
 * rule with only class-level specificity (e.g. `.nsa-single-title`) can
 * tie Elementor's specificity, and on a tie the LAST rule in the source
 * wins — which was Elementor, not this plugin. That's why headings kept
 * losing even after `!important` was added consistently.
 * The fix: give every rule ID-level specificity via `#nsa-app` (the
 * wrapper div's id, present on every archive/single page this plugin
 * renders). An ID always outranks any number of classes, full stop —
 * so it no longer matters what order Elementor's CSS loads in.
 * `.nsa-wrap` is kept as a secondary, lower-specificity target purely so
 * the [nizwas_service_areas] shortcode (which can be embedded without
 * the #nsa-app wrapper, e.g. on the homepage) still gets base styling.
 */

:root{
	--nsa-primary: #160022;
	--nsa-primary-light: #3a1361;
	--nsa-accent: #7C3AED;
	--nsa-accent-2: #F5A623;
	--nsa-text: #1F1235;
	--nsa-muted: #6B7280;
	--nsa-surface: #FFFFFF;
	--nsa-surface-alt: #F7F5FB;
	--nsa-border: #ECE7F5;
	--nsa-font-heading: 'Poppins', sans-serif;
	--nsa-font-body: 'Inter', sans-serif;
	--nsa-radius: 16px;
	--nsa-grid-columns: 3;
	--nsa-grid-min-width: 300px;
	--nsa-shadow-sm: 0 2px 10px rgba(22,0,34,.06);
	--nsa-shadow-md: 0 12px 32px rgba(22,0,34,.10);
	--nsa-shadow-lg: 0 24px 60px rgba(22,0,34,.18);
}

#nsa-app, #nsa-app *, .nsa-wrap, .nsa-wrap *{ box-sizing:border-box; }

/* Guaranteed-readable page background (WordPress auto-adds these body classes). */
body.single-service_area,
body.post-type-archive-service_area,
body.tax-service_region{
	background: var(--nsa-surface) !important;
}

#nsa-app, .nsa-wrap{
	font-family: var(--nsa-font-body) !important;
	color: var(--nsa-text) !important;
	line-height:1.65;
	background: var(--nsa-surface);
}
.nsa-wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }

/* Headings — base default (component-specific rules further down override this) */
#nsa-app :where(h1,h2,h3,h4), .nsa-wrap :where(h1,h2,h3,h4){
	font-family: var(--nsa-font-heading) !important;
	color: var(--nsa-primary) !important;
	line-height:1.25;
	margin:0 0 .5em;
	font-weight:700;
}

/* Base link color/style */
#nsa-app a, .nsa-wrap a{ color: var(--nsa-accent) !important; text-decoration:none !important; }
#nsa-app a:hover, .nsa-wrap a:hover{ color: var(--nsa-primary-light) !important; }
#nsa-app a:focus-visible, .nsa-wrap a:focus-visible,
#nsa-app button:focus-visible, .nsa-wrap button:focus-visible{ outline:3px solid var(--nsa-accent-2); outline-offset:2px; }
#nsa-app img, .nsa-wrap img{ max-width:100%; height:auto; display:block; }

.nsa-page, #nsa-app.nsa-page{ background: var(--nsa-surface); overflow-x:hidden; /* contains any overflow from the hero's full-bleed breakout below to just our own wrapper, without touching body (which would risk breaking the theme's own sticky header) */ }

/* Neutralise common theme resets that can break the CSS grid. */
#nsa-app article, .nsa-wrap article,
#nsa-app .nsa-grid, .nsa-wrap .nsa-grid,
#nsa-app .nsa-single-layout, .nsa-wrap .nsa-single-layout{ float:none !important; }
#nsa-app .nsa-grid, .nsa-wrap .nsa-grid{ display:grid !important; }
#nsa-app .nsa-single-layout, .nsa-wrap .nsa-single-layout{ display:grid !important; }

/* ---------- Buttons ---------- */
#nsa-app .nsa-btn, .nsa-wrap .nsa-btn{
	display:inline-flex !important; align-items:center; gap:8px;
	padding:14px 28px; border-radius:999px;
	font-family: var(--nsa-font-heading) !important; font-weight:600; font-size:15px;
	background: var(--nsa-primary) !important; color:#fff !important;
	box-shadow: var(--nsa-shadow-sm);
	text-decoration:none !important;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
	white-space:nowrap;
}
#nsa-app .nsa-btn:hover, .nsa-wrap .nsa-btn:hover{ transform: translateY(-2px); box-shadow: var(--nsa-shadow-md); color:#fff !important; background: var(--nsa-primary-light) !important; }
#nsa-app .nsa-btn-accent, .nsa-wrap .nsa-btn-accent{ background: linear-gradient(135deg, var(--nsa-accent), var(--nsa-primary-light)) !important; }
#nsa-app .nsa-cta-phone, .nsa-wrap .nsa-cta-phone{ opacity:.85; font-weight:500; color:#fff !important; }

/* ================= HERO (archive) ================= */
#nsa-app .nsa-hero, .nsa-wrap .nsa-hero{
	background: radial-gradient(120% 140% at 15% 0%, var(--nsa-primary-light) 0%, var(--nsa-primary) 55%, #0c0016 100%) !important;
	padding: 96px 24px 84px;
	text-align:center;
	position:relative;
	overflow:hidden;
	/* Full-bleed: breaks out of the theme's centered content container to
	   span the true viewport width, regardless of nesting depth — this
	   works reliably as long as every ancestor is itself horizontally
	   centered (margin:0 auto), which is standard theme behaviour. */
	width:100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
#nsa-app .nsa-hero::before, .nsa-wrap .nsa-hero::before{
	content:"";
	position:absolute; inset:0;
	background:
		radial-gradient(circle at 85% 20%, rgba(124,58,237,.35), transparent 55%),
		radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
	background-size: auto, 22px 22px;
	pointer-events:none;
}
#nsa-app .nsa-hero-glow, .nsa-wrap .nsa-hero-glow{
	position:absolute; width:480px; height:480px; border-radius:50%;
	background: radial-gradient(circle, rgba(245,166,35,.18), transparent 70%);
	bottom:-220px; left:50%; transform:translateX(-50%);
	pointer-events:none;
}
#nsa-app .nsa-hero-pin, .nsa-wrap .nsa-hero-pin{
	position:absolute; color: rgba(255,255,255,.14); pointer-events:none;
	animation: nsa-pin-float 6s ease-in-out infinite;
}
#nsa-app .nsa-hero-pin-1, .nsa-wrap .nsa-hero-pin-1{ top:18%; left:9%; animation-delay:0s; }
#nsa-app .nsa-hero-pin-2, .nsa-wrap .nsa-hero-pin-2{ top:65%; left:16%; animation-delay:1.2s; color: rgba(245,166,35,.22); }
#nsa-app .nsa-hero-pin-3, .nsa-wrap .nsa-hero-pin-3{ top:28%; right:12%; animation-delay:2.4s; }
@keyframes nsa-pin-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@media (prefers-reduced-motion: reduce){ #nsa-app .nsa-hero-pin, .nsa-wrap .nsa-hero-pin{ animation:none; } }

#nsa-app .nsa-hero-inner, .nsa-wrap .nsa-hero-inner{ max-width:760px; margin:0 auto; position:relative; }
#nsa-app .nsa-eyebrow, .nsa-wrap .nsa-eyebrow{
	display:inline-block; font-family: var(--nsa-font-heading) !important; font-weight:600; font-size:12px;
	letter-spacing:2px; color: var(--nsa-accent-2) !important; background: rgba(255,255,255,.08) !important;
	padding:6px 16px; border-radius:999px; margin-bottom:20px;
	border:1px solid rgba(255,255,255,.12);
}
#nsa-app .nsa-hero-title, .nsa-wrap .nsa-hero-title{ color:#fff !important; font-size: clamp(32px, 5vw, 52px); margin-bottom:16px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
#nsa-app .nsa-hero-sub, .nsa-wrap .nsa-hero-sub{ color: rgba(255,255,255,.85) !important; font-size:18px; max-width:600px; margin:0 auto; }

#nsa-app .nsa-hero-stats, .nsa-wrap .nsa-hero-stats{
	display:flex; align-items:stretch; justify-content:center; gap:16px;
	margin-top:40px; flex-wrap:wrap; position:relative;
}
#nsa-app .nsa-hero-stat, .nsa-wrap .nsa-hero-stat{
	display:flex; flex-direction:column; align-items:center; gap:4px;
	background: rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12);
	border-radius:16px; padding:18px 28px; backdrop-filter: blur(6px);
	transition: background .25s ease, transform .25s ease;
}
#nsa-app .nsa-hero-stat:hover, .nsa-wrap .nsa-hero-stat:hover{ background: rgba(255,255,255,.1) !important; transform: translateY(-3px); }
#nsa-app .nsa-hero-stat-icon, .nsa-wrap .nsa-hero-stat-icon{ color: var(--nsa-accent-2) !important; margin-bottom:4px; }
#nsa-app .nsa-hero-stat-num, .nsa-wrap .nsa-hero-stat-num{ font-family: var(--nsa-font-heading) !important; font-weight:800; font-size:26px; color:#fff !important; }
#nsa-app .nsa-hero-stat-label, .nsa-wrap .nsa-hero-stat-label{ font-size:12.5px; color: rgba(255,255,255,.7) !important; letter-spacing:.3px; }
#nsa-app .nsa-hero-stat-divider, .nsa-wrap .nsa-hero-stat-divider{ display:none; }

/* ================= FILTER TABS ================= */
#nsa-app .nsa-filter-tabs, .nsa-wrap .nsa-filter-tabs{
	display:flex !important; flex-wrap:wrap; gap:10px; justify-content:center;
	background: var(--nsa-surface) !important; border-radius: var(--nsa-radius);
	box-shadow: var(--nsa-shadow-md); padding:14px; margin: -46px auto 48px; position:relative; z-index:2;
	max-width:900px;
}
#nsa-app .nsa-filter-btn, .nsa-wrap .nsa-filter-btn{
	font-family: var(--nsa-font-heading) !important; font-weight:600; font-size:14px;
	border:none; background:transparent !important; color: var(--nsa-muted) !important;
	padding:10px 20px; border-radius:999px; cursor:pointer; transition:.2s ease;
}
#nsa-app .nsa-filter-btn:hover, .nsa-wrap .nsa-filter-btn:hover{ background: var(--nsa-surface-alt) !important; color: var(--nsa-primary) !important; }
#nsa-app .nsa-filter-btn.is-active, .nsa-wrap .nsa-filter-btn.is-active{ background: var(--nsa-primary) !important; color:#fff !important; }

/* ================= GRID ================= */
#nsa-app .nsa-archive-main, .nsa-wrap .nsa-archive-main{ padding: 40px 0 12px; }
#nsa-app .nsa-section-heading, .nsa-wrap .nsa-section-heading{ font-size:24px; margin-bottom:24px; color: var(--nsa-primary) !important; }
#nsa-app .nsa-term-card .nsa-card-body, .nsa-wrap .nsa-term-card .nsa-card-body{ padding:26px 24px; position:relative; }
#nsa-app .nsa-term-card, .nsa-wrap .nsa-term-card{ border-top:3px solid var(--nsa-accent); }

/*
 * [nizwas_service_areas] shortcode header (eyebrow + heading) and footer
 * "View All" CTA — text and visibility for both are fully controlled from
 * Areas We Serve → Settings, and can be overridden per-shortcode via its
 * own eyebrow="" / heading="" / show_cta="" / cta_text="" / cta_url=""
 * attributes. Colors use the same brand variables as the rest of the
 * plugin (Appearance → Customize → Service Areas — Brand Design), so
 * this follows whatever palette is already set there.
 */
#nsa-app .nsa-grid-header, .nsa-wrap .nsa-grid-header{ text-align:center; max-width:640px; margin:0 auto 32px; padding:0 16px; }
#nsa-app .nsa-grid-eyebrow, .nsa-wrap .nsa-grid-eyebrow{
	display:inline-flex; align-items:center; gap:8px; font-family: var(--nsa-font-heading) !important; font-weight:600; font-size:12px;
	letter-spacing:1.5px; text-transform:uppercase; color: var(--nsa-accent) !important; background: var(--nsa-surface-alt) !important;
	padding:7px 18px; border-radius:999px; margin-bottom:16px; border:1px solid var(--nsa-border);
}
#nsa-app .nsa-grid-eyebrow-dot, .nsa-wrap .nsa-grid-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background: var(--nsa-accent); flex-shrink:0; }
/*
 * Two heading color themes, chosen per-placement (see the heading_theme
 * shortcode attribute / Settings field) — this shortcode is explicitly
 * designed to be dropped into any page, and a single fixed color can't
 * read correctly on both a plain light page (like this one) and a dark
 * hero/CTA-style section. "dark" is the default since a plain page
 * background is the more common case; switch a specific placement to
 * "light" only when it's actually sitting on a dark section.
 */
#nsa-app .nsa-grid-header.nsa-theme-dark .nsa-grid-heading, .nsa-wrap .nsa-grid-header.nsa-theme-dark .nsa-grid-heading{
	font-size: clamp(24px, 3.4vw, 38px); line-height:1.25; margin:0; color: var(--nsa-primary) !important; text-shadow:none;
}
#nsa-app .nsa-grid-header.nsa-theme-light .nsa-grid-heading, .nsa-wrap .nsa-grid-header.nsa-theme-light .nsa-grid-heading{
	font-size: clamp(24px, 3.4vw, 38px); line-height:1.25; margin:0; color:#fff !important; text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
#nsa-app .nsa-grid-cta, .nsa-wrap .nsa-grid-cta{ text-align:center; margin-top:4px; padding-bottom:8px; }
#nsa-app .nsa-grid-cta-btn, .nsa-wrap .nsa-grid-cta-btn{
	display:inline-block; font-family: var(--nsa-font-heading) !important; font-weight:600; font-size:15.5px;
	color:#fff !important; text-decoration:none !important; padding:15px 36px; border-radius:999px;
	background: linear-gradient(135deg, var(--nsa-accent), var(--nsa-primary-light)) !important;
	box-shadow: var(--nsa-shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
#nsa-app .nsa-grid-cta-btn:hover, .nsa-wrap .nsa-grid-cta-btn:hover{ transform: translateY(-2px); box-shadow: var(--nsa-shadow-md); color:#fff !important; }
@media (max-width:600px){
	#nsa-app .nsa-grid-header, .nsa-wrap .nsa-grid-header{ margin:0 auto 24px; }
	#nsa-app .nsa-grid-eyebrow, .nsa-wrap .nsa-grid-eyebrow{ font-size:11px; padding:6px 14px; margin-bottom:12px; }
	#nsa-app .nsa-grid-cta-btn, .nsa-wrap .nsa-grid-cta-btn{ display:block; width:100%; max-width:320px; margin:0 auto; text-align:center; padding:14px 28px; }
}

#nsa-app .nsa-grid, .nsa-wrap .nsa-grid{
	grid-template-columns: repeat(auto-fit, minmax(var(--nsa-grid-min-width, 300px), 1fr));
	gap:28px;
	padding: 8px 0 48px;
}
@media (max-width:600px){
	#nsa-app .nsa-grid, .nsa-wrap .nsa-grid{ grid-template-columns:1fr; gap:20px; padding:8px 0 32px; }
}
#nsa-app .nsa-card, .nsa-wrap .nsa-card{
	background: var(--nsa-primary) !important;
	background-image: linear-gradient(160deg, #1c0a30 0%, var(--nsa-primary) 100%) !important;
	border:1px solid rgba(255,255,255,.08);
	border-radius: var(--nsa-radius);
	overflow:hidden;
	box-shadow: var(--nsa-shadow-sm);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	opacity:0; transform:translateY(16px);
	animation: nsa-card-in .5s ease forwards;
}
@keyframes nsa-card-in{ to{ opacity:1; transform:translateY(0); } }
#nsa-app .nsa-card:hover, .nsa-wrap .nsa-card:hover{ transform: translateY(-6px); box-shadow: var(--nsa-shadow-lg); border-color: var(--nsa-accent); }
#nsa-app .nsa-grid .nsa-card:nth-child(1), .nsa-wrap .nsa-grid .nsa-card:nth-child(1){ animation-delay:.03s; }
#nsa-app .nsa-grid .nsa-card:nth-child(2), .nsa-wrap .nsa-grid .nsa-card:nth-child(2){ animation-delay:.08s; }
#nsa-app .nsa-grid .nsa-card:nth-child(3), .nsa-wrap .nsa-grid .nsa-card:nth-child(3){ animation-delay:.13s; }
#nsa-app .nsa-grid .nsa-card:nth-child(4), .nsa-wrap .nsa-grid .nsa-card:nth-child(4){ animation-delay:.18s; }
#nsa-app .nsa-grid .nsa-card:nth-child(5), .nsa-wrap .nsa-grid .nsa-card:nth-child(5){ animation-delay:.23s; }
#nsa-app .nsa-grid .nsa-card:nth-child(n+6), .nsa-wrap .nsa-grid .nsa-card:nth-child(n+6){ animation-delay:.28s; }
@media (prefers-reduced-motion: reduce){
	#nsa-app .nsa-card, .nsa-wrap .nsa-card{ animation:none; opacity:1; transform:none; }
}
#nsa-app .nsa-card-link, .nsa-wrap .nsa-card-link{ display:block; color:inherit !important; text-decoration:none !important; }
#nsa-app .nsa-card-media, .nsa-wrap .nsa-card-media{ position:relative; aspect-ratio:16/11; background: var(--nsa-surface-alt) !important; overflow:hidden; }
#nsa-app .nsa-card-media img, .nsa-wrap .nsa-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
#nsa-app .nsa-card:hover .nsa-card-media img, .nsa-wrap .nsa-card:hover .nsa-card-media img{ transform: scale(1.08); }
#nsa-app .nsa-card-media-fade, .nsa-wrap .nsa-card-media-fade{
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(22,0,34,0) 55%, rgba(22,0,34,.55) 100%);
	pointer-events:none;
}
/* Letter-monogram placeholder shown when an area has no featured image —
   matches the site's own "Recent Work" case-study card style: a diagonal
   dark-purple gradient with a single large accent-colored initial. */
#nsa-app .nsa-card-monogram, .nsa-wrap .nsa-card-monogram{
	width:100%; height:100%; display:flex; align-items:center; justify-content:center;
	background: linear-gradient(135deg, #2a1145 0%, #4a1a5c 55%, #1c0a30 100%) !important;
	position:relative;
}
#nsa-app .nsa-card-monogram::before, .nsa-wrap .nsa-card-monogram::before{
	content:""; position:absolute; inset:0;
	background: radial-gradient(circle at 30% 30%, rgba(245,166,35,.12), transparent 60%);
}
#nsa-app .nsa-card-monogram span, .nsa-wrap .nsa-card-monogram span{
	font-family: var(--nsa-font-heading) !important; font-weight:800; font-size:72px;
	color: var(--nsa-accent) !important; text-shadow: 0 0 40px rgba(124,58,237,.5);
	position:relative;
}
#nsa-app .nsa-card-ref-pill, .nsa-wrap .nsa-card-ref-pill{
	position:absolute; top:14px; right:14px; z-index:1;
	background: rgba(0,0,0,.35) !important; color: rgba(255,255,255,.75) !important;
	font-family: var(--nsa-font-body) !important; font-size:10px; font-weight:600; letter-spacing:.5px;
	padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
}
#nsa-app .nsa-card-badge, .nsa-wrap .nsa-card-badge{
	position:absolute; bottom:14px; right:14px; z-index:1; width:40px; height:40px; border-radius:50%;
	background:#fff !important; display:flex; align-items:center; justify-content:center;
	box-shadow: var(--nsa-shadow-sm); overflow:hidden;
}
#nsa-app .nsa-card-badge img, .nsa-wrap .nsa-card-badge img{ width:26px; height:26px; object-fit:contain; }
#nsa-app .nsa-card-body, .nsa-wrap .nsa-card-body{ padding:22px 24px 24px; }
#nsa-app .nsa-card-region-label, .nsa-wrap .nsa-card-region-label{
	display:block; font-family: var(--nsa-font-heading) !important; font-size:11px; font-weight:700;
	letter-spacing:1.2px; text-transform:uppercase; color: var(--nsa-accent) !important; margin-bottom:10px;
}
#nsa-app .nsa-card-title, .nsa-wrap .nsa-card-title{ font-size:19px; margin-bottom:8px; color:#fff !important; }
#nsa-app .nsa-card-desc, .nsa-wrap .nsa-card-desc{ color: rgba(255,255,255,.6) !important; font-size:14.5px; margin:0 0 16px; }
#nsa-app .nsa-card-meta, .nsa-wrap .nsa-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
#nsa-app .nsa-card-response, .nsa-wrap .nsa-card-response{ display:flex; align-items:center; gap:6px; font-size:12.5px; color: rgba(255,255,255,.55) !important; }
#nsa-app .nsa-card-cta, .nsa-wrap .nsa-card-cta{ font-family: var(--nsa-font-heading) !important; font-weight:600; font-size:13.5px; color: var(--nsa-accent-2) !important; display:flex; align-items:center; gap:4px; transition: gap .2s ease; }
#nsa-app .nsa-card:hover .nsa-card-cta, .nsa-wrap .nsa-card:hover .nsa-card-cta{ gap:8px; }

#nsa-app .nsa-empty, .nsa-wrap .nsa-empty{ text-align:center; padding:80px 20px; color: var(--nsa-muted) !important; }

/* Pagination */
#nsa-app .nsa-pagination, .nsa-wrap .nsa-pagination{ display:flex; justify-content:center; padding-bottom:60px; }
#nsa-app .nsa-pagination .page-numbers, .nsa-wrap .nsa-pagination .page-numbers{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; margin:0 4px; border-radius:10px;
	background: var(--nsa-surface-alt) !important; color: var(--nsa-primary) !important; font-weight:600; font-size:14px;
	text-decoration:none !important;
}
#nsa-app .nsa-pagination .page-numbers.current, .nsa-wrap .nsa-pagination .page-numbers.current{ background: var(--nsa-primary) !important; color:#fff !important; }

/* Archive bottom CTA */
#nsa-app .nsa-archive-cta, .nsa-wrap .nsa-archive-cta{ background: var(--nsa-surface-alt) !important; border-radius: calc(var(--nsa-radius) + 8px); padding:56px 40px; text-align:center; margin: 20px 0 80px; }
#nsa-app .nsa-archive-cta-icon, .nsa-wrap .nsa-archive-cta-icon{
	display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
	background: linear-gradient(135deg, var(--nsa-accent), var(--nsa-primary-light)) !important; color:#fff !important; margin-bottom:18px;
}
#nsa-app .nsa-archive-cta h2, .nsa-wrap .nsa-archive-cta h2{ font-size:26px; color: var(--nsa-primary) !important; }
#nsa-app .nsa-archive-cta p, .nsa-wrap .nsa-archive-cta p{ color: var(--nsa-muted) !important; margin-bottom:24px; }

/* ================= SINGLE PAGE — HERO ================= */
/*
 * The overlay is now an ::after pseudo-element with position:absolute;
 * inset:0 so it always covers the FULL hero image, however tall it is.
 * (Previously the overlay <div> only sized to fit its own text content,
 * leaving the top of a tall/busy featured image completely uncovered —
 * that's what made the hero look "broken" over a bright image.)
 */
#nsa-app .nsa-single-hero, .nsa-wrap .nsa-single-hero{
	background-size:cover !important; background-position:center !important; position:relative;
	width:100vw; min-height:420px; display:flex; align-items:flex-end; overflow:hidden;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
#nsa-app .nsa-single-hero::after, .nsa-wrap .nsa-single-hero::after{
	content:"";
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(10,0,18,.55) 0%, rgba(10,0,18,.75) 55%, rgba(10,0,18,.97) 100%) !important;
	pointer-events:none;
}
#nsa-app .nsa-single-hero-overlay, .nsa-wrap .nsa-single-hero-overlay{ position:relative; z-index:1; width:100%; padding:56px 24px 40px; }
#nsa-app .nsa-single-hero-inner, .nsa-wrap .nsa-single-hero-inner{ max-width:1280px; margin:0 auto; }
#nsa-app .nsa-single-header-plain, .nsa-wrap .nsa-single-header-plain{ padding:56px 0 8px; background: var(--nsa-surface) !important; }
#nsa-app .nsa-breadcrumbs, .nsa-wrap .nsa-breadcrumbs{ font-size:13px; color: rgba(255,255,255,.9) !important; margin-bottom:14px; display:flex; gap:8px; flex-wrap:wrap; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
#nsa-app .nsa-single-header-plain .nsa-breadcrumbs, .nsa-wrap .nsa-single-header-plain .nsa-breadcrumbs{ color: var(--nsa-muted) !important; text-shadow:none; }
#nsa-app .nsa-breadcrumbs a, .nsa-wrap .nsa-breadcrumbs a{ color:inherit !important; text-decoration:underline !important; text-underline-offset:2px; }
#nsa-app .nsa-single-title, .nsa-wrap .nsa-single-title{ color:#fff !important; font-size: clamp(28px, 4vw, 44px); margin-bottom:12px; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
#nsa-app .nsa-single-header-plain .nsa-single-title, .nsa-wrap .nsa-single-header-plain .nsa-single-title{ color: var(--nsa-primary) !important; text-shadow:none; }
#nsa-app .nsa-pill, .nsa-wrap .nsa-pill{ display:inline-block; background: rgba(255,255,255,.15) !important; color:#fff !important; font-size:13px; font-weight:600; padding:6px 16px; border-radius:999px; }

#nsa-app .nsa-single-layout, .nsa-wrap .nsa-single-layout{ grid-template-columns: 2fr 1fr; gap:48px; padding:56px 0 80px; align-items:start; background: var(--nsa-surface) !important; }
#nsa-app .nsa-single-layout.nsa-no-sidebar, .nsa-wrap .nsa-single-layout.nsa-no-sidebar{ grid-template-columns: 1fr; }
#nsa-app .nsa-single-main, .nsa-wrap .nsa-single-main{ min-width:0; }
#nsa-app .nsa-single-sidebar, .nsa-wrap .nsa-single-sidebar{ min-width:0; }

#nsa-app .nsa-regions, .nsa-wrap .nsa-regions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
#nsa-app .nsa-region-tag, .nsa-wrap .nsa-region-tag{ font-size:12.5px; font-weight:600; background: var(--nsa-surface-alt) !important; color: var(--nsa-primary) !important; padding:6px 14px; border-radius:999px; text-decoration:none !important; }
#nsa-app .nsa-region-tag:hover, .nsa-wrap .nsa-region-tag:hover{ background: var(--nsa-primary) !important; color:#fff !important; }

/* Editor content typography (left column) */
#nsa-app .nsa-entry-content, .nsa-wrap .nsa-entry-content{ font-size:16.5px; color: var(--nsa-text) !important; overflow-wrap:break-word; word-break:break-word; }
#nsa-app .nsa-entry-content h1:not(.has-text-color), #nsa-app .nsa-entry-content h2:not(.has-text-color), #nsa-app .nsa-entry-content h3:not(.has-text-color), #nsa-app .nsa-entry-content h4:not(.has-text-color),
.nsa-wrap .nsa-entry-content h1:not(.has-text-color), .nsa-wrap .nsa-entry-content h2:not(.has-text-color), .nsa-wrap .nsa-entry-content h3:not(.has-text-color), .nsa-wrap .nsa-entry-content h4:not(.has-text-color){ color: var(--nsa-primary) !important; }
#nsa-app .nsa-entry-content h2, .nsa-wrap .nsa-entry-content h2{ font-size:26px; margin-top:1.6em; }
#nsa-app .nsa-entry-content h3, .nsa-wrap .nsa-entry-content h3{ font-size:21px; margin-top:1.4em; }
/*
 * :not(.has-text-color) below is the fix for FAQ/accordion (and any other)
 * blocks that set their own text color from the block editor's Color
 * panel — e.g. light text deliberately chosen for a dark accordion
 * answer. Gutenberg adds the `has-text-color` class automatically
 * whenever an explicit color is picked for a block, so excluding it here
 * means we only force our default brand text color onto plain paragraphs
 * that were left on "Default", instead of overriding a color the content
 * author explicitly chose. Without this, that explicit color was always
 * being crushed back to the same dark default no matter what was picked
 * in the editor — which is exactly what made FAQ answer text vanish
 * against its own dark background.
 */
#nsa-app .nsa-entry-content p:not(.has-text-color), .nsa-wrap .nsa-entry-content p:not(.has-text-color){ margin:0 0 1.2em; color: var(--nsa-text) !important; }
/*
 * Exception for a paragraph sitting INSIDE a blockquote (Gutenberg wraps
 * a quote's text in its own <p> inside the <blockquote>). Without this,
 * the rule above still catches that inner <p> specifically and forces it
 * back to the plugin's default dark text color — overriding whatever
 * color the blockquote itself provides (its own default, or a
 * page-specific custom design like a dark pull-quote card) — which is
 * exactly what was making quote text unreadable here even after the
 * blockquote's background/color rule itself was already winning
 * correctly. `inherit` means it just takes on the blockquote's color,
 * whatever that turns out to be, only on this template ('.nsa-entry-content'
 * only exists on the single Area page).
 */
#nsa-app .nsa-entry-content blockquote p:not(.has-text-color), .nsa-wrap .nsa-entry-content blockquote p:not(.has-text-color){ color: inherit !important; }
#nsa-app .nsa-entry-content p, .nsa-wrap .nsa-entry-content p{ margin:0 0 1.2em; }
#nsa-app .nsa-entry-content ul, #nsa-app .nsa-entry-content ol, .nsa-wrap .nsa-entry-content ul, .nsa-wrap .nsa-entry-content ol{ margin:0 0 1.2em; padding-left:1.4em; }
#nsa-app .nsa-entry-content li:not(.has-text-color), .nsa-wrap .nsa-entry-content li:not(.has-text-color){ margin-bottom:.4em; color: var(--nsa-text) !important; }
#nsa-app .nsa-entry-content li, .nsa-wrap .nsa-entry-content li{ margin-bottom:.4em; }
#nsa-app .nsa-entry-content img, .nsa-wrap .nsa-entry-content img{ border-radius: var(--nsa-radius); margin:1.2em 0; box-shadow: var(--nsa-shadow-sm); }
/*
 * No #nsa-app ID and no !important here, unlike most rules in this file.
 * That ID-level specificity trick exists specifically to beat Elementor's
 * sitewide Global Color rules (see the note at the top of this file) —
 * but Elementor's Global Colors don't target `blockquote`, so there's
 * nothing here that actually needs beating.
 *
 * `:where(...)` wraps the scoping part so it contributes ZERO
 * specificity — only the bare `blockquote` element counts. That means
 * any real page-specific or theme quote styling (even a single class
 * like `.wp-block-quote` on its own) is GUARANTEED to win, regardless
 * of which stylesheet happens to load first in <head>. Relying on
 * matching specificity and hoping source order favoured the custom
 * design was the mistake in the previous version of this rule — it
 * silently lost because this plugin's stylesheet turned out to load
 * after Elementor's custom CSS, not before.
 */
:where(.nsa-entry-content) blockquote{
	border-left:4px solid var(--nsa-accent); margin:1.6em 0; padding:.6em 0 .6em 1.4em;
	font-style:italic; color: var(--nsa-primary); background: var(--nsa-surface-alt); border-radius:0 12px 12px 0;
}
#nsa-app .nsa-entry-content table, .nsa-wrap .nsa-entry-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; }
#nsa-app .nsa-entry-content table th, #nsa-app .nsa-entry-content table td,
.nsa-wrap .nsa-entry-content table th, .nsa-wrap .nsa-entry-content table td{ border:1px solid var(--nsa-border); padding:10px 14px; text-align:left; color: var(--nsa-text) !important; }
#nsa-app .nsa-entry-content table th, .nsa-wrap .nsa-entry-content table th{ background: var(--nsa-surface-alt) !important; font-family: var(--nsa-font-heading) !important; }
#nsa-app .nsa-entry-content a, .nsa-wrap .nsa-entry-content a{ color: var(--nsa-accent) !important; text-decoration:underline !important; text-underline-offset:3px; }
#nsa-app .nsa-entry-content a:hover, .nsa-wrap .nsa-entry-content a:hover{ color: var(--nsa-primary-light) !important; }

/*
 * Companion case to the :not(.has-text-color) rules above: a block that
 * sets BOTH a custom background color AND a custom text color at its own
 * (container) level — e.g. a Group block built as a dark FAQ/accordion
 * card — rather than on each inner paragraph individually. Gutenberg
 * marks that container with both `has-background` and `has-text-color`;
 * this tells its descendants to inherit the container's own chosen color
 * instead of picking up our forced default from further up.
 */
#nsa-app .nsa-entry-content .has-background.has-text-color, #nsa-app .nsa-entry-content .has-background.has-text-color *,
.nsa-wrap .nsa-entry-content .has-background.has-text-color, .nsa-wrap .nsa-entry-content .has-background.has-text-color *{ color: inherit !important; }

/*
 * FAQ / Accordion block (core Gutenberg `core/accordion`, confirmed via
 * live DevTools inspection — classes `wp-block-accordion-heading` and
 * `wp-block-accordion-panel`) — two fixes:
 *
 * 1. Force white answer text, on request, rather than requiring an
 *    explicit color choice per-block in the editor. Placed after the
 *    `p:not(.has-text-color)` rule above so it wins the tie in source
 *    order (both are equal specificity + !important).
 *
 * 2. Mobile truncation fix: the question heading is a flex row (icon +
 *    question text + toggle icon). Flex items default to
 *    `min-width: auto`, which stops them shrinking below their content's
 *    natural width — so on a narrow screen the row overflows sideways
 *    and the question text gets visually clipped at the container edge
 *    instead of wrapping onto a second line. `min-width: 0` plus
 *    allowing wrap fixes that without touching the desktop layout.
 */
#nsa-app .nsa-entry-content .wp-block-accordion-panel p, #nsa-app .nsa-entry-content .wp-block-accordion-panel *,
.nsa-wrap .nsa-entry-content .wp-block-accordion-panel p, .nsa-wrap .nsa-entry-content .wp-block-accordion-panel *{ color:#FFFFFF !important; }

/*
 * Mobile title-wrapping fix, strengthened: the first attempt (flex-wrap +
 * min-width:0, no !important) wasn't enough — titles were still getting
 * clipped instead of wrapping to a second line on narrow screens. Two
 * likely reasons, both covered now: (a) something in the theme's own
 * accordion CSS sets `white-space: nowrap` on the heading/title, which
 * blocks wrapping regardless of flex settings — now forced back to
 * `normal`; (b) the flex row might be one level up, on the accordion
 * item itself rather than the heading — now covered too. `!important`
 * here is a functional/layout fix (text must be able to wrap), not a
 * color or branding override, so it's safe to force.
 */
#nsa-app .nsa-entry-content .wp-block-accordion-heading, .nsa-wrap .nsa-entry-content .wp-block-accordion-heading,
#nsa-app .nsa-entry-content .wp-block-accordion-item, .nsa-wrap .nsa-entry-content .wp-block-accordion-item{
	flex-wrap: wrap !important; min-width:0; height:auto !important;
}
#nsa-app .nsa-entry-content .wp-block-accordion-heading > *, .nsa-wrap .nsa-entry-content .wp-block-accordion-heading > *,
#nsa-app .nsa-entry-content .wp-block-accordion-item > *, .nsa-wrap .nsa-entry-content .wp-block-accordion-item > *{
	min-width:0; white-space:normal !important; overflow-wrap:break-word !important; word-break:break-word; text-overflow:clip !important; overflow:visible !important;
}
@media (max-width: 480px){
	#nsa-app .nsa-entry-content .wp-block-accordion-heading, .nsa-wrap .nsa-entry-content .wp-block-accordion-heading{
		font-size: 15px; line-height:1.35;
	}
}

#nsa-app .nsa-zip-box, #nsa-app .nsa-map-box, .nsa-wrap .nsa-zip-box, .nsa-wrap .nsa-map-box{ margin-top:40px; padding-top:32px; border-top:1px solid var(--nsa-border); }
#nsa-app .nsa-children-grid-section, .nsa-wrap .nsa-children-grid-section{ margin-top:44px; padding-top:36px; border-top:1px solid var(--nsa-border); }
#nsa-app .nsa-children-grid-section h2, .nsa-wrap .nsa-children-grid-section h2{ font-size:22px; margin-bottom:20px; color: var(--nsa-primary) !important; }
#nsa-app .nsa-grid-children, .nsa-wrap .nsa-grid-children{ grid-template-columns: repeat(2, 1fr); gap:20px; padding:0; }
#nsa-app .nsa-grid-children .nsa-card-body, .nsa-wrap .nsa-grid-children .nsa-card-body{ padding:18px 20px 20px; }
#nsa-app .nsa-grid-children .nsa-card-title, .nsa-wrap .nsa-grid-children .nsa-card-title{ font-size:17px; }
#nsa-app .nsa-zip-box h2, #nsa-app .nsa-map-box h2, .nsa-wrap .nsa-zip-box h2, .nsa-wrap .nsa-map-box h2{ font-size:20px; color: var(--nsa-primary) !important; }
#nsa-app .nsa-zip-box p, .nsa-wrap .nsa-zip-box p{ color: var(--nsa-text) !important; }
#nsa-app .nsa-map-frame, .nsa-wrap .nsa-map-frame{ border-radius: var(--nsa-radius); overflow:hidden; box-shadow: var(--nsa-shadow-sm); aspect-ratio:16/8; }
#nsa-app .nsa-map-frame iframe, .nsa-wrap .nsa-map-frame iframe{ width:100%; height:100%; border:0; }

#nsa-app .nsa-single-cta, .nsa-wrap .nsa-single-cta{
	margin-top:48px; background: linear-gradient(120deg, var(--nsa-primary), var(--nsa-primary-light)) !important;
	border-radius: calc(var(--nsa-radius) + 6px); padding:36px 32px; display:flex; align-items:center; justify-content:space-between;
	gap:24px; flex-wrap:wrap;
}
#nsa-app .nsa-single-cta h2, .nsa-wrap .nsa-single-cta h2{ color:#fff !important; font-size:22px; margin-bottom:6px; }
#nsa-app .nsa-single-cta p, .nsa-wrap .nsa-single-cta p{ color: rgba(255,255,255,.8) !important; margin:0; }

#nsa-app .nsa-back-link, .nsa-wrap .nsa-back-link{ margin-top:32px; }
#nsa-app .nsa-back-link a, .nsa-wrap .nsa-back-link a{ font-weight:600; font-family: var(--nsa-font-heading) !important; color: var(--nsa-accent) !important; text-decoration:none !important; }
#nsa-app .nsa-back-link a:hover, .nsa-wrap .nsa-back-link a:hover{ color: var(--nsa-primary-light) !important; }

/* ---------- RIGHT SIDEBAR: 4 widget zones ---------- */
#nsa-app .nsa-single-sidebar, .nsa-wrap .nsa-single-sidebar{ display:flex; flex-direction:column; gap:24px; position:sticky; top:24px; }

/*
 * The card box now wraps the whole ZONE, not each individual widget.
 * Previously every widget got its own separate boxed card (before_widget
 * in class-nsa-widgets.php), so e.g. a "Heading" widget followed by a
 * "Recent Posts" widget in the same zone rendered as two visually
 * disconnected boxes with a gap between them. Now multiple widgets
 * stacked in one zone combine into a single cohesive card, with just a
 * light divider between them — matching what a "title + content" pair
 * of widgets is meant to look like.
 */
#nsa-app .nsa-sidebar-zone, .nsa-wrap .nsa-sidebar-zone{
	background: var(--nsa-surface) !important; border:1px solid var(--nsa-border); border-radius: var(--nsa-radius);
	box-shadow: var(--nsa-shadow-sm); overflow:hidden;
}
/*
 * Overflow safety net for embedded widgets whose own internal layout
 * uses flexbox (very common for accordion/FAQ widgets: an icon + number
 * badge + question text + close button, all in one flex row). Flex
 * children default to min-width:auto, which stops them shrinking below
 * their natural content width no matter how narrow the container is —
 * that's what made question text overflow/get cut off on mobile instead
 * of wrapping. Setting min-width:0 broadly on every descendant is the
 * standard fix for this specific, common flexbox behaviour.
 */
#nsa-app .nsa-sidebar-zone *, .nsa-wrap .nsa-sidebar-zone *{
	min-width:0;
	max-width:100%;
	overflow-wrap:break-word;
	word-break:break-word;
}
#nsa-app .nsa-widget-card, .nsa-wrap .nsa-widget-card{ padding:26px; }
#nsa-app .nsa-widget-card + .nsa-widget-card, .nsa-wrap .nsa-widget-card + .nsa-widget-card{ border-top:1px solid var(--nsa-border); }

/*
 * Text color: intentionally NO default color rule here at all (not even
 * without !important). An embedded widget/shortcode that sets its own
 * text color (explicitly, anywhere in its own CSS) is completely
 * unaffected either way, since an explicit rule always beats an
 * inherited value regardless of specificity. The problem case is a
 * widget that relies on INHERITING a color rather than setting its own
 * (e.g. an accordion answer with no explicit color) — any color rule
 * set here, even a low-specificity default, would be inherited by that
 * element and can clash with the widget's own background (this is
 * exactly what made FAQ answer text unreadable: it inherited a dark
 * default color while sitting on the accordion's own dark background).
 * Leaving this unset lets such content inherit from further up the
 * page instead, which is what it would do in its normal, working
 * context elsewhere on the site.
 */
#nsa-app .nsa-widget-title, .nsa-wrap .nsa-widget-title{ font-size:16px; margin:0 0 14px; padding-bottom:12px; border-bottom:2px solid var(--nsa-accent-2); display:inline-block; color: var(--nsa-primary) !important; }
#nsa-app .nsa-widget-card img, .nsa-wrap .nsa-widget-card img{ border-radius:10px; }
#nsa-app .nsa-widget-card ul, .nsa-wrap .nsa-widget-card ul{ padding-left:1.2em; margin:0; }
#nsa-app .nsa-widget-card > a, .nsa-wrap .nsa-widget-card > a{ color: var(--nsa-accent); }
#nsa-app .nsa-sidebar-zone-empty, .nsa-wrap .nsa-sidebar-zone-empty{
	border:2px dashed var(--nsa-border); border-radius: var(--nsa-radius); padding:22px; text-align:center; color: var(--nsa-muted) !important; font-size:13.5px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px){
	#nsa-app .nsa-single-layout, .nsa-wrap .nsa-single-layout{ grid-template-columns:1fr; gap:32px; }
	#nsa-app .nsa-single-sidebar, .nsa-wrap .nsa-single-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
	#nsa-app .nsa-widget-card, .nsa-wrap .nsa-widget-card{ flex:1 1 260px; }
	#nsa-app .nsa-grid-children, .nsa-wrap .nsa-grid-children{ grid-template-columns: repeat(2,1fr); }
	#nsa-app .nsa-hero, .nsa-wrap .nsa-hero{ padding:80px 24px 96px; }
}
@media (max-width: 768px){
	#nsa-app .nsa-hero-title, .nsa-wrap .nsa-hero-title{ font-size: clamp(28px, 6vw, 40px); }
	#nsa-app .nsa-single-title, .nsa-wrap .nsa-single-title{ font-size: clamp(24px, 6vw, 34px); }
	#nsa-app .nsa-single-cta, .nsa-wrap .nsa-single-cta{ padding:28px 24px; }
	#nsa-app .nsa-archive-cta, .nsa-wrap .nsa-archive-cta{ padding:40px 24px; }
	#nsa-app .nsa-filter-tabs, .nsa-wrap .nsa-filter-tabs{ margin-top:-32px; }
	#nsa-app .nsa-single-layout, .nsa-wrap .nsa-single-layout{ padding:40px 0 56px; }
}
@media (max-width: 640px){
	.nsa-wrap{ padding:0 16px; }
	#nsa-app .nsa-grid-children, .nsa-wrap .nsa-grid-children{ grid-template-columns: 1fr; }
	#nsa-app .nsa-hero, .nsa-wrap .nsa-hero{ padding:64px 16px 60px; }
	#nsa-app .nsa-single-cta, .nsa-wrap .nsa-single-cta{ flex-direction:column; align-items:flex-start; }
	#nsa-app .nsa-single-sidebar, .nsa-wrap .nsa-single-sidebar{ flex-direction:column; }
	#nsa-app .nsa-filter-tabs, .nsa-wrap .nsa-filter-tabs{ justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; }
	#nsa-app .nsa-card-media, .nsa-wrap .nsa-card-media{ aspect-ratio:16/10; }
	#nsa-app .nsa-single-hero, .nsa-wrap .nsa-single-hero{ min-height:300px; }
	#nsa-app .nsa-map-frame, .nsa-wrap .nsa-map-frame{ aspect-ratio:4/3; }
}
@media (max-width: 380px){
	#nsa-app .nsa-btn, .nsa-wrap .nsa-btn{ width:100%; justify-content:center; }
	#nsa-app .nsa-single-cta .nsa-btn, .nsa-wrap .nsa-single-cta .nsa-btn{ width:auto; }
	#nsa-app .nsa-hero, .nsa-wrap .nsa-hero{ padding:56px 14px 52px; }
}