/**
 * BearVPS - Chrome ร่วมของหน้าสาธารณะใน pages/ (terms / privacy / faq / knowledge)
 * ไฟล์: assets/css/public-chrome.css
 *
 * ‼ กฎเหล็กของไฟล์นี้: ใส่ได้เฉพาะ rule ที่ "เหมือนกันแบบตัวอักษรต่อตัวอักษร" ครบทั้ง 4 หน้าเท่านั้น
 *   เดิม 19 rule ชุดนี้ถูกก๊อปซ้ำไว้ในทุกไฟล์ (~130 บรรทัด × 4) = แก้สีปุ่มทีต้องไล่แก้ 4 ที่
 *   และ browser cache ข้ามหน้าไม่ได้เพราะฝังอยู่ใน HTML
 *
 * ‼ rule ที่ต่างกันแม้แต่ค่าเดียว "ห้าม" ยกมารวมที่นี่ ให้คงไว้ใน <style> ของหน้านั้น เช่น
 *     - body : terms/privacy พื้นหลังขาว แต่ faq/knowledge เป็นเทาอ่อน
 *     - hero ของแต่ละหน้า : คนละคลาส คนละระยะ
 *
 * ‼ .navbar เพิ่งย้ายเข้ามาได้ในรอบที่ผู้ใช้สั่งให้ทุกหน้าสาธารณะหน้าตาเหมือนกัน
 *   ก่อนหน้านั้นยกมาไม่ได้ เพราะ terms/privacy เป็น position:fixed แต่ faq/knowledge ไม่ใช่
 *   ตอนนี้ fixed ทั้งสี่หน้าแล้ว (hero ของแต่ละหน้าเผื่อระยะด้วย margin-top: var(--bear-nav-h))
 *
 * ‼ ลำดับการโหลด: <link> ของไฟล์นี้ต้องอยู่ "หลัง" Bootstrap และ "ก่อน" <style> ของหน้า
 *   เพื่อให้ * reset ยังชนะ Bootstrap และ CSS เฉพาะหน้ายังชนะไฟล์นี้ (ลำดับ cascade เท่าเดิมทุกประการ)
 * ‼ แต่ "ความสูง/ขนาดตัวอักษรของแถบบน + ระยะของแถบท้ายเว็บ" ไม่ได้อยู่ที่ไฟล์นี้
 *   อยู่ที่ landingChromeCompactCss() ใน includes/landing_chrome.php ซึ่งทุกหน้า inline
 *   ต่อท้าย <style> ของตัวเองอีกที (ต้องเป็นก้อนสุดท้ายเสมอ ไม่งั้นแถบกลับไปสูง 76px)
 */

:root {
    --bear-orange-primary: #FF6B35;
    --bear-orange-secondary: #F7931E;
    --bear-orange-light: #FFA366;
    --bear-black: #1A1A1A;
    --bear-dark-gray: #2D2D2D;
    --bear-medium-gray: #4A4A4A;
    --bear-white: #FFFFFF;
    --bear-light-gray: #F5F5F5;
    --bear-border-gray: #E0E0E0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bear-orange-primary) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bear-logo {
    font-size: 2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.navbar-nav .nav-link {
    color: var(--bear-white) !important;
    font-weight: 400;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--bear-orange-primary) !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--bear-orange-primary);
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* แถบเมนูด้านบน — ชุดเดียวกับที่ landingNavbar() ของหน้าอื่นใช้ */
.navbar {
    background: var(--bear-black) !important;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    color: var(--bear-orange-secondary) !important;
}

/* ไฮไลต์เมนูของหน้าปัจจุบัน
   ‼ ต้องมี !important เพราะกฎ .navbar-nav .nav-link ด้านบนตั้งสีขาวไว้ด้วย !important
     ถ้าไม่ใส่ ผู้ใช้จะไม่เห็นว่าตัวเองอยู่หน้าไหน (เมนู active ดูเหมือนเมนูธรรมดา) */
.navbar-nav .nav-link.active {
    color: var(--bear-orange-primary) !important;
    font-weight: 500;
}

.navbar-nav .nav-link.active::after {
    width: 100%;
}

.footer {
    background: var(--bear-black);
    color: var(--bear-white);
    padding: 50px 0 20px;
}

.footer-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--bear-orange-primary);
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--bear-white);
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* ‼ hover ห้ามเปลี่ยนอะไรที่ "กินพื้นที่" (padding/margin/transform) — แถบท้ายเว็บเป็น grid
   ที่คอลัมน์กว้างตามเนื้อหา ลิงก์กว้างขึ้น 5px = คอลัมน์ทั้งสี่เลื่อนซ้ายพร้อมกัน */
.footer-links a:hover {
    color: var(--bear-orange-primary);
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
    opacity: 0.7;
}

/* แถบข้อมูลนิติบุคคลท้ายเว็บ — เล็กและจางโดยเจตนา
   ที่อยู่จดทะเบียนคือข้อมูลที่ต้อง "หาเจอ" ไม่ใช่ข้อมูลที่ต้อง "เด่น"
   ‼ กฎชุดนี้ถูกก๊อปไว้ที่ index.php และ includes/landing_chrome.php ด้วย (หน้าเหล่านั้นมี <style> ของตัวเอง)
     แก้ค่าที่นี่แล้วต้องไปแก้อีกสองที่ให้ตรงกัน
   <address> เป็นแท็กที่ถูกต้องตามความหมาย แต่เบราว์เซอร์ตั้ง italic ให้เอง จึงต้องล้างทิ้ง */
.footer-legal {
    font-style: normal;
    font-size: 0.78rem;
    line-height: 1.9;
    margin: 0 auto 8px;
    max-width: 760px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: var(--bear-white);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--bear-orange-primary);
    transform: translateY(-3px);
}