/* Header */
:root{
  --site-shell-max: 1200px;
  --site-shell-padding: 20px;
}
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(15,15,15,.06);
}
.header-inner{
  max-width:var(--site-shell-max); margin-inline:auto; padding:12px var(--site-shell-padding);
  display:flex; align-items:center; gap:16px;
}
.brand{font-weight:800; letter-spacing:.2px; color:var(--brand); font-size:clamp(18px,2vw,22px); text-decoration:none}
.nav{
  margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.nav a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14px;
  padding:8px 10px; border-radius:10px;
}
.nav a:hover{background:var(--card)}
.lang a{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted);
  padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.08);
}
.lang img{width:18px; height:12px; object-fit:cover}

/* fine-tune language pills to look premium */
.lang a{border-color:rgba(0,0,0,.07); background:linear-gradient(180deg,#fff, #f8f9fa)}
.lang a:hover{background:#fff}

/* Menu button (hidden on desktop) */
.btn-menu{
  display:none; margin-left:auto; align-items:center; justify-content:center; gap:7px;
  padding:8px 16px; height:auto;
  border:none; border-radius:8px;
  background:var(--accent); color:#fff;
  font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
}
.btn-menu:hover{ background:#d03d2c; }
.menu-icon, .menu-icon::before, .menu-icon::after{
  display:block; width:16px; height:2px; background:#fff; border-radius:2px; position:relative;
}
.menu-icon::before, .menu-icon::after{content:""; position:absolute; left:0}
.menu-icon::before{top:-5px}
.menu-icon::after{top:5px}

/* Unified logo sizing */
:root{ --logo-h: 60px }
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px; color:var(--brand); text-decoration:none;
}
.brand .logo{ display:block; height:var(--logo-h); width:auto }
.brand .brand-copy{display:grid; gap:2px; line-height:1.05}
.brand .brand-title{display:block; font-weight:900; color:var(--brand); font-size:20px; letter-spacing:0}
.brand .brand-subtitle{display:block; color:var(--ink); font-size:15px; font-weight:600; letter-spacing:0}

@media (max-width:880px){
  .brand .brand-copy{ display:grid }
  .brand .brand-title{ font-size:26px }
  .brand .brand-subtitle{ font-size:17px }
  :root{ --logo-h: 60px }
}

/* If your header is translucent, keep logo crisp atop blur */
.header .brand .logo{ image-rendering:auto }

/* Offcanvas header brand */
.offcanvas.mobile-nav .brand{ color:var(--brand); font-weight:800; font-size:18px }
.offcanvas.mobile-nav .brand .logo{ height:26px }

/* Optional: dark-mode white logo */
@media (prefers-color-scheme: dark){
  .brand .logo.is-dark-swap{ content: url("/images/branding/bct-logo-white.svg"); }
}