/**
 * xaviernaxa.my — brand skin + dark/light toggle for the Blocksy theme.
 *
 * Blocksy renders its entire front-end color system from 8 CSS custom
 * properties set on :root (--theme-palette-color-1 .. -8). Everything else
 * (links, headings, borders, backgrounds, buttons) is wired through those
 * via var(), so redefining the 8 values here re-skins the whole theme
 * without touching Blocksy's own templates or Customizer data.
 *
 * Default state is dark (no toggle needed on first load). The light
 * palette is a custom warm/reader-friendly one, not stock Blocksy's
 * bright-white-plus-saturated-blue — a pure #fff background next to
 * near-black text is genuinely harder on the eyes for long-form reading
 * (the stark contrast + white's glare), so backgrounds here are a soft
 * warm off-white ("paper", not "screen") and text is a warm dark gray
 * rather than near-black. The accent carries the same warm-amber brand
 * identity as the dark palette, just deepened for legible contrast
 * against a light background — so toggling feels like the same product
 * in two moods, not two different brands.
 */

/* ---- Dark (default) ---- */
:root,
:root[data-theme="dark"] {
	--theme-palette-color-1: #e0a83a; /* accent (links, buttons) */
	--theme-palette-color-2: #f0bb55; /* accent hover */
	--theme-palette-color-3: #c9ccd3; /* body text */
	--theme-palette-color-4: #f5f6f8; /* headings */
	--theme-palette-color-5: #262b35; /* borders / dividers */
	--theme-palette-color-6: #171a21; /* surface / card background */
	--theme-palette-color-7: #0f1115; /* page background */
	--theme-palette-color-8: #171a21; /* header / alt surface background */
}

/* ---- Light (toggled) — warm, reader-friendly, not stark white/black ---- */
:root[data-theme="light"] {
	--theme-palette-color-1: #ad5a1f; /* accent (links, buttons) — warm terracotta, not a harsh saturated blue */
	--theme-palette-color-2: #8a4717; /* accent hover — deeper terracotta */
	--theme-palette-color-3: #4a453c; /* body text — warm dark gray, not near-black (easier on the eyes at paragraph length) */
	--theme-palette-color-4: #2a2721; /* headings — richer warm dark, still short of pure black */
	--theme-palette-color-5: #e3dfd4; /* borders / dividers — soft warm gray, not stark light-gray */
	--theme-palette-color-6: #f2efe7; /* surface / card background — warm cream */
	--theme-palette-color-7: #faf8f3; /* page background — soft "paper" white, not glaring #fff */
	--theme-palette-color-8: #f2efe7; /* header / alt surface background — same warm cream as surface */
}

/* ---- Remove Blocksy's own header nav (menu_1/menu_mobile locations are
 * unassigned, see PLAN.md) and its mobile hamburger trigger — navigation now
 * lives entirely in the floating side-nav / bottom app-bar. ---- */
.ct-header-trigger {
	display: none !important;
}

/* ---- Site title (header) and footer text, aligned to where the list
 * starts ----
 * .entries[data-archive] is a 680px column centered on the page (see
 * below); its cards have no padding of their own beyond the 16px inset
 * each card applies to its own text. Giving the header and footer
 * containers the same max-width/centering plus that same 16px inset lines
 * the site title and the footer copyright text up with exactly where each
 * card's title text begins — not just centered on the page in isolation.
 *
 * Blocksy's header row is a 2-column grid ([data-column-set="2"] > div {
 * grid-template-columns: auto auto }) for a start/end slot pair; the end
 * slot (nav + search) is now empty, so it's collapsed away entirely.
 * Applies to both the desktop and mobile header rows, which share the
 * same markup shape. */
#header [data-column-set="2"] > .ct-container {
	grid-template-columns: 1fr;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

#header [data-column="end"] {
	display: none;
}

/* Current page title, shown next to the site title — a divider plus
 * thinner, smaller, muted text so it reads as secondary to the site name
 * rather than competing with it. Populated by xaviernaxa.js from
 * window.xaviernaxaPageTitle (empty on the homepage). */
.xaviernaxa-page-title-aside {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid var(--theme-palette-color-5);
	font-family: var(--theme-font-family, inherit);
	font-weight: 400;
	font-size: 0.8em;
	color: var(--theme-palette-color-3);
}

