/*
Theme Name: SwitchRomz Pro
Theme URI: https://switch-romz.com
Author: SwitchRomz Team
Author URI: https://switch-romz.com
Description: Ultra-fast, minimalist, SEO-optimized Nintendo Switch ROMs theme with dark mode, a custom ROM post type, categories, and a 7-column "Load More" archive grid.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: switchromz
*/

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
	background-color: #0a0b0f;
	color: #ffffff;
	line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ===== Header ===== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(12, 13, 18, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #262933;
}

.header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.site-brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
	width: 32px; height: 32px; border-radius: 8px;
	background: #e50914; display: flex; align-items: center; justify-content: center;
	font-weight: 800; color: #fff;
}
.brand-name { font-size: 20px; font-weight: 800; }
.brand-name .accent { color: #ef4444; }

.header-search {
	flex: 1; max-width: 420px; display: none;
}
@media (min-width: 768px) { .header-search { display: block; } }
.header-search input {
	width: 100%; background: #161922; border: 1px solid #2e313c; border-radius: 9999px;
	padding: 8px 16px; font-size: 14px; color: #fff;
}
.header-search input:focus { outline: none; border-color: #e50914; }

.header-nav { display: flex; align-items: center; gap: 18px; }
.header-nav a { font-size: 14px; font-weight: 600; color: #d4d4d8; }
.header-nav a:hover { color: #ef4444; }
.header-cta {
	background: #e50914; color: #fff !important; font-weight: 700; padding: 8px 18px;
	border-radius: 10px; font-size: 14px;
}
.header-cta:hover { background: #c40810; }

/* ===== Hero ===== */
.hero {
	padding: 56px 0; border-bottom: 1px solid #1c1e26;
	background: radial-gradient(ellipse at top, rgba(229, 9, 20, 0.08), transparent 60%);
}
.hero-badge {
	display: inline-block; padding: 4px 14px; border-radius: 9999px; font-size: 12px; font-weight: 700;
	background: #2a0a0d; color: #f87171; border: 1px solid #7f1d1d; margin-bottom: 14px;
}
.hero h1 { font-size: 42px; font-weight: 900; margin: 0 0 12px 0; letter-spacing: -0.02em; }
.hero h1 .accent { color: #ef4444; display: block; }
.hero p { color: #a1a1aa; max-width: 620px; font-size: 16px; margin: 0 0 24px 0; }
.hero-btn {
	display: inline-block; background: #e50914; color: #fff; font-weight: 700;
	padding: 13px 26px; border-radius: 12px; font-size: 15px;
}
.hero-btn:hover { background: #c40810; }

/* ===== Section header ===== */
.section-heading-row {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 16px; border-bottom: 1px solid #1c1e26; margin-bottom: 24px;
}
.section-heading-row h2 { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin: 0; }
.section-heading-row h2 .bar { width: 6px; height: 22px; background: #e50914; border-radius: 4px; display: inline-block; }
.section-heading-row .see-all { font-size: 13px; font-weight: 700; color: #ef4444; }
.section-heading-row .see-all:hover { color: #f87171; }

/* ===== ROM Grid (7 columns) ===== */
.rom-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 480px)  { .rom-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .rom-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .rom-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1100px) { .rom-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1280px) { .rom-grid { grid-template-columns: repeat(7, 1fr); } }

.rom-card {
	background: #12141d; border: 1px solid #21232d; border-radius: 12px; overflow: hidden;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.rom-card:hover { transform: translateY(-3px); border-color: #e50914; }
.rom-card-thumb { aspect-ratio: 3/4; background: #1a1c25; overflow: hidden; }
.rom-card-img { width: 100%; height: 100%; object-fit: cover; }
.rom-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: 0.5; }
.rom-card-info { padding: 10px; }
.rom-card-title {
	font-size: 12px; font-weight: 700; margin: 0 0 6px 0; color: #fff;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.6em;
}
.rom-card-meta {
	display: flex; justify-content: space-between; font-size: 10px; font-weight: 700;
	color: #9ca3af; text-transform: uppercase; border-top: 1px solid #21232d; padding-top: 8px;
}

/* ===== Load More ===== */
.load-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.load-more-btn {
	background: #161922; border: 1px solid #2e313c; color: #fff; font-weight: 700; font-size: 14px;
	padding: 12px 32px; border-radius: 10px; cursor: pointer; transition: all 0.15s ease;
}
.load-more-btn:hover { border-color: #e50914; background: #1a1c25; }
.load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Sections & layout ===== */
.section { padding: 48px 0; }
.no-roms-found {
	text-align: center; padding: 60px 20px; border: 1px dashed #2e313c; border-radius: 12px; color: #9ca3af;
}

/* ===== Archive page (All ROMs) ===== */
.archive-header { text-align: center; padding: 40px 0 24px 0; }
.archive-header h1 { font-size: 30px; font-weight: 900; margin: 0 0 8px 0; }
.archive-header p { color: #a1a1aa; margin: 0; }

.archive-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) { .archive-layout { flex-direction: row; align-items: flex-start; } }

.archive-sidebar { width: 100%; }
@media (min-width: 1024px) { .archive-sidebar { width: 220px; flex-shrink: 0; } }
.sidebar-box { background: #12141d; border: 1px solid #21232d; border-radius: 12px; padding: 16px; }
.sidebar-box h3 { font-size: 13px; text-transform: uppercase; color: #9ca3af; margin: 0 0 10px 0; }
.sidebar-cat-link {
	display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #d4d4d8;
}
.sidebar-cat-link:hover, .sidebar-cat-link.active { background: #1e2028; color: #ef4444; }
.sidebar-cat-link .count { color: #6b7280; font-weight: 400; }

.archive-main { flex: 1; }

/* ===== Single ROM page ===== */
.single-rom-hero { display: flex; flex-direction: column; gap: 24px; padding: 32px 0; }
@media (min-width: 768px) { .single-rom-hero { flex-direction: row; } }
.single-rom-thumb { width: 100%; max-width: 320px; border-radius: 14px; overflow: hidden; border: 1px solid #21232d; }
.single-rom-details h1 { font-size: 28px; font-weight: 900; margin: 0 0 14px 0; }
.rom-details-table { border-collapse: collapse; margin-bottom: 20px; }
.rom-details-table td { padding: 6px 14px 6px 0; font-size: 14px; color: #d4d4d8; border-bottom: 1px solid #1c1e26; }
.rom-details-table td:first-child { color: #9ca3af; font-weight: 600; }
.download-btn {
	display: inline-block; background: #e50914; color: #fff; font-weight: 800; font-size: 15px;
	padding: 14px 32px; border-radius: 12px;
}
.download-btn:hover { background: #c40810; }
.single-rom-content { padding: 20px 0 40px 0; border-top: 1px solid #1c1e26; margin-top: 24px; color: #d4d4d8; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid #1c1e26; padding: 32px 0; margin-top: 40px; color: #6b7280; font-size: 13px; text-align: center; }
.site-footer a { color: #9ca3af; }
.site-footer a:hover { color: #ef4444; }