/*
  Music Base WISE global styles
  This stylesheet defines the look and feel for the Music Base WISE website. A
  dark, sophisticated palette with gold accents is used throughout to
  communicate the premium yet comfortable ambiance of a music bar. Text is kept
  light on dark backgrounds for contrast and legibility. Responsive layout
  helpers ensure the site adapts gracefully across desktops, tablets and
  mobiles. Icons are provided via Font‑Awesome; additional instrument
  illustrations can be added into the images folder and referenced where
  appropriate.
*/

/* Reset margins and paddings for consistency across browsers */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'Noto Sans JP', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0a0a0a;
  color: #e0e0e0;
  line-height: 1.6;
  scroll-behavior: smooth;
}

a {
  color: #d4a762;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.reservation-form {
  margin: 0 auto;
  background-color: #1b1b1b;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Form structure helpers */
.reservation-form .form-group {
  margin-bottom: 0.75rem;
}

.reservation-form label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: #e0e0e0;
}

.reservation-form input,
.reservation-form textarea,
.reservation-form select {
  width: 100%;
  padding: 0.5rem;
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
}

.reservation-form textarea {
  resize: vertical;
}

.reservation-form .submit-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: #d4a762;
  color: #0a0a0a;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.reservation-form .submit-button:hover {
  background-color: #e5c485;
}

/* Form rows for grouping inputs on a single line */
.reservation-form .form-row {
  display: flex;
  gap: 0.5rem;
}

.reservation-form .form-row > div {
  flex: 1;
}

.reservation-form input,
.reservation-form textarea,
.reservation-form select {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.reservation-form label {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  display: block;
}

a:hover {
  color: #e5c485;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: rgba(10, 10, 10, 0.85);
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

header img.logo {
  height: 40px;
  width: auto;
}

header .tagline {
  display: flex;
  flex-direction: column;
  color: #e5c485;
  line-height: 1.2;
}

header .tagline .title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f5f5f5;
}

header .tagline .subtitle {
  font-size: 0.85rem;
  font-weight: 400;
  color: #d4a762;
}

.price-flow {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.price-step {
  text-align: center;
}

.step-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #d4a762;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.price-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.price-card {
  flex: 1 1 260px;
  background: #121212;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 1.2rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.price-card h4 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: .5rem;
}

.price-card .price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #d4a762;
  margin-bottom: .5rem;
}

.price-card .note {
  font-size: .9rem;
  color: #aaa;
  line-height: 1.6;
}

.note.extra {
  color: #888;
  max-width: 800px;
  margin: 1rem auto;
  font-size: 0.95rem;
}


/* ---------- Header base ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10,10,10);
  border-bottom: 1px solid rgba(212,167,98,0.18);
}
.site-header .header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between; /* left / right */
  width:100%;                    /* <— important */
  max-width:940px;              /* keeps a nice max width on large screens */
  margin:0 auto;
  padding:.6rem 1rem;
}
.logo-wrapper{display:flex; align-items:center;}
.logo-img{display:block; width:150px; height:auto;}

/* ---------- Luxe hamburger button ---------- */
.menu-toggle{
  display:flex;                  /* center the 3 bars inside */
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
}
.menu-toggle.luxe {
  --gold1: #d4a762; --gold2: #f0d7a1;
  position: relative; width: 52px; height: 52px;
  border: 1px solid rgba(212,167,98,.35);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .25s ease, box-shadow .25s ease;
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle.luxe:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.5); }
.menu-toggle.luxe:active { transform: translateY(1px) scale(.98); }

.menu-toggle.luxe .bar {
  position: absolute; width: 24px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  box-shadow: 0 0 10px rgba(212,167,98,.35);
  transition: transform .36s cubic-bezier(.22,.75,.3,1), opacity .2s ease, width .3s ease;
}
.menu-toggle.luxe .bar:nth-child(1) { transform: translateY(-7px); }
.menu-toggle.luxe .bar:nth-child(2) { transform: translateY(0); }
.menu-toggle.luxe .bar:nth-child(3) { transform: translateY(7px); }

/* morph to "X" */
.menu-toggle.luxe.open .bar:nth-child(1) { transform: rotate(45deg); }
.menu-toggle.luxe.open .bar:nth-child(2) { opacity: 0; width: 0; }
.menu-toggle.luxe.open .bar:nth-child(3) { transform: rotate(-45deg); }

