/*
Theme Name:Blix
Theme URI:https://blog.wpjam.com/
Description:我爱水煮鱼的主题
Version:2.0
Author:Denis
Author URI:https://blog.wpjam.com/
*/
: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 rotation{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}

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

	100%{background-position-x:100px;}
}

body,h1,h2,h3,h4,h5,h6,ul,ol,li,pre,form,input,textarea{
	margin:0;
	padding:0;
}

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;
}

h1, h2, h3, h4{
	margin:0 0 20px 0;
	color:var(--main-color);

	&:is(h3), &:is(h4){color:var(--secondary-color);}

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

h1{
	font-size:22px;
	margin-top:10px;
	margin-bottom:20px;
}

h2{font-size:20px;}
h3{font-size:18px;}
h4{font-size:16px;}

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

a{
	text-decoration:none;
	color:var(--secondary-color);
	outline:none;

	&:hover{color:var(--main-color);}

	img{border:none;}
}

p{
	margin:0 0 20px 0;

	pre &{margin:0;}
}

.clearfix{clear:both;}
.green{color:green;}
.red{color:red;}
.yellow{color:yellow;}
.blue{color:blue;}

#container{
	background:#FFFFFF url(./i/container_bg.gif) 680px 0 repeat-y;
	width:1000px;
	padding:0 20px;
	margin:0 auto;
	border-top:20px #FFFFFF solid;
	text-align:left;

	body.full-width &{background:#FFFFFF;}
}

.layout-wrap{
	display:flex;
	justify-content:space-between;
}

header{
	display:block;
	height:120px;
	padding:15px;
	background:url(./i/header_bg.jpg);

	#logo img{width:160px;}

	#wpjam_blog_728x90{float:right;}
}

nav#navigation{
	display:flex;
	justify-content:space-between;
	line-height:2.5;
	background:var(--main-bg-color);
	border-bottom-right-radius:6px;

	ul{
		display:flex;

		li{
			list-style:none;
			border-right:1px solid var(--border-color);
			white-space:nowrap;
			background:var(--main-bg-color);
			zoom:1;
			z-index:999;

			&.current-menu-item,
			&.current-menu-parent,
			&:hover{
				background:var(--hover-bg-color);
				position:relative;
			}

			&:hover > ul{
				visibility:visible;
			}

			a{
				display:block;
				padding:0 10px;
				color:#FFFFFF;
			}
		
			ul{
				visibility:hidden;
				position:absolute;
				flex-direction:column;

				li{
					border-top:1px solid var(--border-color);
				
					ul{
						left:100%; top:0;

						li{
							border-top:0;
							border-bottom:1px solid var(--border-color);
							border-left:1px solid var(--border-color);
						}
					}
				}
			}
		}
	}

	form{
		display:flex;
		justify-content:center;
		align-items:center;
		width:300px;
		border-left:1px solid var(--border-color);
		background:var(--highlight-color);
		border-bottom-right-radius:5px;
	
		input{
			padding:0 5px;
			width:240px;
			height:28px;
			border:none;

			&:focus{outline:none;}
		}

		button{
			appearance:none;
			border:none;
			width:28px;
			height:28px;
			color:#FFFFFF;
			background:var(--main-bg-color);
			border-bottom-right-radius:5px;
		}
	}
}

#content{
	width:640px;
	padding:30px 0 0 0px;

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

	ul.breadcrumb{
		color:var(--secondary-color);
		border-bottom:1px solid var(--border-color);
	}
}

