/* ==========================================
   HEADER & SEARCH MODAL STYLES (Smart Scoping)
   Directory: /assets/css/
   File: furplan-header.css
========================================== */

/* ------------------------------------------
   1. 🏠 รูปแบบหน้าแรก (Home)
------------------------------------------ */
.fixed #furplan-header-grid {
    display: grid; grid-template-columns: 1fr 1fr; 
    grid-template-areas: "logo sitename" "nav search";
    row-gap: 1.5rem; transition: all 0.4s ease-in-out;
}
.fixed #header-logo-wrap { grid-area: logo; justify-self: start; display: flex; align-items: center; gap: 1.5rem; }
.fixed #header-sitename  { grid-area: sitename; justify-self: end; }
.fixed #header-nav       { grid-area: nav; justify-self: start; transition: opacity 0.3s; }
.fixed #header-search    { grid-area: search; justify-self: end; }
.fixed #furplan-logo { color: #D10000; }

.fixed.is-scrolled #furplan-header-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav search";
    row-gap: 0; align-items: center;
}
.fixed.is-scrolled #header-nav { justify-self: center; padding-right: 0; }
.fixed.is-scrolled #header-social, 
.fixed.is-scrolled #header-sitename { display: none; }
.fixed.is-scrolled #furplan-logo { color: #FFFFFF; }


/* ------------------------------------------
   2. 📄 รูปแบบหน้าใน (Inner)
------------------------------------------ */
.sticky #furplan-header-grid {
    display: grid; grid-template-columns: auto 1fr auto; 
    align-items: center; transition: all 0.4s ease-in-out;
}
.sticky #header-logo-wrap { justify-self: start; display: flex; align-items: center; }
.sticky #header-nav       { justify-self: center; } 
.sticky #header-search    { justify-self: end; }
.sticky #header-social, 
.sticky #header-sitename { display: none !important; }
.sticky #furplan-logo { color: #FFFFFF; }


/* ==========================================
   🚀 THE ULTIMATE RESPONSIVE FIX (< 1280px)
   (ลบ Tailwind ออก ใช้ CSS คุมเองชัวร์ 100%)
========================================== */

/* ค่าเริ่มต้น (หน้าจอ Desktop 1280px ขึ้นไป) */
.furplan-desktop-menu { display: block; }
.furplan-mobile-btn { display: none; }
.furplan-desktop-social { display: flex; }

/* หน้าจอ Tablet ลงมา (< 1280px) */
@media (max-width: 1279px) {
    /* สลับปุ่มแฮมเบอร์เกอร์ */
    .furplan-desktop-menu { display: none !important; }
    .furplan-mobile-btn { display: block !important; }
    .furplan-desktop-social { display: none !important; }
    
    /* จัด Grid หน้าในให้ แฮมเบอร์เกอร์ ไปอยู่ชิดขวาคู่กับแว่นขยาย */
    .sticky #furplan-header-grid {
        grid-template-columns: 1fr auto auto; 
        gap: 1.25rem; 
    }
    .sticky #header-nav { justify-self: end; }

    /* จัด Grid หน้าแรก ให้โลโก้ซ้าย แฮมเบอร์เกอร์ขวา แว่นขวา */
    .fixed #furplan-header-grid,
    .fixed.is-scrolled #furplan-header-grid {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "logo nav search";
        row-gap: 0; align-items: center;
    }
    .fixed #header-sitename { display: none !important; }

    /* บังคับให้ปุ่ม Hamburger ชิดขวาทั้งตอนปกติและตอน Scroll */
    .fixed #header-nav,
    .fixed.is-scrolled #header-nav { 
        justify-self: end; 
        padding-right: 1rem; 
    }
    
}


/* ------------------------------------------
   3. 🌟 PREMIUM DROPDOWN & MENU FONTS
------------------------------------------ */
#header-nav > nav > ul > li > a, 
#mobile-menu-drawer > div > nav > ul > li > a { 
    font-family: "Prompt", sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

#header-nav li { position: relative; }
#header-nav .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background-color: #FFFFFF; padding: 0.5rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-top: 3px solid #D10000;
    opacity: 0; visibility: hidden; transform: translateY(15px);
    transition: all 0.3s ease-in-out; z-index: 50;
}
#header-nav .sub-menu::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: transparent; }
#header-nav .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

#header-nav .sub-menu a {
    display: block; padding: 0.75rem 1.5rem; color: #1A1A1A;
    font-family: "Prompt", sans-serif !important;
    font-size: 0.75rem !important; 
    font-weight: 600 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.1em !important; 
    text-decoration: none !important;
    transition: all 0.3s ease;
}
#header-nav .sub-menu a:hover { color: #D10000; background-color: #F9F9F9; padding-left: 2rem; }

#mobile-menu-drawer .sub-menu { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.2); }
#mobile-menu-drawer .sub-menu a { font-size: 0.75rem !important; color: #9CA3AF !important; }
#mobile-menu-drawer .sub-menu a:hover { color: #D10000 !important; }


/* ------------------------------------------
   4. 🔍 SEARCH MODAL & TRENDING
------------------------------------------ */
.modal-open { overflow: hidden; }
.search-modal-active #furplan-search-modal { opacity: 1; pointer-events: auto; }
.search-modal-active #search-modal-box { transform: translateY(0); }

.live-search-item {
    display: block; padding: 1rem; border-radius: 8px; border: 1px solid transparent;
    transition: all 0.2s ease;
}
.live-search-item:hover { background-color: #f9fafb; border-color: #f3f4f6; }

.furplan-trending-menu { list-style: none !important; padding: 0; margin: 0; }
.furplan-trending-menu li { margin: 0; padding: 0; }
.furplan-trending-menu a {
    display: inline-block; cursor: pointer; padding: 0.5rem 1rem; 
    background-color: #f3f4f6; border-radius: 0.375rem; 
    font-size: 0.75rem !important; font-weight: 500 !important; color: #4b5563 !important; 
    transition: all 0.3s ease; text-decoration: none !important; text-transform: capitalize !important;
}
.furplan-trending-menu a:hover { background-color: #0A0A0A; color: #FFFFFF !important; }

/* ==========================================
   5. CURSOR IMAGE FOLLOWER STYLES
========================================== */

#cursor-image-follower {
    position: fixed; /* ต้องเป็น fixed ถึงจะลอยตามเมาส์ได้ */
    top: 0;
    left: 0;
    width: 320px; /* ขนาดรูปตอนลอย */
    aspect-ratio: 4/3;
    z-index: 9999;
    pointer-events: none; /* ห้ามลืม! ไม่งั้นเมาส์จะกระตุก */
    
    /* ตอนปกติให้ซ่อนไว้ และย่อลงนิดนึง */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.8); /* -50% เพื่อให้เมาส์อยู่ตรงกลางรูป */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* เมื่อมีคลาส is-visible (JS สั่ง) ให้โชว์และขยายขนาดกลับมาปกติ */
#cursor-image-follower.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

#follower-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}