/* ======================================================
   public_theme.css
   ------------------------------------------------------
   役割：
     フクオカギルド公開一覧ページの
     配色・背景画像・テーマ上書きを管理する。

   テーマ：
     Warm Yellow / Beige

   対象：
     ・全体背景
     ・ページヘッダー
     ・カード配色
     ・ナビ / 検索 / 並び替え
     ・PCテーブル配色
     ・リンク
     ・ツールチップ
     ・フッター背景画像

   注意：
     ・このCSSは必ず最後に読み込む
     ・構造やレイアウトは他CSS側で管理する
====================================================== */


/* ======================================================
   ① テーマ変数
====================================================== */

:root {
    --fg-warm-bg: #fffdf7;
    --fg-warm-bg-soft: #faf5e9;
    --fg-warm-panel: #ffffff;

    --fg-warm-yellow: #f4d35e;
    --fg-warm-yellow-soft: #fff2b8;
    --fg-warm-yellow-pale: #fff8dd;

    --fg-warm-orange: #e9a23b;
    --fg-warm-orange-soft: #f8d59a;

    --fg-warm-border: #e8dfcf;

    --fg-warm-text: #3f392f;
    --fg-warm-text-soft: #766d61;
}


/* ======================================================
   ② 全体背景
====================================================== */

body {
    background:
        linear-gradient(
            180deg,
            #fffdf7 0%,
            #faf5e9 42%,
            #fffdf8 100%
        );

    color: var(--fg-warm-text);
}


/* ======================================================
   ③ 公開ページヘッダー
====================================================== */

.fg-public-page-header {
    position: relative;

    overflow: hidden;

    min-height: 150px;

    padding: 24px 28px;

    border: 1px solid #eadfca;
    border-radius: 16px;

    background-color: #fffdf7;
    background-image:
        url("../imgs/background_main.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    box-shadow:
        0 3px 12px rgba(112, 86, 45, 0.07);
}


/* 白オーバーレイ */
.fg-public-page-header::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255, 253, 247, 0.88) 0%,
            rgba(255, 253, 247, 0.66) 38%,
            rgba(255, 253, 247, 0.16) 72%,
            rgba(255, 253, 247, 0.04) 100%
        );
}


/* 文字を前面へ */
.fg-public-page-header h1,
.fg-public-page-header p {
    position: relative;

    z-index: 2;
}


.fg-public-page-header h1 {
    color: #3f392f;
}

.fg-public-page-header p {
    color: #766d61;
}


/* ======================================================
   ④ スマホ用ヘッダー
====================================================== */

@media (max-width: 768px) {

    .fg-public-page-header {
        min-height: 130px;

        padding: 20px 18px;

        background-position: center;
        background-size: cover;
    }

    .fg-public-page-header::before {
        background:
            linear-gradient(
                90deg,
                rgba(255, 253, 247, 0.84) 0%,
                rgba(255, 253, 247, 0.58) 42%,
                rgba(255, 253, 247, 0.14) 75%,
                rgba(255, 253, 247, 0.04) 100%
            );
    }

}


/* ======================================================
   ⑤ ミニカード
====================================================== */

.fg-mini-card {
    background: #ffffff;

    border-color: #eadfca;

    box-shadow:
        0 2px 8px rgba(112, 86, 45, 0.07);
}

.fg-mini-card-title {
    color: #3f392f;
}

.fg-mini-card-line {
    color: #625a50;
}


/* ======================================================
   ⑥ ミニカード詳細
====================================================== */

.fg-mini-card-details {
    border-top-color: #eee4d3;
}

.fg-mini-card-details summary {
    background: #faf5e9;

    color: #5a5146;
}

.fg-mini-card-details summary:hover {
    background: #fff0bc;
}

.fg-mini-card-details[open] {
    background: #fffaf0;
}

.fg-mini-card-details[open] summary {
    background: #f9e7a7;
}

.fg-mini-card-detail-row dt {
    color: #8a7453;
}

.fg-mini-card-detail-row dd {
    color: #3f392f;
}


/* ======================================================
   ⑦ 戻るボタン・カテゴリ選択
====================================================== */

.fg-public-back-home,
.fg-public-page-jump-select {
    background-color: #ffffff;

    border-color: #e4d8c5;

    color: #453e34;

    box-shadow:
        0 1px 4px rgba(112, 86, 45, 0.06);
}

.fg-public-back-home:hover {
    background: #fff8df;

    border-color: #e0c871;
}

.fg-public-page-jump-select:focus {
    outline:
        3px solid rgba(244, 211, 94, 0.25);

    border-color: #d5ae31;
}


/* ======================================================
   ⑧ 基本 / 詳細 切替
====================================================== */

.fg-public-table-view-tabs {
    background: #f8f1e5;

    border-color: #eadfce;
}

.fg-public-table-view-link {
    color: #62594d;
}

.fg-public-table-view-link:hover {
    background: #fffaf0;
}

.fg-public-table-view-link.is-active {
    background: #f4d35e;

    color: #443819;

    box-shadow:
        0 2px 6px rgba(190, 148, 29, 0.20);
}


