/** DOM example

インナーブロックは全幅か幅広の時のみ指定
そうでないと container-padding が余分についてしまう

entry-body
	wp-block-cover
		wp-block-cover__inner-container
*/
.has-small-font-size {
	font-size : var(--vk-size-text-sm); /* 14px */
}
.has-regular-font-size {
	font-size : var(--vk-size-text);
}
.has-large-font-size {
	font-size : var(--vk-size-text-lg); /* 24px */
}
.has-huge-font-size {
	font-size : 36px;
}

.alignfull,
.alignwide {
	div[class*="__inner-container"]{
		max-width: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );
		margin-left:auto;
		margin-right:auto;
	}
}

.alignfull {
	&,
	&.vk_slider,
	&.wp-block-image,
	&.wp-block-cover-image,
	&.wp-block-cover {
		width:auto; /* Don't use 100vw!! cope with windows */
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		max-width: 100vw;
	}
}
.alignwide {
	&,
	&.vk_slider,
	&.wp-block-image,
	&.wp-block-cover-image,
	&.wp-block-cover {
		// --vk-width-container != 100% なので注意
		// Lightningの幅広 = コンテナの「表示エリア（100%）	」 + 左右余白分の丁度半分
		width: calc( 100% + ( 100vw - 100% ) / 2 );
		margin-left: calc( ( 100% - 100vw ) / 4 );
		margin-right: calc( ( 100% - 100vw ) / 4 );
		max-width: 100vw;
	}
}
.main-section--col--two,
.sub-section--col--two {
	.alignfull,
	.alignwide {
		margin-left:0;
		margin-right:0;
		max-width: 100%;
		&.wp-block-image {
			// Default block style overwrite
			max-width: 100%;
		}
	}
	&.main-section--base--on,
	&.sub-section--base--on {
		.alignwide {
			padding-left: 0;
			padding-right: 0;
			margin-left: calc( var(--vk-width-base-padding) / -2 );
			margin-right: calc( var(--vk-width-base-padding) / -2 );
			max-width:calc( 100% + var(--vk-width-base-padding) );
			width:calc( 100% + var(--vk-width-base-padding) );
		}
		.alignfull {
			padding-left: 0;
			padding-right: 0;
			max-width:calc( 100% + var(--vk-width-base-padding) * 2 );
			width:calc( 100% + var(--vk-width-base-padding) * 2 );
		}
	}
}

/* カラム（水平）で点線と余白ができる */
.vk_post .row {
	margin: 0;
}

.wp-block-image {
	max-width: 100%;
	/* 編集画面専用 */
	.components-resizable-box__container {
		max-width: 100%;
	}
	figcaption {
		text-align: center;
		font-size: 0.75rem;
	}
}

.wp-block-quote cite {
	font-size: var(--vk-size-text-xs);
}

/*-------------------------------------------*/
/*  Outer
/*-------------------------------------------*/
// To be no container area ( ex : lightning_site_footer_before hook )
.vk_outer-width-full.vk_outer-paddingLR-none > div > .vk_outer_container {
	max-width:var(--vk-width-container);
	padding-left:15px;
	padding-right:15px;
	box-sizing: border-box;
	margin-left:auto;
	margin-right:auto;
} 

/*-------------------------------------------*/
/*  Image Block
/*-------------------------------------------*/
.wp-block-image img {
	height:auto;
	// block にしないと枠線スタイルで画像下部に意図しない余白ができてしまう
	display: block;
}

/*-------------------------------------------*/
/*  Gallery Block
/*-------------------------------------------*/
.wp-block-gallery {
	&.aligncenter {
		justify-content:center;
	}
	/* left right はコアで max-width:420px 指定が入っている */
	&.alignright{
		margin-left:auto;
		margin-right:0;
	}
}

/*-------------------------------------------*/
/*  Button Block
/*-------------------------------------------*/
.wp-block-button {
	&__link { 
		font-size: 1rem;
		background-color: var(--vk-color-primary);
		transition: all 0.1s ease-in;	
	}
	.wp-block-buttons &__link{ // ボタンブロック単独のCSSの方が後に出力されるて負けるため
		border-radius: var(--vk-size-radius);
	}
	.wp-block-button__link:hover,
	.wp-block-button__link:hover:not(.has-background){
		text-decoration: none;
		background-color: var(--vk-color-primary-vivid);
		border-color: var(--vk-color-primary-vivid);
	}
	.wp-block-button__link.has-background:hover{
		// コアのカラーパレットのCSSが !important 付けてくるのでやむなく !important
		background-color: var(--vk-color-primary-vivid) !important;
	}
	.wp-block-button__link:hover:not(.has-background){
		// コアのカラーパレットのCSSが !important 付けてくるのでやむなく !important
		color:#fff !important;
	}
}

