/* ============================================================
   LOFENT - HEADER CSS
   ============================================================ */

/* ---- Skip Link ---- */
.skip-link {
    position: absolute; top: -100px; left: 16px;
    background: var(--primary); color: var(--white);
    padding: 8px 16px; border-radius: 0 0 8px 8px;
    font-size: 14px; font-weight: 600; z-index: 99999;
    transition: top 0.3s;
}
.skip-link:focus { top: 0; }

/* ---- Header Base ---- */
.lofent-header {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 80px; z-index: 9999;
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;
    display: flex; align-items: center;
}
.lofent-header.scrolled {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
    height: 70px;
}

/* ---- Header Inner ---- */
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px;
}

/* ---- Logo ---- */
.header-logo { flex-shrink: 0; }
.header-logo a {
    display: flex; align-items: center; gap: 10px;
    transition: transform 0.3s;
}
.header-logo a:hover { transform: scale(1.04); }
.header-logo img { height: 50px; width: auto; }
.logo-text {
    font-size: 24px; font-weight: 800;
    color: var(--text-dark); letter-spacing: -0.5px;
}
.logo-text span { color: var(--primary); }
.lofent-header.scrolled .logo-text { color: var(--text-dark); }

/* ---- Nav Menu ---- */
.header-nav {
    display: flex; align-items: center;
    flex: 1; justify-content: center;
}
.nav-menu {
    display: flex; align-items: center; gap: 4px;
}
.nav-menu li { position: relative; }
.nav-menu li a {
    display: block; padding: 8px 14px;
    font-size: 15px; font-weight: 500;
    color: var(--text-dark);
    border-radius: 8px;
    transition: color 0.25s, background 0.25s;
    white-space: nowrap;
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a {
    color: var(--primary);
}
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a {
    position: relative;
}
.nav-menu li.current-menu-item > a::after,
.nav-menu li.current_page_item > a::after {
    content: ''; position: absolute; bottom: 2px; left: 14px;
    right: 14px; height: 2px;
    background: var(--primary); border-radius: 2px;
}

/* ---- Dropdown ---- */
.nav-menu .menu-item-has-children > a::before {
    content: '▾'; margin-left: 4px; font-size: 12px;
}
.nav-menu .sub-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 200px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    z-index: 100;
}
.nav-menu .menu-item-has-children:hover .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu .sub-menu a {
    padding: 10px 20px; border-radius: 0;
    font-size: 14px;
}
.nav-menu .sub-menu a:hover { background: var(--light-bg); }

/* ---- Header CTA ---- */
.header-cta { flex-shrink: 0; }
.header-cta .btn {
    padding: 10px 28px; font-size: 15px;
}

/* ---- Hamburger ---- */
.hamburger {
    display: none; flex-direction: column; justify-content: space-between;
    width: 28px; height: 20px;
    background: none; border: none; cursor: pointer;
    padding: 0; z-index: 10000;
}
.hamburger span {
    display: block; width: 100%; height: 2px;
    background: var(--text-dark); border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: center;
}
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---- Mobile Menu ---- */
.mobile-menu {
    position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px);
    background: var(--white); z-index: 9998;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-nav { padding: 16px 0; flex: 1; }
.mobile-nav a {
    display: block; padding: 16px 24px;
    font-size: 17px; font-weight: 500;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border);
    transition: color 0.25s, background 0.25s;
}
.mobile-nav a:hover,
.mobile-nav li.current-menu-item > a { color: var(--primary); background: var(--light-bg); }

.mobile-cta {
    padding: 24px;
    border-top: 1px solid var(--border);
}
.mobile-cta .btn { width: 100%; justify-content: center; }

/* ---- Body padding for fixed header ---- */
body { padding-top: 80px; }

/* ---- Transparent header pages (no extra top padding) ---- */
.page-template-front-page body { padding-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .header-nav { display: none; }
    .header-cta { display: none; }
    .hamburger { display: flex; }
}
@media (max-width: 768px) {
    body { padding-top: 70px; }
    .lofent-header { height: 70px; }
    .mobile-menu { top: 70px; height: calc(100vh - 70px); }
    .header-logo img { height: 40px; }
    .logo-text { font-size: 20px; }
}