/*
========================================================
GDJ Header System — Layout & Interaction Styles
--------------------------------------------------------
Purpose:
Defines structural layout and responsive behavior
for the custom WooCommerce header system.

Includes:
- Header container & alignment
- Logo sizing rules
- Unified circular button system
- Cart badge positioning
- Expandable search row animation
- Overlay behavior
- Side menu slide-in panel
- Responsive breakpoints

Version: 1.0
========================================================
*/

/* ===============================
   HEADER LAYOUT
================================ */

html {
    -webkit-text-size-adjust:100%;
}

/* PREVENT HORIZONTAL SCROLL */
html, body {
    overflow-x:hidden;
}

.gdj-inner {
    max-width:100%;
}

.gdj-header {
    width:100%;
    background:#eee;
    overflow:hidden;

}

.gdj-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 2em;
    min-height:5em;
}

.gdj-left,
.gdj-right {
    display:flex;
    align-items:center;
    gap:1.5em;
    min-width: 15em;
}

/* ===============================
   LOGO (FIXED SIZE)
================================ */
.custom-logo-link img {
    height:56px;
    width:auto;
    display:block;
}

body .gdj-header img {
    max-width: 56px;
    height: 56px;
}

/* ===============================
   UNIFIED BUTTON SYSTEM (4em)
================================ */

.gdj-btn {
    width:56px;
    height:56px;
    border-radius:50%;
    border:0.1em solid #135266;
    background:#fff;
    color:#135266;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    transition:0.25s ease;
    text-decoration:none;
}

.gdj-btn:hover {
    background:#135266;
    color:#fff;
}

.gdj-btn svg {
    width:1.8em;
    height:1.8em;
}

/* ===============================
   CART BADGE
================================ */

.gdj-cart-count {
    position:absolute;
    top:-0.3em;
    right:-0.3em;
    background:#135266;
    color:#fff;
    font-size:1.5em;
    padding:0.3em 0.5em;
    border-radius:50%;
    line-height:1;
    display: block;
}

.gdj-cart-count.hidden {
    display: none;
}

/* ===============================
   SEARCH ROW
================================ */

.gdj-search-row {
    display: flex;
    justify-content: end;
    overflow: hidden;
    max-height:0;
    opacity:0;
    gap:1em;
    min-width: 20em;
    transition:max-height 0.4s ease, opacity 0.3s ease;
}

.gdj-search-row.active {
    max-height:8em;
    opacity:1;
    padding:1em 2em;
}

.gdj-search-row input {
    border:1px solid #eee;
    border-radius:2em;
    padding:0.5em 1em;
    font-size:1em;
    width: 50%;
    outline: none;
}

.gdj-search-row input:focus {
    border:1px solid #135266;
}

.gdj-search-row button {
    border:none;
    border-radius:2em;
    padding:1;
    background:#135266;
    color:#fff;
    cursor:pointer;
    width: 5%;
    min-width: 6em;
}

/* ===============================
   OVERLAY
================================ */

.gdj-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    transition:0.3s ease;
    z-index:1000;
}

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

/* ===============================
   SIDE MENU
================================ */
.gdj-side-menu {
    position:fixed;
    top:0;
    left:0;
    width:60vw;
    max-width:40em;
    height:100vh;
    background:#fff;
    transform:translateX(-100%);
    transition:0.3s ease;
    z-index:1002;
    display: flex;
    flex-direction: column;
}

.gdj-side-menu.active {
    transform:translateX(0);
}

.gdj-close-btn {
    background:none;
    border:none;
    font-size:2em;
    cursor:pointer;
    color:#135266;
}

#menuClose {
    align-self: flex-end; 
    margin-right: 1em; 
    margin-top: 1em
}

#productSearchBtn {
    border-radius: 0.33rem;
}

#productSearchBtn:hover {
    background: #0780A5;
}

/* MOBILE */
@media (max-width:840px){
    .gdj-search-row input {
        width: 80%;
    }
}

@media (max-width:500px){
    .gdj-inner {
        padding: 0 1em;
    }

    .gdj-left {
        min-width: 8em;
        gap: 0.5em;
    }

    .gdj-right {
        min-width: 10em;
        gap: 0.5em;
    }

    .gdj-search-row.active {
        padding: 0.5em 1em;
    }

    .gdj-side-menu {
        width: 90vw;
    }

     .gdj-inner {
        padding:0 1em;
    }

    .gdj-left,
    .gdj-right {
        gap:1em;
    }

    .gdj-btn {
        width:45px;
        height:45px;
    }

    body .gdj-header img,
    .custom-logo-link img {
        height: 45px;
    }
}