/* subtle breathing glow when open */
.menu-toggle.luxe.open {
  animation: btnGlow 1.8s ease-in-out infinite alternate;
}
@keyframes btnGlow {
  0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.46), 0 0 0 rgba(212,167,98,.0); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.56), 0 0 16px rgba(212,167,98,.25); }
}

/* ---------- Overlay navigation panel ---------- */
.nav-panel {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
}
.nav-panel.open { pointer-events: auto; }

/* backdrop */
.nav-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .35s ease;
}
.nav-panel.open .nav-backdrop { opacity: 1; }

/* sheet */
.nav-sheet {
  position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 85vw);
  background: linear-gradient(180deg, rgba(17,17,17,.92), rgba(9,9,9,.92));
  backdrop-filter: blur(10px) saturate(120%);
  border-left: 1px solid rgba(212,167,98,.25);
  box-shadow: -24px 0 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateX(100%); opacity: 0;
  transition: transform .42s cubic-bezier(.22,.75,.3,1), opacity .3s ease;
}
.nav-panel.open .nav-sheet { transform: translateX(0); opacity: 1; }

/* list */
.nav-list { list-style: none; margin: 0; padding: 1.2rem 1.4rem; }
.nav-list li + li { margin-top: .25rem; }
.nav-list a {
  display: block; padding: .9rem 1rem; border-radius: 10px;
  color: #f5f5f5; font-weight: 600; letter-spacing: .04em;
  background: transparent;
  transition: background .2s ease, color .2s ease, transform .12s ease;
}
.nav-list a:hover {
  background: linear-gradient(90deg, rgba(212,167,98,.08), rgba(212,167,98,.02));
  transform: translateX(2px);
}
.nav-list a.active {
  color: #d4a762;
  background: linear-gradient(90deg, rgba(212,167,98,.12), rgba(212,167,98,.06));
  box-shadow: inset 0 0 0 1px rgba(212,167,98,.18);
}

/* prevent scroll when panel open */
body.nav-lock { overflow: hidden; }

/* Hide legacy inline nav rules if any exist */
.global-nav, .global-nav ul { display: none !important; }

/* Footer styling */
.site-footer {
  background-color: #0a0a0a;
  color: #888;
  text-align: center;
  padding: 1.5rem 1rem;
  border-top: 1px solid #1e1e1e;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero h2 {
    font-size: 1rem;
  }
  .section h2 {
    font-size: 1.5rem;
  }
  .logo-img {
    width: 120px;
  }
  header {
    padding: 0px;
  }
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('/images/YST_0030.jpg') center/cover no-repeat;
  background-position: bottom;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero .content {
  position: relative;
  text-align: center;
  z-index: 1;
  max-width: 80%;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
  letter-spacing: 2px;
}

.hero h2 {
  font-size: 1.4rem;
  font-weight: 300;
  margin-bottom: 2rem;
  color: #d4a762;
}

.section {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;        /* ← center the whole section */
  padding: 4rem 2rem 0rem 2rem;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: white;
  text-align: center;
}

.section p {
  max-width: 960px;
  font-size: 1.1rem;
  line-height: 1.8;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.feature {
  flex: 1 1 260px;
  background-color: #121212;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.feature i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #d4a762;
}

.feature h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.feature p {
  font-size: 1rem;
  color: #cfcfcf;
}

.calendar-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #121212;
  border-radius: 8px;
}

.calendar-container #calendar {
  max-width: 100%;
}

footer {
  background-color: #0a0a0a;
  padding: 2rem;
  text-align: center;
  color: #888;
  font-size: 0.9rem;
}

/* CTA buttons on the hero section */
.cta-buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  background-color: #d4a762;
  color: #0a0a0a;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: background-color 0.2s ease-in-out;
}

.cta-buttons a:hover {
  background-color: #e5c485;
  color: #0a0a0a;
}

/* calendar.php の <style> の一番下に追加 */
#calendar .fc {
  --fc-page-bg-color: #000;        /* 黒にしたい場合 */
  /* --fc-page-bg-color: transparent;  ←「白を消す(透明)」にしたい場合はこっち */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  nav ul {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero h2 {
    font-size: 1rem;
  }
  .section h2 {
    font-size: 1.5rem;
  }
}

