/* Child-facing entrances and the shared menu. 1rem = 20px in Material. */
:root {
  --learner-nav-height: 2.8rem;
  --learner-paper: #fbfaf6;
  --learner-hero: #f0f5e9;
  --learner-ink: #24382b;
  --learner-muted: #546353;
  --learner-link: var(--yell-color-primary-strong);
  --learner-line: #dce3d5;
  --learner-math-bg: #edf4fc;
  --learner-english-bg: #f3eef9;
  --learner-science-bg: #e9f5f1;
  --learner-social-bg: #fff4e2;
  --learner-japanese-bg: #fceff1;
}
[data-md-color-scheme="slate"] {
  --learner-paper: var(--md-default-bg-color);
  --learner-hero: #26372c;
  --learner-ink: #e7f0e5;
  --learner-muted: #bac6b7;
  --learner-link: var(--yell-color-primary);
  --learner-line: #455347;
  --learner-math-bg: #243b50;
  --learner-english-bg: #3b2f4c;
  --learner-science-bg: #203f38;
  --learner-social-bg: #453820;
  --learner-japanese-bg: #472e36;
}

.learner-nav {
  position: sticky;
  top: 2.4rem;
  z-index: 2; /* Below Material's search dialog and mobile drawer. */
  min-height: var(--learner-nav-height);
  background: var(--md-default-bg-color);
  border-bottom: 1px solid var(--learner-line);
}
.learner-nav__inner { display: flex; gap: .45rem; align-items: center; padding: .2rem .8rem; }
.learner-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.4rem;
  padding: .3rem .85rem;
  color: var(--learner-muted);
  border-radius: .45rem;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.learner-nav .twemoji { display: flex; width: 1rem; height: 1rem; }
.learner-nav a:hover, .learner-nav a.is-active { color: var(--yell-color-primary); background: var(--yell-color-primary-soft); }
.learner-nav a.is-active { box-shadow: inset 0 -3px var(--yell-color-primary); }
.learner-nav a:focus-visible, .md-typeset .home-search__form :focus-visible, .home-resume :focus-visible {
  outline: 3px solid var(--yell-color-secondary);
  outline-offset: 3px;
}
.learner-path { margin-bottom: 1.1rem; color: var(--learner-muted); font-size: .7rem; }
.md-typeset .learner-path ol { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; list-style: none; margin: 0; padding: 0; }
[dir] .md-typeset .learner-path li { margin: 0; }
.learner-path a { display: inline-flex; min-height: 44px; align-items: center; }
.learner-path li + li::before { content: "/"; margin-right: .5rem; color: var(--learner-muted); }
.learner-path span { overflow-wrap: anywhere; }
.md-main:has(.learner-path) .md-path { display: none; }
@media (min-width: 60em) {
  .md-sidebar--secondary { top: calc(2.4rem + var(--learner-nav-height) + .6rem); }
}
@media (min-width: 76.25em) {
  .md-sidebar--primary { top: calc(2.4rem + var(--learner-nav-height) + .6rem); }
}
.yell-lesson-sections { top: calc(2.4rem + var(--learner-nav-height)); }
.md-typeset [id] { scroll-margin-top: calc(2.4rem + var(--learner-nav-height) + 1rem); }
.md-header__button.md-logo img { width: 2rem; height: 1.5rem; object-fit: contain; background: #fff; border-radius: .25rem; padding: .15rem; }
.md-typeset h1 { color: var(--learner-ink); font-weight: 750; letter-spacing: -.025em; }
.md-typeset { line-height: 1.85; }
.md-content__inner:has(.learner-hub) > ul { list-style: none; padding: 0; }
[dir] .md-content__inner:has(.learner-hub) > ul > li { margin: 0; padding: .4rem 0; border-bottom: 1px solid var(--learner-line); }
.md-content__inner:has(.learner-hub) > ul > li > a,
.md-content__inner:has(.learner-hub) > p > a,
.md-content__inner:has(.learner-hub) > h3 > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* The same card affordance is used from home through subject / grade hubs. */
.learning-cards li > a {
  position: relative;
  color: var(--learner-muted);
  border-color: var(--learner-line);
  border-radius: .85rem;
  padding: 1rem 2rem 1rem 1rem;
  font-size: .75rem;
  transition: border-color var(--yell-duration-fast), box-shadow var(--yell-duration-fast);
}
.learning-cards li > a::after { content: "→"; position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--yell-color-primary); }
.learning-cards a strong { color: var(--learner-ink); margin-bottom: .25rem; }
.learning-cards li > a:hover { border-color: var(--yell-color-primary); box-shadow: 0 3px 12px rgb(36 56 43 / 8%); }
.subject-cards ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.subject-cards li { --subject-bg: var(--learner-math-bg); --subject-ink: var(--yell-subject-math); }
.subject-cards li:nth-child(2) { --subject-bg: var(--learner-english-bg); --subject-ink: var(--yell-subject-english); }
.subject-cards li:nth-child(3) { --subject-bg: var(--learner-science-bg); --subject-ink: var(--yell-subject-science); }
.subject-cards li:nth-child(4) { --subject-bg: var(--learner-social-bg); --subject-ink: var(--yell-subject-social); }
.subject-cards li:nth-child(5) { --subject-bg: var(--learner-japanese-bg); --subject-ink: var(--yell-subject-japanese); }
.subject-cards li > a { background: var(--subject-bg); border-color: transparent; min-height: 8rem; padding: 1.1rem .9rem 1.7rem; }
.subject-cards li > a::after { top: auto; bottom: .55rem; transform: none; color: var(--subject-ink); }
.subject-cards a strong { font-size: 1.15rem; }
.subject-cards a strong .twemoji { display: block; margin: 0 0 .6rem; color: var(--subject-ink); }
.subject-cards a strong .twemoji svg { width: 1.7rem; height: 1.7rem; }
.grade-cards ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-cards li > a { border-radius: .65rem; min-height: 4.8rem; }
.course-cards ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-switch a, .hub-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; margin: .15rem .2rem .15rem 0; padding: .3rem .75rem; border: 1px solid var(--learner-line); border-radius: .5rem; font-weight: 700; font-size: .75rem; }
.grade-switch a:hover, .hub-shortcuts a:hover { background: var(--yell-color-primary-soft); border-color: var(--yell-color-primary); }

