/* Listing Manager — global styles (loaded site-wide, not just our own templates) */

/* Defensive baseline: without this, an element's declared width doesn't
   include its own padding/border, which is a common source of elements
   silently running wider than their container. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Design tokens. Edit these to restyle the whole site.
 * Dark is the default theme; html.dark-theme is set before first paint by the
 * inline script in <head> (see LM_Template_Loader::dark_mode_early_script).
 * The --base / --contrast / --accent set is GeneratePress's own palette, so the
 * theme's header, navigation, footer and form fields follow the tokens too.
 * `html:root` (0,1,1) is deliberate: it has to beat the theme's inline `:root`
 * block, which is printed after this stylesheet.
 */
html:root {
	--lm-bg: #edf4fa;
	--lm-panel: #fff;
	--lm-panel2: #e6f0f9;
	--lm-ink: #10243b;
	--lm-muted: #4c657f;
	--lm-line: #c8d9e7;
	--lm-blue: #009dff;  /* accents, borders, icons */
	--lm-link: #0560a8;  /* blue text on the page background (>= 5:1) */
	--lm-btn: #0870c4;   /* solid button background under white text (>= 5:1) */
	--lm-header: rgba( 237, 244, 250, 0.94 );
	--lm-radius: 14px;
	--lm-max: 1200px;
	--lm-gutter: 32px;
	--lm-tap: 44px;

	/* Names the plugin's older rules still use. */
	--lm-surface: var( --lm-panel );
	--lm-text: var( --lm-ink );
	--lm-text-muted: var( --lm-muted );
	--lm-border: var( --lm-line );

	/* GeneratePress palette */
	--base: #e6f0f9;
	--base-2: #edf4fa;
	--base-3: #fff;
	--contrast: #10243b;
	--contrast-2: #4c657f;
	--contrast-3: #8aa0b5;
	--accent: #0560a8;
}

html.dark-theme:root {
	--lm-bg: #061421;
	--lm-panel: #0b1d2d;
	--lm-panel2: #10283c;
	--lm-ink: #f3f7ff;
	--lm-muted: #a7bed5;
	--lm-line: #21394e;
	--lm-link: #4db5ff;
	--lm-header: rgba( 6, 20, 33, 0.94 );

	--base: #10283c;
	--base-2: #061421;
	--base-3: #0b1d2d;
	--contrast: #f3f7ff;
	--contrast-2: #a7bed5;
	--contrast-3: #6b8499;
	--accent: #4db5ff;
}

@media ( max-width: 760px ) {
	html:root {
		--lm-gutter: 16px;
	}
}

body {
	background-color: var( --lm-bg );
	color: var( --lm-ink );
}

:focus-visible {
	outline: 3px solid var( --lm-blue );
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Header (GeneratePress markup, restyled)
 * `body .x` so these win over the theme's inline CSS, which loads later.
 * ------------------------------------------------------------------ */

body .site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var( --lm-header );
	border-bottom: 1px solid var( --lm-line );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
}

body .site-header .inside-header {
	max-width: var( --lm-max );
	min-height: 68px;
	padding: 0 var( --lm-gutter );
	align-items: center;
	gap: 24px;
}

body .site-header .header-image {
	width: auto;
	max-width: none;
	height: 30px;
}

body .site-header .site-logo a {
	display: inline-flex;
	align-items: center;
	min-height: var( --lm-tap );
}

body .main-navigation,
body .main-navigation ul ul {
	background: transparent;
}

body .main-navigation .inside-navigation {
	padding: 0;
}

body .main-navigation .main-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
}

body .main-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: var( --lm-tap );
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --lm-ink );
	border-radius: 10px;
}

body .main-navigation .main-nav ul li:not( [class*='current-menu-'] ):hover > a,
body .main-navigation .main-nav ul li:not( [class*='current-menu-'] ):focus > a {
	color: var( --lm-link );
	background: var( --lm-panel2 );
}

body .main-navigation .main-nav ul li[class*='current-menu-'] > a {
	color: var( --lm-link );
}

/* The menu's icons are inline SVGs hard-coded black; follow the text colour instead. */
body .main-navigation .main-nav svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

body .main-navigation .main-nav svg [stroke] {
	stroke: currentColor;
}

body .main-navigation .main-nav svg [fill]:not( [fill='none'] ) {
	fill: currentColor;
}

body .main-navigation .main-nav svg rect[fill='none'] {
	fill: none;
}

/*
 * Dark / light toggle: the "Dark/light toggle" Custom Link in the Primary menu
 * (li.switch-theme, wired up by dark-mode.js). The label stays for screen readers;
 * a sun (in dark mode) or moon (in light mode) is drawn over it.
 */
body .main-navigation .main-nav li.switch-theme > a {
	position: relative;
	width: var( --lm-tap );
	padding: 0;
	font-size: 0;
	overflow: hidden;
	color: var( --lm-ink );
}

