/* Shared topbar + language dropdown styles — used by every page (home, bot
   detail, category, 404) so there's exactly one file to edit and the browser
   caches it once instead of re-downloading the same CSS in every response. */

.topbar { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid #e3ebf2; padding: .7rem 0; }
.topbar-brand { font-family: 'Caveat', cursive; font-weight: 700; color: var(--tg-dark); text-decoration: none; font-size: 1.6rem; }
.topbar-brand:hover { color: var(--tg-dark); }
.topbar-controls { flex-wrap: wrap; row-gap: .5rem; justify-content: flex-end; min-width: 0; }
@media (max-width: 480px) {
  /* Force the brand onto its own row instead of letting it fight the controls
     for space. Without this, whether they fit on one line depends on the
     exact pixel width of the translated button/dropdown labels, so the
     layout would randomly wrap in some languages ("+ Submit") but not others
     ("+ Enviar") at the same screen width. Full-width brand makes the wrap
     behavior deterministic across every language. */
  .topbar-brand { font-size: 1.3rem; flex: 1 0 100%; }
  .topbar-controls { gap: .6rem !important; justify-content: flex-start; }
  .lang-btn { font-size: .72rem; padding: .3rem .7rem; }
}
.lang-dropdown { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .35rem; appearance: none; background: #eef4f9; border: 1px solid #dbe6ef; border-radius: 2rem; color: #46586a; font-size: .78rem; font-weight: 700; padding: .35rem .9rem; cursor: pointer; }
.lang-btn:hover { border-color: #c7dcea; }
.lang-btn:focus-visible { outline: none; border-color: var(--tg); box-shadow: 0 0 0 .15rem rgba(34,158,217,.15); }
.lang-btn .lang-caret { width: .55rem; height: .55rem; border-right: 2px solid #46586a; border-bottom: 2px solid #46586a; transform: rotate(45deg); margin-top: -.15rem; transition: transform .15s ease; }
.lang-dropdown.open .lang-btn .lang-caret { transform: rotate(-135deg); margin-top: .2rem; }
.lang-menu { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 9.5rem; background: #fff; border: 1px solid #e3ebf2; border-radius: .8rem; box-shadow: 0 12px 28px rgba(20,40,60,.14); padding: .35rem; z-index: 1050; display: none; max-height: 60vh; overflow-y: auto; }
.lang-dropdown.open .lang-menu { display: block; }
.lang-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: .5rem; padding: .45rem .6rem; font-size: .85rem; font-weight: 600; color: #33475a; cursor: pointer; text-decoration: none; }
.lang-item:hover, .lang-item:focus-visible { background: #eef4f9; color: var(--tg-dark); outline: none; }
.lang-item.active { background: var(--tg); color: #fff; }