/* wp2emdash: 元サイトの JavaScript がしていた表示の補正（テーマ共通） */
.elementor-section.elementor-section-stretched { position: relative; }

/* JavaScript のスライダー（bxSlider・slick など。移行時に wp2e-slider を付けた）：1 枚ずつ表示し、legacy-fixes.js がフェードで切り替える。
   サーバーの HTML のままだとスライドが全部縦に並ぶ */
/* スライドは全部を同じ升に重ね、見せないものは見えなくするだけにする（display: none にしない）。スライダーの部品（slick・Swiper・bxSlider・Splide など）は
   入れ物をいちばん高いスライドの高さにするので、それと同じ高さになる。1 枚目だけを出すと 1 枚目の高さになり、トップの画像が短くなった
   （Lightning のデモ：1 枚目 575px・2 枚目 641px、元は 641px。#1605） */
.wp2e-slider { list-style: none; position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr); }
.wp2e-slider > * { list-style: none; grid-area: 1 / 1; }
.wp2e-slider > :not(:first-child):not(.wp2e-current), .wp2e-slider.wp2e-ready > :first-child:not(.wp2e-current) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* スライドの表示の形は、テーマ・部品の CSS が決めたもの（VK Blocks のスライドの flex など）のまま。決めていなければ block（優先度 0）。
   block で上書きすると、flex で中身を縦の真ん中に寄せるスライドの形が崩れる。CSS がスライドを隠しているとき（display: none）は legacy-fixes.js が block にする */
:where(.wp2e-slider > *) { display: block; }
.wp2e-slider > .wp2e-current { animation: wp2e-fade 0.8s ease; }
@keyframes wp2e-fade { from { opacity: 0; } to { opacity: 1; } }
/* 一覧・記事のアイキャッチの比（render.ts の thumbSize。WordPress が切り抜いた画像の比の代わり）。優先度 0 にして、テーマの CSS が比・高さを決めていればそちらを使う */
:where(img[style*="--wp2e-thumb-ratio"]) { aspect-ratio: var(--wp2e-thumb-ratio); object-fit: cover; height: auto; }
/* Smash Balloon の Instagram フィード：JavaScript が写真のリンクの高さを、フィードの設定の比（data-imageaspectratio="1:1" など）で
   幅から決めて（style="height: 112px"）切り抜いていた。無いと写真が元の比のまま縦に伸び、一覧がスマホで 900px 長かった
   （ある団体のサイトのトップ）。比は legacy-fixes.js が設定から --wp2e-sbi-ratio に入れる（設定が無い古い版は正方形）。
   JavaScript が高さを書いたものはそちらを使う */
#sb_instagram .sbi_photo:not([style*="height"]) { aspect-ratio: var(--wp2e-sbi-ratio, 1); }
#sb_instagram .sbi_photo:not([style*="height"]) img { height: 100%; }
/* WordPress の [video]（div.wp-video）：WordPress 標準の動画プレーヤー（MediaElement.js）が、入れ物の幅いっぱいのプレーヤーにしていた（#1529）。
   無いと video の width・height の属性の大きさ（無ければ 300×150）のまま小さく出た。YouTube・Vimeo は移行のときに iframe にする（freeze.ts の
   embedWpVideoShortcodes）ので 16:9。優先度 0 にして、テーマの CSS が大きさを決めていればそちら */
:where(.wp-video) { max-width: 100%; }
:where(.wp-video video.wp-video-shortcode) { width: 100%; height: auto; }
:where(.wp-video iframe.wp2e-wp-video) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
/* スマホでだけ出る並びの項目（サーバーがスマホのときだけ出していた VK の共有のボタンの LINE など。移行のときに wp2e-sp-only を付けて足した。#1532）。
   元はユーザーエージェント（wp_is_mobile）で出し分けていたので、幅だけでなく、マウスで操作する機器（hover・pointer: fine）のときだけ隠す（横向きのスマホ・タブレットでは出す） */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) { .wp2e-sp-only { display: none !important; } }
/* スライダーの部品がはみ出しを隠していた入れ物（JavaScript がその場で overflow: hidden を付けていた） */
.wp2e-clip { overflow: hidden; position: relative; }

/*
 * WordPress の記事の埋め込みのカード（LegacyWpEmbed）。元は iframe の中の WordPress の wp-embed-template.css で描かれていた。
 * iframe を使わずに本文の中で描くので、テーマの CSS が効かないよう値を言い切り、同じ見た目にする
 */
