/* 
 * LeoPalace Resort Guam - TanganTangan Grill Specific Styles
 * TanganTanganグリル専用スタイル
 */

/* -----------------------------------------
   1. TanganTanganのヒーロー背景画像設定
----------------------------------------- */

/* TanganTangan Grill */
.restaurant-page.tangantangan-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/tangantangan-hero1.jpg');
}

/* -----------------------------------------
   2. TanganTangan固有の追加スタイル
----------------------------------------- */

/* ストーリーセクション */
.restaurant-story {
  width: 85%;
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.restaurant-story h3 {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 25px;
  text-align: center;
}

.restaurant-story p {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  letter-spacing: 1.2px;
  margin-bottom: 20px;
  text-align: left;
}

.restaurant-story p:last-child {
  margin-bottom: 0;
}

/* TanganTanganブランドカラー */
.restaurant-page.tangantangan-page .restaurant-title {
  color: #8B4513; /* サドルブラウン - BBQ/ウッドスモークのイメージ */
}

.restaurant-page.tangantangan-page .menu-nav-item.active {
  background-color: #8B4513;
}

.restaurant-page.tangantangan-page .menu-nav-item:hover:not(.active) {
  background-color: rgba(139, 69, 19, 0.1);
  color: #8B4513;
}

/* チャモロ料理名の日本語表記スタイル */
.item-name-jp {
  font-style: italic;
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
  display: block;
  margin-top: 3px;
}

/* サービスチャージ注記の強調 */
.restaurant-page.tangantangan-page .hour-note {
  font-weight: 400;
}

/* メニューカテゴリノート */
.category-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: 15px;
  text-align: center;
}

/* チャモロ語セクションヘッダー */
.restaurant-page.tangantangan-page .menu-category h3 {
  position: relative;
}

/* -----------------------------------------
   3. レスポンシブ調整
----------------------------------------- */

@media (max-width: 820px) {
  .restaurant-story {
    width: 95%;
    padding: 30px 20px;
    margin-bottom: 40px;
  }
  
  .restaurant-story h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .restaurant-story p {
    font-size: 15px;
    line-height: 1.7;
  }
}

@media (max-width: 550px) {
  .restaurant-story {
    width: 90%;
    padding: 25px 15px;
    margin-bottom: 30px;
  }
  
  .restaurant-story h3 {
    font-size: 18px;
    letter-spacing: 1px;
  }
  
  .restaurant-story p {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 15px;
  }
  
  .restaurant-page.tangantangan-page .menu-category h3::before {
    left: -20px;
    font-size: 14px;
  }
}

/* 
 * LeoPalace Resort Guam - Restaurants Specific Styles
 * レストラン個別ページ用スタイル
 */

/* -----------------------------------------
   1. 各レストランのヒーロー背景画像設定
----------------------------------------- */

/* Eataliano Restaurant */
.restaurant-page.eataliano-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/eataliano-hero1.jpg');
}

/* TanganTangan Grill */
.restaurant-page.tangantangan-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/tangantangan-hero1.jpg');
}

.restaurant-page.tangantangan-page .slideshow-item:nth-child(2) {
  background-image: url('/restaurants/img/tangantangan-hero2.jpg');
}

/* Cafe Biba */
.restaurant-page.cafe-biba-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/cafe-biba-hero1-1.jpg');
}

/* Amika Sana */
.restaurant-page.amika-sana-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/amika-sana-hero1.jpg');
}

/* Sabana sports Bar */
.restaurant-page.sabana-sports-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/sabana-sports-hero1.jpg');
}

/* Sabana Poolside Bar */
.restaurant-page.sabana-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/sabana-hero1.jpg');
}

/* Tenku Yuzen */
.restaurant-page.tenku-yuzen-page .slideshow-item:nth-child(1) {
  background-image: url('/restaurants/img/tenku-yuzen-hero1.jpg');
}

/* -----------------------------------------
   2. レストラン固有の追加スタイル（必要に応じて）
----------------------------------------- */

/* Cafe Biba 特有スタイル */
.restaurant-page.cafe-biba-page .restaurant-hours {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 5px;
}

/* Eataliano 特有スタイル */
.restaurant-page.eataliano-page .restaurant-title {
  color: #8D2D1D;
}

/* TanganTangan Grill 特有スタイル */
.restaurant-page.tangantangan-page .restaurant-title {
  color: #8B4513;
}

.restaurant-page.tangantangan-page .menu-nav-item.active {
  background-color: #8B4513;
}

/* Amika Sana 特有スタイル */
.restaurant-page.amika-sana-page .menu-nav-item.active {
  background-color: #2D458D;
}

/* Sabana 特有スタイル */
.restaurant-page.sabana-page .restaurant-intro p {
  font-style: italic;
}

/* -----------------------------------------
   3. レスポンシブ調整
----------------------------------------- */

@media (max-width: 768px) {
  /* モバイル用の背景画像調整など */
  .restaurant-page .slideshow-item {
    background-position: center center;
  }
}

/* ----------------------------------------
   スクロールヒント - デスクトップで完全非表示、モバイルのみ表示
---------------------------------------- */

/* デスクトップ（821px以上）では完全に非表示 */
@media (min-width: 821px) {
  .scroll-hint,
  .mobile-only-hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* タブレット（551px-820px）でも完全に非表示 */
@media (min-width: 551px) and (max-width: 820px) {
  .scroll-hint,
  .mobile-only-hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* モバイル（550px以下）でのみ表示 */
@media (max-width: 550px) {
  .scroll-hint {
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(145, 138, 122, 0.85) !important;
    border-radius: 50% !important;
    opacity: 0.9 !important;
    transition: opacity 0.4s ease-out !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    visibility: visible !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .scroll-hint::after {
    content: '↓' !important;
    color: white !important;
    font-size: 20px !important;
    font-weight: bold !important;
    display: block !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    animation: bounceArrowVertical 1.8s infinite !important;
  }

  /* バウンスアニメーション */
  @keyframes bounceArrowVertical {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0px);
    }
    40% {
      transform: translateX(-50%) translateY(-4px);
    }
    60% {
      transform: translateX(-50%) translateY(-2px);
    }
  }

  /* スクロール可能な場合にのみ表示 */
  .is-scrollable-x .scroll-hint {
    opacity: 0.9 !important;
    visibility: visible !important;
  }

  /* メニューインナーコンテナの位置調整 */
  .restaurant-menu-inner {
    position: relative !important;
  }

  /* メニュー項目コンテナがスクロール可能な場合の調整 */
  .menu-items.is-scrollable {
    position: relative !important;
  }
}

/* 極小画面（480px以下）での調整 */
@media (max-width: 480px) {
  .scroll-hint {
    width: 45px !important;
    height: 45px !important;
  }

  .scroll-hint::after {
    font-size: 18px !important;
  }
}

/* 非常に小さな画面（320px以下）での調整 */
@media (max-width: 320px) {
  .scroll-hint {
    width: 40px !important;
    height: 40px !important;
  }

  .scroll-hint::after {
    font-size: 16px !important;
  }
}