/*
Theme Name: Osteria IL Libro d'Oro
Theme URI: https://osteria-librodoro.com/
Description: 大阪・堺筋本町のクラシックイタリアン「Osteria IL Libro d'Oro」公式サイト用テーマ。TOP / ABOUT / MENU / INFO・ACCESS / RESERVE の5ページ構成。予約ページはショートコード [booking_package id=1] を本文に埋め込む想定。
Author: Claude Design
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: osteria-librodoro
*/

:root{
  --bg-dark: oklch(21% 0.03 45);
  --bg-dark2: oklch(15% 0.025 45);
  --bg-cream: oklch(96% 0.012 75);
  --bg-cream2: oklch(93% 0.014 68);
  --text-cream: oklch(93% 0.02 75);
  --text-dark: oklch(24% 0.02 45);
  --text-muted: oklch(45% 0.02 45);
  --gold: oklch(66% 0.10 75);
  --gold-deep: oklch(50% 0.09 70);
  --wine: oklch(40% 0.12 25);
  --wine-deep: oklch(29% 0.10 25);
  --hairline: oklch(66% 0.10 75 / 0.35);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: 'Zen Old Mincho', 'Noto Serif JP', serif;
  background: var(--bg-cream);
  color: var(--text-dark);
  letter-spacing: .02em;
  position: relative;
  overflow-x: hidden;
}
img{ max-width: 100%; }
a{ color: var(--gold-deep); }
a:hover{ color: var(--wine); }

/* ---- Hero crossfade ---- */
@keyframes scrollcue { 0%,100% { transform: translateX(-50%) translateY(0); opacity:.9; } 50% { transform: translateX(-50%) translateY(8px); opacity:.4; } }
@keyframes heroFade1 { 0%,28%,100% { opacity:1; } 33%,95% { opacity:0; } }
@keyframes heroFade2 { 0%,28%,66%,100% { opacity:0; } 33%,61% { opacity:1; } }
@keyframes heroFade3 { 0%,61%,100% { opacity:0; } 66%,95% { opacity:1; } }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-slide.s1 { animation: heroFade1 18s ease-in-out infinite; }
.hero-slide.s2 { animation: heroFade2 18s ease-in-out infinite; }
.hero-slide.s3 { animation: heroFade3 18s ease-in-out infinite; }

/* ---- Grids ---- */
.scenes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,32px); }
@media (max-width:1100px) { .scenes-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .scenes-grid { grid-template-columns:1fr; } }

.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 32px); }
@media (max-width: 640px) { .voices-grid { grid-template-columns: 1fr; } }

.seat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,40px); }
@media (max-width: 900px) { .seat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .seat-grid { grid-template-columns: 1fr; } }

/* ---- Menu dish rows: mobile wrap ---- */
@media (max-width: 640px) {
  .dish-row { flex-wrap: wrap; border-bottom: 1px dotted var(--hairline); padding-bottom: 10px; }
  .dish-row .dish-dots { display: none; }
  .dish-row .dish-name { flex: 1 1 100% !important; }
  .dish-row .dish-price { margin-left: auto !important; }
}

.scroll-cue-label { text-indent: .25em; }
@media (max-width: 640px) {
  .hero-eyebrow { letter-spacing: .14em !important; font-size: 11.5px !important; line-height: 1.7; }
}

/* ---- Responsive line breaks ---- */
.br-mobile { display: none; }
@media (max-width: 640px) { .br-mobile { display: inline; } .br-pc { display: none; } }

/* ---- Header / Nav ---- */
.site-header{
  position:fixed; top:0; left:0; right:0; height:clamp(64px,8vw,80px); z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(20px,5vw,56px);
  background:oklch(21% 0.03 45 / 0.82); backdrop-filter:blur(8px);
  border-bottom:1px solid oklch(66% 0.10 75 / 0.18);
}
.menu-toggle{ width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:none; cursor:pointer; padding:0; }
.menu-toggle span{ width:22px; height:2px; background:var(--gold); border-radius:2px; display:block; transition:transform .3s ease, opacity .3s ease; }
body.nav-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
body.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{ position:fixed; inset:0; z-index:100; background:oklch(0% 0 0 / 0.5); opacity:0; pointer-events:none; transition:opacity .35s ease; }
body.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }

.nav-drawer{ position:fixed; top:0; right:0; height:100vh; width:clamp(280px,80vw,360px); background:var(--bg-dark); border-left:1px solid var(--hairline); z-index:101; padding:clamp(24px,5vw,40px); box-sizing:border-box; overflow-y:auto; transform:translateX(100%); transition:transform .35s ease; }
body.nav-open .nav-drawer{ transform:translateX(0); }

.floating-actions{ position:fixed; bottom:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); z-index:40; display:flex; align-items:stretch; gap:10px;
  opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
body.scrolled .floating-actions{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* ---- Footer ---- */
@media (max-width: 640px) { .site-footer { padding-bottom: 96px !important; } }