/*
Theme Name: Pine Field collection of works
Description: 作品置き場用デザイン（簡易）
Version: 1.0
Author: Matsuda
Author URI: 	https://www.pinefield-design.site/collection-of-works
*/
/*
COLORS
================================================ */
:root {
    /* Color */
    --gray: #dadada;
    --black: #333333;
    --white: #ffffff;
    --font-color: #3c190a;
    --body-bg-color: #FFFEF6;
    --work-header-color: #a67457;
    --single-categories-color: #C78E1F;
    --white-op: rgba(255,255,255,0.6);
    
    /* Font/Space Size */
    --font-sm: .75rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.625rem;

    /* Border Radius Size */
    --round-sm: 6px;
    --round-md: 10px;
    --round-lg: 50%;
}
:where(h1, h2, h3) {
    text-wrap: wrap;
}
/*
GENERAL STYLING
================================================ */
body{
    font-size: var(--font-md);
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--body-bg-color);
}
.flex{
    display: flex;
    flex-flow: row wrap;
}
p {
    line-height: 1.5;
}
img,
iframe {
    max-width: 100%;
}
a{
    text-decoration: none;
}
a:hover,a:focus,a:active{
    text-decoration: line-through;
}
/*
HEADER
================================================ */
.site-header{
    background-image: url(images/header-bg.jpg);
    background-size: cover;
    clip-path: ellipse(80% 100% at 50% 0);
    color: var(--white);
    width: 100%;
    height: 188px; 
    padding-top: 32px;
}
.site-header h1{
    font-size: 32px;
    text-align: center;
    margin-bottom: 16px;
}
.site-header h1 a{
    text-decoration: none;
}
.subtitle{
    text-align: center;
    font-size: var(--font-md);
}
/*
Navigation
================================================ */
    /* top-nav */
.wrap .top-nav{
    padding: 24px 56px;
    text-align: center;
}
.wrap .top-nav ul{
    justify-content: space-between;
}
    /* works-nav */
main .works-nav{
    position: sticky;
    top: 0;
}
main .works-nav .material-icons{
    font-size: 40px;
    color: var(--gray);
    cursor: pointer;
}
main .works-nav .works-nav-menu{
    display: none;
    font-size: var(--font-xl);
    background: var(--white-op) ;
    padding: 24px;
}
main .works-nav .works-nav-menu.active{
    display: inline-block;
}
main .works-nav .works-nav-menu li a{
    display: flex;
    align-items: center;
}
main .works-nav .works-nav-menu li a:before{
    display: block;
    border-top: solid 1px var(--font-color);
    content: "";
    width: 1em;
    margin-right: 1em;
}
/*
MAIN
================================================ */
main{
    padding: 64px 0;
}

/*
POST LIST
================================================ */
.work h2{
    font-size: var(--font-lg);
    text-align: center;
    padding-bottom: 32px;
}
.work .category-title{
    font-size: var(--font-lg);
    text-align: center;
    padding-bottom: 32px;
}
    /* Pager */
.nav-links{
    text-align: center;
}
.nav-links .page-numbers{
    margin-right: 8px;
    background-color: var(--font-color);
    color: var(--white);
    text-decoration: none;
    padding: 8px;
    min-width: 35px;
    display: inline-block;
}
.nav-links .current{
    background-color: var(--single-categories-color);
}
.nav-links .page-numbers:hover,.nav-links .page-numbers:focus,.nav-links .page-numbers:active{
    background-color: var(--work-header-color);
    color: var(--font-color);
}
.pagination .page-numbers:last-child{
    margin-right: 0;
}
    /* Archive */
.work .post{
    padding-bottom: 32px;
    margin: 0 auto;
    width: 80%;
}
.work .post-item{
    margin-bottom: 32px;
    background: var(--font-color);
}
.work .post-item a:hover,.work .post-item a:focus,.work .post-item a:active{
    text-decoration: none;
    opacity: 0.5;
}
.work .list-header{
    background: var(--work-header-color);
    padding: 8px 16px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 127px;
}
.work .list-header h2{
    padding-bottom: 8px;
    text-align: left;
}
.work .list-header .post-categories{
    color: #eccdbb;
    font-size: var(--font-sm);
}
/*
SINGLE / PAGE ARTICLE
================================================ */
.single{
    width: 90%;
    margin: 0 auto;
}
.single .post-header{
    margin-bottom: 32px;
}
.single h2, .page h2{
    font-size: var(--font-lg);
    text-align: center;
    padding-bottom: 32px;
}
.single img{
    margin: 0 auto 32px;
}
.single .post-categories{
    font-size: var(--font-md);
    display: flex;
    margin-bottom: 16px;
}
.single .post-categories li{
    border-radius: var(--round-md);
    margin-right: 16px;
}
.single .post-categories li a{
    display: inline-block;
    color: var(--white);
    background-color: var(--single-categories-color);
    border-radius: var(--round-md);
    padding: 8px 16px;
    font-weight: bold;
    text-shadow: #333 0px -1px 0;
}
.single .post-categories a:hover,.single .post-categories a:focus,.single .post-categories a:active{
    text-decoration: none;
    color: var(--single-categories-color);
    background-color: var(--white);
    text-shadow: #333 0px 1px 0;
}
.single .post-tags{
    font-size: var(--font-sm);
    display: flex;
    margin-bottom: 32px;
    list-style: none;
}
.single .post-tags li{
    border-radius: var(--round-md);
    margin-right: 16px;
}
.single .post-tags li a{
    display: inline-block;
    color: var(--white);
    background-color: var(--work-header-color);
    border-radius: var(--round-md);
    padding: 8px 16px;
    font-weight: bold;
    text-shadow: #333 0px -1px 0;
}
.single .post-tags a:hover,.single .post-tags a:focus,.single .post-tags a:active{
    text-decoration: none;
    color: var(--work-header-color);
    background-color: var(--white);
    text-shadow: #333 0px 1px 0;
}
.page article{
    padding: 0 32px;
}
/*
BLOCK
================================================ */
.single dl{
    margin-bottom: 32px;
}
.single dl dt{
    font-weight: bold;
}
.single dl dd{
    margin-bottom: 16px;
}
.single .work-post{
    margin-bottom: 32px;
}
.single .work-post h3{
    font-weight: bold;
}
.single .work-post p,.single .work-post h3+.wp-block-group{
    margin-bottom: 16px;
}
.work-post .about-skill-title{
    font-size: var(--font-lg);
}
.skill .icon span{
    width: 64px;
    height: 64px;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    line-height: 64px;
    font-size: 20px;
    border-radius: 10px;
    margin-right: 16px;
}
.skill .iconPs{
    background-color: #3794EA;
}
.skill .iconAi{
    background-color: #D99836;
}
.skill .iconXd{
    background-color: #D750C1;
}
.skill .iconPr{
    background-color: #7F5AEA;
}
/*
TAG LIST
================================================ */


