/**
 * NovaSpark Core Theme CSS — reset, layout, and chrome components.
 *
 * Design tokens live in variables.css (single source of truth).
 * Do NOT declare :root or [data-theme] blocks in this file.
 *
 * @package NovaSpark
 */


/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--ns-bg);
	color: var(--ns-text-2);
	font-family: var(--ns-font-sans);
	font-size: var(--ns-text-base);
	line-height: 1.6;
	overflow-x: clip;
	transition: background-color var(--ns-duration) var(--ns-ease), color var(--ns-duration) var(--ns-ease);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.ns-site-main {
	flex: 1 0 auto;
	padding-block: var(--ns-space-8);
}

/* Screen reader text helper */
.screen-reader-text, .sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--ns-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--ns-accent);
	display: block;
	font-size: var(--ns-text-sm);
	font-weight: 600;
	height: auto;
	left: var(--ns-space-4);
	padding: var(--ns-space-3) var(--ns-space-5);
	position: fixed !important;
	top: var(--ns-space-4);
	width: auto;
	z-index: 100000;
	box-shadow: var(--ns-shadow-lg);
	border-radius: var(--ns-radius);
}

/* Focus Visible Accessibility */
:focus-visible {
	outline: 2px solid var(--ns-accent);
	outline-offset: 2px;
}

/* Links */
a {
	color: var(--ns-accent);
	text-decoration: none;
	transition: color var(--ns-duration) var(--ns-ease);
}

a:hover {
	color: var(--ns-accent-dark);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: var(--ns-text);
	font-family: var(--ns-font-sans);
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: var(--ns-space-4);
}

h1 { font-size: var(--ns-h1-size); font-weight: 800; line-height: 1.1; }
h2 { font-size: var(--ns-h2-size); }
h3 { font-size: var(--ns-h3-size); font-weight: 600; }
h4 { font-size: var(--ns-h4-size); font-weight: 600; }
h5 { font-size: var(--ns-h5-size); font-weight: 500; }
h6 { font-size: var(--ns-h6-size); font-weight: 500; }

p {
	margin-bottom: var(--ns-space-4);
}

/* Images & Embeds */
img, iframe, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Buttons and form controls live in components.css. */

.ns-icon-btn {
	background: transparent;
	border: none;
	color: var(--ns-text-2);
	padding: var(--ns-space-2);
	border-radius: var(--ns-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ns-icon-btn:hover {
	background-color: var(--ns-bg-3);
	color: var(--ns-accent);
}

/* ==========================================================================
   Layout & Container System
   ========================================================================== */
.ns-container {
	width: 100%;
	max-width: var(--ns-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Hero Grids Responsive Definitions */
.ns-hero-grid,
.ns-mag-hero-grid,
.ns-tech-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ns-space-6);
}

@media (min-width: 960px) {
	.ns-hero-grid,
	.ns-mag-hero-grid {
		grid-template-columns: 2fr 1fr;
	}
	.ns-tech-hero-grid {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: center;
	}
}

.ns-content-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ns-gap);
}

@media (min-width: 1024px) {
	.ns-content-wrapper {
		grid-template-columns: 1fr var(--ns-sidebar-width);
	}
	
	.ns-no-sidebar .ns-content-wrapper {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Grid System
   --------------------------------------------------------------------------
   Card grids size themselves against their CONTAINER, not the viewport.
   Viewport queries were wrong here in both directions: at a 1024px viewport the
   content column is only ~600px once the 320px sidebar is subtracted, so
   `min-width: 1024px` produced three 180px-wide cards; and a full-width page
   template at 900px got one column because the viewport said "small".
   ========================================================================== */

/* Establish the query containers. */
.ns-primary-content,
.ns-footer-widgets .ns-container,
.ns-container > .ns-posts-grid,
.ns-band .ns-container,
.ns-section {
	container-type: inline-size;
}

.ns-grid-1,
.ns-grid-2,
.ns-grid-3,
.ns-grid-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ns-gap);
}

