/* ===== Theme tokens (light / dark / bamboo) =====
   Every color that changes between themes is a variable here.
   - Light values: :root. Overrides: :root[data-theme="dark"] and :root[data-theme="bamboo"]
     (bamboo is a green light theme: it only overrides what differs from light).
   - data-theme is set on <html> before first paint by the inline script in base.html,
     and cycled by the header toggle (theme-v2.js): light -> dark -> bamboo -> light.
   - New CSS: use these tokens for page/card backgrounds, body text, borders, header and
     heading bars, never raw colors. Colors that look the same in every theme (buttons) stay literal.
   To retune a theme, edit only its block below. */
:root {
    color-scheme: light;
    /* page & surfaces */
    --bg: #ffffff;                 /* page background */
    --surface: #ffffff;            /* cards, quiz options, tables */
    --surface-2: #fdfdfd;          /* example / dialogue blocks */
    --field: rgb(244, 243, 243);   /* form inputs */
    --border: #e5e7eb;             /* card borders, progress tracks */
    /* text */
    --text: #000000;
    --text-2: rgb(45, 45, 45);     /* soft black: h4, messages, quiz text */
    --text-3: rgb(70, 70, 70);
    --text-muted: rgb(93, 93, 93); /* fine print */
    --text-faint: #6b7280;
    --placeholder: rgb(31, 31, 31);
    /* colored text */
    --blue: rgb(23, 82, 131);      /* strong, footer, table headers */
    --blue-2: rgb(30, 92, 143);    /* links, blog titles */
    --green-mark: green;           /* check marks, left borders */
    --green-deep: rgb(0, 119, 0);
    --green-strong: rgb(20, 133, 20); /* quiz score */
    --error: rgb(192, 16, 16);
    --yes: rgb(37, 132, 80);       /* comparison table */
    --some: #a07714;
    --no: #b0483f;
    /* tinted surfaces */
    --mint: rgb(227, 241, 227);    /* nav pills, settings menu */
    --mint-hover: rgb(209, 235, 209);
    --mint-2: rgb(237, 246, 235);  /* overview rows, notes, quiz hover */
    --sky: rgb(231, 242, 249);     /* alternating rows, notes */
    --video-bg: #d5f0d8;
    /* controls */
    --btn-gray-bg: rgb(239, 237, 237);
    --btn-gray-text: rgb(86, 86, 86);
    --toggle-off: #c4c4c4;
    --scroll-track: #f1f1f1;
    --scroll-thumb: #d3d3d3;
    --scroll-thumb-hover: #cccbcb;
    /* header + dropdown menu */
    --header-bg: linear-gradient(rgb(196, 23, 23), rgb(212, 52, 52));
    --menu-bg: linear-gradient(rgb(212, 52, 52), rgb(200, 29, 29));
    --header-text: white;                       /* logo, hamburger lines, theme icon */
    --header-hover: rgb(255, 231, 92);          /* logo hover */
    --header-icon-hover: rgb(255, 226, 62);     /* theme icon hover + focus ring */
    --header-lines-active: linear-gradient(90deg, white, rgb(247, 211, 9)); /* hamburger hover / open */
    /* lesson heading bars + banners (used in lesson css) */
    --h1-bg: linear-gradient(rgb(83, 146, 197), rgb(61, 122, 172));    /* lesson title, blue */
    --h2-bg: linear-gradient(rgb(66, 185, 120), rgb(57, 174, 110));    /* section bars, green */
    --h3-bg: linear-gradient(rgb(101, 155, 200), rgb(119, 170, 211));  /* sub-topics, light blue */
    --banner-bg: linear-gradient(rgb(63, 130, 185), rgb(39, 101, 152)); /* add-to-homescreen banner */
    --note-bg: var(--sky);                                              /* .note boxes in lessons */
}

