/* ============================================================
   Koffeeshot Consulting PH — Language Toggle (EN / TL)
   ============================================================
   Additive stylesheet, loaded after global.css on every page.
   Works with assets/js/i18n.js. Uses the site's gold accent
   instead of a blue brand color to match Koffeeshot's palette.

   Markup pattern:
     <span class="i18n" data-tl="Tagalog copy">English copy</span>

   Toggle markup:
     <div class="lang-toggle" role="group" aria-label="Language">
       <button type="button" class="lang-toggle-btn" data-lang="en">EN</button>
       <button type="button" class="lang-toggle-btn" data-lang="tl">TL</button>
     </div>
   ============================================================ */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(230, 201, 141, 0.25);
  border-radius: 999px;
  padding: 3px;
  margin-left: 14px;
  flex-shrink: 0;
}

.lang-toggle-btn {
  border: none;
  background: transparent;
  color: var(--ivory-dim, #c9c3b5);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.lang-toggle-btn:hover {
  color: #ffffff;
}

.lang-toggle-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #e6c98d, #c7a15f);
  color: #1a1a1a;
}

@media (max-width: 880px) {
  .lang-toggle {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ------------------------------------------------------------
   NO-JS / JS-FAILED SAFETY NET — see i18n.js header for details.
   ------------------------------------------------------------ */
[data-en]:empty::before {
  content: attr(data-en);
}