@container (min-width: 480px) {
	.ns-grid-2, .ns-grid-3, .ns-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 760px) {
	.ns-grid-3, .ns-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@container (min-width: 1040px) {
	.ns-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Fallback for engines without container queries. Kept viewport-based, but with
 * the 3-column step moved to 1200px so a sidebar layout never produces cards
 * narrower than ~250px.
 */
@supports not (container-type: inline-size) {
	@media (min-width: 640px) {
		.ns-grid-2, .ns-grid-3, .ns-grid-4 { grid-template-columns: repeat(2, 1fr); }
	}

	@media (min-width: 1200px) {
		.ns-grid-3, .ns-grid-4 { grid-template-columns: repeat(3, 1fr); }
	}

	@media (min-width: 1400px) {
		.ns-grid-4 { grid-template-columns: repeat(4, 1fr); }
	}
}

/* ==========================================================================
   Header Component
   ========================================================================== */
.ns-header {
	background-color: var(--ns-header-bg);
	/* The glassmorphic navbar design.md specifies. --ns-glass-blur was defined
	   from the start but never applied, so an 85%-opaque bar showed sharp
	   content scrolling behind it. */
	-webkit-backdrop-filter: var(--ns-glass-blur);
	backdrop-filter: var(--ns-glass-blur);
	border-bottom: 1px solid var(--ns-header-border);
	height: var(--ns-header-height);
	position: sticky;
	top: 0;
	z-index: var(--ns-z-sticky);
	transition: background-color var(--ns-duration) var(--ns-ease),
	            box-shadow var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration-lg) var(--ns-ease-out);
}

/* Without backdrop-filter, translucency would just look like a muddy bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ns-header {
		background-color: var(--ns-header-bg-solid);
	}
}

.ns-header.is-sticky {
	box-shadow: var(--ns-shadow);
}

/* Opt-in reveal-on-scroll-up (header.sticky_scroll_up). */
.ns-header.is-hidden {
	transform: translateY(-100%);
}

.ns-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.ns-site-branding {
	display: flex;
	align-items: center;
	gap: var(--ns-space-3);
}

.ns-site-title {
	font-size: var(--ns-text-xl);
	font-weight: 800;
	margin-bottom: 0;
}

.ns-site-title a {
	color: var(--ns-text);
}

.ns-site-description {
	font-size: var(--ns-text-xs);
	color: var(--ns-text-3);
	margin-bottom: 0;
	display: none;
}

@media (min-width: 768px) {
	.ns-site-description { display: block; }
}

/* Primary Nav */
.ns-main-navigation {
	display: none;
}

@media (min-width: 768px) {
	.ns-main-navigation { display: block; }
}

/*
 * Two shapes have to work here. wp_nav_menu() puts .ns-nav-menu on the <ul>
 * itself; the wp_page_menu() fallback — which is what runs until an admin
 * assigns a menu to the "primary" location — puts it on a wrapping <div> and
 * leaves a bare <ul> inside. Styling only the first shape left a default
 * bulleted list overflowing the 64px header on every fresh install.
 */
.ns-nav-menu,
.ns-nav-menu > ul {
	display: flex;
	align-items: center;
	gap: var(--ns-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-nav-menu li {
	list-style: none;
}

.ns-nav-menu a {
	color: var(--ns-text-2);
	font-size: var(--ns-text-sm);
	font-weight: 500;
	padding-block: var(--ns-space-2);
	position: relative;
}

.ns-nav-menu a:hover, .ns-nav-menu .current-menu-item > a {
	color: var(--ns-accent);
}

/* ==========================================================================
   Dropdowns & Mega Menu
   ========================================================================== */
.ns-nav-menu li {
	position: relative;
}

.ns-nav-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--ns-duration) var(--ns-ease);
}

.ns-nav-menu .menu-item-has-children:is(:hover, :focus-within) > a::after {
	transform: translateY(0) rotate(225deg);
}

.ns-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--ns-z-dropdown);
	min-width: 220px;
	margin: 0;
	padding: var(--ns-space-2);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background-color: var(--ns-surface);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-lg);
	box-shadow: var(--ns-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease),
	            visibility 0s linear var(--ns-duration);
}

/* :focus-within keeps the dropdown open for keyboard users. */
.ns-nav-menu li:is(:hover, :focus-within) > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.ns-nav-menu .sub-menu a {
	display: block;
	padding: var(--ns-space-2) var(--ns-space-3);
	border-radius: var(--ns-radius-sm);
	font-size: var(--ns-text-sm);
	white-space: nowrap;
}

.ns-nav-menu .sub-menu a:hover,
.ns-nav-menu .sub-menu .current-menu-item > a {
	background-color: var(--ns-bg-3);
	color: var(--ns-accent);
}

/* Third level flies out to the side. */
.ns-nav-menu .sub-menu .sub-menu {
	top: calc(-1 * var(--ns-space-2));
	left: 100%;
	margin-left: var(--ns-space-1);
}

