/**
 * LWP New Header Styles
 * 
 * Complete header system with new IDs and classes - no conflicts with old header.
 * Only loads when new header customizer settings are active.
 * 
 * @package Love_Words_Press_Full
 */

/* ==========================================================================
   New Header Base Structure
   ========================================================================== */

#lwp-new-header {
    width: 100%;
    position: relative;
    z-index: 1000;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--lwp-navbar-bg, transparent);
}

.lwp-navbar {
    padding: 0 !important;
    margin: 0 !important;
}

#lwp-new-header .container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    background: transparent !important;
}

.lwp-navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 1.5rem;
}

.lwp-navbar-brand img {
    max-height: 125px;
    width: auto;
}

.lwp-navbar-toggler {
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--lwp-navbar-text-color, white);
}

/* Hide toggler on desktop (992px and above) */
@media (min-width: 992px) {
    .lwp-navbar-toggler {
        display: none !important;
    }
}

.lwp-navbar-toggler i {
    font-size: 1.5rem;
    color: var(--lwp-navbar-text-color, white);
}

.lwp-collapse {
    display: none;
}

.lwp-collapse.show {
    display: block;
}

.lwp-navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lwp-navbar-nav .nav-item {
    margin: 0 0.75rem;
}

.lwp-navbar-nav .lwp-nav-link a {
    text-decoration: none;
    color: var(--lwp-navbar-text-color, white);
    padding: 0.5rem 1rem;
    display: block;
}

.lwp-navbar-nav .lwp-nav-link a:hover {
    opacity: 0.8;
}

.lwp-sm-icons {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.lwp-sm-icons .lwp-nav-link {
    margin: 0 0.075rem;
}

.lwp-sm-icons .lwp-nav-link a {
    font-size: 1.25rem;
    padding: 0.5rem 0.35rem;
}

.lwp-search-form {
    margin-left: 1rem;
}

/* ==========================================================================
   New Header Layout Variants
   ========================================================================== */

/* Layout 1: Logo Left, Nav Right */
#lwp-new-header .lwp-layout-horizontal .container {
    flex-direction: row !important;
}

.lwp-layout-horizontal .lwp-navbar-brand {
    order: 1 !important;
    margin-right: var(--lwp-spacing, 2rem);
}

.lwp-layout-horizontal .lwp-navbar-toggler {
    order: 2 !important;
    margin-left: auto !important;
}

.lwp-layout-horizontal .lwp-collapse {
    order: 3 !important;
}

.lwp-layout-horizontal .lwp-sm-icons {
    margin-left: auto !important;
}

/* Override spacing variants for social icons in horizontal layout */
.lwp-layout-horizontal.lwp-spacing-compact .lwp-sm-icons,
.lwp-layout-horizontal.lwp-spacing-normal .lwp-sm-icons,
.lwp-layout-horizontal.lwp-spacing-spacious .lwp-sm-icons {
    margin-left: auto !important;
}

/* Layout 2: Logo Right, Nav Left */
.lwp-layout-reverse .lwp-container {
    flex-direction: row !important;
}

.lwp-layout-reverse .lwp-navbar-brand {
    order: 3 !important;
    margin-left: auto !important;
}

.lwp-layout-reverse .lwp-navbar-toggler {
    order: 2 !important;
}

.lwp-layout-reverse .lwp-collapse {
    order: 1 !important;
}

/* ==========================================================================
   New Header Height Variants
   ========================================================================== */

/* Compact Height (80px) */
.lwp-height-compact #lwp-new-header {
    min-height: 80px !important;
}

.lwp-height-compact .lwp-navbar {
    padding: 0.5rem 1rem !important;
}

.lwp-height-compact .lwp-navbar-brand img {
    max-height: 48px !important;
}

.lwp-height-compact .lwp-navbar-brand {
    font-size: 1.2rem !important;
}

/* Normal Height (120px) */
.lwp-height-normal #lwp-new-header {
    min-height: 120px !important;
}

