/**
 * Globe Theme — soft dark mode ("work mode"), v2.
 * Direction: navy base, lighter-navy bands, sand-colored text. Soft and
 * comfortable — no blacks, no harsh contrast.
 *
 * Activated by `html.nc-dark` (header toggle, persisted in localStorage).
 * Remove the enqueues + head script in functions.php to retire the feature.
 *
 * Implementation notes:
 * - Surfaces and body text re-map via the --nc-color-neutral-* scale.
 * - `--nc-color-brand-navy` is deliberately NOT remapped: it is used both as
 *   band background AND as text color across the block library. Backgrounds
 *   keep the original navy; the text usages are overridden per selector below.
 */

html.nc-dark {
	color-scheme: dark;

	/* Navy surface scale + sand text. */
	--nc-color-neutral-0: #20304c;   /* base: soft navy */
	--nc-color-neutral-50: #283c5e;  /* paper/sand bands: lighter navy */
	--nc-color-neutral-100: #2e4468;
	--nc-color-neutral-200: #3d5178; /* borders */
	--nc-color-neutral-300: #c9bfac;
	--nc-color-neutral-500: #c2b79e; /* muted text: soft sand */
	--nc-color-neutral-700: #46597e;
	--nc-color-neutral-900: #f0e9d8; /* body text: sand */

	--nc-color-semantic-text-on-dark: #f0e9d8;
	--nc-color-semantic-text-on-dark-muted: #c9bfac;
}

/* ---- Text drawn in navy on light mode → sand in dark mode. ---- */
html.nc-dark :is(h1, h2, h3, h4, h5, h6),
html.nc-dark .nc-fact-block__value,
html.nc-dark .nc-breadcrumbs__item [aria-current="page"],
html.nc-dark .nc-feature-card__title,
html.nc-dark .nc-fit__heading,
html.nc-dark .nc-case__title,
html.nc-dark .nc-cta-strip__heading,
html.nc-dark .nc-faq__q,
html.nc-dark .nc-featured__heading,
html.nc-dark .nc-process__step-title,
html.nc-dark .nc-form__title,
html.nc-dark .nc-field label,
html.nc-dark .nc-wizard__legend,
html.nc-dark .nc-wizard__opt-label,
html.nc-dark .nc-wizard__review-title,
html.nc-dark .nc-wizard__done,
html.nc-dark .nc-content-card__title,
html.nc-dark .nc-team__name,
html.nc-dark .nc-team__links a {
	color: var(--nc-color-neutral-900);
}

/* Header navigation, announcement bar and breadcrumbs. */
html.nc-dark .wp-block-navigation a,
html.nc-dark .wp-block-navigation .wp-block-navigation-item__label,
html.nc-dark .nc-announcement-bar,
html.nc-dark .nc-announcement-bar a,
html.nc-dark .nc-breadcrumbs a {
	color: var(--nc-color-neutral-900);
}
html.nc-dark .nc-breadcrumbs a:hover {
	color: var(--nc-color-brand-coral, #e8674f);
}

/* Outline buttons (e.g. "View Our Work"): sand text + border. */
html.nc-dark .is-style-outline .wp-block-button__link,
html.nc-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--nc-color-neutral-900);
	border-color: var(--nc-color-neutral-300);
}

/* Icon circles: navy-on-navy vanishes — lift to a lighter navy chip. */
html.nc-dark .nc-content-card__icon {
	background: var(--nc-color-neutral-100);
	border: 1px solid var(--nc-color-neutral-200);
}

/* Soften photography slightly against dark surfaces. */
html.nc-dark img {
	opacity: 0.96;
}

/* Product tiles keep their white studio background — framed-photo look. */
html.nc-dark .nc-showcase-grid figure {
	border-color: rgba(240, 233, 216, 0.16) !important;
}

/* The logo is drawn for light backgrounds; approximate a dark-safe version.
   Temporary work-mode compromise — swap for a real dark logo asset if dark
   mode ever ships to customers. */
html.nc-dark .nc-site-header__brand img,
html.nc-dark .wp-block-site-logo img {
	filter: invert(0.92) hue-rotate(180deg);
}

/* Tone down heavy shadows on dark surfaces. */
html.nc-dark [class*="shadow"],
html.nc-dark .nc-card,
html.nc-dark .nc-insight-card {
	box-shadow: none;
}

/* Hairlines tuned for light mode. */
html.nc-dark .nc-site-header,
html.nc-dark .nc-faq__item,
html.nc-dark .nc-form input,
html.nc-dark .nc-form select,
html.nc-dark .nc-form textarea {
	border-color: var(--nc-color-neutral-200);
}

/* ---- Theme toggle button (injected by dark.js). ---- */
.nc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid var(--nc-color-semantic-border, #ddd6cc);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
}
html.nc-dark .nc-theme-toggle {
	color: var(--nc-color-neutral-900);
	border-color: var(--nc-color-neutral-200);
}
.nc-theme-toggle:hover {
	border-color: var(--nc-color-brand-coral, #e8674f);
	color: var(--nc-color-brand-coral, #e8674f);
}
.nc-theme-toggle svg {
	width: 1.05rem;
	height: 1.05rem;
	display: block;
}
@media (max-width: 600px) {
	.nc-theme-toggle { display: none; } /* header space is tight on mobile */
}

/* ---- Mobile overlay menu (fix: menu appeared as a blank navy screen).
   The overlay uses brand-navy as background (not remapped) while its text
   used --nc-color-neutral-0, which dark mode remaps to soft navy —
   navy-on-navy, everything invisible including the close button. ---- */
html.nc-dark .nc-site-header .wp-block-navigation__responsive-container-open,
html.nc-dark .nc-site-header .wp-block-navigation__responsive-container-close {
	color: var(--nc-color-neutral-900); /* sand — hamburger + close visible on dark header */
}
html.nc-dark .nc-site-header .wp-block-navigation__responsive-container.is-menu-open a,
html.nc-dark .nc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
html.nc-dark .nc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
html.nc-dark .nc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--nc-color-neutral-900); /* sand text on navy overlay */
}