/* assets/css/nb-header.css */
/* Namespaced nb- header CSS (copy exactly) */

/* Limit header styling only to our header area */
.nb-header-wrapper {
  --nb-bg:#000;
  --nb-submenu-bg:#fff;
  --nb-submenu-text:#000;
  --nb-accent:#008b8b;
  --nb-header-text:#fff;
  --nb-max-width:1300px;
  --nb-row1-height:78px;
  --nb-row2-height:64px;
  --nb-sticky-height:64px;
}

/* reset only inside our header */
.nb-header-wrapper * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
  -webkit-font-smoothing: antialiased;
}

/* container */
.nb-wrap { max-width:var(--nb-max-width); margin:0 auto; padding:0 20px; width:100%; display:flex; align-items:center; position:relative; }

/* header base */
header.nb-header { background:var(--nb-bg); color:var(--nb-header-text); border-bottom:1px solid rgba(255,255,255,0.04); }

/* Row 1 */
.nb-row-top { display:flex; justify-content:center; align-items:center; height:var(--nb-row1-height); position:relative; }
.nb-row-top .nb-wrap { justify-content:center; }
.nb-row-top .nb-logo img { height:50px; display:block; margin:0 auto; }
.nb-row-top .nb-cart { position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; }

/* Row 2 */
.nb-row-bottom { display:flex; justify-content:center; align-items:center; height:var(--nb-row2-height); position:relative; }
.nb-row-bottom .nb-wrap { justify-content:center; align-items:center; position:relative; }
nav.nb-main { display:flex; align-items:center; justify-content:center; }
nav.nb-main ul { display:flex; list-style:none; gap:36px; margin:0; padding:0; align-items:center; }
nav.nb-main > ul > li { position:relative; }
nav.nb-main > ul > li > a { font-weight:600; font-size:15px; color:var(--nb-header-text); line-height:1; display:inline-flex; align-items:center; gap:8px; }
nav.nb-main > ul > li > a:hover { color:var(--nb-accent); }

/* search (right) */
.nb-row-bottom .nb-search { position:absolute; right:20px; top:50%; transform:translateY(-50%); }