#footer [data-row="bottom"] > .ct-container {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* ---- Serif display headline (article title) ---- */
.page-title,
h1.page-title,
.entry-card .entry-title {
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Blocksy already renders the single-post column narrow by default via its
 * own [data-content="narrow"] container attribute — but its own narrow
 * width (750px) didn't match the list/header/footer's 680px, and even with
 * the custom property above matched, Blocksy's own padding/centering
 * formula ([data-content=narrow]>article, driven by several more custom
 * properties than just this one) still didn't land the article's left
 * edge in the same place as the header/list/footer's. Pinning the article
 * container directly to the exact same max-width + centering + 16px inset
 * technique used everywhere else removes any chance of the two formulas
 * drifting apart, rather than trying to make Blocksy's formula agree with
 * ours. */
:root {
	--theme-narrow-container-max-width: 680px;
}

[data-content="narrow"] > article {
	max-width: 680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* The comments / "Leave a Reply" section is a separate sibling after
 * </article> (.ct-comments-container > .ct-container-narrow), not part of
 * it — same mismatch, same fix. */
.ct-comments-container .ct-container-narrow {
	max-width: 680px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* Archive page title (e.g. "Category: Reviews") — the floating side-nav
 * already shows and highlights the current category, so repeating it as a
 * page heading is redundant. Hidden here, at CSS time (before first
 * paint), rather than removed by JS after the browser already rendered
 * it — the JS-removal approach caused a visible flash of this heading on
 * every page load, worse on fast repeated navigation. Only matches a
 * hero-section that's immediately followed by the archive list, so a
 * single post's own title (no adjacent .entries) is unaffected. */
.hero-section:has(+ .entries[data-archive]) {
	display: none;
}

/* ---- Article list: always a single column (desktop and mobile alike) ----
 * Blocksy sets column count via the --grid-template-columns custom property
 * on .entries at three breakpoints (3 / 2 / 1 cols). !important here is
 * deliberate and scoped to just this one property, so it wins at every
 * breakpoint regardless of which of Blocksy's own rules loads last. */
.entries[data-archive] {
	--grid-template-columns: 1fr !important;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	row-gap: 12px;
}

/* ==========================================================================
   Timeline rows, styled as cards matching the floating nav card's visual
   language (same surface color, border, and radius family as #xaviernaxa-side-nav
   and .xaviernaxa-nav-action), so the list and the menu read as one system.
   Real card markup (document order): entry-meta(category) → entry-title →
   featured image link → entry-excerpt → entry-meta(author + date).
   Visually reordered via flex `order` into a tweet-like shape: category tag,
   then an author/avatar/date header line, then the title, then the image.
   ========================================================================== */

.entries[data-archive] .entry-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 14px 16px;
	background: var(--theme-palette-color-6);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 18px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.entries[data-archive] .entry-card:hover {
	background: var(--theme-palette-color-7);
	border-color: var(--theme-palette-color-1);
}

.entries[data-archive] .entry-card > * {
	margin: 0;
}

.entries[data-archive] .entry-card .entry-meta:first-of-type { order: 1; }
.entries[data-archive] .entry-card .entry-meta:nth-of-type(2) { order: 2; }
.entries[data-archive] .entry-card .entry-title { order: 3; }
.entries[data-archive] .entry-card .entry-excerpt { order: 4; }
.entries[data-archive] .entry-card .ct-media-container { order: 5; }

.entries[data-archive] .entry-card .entry-meta:nth-of-type(2) {
	font-size: 0.78rem;
	color: var(--theme-palette-color-3);
}

/* Decorative initial-letter avatar — inserted before the author link by
 * xaviernaxa.js. Degrades gracefully to a plain text author line without JS. */
.xaviernaxa-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-8);
	font-size: 0.68rem;
	font-weight: 700;
	margin-right: 2px;
}

.entries[data-archive] .entry-card .entry-title {
	font-size: 1.05rem;
	line-height: 1.35;
}

.entries[data-archive] .entry-card .entry-title a {
	text-decoration: none;
	color: var(--theme-palette-color-4);
}

.entries[data-archive] .entry-card .entry-excerpt {
	/* List rows show title only, no description. */
	display: none;
}

.entries[data-archive] .entry-card .ct-media-container {
	display: block;
	width: 220px;
	max-width: 40%;
	border-radius: 12px;
	overflow: hidden;
	margin-top: 2px;
}

.entries[data-archive] .entry-card .ct-media-container img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
}

@media (max-width: 480px) {
	.entries[data-archive] .entry-card .ct-media-container {
		width: 140px;
		max-width: 45%;
	}

	.entries[data-archive] .entry-card .ct-media-container img {
		height: 90px;
	}
}

/* ---- Taxonomy / author / date "chip" row under the title ---- */
/* Real markup: <ul class="entry-meta"><li class="meta-author">…</li>
 * <li class="meta-date">…</li><li class="meta-categories">…</li></ul> */
ul.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--theme-palette-color-6);
	border: 1px solid var(--theme-palette-color-5);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--theme-palette-color-3);
}

