/* MentionHalo — canonical public brand system.
   ONE logo lockup + ONE language selector across all public/pre-login pages.
   Presentational only (no routing/auth/DB). Loaded LAST on public pages. */

/* ============ Canonical language selector: globe + ID / EN / MS ============ */
.sfa-public-lang{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1px solid #d7e0ee;border-radius:999px;padding:3px;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.sfa-public-lang>span{padding:0 4px 0 9px;font-size:14px;line-height:1;color:#3b526e}
.sfa-public-lang form{margin:0;display:flex}
.sfa-public-lang button,.sfa-public-lang a,.sfa-public-lang .on{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:32px;padding:0 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:#3b526e;font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;text-decoration:none;cursor:pointer;box-sizing:border-box}
.sfa-public-lang button.on,.sfa-public-lang a.on,.sfa-public-lang .on.on,.sfa-public-lang .on[aria-current="true"]{background:#2563eb;color:#fff;border-color:#2563eb}
.sfa-public-lang button:hover,.sfa-public-lang a:hover{background:#eef3fb;color:#2563eb}
.sfa-public-lang .on{cursor:default}
.sfa-public-lang [aria-disabled="true"]{opacity:.35;cursor:not-allowed}

/* ============ Brand lockup — public header (light bg) ============ */
.site-header .brand,.site-footer .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{display:block;width:auto;height:30px;max-width:70vw}
.site-footer .brand-logo{height:26px}

/* ============ Homepage hero logo (full lockup + tagline) ============ */
.sfa-hero-logo{display:block;width:min(300px,64vw);height:auto;margin:0 0 20px}

/* ============ LP header brand (audit-ai / ai-visibility-bisnis) ============ */
.sf-brand .sf-brand-lockup{display:block;width:auto;height:34px}
.sf-brand-ftr .sf-brand-lockup{height:28px}
.sf-hdr .sfa-public-lang,.sf-footer .sfa-public-lang{background:#fff}

/* ============ App (authenticated) brand ============ */
.v2-brand .v2-brand-lockup{height:28px;width:auto;border-radius:0;object-fit:contain}
.v2-header-identity .v2-brand-lockup{height:24px;width:auto;border-radius:0;object-fit:contain}

/* ============ panduan-praktis (dark navy header) ============ */
.pg-brand .pg-brand-lockup{display:block;width:auto;height:30px}
.pg-langform{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:3px}
.pg-langform>span{padding:0 4px 0 8px;font-size:14px;line-height:1;color:#cfe0ff}
.pg-lang{min-width:40px;min-height:32px;padding:0 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:#e7f0ff;font-weight:800;font-size:12px;cursor:pointer}
.pg-lang.on{background:#fff;color:#0b2242;border-color:#fff}

/* ============ Responsive: the wider lockup + selector must never overflow ============ */
/* Tablet portrait (760-899): collapse the inline nav into the hamburger so the
   wider brand + selector have room. */
@media(min-width:760px) and (max-width:899px){
  .nav-toggle{display:grid}
  .site-header nav{display:none}
  .site-header nav.is-open{display:grid}
}
@media(max-width:899px){.brand-logo{height:24px}}
@media(max-width:560px){
  .brand-logo{height:22px}
  .site-footer .brand-logo{height:22px}
  .sfa-hero-logo{width:min(232px,62vw);margin-bottom:16px}
  .sfa-public-lang{padding:2px}
  .sfa-public-lang>span{display:none}
  .sfa-public-lang button,.sfa-public-lang a,.sfa-public-lang .on{min-width:32px;min-height:30px;padding:0 7px}
}