/* =========================================================
   DARK / LIGHT MODE
   Dark is the default (js/theme.js sets <html data-theme="dark|light">).
   Light mode is the site's original look, so everything here is for dark mode,
   plus the toggle button in the header.
   ========================================================= */

/* ---------- Toggle button (both modes) ---------- */

.wah-theme-toggle {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	/* (margins are set below: the header's layout rules would otherwise reset them) */
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(9, 25, 48, 0.35);
	color: #fff;
	cursor: pointer;
	transition: transform 0.25s var(--wah-spring, ease), background 0.2s ease;
}
.wah-theme-toggle:hover { background: rgba(9, 25, 48, 0.6); transform: rotate(-15deg) scale(1.06); }
.wah-theme-toggle:focus-visible { outline: 2px solid var(--wah-yellow); outline-offset: 3px; }
.wah-theme-toggle svg { display: block; }

/* Keep the menu on the right, next to the toggle (logo stays left). */
header.wp-block-template-part .alignwide.has-background > .wp-block-navigation { margin-left: auto; }
header.wp-block-template-part .alignwide.has-background > .wah-theme-toggle {
	margin: 0 clamp(6px, 2.6vw, 38px) 0 10px !important; /* right: clear of the decorative star at the end of the bar */
}

/* Smooth change when the visitor switches (not on page load). */
.wah-theme-switching body,
.wah-theme-switching body * {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ---------- Dark mode: colours ---------- */

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

	--wah-surface: #0f2237;          /* the big page card */
	--wah-surface-2: #142b44;        /* boxes on the page */
	--wah-surface-3: #1a3554;        /* inputs, raised bits */
	--wah-line: rgba(160, 205, 240, 0.16);
	--wah-ink: #e6f0fa;              /* main text */
	--wah-ink-soft: rgba(230, 240, 250, 0.74);

	/* The site's heading colour, as a dark-mode version */
	--wah-blue-dark: #cfe6ff;

	/* WordPress colour presets used all over the pages */
	--wp--preset--color--background: var(--wah-surface);
	--wp--preset--color--foreground: var(--wah-ink);
	--wp--preset--color--primary: var(--wah-ink);
	--wp--preset--color--secondary: var(--wah-ink-soft);
	--wp--preset--color--custom-green: var(--wah-surface-2);
	--wp--preset--color--custom-navy: #cfe6ff;
}

html[data-theme="dark"] body {
	color: var(--wah-ink);
}

/* The big page card (home + every other page) */
html[data-theme="dark"] body:not(.home) .wp-site-blocks > .wp-block-group > .alignwide.has-background-background-color,
html[data-theme="dark"] .home .wp-site-blocks > .alignwide.has-background-background-color {
	background:
		radial-gradient(700px 400px at 0% 0%, rgba(125, 225, 212, 0.10), transparent 65%),
		radial-gradient(600px 400px at 100% 100%, rgba(248, 157, 50, 0.07), transparent 65%),
		var(--wah-surface) !important;
	color: var(--wah-ink);
}

/* General text colours: low priority (:where), so any colour a page sets on purpose still wins. */
html[data-theme="dark"] :where(.wp-site-blocks) :where(h1, h2, h3, h4) {
	color: var(--wah-blue-dark);
}

html[data-theme="dark"] :where(.wp-site-blocks) :where(p, li, td, th, label, dd, dt) {
	color: var(--wah-ink-soft);
}

html[data-theme="dark"] :where(.wp-site-blocks) :where(strong, b) {
	color: var(--wah-ink);
}

html[data-theme="dark"] body .wp-site-blocks hr,
html[data-theme="dark"] body .wp-site-blocks .wp-block-separator {
	border-color: var(--wah-line) !important;
	background-color: var(--wah-line) !important;
	color: var(--wah-line) !important;
}

html[data-theme="dark"] body .wp-site-blocks input,
html[data-theme="dark"] body .wp-site-blocks select,
html[data-theme="dark"] body .wp-site-blocks textarea {
	background-color: var(--wah-surface-3);
	color: var(--wah-ink);
	border-color: var(--wah-line);
}

/* Top picture frame on inner pages */
html[data-theme="dark"] body:not(.home) .wp-block-post-featured-image img {
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

/* Mobile menu panel */
html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wah-surface) !important;
	color: var(--wah-ink) !important;
}

/* ---------- Dark mode: boxes and cards (light glass in light mode) ---------- */