body .main-navigation .main-nav li.switch-theme > a::before {
	content: '';
	position: absolute;
	inset: 11px;
	background: currentColor;
	-webkit-mask: var( --lm-icon-moon ) center / contain no-repeat;
	mask: var( --lm-icon-moon ) center / contain no-repeat;
}

html.dark-theme body .main-navigation .main-nav li.switch-theme > a::before {
	-webkit-mask-image: var( --lm-icon-sun );
	mask-image: var( --lm-icon-sun );
}

html:root {
	--lm-icon-moon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E" );
	--lm-icon-sun: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.4 1.4m11.2 11.2L19 19M5 19l1.4-1.4M17.6 6.4 19 5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E" );
}

/* Header search button (mobile only; desktop uses the menu's own search item). */
.lm-header-search {
	display: none;
	align-items: center;
	justify-content: center;
	width: var( --lm-tap );
	height: var( --lm-tap );
	margin-left: auto;
	color: var( --lm-ink );
	border-radius: 50%;
}

.lm-header-search:hover {
	background: var( --lm-panel2 );
	color: var( --lm-ink );
}

.lm-header-search svg {
	width: 20px;
	height: 20px;
}

/* Menu toggle (the theme's own button). Phones only: on desktop the theme hides it. */
@media ( max-width: 768px ) {
	body .menu-toggle,
	body .main-navigation .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var( --lm-tap );
		min-height: var( --lm-tap );
		padding: 0 10px;
		color: var( --lm-ink );
		background: transparent;
		border: 0;
		border-radius: 50%;
	}

	body .menu-toggle:hover,
	body .menu-toggle:focus {
		background: var( --lm-panel2 );
		color: var( --lm-ink );
	}

	body .menu-toggle .gp-icon svg {
		width: 22px;
		height: 22px;
		color: var( --lm-ink );
	}
}

/* The mobile menu button keeps the thin blue hamburger the site has always had (it used to live in homepage.css). */
@media ( max-width: 768px ) {
	.menu-toggle {
		background: transparent !important;
		border: none;
		padding: 8px;
	}
	.menu-toggle .gp-icon.icon-menu-bars svg {
		width: 22px;
		height: 22px;
		color: #046ed0;
	}
}

@media ( max-width: 768px ) {
	body .site-header .inside-header {
		min-height: 58px;
		gap: 4px;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	body .site-header .header-image {
		height: 26px;
	}

	/* Menu button first, then the logo, search on the right (the mock's order). */
	body .site-header .mobile-menu-control-wrapper {
		order: -1;
		margin: 0 0 0 -10px;
	}

	body .site-header .site-logo {
		order: 0;
	}

	.lm-header-search {
		display: inline-flex;
		order: 1;
	}

	/* The menu's own search item is replaced by the header button on phones. */
	body .main-navigation .main-nav li.lm-search-item {
		display: none;
	}

	/* Dropdown menu: full-width list, 48px rows, 16px text. */
	body .site-header #site-navigation {
		order: 2;
		flex: 1 0 100%;
	}

	body .main-navigation .main-nav ul {
		display: block;
		padding: 8px 0 12px;
	}

	body .main-navigation .main-nav ul li a {
		min-height: 48px;
		padding: 0 12px;
		font-size: 16px;
	}

	body .main-navigation .main-nav li.switch-theme > a {
		width: 100%;
		padding: 0 12px;
		font-size: 16px;
		gap: 12px;
		overflow: visible;
	}

	/* On phones the toggle is a row: icon, then the label. */
	body .main-navigation .main-nav li.switch-theme > a::before {
		position: static;
		display: inline-block;
		flex: none;
		width: 20px;
		height: 20px;
	}
}

/* ------------------------------------------------------------------
 * Footer (GeneratePress .site-info, extended by LM_Template_Loader::footer_menu)
 * ------------------------------------------------------------------ */

body .site-info {
	margin-top: 40px;
	background: var( --lm-panel );
	border-top: 1px solid var( --lm-line );
	color: var( --lm-muted );
	text-align: left;
}

body .site-info .inside-site-info {
	max-width: var( --lm-max );
	padding: 0 var( --lm-gutter );
	flex-direction: column;
	align-items: stretch;
}

.lm-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	padding: 36px 0 28px;
}

.lm-footer-brand p {
	max-width: 340px;
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var( --lm-muted );
}

.lm-footer-logo {
	display: block;
	width: auto;
	height: 28px;
}

.lm-footer-brand a {
	display: inline-flex;
	align-items: center;
	min-height: var( --lm-tap );
}

.lm-footer-heading {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var( --lm-ink );
}

.lm-footer-col a,
body .lm-footer-menu a {
	display: flex;
	align-items: center;
	min-height: var( --lm-tap );
	font-size: 14px;
	color: var( --lm-muted );
	text-decoration: none;
}

.lm-footer-col a:hover,
body .lm-footer-menu a:hover {
	color: var( --lm-link );
	text-decoration: none;
}

