/*
Theme Name: RedRock
Author: LovingDeadCreative
Description: 小規模なNPOや個人事業者、そこから制作を受託する事業者向けに、最短15分でのローンチを目指したミニマルなフルサイト編集(FSE)ブロックテーマです。
Tags: accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, wide-blocks
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.5.1
Update URI: https://github.com/LovingDeadCreative/redrock
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: redrock

RedRock WordPress Theme, (C) 2026.
Based on Frost WordPress Theme by WP Engine.
RedRock is distributed under the terms of the GNU GPL.
*/

/* Defaults
---------------------------------------------------------------------------- */

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

/* rem の基準。ここはあえてトークン化せず生の値のままにする。
   global-styles を dequeue するプラグイン構成では --wp--custom--* が解決
   できなくなり、その場合は初期値16pxに落ちて theme.json のrem指定が全て
   約11%縮む。失敗が全体に波及する唯一の箇所なので外部依存を持たせない。 */
html {
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    font-size: var(--wp--preset--font-size--medium);
}

img,
figure,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* ここに `aspect-ratio: auto` のグローバルリセットを置かないこと。

   `aspect-ratio` の初期値は `auto` なので、この宣言はUAのpresentational
   hint(width/height属性を持つ画像に与えられる `aspect-ratio: auto W / H`)を
   打ち消す以外の効果を持たない。hintを打ち消すと読み込み前の「場所取り」が
   失われ、`height: auto` と相まって未読み込み画像の高さが0になり、CLSと
   リロード時のスクロール位置ずれを招く。
   hintの `auto` により読み込み完了後は画像本来の比率が優先されるため、
   差し替え画像の引き伸ばし防止も打ち消さないまま成立する
   (例外: sizes="auto" の画像はUAが `contain: size` を強制し本来の比率を
   参照できないため、比率は常にwidth/height属性で決まる)。 */

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
    transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
    text-decoration-thickness: 1px;
}

b,
strong {
    font-weight: var(--wp--custom--font-weight--black);
}

blockquote {
    margin: 0;
}

ol,
ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: disc;
}

pre {
    white-space: pre-wrap;
}

mark {
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--primary) 0%,
        var(--wp--preset--color--primary) 100%
    );
    background-position: 0 85%;
    background-repeat: repeat-x;
    background-size: 100% 15%;
}

/* Blocks
---------------------------------------------------------------------------- */

/* Button - Outline
--------------------------------------------- */

/* paddingはtheme.jsonの styles.elements.button と同じプリセットを明示する。
   宣言を省くとコアの
   `:root :where(.wp-block-button.is-style-outline > .wp-block-button__link)`
   (0,1,0)とtheme.jsonのボタン指定(同じく0,1,0)がソース順勝負になり、
   should_load_separate_core_block_assets を有効化するプラグイン下では
   コア側(0.667em/1.333em)が勝って塗りボタンと余白が揃わなくなる。
   このセレクタ(0,3,0)なら順序に関係なく勝つ。
   ただし詳細度で勝つぶん、サイトエディタでボタンのパディングを変えても
   outlineだけ追従しない。theme.json側の値を変えるときはここも必ず合わせること。 */
.wp-block-button.is-style-outline .wp-element-button {
    background-color: transparent;
    border: 1px solid;
    border-color: currentColor;
    color: var(--wp--preset--color--contrast);
    padding: var(--wp--preset--spacing--x-small)
        var(--wp--preset--spacing--small);
}

/* Calendar
--------------------------------------------- */

.wp-block-calendar table caption,
.wp-block-calendar table tbody {
    color: var(--wp--preset--color--contrast);
}

.wp-block-calendar table th {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

.wp-block-calendar tbody td,
.wp-block-calendar th {
    border: 1px solid var(--wp--preset--color--contrast);
    padding: 0.5em;
}

/* Code
--------------------------------------------- */

.wp-block-code code {
    overflow-wrap: normal;
    overflow-x: scroll;
    tab-size: 4;
    white-space: pre !important;
}

*:not(.wp-block-code) > code {
    background-color: var(--wp--preset--color--neutral);
    font-size: var(--wp--preset--font-size--small);
    padding: 0.25em 0.5em;
}

/* Image
--------------------------------------------- */

.wp-block-image.aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-image.alignleft {
    margin-right: 2rem !important;
}

.wp-block-image.alignright {
    margin-left: 2rem !important;
}

/* List
--------------------------------------------- */

ol li:where(:not([class*="block"])),
ul li:where(:not([class*="block"])),
.wp-block-list li {
    margin-left: 2rem;
}

.is-style-no-disc li {
    list-style-type: none;
    margin-left: 0;
}

/* Navigation
--------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
    padding-bottom: 2rem;
    padding-top: 2rem;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
    border: 1px solid currentColor;
    padding: 0.25em;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
    color: var(--wp--preset--color--base);
}

.wp-block-navigation:not([style*="text-decoration"]) a,
.wp-block-navigation:not([style*="text-decoration"]) a:focus,
.wp-block-navigation:not([style*="text-decoration"]) a:hover {
    text-decoration: none;
}

/* Navigation Submenu
--------------------------------------------- */

.wp-block-navigation:not(.has-background)
    .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--contrast);
    border: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    padding: 0.5em;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
    padding: 0.25em 0.75em;
}

/* Paragraph
--------------------------------------------- */

p.has-background {
    padding: 1.25em 2rem;
}

/* Post Terms
--------------------------------------------- */

/* コアの typography.fontSize サポートが付ける .has-*-font-size は
   ラッパー(このdiv)に乗るため、既定値もここで指定して子のaに継承させる。
   ブロックインスペクタの「角丸」も同じくラッパーに当たるが、
   ラッパー自体には背景がなくバッジごとに背景を持たせる構造上、
   角丸の指定は見た目に反映されない(このテーマの既知の制約)。 */
