/* Ensure the display font is available */
@font-face {
  font-family: 'HelveticaNeueExtended';
  src: url('HelveticaNeueLTPro-93BlackExtended.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}


/* ===== Header Styling  ===== */

.mw-search-btn{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f52ba, #1a237e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #fff;
}
.mw-search-btn i{ font-size: 1rem; color: #fff; }
.mw-search-btn:hover{ filter: brightness(1.06); }

/* Icons */
.mw-icon-link{
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mw-text);
  text-decoration: none;
}
.mw-icon-link:hover{ color: #0f52ba; }
.mw-badge{
  font-size: .65rem;
  padding: .30rem .39rem;
  border: 2px solid var(--mw-bg); 
}

/* Categories row */
.mw-categories{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: .25rem 0 .75rem;
  background: var(--mw-bg);
}
.mw-cat-list{
  display: flex;
  justify-content: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto; 
  scrollbar-width: none;
}
.mw-cat-list::-webkit-scrollbar{ display: none; }
.mw-cat-list a{
  color: var(--mw-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.mw-cat-list a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.mw-cat-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 3px; 
  background: linear-gradient(135deg, #0f52ba, #1a237e); 
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.mw-cat-list a:hover::after {
  transform: scaleX(1);
}


/* Offcanvas theming for mobile menu */
.mw-offcanvas{ background: #111; }
.mw-hamburger{ line-height: 1; }



/* narrow screens */
@media (max-width: 767.98px){
  .mw-search-input{ height: 52px; }
  .mw-search-btn{ height: 40px; width: 40px; right: 8px; }
}

/* ===== Offcanvas (mobile/tablet) ===== */



/* Accent tokens (reuse your header gradient colours) */
.mw-offcanvas{
  --mw-oc-accent1: #0f52ba;
  --mw-oc-accent2: #1a237e;
  --mw-oc-bg: var(--mw-bg, #0f0f0f);
  --mw-oc-text: var(--mw-text, #f5f5f5);
  --mw-oc-muted: rgba(255,255,255,.6);
  --mw-oc-hover: rgba(255,255,255,.06);

  background: linear-gradient(135deg, #0f52ba, #1a237e);
  color: var(--mw-oc-text);
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(0,0,0,.55);
}

.mw-display{
  font-family: 'HelveticaNeueExtended', Arial, sans-serif;
  font-weight: 900;
}

/* Width feels nicer a tad wider than default on larger phones */
@media (min-width: 576px){
  .mw-offcanvas{ width: 320px; }
}

/* Header: title in display font + subtle divider */
.mw-offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-block: 14px;
}
/* offcanvas.css */
.mw-offcanvas .offcanvas-title{
  font-family: 'HelveticaNeueExtended', Arial, sans-serif !important;
  font-weight: 900 !important;     
  font-synthesis: none;            
  letter-spacing: .4px;
  text-transform: uppercase;
}


.mw-offcanvas .btn-close{
  filter: invert(1) grayscale(1);
  opacity: .9;
}
.mw-offcanvas .btn-close:focus{
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}

/* Body spacing */
.mw-offcanvas .offcanvas-body{
  padding-top: 16px;
  padding-bottom: 20px;
}

/* Menu list: comfy targets, pill hover, chevron affordance */
.mw-offcanvas .offcanvas-body ul{
  margin: 0;
}
.mw-offcanvas .offcanvas-body li{
  list-style: none;
}
.mw-offcanvas .offcanvas-body a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--mw-oc-text);
  text-decoration: none;
  line-height: 1.15;
  transition: background-color .18s ease, transform .18s ease, color .18s ease;
  position: relative;
}

/* Left accent on hover using the header gradient */
.mw-offcanvas .offcanvas-body a::before{
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: #fff;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Right chevron (Font Awesome) for affordance */
.mw-offcanvas .offcanvas-body a::after{
  content: "\f054"; /* Font Awesome chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto;
  font-size: .875rem;
  opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
}

/* States: hover/focus/active */
.mw-offcanvas .offcanvas-body a:hover,
.mw-offcanvas .offcanvas-body a:focus-visible{
  background: var(--mw-oc-hover);
}
.mw-offcanvas .offcanvas-body a:hover::before,
.mw-offcanvas .offcanvas-body a:focus-visible::before{
  opacity: 1;
  transform: translateX(0);
}
.mw-offcanvas .offcanvas-body a:hover::after{
  transform: translateX(2px);
  opacity: .85;
}


.mw-offcanvas .offcanvas-body a.active{
  background: linear-gradient(135deg, rgba(15,82,186,.16), rgba(26,35,126,.16));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.mw-offcanvas .offcanvas-body a.active::before{
  opacity: 1;
  transform: translateX(0);
}

/* Section labels */
.mw-oc-label{
  margin: 6px 2px 8px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mw-oc-muted);
}

/* Search box inside offcanvas */
.mw-offcanvas .mw-search{
  position: relative;
  margin-bottom: 14px;
}
.mw-offcanvas .mw-search-input{
  background: #121212;
  color: var(--mw-oc-text);
  border: 1px solid rgba(255,255,255,.12);
}
.mw-offcanvas .mw-search-input::placeholder{ color: rgba(255,255,255,.5); }
.mw-offcanvas .mw-search-input:focus{
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.mw-offcanvas .mw-search-btn{
  background: linear-gradient(135deg, var(--mw-oc-accent1), var(--mw-oc-accent2));
}

/* Backdrop tint to feel cohesive with the gradient brand */
.offcanvas-backdrop.show{
  background: radial-gradient(80% 80% at 20% 10%, rgba(15,82,186,.25), rgba(26,35,126,.25)) , #000;
  opacity: .65;
}

/* Accessibility focus ring for keyboard users on links */
.mw-offcanvas .offcanvas-body a:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

/* Support very small screens: keep large tap targets */
@media (max-width: 360px){
  .mw-offcanvas .offcanvas-body a{
    padding: 12px 12px;
    border-radius: 12px;
  }
}

@media (max-width: 991.98px) {
  .mw-offcanvas.offcanvas-start {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    border-right: none;
    border-radius: 0;
  }
}
.mw-offcanvas {
  margin-top: var(--warn-h); 
  height: calc(100vh - var(--warn-h)); 
}