/* תא-שמע · wordmark + slogan. Variant chosen by TASHMA_BRAND.VARIANT in brand.js (sets <html data-brand="A|B">). */
@font-face{font-family:'Suez One';src:url(/fonts/suezone-400-hebrew.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Suez One';src:url(/fonts/suezone-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+2000-206F}
@font-face{font-family:'Fredoka';src:url(/fonts/fredoka-700-hebrew.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Fredoka';src:url(/fonts/fredoka-700-latin.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+2000-206F}

.wm{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap;vertical-align:middle;line-height:1}
.wm-mark{display:inline-flex;flex:0 0 auto;width:1.02em;height:1.02em}
.wm-mark svg{width:100%;height:100%;display:block}
.wm-name{letter-spacing:0;line-height:1}
.slogan[data-slogan]{white-space:nowrap}

/* ---- Variant A: Suez One (classic beit-midrash serif) · indigo ink · gold hyphen · talmud-page mark ---- */
[data-brand="A"] .wm-name{font-family:'Suez One','Frank Ruhl Libre',serif;font-weight:400;color:#2d2690}
[data-brand="A"] .wm-dash{color:#e0a21a;margin:0 -.06em}
[data-brand="A"] .slogan[data-slogan]{font-family:'Rubik',sans-serif;font-weight:400;color:#1f7a6b;letter-spacing:.01em;
  -webkit-text-fill-color:currentColor;background:none;border-radius:0;border-inline-start:2px solid #f2b632;padding:0 .5em 0 0;padding-inline-start:.5em;padding-inline-end:0;margin-inline-start:.2em;line-height:1.15}

/* ---- Variant B: Fredoka (rounded, playful) · indigo→teal gradient · quotation-bubble mark ---- */
[data-brand="B"] .wm-name{font-family:'Fredoka','Rubik',sans-serif;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(90deg,#1f8574,#2f6fb0 55%,#5b4fd0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-brand="B"] .wm-dash{-webkit-text-fill-color:#e5733a;color:#e5733a}
[data-brand="B"] .slogan[data-slogan]{font-family:'Rubik',sans-serif;font-weight:500;font-size:.62em;color:#5b4fd0;-webkit-text-fill-color:#5b4fd0;
  background:#fff;border:1.5px solid #d9d3ff;border-radius:99px;padding:.18em .7em;vertical-align:middle;margin-inline-start:.2em;letter-spacing:.01em}

/* ---- placement: app header (in-module, landing bar, teacher area) ---- */
.brand b .wm{font-size:1.32em}
.brand b .slogan[data-slogan]{font-size:.8em}
[data-brand="B"] .brand b .slogan[data-slogan]{font-size:.72em}
/* ---- landing hero ---- */
.brandname .wm{font-size:1.32em}
.brandname .slogan[data-slogan]{font-size:.52em;display:inline-block;vertical-align:middle}
[data-brand="B"] .brandname .slogan[data-slogan]{font-size:.42em}
/* ---- sheet viewer header ---- */
.sbk a .wm{font-size:1.2em}
.sbk .slogan[data-slogan]{font-size:1em;font-weight:400}

/* the old gradient-clipped hero title: the wordmark now carries its own colours */
.brandname{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);-webkit-text-fill-color:currentColor}
.brandname .slogan[data-slogan]{font-weight:400}

/* phone, inside a sugya: the header is full of buttons — keep the mark + name and the ⓘ button visible */
@media (max-width:420px){
  body.in-sugya .brand b .wm{font-size:1.04em;gap:.12em}
  body.in-sugya .brand .ibtn{min-width:24px;padding:0}
  body.in-sugya .brand b{gap:.25em}
}
@media (max-width:420px){
  /* teacher preview adds ✏️/📝 to the bar: drop the small mark there so the name and ⓘ stay whole */
  body.preview.in-sugya .brand b .wm-mark{display:none}
  /* teacher area, logged in: six buttons — mark + name only */
  body.teacher .brand b .slogan[data-slogan]{display:none}
}