/*==========================================================
  NEXIA UI FRAMEWORK
  HEADER
  Version: 4.1
==========================================================*/

header.wp-block-template-part.nx-smart-header{

    background:var(--nx-header-bg);

    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:1000;

    border:none;

    transition:
        transform var(--nx-smart-header-motion-duration, var(--nx-header-transition)),
        background-color var(--nx-header-transition),
        box-shadow var(--nx-header-transition),
        border-color var(--nx-header-transition);

    will-change:transform;

    /* JS changes this value per state: hide is deliberately slower than reveal. */
    --nx-smart-header-motion-duration:var(--nx-header-transition);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

/*==========================================================
  SMART HEADER SPACER

  The header is fixed so it can slide completely out of the
  viewport. A small framework-owned spacer preserves the
  original document flow and prevents content from jumping.
==========================================================*/

.nx-smart-header-spacer{
    display:block;
    width:100%;
    height:var(--nx-smart-header-height,84px);
    margin:0;
    padding:0;
    pointer-events:none;
    visibility:hidden;
}

/* Keep the spacer visually inert while preserving layout. */
.nx-smart-header-spacer[aria-hidden="true"]{
    user-select:none;
}

/* Logged-in WordPress users have the admin bar above the site. */
@media (min-width:783px){
    body.admin-bar header.wp-block-template-part.nx-smart-header{
        top:32px;
    }
}

@media (max-width:782px){
    body.admin-bar header.wp-block-template-part.nx-smart-header{
        top:46px;
    }
}

/*==========================================================
  SMART HEADER
==========================================================*/

/* State transforms are GPU-friendly and are the only geometry property animated. */
header.wp-block-template-part.nx-smart-header.nx-smart-header--hidden{
    transform:translate3d(0,-105%,0) !important;
}

header.wp-block-template-part.nx-smart-header.nx-smart-header--revealed{
    transform:translate3d(0,0,0) !important;
}

/*
 * WordPress' mobile Navigation overlay is position:fixed. A transformed
 * ancestor, a non-none filter/backdrop-filter, or will-change:transform
 * can turn the header into that fixed element's containing block. That
 * would confine the overlay to the header height. While WordPress owns
 * the open overlay, the Smart Header temporarily stops establishing a
 * containing block. No overlay geometry or behavior is changed here.
 */
header.wp-block-template-part.nx-smart-header.nx-smart-header--overlay-open{
    transform:none !important;
    will-change:auto !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
    perspective:none !important;
    transition:none !important;
}

/*==========================================================
  SCROLLED / FLOATING STATE
==========================================================*/

header.wp-block-template-part.nx-smart-header.nx-smart-header--scrolled{

    background:var(--nx-header-scrolled-bg);

    border-bottom:1px solid var(--nx-header-scrolled-border);

    box-shadow:var(--nx-header-scrolled-shadow);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

/*==========================================================
  MAIN HEADER ROW
==========================================================*/

header.wp-block-template-part > .wp-block-group{

    min-height:84px;

    padding:18px 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

/*==========================================================
  LOGO
==========================================================*/

.wp-block-site-logo{
    display:flex;
    align-items:flex-start;
    flex-shrink:0;
    margin:0;
}

.wp-block-site-logo img{
    display:block;
    width:auto;
    height:auto;
    max-height:64px;
}

/*==========================================================
  DESKTOP NAVIGATION
==========================================================*/

@media (min-width:992px){

    header.wp-block-template-part
    .wp-block-navigation{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:32px;
        margin-left:auto;
    }

    header.wp-block-template-part
    .wp-block-navigation-item{
        position:relative;
        display:flex;
        align-items:center;
    }

    header.wp-block-template-part
    .wp-block-navigation-item__content{
        display:flex;
        align-items:center;
        gap:4px;
        font-size:var(--nx-font-size-md);
        font-weight:var(--nx-weight-semibold);
    }
}

header.wp-block-template-part
.wp-block-navigation-item__content{
    color:var(--nx-text);
    text-decoration:none;
    transition:color var(--nx-transition);
}

header.wp-block-template-part
.wp-block-navigation-item__content:hover{
    color:var(--nx-primary);
}

/*==========================================================
  RIGHT SIDE
==========================================================*/

header .wp-block-group.is-content-justification-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
    flex-shrink:0;
}

/*==========================================================
  HEADER ICONS
==========================================================*/

.wp-block-woocommerce-customer-account,
.wc-block-mini-cart,
.nx-dark-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:var(--nx-text);
    transition:
        color var(--nx-transition),
        transform var(--nx-transition);
}

.wp-block-woocommerce-customer-account:hover,
.wc-block-mini-cart:hover,
.nx-dark-toggle:hover{
    color:var(--nx-primary);
}

/*==========================================================
  GET STARTED BUTTON
==========================================================*/

.nx-btn{
    min-height:44px;
    padding:0 26px;
    margin-left:14px;
}

/*==========================================================
  MOBILE
==========================================================*/

@media (max-width:991px){

    header.wp-block-template-part > .wp-block-group{
        padding:16px 20px;
        gap:20px;
    }

    header .nx-btn{
        display:none;
    }
}

/*==========================================================
  REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    /*
     * Accessibility: honour the user preference by removing motion,
     * while keeping hide/reveal state changes functional.
     */
    header.wp-block-template-part.nx-smart-header{
        --nx-smart-header-motion-duration:0ms;
        transition:none !important;
    }
}