/**
 * Site-wide responsive layer.
 *
 * Enqueued with a dependency on the parent's `video_wp-responsive`, so it is
 * always the last layout stylesheet on the page. That means plain selectors
 * beat the parent on cascade order and !important is only needed where the
 * parent itself used !important, or where a template emits an inline style.
 *
 * WHY THIS FILE EXISTS
 *
 * The stock theme is a fixed-width design from ~2014. Every breakpoint swaps
 * one pixel width for another (1500 -> 980 -> 750 -> 570 -> 460 -> 305) rather
 * than letting anything be fluid, and the breakpoints are min+max ranges with
 * gaps in them:
 *
 *     (min-width:1004px) and (max-width:1230px)
 *     (min-width: 760px) and (max-width:1000px)   <- 1001-1003px matches nothing
 *     (min-width: 580px) and (max-width: 760px)
 *     (min-width: 480px) and (max-width: 580px)   <- 479-480px matches nothing
 *     (max-width: 479px)
 *
 * Inside a gap the desktop widths apply and the page overflows. This file
 * replaces that with a single max-width ladder, which cannot have gaps.
 *
 * THE ROOT CAUSE OF THE OVERFLOW
 *
 * `header div.wrap` was width:100% plus 20px of horizontal padding with the
 * browser default box-sizing:content-box, making it 20px wider than the
 * viewport on every page on the site. Because the header is global, the whole
 * document became 20px too wide and every width:100% element inherited the
 * error, which is what pushed content off the right edge. Section 1 fixes that
 * class of bug for the whole layout chain rather than that one element.
 */

/* ─── 1. Box-sizing for the layout chain ──────────────────────────────────
   The theme never sets border-box, so width:100% + padding overflows. */

header div.wrap,
.wrap,
.wrap-middle,
.wrap-content,
.wrap-left-content,
.wrap-fullwidth,
.wrap-fullwidth-bg,
.home-middle,
.home-fullwidth,
.articles-content,
.single-content,
.sidebar,
.sidebar-wrapper,
.game-container,
#small-sidebar,
.entry {
	box-sizing: border-box;
}

/* ─── 2. Fluid containers ─────────────────────────────────────────────────
   width:100% with a max-width at the old fixed value, so the desktop look is
   unchanged and everything below it simply fits. */

header div.wrap {
	width: 100%;
	max-width: 1300px;
	padding-left: 20px;
	padding-right: 20px;
}

/* style.css uses !important here, so this has to as well. */
.wrap-middle {
	width: 100% !important;
	max-width: 1500px !important;
	padding-left: 16px;
	padding-right: 16px;
}

.wrap-fullwidth,
.wrap-fullwidth-bg,
.home-middle {
	width: 100%;
	max-width: 1180px;
	padding-left: 16px;
	padding-right: 16px;
}

.wrap-content,
.wrap-left-content,
.articles-content {
	width: 100%;
	max-width: 100%;
	float: none;
}

/* Nothing in the layout may exceed the viewport. */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
}
img { height: auto; }

.logo { max-width: 100%; height: auto; }

/* ─── 3. Post content safety ──────────────────────────────────────────────
   Game posts carry long download URLs and occasional tables, both of which
   overflow a narrow column unless told otherwise. */

.entry img,
.entry iframe,
.entry video,
.entry table { max-width: 100%; }

.entry iframe,
.entry video { height: auto; }

.entry table { display: block; overflow-x: auto; }

.entry,
.entry p,
.entry li,
.entry h1, .entry h2, .entry h3, .entry h4 { overflow-wrap: break-word; }

.entry pre { overflow-x: auto; white-space: pre; }

/* Very long unbroken URLs in link text */
.entry a { overflow-wrap: anywhere; }

/* ─── 4. Mobile nav drawer ────────────────────────────────────────────────
   Hidden on desktop; the trigger only appears once the theme hides its own
   menu at 1230px. Colours mirror the child footer / rsg-base palette. */

