/* ============================================================
   chrome.css — 共通ヘッダー/フッター（全ページで読み込み）
   oishiistory（宅食メディア）向け。変数は tokens.css。
   ============================================================ */
body { margin: 0; }
.site-header *, .site-footer * { box-sizing: border-box; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { background: var(--c-white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; }

/* 上部 util バー（細い帯・グラデ） */
.util { background: var(--grad-brand); }
.util__inner { max-width: 1140px; margin: 0 auto; padding: 0.35rem 1.5rem; }
.util__text { display: block; text-align: center; color: #fff; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; }

.site-header__inner { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }

/* ロゴ（テキスト＝グラデ／画像＝site-logo__img） */
.site-logo { font-family: var(--font-deco); font-size: 1.5rem; font-weight: 800; line-height: 1; text-decoration: none; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; }
.site-logo__img { max-height: 40px; width: auto; display: block; }

/* グローバルナビ */
.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav ul, .site-nav .site-nav__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; }
.site-nav a { display: block; font-family: var(--font-main); font-size: 0.85rem; font-weight: 500; color: var(--c-text-muted); padding: 0.45em 0.95em; border-radius: 2rem; text-decoration: none; transition: background 0.2s, color 0.2s; }
.site-nav a:hover, .site-nav .current-menu-item > a { background: var(--c-main-light); color: var(--c-main); }

/* 検索（JSなし：details/summary トグル） */
.site-search { position: relative; flex: 0 0 auto; }
.site-search__toggle { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: background 0.2s; }
.site-search__toggle::-webkit-details-marker { display: none; }
.site-search__toggle:hover { background: var(--c-main-light); }
.site-search__panel { position: absolute; right: 0; top: calc(100% + 0.6rem); background: var(--c-white); padding: 0.8rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: min(78vw, 300px); z-index: 120; }
.site-search__panel input[type="search"] { width: 100%; padding: 0.55em 0.8em; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 0.85rem; }
.site-search__panel input[type="submit"] { margin-top: 0.5rem; width: 100%; padding: 0.5em; border: none; border-radius: var(--radius-sm); background: var(--c-main); color: #fff; font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.site-search__panel input[type="submit"]:hover { opacity: 0.9; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--c-white); border-top: 3px solid transparent; border-image: var(--grad-brand) 1; margin-top: 3rem; }
.site-footer__inner { max-width: 1140px; margin: 0 auto; padding: 2.8rem 1.5rem 1.8rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }

.site-footer__logo { font-family: var(--font-deco); font-size: 1.35rem; font-weight: 800; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 0.6rem; }
.site-footer__tagline { font-size: 0.8rem; line-height: 1.8; color: var(--c-text-muted); margin: 0; }

.site-footer__heading { font-size: 0.84rem; font-weight: 700; color: var(--c-text); margin: 0 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--c-main-light); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__list a { font-size: 0.82rem; color: var(--c-text-muted); text-decoration: none; transition: color 0.2s; }
.site-footer__list a:hover { color: var(--c-main); }

.site-footer__bar { border-top: 1px solid var(--c-border); }
.site-footer__bar > * { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.site-footer__copy { font-size: 0.74rem; color: var(--c-text-light); margin: 1.2rem auto 0.4rem; text-align: center; }
.site-footer__disclaimer { font-size: 0.7rem; color: var(--c-text-light); line-height: 1.7; margin: 0 auto 1.4rem; text-align: center; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 860px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.site-header__inner { flex-wrap: wrap; padding: 0.6rem 1rem; min-height: 0; gap: 0.6rem; }
	.site-logo { font-size: 1.3rem; }
	.site-nav { order: 3; flex-basis: 100%; }
	.site-nav ul, .site-nav .site-nav__list { justify-content: center; }
	.util__text { font-size: 0.68rem; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
	.site-footer__list { align-items: center; }
	.site-footer__heading { border-bottom: none; padding-bottom: 0; }
}