.wp-embed {
	box-sizing: border-box;
	padding: 25px;
	font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #8c8f94;
	background: #fff;
	border: 1px solid #dcdcde;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	overflow: auto;
	text-align: left;
}
.wp-embed .wp-embed-featured-image { margin: 0 0 20px; }
.wp-embed .wp-embed-featured-image img { display: block; width: 100%; height: auto; border: none; margin: 0; }
.wp-embed p.wp-embed-heading { margin: 0 0 15px; padding: 0; font-weight: 600; font-size: 22px; line-height: 1.3; }
.wp-embed .wp-embed-heading a { color: #2c3338; text-decoration: none; }
.wp-embed .wp-embed-excerpt p { margin: 0 0 1em; padding: 0; font-size: 14px; line-height: 1.5; color: #8c8f94; }
.wp-embed .wp-embed-more { color: #c3c4c7; text-decoration: underline; }
.wp-embed .wp-embed-footer { display: table; width: 100%; margin-top: 30px; }
.wp-embed .wp-embed-site-title { display: table-cell; font-weight: 600; line-height: 1.78571428; }
.wp-embed .wp-embed-site-title a { color: #2c3338; text-decoration: none; }
/* よそのサイトの埋め込みのカード（#1338）：アイキャッチが正方形の形・サイトのアイコン（WordPress の wp-embed-template.css と同じ値） */
.wp-embed .wp-embed-featured-image.square { float: left; max-width: 160px; margin-right: 20px; }
.wp-embed .wp-embed-site-title { position: relative; }
.wp-embed .wp-embed-site-title a.wp2e-with-icon { position: relative; display: inline-block; padding-left: 35px; }
.wp-embed .wp-embed-site-icon { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 25px; height: 25px; border: 0; }

/* JavaScript が組み立てる部品（Revolution Slider・Master Slider）を、PC とスマホの形の両方で固定したもの（#185）。画面の幅で出し分ける */
.wp2e-responsive > .wp2e-sp { display: none; }
@media (max-width: 767px) {
	.wp2e-responsive > .wp2e-pc { display: none; }
	.wp2e-responsive > .wp2e-sp { display: block; }
}

/* フォームのスパム避けの隠し項目（移行時に足した。#97）：画面の外に置き、人には見せない（display: none だと入力しないロボットがいる） */
.wp2e-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* 一覧の続きを出すボタン（STUDIO の「Load more」。#268）：最後のページまで出したら隠す（元の CSS の display より強く） */
[data-wp2e-more][hidden] { display: none !important; }

/* 外部のフォームの画像認証の画像を読み直すリンク（Zoho の「もう一度読み込む」。#637）。href を外したので、押せることを指の形で示す（押すと legacy-fixes.js が読み直す） */
[data-wp2e-captcha-reload] { cursor: pointer; }

/* 下見のあいだの外部のフォーム（BowNow。#698）の場所：公開すると表示されることを、フォームのあった大きさの枠で出す（legacy-fixes.js） */
.wp2e-embed-preview { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 24px; border: 1px dashed #b8b8b8; background: rgba(255, 255, 255, 0.6); color: #555; font-size: 14px; line-height: 1.7; text-align: center; }

/* ギャラリー（#730）：WordPress のギャラリーの CSS は、ギャラリーのあったページにしか読み込まれていない。管理画面で新しく作った記事のギャラリー
   （LegacyGallery.astro が印の wp2e-gallery を付ける）も横に並ぶよう、WordPress（wp-includes/blocks/gallery/style.css）と同じ並べ方を置く。
   移したギャラリーには当てない（当てると、元のページの配置の CSS の間隔を上書きして omni-hub の記事で 0.9 ポイント下がった） */
.wp-block-gallery.has-nested-images.wp2e-gallery { display: flex; flex-wrap: wrap; align-items: normal; gap: var(--wp--style--unstable-gallery-gap, 16px); }
.wp-block-gallery.has-nested-images.wp2e-gallery figure.wp-block-image { box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; max-width: 100%; position: relative; width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2); }
.wp-block-gallery.has-nested-images.wp2e-gallery figure.wp-block-image img { display: block; height: auto; max-width: 100%; width: auto; }
.wp-block-gallery.has-nested-images.wp2e-gallery.is-cropped figure.wp-block-image:not(#individual-image) img { flex: 1 0 0%; height: 100%; object-fit: cover; width: 100%; }
@media (min-width: 600px) {
	.wp-block-gallery.has-nested-images.wp2e-gallery.columns-default figure.wp-block-image:not(#individual-image), .wp-block-gallery.has-nested-images.wp2e-gallery.columns-3 figure.wp-block-image:not(#individual-image) { width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667); }
	.wp-block-gallery.has-nested-images.wp2e-gallery.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), .wp-block-gallery.has-nested-images.wp2e-gallery.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5); }
	.wp-block-gallery.has-nested-images.wp2e-gallery.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child, .wp-block-gallery.has-nested-images.wp2e-gallery.columns-1 figure.wp-block-image:not(#individual-image) { width: 100%; }
	.wp-block-gallery.has-nested-images.wp2e-gallery.columns-4 figure.wp-block-image:not(#individual-image) { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75); }
	.wp-block-gallery.has-nested-images.wp2e-gallery.columns-5 figure.wp-block-image:not(#individual-image) { width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8); }
	.wp-block-gallery.has-nested-images.wp2e-gallery.columns-6 figure.wp-block-image:not(#individual-image) { width: calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.83333); }
}