/*
Theme Name: Khoijbep
Theme URI: 
Author: Phoebe
Author URI: 
Description: A custom WordPress theme for Khoijbep Vietnamese restaurant.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asian-garden
Tags: custom-background, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  --color-black: #0a0a0a;
  --color-gold: #c9a962;
  --color-cream: #f5f0e6;
  --font-heading: 'Cormorant Garamond', serif;
  --font-japanese: 'Noto Serif JP', serif;
  --font-body: 'Inter', sans-serif;
}

body {
  background: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.serif {
  font-family: var(--font-heading)
}

.japanese {
  font-family: var(--font-japanese)
}

::selection {
  background: var(--color-gold);
  color: var(--color-black)
}

.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: .04;
  pointer-events: none;
  z-index: 50;
}

.nav-glass {
  background: rgba(10, 10, 10, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.text-gold {
  color: var(--color-gold)
}

.bg-gold {
  background: var(--color-gold)
}

.reveal-up {
  opacity: 0;
  transform: translateY(30px)
}

.reveal-scale {
  opacity: 0;
  transform: scale(.95)
}

/* ===== HERO loading: show all at once ===== */
.hero-item {
  opacity: 0;
  transform: translateY(18px);
}

.menu-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width:640px) {
  .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1024px) {
  .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:1280px) {
  .menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Modal thumbs */
.thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease;
}

.thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .22);
}

.thumb[aria-current="true"] {
  border-color: rgba(201, 169, 98, .65);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  display: block;
}

.thumb[aria-current="true"] img {
  opacity: 1;
}

/* ===== MODAL LAYOUT ===== */
#modalPanel {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#modalPanel .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#modalPanel .media-main {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
}

#modalPanel #modalImage,
#modalPanel #modalVideo {
  width: 100%;
  height: 100%;
}

#modalPanel #modalImage {
  object-fit: cover;
}

/* ===== MOBILE MODAL ===== */
@media (max-width: 767px) {
  #modalPanel {
    max-height: 94vh;
  }

  /* Kill the grid on mobile — simple block stacking */
  #modalPanel .modal-body {
    display: block !important;
  }

  #modalPanel .media-shell {
    display: block;
    width: 100%;
  }

  #modalPanel .media-main {
    aspect-ratio: 16 / 11;
    max-height: 50vh;
  }
}

@media (prefers-reduced-motion: reduce) {

  .reveal-up,
  .reveal-scale,
  .hero-item {
    opacity: 1 !important;
    transform: none !important
  }
}

/* ===== SKELETON / LAZY LOAD ===== */
.img-skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dish-card img {
  transition: opacity 0.5s ease;
}

.dish-card img[data-loaded="false"] {
  opacity: 0;
}

/* =========================================
   ĐỔI MÀU CHỮ "KHOIJ BEP" LỚN Ở HERO SECTION
   ========================================= */
#home .japanese {
    color: #A0A0A0 !important; /* Trắng ngà hơi xám lỳ, tiệp màu 100% với VÅR MENY */
}

/* Nhắm thẳng vào dòng Subtitle nằm dưới Logo trong phần Hero */
#home .relative.z-10 h2 {
    color: rgba(160, 160, 160, 1) !important; /* Màu xám trầm bạn muốn */
    opacity: 0.7 !important;
    text-shadow: none !important;
}

/* 1. Trạng thái bình thường của 2 nút (Xám ngà lỳ) */
#home .mt-8.flex a {
    color: #CFCAC2 !important; /* Màu xám ngà */
    border-color: rgba(207, 202, 194, 0.25) !important; /* Viền mờ */
    background-color: transparent !important;
    transition: all 0.5s ease !important;
}

/* 2. Hiệu ứng khi di chuột (Hover) */
#home .mt-8.flex a:hover {
    color: #FDFBF7 !important; /* Sáng lên màu trắng sứ */
    border-color: rgba(253, 251, 247, 0.5) !important;
    background-color: rgba(253, 251, 247, 0.05) !important;
    transform: translateY(-1px); /* Nhấc nhẹ nút lên */
}

/* Đổi màu cho Giờ mở cửa, Địa chỉ và Email trong khung Hero */
#home .grid p.text-sm.md\:text-base, 
#home .grid a.text-sm.md\:text-base {
    color: rgba(255, 255, 255, 0.5) !important; /* Màu xám mờ 50% trắng */
    font-weight: 300 !important;
}

/* Giữ cho tiêu đề (ÖPPETTIDER, ADRESS...) tối hơn nữa nếu muốn */
#home .grid p.text-\[11px\].uppercase {
    color: rgba(255, 255, 255, 0.3) !important; /* Xám trầm hơn cho label */
}