.wp-block-post-terms.is-style-badge {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--wp--preset--font-size--x-small);
    gap: var(--wp--preset--spacing--xx-small);
}

/* 区切り文字はバッジ間の余白が担うため隠す */
.wp-block-post-terms.is-style-badge .wp-block-post-terms__separator {
    display: none;
}

.wp-block-post-terms.is-style-badge a {
    padding: var(--wp--custom--spacing--badge);
    border-radius: var(--wp--custom--border-radius--small);
    background-color: var(--wp--preset--color--neutral);
    color: inherit;
    line-height: var(--wp--custom--line-height--one);
    text-decoration: none;
}

.wp-block-post-terms.is-style-badge a:hover,
.wp-block-post-terms.is-style-badge a:focus {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

/* カテゴリと同じバッジで出るタグ側に # を前置して種別を区別する */
.wp-block-post-terms.taxonomy-post_tag.is-style-badge a::before {
    content: "#";
}

/* 代替テキスト構文に対応していれば、リンク名が「#タグ名」と読み上げられないよう
   代替テキストを空にする。未対応ブラウザは上の宣言のまま # を表示する
   (代替テキスト付きの宣言は、未対応だと宣言ごと無効になるため分けている)。 */
@supports (content: "x" / "") {
    .wp-block-post-terms.taxonomy-post_tag.is-style-badge a::before {
        content: "#" / "";
    }
}

/* Preformatted
--------------------------------------------- */

.wp-block-preformatted {
    overflow-wrap: normal;
    overflow-x: scroll;
    white-space: pre;
}

/* Pullquote
--------------------------------------------- */

.wp-block-pullquote p:last-of-type {
    margin-bottom: 0;
}

/* Query Pagination
--------------------------------------------- */

/* core/query-pagination-previous・core/query-pagination-nextはborder/spacing/textColorの
   ブロック属性サポートが無く、hover表現もJSON属性では不可能なためCSSで完結させる。
   className:"wp-element-button"を付与し、border-radius等はtheme.jsonのグローバルボタン設定
   (styles.elements.button)に自動追従させる。あえて変える背景色・文字色・サイズのみ上書きする。

   flex配置(両端揃え・折り返し・gap)はコアのレイアウトサポートに任せる。パターン側の
   query-paginationに layout.justifyContent: "space-between" を持たせることで
   `.is-content-justification-space-between` が付き、1ページ目(nextのみ)でも
   コアの `> .wp-block-query-pagination-next:last-of-type { margin-inline-start: auto }`
   が効いて右寄せになる。gapは theme.json の styles.blocks.core/query-pagination.spacing.blockGap。
   ここでdisplay:flexを再指定すると、そのコアのルールと二重管理になるので置かないこと。 */
.wp-block-query-pagination {
    margin-top: var(--wp--preset--spacing--small-fluid);
}

/* ゴーストボタン: 背景は透かして枠線だけで輪郭を示す。塗りボタンより主張を
   抑えつつ、テキストリンクよりクリッカブルエリアを広く取る。背景色を持たせると
   ページ背景(base)と同色になって輪郭が消えるため、透明のまま枠線で示す。
   枠線の指定は is-style-outline のボタンと揃えている。 */
.wp-block-query-pagination > .wp-block-query-pagination-previous,
.wp-block-query-pagination > .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid;
    border-color: currentColor;
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--small);
    padding: var(--wp--custom--spacing--pagination-button);
    text-decoration: none;
}

.wp-block-query-pagination > .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination > .wp-block-query-pagination-previous:focus,
.wp-block-query-pagination > .wp-block-query-pagination-next:hover,
.wp-block-query-pagination > .wp-block-query-pagination-next:focus {
    background-color: var(--wp--preset--color--accent-light);
}

@media (max-width: 599px) {
    .wp-block-query-pagination > .wp-block-query-pagination-previous,
    .wp-block-query-pagination > .wp-block-query-pagination-next {
        padding: var(--wp--custom--spacing--pagination-button-mobile);
        font-size: var(--wp--preset--font-size--x-small);
    }
}

/* Quote
--------------------------------------------- */

.wp-block-quote p:last-of-type {
    margin-bottom: 0;
}

/* Search
--------------------------------------------- */

/* 「検索」が1文字ずつ縦に折り返され、2行分になったボタンの高さへ
   align-items:stretch で入力欄まで引き伸ばされていた。
   下の Forms の `input, …, .wp-block-search__input { width: 100% }` が、
   コアの `.wp-block-search__inside-wrapper`(display:flex / flex-wrap:nowrap)
   では入力欄のフレックス基準幅として効き、行の基準幅がコンテナを超える。
   超過分は flex-shrink で配分されるため、ボタンを縮まないようにして
   入力欄側だけに吸わせる(入力欄はコアの min-width:3rem で床止めされる)。
   **この flex-shrink を外すと「検索」の縦書きが再発する。** 入力欄に
   width:auto を足す形では直らない(Forms の宣言と同じ詳細度(0,1,0)で、
   ソース順が後のあちらが勝つ)。

   上下paddingは入力欄と同じ 0.5em に揃える。theme.json の
   styles.elements.button は上下1rem・左右2remで入力欄より一段大きく、
   折り返しを止めるだけでは高さが揃わない。`em` は入力欄の `0.5em` と同じく
   要素自身のfont-sizeに追従させるためで、同値の xx-small(0.5rem) に寄せると
   偶然の一致を結合することになり、文字サイズを変えたとき高さが揃わなくなる。
   行間は下の `:where(.wp-block-search__button)` で本文の値を継承させており、
   font-size・上下padding・枠幅も入力欄と同じなので、ボタンと入力欄は
   同じ高さになる。

   詳細度: theme.json のボタン指定は `:root :where(...)` で (0,1,0) のため、
   ソース順に依存せず勝つよう3クラス(0,3,0)で書く
   (`.wp-block-button.is-style-outline` と同じ理由・同じ手口)。
   theme.json 側のボタンpaddingを変えるときはここも見直すこと。 */
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button {
    flex-shrink: 0;
    padding: 0.5em 1.25em;
}

