/* SellerApp blog header — scoped to plugin output only */

body:has(#sellerapp-header-root) .position-relative > header.sticky-bar.bg-gray-900 {
    display: none !important;
}

/* Hide duplicate theme mobile drawer (rendered inside hidden site-header) */
body:has(#sellerapp-header-root) .position-relative > .mobile-header-active {
    display: none !important;
}

body:has(#sellerapp-header-root) {
    padding-top: 0 !important;
}

/* Theme wrapper overflow breaks position:sticky on header stack */
body:has(#sellerapp-header-root) > .position-relative {
    overflow: visible !important;
}

/* Theme hero bar is re-rendered inside plugin header — hide duplicate */
body:has(#sellerapp-header-root) > .dh-hero-bar-wrap {
    display: none !important;
}

.sellerapp-header-actions a.right-action-btn-wrap:not(.sellerapp-theme-mobile a){
    color: #fff !important;
}

.sellerapp-header-stack.is-scrolled {
    top: 46px !important;
}

#sellerapp-header-root .sellerapp-hero-bar-wrap p {
    margin: 0;
    color: #14202e;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

#sellerapp-header-root .sellerapp-hero-bar-wrap a {
    color: #14202e !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-weight: 500;
}

#sellerapp-header-root .sellerapp-hero-bar-wrap a:hover {
    color: #0f172a !important;
}

#sellerapp-header-root .sellerapp-hero-bar-wrap strong,
#sellerapp-header-root .sellerapp-hero-bar-wrap b,
#sellerapp-header-root .sellerapp-hero-bar-wrap .hero-badge,
#sellerapp-header-root .sellerapp-hero-bar-wrap span[style*="background"] {
    display: inline-block;
    background: #0f172a !important;
    color: #fff !important;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none !important;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Hero + nav stack — fixed to the top like sellerapp.com/blog */
#sellerapp-header-root .sellerapp-header-stack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11111;
    width: 100%;
    display: flex;
    flex-direction: column;
}

body.admin-bar #sellerapp-header-root .sellerapp-header-stack {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #sellerapp-header-root .sellerapp-header-stack {
        top: 46px;
    }
}

#sellerapp-header-root .sellerapp-header-stack.is-scrolled .sellerapp-blog-header {
    box-shadow: 0 8px 24px oklch(16% 0.03 220 / 0.08);
}

/* Mobile — hide hero bar when scrolling down (nav stays in stack) */
@media (max-width: 1023px) {
    #sellerapp-header-root .sellerapp-hero-bar-wrap.dh-hero-bar-wrap.is-scroll-hidden {
        display: none;
    }
}

#sellerapp-header-root .sellerapp-header-spacer {
    height: 0;
    pointer-events: none;
}

#sellerapp-header-root .sellerapp-blog-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 1;
    width: 100%;
    flex-shrink: 0;
    transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* Legacy class — scroll shadow handled on .sellerapp-header-stack.is-scrolled */
#sellerapp-header-root .sellerapp-blog-header.is-stuck {
    position: relative;
    box-shadow: none;
}

@keyframes sellerappHeaderFadeIn {
    from {
        opacity: 0.92;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Theme logo in header bar */
#sellerapp-header-root .sellerapp-header-logo {
    max-width: 160px;
    line-height: 0;
}

#sellerapp-header-root .sellerapp-header-logo img {
    max-height: 36px;
    width: auto;
    height: auto;
}

/* Theme mobile drawer lives in plugin output */
#sellerapp-header-root .sellerapp-theme-mobile.mobile-header-active {
    display: block !important;
}

/* WP primary menu — Lovable nav styles */
#sellerapp-header-root .sellerapp-main-menu,
#sellerapp-header-root .sellerapp-main-menu ul {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
}

#sellerapp-header-root .sellerapp-main-menu > li {
    position: relative;
}

#sellerapp-header-root .sellerapp-main-menu > li.has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.35rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    vertical-align: middle;
    opacity: 0.6;
}

/* Hover bridge — keeps submenu open across the gap */
#sellerapp-header-root .sellerapp-main-menu > li.has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.625rem;
    background: transparent;
}

#sellerapp-header-root .sellerapp-submenu {
    display: none;
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 0;
    min-width: 16rem;
    max-width: 22rem;
    margin: 0;
    padding: 0.5rem;
    background: var(--background, oklch(100% 0 0));
    border: 1px solid var(--line, oklch(92% 0.012 200));
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px oklch(16% 0.03 220 / 0.12);
    z-index: 100001;
}

#sellerapp-header-root .sellerapp-main-menu > li.has-children:hover > .sellerapp-submenu,
#sellerapp-header-root .sellerapp-main-menu > li.has-children:focus-within > .sellerapp-submenu {
    display: block;
}

#sellerapp-header-root .sellerapp-submenu li {
    margin: 0;
    position: relative;
}

#sellerapp-header-root .sellerapp-submenu .sellerapp-submenu {
    top: 0;
    left: 100%;
    padding-top: 0.5rem;
}

#sellerapp-header-root .sellerapp-submenu-link {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-soft, oklch(38% 0.02 220));
    border-radius: 0.375rem;
    white-space: normal;
    line-height: 1.35;
}

