/* Shared theme system for the course homepage and Course 1–4. */

/* Hide every legacy theme button. Home/back links in .top-actions stay visible. */
#themeBtn {
  display: none !important;
}

.shared-theme-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(18,20,25,.82);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.shared-theme-switcher button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #f5f5f7;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.shared-theme-switcher button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}

.shared-theme-switcher button[aria-pressed="true"] {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, #7dd3fc, #a78bfa);
  color: #080a10;
  box-shadow: 0 8px 20px rgba(125,211,252,.18);
}

body.light-mode .shared-theme-switcher {
  border-color: rgba(17,24,39,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 34px rgba(15,23,42,.13);
}

body.light-mode .shared-theme-switcher button {
  color: #17191d;
}

/* Grey mode: warm light grey sampled from the user's reference (#DBD9D5). */
body.grey-mode {
  --bg: #dbd9d5 !important;
  --bg-soft: #dbd9d5 !important;
  --card: rgba(255,255,255,.36) !important;
  --card-strong: rgba(255,255,255,.50) !important;
  --line: rgba(26,29,33,.11) !important;
  --text: #1b1d20 !important;
  --muted: #565b62 !important;
  --soft: #30343a !important;
  --primary: #55514b !important;
  --primary-2: #6d6861 !important;
  --primary2: #6d6861 !important;
  --blue: #55514b !important;
  --purple: #6d6861 !important;
  --course1-primary: #55514b !important;
  --course1-primary2: #6d6861 !important;
  --shadow: 0 18px 48px rgba(42,43,45,.10) !important;
  color-scheme: light;
  color: #1b1d20 !important;
  background: #dbd9d5 !important;
}

body.grey-mode .nav,
body.grey-mode nav {
  border-color: rgba(26,29,33,.10) !important;
  background: rgba(219,217,213,.88) !important;
}

body.grey-mode .hero-main,
body.grey-mode .hero-side,
body.grey-mode .glass-card,
body.grey-mode .feature-box,
body.grey-mode .course-card,
body.grey-mode .stat-card,
body.grey-mode .contact-copy,
body.grey-mode .contact-qr,
body.grey-mode .about-philosophy-panel,
body.grey-mode .philosophy-large-card,
body.grey-mode .philosophy-profile-card,
body.grey-mode .card,
body.grey-mode .module,
body.grey-mode .big-module,
body.grey-mode .info-box,
body.grey-mode .info-card,
body.grey-mode .benefit-main,
body.grey-mode .benefit-card,
body.grey-mode .process-card,
body.grey-mode .result-card,
body.grey-mode .lesson-card,
body.grey-mode .feedback-item,
body.grey-mode .faq-item,
body.grey-mode .contrast-card,
body.grey-mode .panel,
body.grey-mode .price-card,
body.grey-mode .cta-block,
body.grey-mode .wechat,
body.grey-mode .problem-panel,
body.grey-mode .training-column,
body.grey-mode .skill-card,
body.grey-mode .step-card,
body.grey-mode .fit-card,
body.grey-mode .final-cta {
  color: #1b1d20 !important;
  border-color: rgba(26,29,33,.10) !important;
  background: rgba(255,255,255,.38) !important;
  box-shadow: 0 16px 42px rgba(42,43,45,.09) !important;
}

/* Some pages use the full hero container only for alignment. Forcing a card
   background here created the large rectangular blocks seen in Grey Mode. */
body.grey-mode .hero > .container {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.grey-mode h1,
body.grey-mode h2,
body.grey-mode h3,
body.grey-mode h4,
body.grey-mode strong,
body.grey-mode b,
body.grey-mode .brand {
  color: #17191c !important;
}

body.grey-mode p,
body.grey-mode li,
body.grey-mode span,
body.grey-mode .hero-copy,
body.grey-mode .hero-lead,
body.grey-mode .hero-text,
body.grey-mode .section-head p,
body.grey-mode .muted,
body.grey-mode .tiny,
body.grey-mode footer {
  color: #555a61 !important;
}

body.grey-mode .tag,
body.grey-mode .lesson-tag,
body.grey-mode .label,
body.grey-mode .course-tag,
body.grey-mode .mini-tag,
body.grey-mode .eyebrow,
body.grey-mode .pill,
body.grey-mode .price-badge {
  color: #353a40 !important;
  border-color: rgba(26,29,33,.11) !important;
  background: rgba(255,255,255,.34) !important;
}

body.grey-mode .btn-secondary,
body.grey-mode .top-actions a,
body.grey-mode .top-actions button {
  color: #25272b !important;
  border-color: rgba(26,29,33,.16) !important;
  background: rgba(246,245,242,.58) !important;
}

body.grey-mode .btn-primary,
body.grey-mode .process-num {
  color: #f7f7f5 !important;
  border-color: #303236 !important;
  background: #303236 !important;
  box-shadow: 0 10px 26px rgba(37,39,42,.18) !important;
}

body.grey-mode .btn-primary:hover {
  background: #242629 !important;
}

body.grey-mode .shared-theme-switcher button[aria-pressed="true"] {
  color: #ffffff !important;
  background: #3a3c40 !important;
  border-color: #3a3c40 !important;
}

body.grey-mode .old,
body.grey-mode .old-price {
  color: #747980 !important;
}

body.grey-mode .new,
body.grey-mode .new-price,
body.grey-mode .price,
body.grey-mode .coming {
  color: #202328 !important;
}

body.grey-mode .shared-theme-switcher {
  border-color: rgba(26,29,33,.11);
  background: rgba(239,238,235,.90);
  box-shadow: 0 14px 34px rgba(42,43,45,.13);
}

body.grey-mode .shared-theme-switcher button {
  color: #202328;
}

/* Final Grey Mode typography normalization.
   It removes inherited blue/purple gradients and stray white text from light surfaces. */
body.grey-mode main :where(p, li, span, small),
body.grey-mode header :where(p, li, span, small),
body.grey-mode section :where(p, li, span, small) {
  color: #4d4943 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.grey-mode h1,
body.grey-mode h2,
body.grey-mode h3,
body.grey-mode h4,
body.grey-mode h1 span,
body.grey-mode .hero h1 span {
  color: #24221f !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #24221f !important;
}

body.grey-mode .section-head .kicker,
body.grey-mode .skill-code,
body.grey-mode .dot,
body.grey-mode .price-label,
body.grey-mode .price-note,
body.grey-mode .note,
body.grey-mode .label,
body.grey-mode .tag,
body.grey-mode .lesson-tag,
body.grey-mode .course-tag,
body.grey-mode .mini-tag,
body.grey-mode .eyebrow,
body.grey-mode .pill,
body.grey-mode a:not(.btn) {
  color: #514d47 !important;
  -webkit-text-fill-color: #514d47 !important;
}

body.grey-mode .new,
body.grey-mode .new-price,
body.grey-mode .price,
body.grey-mode .coming {
  color: #2b2926 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #2b2926 !important;
}

body.grey-mode .btn-primary,
body.grey-mode .btn-primary span,
body.grey-mode .process-num {
  color: #f3f0ea !important;
  -webkit-text-fill-color: #f3f0ea !important;
}

body.grey-mode .btn-secondary,
body.grey-mode .btn-secondary span,
body.grey-mode .top-actions a,
body.grey-mode .top-actions button {
  color: #302e2a !important;
  -webkit-text-fill-color: #302e2a !important;
}

body.grey-mode .shared-theme-switcher button {
  color: #35322e !important;
  -webkit-text-fill-color: currentColor !important;
}

body.grey-mode .shared-theme-switcher button[aria-pressed="true"] {
  color: #f5f2ec !important;
  -webkit-text-fill-color: #f5f2ec !important;
}

@media (max-width: 600px) {
  .shared-theme-switcher {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 3px;
    padding: 5px;
  }

  .shared-theme-switcher button {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

/* Page-local sticky navigation for Course 1–3. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body.has-page-nav > .top-actions {
  display: none !important;
}

.page-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(9,10,14,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.page-nav-inner {
  width: min(1180px, 92%);
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.page-nav-home,
.page-nav-links a {
  flex: 0 0 auto;
  color: rgba(255,255,255,.72) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.page-nav-home {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #fff !important;
}

.page-nav-links {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 23px;
  margin-left: auto;
  justify-content: flex-end;
}

/* The home page follows the same layout: title on the left, page links on the right. */
.home-page-nav .nav-links,
.course-page-nav .nav-links {
  margin-left: auto;
  justify-content: flex-end;
}

.page-nav-home:hover,
.page-nav-links a:hover {
  color: #fff !important;
}

.page-nav-home:hover {
  background: rgba(255,255,255,.09);
}

body.light-mode .page-nav {
  border-bottom-color: rgba(18,23,33,.10);
  background: rgba(250,251,253,.88);
}

body.light-mode .page-nav-home,
body.light-mode .page-nav-links a {
  color: #505866 !important;
}

body.light-mode .page-nav-home {
  border-color: rgba(18,23,33,.13);
  color: #20242b !important;
}

body.light-mode .page-nav-home:hover,
body.light-mode .page-nav-links a:hover {
  color: #111318 !important;
}

body.grey-mode .page-nav {
  border-bottom-color: rgba(36,34,31,.11);
  background: rgba(219,217,213,.90);
}

body.grey-mode .page-nav-home,
body.grey-mode .page-nav-links a {
  color: #514d47 !important;
  -webkit-text-fill-color: #514d47 !important;
}

body.grey-mode .page-nav-home {
  border-color: rgba(36,34,31,.15);
  background: rgba(243,240,234,.50);
  color: #302e2a !important;
  -webkit-text-fill-color: #302e2a !important;
}

body.grey-mode .page-nav-home:hover,
body.grey-mode .page-nav-links a:hover {
  color: #1f1d1a !important;
  -webkit-text-fill-color: #1f1d1a !important;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 72px;
  }

  .page-nav-inner {
    width: 100%;
    min-height: 64px;
    gap: 15px;
    padding: 9px 14px;
    overflow: hidden;
  }

  .page-nav-home {
    padding: 8px 12px;
  }

  .page-nav-links {
    flex: 1 1 auto;
    gap: 18px;
    margin-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-nav-links::-webkit-scrollbar {
    display: none;
  }

  /* Course 4 keeps every page-local link available on phones. */
  .course-page-nav .nav-inner {
    width: 100%;
    padding: 8px 14px;
    gap: 16px;
    overflow: hidden;
  }

  .course-page-nav .back-home {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .course-page-nav .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-page-nav .nav-inner {
    width: 100%;
    min-height: 64px;
    padding: 9px 14px;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px;
    overflow: hidden;
  }

  .home-page-nav .brand {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .home-page-nav .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-page-nav .nav-links::-webkit-scrollbar {
    display: none;
  }

  .home-page-nav .nav-links a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .course-page-nav .nav-links::-webkit-scrollbar {
    display: none;
  }

  .course-page-nav .nav-links a {
    display: inline-flex !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Desktop: align navigation against the right edge of the viewport. */
@media (min-width: 761px) {
  .page-nav-inner,
  .home-page-nav .nav-inner,
  .course-page-nav .nav-inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-nav-inner,
  .course-page-nav .nav-inner {
    justify-content: flex-end;
  }

  .page-nav-links,
  .home-page-nav .nav-links,
  .course-page-nav .nav-links {
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Mobile: use the full width for a touch-friendly horizontal page menu. */
@media (max-width: 760px) {
  .page-nav-inner,
  .home-page-nav .nav-inner,
  .course-page-nav .nav-inner {
    width: 100%;
    min-height: 60px;
    padding: 7px 12px;
    gap: 0;
  }

  .home-page-nav .brand {
    display: none;
  }

  .page-nav-links,
  .home-page-nav .nav-links,
  .course-page-nav .nav-links {
    width: 100%;
    flex: 1 1 100%;
    gap: 8px;
    margin: 0;
    padding: 0 2px 2px;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-nav-links a,
  .home-page-nav .nav-links a,
  .course-page-nav .nav-links a {
    min-height: 42px;
    padding: 0 12px;
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .page-nav-links::-webkit-scrollbar,
  .home-page-nav .nav-links::-webkit-scrollbar,
  .course-page-nav .nav-links::-webkit-scrollbar {
    display: none;
  }
}

/* Keep desktop page links truly aligned to the viewport edge. */
.home-page-nav .brand {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.community-benefit {
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgba(125,211,252,.20);
  border-radius: 14px;
  background: rgba(125,211,252,.08);
  color: #dff4ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

body.light-mode .community-benefit {
  border-color: rgba(37,99,235,.15);
  background: rgba(37,99,235,.06);
  color: #244b76;
}

body.grey-mode .community-benefit {
  border-color: rgba(48,46,42,.14);
  background: rgba(243,240,234,.54);
  color: #3e3a35;
  -webkit-text-fill-color: #3e3a35;
}

#courses .community-card {
  grid-column: auto;
  width: 100%;
  justify-self: stretch;
}

/* Five homepage items: three cards on the first row, two on the second. */
#courses .courses-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  #courses .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .home-page-nav .brand {
    display: none !important;
  }

  #courses .community-card {
    width: 100%;
  }

  #courses .courses-grid {
    grid-template-columns: 1fr !important;
  }

  .community-benefit {
    margin-bottom: 16px;
    padding: 10px 12px;
  }
}

/* Shared course-benefit section used by each course detail page. */
.course-benefit-panel {
  padding: 34px;
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: 28px;
  background: var(--card, rgba(255,255,255,.05));
  box-shadow: var(--shadow, 0 18px 48px rgba(0,0,0,.16));
}

.course-benefit-panel h3 {
  margin: 0 0 10px;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.25;
}

.course-benefit-panel p {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--muted, #a1a1aa);
  line-height: 1.8;
}

body.light-mode .course-benefit-panel {
  border-color: rgba(19,25,35,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 46px rgba(29,36,48,.09);
}

body.grey-mode .course-benefit-panel {
  border-color: rgba(36,34,31,.10) !important;
  background: rgba(255,255,255,.38) !important;
  box-shadow: 0 16px 42px rgba(42,43,45,.09) !important;
}

@media (max-width: 760px) {
  .course-benefit-panel {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .course-benefit-panel .btn {
    width: 100%;
  }
}

/* Community page image showcase. */
.community-gallery {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
}

.community-image-card {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: 28px;
  background: var(--card, rgba(255,255,255,.05));
  box-shadow: var(--shadow, 0 18px 48px rgba(0,0,0,.16));
  overflow: hidden;
}

.community-image-card a,
.community-image-card img {
  display: block;
  width: 100%;
}

.community-image-card img {
  height: auto;
  border-radius: 18px;
}

.community-image-card figcaption {
  padding: 14px 6px 4px;
  color: var(--muted, #a1a1aa);
  font-size: 14px;
  text-align: center;
}

body.light-mode .community-image-card {
  border-color: rgba(19,25,35,.10);
  background: rgba(255,255,255,.82);
}

body.grey-mode .community-image-card {
  border-color: rgba(36,34,31,.10) !important;
  background: rgba(255,255,255,.38) !important;
  box-shadow: 0 16px 42px rgba(42,43,45,.09) !important;
}

@media (max-width: 760px) {
  .community-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .community-image-card {
    padding: 9px;
    border-radius: 22px;
  }

  .community-image-card img {
    border-radius: 15px;
  }
}