/* 検索ボタンも <button> 要素で、UAスタイルシートが font と line-height を
   独自に当てて継承を切るため「検索」の書体が本文と食い違う。加えて
   コアの `:where(.wp-block-search__button)` が残す 1px #ccc の枠が、
   primary塗りのボタンに固定グレーの縁として乗り、パレット変更や
   ダークモードに追従しない。
   `:where()` で包んで詳細度を(0,0,0)にしてあるのが要点で、
   `.redrock-contact-form button.wp-element-button` と同じ手口
   (このファイル内で検索)。作者スタイルなのでUAには詳細度に関係なく
   勝ち、同詳細度のコアのボタン枠指定にはソース順(検索ブロックのCSS →
   グローバルスタイル → このファイルの順にheadへ出力される)で勝つ。
   一方でサイトエディタのグローバルスタイル(0,1,0)やブロック単位の
   インライン指定でユーザーが書体・行間・枠色を設定したときには負ける
   ので、GUIでの上書きは妨げない。
   枠は`border:0`ではなく色だけtransparentにしてある。太さ1pxを残す
   ことでボタンの寸法(paddingとの合計)を変えないため。
   このソース順を前提にしているため、コアのCSSがこのファイルより後に
   出力される構成に変わると、グレー枠が再び見えるようになる点に注意。
   なお `.wp-block-search__button.has-icon{line-height:0}` は
   (0,2,0)でこの:where()より詳細度が高く勝つため、アイコンのみの
   ボタンの見た目はここでは変わらない。 */
:where(.wp-block-search__button) {
    font-family: inherit;
    line-height: inherit;
    border-color: transparent;
}

/* Separator
--------------------------------------------- */

.wp-block-separator.is-style-dots:before {
    font-family: inherit;
    font-size: var(--wp--preset--font-size--large);
    letter-spacing: 0.5em;
    padding-left: 0.5em;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 6rem;
}

.wp-block-separator:not(.is-style-dots),
.wp-block-separator.has-background:not(.is-style-dots) {
    border-bottom: 1px solid currentColor;
    border-top: none;
    height: 1px;
}

/* Site Logo
--------------------------------------------- */

.site-header-inner .wp-block-site-logo img {
    height: auto;
    max-height: 60px;
    width: auto;
}

/* Site Title
--------------------------------------------- */

/* サイトタイトルのリンクはブロック自身の文字色を継ぐ。
   コアの `.wp-block-site-title :where(a)` は theme.json が出す
   `:root :where(a:where(:not(.wp-element-button)))` と詳細度が同じ(0,1,0)で、
   グローバルスタイルのほうが後に出力されるためリンク色に上書きされてしまう
   (ナビゲーションはコアが二重クラスで詳細度を確保しているので影響を受けない)。
   詳細度で確実に勝つセレクタで打ち消す。inherit なのでユーザーがブロックに
   設定した文字色はそのまま効く。 */
.wp-block-site-title a:where(:not(.wp-element-button)) {
    color: inherit;
}

/* Social Icons
--------------------------------------------- */

.wp-block-social-links.is-style-outline .wp-block-social-link {
    background-color: transparent;
    border: 1px solid currentColor;
}

/* Spacer
--------------------------------------------- */

.wp-block-spacer + * {
    margin-top: 0 !important;
}

/* Table
--------------------------------------------- */

.wp-block-table.is-style-stripes {
    border-bottom: none;
}

.wp-block-table table {
    border-collapse: collapse;
}

.wp-block-table thead {
    border-bottom: 3px solid var(--wp--preset--color--contrast);
}

.wp-block-table tfoot {
    border-top: 3px solid var(--wp--preset--color--contrast);
}

.wp-block-table td,
.wp-block-table th,
.wp-block-table tr,
.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes tr {
    border: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-table th {
    font-weight: var(--wp--custom--font-weight--regular);
}

.wp-block-table td,
.wp-block-table th {
    padding: 0.25em;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--wp--preset--color--neutral);
}

.redrock-kv-table th {
    width: 8em;
    font-weight: var(--wp--custom--font-weight--black);
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 599px) {
    .redrock-kv-table th {
        width: auto;
        white-space: normal;
    }
}

/* Custom
---------------------------------------------------------------------------- */

/* Forms
--------------------------------------------- */

/* 枠線は contrast そのもの(黒)だと線が強く出すぎるため、45%に薄めた
   グレーにする。45%はライト(#8c8c8c 相当・対 base 3.35:1)とダーク
   (#7e7e7f 相当・対 base 4.35:1)の両方で、WCAG 1.4.11 が UI コンポーネント
   の境界に求める 3:1 を満たす最小の混合率。40%まで薄めるとライトが
   2.85:1 になり割り込むので、これ以上薄くしないこと。
   角丸は theme.json の styles.elements.button と同じ 0.25rem
   (--border-radius--small)。入力欄とボタンで角の丸みを揃えるための指定で、
   同じ値を指す別トークンに差し替えないこと。 */
input,
select,
textarea,
.wp-block-search__input {
    background-color: var(--wp--preset--color--base);
    border: 1px solid
        color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
    border-radius: var(--wp--custom--border-radius--small);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--noto-sans);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--font-weight--regular);
    line-height: var(--wp--custom--line-height--body);
    padding: 0.5em 0.75em;
    width: 100%;
}

