/* =====================================================================
   COMPONENT STYLES: <bk-site-header>
   ===================================================================== */

/* ---- 1. Sticky bar ------------------------------------------------ */
.bk-header {
  position: sticky; top: 0; z-index: 50; display: block;
  background: rgba(247, 242, 232, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, background-color 200ms;
}
.bk-header.is-scrolled { border-bottom-color: var(--bk-line); background: rgba(247, 242, 232, 0.94); }
.bk-header__bar { display: flex; align-items: center; gap: var(--bk-space-4); min-height: var(--bk-header-h); }

/* ---- 2. Wordmark -------------------------------------------------- */
/* The logo itself is <bk-wordmark> (components/wordmark); this only sizes it. */
.bk-header-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; padding-block: 6px; }
.bk-header-logo bk-wordmark { font-size: 34px; }
.bk-header-logo .bk-wordmark__tagline { font-size: 0.27em; margin-top: 1.8em; letter-spacing: 0.12em; }
html[lang="ur"] .bk-header-logo .bk-wordmark__tagline { letter-spacing: 0; text-transform: none; font-size: 0.36em; margin-top: 0.9em; }

/* ---- 3. Section navigation --------------------------------------- */
.bk-header__nav { display: flex; gap: var(--bk-space-4); margin-inline: auto; }
.bk-header__nav a {
  position: relative; padding-block: 6px;
  color: var(--bk-ink-soft); text-decoration: none; font-size: var(--bk-step--1); font-weight: 500;
}
.bk-header__nav a::after { /* fleck underline on hover */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--bk-tan); transform: scaleX(0); transition: transform 240ms var(--bk-ease);
}
.bk-header__nav a:hover, .bk-header__nav a[aria-current="page"] { color: var(--bk-ink); }
.bk-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.bk-header__nav a:hover::after { transform: scaleX(1); }
html[lang="ur"] .bk-header__nav a { font-size: var(--bk-step-0); }

/* ---- 4. Actions + menu button ------------------------------------ */
.bk-header__actions { display: flex; align-items: center; gap: var(--bk-space-2); }
.bk-header__menu {
  display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; position: relative;
}
.bk-header__menu span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--bk-ink);
  transition: transform 240ms var(--bk-ease);
}
.bk-header__menu span:first-child { top: 17px; }
.bk-header__menu span:last-child { top: 25px; }
.bk-header.is-open .bk-header__menu span:first-child { transform: translateY(4px) rotate(45deg); }
.bk-header.is-open .bk-header__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---- 5. Tablet / mobile: nav becomes a drop-down panel ----------- */
@media (max-width: 960px) {
  .bk-header__menu { display: inline-block; }
  .bk-header__actions { margin-inline-start: auto; }
  .bk-header__nav {
    position: absolute; top: 100%; inset-inline: 0; margin: 0;
    flex-direction: column; gap: 0; padding: var(--bk-space-2) var(--bk-gutter) var(--bk-space-4);
    background: var(--bk-sugar); border-bottom: 1px solid var(--bk-line); box-shadow: var(--bk-shadow);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 200ms, transform 200ms var(--bk-ease), visibility 200ms;
  }
  .bk-header.is-open .bk-header__nav { visibility: visible; opacity: 1; transform: none; }
  .bk-header__nav a { padding-block: 14px; border-bottom: 1px solid var(--bk-line); font-size: var(--bk-step-0); }
  .bk-header__nav a::after { display: none; }
}
@media (max-width: 620px) {
  .bk-header__login, .bk-header__list { display: none; }
  .bk-header-logo .bk-wordmark__tagline { display: none; }
}