.entry{
	margin-bottom:20px;
	border-bottom:1px solid var(--border-color);

	figure,
	iframe{
		margin:0;
		margin-bottom:20px;

		&.wp-block-image{
			padding:6px;

			img{
				box-shadow:0 0 6px 0 #999;
			}
		}
	}

	img{
		max-width:100%;
		background:#FFFFFF;
	}

	span.more{
		border:none;
		margin-right:0;
		padding:0;
		float:right;
	}

	span.moretext{
		padding-right:23px;
	}

	div.more{
		float:right;
		width:400px;
	}

	blockquote,
	section.blockquote{
		border-left:4px solid var(--secondary-color);
		background:var(--secondary-bg-color);
		margin:20px 0;
		padding:8px;
		color:rgba(0,0,0,0.7);
		border-radius:6px;
		font-size:14px;

		p{margin:10px;}

		&section.blockquote{padding:18px;}
	}

	.entry-content{
		&:has(section.section){
			&, section.section{
				counter-reset:subtitle;
			
				h2, h3, h4{
					&:not(.toc-noindex):before{
						counter-increment:subtitle;
						content:counters(subtitle, ".") ". ";
					}
				}
			}
		}

		h2, h3, h4{
			margin-top:30px;
			padding:0 4px;
			font-weight:bold;
			width:fit-content;

			&:after{
				content:" ";
				clear:both;
				display:block;
				opacity:0.3;
				margin:-10px -4px 0 -4px;
				border-bottom:10px solid var(--main-color);
			}

			&:is(h3, h4):after{
				border-bottom:10px solid var(--secondary-color);
			}

			&:has(section){
				margin-bottom:14px;

				section{
					display:block;
					opacity:0.3;
					max-width:initial !important;
					margin:-10px -4px 0 -4px;
					height:10px;
					line-height:0;
					background:var(--main-color);

					h3 &,
					h4 &{
						background:var(--secondary-color);
					}
				}
			}
		}

		p code{
			background:#efefef;
			padding:2px;
			border-radius:4px;
		}

		pre{
			font-size:13px;
			margin-top:0;
			margin-bottom:20px;
		}

		ol, ul{
			margin-bottom:20px;
			margin-left:24px;

			li{
				margin-bottom:6px;

				.entry-list &{margin-bottom:20px;}
			}
		}
	}

	.entry-thumb{
		img{
			border:1px solid var(--border-color);
			display:block;
			width:100px;
			height:100px;
			max-width:initial;
		}
	}

	.entry-img{
		display:table;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}

	.entry-meta{
		display:flex;
		background:var(--secondary-bg-color);
		padding:8px 6px;
		margin-bottom:20px;
		font-size:14px;
		line-height:1;

		span{
			border-right:1px solid #414141;
			padding-right:9px;
			margin-right:10px;

			&:last-child{border-right:none;}
		}
	}

	&.entry-card{
		display:flex;
		align-items:center;
		padding-bottom:20px;
		gap:20px;

		h2{
			font-size:18px;
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-line-clamp:2;
			-webkit-box-orient:vertical;
		}

		.entry-content{
			margin:-10px 0 0 0;

			p{
				margin-bottom:0;	
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-line-clamp:3;
				-webkit-box-orient:vertical;
			}
		}
	}
}

details#toc, .widget_toc{
	&#toc{
		padding:9px;
		margin-bottom:20px;
		border:1px solid var(--border-color);
		border-radius:6px;

		> ul, > ol{margin:0;}
	
		summary{
			margin-bottom:4px;
			border-bottom:1px solid var(--border-color);
			padding-bottom:4px;
			font-weight:600;
			cursor:pointer;
		}
	}

	ul, ol{
		margin:0 0 0 10px;
		list-style:none;

		li{margin:2px 0;}

		&:has(ol), &:has(ul){
			> li:not(:last-child){margin-bottom:6px;}
		}

		&:is(ol){
			counter-reset:toc;

			li a:before{
				counter-increment:toc;
				content:counters(toc, ".") ". ";
			}
		}
	}
}

.wp-block-table{
	width:100%;
	position:relative;
	overflow:scroll;
}