input:focus,
textarea:focus {
    background-color: var(--wp--preset--color--neutral);
    outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
    width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
    appearance: none;
    -webkit-appearance: none;
}

::placeholder {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.6;
}

/* Media Queries
----------------------------------------------------------------------------

   ブレークポイントは 600px / 768px / 1200px の3段階に統一する。
   min-width 側はこの値そのまま、max-width 側は 599px / 767px / 1199px を使う。
   (メディアクエリではCSS変数を使えないため、値そのものを揃えることで担保する) */

/* 例外: ここだけ781px。WPコアがカラムを縦積みする閾値
   (block-library/style.css の `@media (max-width: 781px)`)に合わせる必要があり、
   767pxにすると768〜781pxで「縦積みなのに順序が反転しない」帯ができる。 */
@media (max-width: 781px) {
    /* Columns
	--------------------------------------------- */

    .is-style-columns-reverse {
        flex-direction: column-reverse;
    }
}

@media (min-width: 768px) {
    /* Navigation Link
	--------------------------------------------- */

    .wp-block-navigation-item.is-style-outline a {
        border: 1px solid currentColor;
        padding: 0.5em 1.25em;
    }

    /* Pullquote
	--------------------------------------------- */

    .wp-block-pullquote.alignleft,
    .wp-block-pullquote.alignright {
        max-width: 20rem;
    }

    .wp-block-pullquote.alignleft {
        margin-right: 2rem !important;
    }

    .wp-block-pullquote.alignright {
        margin-left: 2rem !important;
    }
}

/* -------------------------------------------------------------------------
 * Utility Classes (Visibility)
 * ------------------------------------------------------------------------- */
