/**
 * JC Lalnunsanga child theme - brand colours (light + dark mode).
 *
 * Approach: Kadence renders almost everything through its own design
 * tokens (--global-palette1..9). Rather than chase every block with a
 * new selector, we remap that palette once - to our navy/gold brand for
 * light mode, and to a deep-navy/gold dark mode when the visitor toggles
 * it. Blocks, widgets and core Gutenberg output then convert on their
 * own, because they were already reading the theme's tokens.
 *
 * Kadence's own default light values are:
 *   1 #2B6CB0 accent        2 #215387 accent hover
 *   3 #1A202C headings      4 #2D3748 body text      5 #4A5568 muted
 *   6 #718096 borders       7 #EDF2F7 subtle bg      8 #F7FAFC page bg
 *   9 #ffffff card bg
 * All of that is overridden below.
 */

/* ---------- Light mode - the brand palette (navy & gold) ---------- */
:root {
	--bg-color: #faf8f4;
	--card-bg: #ffffff;
	--raised-bg: #f1ece3;
	--text-color: #262a33;
	--heading-color: #16223b;
	--muted-color: #6b7280;
	--header-bg: #16223b;
	--link-color: #16223b;
	--link-hover-color: #1f3157;
	--border-color: #e2ddd3;
	--gold: #d4af6a;
	--gold-dark: #b8925a;

	--global-palette1: var( --link-color );
	--global-palette2: var( --link-hover-color );
	--global-palette3: var( --heading-color );
	--global-palette4: var( --text-color );
	--global-palette5: var( --muted-color );
	--global-palette6: var( --border-color );
	--global-palette7: var( --raised-bg );
	--global-palette8: var( --bg-color );
	--global-palette9: var( --card-bg );
	--global-palette9rgb: 255, 255, 255;

	--wp--preset--color--theme-palette-1: var( --global-palette1 );
	--wp--preset--color--theme-palette-2: var( --global-palette2 );
	--wp--preset--color--theme-palette-3: var( --global-palette3 );
	--wp--preset--color--theme-palette-4: var( --global-palette4 );
	--wp--preset--color--theme-palette-5: var( --global-palette5 );
	--wp--preset--color--theme-palette-6: var( --global-palette6 );
	--wp--preset--color--theme-palette-7: var( --global-palette7 );
	--wp--preset--color--theme-palette-8: var( --global-palette8 );
	--wp--preset--color--theme-palette-9: var( --global-palette9 );
}

/* ---------- Dark mode ----------
 * Accent switches from navy to gold here on purpose: the light-mode
 * accent (navy) would be invisible as link text against a dark navy
 * page. Gold is already the brand's second colour, so dark mode simply
 * leans on it more.
 */
body.dark-mode {
	--bg-color: #0f172b;
	--card-bg: #1a2842;
	--raised-bg: #22335a;
	--text-color: #dbe1ea;
	--heading-color: #f5f1e8;
	--muted-color: #93a0b8;
	--header-bg: #0f172b;
	--link-color: #d4af6a;
	--link-hover-color: #e6c98a;
	--border-color: #33456e;

	--global-palette1: var( --link-color );
	--global-palette2: var( --link-hover-color );
	--global-palette3: var( --heading-color );
	--global-palette4: var( --text-color );
	--global-palette5: var( --muted-color );
	--global-palette6: var( --border-color );
	--global-palette7: var( --raised-bg );
	--global-palette8: var( --bg-color );
	--global-palette9: var( --card-bg );
	--global-palette9rgb: 26, 40, 66;

	--wp--preset--color--theme-palette-1: var( --global-palette1 );
	--wp--preset--color--theme-palette-2: var( --global-palette2 );
	--wp--preset--color--theme-palette-3: var( --global-palette3 );
	--wp--preset--color--theme-palette-4: var( --global-palette4 );
	--wp--preset--color--theme-palette-5: var( --global-palette5 );
	--wp--preset--color--theme-palette-6: var( --global-palette6 );
	--wp--preset--color--theme-palette-7: var( --global-palette7 );
	--wp--preset--color--theme-palette-8: var( --global-palette8 );
	--wp--preset--color--theme-palette-9: var( --global-palette9 );
}

/*
 * Header.
 * Kadence writes the header background as a literal `#ffffff` (it comes
 * from a Customizer colour, not the palette), on a selector led by
 * #masthead - so this needs an ID to win. Our header is navy in BOTH
 * modes (it matches the hero, which is also a fixed navy), so this is
 * set once outside the dark-mode block.
 */