/*
 * Mega menu: add the `mega-menu` CSS class to a top-level menu item in
 * Appearance → Menus. The walker tags it and the panel goes full-width.
 */
.ns-nav-menu .ns-has-mega-menu {
	position: static;
}

.ns-nav-menu .ns-has-mega-menu > .sub-menu {
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	width: min(var(--ns-container), calc(100vw - 2 * var(--ns-space-8)));
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ns-space-2) var(--ns-space-6);
	padding: var(--ns-space-6);
}

.ns-nav-menu .ns-has-mega-menu:is(:hover, :focus-within) > .sub-menu {
	transform: translateX(-50%) translateY(0);
}

.ns-nav-menu .ns-has-mega-menu > .sub-menu > li > a {
	font-weight: 700;
	color: var(--ns-text);
	border-bottom: 1px solid var(--ns-border);
	border-radius: 0;
	margin-bottom: var(--ns-space-1);
}

.ns-nav-menu .ns-has-mega-menu .sub-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	width: auto;
	min-width: 0;
	display: flex;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Mobile drawer submenus are always expanded — no hover to rely on. */
.ns-mobile-menu .sub-menu {
	list-style: none;
	margin: var(--ns-space-2) 0 0 var(--ns-space-4);
	padding: 0 0 0 var(--ns-space-3);
	border-left: 1px solid var(--ns-border);
	display: flex;
	flex-direction: column;
	gap: var(--ns-space-1);
}

.ns-mobile-menu .sub-menu a {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
}

.ns-header-actions {
	display: flex;
	align-items: center;
	gap: var(--ns-space-2);
}

.ns-dark-toggle .ns-icon-sun { display: none; }
.ns-dark-toggle .ns-icon-moon { display: block; }

[data-theme="dark"] .ns-dark-toggle .ns-icon-sun { display: block; }
[data-theme="dark"] .ns-dark-toggle .ns-icon-moon { display: none; }

.ns-mobile-toggle {
	display: flex;
}

/*
 * The toggle ships both a hamburger and a close glyph. Nothing was hiding the
 * second one, so the button rendered them stacked. Swap on aria-expanded,
 * which the JS already maintains.
 */
.ns-mobile-toggle .ns-icon-close {
	display: none;
}

.ns-mobile-toggle[aria-expanded="true"] .ns-icon-hamburger {
	display: none;
}

.ns-mobile-toggle[aria-expanded="true"] .ns-icon-close {
	display: block;
}

@media (min-width: 768px) {
	.ns-mobile-toggle { display: none; }
}

/* ==========================================================================
   Mobile Drawer & Overlays
   ========================================================================== */
.ns-mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	max-width: 85vw;
	height: 100vh;
	background-color: var(--ns-surface);
	z-index: var(--ns-z-modal);
	transform: translateX(100%);
	/*
	 * `visibility` (not just transform) is what actually removes the closed
	 * drawer from the tab order and the a11y tree. JS also sets `inert`;
	 * this is the CSS half of the same fix.
	 */
	visibility: hidden;
	transition: transform var(--ns-duration-lg) var(--ns-ease-out),
	            visibility 0s linear var(--ns-duration-lg);
	box-shadow: var(--ns-shadow-xl);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ns-mobile-drawer.is-active {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--ns-duration-lg) var(--ns-ease-out),
	            visibility 0s linear 0s;
}

.ns-mobile-drawer-inner {
	padding: var(--ns-space-6);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ns-mobile-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ns-space-6);
	padding-bottom: var(--ns-space-3);
	border-bottom: 1px solid var(--ns-border);
}

.ns-drawer-title {
	font-weight: 700;
	font-size: var(--ns-text-lg);
}

/* Same dual-shape handling as the desktop nav (see above). */
.ns-mobile-menu,
.ns-mobile-menu > ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ns-space-3);
	margin: 0;
	padding: 0;
}

.ns-mobile-menu li {
	list-style: none;
}

.ns-mobile-menu a {
	color: var(--ns-text-2);
	font-size: var(--ns-text-base);
	font-weight: 500;
	display: block;
	padding-block: var(--ns-space-2);
}

.ns-drawer-overlay {
	position: fixed;
	inset: 0;
	background: var(--ns-overlay);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: var(--ns-z-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ns-duration) var(--ns-ease);
}