/* ===== FullCalendar: kill the white header background ===== */

/* Option A: transparent (blends with your dark container) */
#calendar,
#calendar .fc {
  --fc-page-bg-color: transparent;   /* stop white from var() source */
}

/* Force the sticky header row + header cells */
#calendar .fc .fc-scrollgrid-section-sticky > *,
#calendar .fc .fc-col-header,
#calendar .fc .fc-col-header-cell {
  background: transparent !important;
}

/* (nice-to-have) tweak borders/labels for dark theme */
#calendar .fc-theme-standard th,
#calendar .fc-theme-standard td {
  border-color: rgba(255,255,255,.12);
}
#calendar .fc .fc-col-header-cell-cushion {
  color: #d4c08b;   /* your gold-ish tone */
  font-weight: 700;
}

/* ===== If you prefer solid black instead of transparent, swap this: ===== */
/*
#calendar,
#calendar .fc { --fc-page-bg-color: #000; }
#calendar .fc .fc-scrollgrid-section-sticky > *,
#calendar .fc .fc-col-header,
#calendar .fc .fc-col-header-cell { background: #000 !important; }
*/

/* ===== FullCalendar: mobile toolbar tidy ===== */
@media (max-width: 768px) {
  /* Let toolbar wrap nicely and keep things inside */
  #calendar .fc .fc-toolbar.fc-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 0;
  }

  /* Smaller title + prevent ugly wrapping */
  #calendar .fc .fc-toolbar-title {
    font-size: 18px;          /* was huge */
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* if it’s still long */
    max-width: 100%;
  }

  /* Compact buttons */
  #calendar .fc .fc-button,
  #calendar .fc .fc-button-group > .fc-button {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 8px;
  }
}

/* (keep the dark background fix you added) */
#calendar, #calendar .fc { --fc-page-bg-color: transparent; }
#calendar .fc .fc-scrollgrid-section-sticky > *,
#calendar .fc .fc-col-header,
#calendar .fc .fc-col-header-cell { background: transparent !important; }

/* PC: keep toolbar compact; Mobile: very small title and no right-side buttons */
@media (max-width: 768px) {
  #calendar .fc .fc-toolbar.fc-header-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:6px; padding:6px 0;
  }
  #calendar .fc .fc-toolbar-title{
    font-size:16px; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Make prev/next buttons smaller on phone */
  #calendar .fc .fc-button{ padding:2px 8px; font-size:12px; border-radius:8px; }
  .fc .fc-toolbar-title {font-size: 16px;}
  .fc .fc-button .fc-icon {font-size: 16px;}
}

/* Checkbox row in contact form */
.reservation-form .form-agree{
  display:flex;
  align-items:center;
  gap:.6rem;
  /* optional: give it a subtle chip look */
  /* padding:.6rem .8rem; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; */
}

/* override the global label:block; only here */
.reservation-form .form-agree label{
  display:inline;              /* or inline-block */
  margin:0;
  font-size:.95rem;
  color:#ddd;
  cursor:pointer;
  line-height:1.3;
}

/* theme the checkbox (modern browsers) */
.reservation-form .form-agree input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#d4a762;        /* gold */
  cursor:pointer;
}

/* focus ring (keyboard accessibility) */
.reservation-form .form-agree input[type="checkbox"]:focus-visible{
  outline:2px solid #d4a762;
  outline-offset:2px;
  border-radius:4px;
}

/* optional: style for a separate policy link if you use it */
.reservation-form .form-agree .policy-link{
  color:#d4a762;
  text-decoration:underline;
}

/* ===== Hero slideshow layers ===== */
.hero {                /* you already have most of this */
  position: relative;
  background-size: cover;
  background-position: center bottom;
}

/* cross-fade layer that sits above the base background */
.hero-fade {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  opacity: 0;
  transition: opacity .8s ease;    /* fade duration */
  will-change: opacity;
  z-index: 0;                      /* base bg < fade < overlay < content */
}

/* keep overlay/content above the fade layer */
.hero .overlay { z-index: 1; }
.hero .content { z-index: 2; }

/* accessibility: reduce motion if the user prefers */
@media (prefers-reduced-motion: reduce) {
  .hero-fade { transition: none; }
}