/*=====================================
Howard Gipstein Premium Header CSS
(Fully Responsive - Cleaned Version)
======================================*/

body{
    background:#000000;
}

.hg-header,
.hg-header *{
    box-sizing:border-box;
}


.hg-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;

    background:rgba(9,9,9,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(201,160,75,.15);
}


.admin-bar .hg-header{
    top:32px;
}

@media(max-width:782px){

.admin-bar .hg-header{
    top:46px;
}

}

/* Container */
.hg-container{
    max-width:1400px;
    margin:auto;
    padding:18px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
}

/* Spacer — pushes whatever content follows the shortcode down by
   exactly the header's real height, so the fixed header never
   overlaps content. Scoped to right after the header only, so it
   never touches body/theme layout or conflicts with theme spacing. */
.hg-header-spacer{
    display:block;
    width:100%;
    height:var(--hg-header-height, 100px);
}

/* Logo */


.hg-logo{
    flex-shrink:0;
}

.hg-logo a{
    text-decoration:none;
    color:#C8A04D;
    font-size:34px;
    font-family:Georgia, serif;
    font-style:italic;
    font-weight:500;
    transition:.3s;
    white-space:nowrap;
}

.hg-logo a:hover,
.hg-logo a:focus-visible{
    color:#f3d78d;
}

/* Optional uploaded image logo (Customizer). Falls back to the
   text logo above when no image has been set. */
.hg-logo-img{
    display:block;
    height:42px;
    width:auto;
    max-width:220px;
    object-fit:contain;
}

.hg-logo {
    font-size: 34px;
    font-family: Georgia,serif;
    font-style: italic;
    color: #c8a04d;
    margin-bottom: -14px;
}
/*=====================================
Nav wrapper (collapsible on mobile)
======================================*/
/* Invisible pass-through box on desktop — children behave as if
   they were direct children of .hg-container. Becomes a sliding
   sidebar drawer on mobile/tablet (see 991px media query). */


input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
    border: 1px solid #000000 !important;
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
    width: 100%;
}



.hg-nav-collapse,
.hg-nav-collapse-inner{
    display:contents;
}

.hg-nav{
    display:flex;
    align-items:center;
    gap:45px;
    flex:1;
    min-width:0;
}

.hg-nav ul{
    list-style:none;
    display:flex;
    gap:38px;
    margin:0;
    padding:0;
    flex-wrap:wrap;
}

.hg-nav ul li{
    margin:0;
}

.hg-nav ul li a{
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;
    transition:.3s;
    position:relative;
    display:inline-block;
    padding:6px 0;
}

/* underline */
.hg-nav ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:#C8A04D;
    transition:.35s;
}

.hg-nav ul li a:hover,
.hg-nav ul li a:focus-visible{
    color:#C8A04D;
}

.hg-nav ul li a:hover::after,
.hg-nav ul li a:focus-visible::after{
    width:100%;
}

.hg-nav ul li.current-menu-item > a{
    color:#C8A04D;
}

.hg-nav ul li.current-menu-item > a::after{
    width:100%;
}

/* Search */
.hg-search{
    display:flex;
    align-items:center;
    border:1px solid rgba(201,160,75,.30);
    border-radius:50px;
    overflow:hidden;
    flex-shrink:0;
    margin:0;
}

.hg-search input{
    width:180px;
    border:none;
    outline:none;
    background:#050000;
    color:#fff;
    padding:13px 18px;
    font-size:14px;
    min-width:0;
}

.hg-search input::placeholder{
    color:#aaa;
}

.hg-search button{
    border:none;
    cursor:pointer;
    padding:13px 24px;
    background:#5d4a27;
    color:#fff;
    font-weight:700;
    letter-spacing:1px;
    transition:.35s;
    white-space:nowrap;
}

.hg-search button:hover,
.hg-search button:focus-visible{
    background:#C8A04D;
    color:#111;
}

.screen-reader-text{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    white-space:nowrap;
}

/* ==========================================
   Mobile Toggle Button (single definition)
========================================== */

.hg-toggle{
    display:none !important;
    width:46px;
    height:46px;
    padding:0;
    margin:0;
    margin-left:auto;
    border:none;
    background:transparent;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    position:relative;
    flex-shrink:0;
    z-index:1001;
}

.hg-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:0;
    background:#ffffff;
    border-radius:30px;
    transition:all .35s ease;
}

.hg-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.hg-toggle.active span:nth-child(2){
    opacity:0;
}

.hg-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* ==========================================
   Mobile Menu Overlay
========================================== */

.hg-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:998;
}

.hg-overlay.active{
    opacity:1;
    visibility:visible;
}

body.hg-menu-open{
    overflow:hidden;
}

/* ==========================================
   Tablet & Mobile (single unified breakpoint)
========================================== */
@media(max-width:991px){

    .hg-container{
        flex-wrap:nowrap;
    }

    .hg-toggle{
        display:flex !important;
    }

    .hg-nav-collapse{
        display:block;
        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:90%;
        height:100vh;
        background:#0b0b0d;
        transition:right .4s ease;
        overflow-y:auto;
        z-index:999;
        box-shadow:-10px 0 35px rgba(0,0,0,.35);
    }

    .hg-nav-collapse.active{
        right:0;
    }

    .hg-nav-collapse-inner{
        display:block;
        padding:90px 25px 40px;
    }

    .hg-nav{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
        width:100%;
    }

    .hg-nav ul{
        list-style:none;
        width:100%;
        flex-direction:column;
        gap:4px;
        margin:0;
        padding:0;
    }

    .hg-nav ul li{
        width:100%;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hg-nav ul li:last-child{
        border-bottom:none;
    }

    .hg-nav ul li a{
        display:block;
        width:100%;
        padding:16px 4px;
        font-size:16px;
        font-weight:500;
    }

    .hg-nav ul li a::after{
        display:none;
    }

    .hg-nav ul li a:hover{
        color:#D4A857;
        padding-left:10px;
    }

    .hg-search{
        width:100%;
        margin-top:30px;
        border:none;
        border-radius:0;
        flex-direction:column;
        gap:12px;
    }

    .hg-search input{
        width:100%;
        padding:14px 15px;
        border:1px solid rgba(255,255,255,.12);
        background:#181818;
        color:#fff;
        border-radius:8px;
    }

    .hg-search button{
        width:100%;
        padding:14px;
        border-radius:8px;
        background:#D4A857;
        color:#000;
        font-weight:600;
    }

    .hg-search button:hover,
    .hg-search button:focus-visible{
        background:#f1c66b;
        color:#000;
    }

}

/*==========================
Mobile
===========================*/
@media(max-width:768px){

    .hg-container{
        padding:15px 20px;
    }

    .hg-logo a{
        font-size:28px;
    }

    .hg-logo-img{
        height:34px;
    }

    /* Fallback (pre-JS) spacer height for this breakpoint — the
       header is shorter on mobile once the nav collapses behind the
       toggle button. JS overrides this immediately via
       --hg-header-height once it runs. */
    .hg-header-spacer{
        height:var(--hg-header-height, 76px);
    }

}

/*==========================
Small Mobile
===========================*/
@media(max-width:480px){

    .hg-container{
        padding:14px 15px;
    }

    .hg-logo a{
        font-size:24px;
    }

    .hg-logo-img{
        height:30px;
    }

    .hg-nav-collapse{
        width:100%;
        max-width:100%;
    }

}

/*==========================
Extra Small Mobile
===========================*/
@media(max-width:360px){

    .hg-logo a{
        font-size:20px;
    }

    .hg-nav-collapse-inner{
        padding:80px 18px 30px;
    }

}