.wp-block-table table, table{
	margin-bottom:10px;
	border:0;
	width:100%;

	th{
		&, a{
			color:#FFFFFF;
			font-size:15px;
		}
	}

	td{font-size:14px;}

	tr > th,
	tr > td{
		vertical-align:middle;
		border-right:1px solid var(--border-color);
		border-left:0;
		border-top:0;
		border-bottom:0;
		padding:6px 12px;
		text-wrap:nowrap !important;
		word-wrap:normal !important;
		overflow-wrap:normal !important;
		white-space:nowrap;
		word-break:keep-all;

		p{
			white-space:wrap;
			margin:6px 0;
		}

		&:first-child,
		&.fixed-column{
			position:sticky;
			left:0;
			z-index:2;
			box-shadow:inset -3px 0 3px 0 var(--border-color);
			border-right:0;
		}

		&:last-child{border-right:0;}
	}

	thead{border-bottom:none;}

	thead tr,
	tfoot tr{
		&, th{background:var(--main-bg-color);}
	}

	tbody tr{
		&:nth-child(odd){
			&, td{background:var(--secondary-bg-color);}
		}

		&:nth-child(even){
			&, td{background:#FFFFFF;}
		}

		&:last-child:nth-child(even){border-bottom:1px solid var(--border-color);}
	}
}

div.post-password-content-template{
	padding:10px;
	background:var(--secondary-bg-color);
	margin-bottom:20px;

	form{
		img{
			float:left;
			margin-right:10px;
		}

		p{
			padding-top:5px;

			&:last-child{margin-bottom:0;}
		}

		input[type="password"]{
			border:1px solid var(--border-color);
			padding:6px;
		}
		
		input[type="submit"]{
			padding:8px;
			background:var(--hover-bg-color);
			color:#FFFFFF;
			border:0;
			text-shadow:none;
			line-height:1;
		}
	}
}

ul.post-list{
	margin-left:0;
	margin-bottom:20px;

	li{
		list-style:none;
		padding-left:0px;

		&:before {
			font-family:remixicon!important;
			font-style:normal;
			-webkit-font-smoothing:antialiased;
			content:"\ed0f";
			margin-right:6px;
			color:var(--highlight-color);
		}

		&:nth-child(10n){margin-bottom:20px;}
	}
}

#series_posts{
	border-top:1px solid var(--border-color);
	padding-top:20px;

	p{margin-bottom:10px;}

	ul{margin-left:0;}
}

.coupon{
	background:var(--secondary-bg-color);
	padding:10px;
}

#coupon-copy{
	color:var(--main-color);
	margin-left:10px;
}

a.visitbutton{
	background:var(--main-bg-color);
	color:#FFFFFF;!important;
	padding:4px 6px;
}

div.entry-tags{
	margin-bottom:20px;
	line-height:2;

	a{
		padding:2px 4px;
		margin:0 4px;
		background:var(--secondary-bg-color);
	
		&:hover{
			background:var(--main-bg-color);
			color:#FFFFFF;
		}
	}
}

.entry-extend div{
	border-bottom:1px solid var(--border-color);
	padding-bottom:20px;
	margin-bottom:20px;

	p{
		margin-bottom:4px;
	}
}

ul.horizontal{
	background:#FFFFFF;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:20px;
	margin:0;

	li{
		list-style:none;	
		cursor:pointer;
		width:112px;
		padding:0 4px;

		&:hover{
			background:var(--secondary-bg-color);
		}

		img{
			display:block;
			border:1px solid var(--border-color);
			padding:1px;
			margin:0 0 4px 0;
			width:104px;
			height:auto;
			height:auto;
		}

		h4{
			line-height:1.5;
			margin-bottom:10px !important;
			margin-top:0 !important;
			-webkit-line-clamp:4;
		}
	}
}

ul.vertical{
	li{
		clear:both;
		list-style:none;
		border-bottom:1px solid var(--border-color);
		padding:6px 0;

		&:last-child{border-bottom:none;}

		&:hover{background:var(--secondary-bg-color);}

		a{
			display:flex;
			align-items:center;
		}

		img{
			width:62px;
			height:62px;
			border:1px solid var(--border-color);
			padding:1px;
			margin-right:10px;
		}

		h4{
			-webkit-line-clamp:3;
			margin:0;
			padding:0;
		}
	}
}

