/* =====================================================================
   LESSON LEVEL BADGE  (new pages only — replaces cefrlevel.css on them)
   The level box (A1–A2, B2–C1…) is filled in by the script in menu.php.
   On new pages it sits after the lesson subtitle, e.g.
     <div class="hero__meta"><span>Pronunciation lesson</span><div class="lesson-level"></div></div>
   Old pages keep cefrlevel.css, which places it in the menu row.
   ===================================================================== */

.lesson-level {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 99px;
    background: #F1E8FA;            /* pale purple */
    color: #7B2CBF;                 /* purple text */
    font: 700 0.9rem/1.4 Verdana, "DejaVu Sans", system-ui, sans-serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* nothing to show until the menu script has filled it in */
.lesson-level:empty {
    display: none;
}

/* the phone menu styles (styleHmenu.css) give .menuRow .lesson-level a place in the
   menu row; on new pages the box isn't in the menu row, so they don't apply */