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

.block-editor-block-list__layout{
	box-sizing: border-box;
}

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

.wp-block-image {
	&:where(:not(.alignfull,.alignwide)) {
		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;
	}
	//セクションベースありにした時、全幅で余白（左右）がコンテンツエリアに合わせるの場合に、ブロック側のpaddingでデザインがおかしくなるので打ち消し
	.main-section--base--on & {
		padding-left: var(--vk-width-base-padding);
		padding-right: var(--vk-width-base-padding);
	}
}

/*-------------------------------------------*/
/*  Image Block
/*-------------------------------------------*/
// 6.0 まで .wp-block-image に余白をつけていたのに対して、
// 6.1 からは .wp-block-image figure では 余白 0 で上書きしてくるため補正
body .wp-block-image figure {
	margin-bottom:1em;
}
.wp-block-image {
	img {
		height:auto;
	}
	// Addressing the image ratio issue in WordPress 6.3
	img:not([style*='object-fit']) {
		height: auto !important; // !important to override inline styles.
	}
	// theme.json 有りの場合
	&.aligncenter {
		margin-right: auto;
		margin-left: auto;
	}
	&.alignright {
		float: right;
		margin-right: 0;
		margin-left: 1em;
		margin-bottom: 0.5em;
	}
	&.alignleft {
		float: left;
		margin-right: 1em;
		margin-left: 0;
		margin-bottom: 0.5em;
	}
}

/*-------------------------------------------*/
/*  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;
		// 6.0 でコアのデフォルトカラーに負けるため .wp-block-button & 指定.
		// 6.1 ではこの指定ははしで、.wp-block-button__link だけで効くため 6.2 が出たら削除.
		.wp-block-button & { 
			background-color: var(--vk-color-primary);
		}
		transition: all 0.1s ease-in;
		&:hover {
			text-decoration: none;
			filter: brightness(1.1) saturate(2);
		}
		&,
		&:hover {
			color:#fff;
		}
	}
	.wp-block-buttons &__link{ // ボタンブロック単独のCSSの方が後に出力されるて負けるため
		border-radius: var(--vk-size-radius);
	}
	&.is-style-outline {
		& > .wp-block-button__link{
			background-color:transparent; // 6.6で コアのデフォルトスタイルが負けるようになり、背景色がついてしまうので追加
			&:hover {
				// コアのカラーパレットのCSSが !important 付けてくるのでやむなく !important
				filter: brightness(1) saturate(1);
				color:#fff !important;
				border-color: var(--vk-color-primary-vivid);
				background-color: var(--vk-color-primary-vivid) !important;
			}
		}
	}
}

/*-------------------------------------------*/
/*  Table Block
/*-------------------------------------------*/
.wp-block-table {
	// テーブルブロックの文字サイズなどのデザイン指定は、
	// コアによって table の外の figure タグ（ .wp-block-table ）にされるため、
	// th や td にCSSで指定すると、編集画面での指定が効かなくなる。
	// その都合上 figure.wp-block-table に指定している。
	border-color:var(--vk-color-border-hr);
	&:where(:not([class*="font-size"])){
		font-size:var(--vk-size-text-sm);
	}
	:is( 
	table,
	thead,
	tbody,
	tfoot,
	th,
	td ) {
		border-color:inherit;
	}
	thead th.has-text-align-right {
		text-align: center;
	} 
	figcaption {
		margin-top: 0.4rem;
		text-align: center;
		font-size: 0.75rem;
	}
	&.aligncenter {
		margin-left: auto;
		margin-right: auto;
	}
	&.alignleft{
		margin-left:0;
		margin-right:auto;
	}
	&.alignright{
		margin-left:auto;
		margin-right:0;
	}
}

/*-------------------------------------------*/
/*  「最新の記事」ブロック
/*-------------------------------------------*/
.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;
		}
	}
	&.wp-block-latest-posts__list {
		padding-left:0;
		li {
			margin:0;
		}
	}
	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;
			&:hover{
				text-decoration: underline;
			}
			&:where(:not(:last-child)) {
				margin-bottom:var(--vk-margin-meta);
			}
		}
		&: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 ( width <= 600px ){
	.wp-block-media-text {
		&.is-stacked-on-mobile{
			.wp-block-media-text__content {
				// 縦積みだと画像とテキストがひっついてしまうが、本来スペーサーなどでユーザーが任意に指定するべき部分なのでテーマからは指定しない
			}
		}
	}
}

/*-------------------------------------------*/
/*  RSS block
/*-------------------------------------------*/
.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 block
/*-------------------------------------------*/
hr.wp-block-separator {
	border-color: var(--vk-color-border-hr);
	border-bottom:none;
}

/*-------------------------------------------*/
/*  cover block
/*-------------------------------------------*/
// WP6.3からwp-block-cover にoverflow: clip; がついて、中に幅広・全幅ブロックを設置しても見切れてしまうようになったため追加
.wp-block-cover:has( * > :is( .alignwide , .alignfull )){
	overflow: visible;
}

/*-------------------------------------------*/
/*  Post Date Block
/*-------------------------------------------*/
// theme.json から指定可能になったらそちらに移行
.wp-block-post-date time{
	white-space:nowrap;
}

/*-------------------------------------------*/
/*  Inline Code
/*-------------------------------------------*/
:not(pre) > code,
kbd {
	display: inline-flex;
	margin: 0 0.4em;
	padding: 0.2em 0.4em !important;
	align-items: center;
	background-color: var(--vk-color-accent-bg) !important;
	border: 1px solid var(--vk-color-border-hr) !important;
	border-radius: 2px !important;
	color: var(--vk-color-text-body) !important;
	font-size: 0.9em !important;
	line-height: 1.1;

	&:focus {
		&:not(pre) > code[data-rich-text-format-boundary],
		> kbd[data-rich-text-format-boundary] {
			background-color: var(--vk-color-accent-bg) !important;
		}
	}
}

kbd {
	border-bottom-width: 3px !important;
}
