/* ============================================================
   FABLEGLADE PUBLIC SITE HEADER
   Single authoritative stylesheet for:
   - logo/header layout
   - desktop navigation + My Library
   - language menu
   - theme/avatar/mobile controls
   - mobile navigation
   Future public-header changes belong HERE only.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  color: var(--ink);
  backdrop-filter: blur(18px);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.site-header .header-inner {
  position: relative;
  display: flex;
  width: min(100% - 28px, 1180px);
  min-height: 76px;
  align-items: center;
  gap: 24px;
  margin-inline: auto;
}

.site-header .brand-horizontal {
  display: block;
  flex: 0 0 190px;
  width: 190px;
  height: 44px;
  overflow: hidden;
}

.site-header .brand-frame {
  position: relative;
  display: block;
  width: 190px;
  height: 44px;
  overflow: hidden;
}

.site-header .brand-frame img {
  position: absolute;
  top: -68px;
  left: 0;
  width: 190px;
  max-width: none;
  height: auto;
}

.site-header .logo-dark { display: none; }
[data-theme="dark"] .site-header .logo-light { display: none; }
[data-theme="dark"] .site-header .logo-dark { display: block; }
[data-theme="light"] .site-header .logo-light { display: block; }
[data-theme="light"] .site-header .logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  [data-theme="system"] .site-header .logo-light { display: none; }
  [data-theme="system"] .site-header .logo-dark { display: block; }
}

/* ---------- desktop navigation ---------- */

.site-header .main-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
  margin-inline-start: auto;
  white-space: nowrap;
}

.site-header .main-nav > a,
.site-header .header-library {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

/* My Library is deliberately identical to normal top links. */
.site-header .main-nav > a:hover,
.site-header .header-library:hover {
  background: transparent;
  color: var(--gold);
}

.site-header .main-nav > a:focus-visible,
.site-header .header-library:focus-visible {
  outline: none;
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--gold);
}

/* ---------- action row ---------- */

.site-header .header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.site-header .header-library {
  min-height: 40px;
}

/* ---------- login/register ---------- */

.site-header .header-login {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-header .header-login:hover {
  border-color: color-mix(in srgb, var(--ink) 40%, transparent);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* ---------- language trigger ---------- */

.site-header .site-language {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.site-header .site-language-trigger,
.site-header .theme-toggle,
.site-header .user-menu .avatar,
.site-header .mobile-menu {
  box-sizing: border-box;
  margin: 0;
  transform: none;
}

.site-header .site-language-trigger {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  cursor: pointer;
}

.site-header .site-language-code {
  font-size: .7rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .03em;
}


.site-header .site-language-trigger:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--gold));
}

.site-header .site-language-trigger:focus-visible,
.site-header .site-language-trigger[aria-expanded="true"],
.site-header .theme-toggle:focus-visible,
.site-header .user-menu .avatar:focus-visible,
.site-header .mobile-menu:focus-visible,
.site-header .mobile-menu[aria-expanded="true"] {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: inset 0 0 0 2px var(--gold) !important;
  transform: none !important;
}

/* ---------- language dropdown ---------- */

