/* ═══════════════════════════════════════════════════════════
   Tipster.news — Custom header (semantic, sticky, accessible)
   Palette: navy #0B1C31 / #162B46 · accent blue #04B3FB · lime #CBFF00
   Font: Roboto (site font), nav in bold italic to match original brand.
   ═══════════════════════════════════════════════════════════ */
:root{
  --tn-navy:#0B1C31; --tn-navy2:#162B46;
  --tn-blue:#0a6ec0; --tn-blue-bright:#04B3FB; --tn-lime:#CBFF00;
  --tn-line:#e6edf5;
}
.tn-header{position:sticky;top:0;z-index:1000;width:100%;}
.tn-header *{box-sizing:border-box;}
.tn-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;}

/* ── Main bar ── */
.tn-bar--main{background:#fff;border-bottom:1px solid var(--tn-line);transition:box-shadow .2s ease;}
.tn-header.tn-scrolled .tn-bar--main{box-shadow:0 4px 20px rgba(11,28,49,.10);}
.tn-bar--main .tn-container{min-height:72px;}
.tn-logo{flex:0 0 auto;display:flex;align-items:center;margin-right:auto;}
.tn-logo img{height:50px;width:auto;display:block;}
.tn-logo a{color:var(--tn-navy);font-weight:800;font-style:italic;font-size:20px;text-decoration:none;}

/* ── Primary nav (desktop: right aligned) ── */
.tn-nav{flex:0 1 auto;}
.tn-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(14px,2vw,28px);}
.tn-menu a{position:relative;display:block;padding:20px 2px;color:var(--tn-navy);
  font-weight:800;font-style:italic;font-size:14px;letter-spacing:.4px;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:color .15s ease;}
.tn-menu a::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:3px;border-radius:3px;
  background:var(--tn-blue-bright);transform:scaleX(0);transform-origin:center;transition:transform .18s ease;}
.tn-menu a:hover,.tn-menu a:focus-visible{color:var(--tn-blue);}
.tn-menu a:hover::after,.tn-menu a:focus-visible::after,.tn-menu a[aria-current="page"]::after{transform:scaleX(1);}
.tn-menu a[aria-current="page"]{color:var(--tn-blue);}

/* ── Hamburger ── */
.tn-toggle{display:none;flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  padding:11px 10px;border-radius:8px;align-items:center;flex-direction:column;justify-content:center;}
.tn-toggle:hover{background:#f0f4f9;}
.tn-toggle__bar{display:block;height:2.5px;width:22px;background:var(--tn-navy);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;}
.tn-toggle__bar+.tn-toggle__bar{margin-top:5px;}
.tn-header.is-open .tn-toggle__bar:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.tn-header.is-open .tn-toggle__bar:nth-child(2){opacity:0;}
.tn-header.is-open .tn-toggle__bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ── Quick-access bar (compact pills) ── */
.tn-bar--quick{background:var(--tn-navy);}
.tn-quick ul{list-style:none;margin:0;padding:8px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tn-quick a{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:8px;
  color:#cfe0f0;font-weight:600;font-size:12.5px;letter-spacing:.2px;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;}
.tn-quick a:hover,.tn-quick a:focus-visible{color:#fff;border-color:var(--tn-blue-bright);background:rgba(4,179,251,.16);}
.tn-quick .tn-ico{opacity:.85;flex:0 0 auto;}
.tn-quick a:hover .tn-ico{opacity:1;}

/* ── Focus visibility ── */
.tn-header a:focus-visible,.tn-toggle:focus-visible{outline:3px solid var(--tn-blue-bright);outline-offset:2px;border-radius:4px;}
.tn-overlay{display:none;}

/* ═══ Mobile ═══ */
@media (max-width:900px){
  .tn-bar--main .tn-container{justify-content:space-between;gap:10px;}
  .tn-toggle{display:flex;}

  /* off-canvas drawer */
  .tn-nav{position:fixed;top:0;right:0;height:100dvh;width:min(82vw,320px);background:#fff;
    box-shadow:-8px 0 30px rgba(11,28,49,.25);transform:translateX(105%);transition:transform .25s ease;
    z-index:1002;overflow-y:auto;padding:70px 16px 24px;}
  .tn-header.is-open .tn-nav{transform:translateX(0);}
  .tn-menu{flex-direction:column;align-items:stretch;gap:0;}
  .tn-menu a{padding:14px 6px;min-height:48px;border-bottom:1px solid #eef2f7;font-size:15px;}
  .tn-menu a::after{display:none;}
  .tn-menu a[aria-current="page"]{border-left:4px solid var(--tn-blue-bright);padding-left:12px;background:#f4f9ff;}

  .tn-overlay{display:block;position:fixed;inset:0;background:rgba(11,28,49,.5);z-index:1001;border:0;}
  .tn-overlay[hidden]{display:none;}

  /* quick bar scrollable */
  .tn-quick ul{flex-wrap:nowrap;overflow-x:auto;padding:7px 0 9px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .tn-quick ul::-webkit-scrollbar{display:none;}
}
body.tn-noscroll{overflow:hidden;}
@media (prefers-reduced-motion:reduce){.tn-header *{transition:none!important;}}

/* ── Fix: prevent quick-bar from forcing horizontal overflow on mobile ── */
.tn-bar--quick .tn-container{display:block;}
.tn-quick{min-width:0;}
.tn-quick ul{margin:0;}
html,body{overflow-x:clip;}

/* ── Brand font: Montserrat (uppercase bold italic) ── */
.tn-menu a,.tn-logo a{font-family:"Montserrat","Roboto",sans-serif;}