/* The footer menu (Appearance > Menus > Footer Links): a plain column. */
body .lm-footer-links {
	width: auto;
	margin: 0;
}

body .lm-footer-menu {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .site-info .copyright-bar {
	padding: 14px 0 18px;
	border-top: 1px solid var( --lm-line );
	font-size: 13px;
	text-align: left;
	color: var( --lm-muted );
}

@media ( max-width: 760px ) {
	body .site-info {
		margin-top: 28px;
	}

	.lm-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px 24px;
		padding: 24px 0 20px;
	}

	.lm-footer-brand {
		grid-column: 1 / -1;
	}

	.lm-footer-brand p {
		font-size: 13px;
	}

	.lm-footer-heading {
		font-size: 13px;
	}
}

/* Wide banner (a listing's landscape screenshot, see lm_get_banner()). Shared by the carousel, teasers and related cards. */
.lm-banner {
	position: relative;
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: var( --lm-panel2 );
}

.lm-banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lm-banner.is-portrait img {
	object-position: center top;
}

.lm-banner.is-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lm-banner.is-icon img {
	width: 72px;
	height: 72px;
	border-radius: 16px;
}

/* Moon/sun toggle icon states (legacy markup, kept in case a menu title still has them) */
.switch-theme .sun {
	display: none;
}
.dark-theme .switch-theme .sun {
	display: inline-block;
}
.dark-theme .switch-theme .moon {
	display: none;
}

/*
 * Dark overrides for the older templates (homepage, listing, archives). They
 * are replaced by token-based styles phase by phase and removed once nothing
 * hard-codes a light colour any more.
 */
.dark-theme .box-shadow-commn {
	background: var( --lm-panel );
	box-shadow: none;
	border: 1px solid var( --lm-line );
}

.dark-theme .entry-title,
.dark-theme .font-sixteen,
.dark-theme .app-detailes-main-block,
.dark-theme .app-name-table-value {
	color: var( --lm-ink );
}

.dark-theme .app-desc,
.dark-theme .appver,
.dark-theme .developer-name,
.dark-theme .app-name-table-key,
.dark-theme .dld-page-refresh-para,
.dark-theme #download-loading {
	color: var( --lm-muted );
}

.dark-theme .progress {
	background: var( --lm-panel2 );
}

.dark-theme .lm-official-note,
.dark-theme .lm-other-os {
	color: var( --lm-muted );
}

.dark-theme .box-shadow-commn.lm-legal-notice {
	border-left: 4px solid #e0a100;
	background: #2a2414;
}

.dark-theme .lm-legal-notice p {
	color: #f1e4b8;
}

/* Links inside running text must be distinguishable without colour alone (the category "›" next to its name). */
.app-name-table-value a {
	text-decoration: underline;
}

.dark-theme .app-name-table-value a,
.dark-theme .cat-link-icon {
	color: var( --lm-link );
}

.dark-theme .app-info-grp th,
.dark-theme .app-info-grp td {
	border-bottom-color: var( --lm-line );
}

.dark-theme .social-share-wrapper a {
	background: var( --lm-panel );
	color: var( --lm-ink );
}

.dark-theme .screenshots-wrapper {
	scrollbar-color: #3a5670 var( --lm-panel );
}
.dark-theme .screenshots-wrapper::-webkit-scrollbar-track {
	background: var( --lm-panel );
}
.dark-theme .screenshots-wrapper::-webkit-scrollbar-thumb {
	background: #3a5670;
}

/* Breadcrumbs (listing pages, /download/, category archives) */
.breadcrumbs-section {
	padding: 10px 0;
}

.lm-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var( --lm-ink );
}

.lm-breadcrumb [aria-current] {
	font-weight: 600;
}

.lm-breadcrumb {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
}

.lm-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var( --lm-link );
	text-decoration: none;
}

.lm-breadcrumbs a:hover {
	text-decoration: underline;
}

.lm-breadcrumb-sep {
	flex-shrink: 0;
	margin: 0 0.5em;
	color: var( --lm-muted );
}

/* Mobile: one line; long names truncate with an ellipsis, Home never shrinks and the current page gets the leftover room. */
@media ( max-width: 600px ) {
	.lm-breadcrumbs {
		flex-wrap: nowrap;
	}

	.lm-breadcrumb:first-child {
		flex-shrink: 0;
	}

	.lm-breadcrumb:last-child {
		flex: 1 1 0;
	}

	.lm-breadcrumb a,
	.lm-breadcrumb [aria-current] {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

/* Legal links row printed in the footer (includes/class-legal-pages.php) */
.lm-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	padding: 18px var( --lm-gutter ) 28px;
	font-size: 13px;
}

.lm-legal-links a {
	color: var( --lm-muted );
	text-decoration: none;
}

.lm-legal-links a:hover {
	color: var( --lm-link );
	text-decoration: underline;
}