html[data-theme="dark"] body .wah-price-section,
html[data-theme="dark"] body .wah-package-card,
html[data-theme="dark"] body .wah-package-note,
html[data-theme="dark"] body .wah-spot-card,
html[data-theme="dark"] body .wah-tos-intro,
html[data-theme="dark"] body .wah-timeline-sub,
html[data-theme="dark"] body .wah-care-intro,
html[data-theme="dark"] body .wah-journey-card,
html[data-theme="dark"] body .wah-final-box,
html[data-theme="dark"] body .wah-care-step-card,
html[data-theme="dark"] body .wah-care-final-box,
html[data-theme="dark"] body .wah-care-box,
html[data-theme="dark"] body .wah-box {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)), var(--wah-surface-2) !important;
	border-color: var(--wah-line) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
}

/* Warning boxes keep a warm tint */
html[data-theme="dark"] body .wah-box.warning,
html[data-theme="dark"] body .wah-care-box.warning {
	background: linear-gradient(180deg, rgba(248, 157, 50, 0.14), rgba(248, 157, 50, 0.05)), var(--wah-surface-2) !important;
	border-color: rgba(248, 157, 50, 0.35) !important;
}
html[data-theme="dark"] body .wah-box.info,
html[data-theme="dark"] body .wah-care-box.info {
	background: linear-gradient(180deg, rgba(125, 225, 212, 0.12), rgba(125, 225, 212, 0.04)), var(--wah-surface-2) !important;
	border-color: rgba(125, 225, 212, 0.3) !important;
}

/* Credits: soft frame behind each picture */
html[data-theme="dark"] body .wah-spot-img {
	background: linear-gradient(180deg, rgba(138, 216, 255, 0.07), rgba(255, 179, 71, 0.05)) !important;
}

/* ---------- Dark mode: text that was set to a fixed dark colour ---------- */

html[data-theme="dark"] body .wah-about h1,
html[data-theme="dark"] body .wah-about h2,
html[data-theme="dark"] body .wah-package-header h2 {
	color: var(--wah-blue-dark) !important;
}

html[data-theme="dark"] body .wah-about p,
html[data-theme="dark"] body .wah-about-intro,
html[data-theme="dark"] body .wah-package-header p {
	color: var(--wah-ink-soft) !important;
}

html[data-theme="dark"] body .wah-about-small,
html[data-theme="dark"] body .wah-package-header .wah-package-kicker {
	color: var(--wah-aqua) !important;
}

html[data-theme="dark"] body .wah-pattern-item span {
	color: var(--wah-ink-soft) !important;
}

/* Text inside those boxes */
html[data-theme="dark"] body :is(.wah-price-section, .wah-package-card, .wah-package-note, .wah-tos-intro, .wah-timeline-sub,
	.wah-care-intro, .wah-journey-card, .wah-final-box, .wah-care-step-card, .wah-care-final-box, .wah-care-box, .wah-box)
	:is(p, li, span:not(.wah-package-badge):not(.wah-step-number), .wah-note, .wah-care-note),
html[data-theme="dark"] body :is(.wah-tos-intro, .wah-timeline-sub, .wah-care-intro, .wah-package-note) {
	color: var(--wah-ink-soft) !important;
}

html[data-theme="dark"] body :is(.wah-box, .wah-care-box).important h3 {
	color: #b9c4ff !important;
}

html[data-theme="dark"] body .wah-package-badge,
html[data-theme="dark"] body .wah-step-number {
	color: var(--wah-aqua) !important;
}

/* Page-specific text that is dark on purpose in light mode */
html[data-theme="dark"] body .wah-world .wah-header,
html[data-theme="dark"] body .wah-world .wah-description,
html[data-theme="dark"] body .wah-spotlight .wah-sub,
html[data-theme="dark"] body .wah-spot-text p,
html[data-theme="dark"] body .wah-price-section label,
html[data-theme="dark"] body .wah-price-section .wah-option span {
	color: var(--wah-ink-soft) !important;
}

html[data-theme="dark"] body .wah-package-card h3,
html[data-theme="dark"] body .wah-package-note strong,
html[data-theme="dark"] body .wah-price-section strong,
html[data-theme="dark"] body .wah-spot-text h2 {
	color: var(--wah-blue-dark) !important;
}

/* Credits pictures: a clean light tile, like the gallery polaroids */
html[data-theme="dark"] body .wah-spot-img img {
	background: #eef5fc !important;
	box-shadow: 0 0 0 2px rgba(138, 216, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}