@charset "UTF-8";

/* Only the English vocabulary home page uses this navigation. */
.english-home .catalogue-filter-anchor { height: 0; }
.english-home .catalogue-filter-nav[hidden] { display: none; }
.english-home .catalogue-filter-nav {
  position: relative;
  z-index: 40;
  align-self: start;
  min-width: 0;
  padding: 6px 0;
  background: #faf9f4;
  box-shadow: 0 1px #d6ded2;
}

.english-home .catalogue-filter-nav.is-pinned {
  position: fixed;
  top: 0;
  left: var(--catalogue-nav-left, 0px);
  width: var(--catalogue-nav-width, 100%);
  margin-inline: 0;
}
.english-home .catalogue-filter-nav .course-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 44px;
  overflow: visible;
  padding: 0;
  border: 0;
}
.english-home .catalogue-category-scroll {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.english-home .catalogue-category-scroll::-webkit-scrollbar { display: none; }
.english-home .catalogue-filter-nav [data-filter="all"] { flex-shrink: 0; }
.english-home .catalogue-filter-nav .course-filters button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.english-home .catalogue-filter-nav .course-filters button:focus-visible { outline-offset: -3px; }
.english-home .catalogue-filter-nav [data-filter="school"] { --location-ink: #235b43; --location-pale: #dce8c7; --location-border: #adbd9e; }
.english-home .catalogue-filter-nav [data-filter="textbook"] { --location-ink: #1c6866; --location-pale: #d5e8e1; --location-border: #a6bfb4; }
.english-home .catalogue-filter-nav [data-filter="junior"] { --location-ink: #2e617a; --location-pale: #d6e4ec; --location-border: #acbdc8; }
.english-home .catalogue-filter-nav [data-filter="university"] { --location-ink: #4b587d; --location-pale: #dde1ef; --location-border: #b5bcd1; }
.english-home .catalogue-filter-nav [data-filter="eiken"] { --location-ink: #89622d; --location-pale: #efe0bf; --location-border: #cdbb92; }
.english-home .catalogue-filter-nav [data-filter="toeic"] { --location-ink: #3c6878; --location-pale: #d7e7ec; --location-border: #acc0c7; }
.english-home .catalogue-filter-nav .course-filters button[data-current-group="true"]:not([aria-pressed="true"]) {
  color: var(--location-ink);
  background: var(--location-pale);
  border-color: var(--location-border);
}
.english-home #header .Toggle {
  opacity: 1;
  transition: opacity .22s ease, visibility 0s;
}
.english-home.is-catalogue-approaching #header .Toggle:not(.active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
@media (prefers-reduced-motion: reduce) {
  .english-home #header .Toggle,
  .english-home.is-catalogue-approaching #header .Toggle,
  .english-home .catalogue-filter-nav .course-filters button { transition: none; }
}
html[data-english-trial-seen="true"] .english-home .mobile-dock,
.english-home.is-catalogue-browsing .mobile-dock { display: none; }

@media (max-width: 749px) {
  .english-home .catalogue-filter-nav {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .english-home .catalogue-filter-nav .course-filters button { padding-inline: 13px; font-size: 11px; }
  .english-learning-page[data-english-trial-seen="true"] body.english-home #return-top,
  .english-learning-page[data-english-trial-seen="true"] body.english-home #page-top,
  .english-learning-page[data-english-trial-seen="true"] body.english-home #page-top label,
  .english-learning-page body.english-home.is-catalogue-browsing #return-top,
  .english-learning-page body.english-home.is-catalogue-browsing #page-top,
  .english-learning-page body.english-home.is-catalogue-browsing #page-top label { bottom: 16px; }
}

@keyframes home-resume-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 749px) {
  .english-learning-page body.english-home .mobile-dock[data-mode="resume"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    animation: home-resume-in .2s ease-out;
  }
  .english-home .mobile-dock[data-mode="resume"] > a { min-height: 52px; }
  .english-home .mobile-dock[data-mode="resume"] .home-resume-link { gap: 10px; padding: 7px 11px; }
  .english-home .mobile-dock[data-mode="resume"] .home-resume-copy { display: grid; flex: 1; min-width: 0; text-align: left; }
  .english-home .home-resume-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.6; opacity: .88; }
  .english-home .home-resume-copy strong { font-size: 13px; line-height: 1.6; }
  .english-home .mobile-dock .home-resume-link[data-kind="quiz"] { background: #9d2d41; border-color: #9d2d41; }
  .english-learning-page body.english-home.has-home-resume { padding-bottom: calc(75px + env(safe-area-inset-bottom)); }
  .english-learning-page body.english-home.has-home-resume #return-top,
  .english-learning-page body.english-home.has-home-resume #page-top,
  .english-learning-page body.english-home.has-home-resume #page-top label { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .english-learning-page body.english-home .mobile-dock[data-mode="resume"] { animation: none; }
}

/* Extend the existing card link; keep the quiz link above its transparent hit area. */
.english-home .course-card { isolation: isolate; }
.english-home .course-primary { position: static; }
.english-home .course-primary::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.english-home .course-quiz { position: relative; z-index: 2; }

/* One destination in the mobile dock; keep the existing trial visibility rules. */
@media (max-width: 749px) {
  .english-learning-page body.english-home .mobile-dock { grid-template-columns: minmax(0, 1fr); }
  .english-home .mobile-dock > :is(.home-resume-link, .home-trial-link) {
    min-height: 58px; padding: 7px 12px; gap: 12px; text-align: left;
  }
  .english-home .mobile-dock .home-resume-copy { display: grid; flex: 1; min-width: 0; }
  .english-home .mobile-dock .home-resume-copy strong { font-size: 14px; line-height: 1.6; }
  .english-home .mobile-dock .home-resume-copy small { font-size: 10px; line-height: 1.6; }
  .english-home .mobile-dock .dock-thumbnail {
    display: block; width: 44px; height: 44px; max-width: none; flex: none;
    object-fit: cover; border-radius: 6px; background: #f3eedf;
  }
  .english-home .mobile-dock .dock-thumbnail--trial { width: 58px; height: 44px; }
  .english-home .mobile-dock > a > svg { flex: none; margin-left: auto; }
}