.u-hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .u-hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .u-hidden-desktop {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
 * Breadcrumb
 * ------------------------------------------------------------------------- */
/* margin-bottom / font-size は theme.json の styles.blocks["redrock/breadcrumb"]
   へ移設した(サイトエディタの「スタイル → ブロック → パンくずリスト」や
   テンプレート側のブロック属性から変更できるようにするため)。ここに残すと
   global-styles(theme.json由来)より後に出力される style.css が値を
   打ち消してしまい、GUIでの変更が反映されなくなる。color は color-mix() を
   使っており theme.json 側では表現できないためここに残す。

   出力順は global-styles → core-block-supports → style.css の3層である点に
   注意する。真ん中の core-block-supports には、blockGap を持つグループが
   出す `.wp-container-* > * { margin-block-end: 0 }`(詳細度0,1,0)が含まれ、
   これは theme.json 側の `:root :where(.wp-block-redrock-breadcrumb)`
   (同じく0,1,0)に後勝ちする。**パンくずを包むグループに blockGap を
   付けると、ここで指定した下マージンが黙って0になる。**
   templates/single.html の「投稿ヘッダー」グループから blockGap を外して
   いるのはこのため(issue #134)。 */
.breadcrumb {
    color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

/* 上の `ol, ul` / `ol li:where(...)` を打ち消すが、いずれもクラスセレクタより
   詳細度が低いため !important は不要。 */
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb__item:not(:last-child)::after {
    content: "/";
    margin: 0 0.5em;
    opacity: 0.5;
}

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

.breadcrumb__item a:hover {
    text-decoration: underline;
    color: var(--wp--preset--color--primary);
}

.breadcrumb__item span[aria-current="page"] {
    font-weight: var(--wp--custom--font-weight--black);
    color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Layout: Sticky Footer
 *
 * コンテンツが短いページでフッターが画面下部から浮くのを防ぐ。position は
 * 使わない(実装すると通常のドキュメントフローから外れ、他要素との重なりや
 * スクロール計算が壊れやすい)。.wp-site-blocks を縦方向のflexコンテナにし、
 * .site-content(<main>)に flex-grow で余りの高さを吸わせるだけで、通常の
 * フローを保ったまま実現できる。
 *
 * WPコアが `:where(.wp-site-blocks) > * { margin-block-start: 0;
 * margin-block-end: 0; }` を既に当てているため、flexコンテナ化しても
 * ヘッダー・main・フッター間のマージン相殺の扱いは変わらない。
 *
 * dvh を使う理由: コンテンツが画面に収まる短いページではスクロールが
 * 発生せずモバイルのURLバーも畳まれないため、dvh と svh は一致する。vh だと
 * URLバー分だけ過大な高さになり、逆に浮きが残る。直前の 100vh は dvh 未対応
 * ブラウザ(Safari 15.3以前・Chrome 107以前)向けのフォールバック。未対応だと
 * 宣言ごと無効になり、この機能が丸ごと効かなくなるため置いている。
 * ------------------------------------------------------------------------- */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ログイン中は管理バー分だけ<html>が押し下げられる(WPコアが
   wp-includes/css/admin-bar.css の html に --wp-admin--admin-bar--height
   (782px未満では46px、それ以上は32px)を定義し、margin-topで本文を押し下げる)。
   これを引かないと、管理バーの高さぶんページ末尾に余分なスクロールが出る。
   コアの変数をそのまま参照するため、46px/32pxの切り替わりにも自動で
   追従する。 */
.admin-bar .wp-site-blocks {
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* サイドバーレイアウト(下記 Layout: Sidebar Options)では .site-header が
   position: fixed で通常フローから外れるため、このflex化と衝突しない。
   .site-content / .site-footer に付く width: calc(100% - 280px) も、
   flexアイテムの明示幅としてそのまま効く。 */
.site-content {
    flex-grow: 1;
}

/* テーマ同梱の8テンプレートはすべて <main> に site-content を持つが、
   ユーザーがサイトエディタで新規テンプレートを作ると付かないことがある。
   伸びる子が1つも無いと、フッターが浮くどころか min-height ぶんの余白が
   フッターの下に残る(何も起きないのではなく、崩れて見える)。クラス名を
   知らないユーザーが踏む落とし穴なので、<main> そのものも拾っておく。
   両方に当たっても flex-grow: 1 で同値なので競合しない。 */
.wp-site-blocks > main {
    flex-grow: 1;
}

/* -------------------------------------------------------------------------
 * Layout: Sidebar Options (PC 1200px+)
 * ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Sidebar Shared Styles */
    .has-sidebar-left .site-header,
    .has-sidebar-right .site-header {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 280px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1000;
        background-color: var(--wp--preset--color--base);
        border-inline-end: 1px solid
            color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent); /* Left sidebar border */
        /* !important不要。paddingを持つのは header-default パターン内側の
           .wp-block-group.alignfull であって、この <header class="site-header">
           自体には誰もpaddingを指定していない。 */
        padding: var(--wp--custom--spacing--outer);
    }

    .has-sidebar-right .site-header {
        left: auto;
        right: 0;
        border-inline-end: none;
        border-inline-start: 1px solid
            color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);
    }

    /* Force vertical navigation in sidebar
       !important不要。競合するのはWPがレイアウトサポートから生成する
       .wp-container-core-group-is-layout-* と :root :where(.is-layout-flex)
       (いずれも詳細度0,1,0前後)で、このセレクタ(0,3,0)が勝つ。
       .site-header-inner にインラインstyleは付かない(header-default.php参照)。 */
    .has-sidebar-left .site-header .site-header-inner,
    .has-sidebar-right .site-header .site-header-inner {
        flex-direction: column;
        align-items: flex-start;
        /* --spacing--outer は「サイト外周の余白」を表すトークンなので、
           ロゴ⇔ナビ間のgapには流用せずスペーシングプリセットを使う。
           サイドバー内の要素間なので、幅に連動しない固定のsmallを使う。 */
        gap: var(--wp--preset--spacing--small);
        display: flex;
    }

    /* !important不要。core/navigationはflex-directionを
       `.wp-block-navigation__container{flex-direction:var(--navigation-layout-direction,initial)}`
       (0,1,0)で当てており、blockGapもインラインstyleにはならない
       (wp_apply_spacing_support がインライン化するのはpadding/marginのみ。
       gapは .wp-container-core-navigation-is-layout-* = 0,1,0)。
       このセレクタ(0,3,0)が勝つ。 */
    .has-sidebar-left .site-header .wp-block-navigation,
    .has-sidebar-right .site-header .wp-block-navigation {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .has-sidebar-left .site-header .wp-block-navigation__container,
    .has-sidebar-right .site-header .wp-block-navigation__container {
        flex-direction: column;
        gap: var(--wp--preset--spacing--xx-small);
        align-items: flex-start;
    }

    /* Main Content Adjustment */
    .has-sidebar-left .site-content,
    .has-sidebar-left .site-footer {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
    }

    .has-sidebar-right .site-content,
    .has-sidebar-right .site-footer {
        margin-right: 280px !important;
        margin-left: 0 !important;
        width: calc(100% - 280px) !important;
    }
}

/* -------------------------------------------------------------------------
 * Layout: Mobile Navigation Options
 *
 * ハンバーガーボタンを画面の四隅にフローティング配置する独自機能。
 *
 * 表示/非表示の判断はコアに委ねること。コアはナビゲーションブロックの
 * overlayMenu設定に従い、`mobile`(既定)なら600px未満、`always`ならすべての
 * 画面幅でボタンを表示する。テーマは位置と見た目だけを与え、displayには
 * 触れない。ボタンが隠れている間はコアがdisplay:noneにするため、位置指定が
 * 残っていても無害。
 *
 * かつてテーマは`@media (max-width: 1199px)`と`display: flex !important`で
 * 600〜1199pxでもフローティング表示にしていたが、コアが600px以上で閉じた
 * オーバーレイに`position:relative; width:100%`を与えるため、不可視の
 * オーバーレイが幅100%の行としてヘッダーのフレックス内に残り、ヘッダーの
 * 高さを押し広げていた(実測で48px、mainとfooterが同じだけ下がる)。開閉の
 * たびに文書全体の高さが変わり、スクロール位置の補正を誘発していた。
 * この幅でフローティングに戻したい場合、コアのoverlayMenuには「タブレット
 * 以下」に相当する選択肢がなく、`always`はPCサイドバー機能
 * (`.has-sidebar-*`)のナビまで消してしまうため代替にならない。復活させる
 * にはテーマ側の作り込みが要る。
 *
 * `.site-header` にスコープすること。セレクタの起点がbodyクラスなので、
 * 限定しないと本文中や他のテンプレートパートに置かれたナビゲーション
 * ブロックの開閉ボタンまで画面隅に固定され、重なって押せなくなる。
 * ------------------------------------------------------------------------- */
.has-mobile-nav-bottom-left
    .site-header
    .wp-block-navigation__responsive-container-open,
.has-mobile-nav-bottom-right
    .site-header
    .wp-block-navigation__responsive-container-open {
    position: fixed;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    box-shadow: 0 10px 30px
        color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
    padding: 0;
    border: none;
    z-index: 9999;
}

.has-mobile-nav-bottom-right
    .site-header
    .wp-block-navigation__responsive-container-open {
    bottom: 30px;
    right: 30px;
}

.has-mobile-nav-bottom-left
    .site-header
    .wp-block-navigation__responsive-container-open {
    bottom: 30px;
    left: 30px;
}

/* Top variations */
.has-mobile-nav-top-left
    .site-header
    .wp-block-navigation__responsive-container-open,
.has-mobile-nav-top-right
    .site-header
    .wp-block-navigation__responsive-container-open {
    position: fixed;
    z-index: 9999;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px
        color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
    padding: 0;
    border: none;
}

.has-mobile-nav-top-left
    .site-header
    .wp-block-navigation__responsive-container-open {
    top: 20px;
    left: 20px;
}

.has-mobile-nav-top-right
    .site-header
    .wp-block-navigation__responsive-container-open {
    top: 20px;
    right: 20px;
}

/* -------------------------------------------------------------------------
 * Floating Button Label
 *
 * アイコンの下に「MENU」を添える。コアのナビゲーションブロックは`hasIcon`で
 * 「SVGアイコン」か「Menuというテキスト」かの二択しか出さないため、両方を
 * 見せるにはテーマ側で足すしかない。
 *
 * `:has(svg)`で限定するのは、エディタで`hasIcon`をオフにするとボタンの中身
 * 自体が「Menu」テキストになり、そこへ足すと文字が二重になるため。:has()を
 * 解さないブラウザではこのルールごと無効になり、アイコンだけの表示に戻る。
 *
 * ボタンの読み上げ名はコアが付ける`aria-label`のままで、この疑似要素は名前を
 * 変えない(二重読み上げは起きない)。表示上の「MENU」が読み上げ名に含まれない
 * ことは承知の上での判断。含めるにはPHP側で`aria-label`を差し替える必要があり、
 * コアのマークアップに手を入れる範囲が広がるため見送っている。
 *
 * gapとSVGの寸法を生の値で書いているのは、design-tokensスキルが
 * 「フローティングボタンの寸法・配置」をトークン化の対象外としているため。
 * ------------------------------------------------------------------------- */
.has-mobile-nav-bottom-left
    .site-header
    .wp-block-navigation__responsive-container-open,
.has-mobile-nav-bottom-right
    .site-header
    .wp-block-navigation__responsive-container-open,
.has-mobile-nav-top-left
    .site-header
    .wp-block-navigation__responsive-container-open,
.has-mobile-nav-top-right
    .site-header
    .wp-block-navigation__responsive-container-open {
    flex-direction: column;
    gap: 2px;
}

.has-mobile-nav-bottom-left
    .site-header
    .wp-block-navigation__responsive-container-open:has(svg)::after,
.has-mobile-nav-bottom-right
    .site-header
    .wp-block-navigation__responsive-container-open:has(svg)::after,
.has-mobile-nav-top-left
    .site-header
    .wp-block-navigation__responsive-container-open:has(svg)::after,
.has-mobile-nav-top-right
    .site-header
    .wp-block-navigation__responsive-container-open:has(svg)::after {
    content: "MENU";
    font-size: var(--wp--preset--font-size--x-small);
    line-height: var(--wp--custom--line-height--one);
}

.has-mobile-nav-bottom-left
    .site-header
    .wp-block-navigation__responsive-container-open
    svg,
.has-mobile-nav-bottom-right
    .site-header
    .wp-block-navigation__responsive-container-open
    svg {
    width: 22px;
    height: 22px;
}

.has-mobile-nav-top-left
    .site-header
    .wp-block-navigation__responsive-container-open
    svg,
.has-mobile-nav-top-right
    .site-header
    .wp-block-navigation__responsive-container-open
    svg {
    width: 20px;
    height: 20px;
}

/* -------------------------------------------------------------------------
 * Mobile Menu Animation (Fade & Slide)
 *
 * 開いた状態にだけanimationを当てる。transitionにしてはならない。閉じた
 * 状態にもスタイルを持たせる必要が生じ、そのためにdisplayを強制することに
 * なって上のレイアウト崩れを再導入する。animationならコアのdisplay制御に
 * 一切触れずに済む。
 *
 * 閉じるときのアニメーションは意図的に持たない。コアが即座にdisplay:noneに
 * するため、CSSだけでフェードアウトさせる手段がない(transitionで実現しようと
 * すると上記の罠に戻る)。
 *
 * コアも同じセレクタに0.1sのフェードインを持つ。クラスを重ねて特異度を
 * (0,3,0)に上げ、CSS結合系プラグインが読み込み順を入れ替えても勝つようにする。
 *
 * 終了状態のtransformはtranslateY(0)ではなくnoneにする。forwardsで恒久的に
 * 残るため、transformがあるとcontaining blockを作ってしまい、オーバーレイ内の
 * position:fixed要素(カスタムオーバーレイのテンプレートパート等)を閉じ込める。
 * ------------------------------------------------------------------------- */
@keyframes redrock-overlay-menu-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
        animation: redrock-overlay-menu-in 0.3s ease-out forwards;
    }
}

