/* header--responsive.css */
/* Base enhancements */
.Header{transition:background .25s ease, border-color .25s ease, box-shadow .25s ease}
.Header:hover{background:rgba(255,255,255,.9);border-bottom-color:rgba(14,42,71,.1)}

/* Brand hover */
.Brand{transition:opacity .2s ease, transform .2s ease}
.Brand:hover{opacity:.95}
.Brand__logo{transition:transform .25s ease}
.Brand:hover .Brand__logo{transform:scale(1.04)}

/* Nav links */
.Nav__menu a{position:relative;display:inline-block;padding:.35rem .2rem;border-radius:.5rem}
.Nav__menu a::after{content:"";position:absolute;left:10%;right:10%;bottom:.25rem;height:2px;border-radius:2px;background:currentColor;opacity:0;transform:scaleX(.6);transition:opacity .18s ease, transform .18s ease}
.Nav__menu a:hover::after{opacity:.6;transform:scaleX(1)}

/* Desktop spacing */
@media (min-width: 901px){
  .Nav__menu{padding:0;background:transparent;border:0}
  .Nav__menu li + li{margin-left:.6rem}
}

/* Toggle affordance */
.Nav__toggle{transition:background .2s ease, transform .2s ease}
.Nav__toggle:active{transform:scale(.98)}

/* Size presets */
:root{
  --header-h:68px;
  --header-h-lg:76px;
}
@media (min-width: 1280px){
  .Header__inner{min-height:var(--header-h-lg)}
  .Brand__title{font-size:1.05rem}
}

/* Layout breakpoints */
/* Ultra wide: add more spacing */
@media (min-width: 1600px){
  .Header__inner{gap:1.25rem}
  .Nav__menu{gap:1.6rem}
}

/* Tablet optimizations */
@media (max-width: 1024px){
  .Header__inner{gap:.8rem}
  .Nav__menu{gap:1rem}
}

/* Mobile menu polish */
@media (max-width: 900px){
  .Nav__menu{backdrop-filter:blur(12px) saturate(140%)}
  .Nav__menu a{padding:.6rem .7rem}
}

/* Small phones */
@media (max-width: 360px){
  .Brand__title{font-size:1rem}
}

/* Very narrow heights: compact header */
@media (max-height: 520px){
  .Header__inner{min-height:58px}
}

/* Pointer coarse (touch) specific tweaks */
@media (pointer:coarse){
  .Nav__menu a{padding:.55rem .6rem}
}