.rsg-mnav-toggle {
	display: none;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
}
.rsg-mnav-toggle:hover { background: rgba(255, 255, 255, .2); }
.rsg-mnav-toggle:focus-visible { outline: 2px solid #3aa3ff; outline-offset: 2px; }

.rsg-mnav-bars { display: block; width: 20px; }
.rsg-mnav-bars i {
	display: block;
	height: 2px;
	margin: 4px 0;
	border-radius: 2px;
	background: currentColor;
}

.rsg-mnav {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(6, 9, 15, .6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s ease;
}
.rsg-mnav.is-open { opacity: 1; visibility: visible; }

html.rsg-mnav-open { overflow: hidden; }

.rsg-mnav-panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(86vw, 340px);
	display: flex;
	flex-direction: column;
	padding: 16px 0 28px;
	background: #0a0e16;
	border-right: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 12px 0 40px rgba(0, 0, 0, .55);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.rsg-mnav.is-open .rsg-mnav-panel { transform: none; }

.rsg-mnav-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 18px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rsg-mnav-title {
	color: #e9edf3;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.rsg-mnav-close {
	width: 36px; height: 36px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #e9edf3;
	cursor: pointer;
}
.rsg-mnav-close:hover { background: rgba(255, 255, 255, .16); }
.rsg-mnav-close svg { width: 18px; height: 18px; }

.rsg-mnav-search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 18px 6px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: #9aa1ad;
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}
.rsg-mnav-search:hover { background: rgba(255, 255, 255, .12); color: #e9edf3; }
.rsg-mnav-search svg { width: 16px; height: 16px; flex: 0 0 auto; }

.rsg-mnav-menu,
.rsg-mnav-menu ul { list-style: none; margin: 0; padding: 0; }
.rsg-mnav-menu { padding: 8px 0; }

.rsg-mnav-menu li { position: relative; margin: 0; }

.rsg-mnav .rsg-mnav-menu a {
	display: block;
	padding: 13px 46px 13px 18px;
	color: #e9edf3 !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.rsg-mnav .rsg-mnav-menu a:hover,
.rsg-mnav .rsg-mnav-menu a:focus { color: #3aa3ff !important; background: rgba(255, 255, 255, .04); }

/* The header search button is injected into this menu location; the drawer
   has its own search row above, so hide the duplicate. */
.rsg-mnav .menu-search-item { display: none; }

.rsg-mnav-expand {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 38px;
	height: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #9aa1ad;
	cursor: pointer;
	transition: transform .2s ease, color .2s ease;
}
.rsg-mnav-expand:hover { color: #fff; }
.rsg-mnav-expand svg { width: 18px; height: 18px; }
.is-expanded > .rsg-mnav-expand { transform: rotate(180deg); color: #3aa3ff; }

.rsg-mnav-sub { display: none; background: rgba(255, 255, 255, .03); }
.is-expanded > .rsg-mnav-sub { display: block; }
.rsg-mnav .rsg-mnav-sub a {
	padding-left: 34px;
	font-size: 14px;
	font-weight: 600;
	color: #9aa1ad !important;
}

/* ─── 5. Card grids ───────────────────────────────────────────────────────
   The templates emit `grid-template-columns` as an inline style, which only
   !important can override. */

ul.modern-articles {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0;
	display: grid !important;
	grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
	gap: 14px !important;
	opacity: 1 !important;
}

ul.modern-articles li,
ul.modern-articles li.single-game {
	float: none !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0;
	margin: 0 !important;
	overflow: hidden;
}

/* Fixed pixel image sizes are set at every parent breakpoint; none of them
   fit a fluid grid track. */
ul.modern-articles li img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 205 / 319;
	object-fit: cover;
	display: block;
}

.game-container {
	display: block !important;
	width: 100%;
	margin: 0 0 22px !important;
	padding: 22px 18px !important;
}

/*
 * index.php (archives, search, 404) wraps its grid in an UNCLASSED div carrying
 * the same inline `display:inline-block` + 20px margin/padding. Only the
 * templates on template-home*.php got the .game-container class, so this
 * selector is what keeps archive pages from overflowing. The attribute match is
 * safe here: the only other direct child of .articles-content is
 * .load-more-wrapper, which has no style attribute.
 */
.articles-content > div[style] {
	display: block !important;
	width: 100%;
	margin: 0 0 22px !important;
	padding: 22px 18px !important;
	box-sizing: border-box;
}

/* The section headings carry inline font-size/padding */
.game-container > h1,
.articles-content > div > h1 {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* ─── 6. Single post & sidebar ────────────────────────────────────────────*/

.single-content {
	width: 100%;
	max-width: 829px;
}

.sidebar {
	width: 300px;
	max-width: 100%;
	margin: 30px 0 0 0;
}
.sidebar .widget { width: 100%; max-width: 300px; }

#single-share { display: flex; flex-wrap: wrap; gap: 8px; }
#single-share a { float: none; }

/* ═══ BREAKPOINT LADDER ═══════════════════════════════════════════════════
   max-width only, so there are no gaps between ranges. */

@media (max-width: 1400px) {
	ul.modern-articles { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (max-width: 1230px) {
	/*
	 * The theme hides its own nav across this range, but its breakpoints are
	 * min+max pairs with a gap at 1001-1003px where the desktop menu reappears.
	 * Hiding it here explicitly closes that gap, so the menu and the drawer
	 * trigger can never both be visible.
	 */
	.jquerycssmenu { display: none; }
	.rsg-mnav-toggle { display: inline-flex; }
	.main-menu > .wrap { justify-content: space-between; }

	ul.modern-articles { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (max-width: 1100px) {
	/* Sidebar stops sitting beside the article */
	.single-content { max-width: 100%; float: none; border-right: 0; }
	.sidebar { width: 100%; max-width: 100%; float: none; margin: 24px 0 0; }
	.sidebar .widget { margin-left: auto; margin-right: auto; }
	.sidebar-wrapper { width: 100%; float: none; }
}

@media (max-width: 1000px) {
	ul.modern-articles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

	header div.wrap { padding-left: 16px; padding-right: 16px; }
	.wrap-middle,
	.wrap-fullwidth,
	.wrap-fullwidth-bg,
	.home-middle { padding-left: 12px; padding-right: 12px; }

	/* Small category rail is desktop furniture */
	#small-sidebar { display: none; }
}

@media (max-width: 780px) {
	ul.modern-articles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
	.game-container,
	.articles-content > div[style] { padding: 18px 12px !important; margin-bottom: 18px !important; }

	/* Trending ticker is a fixed-width marquee (ul.trend-slide is 370px) that
	   cannot shrink below a phone's width */
	.top-navigation .trending-articles { display: none; }
	.main-menu ul.top-social { display: none; }
	.top-navigation .toplist { float: none; }

	#single-share a span { display: none; }
}

@media (max-width: 560px) {
	ul.modern-articles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

	header div.wrap { padding-left: 12px; padding-right: 12px; }
	.wrap-middle,
	.wrap-fullwidth,
	.wrap-fullwidth-bg,
	.home-middle { padding-left: 10px; padding-right: 10px; }

	.game-container,
	.articles-content > div[style] { padding: 14px 10px !important; }

	/* Inline-styled headings are 30px, far too large on a phone */
	.game-container > h1,
	.articles-content h1 { font-size: 21px !important; line-height: 1.25 !important; }

	.entry-top h1.article-title,
	h1.page-title { font-size: 24px; line-height: 1.25; }
}

@media (max-width: 380px) {
	ul.modern-articles { gap: 8px !important; }
	.game-container > h1,
	.articles-content h1 { font-size: 19px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.rsg-mnav,
	.rsg-mnav-panel { transition-duration: .01ms !important; }
}