/* ======================================================
   ⑨ 検索フォーム
====================================================== */

.fg-public-search-input {
    background: #ffffff;

    color: #3f392f;

    border-color: #e1d6c4;
}

.fg-public-search-input:focus {
    outline:
        3px solid rgba(244, 211, 94, 0.22);

    border-color: #d5ae31;
}

.fg-public-search-button {
    background: #e8ad3f;

    color: #ffffff;
}

.fg-public-search-button:hover {
    background: #d99b2c;
}

.fg-public-search-clear {
    color: #786b58;
}


/* ======================================================
   ⑩ 並び替え
====================================================== */

.fg-public-sort-nav {
    background: #f8f1e5;

    border-color: #e8decd;
}

.fg-public-sort-nav::before {
    color: #887862;
}

.fg-public-sort-link {
    color: #62594d;
}

.fg-public-sort-link:hover {
    background: #fffaf0;
}

.fg-public-sort-link.is-active {
    background: #ffffff;

    color: #5d461b;

    box-shadow:
        0 1px 5px rgba(140, 105, 44, 0.14);
}


/* ======================================================
   ⑪ 件数表示
====================================================== */

.fg-public-result-count {
    color: #897a66;
}


/* ======================================================
   ⑫ PCテーブル外枠
====================================================== */

.fg-public-table-wrap {
    background: #ffffff;

    border-color: #e6dccb;

    box-shadow:
        0 2px 8px rgba(112, 86, 45, 0.05);
}


/* ======================================================
   ⑬ PCテーブルヘッダー
   ------------------------------------------------------
   全ヘッダーを同じベージュで統一する。
====================================================== */

.fg-public-table thead th {
    background: #f5eddf;

    color: #4b4237;

    border-bottom-color: #dfd1bd;
}


/* ======================================================
   ⑭ PC固定ヘッダー
====================================================== */

.fg-public-table th:first-child,
.fg-public-table-basic thead .fg-col-category,
.fg-public-table-basic thead .fg-col-name,
.fg-public-table-care-detail th:first-child,
.fg-public-table-facility-care-detail th:first-child,
.fg-public-table-short-stay-detail th:first-child,
.fg-public-table-medical-detail th:first-child,
.fg-public-table-social-resource-detail th:first-child,
.fg-public-table-jobs-detail th:first-child {
    background: #eee3d1;
}


/* ======================================================
   ⑮ 介護保険サービス曜日ヘッダー
   ------------------------------------------------------
   背景色は他カラムと同じ。
   土曜・日曜の文字色だけ残す。
====================================================== */

.fg-public-table-care-detail
th:nth-child(n+2):nth-child(-n+8) {
    background: #f5eddf;
}


/* ======================================================
   ⑯ 行の交互色
====================================================== */

.fg-public-table tbody tr:nth-child(odd) td {
    background: #ffffff;
}

.fg-public-table tbody tr:nth-child(even) td {
    background: #fffaf1;
}


/* ======================================================
   ⑰ 基本表固定列の交互色
====================================================== */

.fg-public-table-basic
tbody tr:nth-child(odd) .fg-col-category,
.fg-public-table-basic
tbody tr:nth-child(odd) .fg-col-name {
    background: #ffffff;
}

.fg-public-table-basic
tbody tr:nth-child(even) .fg-col-category,
.fg-public-table-basic
tbody tr:nth-child(even) .fg-col-name {
    background: #fffaf1;
}


/* ======================================================
   ⑱ 各詳細表の固定列交互色
====================================================== */

.fg-public-table
tbody tr:nth-child(odd) td:first-child {
    background: #ffffff;
}

.fg-public-table
tbody tr:nth-child(even) td:first-child {
    background: #fffaf1;
}


/* ======================================================
   ⑲ ホバー
====================================================== */

.fg-public-table tbody tr:hover td,
.fg-public-table tbody tr:hover td:first-child,
.fg-public-table-basic
tbody tr:hover .fg-col-category,
.fg-public-table-basic
tbody tr:hover .fg-col-name {
    background: #fff2bf;
}


/* ======================================================
   ⑳ リンク
====================================================== */

.fg-public-table a {
    color: #b56c17;
}

.fg-public-table a:hover {
    color: #8f5110;
}


/* ======================================================
   ㉑ ツールチップ
====================================================== */

.fg-public-table
td.fg-public-tooltip-cell:hover::after {
    background: #51483d;

    border-color: #776a59;

    color: #ffffff;
}


/* ======================================================
   ㉒ 空き状況凡例
====================================================== */

.fg-care-status-legend {
    color: #817565;
}

.fg-care-status-legend strong {
    color: #51483d;
}


/* ======================================================
   ㉓ フッター背景画像
====================================================== */

body::after {
    content: "";

    display: block;

    width: 100%;
    height: 150px;

    margin-top: 28px;

    background-image:
        url("../imgs/background_footer.png");

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;

    pointer-events: none;
}


/* ======================================================
   ㉔ スマホ用フッター
====================================================== */

@media (max-width: 768px) {

    body::after {
        height: 110px;

        margin-top: 20px;

        background-position: center bottom;
        background-size: cover;
    }

}