.site-header .site-language-menu {
  position: absolute;
  z-index: 110;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 224px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.site-header .site-language-menu[hidden] { display: none !important; }

.site-header .site-language-option {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  text-align: start;
  cursor: pointer;
}

.site-header .site-language-option:hover,
.site-header .site-language-option:focus-visible,
.site-header .site-language-option.is-active {
  background: color-mix(in srgb, var(--surface) 82%, var(--gold));
  outline: none;
}

.site-header .site-language-option-code {
  display: inline-grid;
  width: 30px;
  height: 26px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .03em;
}

.site-header .site-language-option-name {
  overflow: hidden;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header .site-language-option-check {
  color: var(--gold);
  font-size: .85rem;
  font-weight: 900;
  opacity: 0;
}

.site-header .site-language-option.is-active .site-language-option-check { opacity: 1; }

/* ---------- avatar/profile ---------- */

.site-header .user-menu {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.site-header .user-menu .avatar {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--gold) 70%, var(--line));
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.site-header .user-menu .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-header .user-menu .avatar span { display: block; line-height: 1; }
.site-header .user-menu .profile-menu { top: calc(100% + 10px); }

/* ---------- theme ---------- */

.site-header .theme-toggle {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.site-header .theme-toggle:hover {
  transform: none;
  background: color-mix(in srgb, var(--surface) 88%, var(--gold));
}

/* ---------- mobile menu ---------- */

.site-header .mobile-menu {
  display: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}

@media (max-width: 1220px) and (min-width: 1001px) {
  .site-header .header-inner { gap: 15px; }
  .site-header .main-nav { gap: 12px; }
  .site-header .main-nav > a,
  .site-header .header-library,
  .site-header .header-login { font-size: .84rem; }
}

/* ---------- tablet + mobile ---------- */

.site-header .main-nav > .mobile-auth-link { display: none; }

@media (max-width: 1000px) {
  .site-header .main-nav > .mobile-auth-link { display: flex; }
  .site-header .main-nav { display: none; }
  .site-header .header-library { display: none !important; }
  .site-header .mobile-menu { display: grid; }

  .site-header .header-inner {
    width: min(100% - 28px, 1180px);
    min-height: 66px;
    gap: 8px;
  }

  .site-header .header-actions {
    margin-inline-start: auto;
    column-gap: 8px;
    row-gap: 0;
  }

  /* Every control occupies exactly the same 40x40 slot. */
  .site-header .header-actions > .site-language,
  .site-header .header-actions > .theme-toggle,
  .site-header .header-actions > .user-menu,
  .site-header .header-actions > .mobile-menu {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
  }

  .site-header .site-language-trigger,
  .site-header .theme-toggle,
  .site-header .user-menu .avatar,
  .site-header .mobile-menu {
    display: grid;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    place-items: center;
    position: relative;
  }

  /* Transparent pointer area reaches 44px while the visible circles stay 40px. */
  .site-header .site-language-trigger::after,
  .site-header .theme-toggle::after,
  .site-header .user-menu .avatar::after,
  .site-header .mobile-menu::after {
    position: absolute;
    inset: -2px;
    content: "";
  }

  .site-header .user-menu .avatar { overflow: visible; }
  .site-header .user-menu .avatar img { border-radius: 50%; }

  .site-header .site-language-trigger {
    place-items: center;
    padding: 0;
  }

  .site-header .site-language-code { font-size: .67rem; }

  .site-header .site-language-menu {
    position: fixed;
    top: 74px;
    right: 14px;
    left: auto;
    width: min(224px, calc(100vw - 28px));
  }

  [dir="rtl"] .site-header .site-language-menu {
    right: auto;
    left: 14px;
  }

  .site-header .user-menu .profile-menu {
    position: fixed;
    top: 74px;
    right: 14px;
  }

  [dir="rtl"] .site-header .user-menu .profile-menu {
    right: auto;
    left: 14px;
  }

  .site-header .main-nav.mobile-open {
    position: absolute;
    z-index: 100;
    top: calc(100% + 8px);
    right: 14px;
    left: 14px;
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .site-header .main-nav.mobile-open a {
    min-height: 42px;
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .9rem;
  }

  .site-header .main-nav.mobile-open a:hover,
  .site-header .main-nav.mobile-open a:focus-visible {
    background: color-mix(in srgb, var(--surface) 82%, var(--gold));
    color: var(--ink);
    box-shadow: none;
  }

  /* Anonymous Login/Register links are available in the mobile navigation. */
  .site-header .header-login,
  .site-header .header-actions > .btn {
    display: none;
  }
}

/* Avoid continuously recompositing a blurred sticky layer on touch tablets. */
@media (min-width: 721px) and (hover: none) and (pointer: coarse) {
  .site-header {
    background: var(--cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 720px) {
  .site-header .header-inner {
    width: calc(100% - 20px);
    gap: 6px;
  }

  .site-header .header-actions { column-gap: 7px; }

  .site-header .brand-horizontal {
    flex-basis: 132px;
    width: 132px;
    height: 36px;
  }

  .site-header .brand-frame {
    width: 132px;
    height: 36px;
  }

  .site-header .brand-frame img {
    top: -47px;
    width: 132px;
  }
}

@media (max-width: 380px) {
  .site-header .header-inner {
    width: calc(100% - 16px);
    gap: 5px;
  }

  .site-header .header-actions { column-gap: 6px; }

  .site-header .brand-horizontal {
    flex-basis: 122px;
    width: 122px;
  }

  .site-header .brand-frame { width: 122px; }
  .site-header .brand-frame img { top: -43px; width: 122px; }
}

@media (max-width: 340px) {
  .site-header .header-actions { column-gap: 5px; }

  .site-header .brand-horizontal {
    flex-basis: 108px;
    width: 108px;
  }

  .site-header .brand-frame { width: 108px; }
  .site-header .brand-frame img { top: -38px; width: 108px; }
}

/* Keep the shell from creating horizontal overflow without blocking page scroll. */
html, body { overflow-x: clip; }

/* ============================================================
   Header avatar — keep perfectly circular at every breakpoint
   Fixes portrait/mobile/tablet stretching without changing layout.
   ============================================================ */

.site-header .user-menu,
.site-header .user-menu .avatar {
  aspect-ratio: 1 / 1;
}

.site-header .user-menu .avatar {
  flex: 0 0 auto;
  overflow: hidden;
}

.site-header .user-menu .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* Portrait/tablet/mobile: force the avatar and its slot to the same square size.
   This overrides the older overflow:visible mobile rule. */
@media (max-width: 1000px) {
  .site-header .header-actions > .user-menu {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
  }

  .site-header .user-menu .avatar {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }

  .site-header .user-menu .avatar img {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   Profile dropdown — long localized labels (e.g. Bangla)
   Keep account actions inside the menu on desktop/tablet/mobile.
   ============================================================ */

.site-header .user-menu .profile-menu {
  width: max-content;
  min-width: 190px;
  max-width: min(300px, calc(100vw - 28px));
}

.site-header .user-menu .profile-menu a,
.site-header .user-menu .profile-menu button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
  text-align: start;
}

@media (max-width: 1000px) {
  .site-header .user-menu .profile-menu {
    width: max-content;
    min-width: 210px;
    max-width: calc(100vw - 28px);
  }
}