/*
 * FINAF launch visual QA fixes.
 * Scoped so the plugin can be disabled as an immediate rollback.
 */

/* At the two-column tablet breakpoint, center an unpaired final story. */
@media (min-width: 601px) and (max-width: 1050px) {
	.finaf-ui-magazine-grid > article:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 7px);
	}
}

/* Keep the menu glyph readable after touch/keyboard focus in dark mode. */
html[data-finaf-theme="dark"] .mobile-nav-toggle:is(:focus, :focus-visible, :active) {
	border-color: var(--fui-green, #63d8c3) !important;
	background: var(--fui-surface, #102b35) !important;
	color: var(--fui-ink, #e3eff2) !important;
	box-shadow: 0 0 0 3px rgba(99, 216, 195, .28) !important;
}

html[data-finaf-theme="dark"] .mobile-nav-toggle:is(:focus, :focus-visible, :active) :is(span, svg),
html[data-finaf-theme="dark"] .mobile-nav-toggle:is(:focus, :focus-visible, :active) svg {
	color: currentColor !important;
	stroke: currentColor !important;
}

html[data-finaf-theme="dark"] .mobile-nav-toggle:is(:focus, :focus-visible, :active) span,
html[data-finaf-theme="dark"] .mobile-nav-toggle:is(:focus, :focus-visible, :active)::before,
html[data-finaf-theme="dark"] .mobile-nav-toggle:is(:focus, :focus-visible, :active)::after {
	background-color: currentColor !important;
}

@media (max-width: 600px) {
	.finaf-ui-magazine-grid > article:last-child:nth-child(odd) {
		width: 100%;
	}
}