/* Target the WordPress search form elements inside our custom container */
.nb-search .search-form { display: flex; align-items: center; } 
.nb-search .screen-reader-text,
.nb-search .search-submit { 
    /* Hide default WordPress elements we don't need */
    display: none !important; 
    visibility: hidden;
}
/* Style the actual input field (.search-field) to match the original static input styling */
.nb-search .search-field { 
    background:#000; 
    border:1px solid #222; 
    padding:8px 12px; 
    border-radius:4px; 
    color:var(--nb-header-text); 
    width:220px;
}
.nb-search .search-field::placeholder { color:#bdbdbd; }

/* Sticky header */
.nb-sticky { position:fixed; top:0; left:0; right:0; background:var(--nb-bg); display:none; align-items:center; height:var(--nb-sticky-height); box-shadow:0 8px 30px rgba(0,0,0,0.55); transition:transform .22s ease,opacity .18s; z-index:1500; }
.nb-sticky.active { display:flex; }
.nb-sticky .nb-wrap { display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.nb-sticky .nb-logo img { height:40px; }
.nb-sticky nav.nb-main { flex:1; display:flex; justify-content:center; }
.nb-sticky nav.nb-main ul { gap:20px; }
.nb-sticky .nb-search { margin-left:12px; }
.nb-sticky .nb-search .search-field { width:180px; padding:6px 10px; }

/* Submenu panel */
.nb-submenu-panel { display:flex; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--nb-submenu-bg); color:var(--nb-submenu-text); width:520px; padding:16px; gap:12px; border-radius:8px; align-items:flex-start; box-shadow:0 18px 40px rgba(0,0,0,0.12); opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:1400; }
.has-sub.open > .nb-submenu-panel { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* The a tags inside nb-submenu-left are direct children */
.nb-submenu-left { flex:1; display:flex; flex-direction:column; gap:1px; }
.nb-submenu-left a { color:var(--nb-submenu-text); padding:8px 10px; border-radius:6px; font-weight:600; display:inline-block; }
.nb-submenu-left a:hover, .nb-submenu-left a:focus, .nb-submenu-left a.active { color:var(--nb-accent); background:rgba(0,139,139,0.06); }
.nb-submenu-right { flex:1; display:flex; align-items:center; justify-content:center; padding-left:6px; }
.nb-submenu-right img { width:100%; max-width:300px; height:260px; object-fit:cover; border-radius:8px; border:1px solid rgba(0,0,0,0.06); transition: opacity .16s ease; }
.nb-submenu-panel::before { content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:var(--nb-submenu-bg); box-shadow:0 6px 14px rgba(0,0,0,0.06); }
.nb-chev { width:14px; height:14px; display:inline-block; transition:transform .18s ease; opacity:.95; vertical-align:middle; }
.has-sub.open > a .nb-chev, .has-sub.open > a .nb-chev * { transform:rotate(180deg); color:var(--nb-accent); }

/* mobile */
.nb-mobile-top { display:none; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--nb-bg); border-bottom:1px solid rgba(255,255,255,0.06); /*position:fixed; top:0; left:0; right:0*/; z-index:2000; }
.nb-mobile-top .nb-logo img { height:40px; }
.nb-btn-hamb { font-size:26px; background:none; border:none; color:var(--nb-header-text); cursor:pointer; }
@media(max-width:900px){ 
    /* FIX: Hides horizontal scroll caused by fixed elements exceeding viewport width */
    body {
        overflow-x: hidden; 
    }
    .nb-row-top,.nb-row-bottom{display:none} 
    .nb-mobile-top{display:flex} 
    .nb-sticky{display:none !important} 
}

/* mobile drawer */
.nb-mobile-drawer { position:fixed; top:0; left:-100%; width:320px; height:100%; background:#0b0b0b; transition:left .32s ease; padding:18px; overflow:auto; z-index:2100; box-shadow:6px 0 28px rgba(0,0,0,0.45) }
.nb-mobile-drawer.open { left:0 }
.nb-mobile-drawer header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.nb-mobile-drawer header img { height:36px }
.nb-mobile-drawer button { background:none; border:none; color:#fff; font-size:20px; cursor:pointer }
.nb-mobile-drawer nav ul { list-style:none; padding:0; margin:0 }

/* --- Mobile Menu Styling (Fixed for WP nested UL/LI structure) --- */

/* Target only the top-level LI items */
.nb-mobile-drawer nav > ul > li { 
    border-bottom: none; /* Reset border from original code */
}

/* Apply separator to all links in the drawer */
.nb-mobile-drawer a { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:14px 8px; 
    color:#fff; 
    font-weight:600;
    border-bottom: 1px solid #1a1a1a;
}
/* Remove border from the last link in the drawer */
.nb-mobile-drawer nav > ul > li:last-child > a { 
    border-bottom: none;
}


.nb-mobile-drawer a:hover { color:var(--nb-accent) }

/* Mobile chevron styling (now added by function.php) */
.nb-mobile-drawer .mobile-chev { width:16px; height:16px; margin-left:10px; transition:transform .3s ease; }
.nb-mobile-drawer .has-sub-mobile.open > a .mobile-chev { transform:rotate(180deg); }

/* Mobile submenu accordion content (the nested UL is .sub-menu) */
.nb-mobile-drawer .sub-menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; /* Hidden by default, shown by JS */
}
/* Style links inside the sub-menu to indent */
.nb-mobile-drawer .sub-menu > li > a {
    padding-left: 20px; /* Indent sub-menu link */
    color: #cfcfcf; /* Lighter text for submenu items */
    font-weight: 500;
}
/* Remove border from the last submenu link */
.nb-mobile-drawer .sub-menu > li:last-child > a {
    border-bottom: none;
}

/* Open state for accordion */
.nb-mobile-drawer li.open > .sub-menu { 
    display: block; 
}