#masthead,
.site-header-row-container-inner {
	background: var( --header-bg );
}

body.dark-mode #masthead,
body.dark-mode .site-header-row-container-inner {
	background: var( --header-bg );
}

/* Core block leftovers that hardcode a light colour instead of using theme tokens. */
body.dark-mode .wp-block-search__button {
	border-color: var( --border-color );
}

body.dark-mode .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-color: var( --border-color );
	background-color: var( --card-bg );
}

body.dark-mode .wp-block-search__input {
	background-color: var( --card-bg );
	color: var( --text-color );
}

body.dark-mode .wp-block-social-links:not( .is-style-logos-only ) .wp-social-link {
	background-color: var( --raised-bg );
	color: var( --heading-color );
}

body.dark-mode .wp-block-table.is-style-stripes tbody tr:nth-child( odd ) {
	background-color: var( --raised-bg );
}

body.dark-mode .wp-block-table.is-style-stripes {
	border-bottom-color: var( --border-color );
}

body.dark-mode .wp-block-calendar table:not( .has-text-color ) {
	color: var( --text-color );
}

body.dark-mode .wp-block-calendar table th {
	background: var( --raised-bg );
	color: var( --heading-color );
}

body.dark-mode .wp-block-calendar table:not( .has-text-color ) th,
body.dark-mode .wp-block-calendar table:not( .has-text-color ) td {
	border-color: var( --border-color );
}

body.dark-mode .entry.loop-entry,
body.dark-mode .entry.single-entry,
body.dark-mode .jcl-card {
	border: 1px solid var( --border-color );
}

body.dark-mode .jcl-card {
	background: var( --card-bg );
}

/*
 * Floating controls. Dark mode + back-to-top are back in their original
 * bottom-right stack; the EN/MZ toggle lives on its own in the top-right
 * corner (not dead-centre - a fixed centred element crosses through
 * whatever centred heading happens to scroll underneath it, which is why
 * it looked wrong there).
 */
#dark-mode-toggle,
#back-to-top {
	position: fixed;
	right: 20px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #d4af6a;
	border-radius: 50%;
	background: #16223b;
	color: #faf8f4;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
}

#dark-mode-toggle {
	bottom: 20px;
}

#dark-mode-toggle:hover,
#dark-mode-toggle:focus {
	background: #1f3157;
}

/* Back-to-top sits above the dark mode button and stays hidden until scrolled. */
#back-to-top {
	bottom: 76px;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

#back-to-top:hover,
#back-to-top:focus {
	background: #1f3157;
}

/*
 * English / Mizo toggle - only rendered on the homepage's two variants
 * (see jcl_child_language_toggle in functions.php). Top-right corner,
 * on its own - deliberately not sharing the bottom stack with the other
 * two, since it only appears on two specific pages.
 */
#jcl-lang-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	display: flex;
	background: #16223b;
	border: 1px solid #d4af6a;
	border-radius: 50px;
	overflow: hidden;
	font-family: 'Work Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
}

#jcl-lang-toggle a {
	padding: 10px 14px;
	color: #93a0b8;
	text-decoration: none;
}

#jcl-lang-toggle a.is-active {
	background: #d4af6a;
	color: #16223b;
}

#jcl-lang-toggle a:hover:not( .is-active ) {
	color: #faf8f4;
}

/* Nudge below the WordPress admin bar so it doesn't overlap while logged in - cosmetic, visitors never see this. */
body.admin-bar #jcl-lang-toggle {
	top: 52px;
}

/*
 * On mobile, Kadence's menu (hamburger) button sits top-right of the
 * header - the same corner this toggle uses on desktop - so on small
 * screens it moves to bottom-left instead: opposite side from the
 * dark-mode/back-to-top stack (bottom-right), clear of the header
 * entirely regardless of how tall it renders on a given phone.
 */
@media ( max-width: 768px ) {
	#jcl-lang-toggle {
		top: auto;
		right: auto;
		bottom: 20px;
		left: 20px;
	}

	body.admin-bar #jcl-lang-toggle {
		top: auto;
	}

	/*
	 * Reserve empty space at the bottom of every page on mobile, so the
	 * fixed dark-mode/back-to-top/language controls always have clear
	 * room to float in - without this, whatever real text happens to end
	 * near the bottom of a tall section (like the hero paragraph) ends up
	 * running underneath them instead of stopping short.
	 */
	body {
		padding-bottom: 90px;
	}
}