/* -------------------------------------------------------------------------
 * Access: Map Embed (responsive iframe wrapper)
 * ------------------------------------------------------------------------- */
.redrock-map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.redrock-map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -------------------------------------------------------------------------
 * Logo Box (fixed-size wrapper for partner / sponsor logos)
 * ------------------------------------------------------------------------- */
.redrock-logo-box {
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.redrock-logo-box .wp-block-image {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redrock-logo-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* -------------------------------------------------------------------------
 * News & Event styles
 * ------------------------------------------------------------------------- */

/* News List: Title Truncate */
.redrock-news-title-truncate {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* News List: Date */
.redrock-news-date {
    color: color-mix(in srgb, currentColor 65%, transparent);
    min-width: var(--wp--custom--size--news-date);
    white-space: nowrap;
}

/* News List: タイトルのリンク色・hoverは theme.json の styles.elements.link に任せる。
   かつては color: inherit で本文色に寄せていたが、これはグローバルスタイルに
   リンク色が無かったことへの対症療法だった(issue #93)。 */

/* News List: allow inner row to shrink below content min-width */
.redrock-news-row.wp-block-group {
    min-width: 0;
}

/* News List: タイトル+重要バッジのグループ(inline系パターン)
   min-width: 0 — 行の flex アイテムとして内容幅以下に縮めるため。
   これが無いと nowrap のタイトル幅でグループが止まり、省略記号が出ない。
   max-width: 100% — 599px以下で行を縦積み(align-items: flex-start)にしたとき、
   グループの幅が nowrap のタイトル全長になり行からはみ出すのを防ぐ。 */
.redrock-news-title-group.wp-block-group {
    min-width: 0;
    max-width: 100%;
}

/* News List: stack date and title on mobile */
@media (max-width: 599px) {
    .redrock-news-row.wp-block-group {
        flex-direction: column;
        /* stretch だと子が行の全幅に伸びる。子が selfStretch:"fill" の
           タイトルを含むグループ(例: タイトル+重要バッジ)の場合、伸びた分の
           余白をタイトルが flex-grow で吸い、後ろのバッジが右端へ飛ぶ。
           flex-start なら子は内容幅(fit-content)に収まり、余白自体が生まれない。
           日付・タイトルはどちらも左寄せテキストで、長いタイトルの省略
           (.redrock-news-title-truncate)はコンテナ幅で効くため見た目は変わらない。 */
        align-items: flex-start;
    }
}

/* News List: Thumbnail */
.redrock-news-thumb {
    width: var(--wp--custom--size--news-thumb);
    height: var(--wp--custom--size--news-thumb);
    overflow: hidden;
}

.redrock-news-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.redrock-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* News Important Badge */
.redrock-news-badge {
    display: inline-block;
    /* nowrapのフレックス行に置かれても「重要」が1文字幅に潰れないようにする
       (404の検索ボタンと同じ機序)。 */
    flex-shrink: 0;
    padding: var(--wp--custom--spacing--badge);
    border-radius: var(--wp--custom--border-radius--small);
    background-color: var(--wp--preset--color--primary);
    /* primary は base に対してコントラストを確保して導出されるため、
       文字色を base にすることでライト/ダーク双方で可読性が保たれる。
       ライトモードでは base が #ffffff のため従来の白文字と等価。 */
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: var(--wp--custom--font-weight--black);
    line-height: var(--wp--custom--line-height--one);
    margin-right: var(--wp--preset--spacing--xx-small);
    vertical-align: middle;
}

/* Event Meta Table */
.redrock-event-meta {
    margin: var(--wp--preset--spacing--medium-fluid) 0;
    /* 元は24px。small-fluid(clamp(1rem,4vw,2rem))も固定のsmall(2rem)も広い画面で
       36pxになり箱の内側余白としては過大なため、x-small(18px)に寄せている。 */
    padding: var(--wp--preset--spacing--x-small);
    background-color: var(--wp--preset--color--neutral);
    border: 1px solid
        color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
    border-radius: var(--wp--custom--border-radius--medium);
}

.redrock-event-meta-title {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--x-small);
    font-size: var(--wp--preset--font-size--large);
    font-weight: var(--wp--custom--font-weight--black);
}

.redrock-event-meta-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.redrock-event-meta-table th,
.redrock-event-meta-table td {
    padding: var(--wp--custom--spacing--table-cell);
    border-bottom: 1px solid
        color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
    text-align: left;
}

.redrock-event-meta-table tr:last-child th,
.redrock-event-meta-table tr:last-child td {
    border-bottom: none;
}

.redrock-event-meta-table th {
    width: 150px;
    font-weight: var(--wp--custom--font-weight--black);
    color: var(--wp--preset--color--contrast);
    background-color: transparent;
}

.redrock-event-meta-table td {
    color: var(--wp--preset--color--secondary);
}

/* footer-reverse: auto contrast text color against primary background */
.is-footer-reverse,
.is-footer-reverse a {
    color: oklch(
        from var(--wp--preset--color--primary)
            clamp(0, (0.623 - l) * infinity, 1) 0 h
    );
}

@media (max-width: 599px) {
    .redrock-event-meta-table th,
    .redrock-event-meta-table td {
        display: block;
        width: 100%;
        padding: var(--wp--preset--spacing--xx-small) 0;
    }
    .redrock-event-meta-table th {
        border-bottom: none;
        font-size: var(--wp--preset--font-size--small);
        color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
    }
    .redrock-event-meta-table td {
        padding-bottom: var(--wp--preset--spacing--x-small);
    }
}

/* -------------------------------------------------------------------------
 * Contact Form
 *
 * inc/contact-form.php が出力する自前フォーム。
 *
 * 送信ボタンには色・角丸・パディングを一切書かない。マークアップ側で
 * .wp-element-button を付け、theme.json の styles.elements.button を
 * そのまま受けている。ここで上書きするとサイトエディタでボタンの見た目を
 * 変えても送信ボタンだけ取り残される。
 *
 * 項目のラベルは `for` の有無で見分けている。PHP 側はチェックボックス項目に
 * 限り、項目ラベル(for あり)の下にチェックボックスを包む label(for なし)を
 * もう1枚出すため、この2つを別物として扱う必要がある。
 * ------------------------------------------------------------------------- */
.redrock-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--x-small);
}

