/*
Theme Name: gallery kankō
Author: gallery kankō
Description: gallery kankōのための、印刷物のアーカイブのようなフルカスタムテーマ。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gallery-kanko
*/

/* ---------- reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}

ul, ol {
	padding: 0;
	list-style: none;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	font-weight: 500;
}

/*
 * 投稿本文（展示詳細・note・news・about等）内のリンクだけは、サイト全体の
 * 「hoverで太字」ルールとは別に、常時細い下線をつける（本文中でリンクだと
 * 分かりやすくするため）。hover時は太字にせず、下線をやや太くするだけの控えめな強調にする。
 */
.exh-detail__body a,
.exh-detail__gallery-item a,
.gk-single__body a,
.news-card__body a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.exh-detail__body a:hover,
.exh-detail__gallery-item a:hover,
.gk-single__body a:hover,
.news-card__body a:hover {
	font-weight: 400;
	text-decoration-thickness: 1.5px;
}

button, input, textarea {
	font: inherit;
	color: inherit;
}

/* ---------- variables ---------- */
:root {
	--gk-unit: 24px;
	--gk-unit-mobile: 16px;
	/* サイズによる階層は作らない方針。ナビ・見出し・ラベル類は15px、本文のみ14px。
	   区別はトラッキング（と、リンクのみhoverのウェイト）で行う。 */
	--gk-fs-lg: 15px;
	--gk-fs-base: 15px;
	--gk-fs-body: 14px;
	--gk-lh-body: 26px;
	/* 本文中の段落（改行）どうしの間隔。共通ルールとして1箇所にまとめている。 */
	--gk-paragraph-gap: calc(var(--gk-unit) * 0.5);
	--gk-color-text: #111111;
	--gk-color-bg: #F5F5F3;
	--gk-color-line: #111111;
	--gk-color-placeholder: #ececea;
	--gk-font-jp: "Zen Kaku Gothic New", sans-serif;
	--gk-font-en: "Outfit", sans-serif;
	/* デザイン仕様の「tracking 100%」は Figma/Adobe のトラッキング単位（1000 = 1em）での
	   表記と解釈し、0.1em として実装しています。見た目が合わない場合はここを調整してください。 */
	--gk-tracking: 0.1em;
}

/* ---------- base ---------- */
body {
	font-family: var(--gk-font-en), var(--gk-font-jp);
	font-size: var(--gk-fs-body);
	line-height: var(--gk-lh-body);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--gk-color-text);
	background: var(--gk-color-bg);
	/* URLなど、長く切れ目のない文字列が狭い画面ではみ出さないよう、必要な時だけ折り返す */
	overflow-wrap: break-word;
}

.container {
	padding-left: var(--gk-unit);
	padding-right: var(--gk-unit);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ---------- placeholder block (未画像・coming soon 等) ---------- */
.gk-placeholder {
	background: var(--gk-color-placeholder);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--gk-fs-base);
	letter-spacing: var(--gk-tracking);
}

/* ---------- site header ---------- */
.site-header {
	padding: var(--gk-unit) var(--gk-unit) calc(var(--gk-unit) - 12px);
}

.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gk-unit);
}

.site-title-group {
	display: flex;
	align-items: baseline;
	gap: var(--gk-unit);
}

.site-title {
	font-size: var(--gk-fs-lg);
	letter-spacing: var(--gk-tracking);
	text-transform: lowercase;
}

.site-title:hover {
	font-weight: 400;
}

/*
 * タグライン（サイトタイトルの説明）。PCではタイトルの右横に並べる（縦幅が増えないよう
 * align-items: baselineで、高さの基準はタイトル側に揃える）。タブレット・モバイルでは
 * 幅が足りないため、タイトルの下の2行目に落とす。
 */
/* 色は[info]ラベル（.site-nav--info .is-static）と同じ、不透明度によるグレーに揃える */
.site-tagline {
	font-style: italic;
	font-size: 12px;
	letter-spacing: 0.03em;
	opacity: 0.6;
	white-space: nowrap;
}

@media (max-width: 1366px) {
	.site-title-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	/*
	 * タイトルが2行（タグライン込み）になる分、行全体を中央揃えのままにすると
	 * searchが縦方向の真ん中（タイトルとタグラインの間あたり）に来てしまうため、
	 * この行だけ上揃えにして、gallery kankōと同じ高さに揃える。
	 */
	.site-header__row:first-child {
		align-items: flex-start;
	}
}

.site-search-form {
	display: flex;
}

