/*
 * Provcon Sticky Header
 * Structural / positional rules only.
 * All colour, height, and opacity values are generated as inline CSS by PHP
 * (build_inline_css) so they can be overridden from the settings page without
 * touching this file.
 */

/* -----------------------------------------------
 * BASE: Fixed positioning when sticky is active
 * ----------------------------------------------- */
#site-header.provcon-is-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    /* Do NOT set width: 100% — on pages with a scrollbar, 100% on a fixed
       element is viewport-minus-scrollbar which is narrower than the normal
       header, causing content to shift left. left:0 + right:0 stretches
       correctly to the full viewport including the scrollbar gutter. */
    z-index: 9999;
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, height 0.3s ease;
}

/* -----------------------------------------------
 * TRANSPARENT HEADER OVERRIDES
 * OceanWP transparent header uses position: absolute
 * and has no background. When sticky, switch to fixed.
 * ----------------------------------------------- */
.has-transparent-header #site-header.provcon-is-sticky,
.transparent-header #site-header.provcon-is-sticky,
#site-header.transparent-header.provcon-is-sticky {
    position: fixed !important;
}

/* Let OceanWP's own .wrap (max-width + margin:auto) handle horizontal
   centering inside the sticky header. We must NOT set display:flex here
   because it breaks the .wrap centering and shifts content left. */
#site-header.provcon-is-sticky #site-header-inner {
    height: inherit !important;
    min-height: inherit !important;
}

/* Logo image sizing only — do not alter display/flex on the containers */
#site-header.provcon-is-sticky #site-logo img {
    vertical-align: middle;
}

/* Dropdown menus should not inherit sticky height */
#site-header.provcon-is-sticky #site-navigation-wrap .dropdown-menu ul li a {
    line-height: 1.5 !important;
    height: auto !important;
}

/* Cart icon alignment — does NOT set display so we never override OceanWP's
   desktop hide rule for the mobile menu icon */
#site-header.provcon-is-sticky #oceanwp-cart-sidebar-wrap,
#site-header.provcon-is-sticky .wcmenucart-cart-icon {
    align-items: center;
}

/* -----------------------------------------------
 * MOBILE MENU ICON — responsive visibility
 * OceanWP shows the hamburger at ≤ 959 px.
 * Reinforce that it is always hidden on desktop,
 * even when the sticky class is active.
 * ----------------------------------------------- */
@media (min-width: 960px) {
    #site-header .oceanwp-mobile-menu-icon {
        display: none !important;
    }
}

/* Smooth height transition for shrink mode */
#site-header #site-logo #site-logo-inner,
#site-header .oceanwp-social-menu .social-menu-inner {
    transition: height 0.3s ease;
}

/* -----------------------------------------------
 * LOGO: Sizing + swap
 * ----------------------------------------------- */

/* Hide sticky logo until sticky is active */
#site-header .provcon-sticky-logo,
#site-logo .provcon-sticky-logo {
    display: none !important;
}

/* Keep logo link on one row */
#site-logo #site-logo-inner a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* When sticky: show sticky logo, hide original */
#site-header.provcon-is-sticky .provcon-sticky-logo,
#site-header.provcon-is-sticky #site-logo .provcon-sticky-logo {
    display: inline-block !important;
    width: auto !important;
    transition: max-height 0.3s ease;
}

#site-header.provcon-is-sticky .provcon-original-logo,
#site-header.provcon-is-sticky #site-logo .custom-logo:not(.provcon-sticky-logo),
#site-header.provcon-is-sticky #site-logo img:not(.provcon-sticky-logo) {
    display: none !important;
}

/* Retina logo: hidden by default, browser picks via srcset */
#site-header.provcon-is-sticky .custom-logo-link img.ocean-retina-logo {
    display: none !important;
}

/* -----------------------------------------------
 * Spacer to prevent content jump
 * ----------------------------------------------- */
.provcon-sticky-spacer {
    display: block;
    visibility: hidden;
}

/* For transparent headers, no spacer needed */
.has-transparent-header .provcon-sticky-spacer,
.transparent-header .provcon-sticky-spacer {
    display: none !important;
}

/* -----------------------------------------------
 * EFFECT: Slide (entrance from top)
 * ----------------------------------------------- */
#site-header.provcon-is-sticky.provcon-effect-slide {
    transform: translateY(-100%);
    opacity: 0;
}

#site-header.provcon-is-sticky.provcon-effect-slide.provcon-slide-in {
    transform: translateY(0);
    opacity: 1;
}

/* -----------------------------------------------
 * EFFECT: Show Up / Hide Down
 * ----------------------------------------------- */
#site-header.provcon-is-sticky.provcon-effect-show-up-hide-down {
    transform: translateY(0);
    transition: transform 0.3s ease;
}

#site-header.provcon-is-sticky.provcon-effect-show-up-hide-down.provcon-hidden {
    transform: translateY(-100%);
}

/* -----------------------------------------------
 * SHADOW CONTROL (structural override)
 * ----------------------------------------------- */
#site-header.provcon-is-sticky.provcon-no-shadow {
    box-shadow: none !important;
}

/* -----------------------------------------------
 * FULL-WIDTH: override handled via inline CSS,
 * but top-bar needs a matching rule
 * ----------------------------------------------- */
#top-bar-wrap.provcon-topbar-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

/* -----------------------------------------------
 * MOBILE HEADER
 * ----------------------------------------------- */
@media screen and (max-width: 959px) {
    #site-header.provcon-is-sticky #site-header-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* -----------------------------------------------
 * WP ADMIN BAR OFFSET
 * ----------------------------------------------- */
.admin-bar #site-header.provcon-is-sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #site-header.provcon-is-sticky {
        top: 46px;
    }
}

/* -----------------------------------------------
 * PRINT: Don't stick header
 * ----------------------------------------------- */
@media print {
    #site-header.provcon-is-sticky {
        position: relative !important;
        transform: none !important;
    }
    .provcon-sticky-spacer {
        display: none !important;
    }
}