/* =========================
   Sharp Shot Picks – Nav (scoped)
   ========================= */
:root{
  --teal: rgb(0,191,165);
  --teal-20: rgba(0,191,165,.2);
  --ink: #e9fdfa;
}

/* ---------- Desktop / Base ---------- */
.ssp-nav{ position: relative; }
.ssp-nav #nav-menu{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0;
}
.ssp-nav #nav-menu > li{ position:relative; }

.ssp-nav #nav-menu > li > a{
  color: var(--teal);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 6px; text-decoration:none; border-radius:10px;
  transition: color .18s ease;
}
.ssp-nav #nav-menu > li > a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px;
  height:2px; background: var(--teal);
  transform: scaleX(0); transform-origin:left; transition:.22s ease;
  border-radius:2px; opacity:.9;
}
.ssp-nav #nav-menu > li > a:hover{ color:#fff; }
.ssp-nav #nav-menu > li > a:hover::after{ transform: scaleX(1); }

.ssp-nav #nav-menu > li.current-menu-item > a,
.ssp-nav #nav-menu > li.current-page-ancestor > a,
.ssp-nav #nav-menu > li.active > a{
  color:#000; background: var(--teal);
  box-shadow: 0 0 0 1px var(--teal-20), 0 6px 18px -8px var(--teal);
}
.ssp-nav .dropdown{
  display:block; position:absolute; top:75%; left:0; min-width:220px;
  padding:10px; margin-top:10px; background: rgba(0,0,0,.9);
  border:1px solid var(--teal); border-radius:12px;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 999;
}
.ssp-nav .dropdown li{ list-style:none; }
.ssp-nav .dropdown a{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; color: var(--ink); font-size:15px; border-radius:8px;
}
.ssp-nav .dropdown a:hover{ background: var(--teal); color:#000; }
.ssp-nav .has-dropdown:hover > .dropdown,
.ssp-nav .has-dropdown:focus-within > .dropdown{
  opacity:1; visibility:visible; transform: translateY(0);
}

/* Hamburger (hidden on desktop) */
.ssp-nav #hamburger-toggle{
  display:none; position:absolute; top:-15px; right: 0px; left:-45px;
  width:34px; height:28px; border:0; background:transparent; cursor:pointer;
  z-index: 10060;
}
.ssp-nav #hamburger-toggle span{
  position:absolute; left:0; right:0; height:3px; background: var(--teal);
  border-radius:2px; transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.ssp-nav #hamburger-toggle span:nth-child(1){ top:4px; }
.ssp-nav #hamburger-toggle span:nth-child(2){ top:12px; }
.ssp-nav #hamburger-toggle span:nth-child(3){ top:20px; }
.ssp-nav #hamburger-toggle.is-open span:nth-child(1){ top:12px; transform: rotate(45deg); }
.ssp-nav #hamburger-toggle.is-open span:nth-child(2){ opacity:0; }
.ssp-nav #hamburger-toggle.is-open span:nth-child(3){ top:12px; transform: rotate(-45deg); }

/* ---------- Mobile ---------- */
@media (max-width:768px){
  /* show burger; do NOT change your header/logo sizing at all */
  .ssp-nav #hamburger-toggle{ 
    display:block; 
  }

  /* off-canvas drawer */
  .ssp-nav #nav-menu{
    position: fixed;
    inset: 0 0 0 0;
    flex-direction: column;
    align-items:flex-start; gap:8px;
    padding: 88px 22px 24px;          /* leave room for header area */
    background: rgba(0,0,0,.96);
    transform: translateX(-100%) !important;  /* closed */
    transition: transform .26s ease;
    z-index: 10055;
  }
  .ssp-nav #nav-menu.show{ transform: translateX(0) !important;} /* open */

  /* dropdowns expand inline when parent <li> has .open */
  .ssp-nav .has-dropdown > .dropdown{ display:none !important; position: static !important; margin:6px 0 10px; border:1px dashed var(--teal); border-radius:10px; background:rgba(0,0,0,.75); opacity:1; visibility:visible; transform:none; }
  .ssp-nav .has-dropdown.open > .dropdown{ display:block !important; }
}

/* accessibility & reduced motion */
.ssp-nav #nav-menu a:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:10px; }
@media (prefers-reduced-motion: reduce){ .ssp-nav #nav-menu *{ transition:none !important; animation:none !important; } }
body.nav-open{ overflow:hidden; }


.site-branding {
    margin-right: 32px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
@media screen and (max-width: 1299px) {
    .site-branding {
        margin-right: 25px;
    }
    .site-branding img {
        max-width: 120px;
    }
}
@media screen and (max-width: 1024px) {
        .site-branding {
        margin: 0;
        order: 2;
        text-align: center;
    }
    .site-branding .site-tagline {
        display: block;
        margin: 0 auto;
        width: 141px;
    }
    .site-branding .widget,
    .site-branding p {
        margin: 0;
    }
}

@media screen and (max-width: 767px) {
        .site-branding {
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .site-branding a img {
        width: 65px;
    }
    .site-branding .site-tagline {
        width: 115px;
    }
}    

.site-branding .site-tagline {
    display: none;
}

.custom-logo-link {
    display: inline-block;
    max-width: 15%;
    position: relative;
}
@media (max-width: 1024px) {
    .custom-logo-link {
        margin-bottom: 10px;
    }
}
.site-header {
    background: #000;
    /*padding: 18px 50px 10px;*/
    align-items: center;
    position: relative;
    z-index: 20;
}