/*
Theme Name: Game APK Store
Theme URI: https://example.com/game-apk-store
Author: Your Name
Author URI: https://example.com
Description: A clean, lightweight WordPress theme built for publishing and distributing game APKs. Every game is a standard WordPress post enriched with custom fields (rating, version, file size, external download link). Homepage shows a paginated grid of game cards (6 per row, 12 per page); single posts show a details/icon panel above the content, and downloads route through a dedicated landing page with a short delay before the real file link.
Version: 1.3.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: game-apk-store
*/

/* -----------------------------------------------------------
   0. RESET / BASE
----------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--gas-primary: #2d6cdf;
	--gas-primary-dark: #1f4fb0;
	--gas-accent: #17c964;
	--gas-star: #ffb400;
	--gas-bg: #f4f6f9;
	--gas-card-bg: #ffffff;
	--gas-text: #1c2230;
	--gas-text-light: #6b7280;
	--gas-border: #e5e8ee;
	--gas-radius: 14px;
	--gas-shadow: 0 2px 10px rgba(20, 25, 40, 0.06);
	--gas-shadow-hover: 0 8px 24px rgba(20, 25, 40, 0.12);
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--gas-bg);
	color: var(--gas-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--gas-primary);
	text-decoration: none;
}

a:hover {
	color: var(--gas-primary-dark);
}

.gas-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -----------------------------------------------------------
   1. HEADER
----------------------------------------------------------- */
.gas-site-header {
	background: #fff;
	border-bottom: 1px solid var(--gas-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.gas-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.gas-site-branding {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gas-site-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gas-site-title a {
	color: var(--gas-text);
}

.gas-site-description {
	margin: 0;
	font-size: 13px;
	color: var(--gas-text-light);
}

.gas-main-nav ul {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.gas-main-nav a {
	color: var(--gas-text);
	font-weight: 600;
	font-size: 14px;
}

.gas-main-nav a:hover {
	color: var(--gas-primary);
}

/* Hamburger button - hidden on desktop, shown on mobile below */
.gas-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--gas-border);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

.gas-nav-toggle .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

@media (max-width: 780px) {
	.gas-nav-toggle {
		display: inline-flex;
	}

	/* Menu is collapsed by default on mobile, opened by nav.js */
	.gas-main-nav {
		display: none;
		width: 100%;
		order: 3;
	}

	.gas-main-nav.is-open {
		display: block;
	}

	.gas-main-nav ul {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--gas-border);
		margin-top: 12px;
	}

	.gas-main-nav ul li {
		border-bottom: 1px solid var(--gas-border);
	}

	.gas-main-nav ul li a {
		display: block;
		padding: 12px 4px;
	}
}

/* -----------------------------------------------------------
   2. PAGE HEADING / INTRO
----------------------------------------------------------- */
.gas-page-heading {
	padding: 32px 0 8px;
}

.gas-page-heading h1 {
	font-size: 26px;
	margin: 0 0 4px;
}

.gas-page-heading p {
	color: var(--gas-text-light);
	margin: 0;
}

/* -----------------------------------------------------------
   3. GAME GRID (HOMEPAGE / ARCHIVES) - 6 per row, 12 per page
----------------------------------------------------------- */
.gas-game-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	margin: 20px 0 40px;
}

@media (max-width: 1100px) {
	.gas-game-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 780px) {
	.gas-game-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.gas-game-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.gas-game-card {
	background: var(--gas-card-bg);
	border: 1px solid var(--gas-border);
	border-radius: var(--gas-radius);
	overflow: hidden;
	box-shadow: var(--gas-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: flex;
	flex-direction: column;
}

.gas-game-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--gas-shadow-hover);
}

/* Media area: thumbnail + the download icon pinned to a corner */
.gas-game-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #eef1f6;
	overflow: hidden;
}

.gas-game-card-thumb-link {
	display: block;
	height: 100%;
}

.gas-game-card-logo {
	height: 100%;
}

.gas-game-card-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gas-game-card-logo .gas-no-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 30px;
	color: var(--gas-text-light);
}

/* Icon-only download link, top-right corner of the thumbnail */
.gas-card-download-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	color: var(--gas-accent);
	z-index: 2;
}