.entry-meta li a {
	text-decoration: none;
	color: inherit;
}

.entry-meta li.meta-author img {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.entry-meta li.meta-categories a:hover,
.entry-meta li.meta-author a:hover {
	color: var(--theme-palette-color-1);
}

.entry-meta li.meta-categories {
	border-color: var(--theme-palette-color-1);
}

/* ==========================================================================
   Floating side nav card + floating back button.
   Both are fixed at top:50% / translateY(-50%) so they land on the exact
   same horizontal line — nav card on the left, back button on the right.
   ========================================================================== */

#xaviernaxa-side-nav {
	position: fixed;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999999;
	width: 200px;
	max-height: 80vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px;
	border-radius: 20px;
	background: var(--theme-palette-color-6);
	border: 1px solid var(--theme-palette-color-5);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#xaviernaxa-side-nav .xaviernaxa-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#xaviernaxa-side-nav .xaviernaxa-nav-list a {
	display: block;
	padding: 10px 14px;
	border-radius: 12px;
	color: var(--theme-palette-color-4);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#xaviernaxa-side-nav .xaviernaxa-nav-list a:hover,
#xaviernaxa-side-nav .xaviernaxa-nav-list .current-menu-item > a {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
}

#xaviernaxa-side-nav .xaviernaxa-nav-divider {
	height: 1px;
	margin: 6px 10px;
	background: var(--theme-palette-color-5);
	border: none;
}

/* ---- Search trigger + dark/light toggle — full-width rows inside the nav
 * card. Search re-uses Blocksy's own #search-modal: Blocksy matches
 * [data-toggle-panel*="search-modal"] anywhere in the document (it's built
 * to support multiple triggers for one panel), so this button opens the
 * theme's real search UI without duplicating any of it. ---- */
.xaviernaxa-nav-action {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: var(--theme-palette-color-4);
	font-size: 0.88rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
}

.xaviernaxa-nav-action:hover {
	background: var(--theme-palette-color-7);
	color: var(--theme-palette-color-1);
}

.xaviernaxa-nav-action svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* The original header search button is superseded by ours — hidden rather
 * than removed, so Blocksy's own JS still has it to query. Our button also
 * carries .ct-header-search (that's the exact class Blocksy's entry-points
 * system matches in main.js to wire up the click-to-open behavior —
 * data-toggle-panel alone isn't enough) and, on mobile, xaviernaxa.js moves it
 * *into* #header's end slot right next to the original — so this can't be
 * scoped by location alone. :not(.xaviernaxa-nav-action) excludes ours. */
#header .ct-header-search:not(.xaviernaxa-nav-action) {
	display: none !important;
}

#xaviernaxa-theme-toggle .xaviernaxa-icon-moon { display: none; }
:root[data-theme="light"] #xaviernaxa-theme-toggle .xaviernaxa-icon-sun { display: none; }
:root[data-theme="light"] #xaviernaxa-theme-toggle .xaviernaxa-icon-moon { display: inline-flex; }

/* ---- Floating back button — aligned with the nav card's vertical center ---- */
#xaviernaxa-back-btn {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999999;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-palette-color-6);
	border: 1px solid var(--theme-palette-color-5);
	color: var(--theme-palette-color-4);
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

#xaviernaxa-back-btn:hover {
	transform: translateY(-50%) translateX(-2px);
	border-color: var(--theme-palette-color-1);
}

#xaviernaxa-back-btn svg {
	width: 20px;
	height: 20px;
}

/* ---- Mobile: the side-nav card becomes a bottom app-bar, like a mobile
 * app's tab bar — fixed to the bottom of the screen regardless of scroll. ---- */
