<?php
/*
Theme Name: Hamafuku
Theme URI: https://hamafuku.example
Author: Hamafuku
Description: 浜ふく公式サイト（日本語・英語・中国語）。虎河豚と山口の地酒を提供する飲食店の公式テーマ。Claude Designの正式24ページを忠実に再現。
Version: 2.0.0-design-20260821-1702
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hamafuku
*/

/* Intentionally no global box-sizing / CSS reset here: the source design is
   built content-box-first with exact px/clamp() values. A global
   box-sizing:border-box changes every padded box's rendered width and
   silently shifts the fixed header, so we don't add one. */

body { margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; }

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color .3s ease, border-color .3s ease;
  background: transparent; border-bottom: 1px solid transparent;
  --nav-c: #FFFFFF;
}
.site-header.is-scrolled { background: #F5F5F3; border-bottom-color: rgba(15,15,14,.14); --nav-c: #141311; }
body.page-thanks .site-header { --nav-c: #141311; background:#F5F5F3; border-bottom-color: rgba(15,15,14,.14); }

.hf-desktop-nav { display: flex; flex-wrap: nowrap; gap: clamp(18px, 2vw, 28px) !important; }
.hf-desktop-nav > a { white-space: nowrap; }
.hf-hamburger { display: none; }
.hf-mobile-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #F5F5F3; border-bottom: 1px solid rgba(15,15,14,.14); box-shadow: 0 16px 28px rgba(15,15,14,.14); padding: 6px 0; z-index: 60; }
.site-header.nav-open .hf-mobile-nav { display: flex; }

.hf-back-to-top { position: fixed; right: 20px; bottom: 28px; z-index: 65; width: 58px; height: 58px; background: transparent; border: none; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.hf-back-to-top:hover { transform: scale(1.06); }

/* ---- Scroll reveal (data-reveal) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.5s cubic-bezier(.16,.8,.24,1), transform 1.5s cubic-bezier(.16,.8,.24,1); }
.reveal.is-visible { opacity: 1; transform: none; }
/* No-JS / IO-unsupported fallback: never hide content permanently. */
.no-js .reveal, .reveal.no-io { opacity: 1 !important; transform: none !important; }

/* ---- Mobile image-order swap ---- */
[data-mimg] { order: 0; }

/* ---- Footer ---- */
.hf-sticky-bar { display: none; }
.site-footer.has-sticky-bar { padding-bottom: 32px; }

@media (max-width: 900px) {
  /* The menu page's two-column food list collapses before the phone rules. */
  .menu-cols { grid-template-columns: 1fr; }
}

@media (max-width: 1119px) {
  .hf-desktop-nav { display: none; }
  .hf-hamburger { display: flex; }
}
/* Hero image: slow fade + gentle zoom-out on first paint */
@keyframes heroFadeUp { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.hero-fade { animation: heroFadeUp 2.4s cubic-bezier(.16,.8,.24,1) both; }

/* Hero image swap: mobile-specific hero photos (Menu / Sake) */
.hf-hero-mobile { display: none; }
.hf-hero-desktop { display: block; }

/* Footer is centre-aligned on every page, at every width. */
.hf-footer-cols,
.hf-footer-col,
.hf-footer-copyright { text-align: center; }

/* ---- Page-level responsive rules (migrated from each design page's helmet) ---- */
@media (min-width: 820px) {
  .split-text-shift { padding-left: clamp(56px, 7vw, 110px); }
}
/* Breadcrumb sits over the hero image; hidden on the thank-you page. */
.hf-breadcrumb { display: block; }
body.page-thanks .hf-breadcrumb { display: none; }
@media (max-width: 699px) { .hf-breadcrumb { display: none; } }

/* Sections centre their copy on desktop via .hf-center (converted from inline
   styles so the phone override below wins on specificity alone, no !important). */
.hf-center { text-align: center; }

@media (max-width: 700px) {
  /* Phones: all body copy reads left-aligned. */
  .hf-center,
  main p,
  main h1,
  main h2,
  main h3,
  main li { text-align: left; }
  /* The closing RESERVATION block stays centred on phones too. */
  [data-screen-label="RESERVATION"],
  [data-screen-label="RESERVATION"] p,
  [data-screen-label="RESERVATION"] h2,
  [data-screen-label="RESERVATION"] h3,
  [data-screen-label="RESERVATION"] div,
  [data-screen-label="RESERVATION"] a { text-align: center; }
  .hero-vtitle { right: 28px; font-size: 17px; }
  .yamaguchi-img-col { top: 16px; bottom: 16px; }
  .torafugu-title-nowrap { white-space: nowrap; font-size: 14.5px; }
  .drink-grid,
  .seasonal-grid,
  .alacarte-grid { grid-template-columns: 1fr; }
}

@media (max-width: 699px) {
  .hf-footer-cols { text-align: center !important; }
  .hf-footer-col { flex: 0 0 auto !important; text-align: center !important; }
  .hf-footer-copyright { text-align: center !important; }
  .hf-hero-mobile { display: block; }
  .hf-hero-desktop { display: none; }
  .drink-grid, .seasonal-grid, .alacarte-grid { grid-template-columns: 1fr !important; }
  .hf-back-to-top { bottom: 84px; }
  .hf-sticky-bar { display: flex; }
  [data-mimg] { order: 2; }
  .site-footer.has-sticky-bar { padding-bottom: 74px; }
}
body.page-thanks .hf-back-to-top,
body.page-thanks .hf-sticky-bar { display: none !important; }