.gas-card-download-icon:hover {
	background: var(--gas-accent);
	color: #fff;
}

.gas-card-download-icon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.gas-game-card-body {
	padding: 10px 12px 12px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gas-game-card-title-link {
	color: inherit;
}

.gas-game-card-title-link:hover .gas-game-card-title {
	color: var(--gas-primary);
}

/* Game name only, kept to a single line so cards stay a consistent height */
.gas-game-card-title {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
	color: var(--gas-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Star rating row on the card (stars + numeric score) */
.gas-card-rating-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gas-card-stars {
	color: var(--gas-star);
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
}

.gas-card-rating-number {
	font-size: 12px;
	font-weight: 700;
	color: var(--gas-text);
}

/* Version + file size row on the card */
.gas-card-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--gas-text-light);
}

.gas-card-version,
.gas-card-size {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gas-card-version .dashicons,
.gas-card-size .dashicons {
	flex-shrink: 0;
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--gas-primary);
}

/* "Get Now" CTA - always links to the game's own post, never the raw APK */
.gas-card-get-now-btn {
	display: block;
	text-align: center;
	margin-top: auto;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--gas-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	transition: background 0.15s ease, transform 0.1s ease;
}

.gas-card-get-now-btn:hover {
	background: var(--gas-accent);
	color: #fff;
	transform: translateY(-1px);
}

/* -----------------------------------------------------------
   4. PAGINATION
----------------------------------------------------------- */
.gas-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 20px 0 50px;
}

.gas-pagination a,
.gas-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--gas-border);
	color: var(--gas-text);
	font-weight: 600;
	font-size: 14px;
}

.gas-pagination a:hover {
	border-color: var(--gas-primary);
	color: var(--gas-primary);
}

.gas-pagination .current {
	background: var(--gas-primary);
	border-color: var(--gas-primary);
	color: #fff;
}

/* -----------------------------------------------------------
   5. SINGLE GAME PAGE - details panel above content
----------------------------------------------------------- */
.gas-game-header {
	background: var(--gas-card-bg);
	border: 1px solid var(--gas-border);
	border-radius: var(--gas-radius);
	box-shadow: var(--gas-shadow);
	padding: 24px;
	margin: 28px 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Icon + title row. Kept as its own nowrap flex row so the icon and the
   game name always stay side by side at the top of the panel, on every
   screen size - the title never gets pushed onto a line below the icon. */
.gas-game-header-top {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: nowrap;
}

.gas-game-logo {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 22px;
	overflow: hidden;
	background: #eef1f6;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.gas-game-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gas-game-logo .gas-no-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 38px;
	color: var(--gas-text-light);
}

.gas-game-header-info {
	min-width: 0;
}

.gas-game-title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	min-width: 0;
	word-break: break-word;
}

.gas-game-rating-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.gas-stars {
	color: var(--gas-star);
	font-size: 16px;
	letter-spacing: 1px;
}

.gas-rating-number {
	font-weight: 700;
	color: var(--gas-text);
	font-size: 14px;
}

.gas-game-feature-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.gas-feature-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--gas-bg);
	border: 1px solid var(--gas-border);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--gas-text);
}

.gas-feature-badge .dashicons {
	color: var(--gas-primary);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.gas-feature-badge strong {
	font-weight: 700;
}

.gas-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gas-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 26px;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(23, 201, 100, 0.35);
	transition: background 0.15s ease, transform 0.1s ease;
}

.gas-download-btn:hover {
	background: #12a854;
	color: #fff;
	transform: translateY(-1px);
}

.gas-download-note {
	margin-top: 8px;
	font-size: 12px;
	color: var(--gas-text-light);
}
.gas-download-wait {
	display: inline-block;
}