.ns-drawer-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* Search Overlay */
.ns-search-overlay {
	position: fixed;
	inset: 0;
	background: var(--ns-overlay);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: var(--ns-z-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ns-duration) var(--ns-ease);
}

.ns-search-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.ns-search-overlay-inner {
	width: 100%;
	max-width: 600px;
	padding: var(--ns-space-6);
	position: relative;
}

.ns-search-close {
	position: absolute;
	top: -40px;
	right: var(--ns-space-6);
	color: #ffffff;
	font-size: 2rem;
}

.ns-search-form-wrap form {
	display: flex;
	gap: var(--ns-space-3);
}

.ns-search-form-wrap input[type="search"] {
	flex: 1;
	padding: var(--ns-space-4) var(--ns-space-6);
	font-size: var(--ns-text-lg);
	border-radius: var(--ns-radius);
	border: 1px solid var(--ns-border);
	background: var(--ns-surface);
	color: var(--ns-text);
}

/* Card components live in cards.css. */

/* Widget & sidebar styles live in widgets.css. */

/* ==========================================================================
   Footer Component
   ========================================================================== */
.ns-site-footer {
	background-color: var(--ns-bg-2);
	border-top: 1px solid var(--ns-border);
	margin-top: auto;
}

.ns-footer-widgets {
	padding-block: var(--ns-space-12);
}

.ns-footer-bar {
	border-top: 1px solid var(--ns-border);
	padding-block: var(--ns-space-6);
}

.ns-footer-bar-inner {
	display: flex;
	flex-direction: column;
	gap: var(--ns-space-4);
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 768px) {
	.ns-footer-bar-inner {
		flex-direction: row;
	}
}

.ns-copyright {
	font-size: var(--ns-text-sm);
	color: var(--ns-text-3);
}

/* ==========================================================================
   Back to Top
   --------------------------------------------------------------------------
   Doubles as a read-position indicator: the ring is driven by
   --ns-scroll-progress (0–1) set by the scroll handler. It also lifts clear of
   the footer instead of sitting on top of the copyright line, which is what it
   used to do at the bottom of every page.
   ========================================================================== */
.ns-back-to-top {
	position: fixed;
	/* Respect the home indicator / notch on iOS. */
	bottom: calc(var(--ns-space-6) + env(safe-area-inset-bottom, 0px));
	right: calc(var(--ns-space-6) + env(safe-area-inset-right, 0px));
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	flex-shrink: 0;
	background-color: var(--ns-accent);
	color: #ffffff;
	border: none;
	border-radius: var(--ns-radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ns-space-1);
	cursor: pointer;
	box-shadow: var(--ns-shadow-lg);
	opacity: 0;
	visibility: hidden;
	/* Lift is set by JS when the footer comes into view. */
	transform: translateY(calc(var(--ns-btt-lift, 0px) * -1)) scale(0.8);
	transition: opacity var(--ns-duration) var(--ns-ease),
	            transform var(--ns-duration) var(--ns-ease-spring),
	            background-color var(--ns-duration) var(--ns-ease),
	            visibility 0s linear var(--ns-duration);
	z-index: var(--ns-z-sticky);
}

.ns-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(calc(var(--ns-btt-lift, 0px) * -1)) scale(1);
	transition-delay: 0s;
}

.ns-back-to-top:hover {
	background-color: var(--ns-accent-dark);
}

.ns-back-to-top.is-visible:hover {
	transform: translateY(calc((var(--ns-btt-lift, 0px) + 2px) * -1)) scale(1.06);
}

.ns-back-to-top:active {
	transform: translateY(calc(var(--ns-btt-lift, 0px) * -1)) scale(0.94);
}

.ns-back-to-top:focus-visible {
	outline: 2px solid var(--ns-accent);
	outline-offset: 3px;
}

.ns-back-to-top__icon {
	position: relative;
	z-index: 1;
	display: block;
}

/* Progress ring ------------------------------------------------------------ */
.ns-back-to-top__ring {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	/* 12 o'clock start, clockwise. */
	transform: rotate(-90deg);
	overflow: visible;
	pointer-events: none;
}

.ns-back-to-top__ring circle {
	fill: none;
	stroke-width: 2.5;
	cx: 22px;
	cy: 22px;
	r: 19px;
}

.ns-back-to-top__track {
	stroke: rgba(255, 255, 255, 0.28);
}

