/* Shared by every page on kerbline.co.uk (2026-10-13): the language switcher,
   the "only in English" note on the legal pages, and the cookie question.
   Loaded by each page beside its own <style>; kerbline.js builds the parts.

   Its own colour tokens, prefixed --kl-, because the legal pages and the home
   page each define their own and this must look the same on all of them. The
   values are the home page's (index.html :root), so it reads as one site:
   ink #1B1F28 on raised white is 16:1, muted #5F6670 on white 6.0:1; dark
   ink #E8EBF0 on #1F1D1A 13:1, muted #A1A9B6 on #1F1D1A 7.0:1. */
:root{
  --kl-raised:#FFFFFF; --kl-canvas:#F5F3EF; --kl-sunk:#EBE8E2; --kl-line:#E3DFD8;
  --kl-ink:#1B1F28; --kl-muted:#5F6670; --kl-focus:#2F53E6;
  --kl-shadow:0 4px 16px rgba(20,22,31,.12);
  --kl-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --kl-raised:#1F1D1A; --kl-canvas:#141311; --kl-sunk:#292622; --kl-line:#34302B;
    --kl-ink:#E8EBF0; --kl-muted:#A1A9B6; --kl-focus:#8EA3F5;
    --kl-shadow:0 4px 16px rgba(0,0,0,.5);
  }
}

/* Bulgarian: Plus Jakarta Sans has no Cyrillic, so the system sans takes over.
   Said here so every page falls back the same way. */
html[lang="bg"] body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

/* While a saved language loads, the page waits rather than flashing English.
   Bounded: kerbline.js lifts it after two seconds whatever happens. */
html.kl-i18n-wait body{visibility:hidden}

/* ── The language switcher ─────────────────────────────────────────────────
   A globe and the language's own name, always visible, phone and desktop.
   A disclosure, not an ARIA menu: a button that opens a short list of
   buttons, each named in its own language. */
.kl-lang{position:relative;display:inline-flex}
.kl-lang__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:999px;
  background:transparent;color:var(--kl-ink);font:600 15px/1 var(--kl-font);cursor:pointer;white-space:nowrap}
html[lang="bg"] .kl-lang__btn,html[lang="bg"] .kl-lang__list button{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.kl-lang__btn:hover{background:var(--kl-sunk)}
.kl-lang__btn:focus-visible,.kl-lang__list button:focus-visible{outline:3px solid var(--kl-focus);outline-offset:2px}
.kl-lang__btn svg{width:18px;height:18px;flex:none}
.kl-lang__btn .kl-lang__chev{width:12px;height:12px;opacity:.7}
.kl-lang__list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:180px;margin:0;padding:6px;list-style:none;
  background:var(--kl-raised);border-radius:16px;box-shadow:var(--kl-shadow)}
.kl-lang__list[hidden]{display:none}
.kl-lang__list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 12px;
  border:0;border-radius:10px;background:transparent;color:var(--kl-ink);font:600 16px/1.2 var(--kl-font);text-align:left;cursor:pointer}
.kl-lang__list button:hover{background:var(--kl-sunk)}
.kl-lang__list button[aria-current="true"]{font-weight:800}
.kl-lang__list button[aria-current="true"]::after{content:"";width:6px;height:11px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}

/* The legal pages' header has only the brand; the switcher sits at its right. */
.kl-legal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kl-only-english{margin:8px 0 0;font:500 15px/1.5 var(--kl-font);color:var(--kl-muted)}
.kl-only-english[hidden]{display:none}

/* ── The cookie question ───────────────────────────────────────────────────
   A raised card at the foot of the screen, clear of the home bar. Accept and
   Reject are the SAME outline pill, side by side and equal: refusing must be
   as easy as accepting. */
.kl-consent{position:fixed;z-index:70;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto;padding:16px;border-radius:20px;
  background:var(--kl-raised);box-shadow:var(--kl-shadow);color:var(--kl-ink);font-family:var(--kl-font)}
.kl-consent[hidden]{display:none}
.kl-consent h2{margin:0;font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.01em;max-width:none}
.kl-consent p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--kl-muted)}
.kl-consent p a{color:var(--kl-ink);font-weight:600;text-underline-offset:3px}
.kl-consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.kl-consent__actions button{min-height:48px;padding:0 16px;border:1.5px solid var(--kl-line);border-radius:999px;background:var(--kl-raised);
  color:var(--kl-ink);font:700 15px/1 var(--kl-font);cursor:pointer}
.kl-consent__actions button:hover{border-color:var(--kl-muted)}
.kl-consent__actions button:focus-visible,.kl-consent p a:focus-visible{outline:3px solid var(--kl-focus);outline-offset:2px}
html[lang="bg"] .kl-consent,html[lang="bg"] .kl-consent__actions button{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

/* "Cookie settings" in a footer: a button that reads as the links beside it. */
.kl-consent-open{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:inherit}
.kl-consent-open:hover{text-decoration:underline;text-underline-offset:3px}

/* Desktop: the same 48px targets and 16px type as the nav links beside it. */
@media (min-width:1024px){.kl-lang__btn{min-height:48px;font-size:16px}}