/* Home: a calm welcome, then a small number of clear choices. */
body:has(.learner-home) { background: var(--learner-paper); }
body:has(.learner-home) .md-source-file { display: none; }
.md-main:has(.learner-home) .md-content { max-width: 59rem; width: 100%; margin: 0 auto; }
.md-main:has(.learner-home) .md-content__inner { margin-top: 1rem; }
.learner-home { color: var(--learner-ink); padding-bottom: 1rem; }
.md-typeset .learner-home [hidden] { display: none !important; }
.home-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; padding: 2.2rem 2.4rem; border: 1px solid var(--learner-line); border-radius: 1.2rem; background: var(--learner-hero); }
.home-eyebrow { display: block; color: var(--learner-link); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.md-typeset .home-hero h1 { margin: .65rem 0 .8rem; font-size: 2.3rem; line-height: 1.45; font-weight: 800; }
.md-typeset .home-hero__copy > p { margin: .6rem 0; }
.home-hero__copy > p:not(.home-eyebrow) { color: var(--learner-muted); }
.home-hero .md-button { display: inline-flex; align-items: center; gap: .4rem; margin: .5rem .6rem .5rem 0; padding: .7rem 1rem; border-radius: .55rem; font-size: .8rem; }
.home-hero__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--learner-link); font-size: .75rem; font-weight: 700; }
.md-typeset .home-hero__note { font-size: .7rem; }
.home-hero__art { width: 100%; aspect-ratio: 440 / 340; background: url('../img/learning-garden.svg') center / contain no-repeat; }
.home-section { margin-top: 2.2rem; }
.md-typeset .home-section h2 { font-size: 1.25rem; font-weight: 750; margin: 0 0 .25rem; }
.md-typeset .home-section > p { font-size: .8rem; color: var(--learner-muted); margin: 0 0 .9rem; }
.home-way-cards li > a { min-height: 6rem; padding: 1.2rem 2rem 1.2rem 1.2rem; background: var(--md-default-bg-color); }
.home-way-cards a strong .twemoji { margin-right: .45rem; }
.home-search { margin-top: 2.2rem; padding: 1.5rem; background: var(--learner-hero); border-radius: .9rem; }
.md-typeset .home-search h3, .md-typeset .home-help h3 { margin: 0; font-size: .95rem; font-weight: 750; }
.md-typeset .home-search p, .md-typeset .home-help p { font-size: .75rem; color: var(--learner-muted); margin: .5rem 0; }
.home-search > p a { color: var(--learner-link); }
.home-search__form { display: flex; gap: .5rem; margin: .8rem 0; max-width: 32rem; }
.home-search__form input { min-width: 0; flex: 1; min-height: 48px; padding: .55rem .75rem; font: inherit; font-size: 16px; color: var(--learner-ink); background: var(--md-default-bg-color); border: 1px solid var(--learner-muted); border-radius: .4rem; }
.home-search__form input::placeholder { color: var(--learner-muted); opacity: 1; }
.home-search__form button { flex: none; min-height: 48px; padding: .5rem .85rem; font: inherit; font-size: .8rem; font-weight: 700; color: var(--yell-color-on-primary); background: var(--yell-color-primary); border-radius: .4rem; cursor: pointer; }
.home-search__form button:hover { background: var(--yell-color-primary-strong); color: #fff; }
.home-help { margin: 1.5rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--yell-brand-green); }
.home-help a, .home-notices > p a { display: inline-block; padding-block: .3rem; }
.home-notices { border-top: 1px solid var(--learner-line); margin-top: 1.5rem; padding-top: .8rem; font-size: .75rem; }
.md-typeset .home-notices h2 { margin: .5rem 0; font-size: .95rem; font-weight: 700; }
.md-typeset .home-notices ul { list-style: none; padding: 0; margin: .5rem 0; }
[dir] .md-typeset .home-notices li { margin: 0; padding-block: .35rem; }
.home-notices li a { display: inline-block; min-height: 44px; padding-block: .45rem; }
.home-resume { display: flex; gap: .8rem; align-items: center; border: 1px solid var(--learner-line); border-radius: .75rem; background: var(--md-default-bg-color); padding: .8rem 1rem; margin-top: 1rem; }
.home-resume__icon { color: var(--yell-color-primary); font-size: 1.5rem; }
.home-resume > div { flex: 1; min-width: 0; }
.home-resume a { display: block; min-height: 44px; padding-block: .3rem; font-weight: 700; overflow-wrap: anywhere; }
.home-resume__note { display: block; font-size: .65rem; color: var(--learner-muted); }
.home-resume button { flex: none; width: 44px; height: 44px; font-size: 1.2rem; color: var(--learner-muted); cursor: pointer; border-radius: .4rem; }
.home-resume button:hover { background: var(--learner-hero); }
.yell-test-running .learner-nav { display: none; }