/*-------------------------------------------*/
/*  Table Block
/*-------------------------------------------*/
.wp-block-table {
	figcaption {
		margin-top: 0.4rem;
		text-align: center;
		font-size: 0.75rem;
	}
}

/*-------------------------------------------*/
/*  「最新の記事」ブロック
/*-------------------------------------------*/
.wp-block-latest-posts {
	margin: 0;
	padding: 0;
	list-style-type: none;
    //グリット表示の場合
	&.is-grid {
		li {
			// margin: 0 8px 0 8px;
			padding: 0.5rem;
			border-bottom: none;
		}
	}
	li {
		margin: 0;
		padding: 1rem 0;
		border-bottom: 1px solid var(--vk-color-border-hr);
		& > a {
			color: var(--vk-color-text-body);
            text-decoration: none;
            display:block; overflow:hidden;
            margin-bottom:var(--vk-margin-meta);
            &:hover{
                text-decoration: underline;
            }
		}
        &:after {
            content: "";
            display: block;
            clear: both;
        }
	}
    &__post-author,
    &__post-date {
        color: var(--vk-color-text-light);
        font-size: var(--vk-size-text-sm);
    }
	&__featured-image {
		margin-bottom: var(--vk-margin-meta);
        display: block;
        width: auto;
        max-width: 100%;
        img {
            border: 1px solid var(--vk-color-border-hr);
            max-width: 100%;
        }
        &.alignleft {
            float:left;
        }
        &.alignright {
            float:right;
        }
	}
    &__post-excerpt {
        font-size: var(--vk-size-text-sm);
        margin-top:var(--vk-margin-meta);
        color:var(--vk-color-text-body);
    }
}

@media (max-width: 600px){
	.wp-block-media-text {
		&.is-stacked-on-mobile{
			.wp-block-media-text__media {
				margin-bottom:1.6rem;
			}
			&.has-media-on-the-right {
				.wp-block-media-text__media {
					margin-top:1.6rem;
				}
			}
		}
	}
}

/*-------------------------------------------*/
/*  「RSS」ブロック
/*-------------------------------------------*/
.wp-block-rss{
	padding: 0;
	list-style: none;
	&__item{
		margin-bottom:0;
		padding: 0.8rem 0;
		border-bottom: 1px solid rgba(0,0,0,.05);
		&-title{
            margin-bottom: var(--vk-margin-meta);
			a{
				color: var(--vk-color-text-body);
                text-decoration: none;
			}
		}
		&-publish-date{
			margin-right: .5em;
			&:before {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				margin-right: 5px;
				margin-left: 0;
				content: "\f073";
			}
		}
		&-author{
			&:before {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				margin-right: 5px;
				margin-left: 0;
				content: "\f303";
			}
		}
		&-publish-date,
		&-author{
			font-size: var(--vk-size-text-xs);
			color: var(--vk-color-text-light);
			display:inline-block;
			margin-top: .5em;
		}
		&-excerpt{
			font-size: var(--vk-size-text-xs);
			color: var(--vk-color-text-light);
			margin-top: var(--vk-margin-meta);
		}
		
	}
    &.is-grid {
        justify-content: space-between;
        li {
            margin-left:0;
            margin-right:0;
        }
    }
}


/*-------------------------------------------*/
/*  「検索」ブロック
/*-------------------------------------------*/
.wp-block-search {
	.wp-block-search__label{
		display: none;
	}
	&__input,
	&__button{
		border-radius: var(--vk-size-radius);
	}
	.wp-block-search__button{
		width: 33%;
		color: #fff;
		background-color: var(--vk-color-primary);
		border: none;
		padding: 6px;
		font-size: 16px;
		box-shadow:none;
		text-align: center;
	}
	input.wp-block-search__input {
		max-width: initial;
		width: 64%;
		border: 1px solid #ccc;
		padding: 6px 12px;
		font-size: 14px;
		margin-right: 0;
		margin-bottom: 0;
	}
}

hr.wp-block-separator {
	border-color: var(--vk-color-border-hr);
	border-bottom:none;
}