<?php
/**
 * Theme Name: Blix
 * Theme URI: https://blog.wpjam.com/
 * Description: 我爱水煮鱼的主题
 * Version: 1.0
 * Author: Denis
 * Author URI: https://blog.wpjam.com/
 */

/*
 * WordPress 主题样式表
 * 这是主题的主样式文件，按照 WordPress 官方标准格式
 */

/* CSS Variables */
:root {
	--main-color: #009193;
	--secondary-color: #6C8C37;
	--highlight-color: #FEC42D;
	--main-bg-color: #A3C159;
	--secondary-bg-color: #EDF3DE;
	--hover-bg-color: #1BA6B2;
	--border-color: #F5F6Fa;
}

/* Keyframes */
@keyframes rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes loading-bg {
	0% { background-position-x: 0; }
	100% { background-position-x: 100px; }
}

/* Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

/* Base Styles */
body {
	background: var(--border-color);
	font-family: Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, "Open Sans", "Helvetica Neue", sans-serif;
	color: #000000;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

/* Headings */
h1, h1 a, h2, h2 a {
	color: var(--main-color);
	margin-bottom: 20px;
}

h3, h3 a, h4, h4 a {
	color: var(--secondary-color);
	margin-bottom: 20px;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
	color: var(--hover-bg-color);
}

hr {
	margin-bottom: 20px;
	border: 0;
	border-bottom: 1px solid var(--border-color);
}

/* Content Headings */
#content h1 {
	font-size: 22px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#content h2 {
	font-size: 20px;
}

#content h3 {
	font-size: 18px;
}

#content h4 {
	font-size: 16px;
}

#content .entry-content h2,
#content .entry-content h3,
#content .entry-content h4 {
	margin-top: 10px;
	display: inline-block;
	padding: 0 4px;
	font-weight: bold;
}

#content .entry-content h2:after,
#content .entry-content h3:after,
#content .entry-content h4:after {
	content: " ";
	clear: both;
	display: block;
	opacity: 0.3;
	margin: -10px -4px 0 -4px;
}

#content .entry-content h2:after {
	border-bottom: 10px solid var(--main-color);
}

#content .entry-content h3:after {
	border-bottom: 10px solid var(--secondary-color);
}

#content .entry-content h4:after {
	border-bottom: 10px solid var(--highlight-color);
}

/* Links */
a {
	color: var(--main-color);
	text-decoration: none;
}

a:hover {
	color: var(--hover-bg-color);
}

/* Paragraphs */
p {
	margin-bottom: 20px;
}

/* Container */
#container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	background: #FFFFFF;
	border-top: 10px solid var(--main-bg-color);
}

/* Header */
header {
	height: 120px;
	position: relative;
	background-size: cover;
}

header #logo {
	padding: 20px 0 0 20px;
}

header #logo img {
	width: 240px;
}

/* Navigation */
#navigation {
	background: var(--main-bg-color);
	position: relative;
	min-height: 40px;
}

#navigation > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation > ul > li {
	display: inline-block;
	position: relative;
}

#navigation > ul > li > a {
	color: #FFFFFF;
	display: block;
	padding: 10px 15px;
	font-weight: bold;
}

#navigation > ul > li > a:hover {
	background: var(--hover-bg-color);
}

#navigation li ul {
	display: none;
	position: absolute;
	background: #FFFFFF;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	z-index: 100;
	min-width: 200px;
}

#navigation li:hover ul {
	display: block;
}

#navigation li ul li a {
	color: #333;
	display: block;
	padding: 8px 15px;
}

#navigation li ul li a:hover {
	background: var(--secondary-bg-color);
}

/* Search Form */
#navigation form {
	position: absolute;
	top: 5px;
	right: 10px;
	background: #FFFFFF;
	border-radius: 4px;
	padding: 5px;
}

#navigation form input#s {
	border: none;
	background: none;
	width: 200px;
	outline: none;
}

#navigation #searchbutton {
	background: none;
	border: none;
	color: var(--main-color);
	cursor: pointer;
}

/* Content Area */
#content {
	width: 600px;
	float: left;
	padding: 30px 20px 0 20px;
}

/* Entries */
.entry {
	margin-bottom: 30px;
}

.entry-card {
	display: flex;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
}

.entry-thumb {
	margin-right: 15px;
	flex-shrink: 0;
}

.entry-thumb .wp-post-image {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 4px;
}

.entry-body {
	flex: 1;
}

.entry-title {
	font-size: 18px;
	margin-bottom: 10px;
}