.lwp-height-normal .lwp-navbar {
    padding: 0.75rem 1rem !important;
}

.lwp-height-normal .lwp-navbar-brand img {
    max-height: 80px !important;
}

.lwp-height-normal .lwp-navbar-brand {
    font-size: 1.4rem !important;
}

/* Tall Height (180px) */
.lwp-height-tall #lwp-new-header {
    min-height: 180px !important;
}

.lwp-height-tall .lwp-navbar {
    padding: 1rem 1rem !important;
}

.lwp-height-tall .lwp-navbar-brand img {
    max-height: 120px !important;
}

.lwp-height-tall .lwp-navbar-brand {
    font-size: 1.6rem !important;
}

/* ==========================================================================
   New Header Spacing Variants
   ========================================================================== */

/* Compact Spacing */
.lwp-spacing-compact .lwp-navbar-brand {
    margin-right: 1rem !important;
}

.lwp-spacing-compact .lwp-navbar-nav {
    margin-left: 1rem !important;
}

.lwp-spacing-compact .lwp-navbar-toggler {
    margin-left: 1rem !important;
}

/* Normal Spacing */
.lwp-spacing-normal .lwp-navbar-brand {
    margin-right: 2rem !important;
}

.lwp-spacing-normal .lwp-navbar-nav {
    margin-left: 2rem !important;
}

.lwp-spacing-normal .lwp-navbar-toggler {
    margin-left: 2rem !important;
}

/* Spacious Spacing */
.lwp-spacing-spacious .lwp-navbar-brand {
    margin-right: 3rem !important;
}

.lwp-spacing-spacious .lwp-navbar-nav {
    margin-left: 3rem !important;
}

.lwp-spacing-spacious .lwp-navbar-toggler {
    margin-left: 1rem !important;
}

/* Force social icons to the far right in horizontal layout, overriding spacing variants */
#lwp-new-header.lwp-layout-horizontal .lwp-navbar-nav.lwp-sm-icons {
    margin-left: auto !important;
}

/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */

@media (max-width: 991.98px) {
    .lwp-collapse {
        background: transparent !important;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 0.25rem;
    }
    
    .lwp-height-compact .lwp-collapse {
        padding: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    .lwp-height-normal .lwp-collapse {
        padding: 1rem !important;
        margin-top: 1rem !important;
    }
    
    .lwp-height-tall .lwp-collapse {
        padding: 1.5rem !important;
        margin-top: 1.5rem !important;
    }
    
    .lwp-navbar-brand img {
        max-height: 40px !important;
    }
    
    .lwp-height-compact .lwp-navbar-brand img {
        max-height: 32px !important;
    }
    
    .lwp-height-normal .lwp-navbar-brand img {
        max-height: 48px !important;
    }
    
    .lwp-height-tall .lwp-navbar-brand img {
        max-height: 80px !important;
    }
    
    .lwp-navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }
    
    .lwp-navbar-nav .lwp-nav-link {
        width: 100%;
        text-align: center;
    }
    
    .lwp-sm-icons {
        flex-direction: row !important;
        justify-content: center;
        margin-top: 1rem;
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   Fixed Header Positions
   ========================================================================== */

.lwp-new-header.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.lwp-new-header.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* ==========================================================================
   Accessibility & Focus States
   ========================================================================== */

.lwp-navbar-nav .lwp-nav-link a:focus,
.lwp-navbar-nav .lwp-nav-link a:hover {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    #lwp-new-header {
        min-height: auto !important;
    }
    
    #lwp-new-header .lwp-navbar-brand img {
        max-height: 100px !important;
    }
}
/* ==========================================================================
   Bluesky Butterfly Icon (global - works in header, sidebar, footer)
   ========================================================================== */

.bi-butterfly::before {
    content: "\1F98B";
    font-size: 22px;
    line-height: 10px;
    filter: grayscale(100%);
}