/* PHP 側は各項目を <p> で包むため、段落マージンが gap と二重に効く。
   マージンを落とし、間隔は gap だけで決める。ハニーポットの <p> は
   position:absolute でフレックスの流れから外れるため gap を消費しない。 */
.redrock-contact-form > p {
    margin: 0;
}

/* 送信ボタンの前だけ一段空ける。上の `.redrock-contact-form > p`(0,1,1)に
   勝つ必要があるので、祖先クラス込みで書いてクラス2つ(0,2,0)にする
   (結合子そのものは詳細度に寄与しないので、`>` を子孫結合子に変えても
   詳細度は変わらない)。 */
.redrock-contact-form > .redrock-contact-form-actions {
    margin-top: var(--wp--preset--spacing--xx-small);
}

/* 送信ボタンだけ <button> 要素で、テーマの他のボタンはすべて <a> である。
   フォーム要素は UA スタイルシートが font と border を独自に当てて継承を
   切るため、theme.json の styles.elements.button が持たない項目
   (font-family / line-height / border / cursor)が <a> のボタンと食い違う。
   ここで UA 既定だけを打ち消す。
   セレクタ全体を :where() で包み、詳細度を(0,0,0)にしてあるのが要点。
   作者スタイルは詳細度に関係なく UA スタイルより優先されるので UA には
   勝ち、一方でユーザーがサイトエディタでボタンに書体・行間・ボーダーを
   設定したとき(グローバルスタイルは0,1,0で出る)には負ける。送信ボタンだけ
   取り残されない。 */
