/* ==========================================================================
   Julie Agency — dark mode
   Palette and hand-tuned overrides. Loads after every light stylesheet and
   after the generated colour twins in dark/ (see functions.php,
   julie_agency_dark_styles).

   How the pieces fit
   - dark/<file>.css mirror every colour in the light files onto the tokens
     below, at the same specificity as the light rule, so the light cascade
     carries over as is. Regenerate them after changing colours in a light
     file: node scripts/dark-mode/build-dark.mjs
   - This file holds the palette and the places where a role-for-role
     mapping is not enough: filled buttons, brand logos, line-art icons,
     photos that fade into the page, charts.

   Palette
   Navy-tinted surfaces (OKLCH hue 257), one step lighter per level of
   elevation: page → band → card → menu. Text clears WCAG AA on every
   surface: heading ≥ 10.8:1, body ≥ 8:1, muted ≥ 5:1, gold ≥ 5.9:1.
   ========================================================================== */

:root[data-theme="dark"] {
	color-scheme: dark;

	/* Surfaces */
	--dk-bg: #0a131f; /* page — was white */
	--dk-bg-alt: #0f1825; /* bands — was cream */
	--dk-bg-deep: #121c2b; /* deeper bands — was sand / stone */
	--dk-surface: #172333; /* cards and panels */
	--dk-surface-2: #1e2b3f; /* menus, popovers, raised hover */
	--dk-surface-3: #26354a; /* hover on raised */
	--dk-input: #0e1623; /* form fields, one step below the card */
	--dk-band: #0c2442; /* brand-navy blocks, lifted off the page */

	/* Text */
	--dk-heading: #f3efe8;
	--dk-text: #c9d0da;
	--dk-muted: #9ca6b4;
	--dk-faint: #8994a3;

	/* Accents as they read on dark */
	--dk-gold: #e2a857;
	--dk-gold-strong: #f0c176;
	--dk-sage: #a7c2b1;
	--dk-sage-strong: #bdd3c5;
	--dk-accent-navy: #8fb2dc; /* brand navy used as a data colour */

	/* Lines */
	--dk-line: rgba(203, 213, 225, 0.13);
	--dk-line-strong: rgba(203, 213, 225, 0.24);

	--dk-shadow-panel: 0 18px 44px -12px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.32);

	/* Light chip that third-party logos sit on (they are drawn for white). */
	--dk-logo-plate: #f3efe8;
}

html[data-theme="dark"] body {
	background: var(--dk-bg);
}

html[data-theme="dark"] ::selection {
	background: rgba(226, 168, 87, 0.32);
	color: #fff;
}

/* ==========================================================================
   Header
   ========================================================================== */

html[data-theme="dark"] .site-header .brand__logo--light {
	display: none;
}

html[data-theme="dark"] .site-header .brand__logo--dark {
	display: block;
}

html[data-theme="dark"] .site-header {
	box-shadow: 0 1px 0 var(--dk-line);
}

html[data-theme="dark"] .theme-switch {
	background: var(--dk-surface);
	border-color: var(--dk-line-strong);
}

html[data-theme="dark"] .theme-switch:hover {
	border-color: var(--dk-gold);
}