/*
FORM
================================================ */


/*
FOOTER
================================================ */
footer{
    background-image: url(images/footer-bg.jpg);
    background-size: cover;
    background-position-x: -91%;
    padding: 56px 46px;
    color: var(--white);
}
footer .top-nav{
    margin-bottom: 56px;
}
footer .top-nav ul{
    width: 100%;
    justify-content: space-between;
}
footer .works-nav .title{
    margin-bottom: 16px;
}
footer .works-nav ul{
    flex-direction: column;
    margin-bottom: 56px;
}
footer .works-nav li{
    margin-bottom: 16px;
}
footer .works-nav li:last-child{
    margin-bottom: 0;
}
footer .works-nav .flex li a{
    display: flex;
    align-items: center;
}
footer .works-nav .flex li a:before{
    display: block;
    border-top: solid 1px var(--white);
    content: "";
    width: 1em;
    margin-right: .5em;
}
footer .copyright{
    font-size: var(--font-sm);
    text-align: center;
}

/*
LARGE SIZE
================================================ */
@media(min-width: 800px){
/* HEADER */
.site-header{
    height: 400px; 
    padding-top: 120px;
}
.site-header h1{
    font-size: 64px;
    margin-bottom: 24px;
}
    /* Navigation */
        /* top-nav */
    .wrap .top-nav{
        max-width: 1280px;
        margin: 0 auto;
    }
        /* works-nav */
    main .works-nav{
        margin-top: -120px;
    }
/* MAIN */
main{
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 0;
}
    /* Postlist */
    .work h2{
        padding-bottom: 56px;
    }
    .work .category-title{
        padding-bottom: 56px;
    }
        /* Archive */
    .work .post{
        padding-bottom: 56px;
        margin: 0 auto;
        width: 90%;
        justify-content: space-between;
    }
    .work .post::after{
        content:"";
        display: block;
        width: calc( calc(100% / 3) - 32px);
        max-width: 320px;
      }
    .work .post-item{
        margin-bottom:56px;
        width: calc( calc(100% / 3) - 32px);
        max-width: 320px;
    }
/* SINGLE / PAGE ARTICLE */
.single, .page{
    max-width: 1200px;
    margin: 0 auto;
}
.page article{
    padding: 0 32px;
}
    /* Block */
.single dl{
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
}
.single dl dt{
    width: 25%;
    margin-right: 32px;
    border-right: solid 1px #333;
}
.single dl dd{
    margin-bottom: 32px;
    width: calc(75% - 32px);
}
.single .work-post{
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
}
.single .work-post h3{
    width: 25%;
    margin-right: 32px;
    border-right: solid 1px #333;
}
.single .work-post p,.work-post h3+.wp-block-group{
    margin-bottom: 32px;
    width: calc(75% - 32px);
}
.work-post .about-skill-title{
    width: 100%;
    margin-right: 0;
    border-right: none;
}
.page div{
    margin-bottom: 56px;
}
.wp-block-columns {
    margin: 1rem auto;
}
/* FOOTER */
footer{
    background-image: url(images/footer-bg.jpg);
    background-size: cover;
    background-position-x: -91%;
    padding: 56px 46px;
    color: var(--white);
}
footer .top-nav{
    max-width: 1200px;
    margin: 0 auto 56px;
}
footer .top-nav ul{
    width: 100%;
    justify-content: space-between;
}
footer .works-nav{
    max-width: 1200px;
    margin: 0 auto;
}
footer .works-nav ul{
    flex-direction: row;
}
footer .works-nav li{
    margin-bottom: 0;
    margin-right: 16px;
}
footer .works-nav li:last-child{
    margin-right: 0;
}

}