@media (max-width: 959px) {
  .subject-cards ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero { padding: 1.6rem; }
  .md-typeset .home-hero h1 { font-size: 1.9rem; }
}
@media (max-width: 600px) {
  .learner-nav__inner { gap: .15rem; padding: .15rem .4rem; }
  .learner-nav a { flex: 1; flex-direction: column; gap: .1rem; padding: .2rem .1rem; font-size: .6rem; min-height: 2.5rem; }
  .learner-nav .twemoji { width: .9rem; height: .9rem; }
  .md-main:has(.learner-home) .md-content__inner { margin-top: .7rem; }
  .home-hero { grid-template-columns: 1fr; padding: 1.4rem 1.1rem; border-radius: .9rem; }
  .home-hero__art { display: none; }
  .md-typeset .home-hero h1 { font-size: 1.7rem; }
  .home-hero .md-button { margin-right: .3rem; padding-inline: .7rem; }
  .home-hero__link { padding-block: .3rem; }
  .home-section { margin-top: 1.7rem; }
  .md-typeset .home-section h2 { font-size: 1.1rem; }
  .subject-cards ul, .grade-cards ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .subject-cards li:last-child { grid-column: 1 / -1; }
  .subject-cards li > a { min-height: 6.2rem; padding: .75rem .8rem 1.2rem; }
  .subject-cards a strong { font-size: 1rem; }
  .subject-cards a strong .twemoji { display: inline-block; margin: 0 .35rem 0 0; }
  .subject-cards a strong .twemoji svg { width: 1.2rem; height: 1.2rem; }
  .subject-cards li:last-child > a { min-height: 4.8rem; }
  .grade-cards li > a { padding: .8rem 1.6rem .8rem .8rem; }
  .home-way-cards ul { grid-template-columns: 1fr; }
  .course-cards ul { grid-template-columns: 1fr; }
  .home-way-cards li > a { min-height: 5rem; padding: .9rem 1.8rem .9rem 1rem; }
  .home-search { padding: 1rem; }
  .home-search__form { flex-direction: column; }
  .home-search__form button { width: 100%; }
  .home-resume { padding: .7rem; gap: .5rem; }
}
@media print {
  .learner-nav, .learner-path, .home-resume, .home-search__form { display: none !important; }
  .home-hero { display: block; }
  .home-hero__art { display: none; }
  .subject-cards ul, .grade-cards ul { display: block; }
}