.site-search-input {
	width: 8em;
	font-family: inherit;
	font-size: var(--gk-fs-lg);
	letter-spacing: var(--gk-tracking);
	text-transform: lowercase;
	text-align: right;
	color: inherit;
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
}

.site-search-input:hover,
.site-search-input:focus {
	border-bottom-color: var(--gk-color-line);
}

.site-search-input:focus {
	outline: none;
}

.site-search-input::placeholder {
	color: inherit;
	opacity: 1;
}

.site-search-input::-webkit-search-cancel-button {
	display: none;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gk-unit);
}

.site-nav a,
.site-nav .is-static {
	font-size: var(--gk-fs-lg);
	letter-spacing: var(--gk-tracking);
	text-transform: lowercase;
}

.site-nav--info .is-static {
	opacity: 0.6;
}

/*
 * ヘッダーナビは太字ではなく下線で状態を示す（サイト全体の「hoverは太字」ルールの例外）。
 * 通常時は下線なし、hover・選択中（is-current）は下線を出す。
 */
.site-nav a {
	font-weight: 400;
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.site-nav a:hover,
.site-nav a.is-current {
	font-weight: 400;
	text-decoration: underline;
}


/*
 * タイトル行とナビ行の間に移動したため、左右の余白はheaderのpaddingに任せ、
 * 上下だけ他の区切り線（hr）と同じ1ユニット分空ける。
 */
.site-divider {
	border-top: 1px solid var(--gk-color-line);
	opacity: 0.3;
	margin: calc(var(--gk-unit) / 2) 0;
}

/* ---------- site footer ---------- */
.site-footer {
	padding: var(--gk-unit);
	margin-top: calc(var(--gk-unit) * 2);
	text-align: center;
}

.site-footer__icon-link {
	display: inline-flex;
	margin-bottom: calc(var(--gk-unit) / 2);
	opacity: 0.7;
}

.site-footer__icon-link:hover {
	opacity: 1;
}

.site-footer__icon {
	width: 15px;
	height: 15px;
}

/* ---------- back to top（一定量スクロールすると現れる） ---------- */
/*
 * placeholderブロックと同じ薄いグレー（--gk-color-placeholder）の塗りのみ。
 * 枠線・影は使わず、新しい色も増やさない。
 */
.gk-back-to-top {
	position: fixed;
	right: var(--gk-unit);
	bottom: var(--gk-unit);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	background: var(--gk-color-placeholder);
	border: none;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gk-back-to-top__icon {
	width: 16px;
	height: 16px;
}

.gk-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.gk-back-to-top:hover {
	opacity: 0.7;
}

/* ---------- single post (note等の個別ページ共通) ---------- */
.gk-single {
	padding-top: var(--gk-unit);
	padding-bottom: calc(var(--gk-unit) * 2);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.gk-single__categories {
	opacity: 0.6;
	text-align: center;
	margin-bottom: calc(var(--gk-unit) * 2 - 18px);
}

/* notesの個別ページだけ、上（ヘッダー）とカテゴリーラベルの間隔を詰める */
.single-note .gk-single {
	padding-top: calc(var(--gk-unit) / 2);
}

/* page-heading（exhibitions/notesなどの大見出し）と同じ色・サイズ・太さに揃える */
.gk-single__categories--page-heading-style {
	opacity: 1;
	font-size: var(--gk-fs-base);
	font-weight: 500;
	letter-spacing: var(--gk-tracking);
}

.gk-single__title {
	font-size: var(--gk-fs-base);
	letter-spacing: var(--gk-tracking);
	text-align: center;
	margin-bottom: var(--gk-unit);
}

.gk-single__title--after-image {
	font-weight: 500;
	margin-bottom: calc(var(--gk-unit) * 2);
}

.gk-single__thumbnail {
	margin-bottom: calc(var(--gk-unit) * 2);
}

/* 縦長の写真が、横幅（900px）より縦に長くならないよう、縦の長さも同じ900pxを上限にする */
.gk-single__thumbnail img {
	max-height: 900px;
	width: auto;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

.gk-single__body img {
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
}

.gk-single__thumbnail-caption {
	display: none;
}

.gk-single__body :is(p, ul, ol, blockquote) {
	margin-bottom: var(--gk-paragraph-gap);
}

.gk-single__body p {
	text-align: justify;
}

/* 文字のすぐ後に写真（画像1枚 / ギャラリー）が来るときだけ、間隔を広くする */
.gk-single__body p + figure {
	margin-top: var(--gk-unit);
}

/*
 * 本文中の画像のキャプション（展示詳細の会場写真エリアと同じルール）。
 * 画像に近く（6px）、キャプションの有無で高さがばらつかないように最小の高さを確保し、
 * 次の要素との間も6px空ける。
 */
.gk-single__body figcaption {
	font-size: var(--gk-fs-body);
	opacity: 0.6;
	text-align: center;
	margin-top: calc(var(--gk-unit) / 4);
	margin-bottom: calc(var(--gk-unit) / 4);
	min-height: var(--gk-lh-body);
}

.gk-single__body hr {
	border: none;
	border-top: 1px solid var(--gk-color-line);
	margin: var(--gk-unit) 0;
}

/*
 * ギャラリーブロックの画像どうしの余白を、サイト共通のグリッド単位に合わせる。
 * WordPressがブロックごとに埋め込みスタイル（.wp-block-gallery.wp-block-gallery-1など、
 * クラス2つ分の詳細度）を自動生成して上書きしてくるため、こちらはクラス3つ分の詳細度に
 * して確実に勝つようにしている。
 */
.gk-single__body .wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: var(--gk-unit);
	row-gap: var(--gk-unit);
	column-gap: var(--gk-unit);
	margin-bottom: var(--gk-unit);
}

/*
 * WordPress標準では、599px以下でギャラリーブロックが自動的に2列に切り替わってしまう
 * （既存のブロックごとの列数設定を無視する）。3列のものはモバイルでも3列のまま保つ。
 */
@media (max-width: 599px) {
	.gk-single__body .wp-block-gallery.has-nested-images:not(.columns-1):not(.columns-2) figure.wp-block-image {
		flex-basis: calc(33.333% - var(--gk-unit) * 2 / 3) !important;
		width: calc(33.333% - var(--gk-unit) * 2 / 3);
		margin-right: var(--gk-unit);
	}

	.gk-single__body .wp-block-gallery.has-nested-images:not(.columns-1):not(.columns-2) figure.wp-block-image:nth-of-type(3n) {
		margin-right: 0;
	}
}

/* ---------- page heading（current/upcomingと同じ大きさに統一） ---------- */
.page-heading {
	font-size: var(--gk-fs-base);
	font-weight: 500;
	letter-spacing: var(--gk-tracking);
	padding: calc(var(--gk-unit) - 12px) var(--gk-unit) var(--gk-unit);
	text-align: center;
}

/* ---------- 404ページ ---------- */
.gk-404 {
	text-align: center;
	padding-bottom: calc(var(--gk-unit) * 2);
}

.gk-404 p {
	margin-bottom: var(--gk-paragraph-gap);
}

/* ---------- section heading（current/upcoming/archive、notesのカテゴリー名など） ---------- */
.section-heading {
	font-size: var(--gk-fs-base);
	font-weight: 400;
	letter-spacing: var(--gk-tracking);
	margin-bottom: var(--gk-unit);
}

/* ---------- responsive ---------- */
@media (max-width: 767px) {
	:root {
		--gk-unit: var(--gk-unit-mobile);
	}

	.site-header__row {
		flex-wrap: wrap;
	}

	.site-nav ul {
		gap: var(--gk-unit-mobile);
	}

	/*
	 * インフォナビ（[info] about access contact）は、モバイル幅では折り返して
	 * メインナビの下の行に来る。上の間隔（メインナビとの間）は、.site-header__rowの
	 * gap（16px）に負のmargin-topを足すことで半分（8px）に詰める
	 * （gap自体は同じ行内のtitle+searchの間隔も兼ねているため、そちらには触れない）。
	 * 下の間隔（.site-headerのpadding-bottom、モバイルでは4px）は、倍の8pxにする。
	 */
	.site-nav--info {
		margin-top: calc(var(--gk-unit-mobile) / 2 * -1);
	}

	.site-header {
		padding-bottom: var(--gk-unit-mobile);
	}

	/*
	 * モバイルでは、現在地はnavの下線（is-current）だけで示す。
	 * ページ中央に大きく表示していた見出し文字は重複表示になるため非表示にする
	 * （詰まって見えないための余白は、各ページのCSS側で個別に持たせている）。
	 */
	.page-heading {
		display: none;
	}
}

/* スマホ・iPadでは文字の代わりにフッターのアイコンを使う（PCのみヘッダーの文字リンク） */
@media (max-width: 1366px) {
	.site-nav__instagram-text {
		display: none;
	}
}

@media (min-width: 1367px) {
	.site-footer__icon-link {
		display: none;
	}
}