html[data-theme="dark"] .theme-switch__thumb {
	background: var(--dk-gold-strong);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .theme-switch__icon--light {
	color: var(--dk-muted);
}

html[data-theme="dark"] .theme-switch__icon--dark {
	color: #0b1f38;
}

/* ==========================================================================
   Buttons
   A navy fill would sink into a navy-black page, so the navy button turns
   into its negative: cream fill, navy type. Gold fills keep their colour and
   take navy type, which reads at 6.7:1 where white managed 2.8:1.
   ========================================================================== */

html[data-theme="dark"] .btn--navy {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .btn--navy:hover {
	background: #fff;
	border-color: #fff;
}

html[data-theme="dark"] .btn--navy-outline {
	border-color: rgba(243, 239, 232, 0.7);
	color: var(--dk-heading);
}

html[data-theme="dark"] .btn--navy-outline:hover {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .btn--gold-outline:hover {
	background: var(--dk-gold);
	border-color: var(--dk-gold);
	color: #0b1f38;
}

html[data-theme="dark"] .btn--gold-fill,
html[data-theme="dark"] .btn--gold-fill:hover {
	color: #0b1f38;
}

html[data-theme="dark"] .btn--cream {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .btn--cream:hover {
	background: #fff;
	border-color: #fff;
}

/* Every other navy fill: tabs, segmented choices, small buttons. Same
   inversion as .btn--navy — the gold underline / ring stays. */
html[data-theme="dark"] .calc__tab.is-active,
html[data-theme="dark"] .rc__tab.is-active,
html[data-theme="dark"] .calc-page__tab.is-active {
	background: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .calc-page__suite .calc-page__tab.is-active {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .ct-seg__item input:checked + span {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .calc-tools__btn--send,
html[data-theme="dark"] .mg-help__btn {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .calc-tools__btn--send:hover,
html[data-theme="dark"] .mg-help__btn:hover {
	background: #fff;
	border-color: #fff;
}

html[data-theme="dark"] .calc-tools__btn--share {
	border-color: rgba(243, 239, 232, 0.55);
}

html[data-theme="dark"] .calc-tools__btn--share:hover,
html[data-theme="dark"] .g-reviews__nav:hover {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

/* Inside the navy result panel the pair already reads light-on-navy. */
html[data-theme="dark"] .ct-snap .calc-tools__btn--send {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.72);
	color: #fff;
}

html[data-theme="dark"] .ct-snap .calc-tools__btn--send:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

html[data-theme="dark"] .ct-snap .calc-tools__btn--share {
	background: var(--dk-heading);
	border-color: var(--dk-heading);
	color: #0b1f38;
}

html[data-theme="dark"] .ct-snap .calc-tools__btn--share:hover {
	background: #fff;
	border-color: #fff;
}

/* Gold, amber and terracotta fills keep their colour and take navy type. */
html[data-theme="dark"] .calc-tools__btn--contact,
html[data-theme="dark"] .ab-cta__btn,
html[data-theme="dark"] .ct-submit,
html[data-theme="dark"] .mg-news__btn,
html[data-theme="dark"] .ct-note__icon,
html[data-theme="dark"] .lender__mark--gold,
html[data-theme="dark"] .lender__mark--sage {
	color: #0b1f38;
}

html[data-theme="dark"] .ct-hero__back {
	background: rgba(23, 35, 51, 0.72);
	color: var(--dk-heading);
}

html[data-theme="dark"] .ct-hero__back:hover {
	background: var(--dk-gold);
	color: #0b1f38;
}

/* ==========================================================================
   Brand-navy blocks
   Brand navy sits within a hair of the page's navy-black, so boxed navy
   panels step up to --dk-band and pick up a faint edge.
   ========================================================================== */

html[data-theme="dark"] .calc__cta,
html[data-theme="dark"] .lp-cta__panel,
html[data-theme="dark"] .ar-calc,
html[data-theme="dark"] .page-template-template-contact .ct-card {
	background: var(--dk-band);
	box-shadow: inset 0 0 0 1px rgba(143, 178, 220, 0.14);
}

html[data-theme="dark"] .ct-snap {
	background: linear-gradient(180deg, #11335c 0%, var(--dk-band) 60%);
	box-shadow: inset 0 0 0 1px rgba(143, 178, 220, 0.14), var(--dk-shadow-panel);
}

/* ==========================================================================
   Data colours
   Brand navy doubles as a chart / scenario colour. On the dark page it lifts
   to a light navy; mortgage-calculator.js does the same for the doughnut.
   ========================================================================== */

html[data-theme="dark"] .calc__swatch[style*="#092744"] {
	background: var(--dk-accent-navy) !important;
}

html[data-theme="dark"] [style*="--rc-accent: #012243"] {
	--rc-accent: var(--dk-accent-navy) !important;
}

/* ==========================================================================
   Tinted icon discs
   Pale sage and sand discs on white cards flatten to the card colour; on
   dark they become translucent washes of the same hue.
   ========================================================================== */

html[data-theme="dark"] .mc-card__icon {
	background: rgba(167, 194, 177, 0.14);
}

html[data-theme="dark"] .mc-card--featured .mc-card__icon,
html[data-theme="dark"] .ct-card__icon,
html[data-theme="dark"] .ct-how__icon {
	background: rgba(226, 168, 87, 0.16);
}

/* ==========================================================================
   Images
   ========================================================================== */

/* Third-party logos are drawn for white; they sit on a light plate rather
   than being recoloured. */
html[data-theme="dark"] .ct-partner__logo {
	box-sizing: content-box;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--dk-logo-plate);
}

html[data-theme="dark"] .lender__logo {
	padding: 4px;
	border-radius: 7px;
	background: var(--dk-logo-plate);
}

/* Line-art icons with dark ink: flip lightness, keep hue — the navy/sage
   strokes come out light; lighten then drops the (now near-black) pale
   fills into the card behind them. */
html[data-theme="dark"] .goal__media img {
	filter: invert(1) hue-rotate(180deg);
	mix-blend-mode: lighten;
}

/* Sage line icons (other services): same hue, a step lighter, so the thin
   strokes hold up on the dark menu and band. */
html[data-theme="dark"] .dropdown--icons img,
html[data-theme="dark"] .help-item__icon img {
	filter: brightness(1.4);
}

/* Illustrations that shed their paper with a blend mode: multiply / darken
   only work on a light page. The dark-page counterpart is to invert the
   drawing (paper → black) and blend with screen / lighten. */
html[data-theme="dark"] .mg-help__art {
	filter: invert(1) hue-rotate(180deg);
	mix-blend-mode: screen;
}

html[data-theme="dark"] .mc-hub__star::before,
html[data-theme="dark"] .mc-hub__art::before {
	filter: invert(1) hue-rotate(180deg) brightness(1.35);
	mix-blend-mode: lighten;
}

/* Inverted, the watercolour reads as a night scene; the pale leaves are
   eased back so they do not pull focus from the tools. */
html[data-theme="dark"] .mc-hub__art::before {
	opacity: 0.78;
}

/* Light photographs used as a section background: the copy on top turns
   light in dark mode, so the photo takes a navy veil. */
html[data-theme="dark"] .ms-cta {
	background-image:
		linear-gradient(rgba(12, 23, 38, 0.9), rgba(12, 23, 38, 0.9)),
		url("../images/more-services/more-services_not-sure-where-to-start.avif");
}

/* ==========================================================================
   Licensed-states map (contact)
   ========================================================================== */

html[data-theme="dark"] #ct-gray stop:first-child {
	stop-color: #3a4a60;
}

html[data-theme="dark"] #ct-gray stop:last-child {
	stop-color: #2c3a4e;
}

html[data-theme="dark"] .ct-map__state,
html[data-theme="dark"] .ct-map__box {
	stroke: var(--dk-bg-alt);
}

html[data-theme="dark"] .ct-map__line {
	stroke: #5b6b80;
}

html[data-theme="dark"] .ct-map__tooltip {
	background: var(--dk-heading);
	color: #0b1f38;
}

/* ==========================================================================
   Guide articles
   The light page uses three pale tints (cream, mist, sky) that the twin
   folds into one band colour. Here the sidebar boxes and the figures panel
   become cards, the sky panels a navy-blue band, and the cards' checklists
   stay one step below their card. Body copy takes the text tone, not muted.
   ========================================================================== */

html[data-theme="dark"] .page-template-template-guide-article {
	--ar-text: var(--dk-text);
	--ar-mist: var(--dk-surface);
	--ar-sky: #102742;
	--ar-sky-line: rgba(143, 178, 220, 0.22);
	--ar-fact-badge: radial-gradient(circle at 32% 28%, #22344b 0, #1a2a3e 60%, #15233a 100%);
	--ar-fact-ring: #2f4560;
	--ar-fact-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
	--ar-fact-tint: #3a3121;
	--ar-fact-gold: #e2ad62;
	--ar-fact-coin: #e2ad62;
	--ar-fact-line: #e9b56c;
}

html[data-theme="dark"] .ar-facts {
	border-color: var(--dk-line);
	background: var(--dk-surface);
}

html[data-theme="dark"] .ar-help,
html[data-theme="dark"] .ar-bottom {
	box-shadow: inset 0 0 0 1px rgba(143, 178, 220, 0.14);
}

html[data-theme="dark"] .ar-help__icon {
	color: var(--dk-accent-navy);
}

html[data-theme="dark"] .ar-author__photo {
	border-color: var(--dk-surface-2);
}

/* A navy fill sinks into the dark card; invert like the other dark buttons. */
html[data-theme="dark"] .ar-social__link:hover {
	border-color: var(--dk-heading);
	background: var(--dk-heading);
	color: #0b1f38;
}