/* 
 * Tinh Yeu Chua - Header & Navigation CSS
 * Shared across all pages
 */

/* Hide Flatsome default header/footer */
.header-wrapper,
#header,
.header-main,
.nav-wrapper,
.footer-wrapper,
#footer,
.absolute-footer {
   display: none !important
}

/* Header Top Bar */
.header-top {
   background: linear-gradient(135deg, #0084ff 0%, #0066cc 100%);
   color: #fff;
   font-size: 13px;
   padding: 10px 0
}

.header-top .container {
   display: flex;
   justify-content: space-between;
   align-items: center
}

/* Main Header */
.header-main-custom {
   background: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
   padding: 15px 0;
   position: sticky;
   top: 0;
   z-index: 9999
}

body.admin-bar .header-main-custom {
   top: 32px;
}

@media (max-width: 782px) {
   body.admin-bar .header-main-custom {
      top: 46px;
   }
}

.header-main-custom .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px
}

/* Logo */
.logo {
   font-size: 1.75rem;
   font-weight: 800;
   background: linear-gradient(135deg, #0084ff 0%, #0066cc 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-right: 20px;
   flex-shrink: 0
}

/* Navigation */
.main-nav {
   display: flex;
   align-items: center
}

.main-nav ul {
   display: flex;
   gap: 4px;
   list-style: none;
   flex-wrap: nowrap;
   margin: 0;
   padding: 0
}

.main-nav li {
   margin: 0;
   position: relative
}

.main-nav>ul>li>a {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 10px 12px;
   font-weight: 600;
   font-size: 14px;
   color: #1a202c;
   border-radius: 12px;
   transition: all 0.3s ease;
   white-space: nowrap
}

.main-nav>ul>li>a:hover,
.main-nav>ul>li.current-menu-item>a {
   background: #f7fafc;
   color: #0084ff
}

/* Dropdown Arrow */
.main-nav .menu-item-has-children>a::after {
   content: '\f107';
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   font-size: 10px;
   margin-left: 4px;
   transition: transform 0.3s ease
}

.main-nav .menu-item-has-children:hover>a::after {
   transform: rotate(180deg)
}

/* Dropdown Menu */
.main-nav .sub-menu {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   padding: 12px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all 0.3s ease;
   z-index: 1000;
   list-style: none;
   display: grid;
   grid-template-columns: repeat(4, auto) !important;
   gap: 8px;
   width: max-content
}

.main-nav .menu-item-has-children:hover>.sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.main-nav .sub-menu li {
   margin: 0
}

.main-nav .sub-menu a {
   display: block;
   padding: 10px 16px;
   font-size: 13px;
   font-weight: 500;
   color: #2d3748;
   border-radius: 8px;
   white-space: nowrap;
   transition: all 0.2s ease;
   text-align: center;
   background: #f8fafc
}

.main-nav .sub-menu a:hover {
   background: #0084ff;
   color: #fff
}

/* Search Form */
.header-search-form {
   display: flex;
   align-items: center;
   position: relative;
   width: 280px;
   height: 42px;
   background: #fff;
   border: 2px solid #cbd5e1;
   border-radius: 999px;
   padding: 0 12px;
   margin-left: 16px;
   transition: border-color .25s, box-shadow .25s
}

.header-search-form:focus-within {
   border-color: #2563eb;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .15)
}

.header-search-input {
   flex: 1;
   min-width: 0;
   border: 0 !important;
   background: none !important;
   padding: 0 !important;
   margin: 0 !important;
   height: 40px;
   line-height: 40px;
   font-size: 14px;
   color: #1e293b;
   outline: none !important;
   box-shadow: none !important
}

.header-search-input::placeholder {
   color: #94a3b8
}

.header-search-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   flex-shrink: 0;
   background: transparent;
   border: 0;
   padding: 0;
   margin: 0;
   color: #64748b;
   font-size: 16px;
   cursor: pointer;
   border-radius: 50%;
   transition: color .2s, background .2s
}

.header-search-btn:hover {
   color: #2563eb;
   background: #eff6ff
}

/* Header Buttons Container */
.header-buttons {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: 12px;
}

.header-buttons button {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: #f1f5f9;
   border-radius: 10px;
   cursor: pointer;
   font-size: 16px;
   color: #64748b;
   transition: all 0.2s ease;
}

.header-buttons button:hover {
   background: #e2e8f0;
   color: #0084ff;
}

.header-buttons .lang-toggle .lang-code {
   font-size: 13px;
   font-weight: 600;
   color: #64748b;
}

.header-buttons .lang-toggle:hover .lang-code {
   color: #0084ff;
}

/* Hide mobile-only buttons on desktop */
.header-buttons .mobile-search-toggle,
.header-buttons .mobile-menu-toggle {
   display: none;
}

/* Responsive */
@media (max-width: 768px) {
   .main-nav {
      display: none
   }

   .header-search-form {
      display: none
   }

   .header-buttons .mobile-search-toggle,
   .header-buttons .mobile-menu-toggle {
      display: flex;
   }
}