.ns-back-to-top__progress {
	stroke: #ffffff;
	stroke-linecap: round;
	/* circumference = 2 * pi * 19 ≈ 119.38 */
	stroke-dasharray: 119.38;
	stroke-dashoffset: calc(119.38 * (1 - var(--ns-scroll-progress, 0)));
	transition: stroke-dashoffset 80ms linear;
}

/* Footer tab: back_to_top_style = 'text' */
.ns-back-to-top--text {
	inline-size: auto;
	block-size: 40px;
	padding-inline: var(--ns-space-4);
	border-radius: var(--ns-radius-full);
}

.ns-back-to-top__label {
	font-size: var(--ns-text-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ns-back-to-top,
	.ns-back-to-top.is-visible,
	.ns-back-to-top.is-visible:hover,
	.ns-back-to-top:active {
		transform: translateY(calc(var(--ns-btt-lift, 0px) * -1));
	}

	.ns-back-to-top__progress {
		transition: none;
	}
}

/* ==========================================================================
   Category Filter Pills & Responsive Overrides
   (hero + post card components live in cards.css)
   ========================================================================== */
/* Category Filter Nav Pills */
.ns-cat-pill {
	background-color: var(--ns-bg-2);
	color: var(--ns-text-2);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-full);
	padding: 6px 16px;
	font-size: var(--ns-text-xs);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ns-duration) var(--ns-ease),
	            border-color var(--ns-duration) var(--ns-ease),
	            color var(--ns-duration) var(--ns-ease),
	            box-shadow var(--ns-duration) var(--ns-ease);
	/* display/min-height/alignment are set in components.css — an inline-block
	   box cannot vertically centre a min-height, which left labels top-aligned. */
}

.ns-cat-pill:hover,
.ns-cat-pill.is-active {
	background-color: var(--ns-accent);
	color: #ffffff;
	border-color: var(--ns-accent);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--ns-accent) 25%, transparent);
}

/* Responsive Grids */
/* Text Wrap Non-Negotiables for Mobile */
h1, h2, h3, h4, h5, h6,
.entry-title, .ns-card__title, .ns-tech-hero-title, .ns-page-title {
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
}

/*
 * Touch targets are set per-component in components.css. The old blanket
 * `button { min-height: 44px }` deformed icon buttons, the ToC toggle and the
 * category pills, so it is intentionally not repeated here.
 */

/* Nav links still need a comfortable tap area. */
.ns-nav-link,
.ns-mobile-menu a {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Responsive Grids & Viewport Breakpoints (320px - 1280px) */
@media (max-width: 1023px) {
	.ns-content-wrapper,
	.ns-sidebar-left {
		grid-template-columns: 1fr !important;
	}
	.ns-sidebar {
		margin-top: var(--ns-space-8);
	}
}

/*
 * The blanket `grid-template-columns: 1fr !important` block that used to live
 * here forced a single column for every grid up to 768px, which overrode the
 * 2-column step and made a 720px-wide card the only thing on screen at tablet
 * width. Grids now size from their container (see the Grid System section), so
 * only genuinely viewport-dependent tweaks remain.
 */
@media (max-width: 768px) {
	.ns-hero-grid,
	.ns-mag-hero-grid,
	.ns-about-stats-grid,
	.ns-contact-grid {
		grid-template-columns: 1fr;
	}

	.ns-tech-hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Settings-driven modifiers (body classes from novaspark-settings)
   ========================================================================== */

/* header.sticky = off */
body:not(.ns-has-sticky-header) .ns-header {
	position: relative;
}

/* header.transparent */
.ns-has-transparent-header .ns-header {
	position: absolute;
	inset-inline: 0;
	background-color: transparent;
	border-bottom-color: transparent;
}

.ns-has-transparent-header .ns-header.is-sticky {
	position: fixed;
	background-color: var(--ns-header-bg);
	border-bottom-color: var(--ns-header-border);
}

/* general.smooth_scroll = off */
.ns-no-smooth-scroll {
	scroll-behavior: auto;
}

html:has(body.ns-no-smooth-scroll) {
	scroll-behavior: auto;
}

/* blog.show_read_more */
.ns-read-more {
	font-weight: 600;
	white-space: nowrap;
}

/* ==========================================================================
   Scroll lock (set by JS while a drawer or overlay is open)
   ========================================================================== */
.ns-scroll-locked {
	overflow: hidden;
	/* Reserves the scrollbar gutter so the page doesn't jump sideways when the
	   body is pinned. Paired with a paddingRight fallback in JS. */
	scrollbar-gutter: stable;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}