/* The Learning Forest header and footer, shared by every page on the site (not the app).
   The markup is in public/_partials/ and is put into each page at build time (scripts/build.mjs).
   Everything here is scoped to .lf-top and .lf-foot, with its own colours, so it looks the same on
   pages with their own styles (How does a tree work?). */
@font-face{font-family:'Fredoka';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(/app/fonts/fredoka-latin-wght-normal.woff2) format('woff2-variations')}
.lf-top,.lf-foot{--lf-bg:#F1F6E6;--lf-ink:#1D2A17;--lf-muted:#56664C;--lf-line:#D5E3C3;--lf-leaf:#2F8F46;--lf-leaf-dark:#21683A;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5;color:var(--lf-ink)}
.lf-top *,.lf-foot *{box-sizing:border-box}
.lf-wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.lf-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--lf-bg) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--lf-line)}
.lf-top .lf-wrap{display:flex;align-items:center;gap:18px;padding-block:10px}
.lf-logo{display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--lf-ink);text-decoration:none;font-family:'Fredoka',ui-rounded,system-ui,sans-serif;font-weight:600;font-size:20px}
.lf-logo svg{width:34px;height:34px;flex:none}
.lf-logo span{display:flex;flex-direction:column;line-height:1.1}
.lf-logo small{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:12px;color:var(--lf-muted)}
.lf-nav{display:flex;gap:18px;font-size:16px}
.lf-nav a{color:var(--lf-ink);text-decoration:none}
.lf-nav a:hover{text-decoration:underline}
.lf-btn{display:inline-flex;align-items:center;padding:8px 14px;border-radius:14px;background:var(--lf-leaf);color:#fff;text-decoration:none;white-space:nowrap;
  font-family:'Fredoka',ui-rounded,system-ui,sans-serif;font-weight:600;font-size:16px;box-shadow:0 3px 0 var(--lf-leaf-dark)}
.lf-btn:hover{background:var(--lf-leaf-dark)}
.lf-top a:focus-visible,.lf-foot a:focus-visible{outline:3px solid #E5962A;outline-offset:2px}
@media (max-width:720px){.lf-nav{display:none}}
.lf-foot{background:var(--lf-bg);border-top:1px solid var(--lf-line);padding-block:26px;color:var(--lf-muted);font-size:15px}
.lf-foot a{color:var(--lf-leaf-dark)}
.lf-foot-row{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.lf-small{font-size:12px;line-height:1.5;margin:14px 0 0}
@media print{.lf-top,.lf-foot{display:none}}

/* inside the app (a module page opened from /app/): a back button to the modules, no website menu or log in */
.lf-in-app .lf-wrap{gap:10px;padding-block:8px}
.lf-back{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--lf-ink);text-decoration:none;
  font-size:28px;line-height:1;box-shadow:0 2px 0 var(--lf-line)}
.lf-app-title{font-family:'Fredoka',ui-rounded,system-ui,sans-serif;font-weight:600;font-size:18px}