/* b149: the language picker, the "also in your language" banner, the legal
   note, and right-to-left fixes for Arabic and Urdu. A file of its own so a
   deploy of these never carries other unreleased changes to site.css. */

.langs { position: relative; font-size: 16px; }
.langs summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 12px; border: 1px solid var(--line, #e2e5ef); border-radius: 999px; cursor: pointer;
  color: var(--ink, #1f2440); background: var(--paper, #fff); }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:focus-visible { outline: 3px solid var(--focus, #e3a72f); outline-offset: 2px; }
/* Every name on one line, as wide as the longest needs (site-fixes: "widen
   the menu so every name fits on one line"); one column on a phone. */
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 8px;
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 2px;
  width: max-content; max-width: calc(100vw - 24px);
  background: var(--paper, #fff); border: 1px solid var(--line, #e2e5ef); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 24, 50, .18); max-height: 70vh; overflow-y: auto; }
.langs li a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: var(--ink, #1f2440); text-decoration: none; font-size: 17px; white-space: nowrap; }
.langs li a:hover, .langs li a:focus-visible { background: var(--shelf, #f3efe6); }
.langs li a[aria-current="page"] { font-weight: 700; background: var(--shelf, #f3efe6); }
@media (max-width: 560px) { .langs ul { grid-template-columns: 1fr; width: min(280px, calc(100vw - 24px)); } }
/* One family for every name, in each script (site_i18n.py picker_fonts_url
   loads them, cut to these letters): no name bolder or thinner than the next. */
.langs a, .langs summary span { font-family: "Noto Sans", "Atkinson Hyperlegible", system-ui, sans-serif; font-weight: 400; }
.langs [lang="ja"] { font-family: "Noto Sans JP", "Noto Sans", sans-serif; }
.langs [lang="ko"] { font-family: "Noto Sans KR", "Noto Sans", sans-serif; }
.langs [lang="zh-Hans"] { font-family: "Noto Sans SC", "Noto Sans", sans-serif; }
.langs [lang="hi"] { font-family: "Noto Sans Devanagari", "Noto Sans", sans-serif; }
.langs [lang="th"] { font-family: "Noto Sans Thai", "Noto Sans", sans-serif; }
.langs [lang="ar"] { font-family: "Noto Sans Arabic", "Noto Sans", sans-serif; }
.langs [lang="ur"] { font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", serif; line-height: 1.9; }
.langs li a[aria-current="page"] { font-weight: 700; }

.lang-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  padding: 12px 16px; background: #f6efe4; color: #1f2440; border-bottom: 1px solid #e8d6b0; font-size: 17px; }
.lang-banner p { margin: 0; }
.lang-banner .go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 12px;
  background: #3d5a98; color: #fff; font-weight: 700; text-decoration: none; }
.lang-banner button { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid #c9b48a;
  background: transparent; color: #1f2440; font: inherit; cursor: pointer; }

/* The Free / Plus table on a phone: German and Bulgarian words made it wider
   than the screen (site-fixes). Long words hyphenate, or break, in their cell. */
.plan th, .plan td { overflow-wrap: anywhere; hyphens: auto; }

.legal-note { background: var(--shelf, #f3efe6); border-inline-start: 6px solid var(--mustard, #e3a72f);
  border-radius: 10px; padding: 12px 16px; font-size: 17px; }
.machine-note { font-size: 14px; }
.recipe .translated { color: #555; margin: .2em 0; }

/* Right to left: the page mirrors from <html dir="rtl">; these are the
   places site.css says left or right. */
[dir="rtl"] body { font-family: "Atkinson Hyperlegible", "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, system-ui, sans-serif; }
[dir="rtl"] .recipe ol.steps, [dir="rtl"] ol, [dir="rtl"] ul { padding-right: 1.3em; padding-left: 0; }
[dir="rtl"] .recipe ul.ingredients, [dir="rtl"] .langs ul, [dir="rtl"] .recipes ul.list,
[dir="rtl"] .ea .steps3, [dir="rtl"] .loop { padding-right: 0; }
/* A recipe nobody has put into this language yet keeps its own words and
   their direction (.words dir="ltr"): the page's rtl rules stop there. */
.words[dir="ltr"] ol.steps { padding: 0 0 0 1.3em; }
.words[dir="ltr"] ul.ingredients { padding: 0; }
[dir="rtl"] .ea .steps3 > li { padding: 4px 60px 26px 0; }
[dir="rtl"] .ea .steps3 > li::before { left: auto; right: 0; }
[dir="rtl"] .plan th[scope="row"] { text-align: right; }
/* The waitlist's hidden robot box sits 10000px to the left; in a right-to-left
   page the left is the scrollable side, so the page grew a 10000px blank
   stretch to scroll into (and headless browsers drew only that). Off the
   right edge instead, which nothing can scroll to. */
[dir="rtl"] .waitlist .waitlist-hp { left: auto; right: -10000px; }

/* The footer's Follow Kubbord row (socials.py). */
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:6px 0 10px}.follow-label{margin-inline-end:6px}.follow a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:inherit;text-decoration:none}.follow a:hover{background:rgba(31,36,64,.07)}.follow a:focus-visible{outline:3px solid #e3a72f;outline-offset:2px}.follow svg{display:block;width:26px;height:26px}