/* Dark palette: warm "ink at night" — dark blue-gray paper, soft paper-white text */
:root[data-theme="dark"] {
    color-scheme: dark;
    /* page & surfaces */
    --bg: #14151c;
    --surface: #1e2029;
    --surface-2: #191b24;
    --field: #2a2d3a;
    --border: #353846;
    /* text */
    --text: #ece7dd;
    --text-2: #e0dbd0;
    --text-3: #c8c2b7;
    --text-muted: #aaa59c;
    --text-faint: #9299a6;
    --placeholder: #b5afa5;
    /* colored text */
    --blue: #8cc4f3;
    --blue-2: #9ccdf5;
    --green-mark: #43c46f;
    --green-deep: #5fd583;
    --green-strong: #4fce74;
    --error: #ff7b72;
    --yes: #5fd39a;
    --some: #e6bd55;
    --no: #f28b80;
    /* tinted surfaces */
    --mint: #1f3528;
    --mint-hover: #2a4835;
    --mint-2: #1a2c21;
    --sky: #1a2a3c;
    --video-bg: #1a2c21;
    /* controls */
    --btn-gray-bg: #2e313e;
    --btn-gray-text: #d2ccc1;
    --toggle-off: #4c4f5e;
    --scroll-track: #1a1c25;
    --scroll-thumb: #3a3d4b;
    --scroll-thumb-hover: #4c4f5e;
    /* flashcard tokens defined in lesson css */
    --ink: #f1ece2;
    --stone: #aaa59c;
    --warm-white: #1e2029;
    /* header + menu in the note color => a fully dark page, no bright red bar */
    --header-bg: linear-gradient(#1d2f44, #1a2a3c);
    --menu-bg: linear-gradient(#1d2f44, #1a2a3c);
    /* heading bars + banner in the header navy: one calm color family, nothing glares */
    --h1-bg: linear-gradient(#1d2f44, #1a2a3c);
    --h2-bg: linear-gradient(#1d2f44, #1a2a3c);
    --h3-bg: linear-gradient(#1d2f44, #1a2a3c);
    --banner-bg: linear-gradient(#1d2f44, #1a2a3c);
}

/* Bamboo palette: green light theme — green banner, soft green surfaces, green accents.
   Only what differs from light; heading bars stay as in light. */
:root[data-theme="bamboo"] {
    /* colored text: the blues turn green */
    --blue: rgb(24, 110, 63);
    --blue-2: rgb(29, 122, 70);
    /* tinted surfaces */
    --sky: rgb(234, 243, 234);     /* alternating rows, table headers */
    --note-bg: linear-gradient(145deg, rgba(53, 171, 106, 0.12), rgba(228, 223, 223, 0.1));
    /* header: white with bamboo-green logo, icon and hamburger; the dropdown menu stays green */
    --header-bg: linear-gradient(#ffffff, #ffffff);
    --menu-bg: linear-gradient(rgb(44, 150, 92), rgb(33, 132, 79));
    --header-text: rgb(24, 110, 63);
    --header-hover: rgb(53, 171, 106);
    --header-icon-hover: rgb(53, 171, 106);
    --header-lines-active: linear-gradient(90deg, rgb(24, 110, 63), rgb(53, 171, 106));
}

/* * {
    outline: 1px solid red !important;
} */

* {
  -webkit-tap-highlight-color: transparent;
}

html {
    box-sizing: border-box;
  }
*, *:before, *:after {
box-sizing: inherit;
}

body {
  font-family: system-ui, -apple-system, 'Noto Sans SC', 'PingFang SC';
  scroll-behavior: smooth;
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
}

h1, h2, h3 {
  font-family: system-ui, -apple-system, 'Noto Sans SC', 'PingFang SC';
}

a {
    color: inherit;
    text-decoration: none;

}

strong {
    color: var(--blue);
    font-weight: bold;
}

.lesson-cont strong {
    color: var(--blue);
    font-weight: 550;
}

.lesson-cont .bold {
    font-weight: 550;
}

.green-link {
    color: rgb(37, 155, 90);
    font-weight: 650;
}

.blue-link {
    color: var(--blue-2);
    font-weight: 650;
}

/* play button */
.logosvg {
    height: 1.75rem;
    vertical-align: -0.25em;
    margin: 0 1px 0 0;
}

.svg {
    height: 1.4rem;
    vertical-align: -0.2em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.homesvg {
    height: 1.5rem;
    vertical-align: -0.2em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.homebubblesvg {
    height: 1.6rem;
    vertical-align: -0.2em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.productsvg {
    height: 2.1rem;
    vertical-align: -0.1em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.buttonsvg {
    height: 1.8rem;
    vertical-align: -0.1em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.productsvgtiger {
    height: 2.5rem;
    vertical-align: -0.5em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.productbubblesvg {
    height: 2.2rem;
    vertical-align: -0.2em;
    margin: 0;
}

.lessonsvg {
    height: 2.3rem;
    vertical-align: -0.3em;
    margin: 0 1px 0 0;
}

.titlesvg {
    height: 2.25rem;
    vertical-align: -0.3em;
    margin: 0 1px 0 0;
}

.tigersvg {
    height: 2.6rem;
    vertical-align: -0.5em;
    margin: 0 1px 0 0;
}

.paymentsvg {
    height: 2.5rem;
    vertical-align: -0.2em; /* nudge down like emoji */
    margin: 0 1px 0 0;
}

.menusvg {
    height: 1.7rem;
    vertical-align: -0.4em; /* nudge down like emoji */
    margin: 0 3px 0 0;
}

.menusvg.mright {
    transform: translateX(0.1em);
}

.menusvg.mleft {
    transform: translateX(-0.05em);
}


/* Header */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: var(--header-bg);
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em; 
    padding: 0;
    position: relative;
    width: 100%;
    margin: 0;
    /* position: fixed; */
    top: 0;
    left: 0;
    z-index: 100; /* above all page content (carousel arrows use 10) so the dropdown menu is never covered */
}

.header-content {
    display: flex;
    width: 80%; 
    margin: 0 auto; 
    display: flex; 
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .header-content {
        width: 100%;
    }
}

.logo {
    font-size: 1.25rem;
    text-align: left;
    margin-left: 1rem;
    color: var(--header-text);
    cursor: pointer;
    /* font-family: 'Montserrat'; */
    display: inline-block; 
    align-items: center;
}

/* .latin-logo {
    font-family: 'ZCOOL XiaoWei';
    font-size: 1.3rem;
    letter-spacing: 1px;
} */

.logo:hover {
    color: var(--header-hover);
}

.char-logo {
    font-size: 1.5rem;
    font-weight: normal;
    align-items: center;
}

.logo a {
    text-decoration: none;
}

/* Hamburger */

.hamburger-container {
    position: relative;
    display: inline-block;
    align-items: center;
}

.hamburger {
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin-right: 1rem;
    margin-left: 0.6rem;
    align-items: center;
}

.line {
    width: 2.5rem;
    height: 0.33rem;
    background-color: var(--header-text);
    border-radius: 2px;
    margin: 0.25rem 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.menu {
    position: absolute;
    top: 100%; /* Directly below the navbar */
    right: 2rem;
    width: auto; 
    min-width: 13rem; 
    border-radius: 0.7em;
    background-image: var(--menu-bg);
    color: white;
    font-weight: 600;
    /* Hidden state */
    transform: translateY(-20px); 
    opacity: 0;
    visibility: hidden;
    z-index: 10; 
    pointer-events: none; /* Disabled when hidden */
    /* Transition settings */
    transition: 
        transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out,
        visibility 0s linear 0.3s; /* Delay visibility */
}

/* .course {
} */

@media (max-width: 768px) {
    .menu {
        right:0rem;
    }
}

.menu-toggle {
    display: none;
}

.menu-toggle:checked ~ .menu { /* Active state */
    transform: translateY(0); 
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Enable interactions */
    transition-delay: 0s;
}

.menu-toggle:checked ~ .hamburger-container .hamburger .line {
    /* background-color: white; */
    background-image: var(--header-lines-active);
    /* background-image: linear-gradient(90deg, white, rgb(220, 220, 220)); */
}

.menu-toggle:hover ~ .hamburger-container .hamburger .line {
    /* background-color: white; */
    background-image: var(--header-lines-active);
    /* background-image: linear-gradient(90deg, white, rgb(220, 220, 220)); */
}

.menu ul {
    list-style: none;
    padding: 0.3rem;
    margin: 0.5rem;
}

.menu li {
    font-size: 1.05rem;
    /* font-family: 'ZCOOL XiaoWei';
    letter-spacing: 1px; */
    padding: 0.275rem;
    /* margin-top: 0.25rem; */
    margin-left: 0rem;
    color: white;
    transition: background-color 0.3s ease-in-out;
    /* border-bottom: 1px solid rgb(249, 227, 227); */
}

/* .menu li:last-child {
    border-bottom: none;
} */

@media (max-width: 768px) {
    .menu li {
        font-size: 1.10rem;
        /* text-align: right; */
    }
}

.menu li:hover {
    color: rgb(255, 226, 62);
    /* font-weight: bold; */
}

.menu a { 
    text-decoration: none;
}

/* Containers */

.narrow-container {
    max-width: 90%;
    margin: 0 auto;   
}
@media (min-width: 768px) {
    .narrow-container {
        max-width: 65%;
    }
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

/* Bottom button */

.button-wrap {
    text-align: center; /* This centers the inline/inline-block/inline-flex button */
    margin-bottom: 1.75rem;
}

.button {
    display: inline-flex;
    color: rgb(253, 218, 20);
    background-image: linear-gradient(rgb(192, 16, 16), rgb(223, 50, 50));
    border-width: 0;
    padding: 0.4rem 1.5rem;
    border-radius: 1.5em;
    margin: 0.5rem auto 0;
    cursor: pointer;
    text-decoration: none;
    align-items: center; /* horizontally */
    /* color: white;
    background-image: linear-gradient(rgb(21, 153, 21), green); */
}

.char-button {
    font-size: 1.7rem;
    margin-right: 0.75rem;
}

.text-button {
    font-weight: bold;
    font-size: 1.1rem;
}

#vars {
    display: none;
}

footer {
    color: var(--blue);
    /* font-weight: 550; */
    font-size: 0.75rem;
    display: flex;
    justify-content: center; 
    align-items: center;
    padding: 1rem;
}

footer a {
    cursor: pointer;
    margin-left: 0rem;    
}

/* Navigation */

.navigation-wrapper {
    display: grid;
    justify-items: center; 
    align-items: center;
    margin: 1rem 0rem;
}

.navigation {
  display: flex;        
  justify-content: center;
  align-items: center;  
  gap: 0.8rem;      
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    background-color: var(--mint);
    padding: 0rem 0rem;
    min-width: 8rem;
    border-radius: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    /* transition:
        transform 120ms ease,
        opacity 120ms ease,
        filter 120ms ease,
        background-color 160ms ease; <-- add this */
}

.nav-link.prev {
    justify-content: flex-start;
}.nav-link.next {
    justify-content: flex-end;
}

.nav-link:hover {
  background-color: var(--mint-hover);
  transform: translateX(0px) translateY(-1px);
}
/* .nav-link:active {
    transform: translateX(1px) translateY(-1px);
    transform: scale(0.98);
    opacity: 0.96;
} */

.navsvg {
    height: 2.5rem;
}

.bottom-nav {
    margin-bottom: 2rem !important;
}

/* Home page */

.info-text {
    line-height: 1.75;
    text-align: center;
}

.terms-text {
    /* line-height: 1.75; */
    text-align: left;
}

.slogan {
    font-size: 1.15rem;
}

.slogan-minor {
    font-size: 1.1rem;
}

.green-slogan {
    font-size: 1.15rem;
    color: rgb(43, 160, 96);
}

.mascot-container {
    display: block;
    margin: 0.8rem auto;
    text-align: center;
}

.mascot-image {
    max-width: 14rem;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.85em;
    /* border-color: gold;
    border-color: rgb(170, 7, 7);
    border-width: 0.22rem;
    border-style: solid; */
}

.comeback {
    margin-top: 1rem;
}

/* Lesson overview */

.o-item {
    font-size: 1rem;
    padding: 0.3rem 1rem !important;
    cursor: pointer;
    /* color: rgb(34, 147, 85);  */
    /* color: rgb(23, 82, 131); */
    font-weight: 550;
    margin: 0rem !important;
    border-radius: 1em;

}

.o-item:hover {
    font-weight: 550;
    /* color:#333; */
    background-color: var(--mint-2);
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
}

.free-lesson {
    background-color: var(--mint-2);
    cursor: auto;
}

.thumbnail {
    height: 6.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0;
}

a:has(.thumbnail) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.7rem;
  padding: 0rem 0rem;
  margin: 0.25rem 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  background-color: var(--mint-2);
  font-weight: 500;
  font-size: 1.1rem;
}

a:has(.thumbnail):hover     { 
    /* background-color: rgb(237, 246, 235); */
    transform: translateY(-1.5px); 
    /* color: rgb(23, 82, 131); */
    /* font-weight: 600; */
}  

.free {
    font-size: 1rem;
    margin-left: 1.5rem !important;
    color: var(--green-deep) !important;
    font-weight: 550 !important;
    align-items: center;
}

.check2 {
    text-indent: 0rem; /* Indents the paragraph to the right */
    position: relative; /* Allows positioning of the pseudo-element */
    padding-left: 1.5rem; /* Makes space for the checkmark */
    /* font-size: 1.05rem; */
}

.check2::before {
    content: '✓'; /* Adds the checkmark symbol */
    position: absolute; /* Positions the checkmark relative to the paragraph */
    left: 0; /* Aligns the checkmark to the left */
    top: 50%; /* Positions the checkmark at 50% from the top */
    transform: translateY(-50%); /* Shifts the checkmark up by half its height to center it */
    color: var(--green-mark);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Scroll bar  */

@media (min-device-width: 768px) {

    ::-webkit-scrollbar {
        width: 0.6rem;
        height: 0.6rem;
        -webkit-border-radius: 0.6em;
        border-radius: 0.6em;
    }
    ::-webkit-scrollbar-track {
        background: var(--scroll-track); 
        -webkit-border-radius: 0.6em;
        border-radius: 0.6em;
    }
    ::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb); 
        border-radius: 0.6em;
        height: 0.6rem;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-thumb-hover); 
    }
    ::-webkit-scrollbar-corner { 
        display: none; 
        height: 0; 
        width: 0; 
    }

    /* ::-webkit-scrollbar {
        height: 0.4rem;
        -webkit-box-shadow: inset 0 0 0.4rem rgba(0,0,0,0); 
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0); 
    } */
}

/* Spinner */

.spinner {
    --bordersize: 1rem;
    position: fixed;
    top: 40%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin: 0 0 0 -2.25rem;
    border: var(--bordersize) solid var(--bg);
    border-radius: 50%;
    border-top: var(--bordersize) solid rgb(255, 154, 71);
    border-right: var(--bordersize) solid rgb(255, 154, 71);
    border-bottom: var(--bordersize) solid rgb(255, 154, 71);
    z-index: 1;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {   /* Safari */
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/* Modal */

.modal {
    position: fixed;
    top: 0%;
    left: 0%;
    height: 100vh;
    width: 100%;
    opacity: 0.7;
    background-color: var(--bg);
    z-index: 1;
}

.modal-title {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    font-weight: bold;
    color: rgb(255, 154, 71); 
    background-color: var(--bg);
    padding: 1rem 2rem;
    border-radius: 0.6em;
    opacity: 1;
    z-index: 2;
}

/* hero image */
:root {
    --hero-height: 95vh;
}

.hero {
    position: relative;
    width: 100%;
    min-height: var(--hero-height);
    background-color: #f0f0f0; 
    background: url('/static/img/hero-v1.webp') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;                  /* sit above overlay */
    color: white;
    padding: 0.5 1.5rem;
    margin-bottom: 10vh; 
}

/* headline slides FROM TOP */
.hero-title {
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    font-weight: 700;
    line-height: 1.15;
    /* letter-spacing: 1px; */
    margin: 0 0.5rem 1.8rem;
    opacity: 0;
    animation: slideDown .9s .25s forwards;
    /* font-family: 'ZCOOL XiaoWei'; */
    /* font-family: Roboto; */
}

/* subtitle slides FROM BOTTOM */
.hero-subtitle {
    margin: 1.75rem 0.5rem 0rem;
    font-size: clamp(1.4rem, 2vw + .5rem, 2.4rem);
    line-height: 1.4;
    font-weight: 500;
    opacity: 0;
    animation: slideUp .8s 1.6s forwards;
    /* font-family: 'ZCOOL XiaoWei'; */
    /* color: rgb(23, 82, 131); */
}

/* subtitle slides FROM BOTTOM */
.stars-subtitle {
    margin: 1.75rem 0.5rem 0rem;
    font-size: clamp(1.1rem, 2vw + .5rem, 1.25rem);
    line-height: 1.5;
    font-weight: 500;
    opacity: 0;
    animation: slideUp .8s 1.6s forwards;
    /* font-family: 'ZCOOL XiaoWei'; */
    /* color: rgb(23, 82, 131); */
}

/* make text more visible */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.025); /* Adjust opacity as needed */
    z-index: 1; /* Below .hero-content */
}

.hero-title,
.hero-subtitle,
.stars-subtitle {
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

/* buttons fade IN */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
  column-gap: 1rem;   /* horizontal space  */
  row-gap: 0.8rem; /* vertical space    */
  opacity: 0;
  animation: fadeIn 0.8s 1s forwards;
}

.hero-button {
    font-size: 1.05rem;
    display: inline-block;
    font-weight: 650;   
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    color: white;
    background-image: linear-gradient(mediumaquamarine, mediumseagreen);
    border-width: 0;
    padding: 0.7rem 1.5rem;
    border-radius: 1.5em;
    margin: 0.5rem auto 0;
    cursor: pointer;
    text-decoration: none;
    align-items: center; /* horizontally */
    transition: background .3s, transform .3s;
    /* font-family: 'ZCOOL XiaoWei'; */
    /* letter-spacing: 1px; */
    /* color: white;
    background-image: linear-gradient(rgb(21, 153, 21), green); */
}
.hero-button:hover     { 
    transform: translateY(-2px); 
}

/* ----------  ANIMATIONS  ---------- */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity:0; }
  to   { transform: translateY(0);     opacity:1; }
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity:0; }
  to   { transform: translateY(0);    opacity:1; }
}
@keyframes fadeIn {
  from { opacity:0; transform: scale(.95); }
  to   { opacity:1; transform: scale(1);    }
}

/* New lessons every week */
.newlessons-container {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;  
}

.newlessons {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the text */
    align-items: center;      /* Horizontally centers the text */
    
    padding: 2rem;
    border-radius: 1.25rem;

    background: url('/static/img/hero2-v1.webp') center/cover no-repeat;
    max-width: 100%;
    overflow: hidden;
    margin: 1rem auto;

    min-height: 50vh; /* Takes up significant vertical space on all screens */
    text-align: center; /* Optional: center the paragraph text */
    
}

.newlessons-item {
    font-size: 1.5rem;
    /* text-shadow: 
    0px 2px 4px rgba(0,0,0,0.8),
    0px 0px 2px rgba(0,0,0,1); */
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
    margin: 0.8rem auto;
    /* text-align: left; */
    max-width: fit-content;
    color: white;
    font-weight: 600;
    opacity: 1;
    /* animation: slideDownSubscribe 1s .2s forwards; */
}

.newlessons-item a {
text-decoration: underline;
}

@media (max-width: 600px) {
    .newlessons-container {
        width: 100%;
    }
    .newlessons-item {
        font-size: 1.2rem;
    }
}

/* video blog */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); /* soft shadow */
    margin: 1.75rem auto 5rem;
}
.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--video-bg);
    border: none;
    outline: none;
    border-radius: inherit;
}
.videohero {
    width: 100%;
    min-height: var(--hero-height);
    background-color: #f0f0f0; 
    background: url('/static/img/hero-v1.webp') center/cover no-repeat;
}

/* ===== Theme toggle (moon / bamboo / sun icon in the header, left of the hamburger) ===== */

/* transparent icon button: outline icon of the next theme */
.theme-toggle {
    margin-left: auto; /* pushes the icon + hamburger to the right edge of the header */
    padding: 0.3rem;
    border: 0;
    background: none;
    color: var(--header-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    flex-shrink: 0;
    opacity: 0.9;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.theme-toggle:hover {
    color: var(--header-icon-hover);
    opacity: 1;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--header-icon-hover);
    outline-offset: 2px;
}

.theme-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* show the icon of the theme you switch TO (cycle light -> dark -> bamboo -> light):
   moon while light, bamboo while dark, sun while bamboo */
.theme-icon-bamboo,
.theme-icon-sun,
:root[data-theme="dark"] .theme-icon-moon,
:root[data-theme="bamboo"] .theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-icon-bamboo,
:root[data-theme="bamboo"] .theme-icon-sun {
    display: block;
}

/* small screens: the logo needs the full row width, so the icon sits above the hamburger
   instead of beside it (beside it, the logo wraps to an extra line and the header grows) */
@media (max-width: 680px) {
    .header-content {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
    }
    .logo {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .hamburger-container {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        justify-self: end;
    }
    .theme-toggle {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: end;
        padding: 0.2rem;
        margin: 0.3rem calc(1rem + 0.35rem) 0 0; /* centered above the 2.5rem hamburger */
    }
    .theme-icon {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* soft cross-fade of page colors while switching (class set briefly by theme-v2.js);
   :where() keeps specificity at 0 so elements with their own transition keep it */
:where(html.theme-anim) :where(body, body *) {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* calm mode: no fading for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
    :where(html.theme-anim) :where(body, body *) {
        transition: none;
    }
}

/* ===== Theme-only adjustments (things tokens alone can't express) ===== */

/* mid-green titles and labels read dim on the dark page => one brighter green for all of them */
:root[data-theme="dark"] .signup-title,
:root[data-theme="dark"] .subscribe-title,
:root[data-theme="dark"] .price,
:root[data-theme="dark"] .field,
:root[data-theme="dark"] .green-link,
:root[data-theme="dark"] .green-slogan {
    color: #5fd39a;
}

/* header + dropdown menu sit in the note color: a hairline and a shadow keep them apart from the page */
:root[data-theme="dark"] header {
    box-shadow: 0 1px 0 var(--border);
}

:root[data-theme="dark"] .menu {
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* bamboo: white header on a white page => a soft hairline + shadow marks its edge */
:root[data-theme="bamboo"] header {
    box-shadow: 0 1px 0 #e3ece3, 0 2px 10px rgba(24, 110, 63, 0.08);
}

/* typed text in form fields follows the page text color */
:root[data-theme="dark"] .email,
:root[data-theme="dark"] .password {
    color: var(--text);
}

/* payment logos are drawn for a white page (Apple Pay is pure black) => sit them on a white chip */
:root[data-theme="dark"] .paymentsvg {
    background-color: #ffffff;
    border-radius: 0.4rem;
    padding: 0.15rem 0.3rem;
}