/* assets/css/custom.css */

/* 落ち着いた和風のニュアンス（最小） */
:root {
    --bg: #fbfaf7;
    --ink: #1b1b1b;
    --muted: #6b6b6b;
    --accent: #4b3f2f;
    --card: #ffffff;
    --border: rgba(0, 0, 0, .08);
    --nav-color: #FFF;
}

html,
/* 背景：料理写真（固定名で差し替え運用） */
body {
    background: url("../img/hero-food.jpg") center / cover no-repeat fixed;
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    position: relative;

    /* 追加：sticky footer用 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 可読性のための暗いオーバーレイ（全体） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    /* 0.45→0.55 */
    z-index: -1;
}

main {
    flex: 1 0 auto;
}


/* 文字やカードの“面”を作る（背景の上に載せる） */
.surface {
    background: rgba(251, 250, 247, 0.329);
    /* 0.92→0.97 */
    border: 1px solid var(--border);
    border-radius: 16px;
}

/* 既存heroを少し整理（任意：残してOK） */
.hero {
    background: linear-gradient(180deg, rgba(75, 63, 47, .10), rgba(75, 63, 47, 0));
    border-radius: 16px;
}

/* ヒーロー面：白ベタ（不透明）で可読性最優先 */
.hero.surface {
    background: #fbfaf7;
    /* 完全な白にしたいなら #fff */
    border: 1px solid var(--border);
    border-radius: 16px;

    /* “ぼかし透過”を無効化 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* 面が背景から浮くように */
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}


.btn-accent {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}


/* フッターも面を作る（読みやすさ優先） */
.footer {
    background: rgba(251, 250, 247, 0.92);
    border-top: 1px solid var(--border);
    color: var(--muted);
    margin-top: auto;
}

a {
    color: var(--accent);
}

a:hover {
    color: #ffc97e;
}

.navbar {
    background: #1b1b1b;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
}

.brand-sub {
    font-size: .85rem;
    color: var(--nav-color);
}

.card-soft {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.footer {
    border-top: 1px solid var(--border);
    color: var(--mute);
    background-color: #1b1b1b;
}

.small-note {
    color: var(--muted);
}

.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: #3a3125;
    --bs-btn-hover-border-color: #3a3125;
    --bs-btn-color: #fff;
}

.btn:hover {
    color: #FFF;
}

.card-img-top {
    height: 180px;
    object-fit: cover;
}

@media (min-width: 992px) {
    .card-img-top {
        height: 200px;
    }
}

/* =========================
   Page Title Bar (TOP以外)
   ========================= */
.page-titlebar {
    width: 100%;
    background: #ffffff98;
    /* 少し透過した白 */
    border-bottom: 1px solid var(--border);
}

.page-titlebar .container {
    padding-top: 20px;
    padding-bottom: 16px;
}

.page-titlebar h1 {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.page-titlebar .subtitle {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.95rem;
}

/* モバイル時の余白調整 */
@media (max-width: 575.98px) {
    .page-titlebar .container {
        padding-top: 16px;
        padding-bottom: 12px;
    }

    .page-titlebar h1 {
        font-size: 1.35rem;
    }
}

/* =========================
   TOP Hero：右下に小さめパネル
   ========================= */

/* TOPだけ、全体暗幕を少し薄める（必要なければ削ってOK） */
body.page-home::before {
    background: rgba(0, 0, 0, 0.48);
}

/* ヒーローを「右下寄せの置き場」にする */
body.page-home .hero-home {
    position: relative;
    overflow: hidden;

    min-height: clamp(360px, 62vh, 680px);

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    /* 右・下の安全余白（スマホの下部UI対策で下を厚めに） */
    padding: clamp(14px, 3vw, 36px);
    padding-bottom: clamp(22px, 6vh, 56px);

    /* 既存の .surface 由来の見た目を引きずらない */
    background: transparent;
}

/* 右下の小さめパネル本体 */
body.page-home .hero-home__panel {
    width: min(490px, 92vw);
    padding: clamp(14px, 2.5vw, 24px);

    text-align: start;
    color: rgba(251, 250, 247, 0.98);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);

    /* “薄い箱”の質感：暗い半透明＋軽いブラー */
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(251, 250, 247, 0.18);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* 暗背景用のアウトラインボタン調整 */
body.page-home .hero-home__btn-outline {
    --bs-btn-color: rgba(251, 250, 247, 0.95);
    --bs-btn-border-color: rgba(251, 250, 247, 0.55);
    --bs-btn-hover-bg: rgba(251, 250, 247, 0.12);
    --bs-btn-hover-border-color: rgba(251, 250, 247, 0.75);
    --bs-btn-active-bg: rgba(251, 250, 247, 0.18);
    --bs-btn-active-border-color: rgba(251, 250, 247, 0.85);
}

body.page-home .hero-home__map {
    color: rgba(251, 250, 247, 0.85);
}

body.page-home .hero-home__map:hover {
    color: rgba(251, 250, 247, 0.98);
}

/* スマホ：パネルを少しだけ詰める */
@media (max-width: 575.98px) {
    body.page-home .hero-home__panel {
        width: min(460px, 92vw);
    }
}

/* =========================
   Menu page: メニュー画像（宴会/料理）
   ========================= */

body[data-page="menu"] .menu-sheet__btn,
body[data-page="menu"] .menu-carousel__btn {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    cursor: zoom-in;
}

body[data-page="menu"] .menu-sheet__img,
body[data-page="menu"] .menu-carousel__img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    /* メニュー文字を潰さない */
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    display: block;
}

/* Carouselの見た目調整（白背景に合うように） */
body[data-page="menu"] .menu-carousel .carousel-indicators {
    margin-bottom: 0;
}

body[data-page="menu"] .menu-carousel .carousel-control-prev,
body[data-page="menu"] .menu-carousel .carousel-control-next {
    width: 12%;
}

body[data-page="menu"] .menu-carousel .carousel-control-prev-icon,
body[data-page="menu"] .menu-carousel .carousel-control-next-icon {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
}

/* モーダル */
body[data-page="menu"] .menu-modal__frame {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.03);
    padding: 12px;
}

body[data-page="menu"] .menu-modal__frame img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}