/* Hiệu ứng khi di chuột vào Link (Địa chỉ/Email) để người dùng biết là bấm được */
#home .grid a.text-sm.md\:text-base:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* =========================================
   ĐỔI MÀU CHỮ VÅR MENY (OUR MENU)
   ========================================= */
#specials h2 {
    color: #a0a0a0 !important; /* Màu xám ngà lỳ, sang trọng và tiệp với chữ Khoij Bep ở trên */
}

/* =========================================
   ĐỔI MÀU TÊN MÓN ĂN VÀ GIÁ TRONG THẺ MENU
   ========================================= */

/* 1. Tên món ăn chính (Tiếng Việt) */
#specials .dish-card h3 {
    color: #DADADA !important; /* Đổi sang màu Xám ngà lỳ, tiệp với chữ VÅR MENY */
    transition: color 0.4s ease !important;
}

/* 2. Tên món ăn phụ (Tiếng Thụy Điển) */
#specials .dish-card h4 {
    color: #DADADA !important; /* Đổi sang Xám trầm để phân cấp rõ ràng, nhường spotlight cho tiếng Việt */
    transition: color 0.4s ease !important;
}

/* 3. Giá tiền */
#specials .dish-card span.text-\[\#c9a962\] {
    color: #DADADA !important; /* Đổi sang màu xám ngà/trắng lỳ */
}

/* 4. Hiệu ứng Hover: Sáng lên màu Trắng (thay vì Gold) khi khách di chuột vào thẻ */
#specials .dish-card:hover h3,
#specials .dish-card:hover h4,
#specials .dish-card:hover span.text-\[\#c9a962\] {
    color: #FFFFFF !important; /* Sáng trắng lên khi hover, không dùng gold nữa */
}

/* Đổi luông màu đường line chia cắt giữa Tên chính và tên phụ từ Vàng sang xám mờ */
#specials .dish-card .h-px.bg-\[\#c9a962\]\\/30 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Đổi viền và shadow hover của tổng thể thẻ món ăn từ ánh Vàng sang ánh Trắng mờ */
#specials .dish-card > div.group-hover\:border-\[\#c9a962\]\\/40:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.08) !important;
}

/* =========================================
   XÓA MÀU VÀNG KHU VỰC BẢN ĐỒ & FOOTER
   ========================================= */

/* 1. Đổi chữ "PLATS", các icon (Map, Đồng hồ, Thư) thành Xám trầm */
#location .text-gold,
footer .text-gold,
.site-footer .text-gold {
    color: #8A857D !important; 
}

/* 2. Biến nút Vàng đặc thành nút kính mờ (Ghost Button) sang trọng */
#location .bg-gold {
    background-color: transparent !important;
    border: 1px solid rgba(207, 202, 194, 0.25) !important;
    color: #858585 !important;
    box-shadow: none !important;
}

/* Hiệu ứng khi khách di chuột vào nút Bản đồ */
#location .bg-gold:hover {
    background-color: rgba(207, 202, 194, 0.05) !important;
    color: #CFCAC2 !important;
    border-color: rgba(207, 202, 194, 0.5) !important;
}

/* 3. Đổi chữ "Khoij Bep" to ở dưới cùng Footer thành Xám ngà */
footer h1, 
footer h2, 
footer h3, 
.site-footer h2 {
    color: #CFCAC2 !important;
}

/* =========================================
   ĐỔI MÀU CHỮ "Besök" KHU VỰC BẢN ĐỒ
   ========================================= */
#location h2.text-white {
    color: #CFCAC2 !important; /* Đổi sang màu Xám ngà lỳ */
}

/* =========================================
   TÙY CHỈNH ĐỘ MỜ VÀ ĐỘ SÁNG ẢNH HERO
   ========================================= */
#home .z-0 .bg-gradient-to-b {
    backdrop-filter: blur(0px) brightness(1.5) !important; 
    -webkit-backdrop-filter: blur(0px) brightness(1) !important; 
}

/* 1. Trạng thái bình thường của nút (Tab) */
.menu-tab-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Trạng thái khi di chuột qua (Hover) - Hiệu ứng nhẹ nhàng */
.menu-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 3. Trạng thái khi ĐANG CHỌN (Active) - Đổi từ vàng sang trắng/xám nhẹ */
.menu-tab-btn.active {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* ĐỊNH DẠNG LẠI CỤM PDF MENU */
#specials .flex.flex-row.gap-3.justify-center {
    margin-bottom: 30px !important;
    margin-top: -10px !important;
}

#specials .flex.flex-row.gap-3.justify-center a {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    padding: 2px 0 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

#specials .flex.flex-row.gap-3.justify-center a:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    opacity: 1 !important;
}