ul.horizontal li h4, ul.vertical li h4{
	font-size:14px !important;
	font-weight:normal;
	border-bottom:0;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
}

.load-posts-wrap{
	display:flex;
	justify-content:center;
	margin-top:20px;

	.load-posts.loading{
		i{
			display:inline-block;
			line-height:1;
			animation:rotation 1s infinite linear;
		}

		span{
			color:transparent;
			background:linear-gradient(270deg, #FFFFFF, #CCCCCC);
			background-clip:text;
			-webkit-background-clip:text;
			animation:loading-bg 3s linear infinite;
		}
	}
}

.button{
	background:var(--main-bg-color);
	border-radius:5px;
	padding:5px 10px;
	color:#ffffff;
	cursor:pointer;
	display:inline-block;

	&:hover{
		color:#FFFFFF;
		background:var(--hover-bg-color);
	}
}

.sidebar{
	width:300px;
	padding:20px 0 0 20px;
	background:url(./i/sidebar_bg.gif) left top no-repeat;

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

	div.widget{
		margin:10px 0 20px 0;

		.widget-title{
			background:var(--main-bg-color);
			color:#FFFFFF;
			font-size:16px;
			padding:4px 10px;
			width:280px;
			margin-bottom:10px;
			border-bottom-right-radius:5px;
		}
	}

	h3:before{
		font-family:remixicon!important;
		font-style:normal;
		-webkit-font-smoothing:antialiased;
		content:"\eae4";
		margin-right:6px;
	}

	ul li{
		color:var(--secondary-color);
		padding:6px 2px;
		list-style:none;
		font-size:15px;
	}

	p{margin-bottom:0;}

	.widget_media_image img{
		max-width:280px;
		height:auto;
	}

	.widget_media_image .wp-caption-text{
		margin:0 auto 20px auto;
		text-align:center;
	}
}

footer{
	width:1000px;
	text-align:left;
	clear:both;
	padding:0px 20px 20px 20px;
	margin:0 auto;
	display:block;
	color:var(--secondary-color);
	background-image:linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF00 90%);

	#container &{padding:0 0 20px 0;}

	&:before{
		content:" ";
		display:block;
		height:60px;
		background:url(./i/footer_bg.gif) 660px 0 no-repeat;
		margin-bottom:40px;
		border-bottom:6px solid #E9F7F6;

		body.full-width &{background:none;}
	}

	&:after{
		content:" ";
		display:block;
		height:60px;
		margin-top:-50px;
	}

	ul{
		display:flex;
		flex-wrap:wrap;
		margin-bottom:20px;

		li{
			list-style:none;
			margin:0 6px 6px 0;
			border-right:1px solid #ccc;
			padding-right:6px;
			line-height:1;

			&:last-child{
				margin-right:0;
				border-right:0;
				padding-right:0;
			}
		}

		&:before{
			margin-bottom:6px;
			line-height:1;
		}

		&.footer-links:before{
			content:"快速链接：";
			font-weight:bold;
		}

		&.blogroll:before{
			content:"友情链接：";
			font-weight:bold;
		}
	}

	#optimized_by_wpjam_basic{
		display:inline-block;
	}
}

@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{
		display:none;
	}

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

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

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

		#wpjam_blog_728x90{display:none;}
	}

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

		form{
			position:absolute;
			top:30px;
			right:30px;
			width:initial;
			background:none;
			border:none;
		
			input{width:180px;}

			button{height:30px;}
		}
	}

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

	.entry{
		&.entry-card{
			margin-bottom:15px;
			padding-bottom:15px;
			gap:15px;

			h2{margin:0;}
		}

		.entry-thumb{
			img{
				width:75px;
				height:75px;
			}
		}

		&.entry-card .entry-content,
		.entry-meta .author{display:none;}
	}
}