/*
Theme Name: Switch Keys Hub
Theme URI: https://prodkeys.io/
Author: Abhin
Description: A custom, lightweight WordPress theme for Nintendo Switch emulator keys and firmware. Built with Tailwind CSS and SEO-friendly structure.
Version: 1.0.0
Text Domain: switch-keys-hub
*/

/* Theme styles */

body {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0.01em;
	scroll-behavior: smooth;
}

.bg-gradient-hero {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.bg-gradient-hero h1 {
	color: #ffffff;
}

.bg-gradient-hero p {
	color: #cbd5e1;
}

.wp-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2.5rem);
	padding-right: clamp(1rem, 4vw, 2.5rem);
}

#page.site {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

header,
main,
footer {
	width: 100%;
}

.hidden {
	display: none !important;
}

#site-navigation {
	display: flex;
}

#skh-mobile-menu-toggle {
	display: inline-flex;
}

#skh-mobile-menu {
	display: none;
}

#skh-mobile-menu:not(.hidden) {
	display: block;
}

@media (max-width: 767px) {
	#site-navigation {
		display: none;
	}
	#skh-mobile-menu-toggle {
		display: inline-flex;
	}
}

@media (min-width: 768px) {
	#skh-mobile-menu-toggle {
		display: none;
	}
	#skh-mobile-menu {
		display: none !important;
	}
}

.site-header {
	background: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header .wp-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-footer {
	background: #0f172a;
	color: #ffffff;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

.entry-content,
.post-content {
	line-height: 1.7;
	font-size: 16px;
}

.entry-content > .wp-block,
.post-content > .wp-block {
	margin-bottom: 16px;
}

.entry-content > .wp-block:last-child,
.post-content > .wp-block:last-child {
	margin-bottom: 0;
}

.entry-content > * + *,
.post-content > * + * {
	margin-top: 16px;
}

.entry-content > :first-child,
.post-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.post-content p {
	margin: 0 0 16px;
	line-height: 1.7;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
	margin-top: 32px;
	margin-bottom: 12px;
	font-weight: 700;
}

.entry-content p + h2,
.entry-content p + h3,
.entry-content p + h4,
.entry-content p + h5,
.entry-content p + h6,
.entry-content ul + h2,
.entry-content ul + h3,
.entry-content ul + h4,
.entry-content ul + h5,
.entry-content ul + h6,
.entry-content ol + h2,
.entry-content ol + h3,
.entry-content ol + h4,
.entry-content ol + h5,
.entry-content ol + h6,
.entry-content blockquote + h2,
.entry-content blockquote + h3,
.entry-content blockquote + h4,
.entry-content blockquote + h5,
.entry-content blockquote + h6,
.entry-content pre + h2,
.entry-content pre + h3,
.entry-content pre + h4,
.entry-content pre + h5,
.entry-content pre + h6,
.entry-content figure + h2,
.entry-content figure + h3,
.entry-content figure + h4,
.entry-content figure + h5,
.entry-content figure + h6,
.entry-content table + h2,
.entry-content table + h3,
.entry-content table + h4,
.entry-content table + h5,
.entry-content table + h6,
.post-content p + h2,
.post-content p + h3,
.post-content p + h4,
.post-content p + h5,
.post-content p + h6,
.post-content ul + h2,
.post-content ul + h3,
.post-content ul + h4,
.post-content ul + h5,
.post-content ul + h6,
.post-content ol + h2,
.post-content ol + h3,
.post-content ol + h4,
.post-content ol + h5,
.post-content ol + h6,
.post-content blockquote + h2,
.post-content blockquote + h3,
.post-content blockquote + h4,
.post-content blockquote + h5,
.post-content blockquote + h6,
.post-content pre + h2,
.post-content pre + h3,
.post-content pre + h4,
.post-content pre + h5,
.post-content pre + h6,
.post-content figure + h2,
.post-content figure + h3,
.post-content figure + h4,
.post-content figure + h5,
.post-content figure + h6,
.post-content table + h2,
.post-content table + h3,
.post-content table + h4,
.post-content table + h5,
.post-content table + h6 {
	margin-top: 40px;
}

.entry-content h1,
.post-content h1 {
	font-size: 2em;
	line-height: 1.2;
}

.entry-content h2,
.post-content h2 {
	font-size: 1.6em;
	line-height: 1.25;
}

.entry-content h3,
.post-content h3 {
	font-size: 1.25em;
	line-height: 1.3;
}

.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.entry-content li,
.post-content li {
	margin: 0 0 6px;
}

.entry-content a,
.post-content a {
	color: #0073aa;
	text-decoration: underline;
}

.entry-content a:hover,
.post-content a:hover {
	text-decoration: underline;
}

.entry-toc {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	border-radius: 12px;
}

.entry-toc__summary {
	font-weight: 800;
	margin: 0;
	color: #0f172a;
	cursor: pointer;
}

.entry-toc__summary::-webkit-details-marker {
	display: none;
}

.entry-toc__body {
	margin-top: 12px;
}

.entry-toc:not([open]) .entry-toc__body {
	margin-top: 0;
}

.entry-toc__list,
.entry-toc__sublist {
	margin: 0;
	padding-left: 20px;
}

.entry-toc__sublist {
	margin-top: 8px;
}

.entry-toc a {
	color: #0f172a;
	text-decoration: underline;
}

.entry-quick-answer {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid #e2e8f0;
	background: #eef2ff;
	border-radius: 12px;
}

.entry-quick-answer__title {
	font-weight: 800;
	margin: 0 0 10px;
	color: #0f172a;
}

.entry-quick-answer__content p:last-child {
	margin-bottom: 0;
}

.entry-content img,
.entry-content video,
.entry-content iframe,
.post-content img,
.post-content video,
.post-content iframe {
	max-width: 100%;
	height: auto;
}

.entry-content blockquote,
.post-content blockquote {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid #e2e8f0;
	background: #f8fafc;
}

.entry-content figure,
.post-content figure {
	margin: 0 0 16px;
}

.entry-content table,
.post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.entry-content table th,
.entry-content table td,
.post-content table th,
.post-content table td {
	border: 1px solid #e2e8f0;
	padding: 10px 12px;
}

.entry-content pre,
.post-content pre {
	margin: 0 0 16px;
	padding: 12px 16px;
	overflow: auto;
	background: #0f172a;
	color: #e2e8f0;
	border-radius: 12px;
}