/* MIYU Sticky Header & Reserve Button */

/* Sticky header */
.site-header, #masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  width: 100% !important;
}

/* Reserve button styling in nav */
.main-navigation a[href*="reserve"],
.nav-menu a[href*="reserve"],
nav a[href*="reserve"] {
  background-color: #c0392b !important;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease !important;
}
.main-navigation a[href*="reserve"]:hover,
nav a[href*="reserve"]:hover {
  background-color: #96281b !important;
}

/* Floating Reserve CTA */
#miyu-reserve-cta {
  position: fixed;
  bottom: 28px;
  right: 90px;
  z-index: 99999;
  background: #c0392b;
  color: #fff !important;
  padding: 13px 22px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.15s;
}
#miyu-reserve-cta:hover {
  background: #96281b;
  transform: translateY(-2px);
}

/* ===== Hero Section Full-Width Fix ===== */
.elementor-element-hero-section-miyu {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  transform: translateX(-50%) !important;
}
.elementor-element-hero-section-miyu .e-con-inner {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 60px 20px !important;
}
.elementor-element-hero-heading .elementor-heading-title {
  color: #ffffff !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
}
.elementor-element-hero-subheading .elementor-heading-title {
  color: rgba(255,255,255,0.85) !important;
  font-size: clamp(13px, 1.6vw, 18px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}
.elementor-element-hero-button .elementor-button {
  background-color: #c0392b !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 16px 40px !important;
}
.elementor-element-hero-button .elementor-button:hover {
  background-color: #96281b !important;
}

/* ===== Header Logo Size Fix ===== */
.site-header .site-branding img,
#masthead .site-branding img,
.site-header .custom-logo,
#masthead .custom-logo {
  max-height: 130px !important;
  max-width: 280px !important;
  width: auto !important;
  height: auto !important;
}
.site-header .site-branding,
#masthead .site-branding {
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* ===== Hero Section Full-Width ===== */
.elementor-element-hero-section-miyu {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative !important;
}
.elementor-element-hero-heading .elementor-heading-title {
  color: #ffffff !important;
  font-size: clamp(26px, 4vw, 52px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
}
.elementor-element-hero-subheading .elementor-heading-title {
  color: rgba(255,255,255,0.85) !important;
  font-size: clamp(13px, 1.6vw, 17px) !important;
  font-weight: 400 !important;
}
.elementor-element-hero-button .elementor-button {
  background-color: #c0392b !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}
.elementor-element-hero-button .elementor-button:hover {
  background-color: #96281b !important;
}

/* ===== Hide duplicate theme H1 on homepage ===== */
/* The Maywood theme renders page title as H1; our hero already has the correct H1 */
.home .entry-title,
.home .page-title,
body.home header.entry-header .entry-title {
  display: none !important;
}

/* ===== Hide theme's large header area above logo ===== */
.home .entry-header,
body.home .entry-header {
  display: none !important;
}

/* ===== Ensure hero heading is the sole H1 ===== */
.elementor-element-hero-heading .elementor-heading-title {
  display: block !important;
}

/* ===== Fix duplicate H1 - hide Maywood theme entry-title on homepage ===== */
.home .entry-title,
.page-template-default .entry-header .entry-title {
  display: none !important;
}

/* ===== Header: Logo + Name + Tagline — 3 stacked lines ===== */
.site-branding {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 0 !important;
  gap: 4px !important;
}
.site-branding .custom-logo-link,
.site-branding a[rel="home"] img {
  display: block !important;
  margin: 0 auto 8px auto !important;
}
.site-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.site-title a {
  display: block !important;
  text-align: center !important;
}
.site-description {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #888 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.site-header .responsive-max-width,
#masthead .responsive-max-width {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.main-navigation {
  width: 100% !important;
  text-align: center !important;
}
.main-navigation ul {
  justify-content: center !important;
}

/* ===== Hero Slideshow ===== */
.miyu-hero-wrap {
  position: relative !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  overflow: hidden !important;
  height: 70vh !important;
  min-height: 400px !important;
  max-height: 700px !important;
}
.miyu-hero-slides {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.miyu-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Slide 1: evening facade — base layer, always opaque */
.miyu-slide-1 {
  background-image: url('https://miyu.sg/wp-content/uploads/2025/10/Miyu-outside-view-3.jpg') !important;
  background-position: center !important;
  opacity: 1 !important;
  z-index: 1 !important;
}
/* Slide 2: interior — animates ON TOP, no !important on opacity or animation */
.miyu-slide-2 {
  background-image: url('https://miyu.sg/wp-content/uploads/2025/10/Miyu-seat-1.jpg') !important;
  background-position: center 60% !important;
  z-index: 2 !important;
  opacity: 0;
  animation: miyuFade 6s 2s infinite;
}
/* 6s cycle: 2s delay on first → then loops
   0%→16.67% = 1s fade in | 16.67%→50% = 2s hold | 50%→66.67% = 1s fade out | 66.67%→100% = 2s exterior */
@keyframes miyuFade {
  0%      { opacity: 0; }
  16.67%  { opacity: 1; }
  50%     { opacity: 1; }
  66.67%  { opacity: 0; }
  100%    { opacity: 0; }
}
.miyu-hero-inner {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  z-index: 10 !important;
  padding: 20px !important;
  background: rgba(0,0,0,0.35) !important;
}
.miyu-hero-eyebrow {
  color: #fff !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.miyu-hero-inner h1 {
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  margin: 0 0 12px !important;
}
.miyu-hero-sub {
  color: rgba(255,255,255,0.85) !important;
  font-size: 1rem !important;
  margin-bottom: 24px !important;
  display: block !important;
}
.miyu-hero-btn {
  background: #c0392b !important;
  color: #fff !important;
  padding: 12px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em !important;
}

/* ===== Lunch page only: daytime facade instead of evening ===== */
.page-id-181 .miyu-slide-1 {
  background-image: url('https://miyu.sg/wp-content/uploads/2025/10/Miyu-outside-view-2.jpg') !important;
}