.entry-title a {
	color: var(--main-color);
}

.entry-content {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.entry-meta {
	font-size: 12px;
	color: #999;
	margin-top: 10px;
}

.entry-meta a {
	color: #999;
}

/* Sidebar */
.sidebar {
	width: 300px;
	float: right;
	padding: 30px 20px 0 0;
}

/* Widgets */
.widget {
	background: #ffffff;
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget-title {
	font-size: 16px;
	font-weight: bold;
	color: var(--main-color);
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--main-bg-color);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	padding: 8px 0;
	border-bottom: 1px solid var(--border-color);
}

.widget ul li:last-child {
	border-bottom: none;
}

.widget ul li a {
	color: #333;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	display: block;
}

.widget ul li a:hover {
	color: var(--main-color);
}

/* Random Posts Widget */
.blix-random-posts .post-date {
	display: block;
	font-size: 12px;
	color: #999;
	margin-top: 4px;
}

/* Popular Posts Widget */
.blix-popular-posts .view-count {
	display: block;
	font-size: 12px;
	color: var(--secondary-color);
	margin-top: 4px;
}

.blix-popular-posts .view-count i {
	margin-right: 4px;
}

/* Ad Widget */
.blix-ad-widget {
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.blix-ad-widget .widget-title {
	display: none;
}

.blix-ad-widget .ad-content {
	background: #ffffff;
	padding: 15px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.blix-ad-widget .ad-placeholder {
	background: #f5f5f5;
	border: 2px dashed #ddd;
	padding: 30px 15px;
	text-align: center;
	border-radius: 4px;
}

.blix-ad-widget .ad-placeholder p {
	color: #999;
	font-size: 14px;
	margin-bottom: 5px;
}

.blix-ad-widget .ad-placeholder small {
	color: #bbb;
	font-size: 12px;
}

/* Hide empty ad placeholders */
.blix-ad-widget.ad-position-1 .ad-placeholder,
.blix-ad-widget.ad-position-2 .ad-placeholder {
	display: none;
}

/* Footer */
footer {
	clear: both;
	background: var(--secondary-bg-color);
	padding: 20px;
	text-align: center;
	font-size: 14px;
}

footer a {
	color: var(--main-color);
}

/* Full Width Template */
body.full-width #container {
	background: #FFFFFF;
}

body.full-width #content {
	width: 100%;
	padding: 30px 10px 0 10px;
}

body.full-width .sidebar {
	display: none;
}

body.full-width footer:before {
	background: none;
}

/* Responsive - Tablet & Mobile */
@media only screen and (max-width: 767px),
	only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

	.mobile-hide,
	.sidebar,
	.entry-card .entry-content,
	.entry-meta .author,
	#wpjam_blog_728x90,
	#navigation li ul,
	#entrynavigation,
	#copyright {
		display: none;
	}

	#container {
		background: #FFFFFF;
		border-top: 10px solid var(--border-color);
	}

	#container,
	footer {
		padding: 0 10px;
		width: 100%;
	}

	#container header {
		height: 90px;
	}

	#container header #logo img {
		width: 120px;
		height: auto;
	}

	#navigation > ul {
		display: flex;
		overflow-x: auto;
	}

	#navigation form {
		position: absolute;
		top: 20px;
		right: 20px;
		width: initial;
		background: none;
		border: none;
	}

	#navigation form input#s {
		width: 160px;
	}

	#navigation #searchbutton {
		height: 30px;
	}

	#content {
		width: 100%;
		padding: 20px 0 0 0;
	}

	#content .entry-card {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	#content .entry-card h2 {
		margin-bottom: 0;
	}

	#content .entry-thumb .wp-post-image {
		width: 75px;
		height: 75px;
	}

	#content .entry-thumb {
		margin-right: 10px;
	}

	.widget {
		padding: 10px;
		margin-bottom: 10px;
	}

	.widget-title {
		font-size: 14px;
		margin-bottom: 10px;
		padding-bottom: 8px;
	}

	.widget ul li a {
		font-size: 13px;
	}
}

/* WordPress Required Styles */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-right: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 0.875em;
	color: #666;
	text-align: center;
	margin-top: 0.5em;
}

.gallery-caption {
	font-size: 0.875em;
	color: #666;
}

.bypostauthor {
	font-weight: bold;
}

.sticky {
	position: relative;
}

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

/* Print Styles */
@media print {
	#navigation,
	.sidebar,
	footer,
	#comments {
		display: none;
	}

	#content {
		width: 100%;
		float: none;
	}
}