:where(.redrock-contact-form button.wp-element-button) {
    font-family: inherit;
    line-height: inherit;
    border: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.redrock-contact-form-field > label[for] {
    display: block;
    margin-bottom: var(--wp--preset--spacing--xx-small);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--font-weight--black);
    line-height: var(--wp--custom--line-height--medium);
}

.redrock-contact-form-field .required {
    color: var(--wp--preset--color--error);
}

/* チェックボックスを包む label(for なし)。テキストが折り返しても
   チェックボックスの位置がぶら下がりで揃うようにフレックスにする。 */
.redrock-contact-form-field > label:not([for]) {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--xx-small);
    line-height: var(--wp--custom--line-height--body);
}

.redrock-contact-form-field > label:not([for]) input[type="checkbox"] {
    flex: none;
    /* テキスト1行目の中央にチェックボックスを合わせる。em はラベル自身の
       文字サイズ基準で、サイトエディタから変える対象ではない。 */
    margin-top: calc((var(--wp--custom--line-height--body) - 1) * 0.5em);
}

/* 行数指定のない <textarea> は既定2行で窮屈に見えるため下限を与える。
   em は textarea 自身の文字サイズ基準。 */
.redrock-contact-form textarea {
    min-height: 8em;
    resize: vertical;
}

/* エラーサマリー(フォーム先頭)。
 *
 * 本文の色は error ではなく contrast にする。背景に error を8%重ねている
 * ため、赤字にすると「赤 vs 赤8%ティント」というコントラストになり、
 * error 単体が base に対して確保している4.5:1が成立しない。実測すると
 * ダークモードは全ブランドで4.18〜4.26、ライトも高彩度・高明度の
 * ブランド(#ffcc00 等)で4.16まで落ちる。base と contrast のペアなら
 * 同じティントの上でも15.6〜18.9あるので、赤は枠線とティントで示し、
 * 読ませる文字は contrast に任せる。
 * 項目ごとのエラー(下)と必須マークは base の直上に出るので赤のままでよい。 */
.redrock-contact-form-error-summary {
    padding: var(--wp--preset--spacing--x-small);
    border: 1px solid var(--wp--preset--color--error);
    border-radius: var(--wp--custom--border-radius--medium);
    background-color: color-mix(
        in srgb,
        var(--wp--preset--color--error) 8%,
        transparent
    );
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--font-weight--black);
}

.redrock-contact-form-error-summary p {
    margin: 0;
}

.redrock-contact-form-error-summary p + p {
    margin-top: var(--wp--preset--spacing--xx-small);
}

/* 項目ごとのエラー。PHP 側はサマリーの中(nonce・CAPTCHA)では <p>、
   項目内では <span> で同じクラスを出すため display を明示する。
   サマリー内での色は、すぐ下の
   `.redrock-contact-form-error-summary .redrock-contact-form-field-error`
   が contrast に上書きする。
   なお項目のラッパーは `redrock-contact-form-field-{$key}` という命名なので、
   キー名 `error` の項目を足すとこのクラスと衝突する。スキーマは
   inc/contact-form.php の固定配列で閉じているため現状は起こらないが、
   項目を追加するときは `error` を避けること。 */
.redrock-contact-form-field-error {
    display: block;
    margin-top: var(--wp--preset--spacing--xx-small);
    color: var(--wp--preset--color--error);
    font-size: var(--wp--preset--font-size--small);
}

/* サマリーの中に入る nonce / CAPTCHA のメッセージは、上の赤を打ち消して
   contrast を継がせる。サマリーは error を8%重ねた背景なので、ここだけ
   赤字にするとコントラスト不足がそのまま再発する。
   詳細度で勝つが、降順にすると後で崩れるため必ず上のルールより後に置く。 */
.redrock-contact-form-error-summary .redrock-contact-form-field-error {
    color: inherit;
}

/* エラーのある項目は入力欄の枠も色を変える。汎用フォーム指定の
   `input, select, textarea`(0,0,1)より詳細度が高いので !important は不要。 */
.redrock-contact-form-field:has(.redrock-contact-form-field-error) input,
.redrock-contact-form-field:has(.redrock-contact-form-field-error) select,
.redrock-contact-form-field:has(.redrock-contact-form-field-error) textarea {
    border-color: var(--wp--preset--color--error);
}

/* 上の汎用フォーム指定にある `input:focus { outline: none }` を、
   このフォームの中だけ打ち消してキーボード操作の現在地を見えるようにする。
   :focus-visible なのでマウス操作ではリングが出ない。
   線幅とオフセットはサイトエディタから変える対象ではないため生の値、
   色はパレット変更に追従させるためトークン参照にする。 */
.redrock-contact-form :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* 送信完了メッセージ(インライン完了モード)。 */
.redrock-contact-form-complete {
    padding: var(--wp--preset--spacing--x-small);
    background-color: var(--wp--preset--color--neutral);
    border: 1px solid
        color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
    border-radius: var(--wp--custom--border-radius--medium);
}

.redrock-contact-form-complete p {
    margin: 0;
}