@media (max-width: 640px) {
	/* Bottom app-bar: no horizontal scrolling — every item (Home + each
	 * category) shares the bar's full width equally, like a standard
	 * mobile-app tab bar, instead of being content-sized in a scrollable
	 * row where later items could end up out of reach. Search and the
	 * theme toggle move out of this bar entirely (see below) — the bar is
	 * primary navigation only now. */
	#xaviernaxa-side-nav {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		transform: none;
		width: 100%;
		max-height: none;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		border-radius: 16px 16px 0 0;
		padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
		overscroll-behavior: contain;
	}

	#xaviernaxa-side-nav .xaviernaxa-nav-list {
		flex-direction: row;
		flex: 1;
		gap: 2px;
	}

	#xaviernaxa-side-nav .xaviernaxa-nav-list li {
		flex: 1 1 0;
		min-width: 0;
	}

	#xaviernaxa-side-nav .xaviernaxa-nav-list a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 100%;
		padding: 8px 2px;
		font-size: 0.62rem;
		line-height: 1.15;
		text-align: center;
		/* Full label text, not truncated — wraps to a second line within
		 * the tab rather than cutting off a word with an ellipsis. */
		white-space: normal;
		overflow-wrap: break-word;
	}

	#xaviernaxa-side-nav .xaviernaxa-nav-list a::before {
		content: attr(data-initial);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--theme-palette-color-7);
		font-size: 0.72rem;
		font-weight: 700;
		flex-shrink: 0;
	}

	/* The divider and the search/toggle buttons that used to sit after it
	 * are gone from the bar — they now live in the sticky header instead
	 * (moved there by xaviernaxa.js at this same breakpoint). */
	#xaviernaxa-side-nav .xaviernaxa-nav-divider,
	#xaviernaxa-side-nav .xaviernaxa-nav-action {
		display: none;
	}

	/* Search + theme toggle, relocated into the header's end slot. Each
	 * gets its own rectangular box — generously padded (not just sized to
	 * the icon) so neither reads as cramped. */
	#header .xaviernaxa-nav-action {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		aspect-ratio: 1 / 1;
		padding: 0;
		border-radius: 10px;
		background: var(--theme-palette-color-6);
		border: 1px solid var(--theme-palette-color-5);
	}

	#header .xaviernaxa-nav-action:hover {
		background: var(--theme-palette-color-7);
		border-color: var(--theme-palette-color-1);
	}

	#header .xaviernaxa-nav-action .xaviernaxa-toggle-label {
		display: none;
	}

	/* Header: the end slot (hidden on desktop) is restored here to hold
	 * search + toggle, and the row switches from the desktop single
	 * centered column to a left-title / right-icons layout. Sticky so
	 * those controls — and the way back to Home via the title — stay
	 * reachable while scrolling the list. */
	#header [data-column-set="2"] > .ct-container {
		display: flex;
		grid-template-columns: unset;
		align-items: center;
		justify-content: space-between;
	}

	/* The site title and its page-title aside ("xaviernaxa.my" / "Opinion")
	 * stack vertically on mobile instead of squeezing onto one line next
	 * to the search/toggle icons — there isn't enough width there for
	 * both without truncating one of them (a category name like
	 * "Gadgets & Tech" was getting cut down to a couple of characters).
	 * Stacking shows both in full; the header grows a little taller
	 * instead, which is a fine trade sitting in a sticky bar. */
	#header [data-column="start"] {
		flex: 1 1 auto;
		min-width: 0;
		overflow-wrap: break-word;
	}

	/* .site-title-container is the actual direct parent of both
	 * .site-title and the inserted .xaviernaxa-page-title-aside span (it's
	 * inserted as .site-title's next sibling) — that's the element that
	 * needs to stack them, not an ancestor further up. */
	#header .site-title-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
	}

	.xaviernaxa-page-title-aside {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
		white-space: normal;
	}

	#header [data-device="mobile"] [data-column="end"] {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}

	#header {
		position: sticky;
		top: 0;
		z-index: 999997;
		border-bottom: 1px solid var(--theme-palette-color-5);
	}

	/* Back button stays a mid-right floating FAB on mobile too — it sits
	 * well clear of the sticky header and the bottom app-bar. xaviernaxa.js
	 * hides it while the search panel is open. */
	#xaviernaxa-back-btn {
		right: 14px;
	}

	/* Reserve space so the fixed bottom app-bar never covers page content. */
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	/* No footer on mobile — the bottom app-bar already occupies that edge
	 * of the screen, and its copyright line isn't essential there. */
	#footer {
		display: none;
	}
}

/* ---- Gentler scrolling, no rubber-band bounce ----
 * overscroll-behavior stops scroll from "bouncing" past the top/bottom of
 * the page (and from chaining into a scrollable container's parent), which
 * reads as a clean stop at the ends rather than an elastic snap-back. This
 * is the standard, broadly-supported way to do this — true scroll-speed/
 * easing changes would mean hijacking native scroll with JS, which fights
 * the platform and tends to feel worse, not more "gentle", so this is
 * deliberately scoped to removing the bounce rather than that. */
html,
body {
	overscroll-behavior-y: none;
}

#xaviernaxa-side-nav {
	overscroll-behavior: contain;
}

/* ==========================================================================
   Infinite scroll (archive/index templates only)
   ========================================================================== */

#xaviernaxa-infinite-status {
	grid-column: 1 / -1;
	text-align: center;
	padding: 32px 16px;
	color: var(--theme-palette-color-3);
	font-size: 0.9rem;
}

/* Button pagination is removed outright — infinite scroll is the only way
 * to move through the list now. Unconditional (not JS-added) so there's no
 * chance of it flashing visible before xaviernaxa.js runs. */
.ct-pagination {
	display: none !important;
}