/*
Theme Name: MJ Theme
Theme URI: http://yourdomain.com
Author: Your Name
Author URI: http://yourdomain.com
Description: Custom theme for a mahjong parlor listing site.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mj-theme
*/

/* =======================
   Design Tokens / Base
   ======================= */
:root{
  --bg:#f3f4f6;
  --fg:#111827;
  --muted:#6b7280;

  --brand:#15803d;       /* ?????? */
  --brand-ink:#0f5132;   /* ??????? */

  --card:#ffffff;
  --card-border:#e5e7eb;

  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,.06);

  --gap:16px;
  --container:1100px;

  --h1:22px;
  --h2:18px;
  --body:15px;
  --small:13px;

  --line:1.6;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height:var(--line);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
a:hover{ opacity:.9; }

.container{ max-width:var(--container); margin:auto; padding:16px; }
.section{ margin:40px 0; }
.pad{ padding:16px; }

.h1{ font-size:var(--h1); font-weight:700; margin:0 0 6px; }
.h2{ font-size:var(--h2); font-weight:600; margin:0 0 8px; }
.muted{ color:var(--muted); }
.divider{ height:1px; background:var(--card-border); margin:12px 0; }

/* =======================
   Components
   ======================= */

/* Card */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Breadcrumb */
.breadcrumb{
  font-size:var(--small);
  color:var(--muted);
  margin:8px 0 12px;
}
.breadcrumb a{
  color:var(--muted);
  text-decoration:none;
}
.breadcrumb a:hover{ text-decoration:underline; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .06s ease, filter .2s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--brand{
  background:var(--brand);
  color:#fff;
}
.btn--brand:hover{ filter:brightness(.95); }

.btn--outline{
  background:#fff;
  color:var(--brand);
  border:1px solid var(--brand);
}

/* Info rows (???????) */
.info-list{ display:grid; gap:12px; }
.info-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:start;
}
.info-key{ font-weight:700; color:#1f2937; }
.info-val{ color:var(--fg); }

/* Horizontal image scroller */
.scroll-x{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:10px 0;
  -webkit-overflow-scrolling:touch;
}
.scroll-x > img{
  flex:0 0 85%;
  scroll-snap-align:start;
  border-radius:12px;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* Google Map responsive wrapper */
.map-wrapper{
  position:relative;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  max-width:100%;
  border-radius:12px;
  border:1px solid var(--card-border);
}
.map-wrapper iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  border-radius:12px;
}

/* Fixed footer action bar */
.fixed-banner{
  position:fixed;
  left:0; bottom:0; width:100%;
  background:rgba(255,255,255,.9);
  border-top:1px solid var(--card-border);
  backdrop-filter:saturate(180%) blur(8px);
  display:flex; gap:10px; justify-content:space-around;
  padding:10px;
  z-index:9999;
}
.fixed-banner a{ flex:1; max-width:240px; }

/* Utilities */
.grid{ display:grid; gap:var(--gap); }
.center{ display:grid; place-items:center; }

/* =======================
   Typography (content)
   ======================= */
main p{ font-size:var(--body); margin:8px 0; }
main ul{ padding-left:1.25rem; margin:8px 0; }
main li{ margin:4px 0; }

/* =======================
   Responsive
   ======================= */
@media (min-width:768px){
  .container{ padding:24px; }
  .scroll-x > img{ flex-basis:65%; }
}

@media (max-width:480px){
  .btn{ padding:10px 12px; }
  .fixed-banner a{ max-width:none; }
}

/* =======================
   Legacy helpers (??)
   ======================= */
/* ???????????????????????? */
.image-scroll-wrapper{ composes: scroll-x; } /* PostCSS?????????? */
.image-scroll-wrapper{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 0; }
.scroll-image img,
.scroll-image{ border-radius:12px; }

/* === Fixed action bar: tune === */
.fixed-banner{
  padding: 8px 12px;               /* ????????? */
  gap: 12px;
}
.fixed-banner .btn{
  height: 48px;                    /* ?????????? */
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                        /* ?????????? */
  flex: 1 1 0;
  max-width: 240px;                /* ?????? */
}
.fixed-banner .btn img{
  width: 20px; height: 20px;       /* ?????????? */
  display: inline-block;
}
@media (max-width:480px){
  .fixed-banner{ gap: 8px; }
  .fixed-banner .btn{ height: 44px; max-width: none; }
  .fixed-banner .btn img{ width: 18px; height: 18px; }
}