/*
Theme Name: Personal Resume Portfolio
Author: aThemeArt
Author URI: https://athemeart.com/
Theme URI: https://athemeart.com/downloads/resume-portfolio/
Description:Showcase your professional profile with the Personal Resume Portfolio child theme — a simple, digital resume template designed to elevate your personal brand. Whether you're a graphic designer, writer, or freelancer, this creative layout helps you present your career summary, CV, and work history with clarity and style. Perfect for blogger profiles, curriculum vitae, and cover letters, this theme offers a clean space to highlight your skills, experience, and achievements. With sections for a skillset showcase and portfolio display, it's ideal for photographers, illustrators, marketers, and remote professionals looking to make an online impression.
Template: personal-cv-resume
Version: 1.0.0
Requires at least: 5.0
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.html
Tags: blog, three-columns, grid-layout, news, left-sidebar, right-sidebar, sticky-post, custom-background, custom-header, custom-colors, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments, custom-logo, portfolio, footer-widgets
Text Domain: personal-resume-portfolio
*/
:root {
	--secondary-color: #EE654D;
	--secondary-color-rgb: rgba(238,101,77,0.5);
	--nav-color:#3a3939;
	--heading-font:'Roboto Condensed', sans-serif;
	--nav-font:'Roboto Condensed', sans-serif;
}
#page.site{
	max-width: 100%;
	overflow: hidden;
}
@media only screen and (min-width : 750px) {
		#page.site{
			display: flex;
			align-items: stretch!important;
			max-width: 1600px;
			width: 100%;
			margin: 0px auto;
			padding: 0px 2%;
		}
		#main.site-main{
			margin: 20px 3%;
		}
		#page.site #aside-nav-wrapper{
			position: static;
			flex: 0 0 250px; /* Fixed width of 250px */
			border-left: 1px solid rgba(0,0,0,0.08);
			max-height: auto;
			height: auto!important;
		}
		#page.site #content.site-content{
			margin-left: 0px;
			max-width: 100%;
			overflow: hidden;
			flex: 1;
			position: relative;
			padding-bottom: 150px;
		}
		#colophon.site-footer{
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: 0px;
		}
		#page.site #content.site-content .full-container{
			margin: 20px 4% 0 !important;
		}
		#page.site div.sidewrapper.sidenav{
	    right: 0;
	    margin-right: 0;
	    opacity: 1;
	    visibility: visible;
	    position: static;
	    width: 250px;
		}
		#page.site #secondary{
			overflow: hidden;
			width: 100%;
		}
		#page.site #sidebar-actions{
			display: none;
		}
		#page.site #fly-sidebar{
			border: 1px solid rgba(0,0,0,0.08);
			overflow: hidden;
			flex: 0 0 250px; /* Fixed width of 250px */
			
		}
}
@media only screen and (max-width : 750px) {
	#page.site div.sidewrapper.sidenav {
		position: absolute;
	}
}
a.ui-to-top {
  position: fixed;
  right: -20px;
  bottom: 70px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  z-index: 20;
  transition: .3s all ease;
  -webkit-transform: translateY(50px) rotate(-90deg);
  -ms-transform: translateY(50px) rotate(-90deg);
  transform: translateY(50px) rotate(-90deg);
  z-index: 99;
  opacity: 0;
  padding-right: 10px;
  font-family: var(--nav-font);
  color: #1f1f1f;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 3px;
  padding-right: 25px;
}
a.ui-to-top:hover,
a.ui-to-top:focus{
	color: var(--secondary-color);
}
a.ui-to-top i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-size: 16px;
  display: block;
  position: absolute;
  right: 7px;
  top: 2px;
  height: 20px;
}
a.ui-to-top.active {
  -webkit-transform: translateY(0) rotate(-90deg);
  -ms-transform: translateY(0) rotate(-90deg);
  transform: translateY(0) rotate(-90deg);
  opacity: 1;
}
#colophon.site-footer{
	text-align: center;
	padding:20px 0px!important;
}

#primary #masonry-grid .img-box.gallery{
	height: 260px;
}
#primary #masonry-grid .img-box.gallery .gallery-image{
	height: 260px;
	overflow: hidden;
}

#primary .content-post-wrap .img-box .article-link{
 bottom: -24px;
}
@media only screen and (max-width : 750px) {
	.inner-wrapper-sticky{
		width: 230px!important;
	}
	.inner-wrapper-sticky{

	}
}
#aside-nav-wrapper .my-photo{
	border-radius:none;
	padding: 0px;
}
#aside-nav-wrapper .my-photo .custom-logo-link{
	border: 4px solid #fff;
	width: 120px;
  height: 120px;
  text-align: center;
  overflow: hidden;
  border-radius: 100%;
}
#aside-nav-wrapper .my-photo .custom-logo-link:hover,
#aside-nav-wrapper .my-photo .custom-logo-link:focus{
	border-color: var(--secondary-color);
}
.widget h3.widget-title span, .widget.widget_block span{
	background: var(--secondary-color);
}
.comments-area a{
	color: var(--secondary-color);
}
.widget ul li a:hover, .widget ol li a:hover, .widget ul li a:focus, .widget ol li a:focus{
	color: var(--secondary-color);
}
.widget ul li:hover::before, .widget ol li:hover::before {
	color: var(--secondary-color);
}
#aside-nav-wrapper #navbar ul > li > a:hover, #aside-nav-wrapper #navbar ul > li > a:focus, #aside-nav-wrapper #navbar ul > li.current_page_item > a{
	color: var(--secondary-color);
}
#aside-nav-wrapper #navbar ul ul li:first-child::before {
	border-right: 8px solid var(--secondary-color)
}


/* 1. 顶部预留图片空间（.site-content 最上方） */
.site-content::before {
    content: "";
    display: block;
    height: 200px; /* 预留高度，可自定义 */
    background: url('https://www.wjhici.cn/wp-content/uploads/2025/07/cropped-日出-scaled-2.jpg') center/cover no-repeat; /* 替换为实际图片URL */
    margin-bottom: 20px; /* 与文章间距 */
}

/* 2. 强制文章单列排布（覆盖 masonry 多列布局） */
#masonry-grid {
    display: block !important; /* 取消 masonry 网格布局 */
    position: static !important; /* 重置绝对定位 */
    height: auto !important; /* 重置固定高度 */
}

#masonry-grid .grid-item {
    width: 100% !important; /* 单列宽度 */
    position: relative !important; /* 重置绝对定位 */
    left: 0 !important; /* 清除 left 定位 */
    top: 0 !important; /* 清除 top 定位 */
    margin: 0 0 30px 0 !important; /* 仅保留上下间距 */
    float: none !important; /* 取消浮动 */
}

/* 3. 适配移动端（确保响应式） */
@media (max-width: 768px) {
    .site-content::before {
        height: 150px; /* 移动端减小高度 */
    }
    #masonry-grid .grid-item {
        padding: 0 10px; /* 移动端左右留白 */
    }
}