/*
Theme Name: HYTALE ASIA Community
Theme URI: https://hytale.asia
Author: ChrisRak
Description: Hytale 中文社群風格主題，使用 Tailwind CSS。
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hytale-asia
*/

/* 這裡通常放你的自定義 CSS。
   因為你用了 Tailwind 和內嵌樣式，我們主要將原本 HTML head 裡的 <style> 內容移到這裡或者 header.php。
   為了簡單起見，我們將原本的 CSS 保持在 header.php 或使用 wp_add_inline_style，
   但在標準開發中，你應該把原本 HTML <style> 裡的內容貼在下面：
*/

/* 使用更強大的選擇器來覆蓋固定定位 */

/* 桌面版 */
.admin-bar header.fixed, 
.admin-bar header[class*="fixed"] {
    top: 32px !important;
}

/* 手機版 (WordPress Admin Bar 在 782px 以下會變高) */
@media screen and (max-width: 782px) {
    .admin-bar header.fixed,
    .admin-bar header[class*="fixed"] {
        top: 46px !important;
    }
}

/* 如果你的 Admin Bar 在手機上消失了（有些主題會隱藏），確保不會留白 */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

:root {
    --hytale-dark: #0e0e10;
    --hytale-blue: #141b2d;
    --hytale-gold: #ffc800;
    --hytale-gold-hover: #ffaa00;
    --hytale-text: #e0e0e0;
    --card-bg: #1a202c;
    --hytale-header-height: 80px;
}

/* Fix: prevent fixed header from covering page/post content */
body { padding-top: var(--hytale-header-height, 80px); }

/* 確保 lucide 圖標有基本的顯示尺寸 */
svg.lucide {
    display: inline-block;
    vertical-align: middle;
    width: 1em;   /* 跟隨文字大小 */
    height: 1em;
    stroke-width: 2px;
}

/* 針對你在 HTML 寫的 w-4 h-4 類名進行補強 */
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }

/* Custom Logo (外觀 > 自訂 > 網站識別 > 標誌) */
.custom-logo-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.custom-logo {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ===== Home: Server List Slider ===== */
.hytale-slider { position: relative; }
.hytale-slides {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.15);
}
@media (min-width: 768px) {
  .hytale-slides { height: 360px; }
}

.hytale-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
.hytale-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.hytale-slide-bg { position: absolute; inset: 0; }
.hytale-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,7,18,0.92) 0%, rgba(3,7,18,0.72) 55%, rgba(3,7,18,0.20) 100%);
}

.hytale-slide-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .hytale-slide-content { padding: 2.25rem; }
}

.hytale-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  transition: background 150ms ease, transform 150ms ease;
}
.hytale-slider-btn:hover { background: rgba(0,0,0,0.55); }
.hytale-slider-prev { left: 12px; }
.hytale-slider-next { right: 12px; }

.hytale-slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
  z-index: 3;
}
.hytale-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 150ms ease, background 150ms ease;
}
.hytale-dot.is-active {
  background: rgba(250,204,21,0.9); /* Tailwind yellow-400-ish */
  transform: scale(1.15);
}

/* ===== Button helper (used in slider) ===== */
.btn-gold {
    background: linear-gradient(180deg, var(--hytale-gold) 0%, #eab308 100%);
    border: 2px solid #fde047;
    box-shadow: 0 4px 0 #854d0e !important;
    color: #422006;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
}
.btn-gold:hover { filter: brightness(1.1); }
.btn-gold:active { transform: translateY(4px); box-shadow: 0 0 0 #854d0e !important; }