/* === Cognimat: masthead (complete) === */
html { scrollbar-gutter: stable; }

#masthead {
  position: sticky;
  top: var(--admin-bar-offset, 0px);
  z-index: 1000;
  background: var(--dark-gray);
  color: #fff;
  width: 100%;
  max-width: 100vw;         /* nigdy szerzej niż viewport */
  box-sizing: border-box;
  overflow-x: hidden;

  padding: 0 20px;
}

/* Grid: 1/5 | 3/5 | 1/5 */
#masthead {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  gap: 16px;
  padding-block: 16px; /* expanded */
  transition: padding-block .18s ease;
}
#masthead.shrink { padding-block: 8px; }

/* Ensure columns can shrink properly */
#masthead > .logo-section,
#masthead > .header-center,
#masthead > .header-right { min-width: 0; }

/* Left: logo + text w jednym rzędzie */
#masthead .logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* === LOGO 50×50 — wrapper linku + obraz === */
/* standardowy wrapper WP */
#masthead .site-branding .custom-logo-link,
#masthead .logo-section .custom-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  line-height: 0; /* bez dodatkowej wysokości inline */
}

/* fallback: gdyby link nie miał klasy custom-logo-link */
#masthead .logo-section > a:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  line-height: 0;
}

/* samo IMG — musi przegrać z globalnym img{height:auto}, więc dajemy !important */
#masthead .site-branding img,
#masthead img.custom-logo,
#masthead .logo-section > a:first-child img,
#masthead .custom-logo-link > img {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* Teksty obok logo */
#masthead .logo-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
#masthead .logo-text .site-title { font-size: 1.6rem; font-weight: 800; color: var(--accent-color); line-height: 1; }
#masthead .logo-text .site-motto { color: #ccc; font-size: .9rem; line-height: 1.1; }

/* W trybie 'shrink' ukryj podtytuł (zostaje tylko logo + Cognimat) */
#masthead.shrink .logo-text .site-motto { display: none; }

/* Center: menu + search */
#masthead .header-center { display:grid; grid-template-columns: auto 1fr; gap: 14px; align-items:center; }
#masthead .category-menu { display:flex; flex-wrap:nowrap; gap: 18px; white-space:nowrap; }
#masthead .category-menu a { color: var(--accent-color); font-weight: 700; text-decoration:none; }

#masthead .search-bar { position:relative; }
#masthead .search-bar input[type="text"],
#masthead .search-bar input[type="search"] {
  width:100%;
  border:0; outline:0;
  border-radius:14px;
  padding: 8px 48px 8px 14px;
  color:#fff;
  background: rgba(255,255,255,.10);
}
#masthead .search-bar input::placeholder { color: rgba(255,255,255,.75); }
#masthead .search-bar input[disabled] { pointer-events:none; opacity:.7; }
#masthead .search-bar .icon-search {
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  pointer-events:none;
  width: 32px; text-align:center;
}

/* Right: language + user */
#masthead .header-right { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
#masthead .language-switcher select { border-radius: 12px; padding: 6px 8px; }
#masthead .user-buttons a, #masthead .user-buttons span { color: var(--accent-color); font-weight:700; text-decoration:none; }

/* Mobile */
@media (max-width: 991.98px) {
  #masthead { grid-template-columns: 1fr; row-gap: 10px; }
  #masthead .header-center { grid-template-columns: 1fr; }
  #masthead .category-menu { flex-wrap:wrap; gap: 12px 18px; }
}