.gas-download-wait .dashicons-clock {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

@media (max-width: 560px) {
	.gas-game-header {
		padding: 16px;
		gap: 14px;
	}

	.gas-game-header-top {
		gap: 12px;
	}

	.gas-game-logo {
		width: 64px;
		height: 64px;
		border-radius: 16px;
	}

	.gas-game-logo .gas-no-logo {
		font-size: 26px;
	}

	.gas-game-title {
		font-size: 19px;
		line-height: 1.25;
	}
}

/* -----------------------------------------------------------
   6. POST CONTENT AREA
----------------------------------------------------------- */
.gas-content-wrap {
	max-width: 1200px;
	margin: 0 auto;

}

.gas-single-content {
	background: var(--gas-card-bg);
	border: 1px solid var(--gas-border);
	border-radius: var(--gas-radius);
	box-shadow: var(--gas-shadow);
}

.gas-single-content h2 {
	font-size: 20px;
	margin-top: 0;
}

.gas-single-content img {
	border-radius: 10px;
}

/* -----------------------------------------------------------
   6b. RELATED GAMES (single game page)
----------------------------------------------------------- */
.gas-related-games {
	margin-top: 30px;
}

.gas-related-games h2 {
	font-size: 19px;
	margin-bottom: 14px;
}

.gas-related-games-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.gas-related-games-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.gas-related-games-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* -----------------------------------------------------------
   6c. COMMENTS (single game page)
----------------------------------------------------------- */
.gas-comments-section {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--gas-border);
}

.gas-comments-title {
	font-size: 19px;
	margin-bottom: 16px;
}

.gas-comment-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.gas-comment-list .comment-body {
	background: var(--gas-bg);
	border: 1px solid var(--gas-border);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 14px;
}

.gas-comment-list ol.children {
	list-style: none;
	margin: 0 0 0 24px;
	padding: 0;
}

.gas-comments #respond {
	margin-top: 20px;
}

.gas-comments #respond .comment-form-comment textarea,
.gas-comments #respond input[type="text"],
.gas-comments #respond input[type="email"],
.gas-comments #respond input[type="url"] {
	width: 100%;
	max-width: 480px;
	padding: 10px 12px;
	border: 1px solid var(--gas-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	margin-top: 4px;
}

.gas-comments #respond label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
}
.gas-comments{
	padding: 20px !important;;
}
.gas-comments #respond p {
	margin: 0 0 14px;
}

.gas-comments #respond .gas-download-btn {
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* -----------------------------------------------------------
   6d. DOWNLOAD LANDING PAGE (download.php)
----------------------------------------------------------- */
gas-download-page {
	max-width: 560px;
	margin: 36px auto 60px;
}

.gas-back-to-game {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gas-text-light);
	margin-bottom: 16px;
}

.gas-back-to-game:hover {
	color: var(--gas-primary);
}

.gas-back-to-game .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.gas-download-page-card {
	background: var(--gas-card-bg);
	border: 1px solid var(--gas-border);
	border-radius: var(--gas-radius);
	box-shadow: var(--gas-shadow);
	padding: 32px 24px;
	text-align: center;
}

.gas-download-page-logo {
	width: 96px;
	height: 96px;
	margin: 0 auto 16px;
	border-radius: 22px;
}

.gas-download-page-title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 800;
}

.gas-download-page-rating {
	justify-content: center;
	margin-bottom: 12px;
}

.gas-download-page-badges {
	justify-content: center;
	margin-bottom: 22px;
}

.gas-download-box {
	border-top: 1px solid var(--gas-border);
	padding-top: 22px;
}

.gas-download-box .gas-download-wait {
	display: block;
	width: 100%;
}

.gas-download-box .gas-download-btn-wait,
.gas-download-box .gas-download-final-btn {
	display: flex;
	width: 100%;
	justify-content: center;
}

.gas-download-btn-wait {
	opacity: 0.75;
	cursor: default;
}

.is-hidden {
	display: none !important;
}

.gas-download-countdown {
	font-variant-numeric: tabular-nums;
}

.gas-download-box .gas-download-note {
	text-align: center;
}

.gas-download-btn {
    position: relative;
}

.download-loader {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: download-spin 0.8s linear infinite;
}

@keyframes download-spin {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------------------------
   7. FOOTER
----------------------------------------------------------- */
.gas-site-footer {
	background: #fff;
	border-top: 1px solid var(--gas-border);
	padding: 26px 0;
	margin-top: 30px;
	text-align: center;
	color: var(--gas-text-light);
	font-size: 13px;
}

/* -----------------------------------------------------------
   8. MISC / NO RESULTS
----------------------------------------------------------- */
.gas-no-games {
	padding: 60px 0;
	text-align: center;
	color: var(--gas-text-light);
}