/*
 * Additions of the Node site on top of the WordPress theme CSS, shared by both themes (loaded after
 * retrogames.css): the My Favorites link and page.
 */

/* Top strip link (classic theme; the WordPress "Login / Register" place). */
.rg-account a.rg-fav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.rg-account a.rg-fav-link svg { color: var(--rg-red); }
.rg-account a.rg-fav-link:hover { color: var(--rg-red); }

/* My Favorites page */
.rg-fav-note { margin: -6px 0 14px; font-size: 13px; color: #8a8f96; }
.rg-fav-empty { padding: 24px; border: 1px dashed #d6d8dc; border-radius: 4px; background: #fafafa; color: #555; text-wrap: pretty; }
.rg-fav-empty p { margin: 0 0 8px; }
.rg-fav-empty p:last-child { margin: 0; }
.rg-fav-empty a { color: var(--rg-red); font-weight: 600; }
.rg-fav-note b { color: #555; font-variant-numeric: tabular-nums; }
.rg-fav-remove {
	display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
	padding: 8px 10px; border: 0; border-top: 1px solid var(--rg-border); background: transparent;
	color: #8a8f96; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rg-fav-remove:hover { color: var(--rg-red); background: #fafafa; }
.rg-fav-remove:focus-visible { outline: 2px solid var(--rg-red); outline-offset: -2px; }

/* Hub theme: quick links in the top bar, plain icon + text like playretrogames.com's "Login / Register". */
.hub-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.theme-hub .hub-actions a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; color: #e7e9ec; font-size: 14px; font-weight: 600; white-space: nowrap; }
.hub-actions svg { color: #9aa3ad; }
.theme-hub .hub-actions a:hover { color: #fff; }
.theme-hub .hub-actions a:hover svg,
.theme-hub .hub-actions a[href="/favorites/"] svg { color: var(--rg-red); }
.theme-hub .hub-actions a:focus-visible { outline: 2px solid var(--rg-red); outline-offset: 2px; }
@media (max-width: 1023px) {
	.hub-actions { display: none; }
}

/* Hub theme: section headings like the tab bar titles (no capitals). */
.theme-hub .rg-section-title { text-transform: none; font-size: 20px; }

/* Game page: the long part of the description behind "Read more" (native <details>, content stays in the HTML). */
.rg-more { margin: 4px 0 14px; }
.rg-more > summary {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
	list-style: none; cursor: pointer; color: var(--rg-red); font-size: 14px; font-weight: 600;
}
.rg-more > summary::-webkit-details-marker { display: none; }
.rg-more > summary::after {
	content: ""; width: 7px; height: 7px; margin-top: -3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.rg-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.rg-more > summary:hover { text-decoration: underline; }
.rg-more > summary:focus-visible { outline: 2px solid var(--rg-red); outline-offset: 2px; }
.rg-more-close,
.rg-more[open] .rg-more-open { display: none; }
.rg-more[open] .rg-more-close { display: inline; }

/* Ad between grid rows (CardGrid "list_between"): a full row, the empty slot collapses when AdSense has no ad. */
.rg-grid > .rg-grid-ad { grid-column: 1 / -1; list-style: none; margin: 4px 0; text-align: center; min-width: 0; }
.rg-grid > .rg-grid-ad:empty { display: none; }
.rg-grid-ad .playf2p-ad { max-width: 970px; margin: 0 auto; }
/* AdSense marks slots it does not fill; hide the empty row instead of leaving a gap (Google's recommended CSS). */
.rg-grid > .rg-grid-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.rg-grid > .rg-grid-ad:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]) { display: none; }