#sellerapp-header-root .sellerapp-submenu-icon {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    margin-top: 0.35rem;
    visibility: visible !important;
    opacity: 1 !important;
}

#sellerapp-header-root .sellerapp-submenu-icon-img,
#sellerapp-header-root .sellerapp-submenu-icon svg {
    display: block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

#sellerapp-header-root .sellerapp-submenu-link:hover .sellerapp-submenu-icon-img {
    opacity: 1;
}

#sellerapp-header-root .sellerapp-submenu-text {
    flex: 1;
    min-width: 0;
}

#sellerapp-header-root .sellerapp-submenu-link:hover {
    color: var(--brand, oklch(66% 0.16 165));
    background: var(--surface, oklch(98.5% 0.006 180));
}

#sellerapp-header-root.sellerapp-sections-layout .sellerapp-submenu-link .sellerapp-submenu-icon {
    color: #64748b !important;
}

#sellerapp-header-root .menu-fallback .navbar-nav {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Search trigger pill */
#sellerapp-header-root .sellerapp-header-search-trigger {
    cursor: pointer;
    user-select: none;
}

#sellerapp-header-root .sellerapp-header-search-trigger:hover {
    border-color: var(--brand, oklch(66% 0.16 165));
}

#sellerapp-header-root .sellerapp-header-search-trigger kbd {
    pointer-events: none;
}

/* Search popup overlay */
#search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 1.5rem 1.5rem;
    background: oklch(16% 0.03 220 / 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#search-overlay.active {
    display: flex;
}

#search-overlay .search-modal-panel {
    width: 100%;
    max-width: 36rem;
    background: var(--background, oklch(100% 0 0));
    border: 1px solid var(--line, oklch(92% 0.012 200));
    border-radius: 1rem;
    box-shadow: 0 24px 48px -12px oklch(16% 0.03 220 / 0.18);
    overflow: hidden;
}

#search-overlay .search-modal-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line, oklch(92% 0.012 200));
}

#search-overlay .search-modal-head input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--ink, oklch(16% 0.03 220));
}

#search-overlay .search-modal-close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--line, oklch(92% 0.012 200));
    color: var(--muted-foreground, oklch(52% 0.02 220));
    transition: background-color 0.15s;
    cursor: pointer;
    background: transparent;
}

#search-overlay .search-modal-close:hover {
    background: var(--surface, oklch(98.5% 0.006 180));
}

#search-overlay #search-results-area {
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
}

#search-overlay #search-empty-state {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground, oklch(52% 0.02 220));
    margin: 0;
}

#search-overlay #search-empty-state.hidden {
    display: none;
}

#search-overlay #search-results-list.hidden {
    display: none;
}

#search-overlay .search-result-item {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

#search-overlay .search-result-item:hover,
#search-overlay .search-result-item.selected {
    background: var(--surface, oklch(98.5% 0.006 180));
}

#search-overlay .search-result-item .item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink, oklch(16% 0.03 220));
}

#search-overlay .search-result-item .item-meta {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground, oklch(52% 0.02 220));
}

[data-theme="dark"] #search-overlay {
    background: oklch(0% 0 0 / 0.55);
}

/* Theme dark mode switcher (GenZ) */
#sellerapp-header-root .switch-button {
    display: inline-flex;
    align-items: center;
    padding: 0 0 0 0.25rem;
}

#sellerapp-header-root .switch-button .form-switch {
    padding-left: 0;
    margin: 0;
    min-height: auto;
    display: inline-flex;
    align-items: center;
}

#sellerapp-header-root .switch-button .form-check-input {
    width: 40px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    background-color: var(--muted-foreground, oklch(52% 0.02 220));
    border-color: var(--line, oklch(92% 0.012 200));
    background-size: 18px;
}

#sellerapp-header-root .switch-button .form-check-input:checked {
    background-color: var(--ink, oklch(16% 0.03 220));
    border-color: var(--ink, oklch(16% 0.03 220));
}

/* Theme mobile drawer — restore GenZ menu link colors (overrides layout link inherit) */
#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .mobile-menu li a,
#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .mobile-menu li ul li a {
    color: var(--genz-color-gray-500, #94A9C9) !important;
    font-size: var(--genz-font-md, 16px);
    font-family: var(--genz-font-text, "Noto Sans", sans-serif) !important;
    font-weight: 500;
    text-transform: capitalize;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .mobile-menu li ul li a {
    font-size: var(--genz-font-sm, 14px);
    padding-left: 10px;
}

#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .mobile-menu li:hover > a {
    color: var(--genz-color-gray-500, #94A9C9) !important;
    padding-left: 3px;
}

#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .mobile-menu li ul li:hover a {
    padding-left: 13px;
}

#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .site-copyright,
#sellerapp-header-root.sellerapp-sections-layout .sellerapp-theme-mobile .site-copyright a {
    color: var(--genz-color-gray-400, #7F92B0) !important;
}

/* Theme burger icon in header */
#sellerapp-header-root .burger-icon {
    cursor: pointer;
}

.sticky-bar.stick{
    margin-top: 0 !important;
}