/* lang-pill.css: visible language switch (English <-> Hebrew) in the top bar.
   Loaded on every page that shows the switch, including pages without style.css. */
.navbar .lang-pill,
.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1.5px solid var(--gold, #FFC107);
    border-radius: 999px;
    background: transparent;
    color: var(--gold, #FFC107) !important;
    font-family: 'Heebo', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 1;
    transition: background 0.2s, box-shadow 0.2s;
}
.navbar .lang-pill:hover,
.lang-pill:hover { background: rgba(255, 193, 7, 0.12); box-shadow: 0 0 16px rgba(255, 193, 7, 0.25); }
.lang-pill:focus-visible { outline: 2px solid var(--gold, #FFC107); outline-offset: 2px; }
.lang-pill svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Pages whose navbar has no account area: keep the pill at the far end. */
.navbar > .lang-pill { margin-inline-start: auto; }

@media (max-width: 768px) {
    .navbar .lang-pill,
    .lang-pill { height: 30px; padding: 0 10px; font-size: 12px; gap: 4px; }
    .lang-pill svg { width: 13px; height: 13px; }
}

/* Narrow phones: keep the pill and the sign-in button in the top bar.
   The logo mark stays (and still links home); only its text label hides
   on bars that also carry the credits wallet. */
@media (max-width: 480px) {
    .navbar .lang-pill,
    .lang-pill { height: 28px; padding: 0 8px; font-size: 11px; gap: 3px; }
    .lang-pill svg { width: 12px; height: 12px; }
    .navbar:has(.nav-right .wallet-wrap) .brand-text { display: none; }
}

/* English home hero: one line pointing to the Hebrew site. */
.hero-he-link { margin: 10px 0 0; text-align: center; font-family: 'Heebo', 'Inter', sans-serif; font-size: 15px; }
.hero-he-link a { color: var(--gold, #FFC107); font-weight: 700; text-decoration: none; }
.hero-he-link a:hover { text-decoration: underline; }

/* Mid-width desktops: the pill adds ~95px to an already full bar, so tighten
   the main links slightly to keep the account area on screen. */
@media (min-width: 769px) and (max-width: 1500px) {
    .navbar:has(.lang-pill) .nav-links a,
    .navbar:has(.lang-pill) .nav-links .nav-dropdown-toggle { padding-left: 8px; padding-right: 8px; }
    .navbar:has(.lang-pill) .nav-links { gap: 0; }
}

/* Up to 1300px the full link row no longer fits next to the account area
   (it already overflowed before the pill). Use the menu button there, as on
   phones, so the pill and sign-in stay visible. Only bars that have a menu. */
@media (min-width: 769px) and (max-width: 1300px) {
    .navbar:not(.he-navbar):has(.lang-pill):has(.ham-btn) .nav-links { display: none !important; }
    .navbar:not(.he-navbar):has(.lang-pill) .ham-btn { display: flex; }
}