/* Course shop. Look and feel deliberately copied from the former Teachable school
   (victorrentea.teachable.com), so returning students recognise it: Lucida Sans, blue
   navbar and footer, full-width banners, crimson pill buttons, grey curriculum box.
   Light only, like the original school. */
:root {
    color-scheme: light;
    --brand: #476CC4;          /* navbar, footer, curriculum links */
    --cta: #E61F5B;            /* "Purchase Course" / "START" */
    --cta-dark: #c81a4e;
    --text: #36414D;
    --text-soft: #6b7682;
    --bg: #ffffff;
    --box: #F0F0F0;
    --box-head: #E8E8E8;
    --line: #dfe3e8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--cta); text-decoration: none; }
a:hover { text-decoration: underline; }
main { flex: 1; width: 100%; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* --- navbar --- */
.navbar { background: var(--brand); height: 64px; display: flex; align-items: center; }
.navbar .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.navbar .logo img { height: 46px; width: 46px; display: block; border-radius: 50%; }
.navbar nav { display: flex; gap: 24px; }
.navbar nav a { color: #fff; font-size: 15px; font-weight: 600; }

/* --- footer --- */
.footer { background: var(--brand); color: #fff; padding: 28px 0; margin-top: 56px; }
.footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer a { color: #fff; display: block; font-size: 14px; }
.footer .copy { font-size: 18px; }

/* --- buttons --- */
.button {
    display: inline-block;
    background: var(--cta);
    color: #fff;
    border: 0;
    border-radius: 25px;
    padding: 13px 28px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.button:hover { background: var(--cta-dark); text-decoration: none; }
.button.outline { background: transparent; border: 1px solid #fff; border-radius: 4px; padding: 8px 18px; font-weight: 600; }
.button.outline:hover { background: rgba(255,255,255,.12); }
.button.disabled { opacity: .45; pointer-events: none; }

/* --- banner (home + course sales page) --- */
.banner {
    position: relative;
    background: var(--brand) center / cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 110px 20px;
}
.banner::before { content: ''; position: absolute; inset: 0; background: rgba(20, 30, 60, .35); }
.banner > * { position: relative; }
.banner h1 { font-size: 48px; line-height: 1.3; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.banner p { font-size: 24px; margin: 6px 0 28px; text-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* --- rich text --- */
.rich { padding-top: 40px; }
.rich p { margin: 0 0 14px; }
.rich h3 { font-size: 32px; font-weight: 400; line-height: 1.5; margin: 28px 0 8px; }
.rich ul { margin: 0 0 14px 24px; }
.rich li { margin: 2px 0; }
.rich a { color: var(--cta); }

.section-title { font-size: 28px; font-weight: 400; text-align: center; margin: 56px 0 24px; }

/* --- client logos (same carousel image as the Teachable homepage) --- */
.clients { margin: 36px auto 0; max-width: 1000px; height: 120px; overflow: hidden; position: relative; }
.clients small { color: var(--brand); font-size: 12px; }
.clients div { position: absolute; top: 22px; left: 0; width: 5052px; height: 90px;
               background: url(/logo/client-carousel-s.jpg) 0 0 / auto 100% repeat-x; animation: slide 60s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --- course cards --- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.card {
    display: flex;
    flex-direction: column;
    background: #f7f7f9;
    border: 1px solid #c9ccd1;
    border-radius: 6px;
    overflow: hidden;
    color: var(--text);
    transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); text-decoration: none; }
.card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card .body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h2 { color: var(--cta); font-size: 19px; font-weight: 700; line-height: 1.35; }
.card .desc { color: var(--cta); font-size: 14px; opacity: .85; flex: 1; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--cta); }
.card .author { display: flex; align-items: center; gap: 8px; }
.card .author img { width: 26px; height: 26px; border-radius: 50%; }
.card .owned { color: var(--brand); font-weight: 700; }

/* --- curriculum --- */
.curriculum { max-width: 680px; margin: 0 auto; background: var(--box); }
.curriculum .head { background: var(--box-head); color: var(--brand); font-weight: 700; padding: 10px 16px; }
.curriculum .item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #fff; color: var(--brand); }
.curriculum a.item:hover { background: #e9e9ec; text-decoration: none; }
.curriculum .icon { width: 20px; text-align: center; color: var(--cta); }
.curriculum .grow { flex: 1; }
.start { background: var(--cta); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 3px; letter-spacing: .5px; opacity: .8; }

/* --- trainer --- */
.trainer { display: flex; gap: 32px; align-items: flex-start; }
.trainer img { width: 320px; max-width: 40%; flex-shrink: 0; }
.trainer h2 { font-size: 24px; font-weight: 400; margin-bottom: 10px; }
.trainer p { margin-bottom: 12px; font-size: 15px; }
.trainer a { color: var(--brand); }

/* --- get access --- */
.access { text-align: center; }
.access .price { font-size: 26px; color: var(--brand); font-weight: 700; }
.access .what { color: var(--brand); margin: 2px 0 20px; }
.access small { display: block; color: var(--text-soft); margin-top: 12px; font-size: 13px; }

.faq h3 { font-size: 17px; margin: 22px 0 6px; }
.faq p { margin-bottom: 6px; }

/* --- lecture page (watch.php): sidebar + content, like Teachable's course player --- */
.player-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); flex: 1; }
.player-side { border-right: 1px solid var(--line); background: #fff; }
.player-side .course-title { background: #f7f7f7; padding: 22px 20px; font-size: 19px; font-weight: 700; border-bottom: 1px solid var(--line); }
.player-side .section { padding: 18px 14px 10px; font-weight: 700; }
.player-side a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; color: var(--brand); font-size: 15px; border-top: 1px solid #f1f1f1; }
.player-side a.current { background: #fbe4ec; }
.player-side a:hover { background: #f6f6f8; text-decoration: none; }
.player-side .icon { color: var(--text-soft); width: 20px; text-align: center; }
.player-bar { background: var(--brand); padding: 12px 20px; display: flex; justify-content: flex-end; gap: 12px; }
.player-main .content { padding: 28px 34px; }
.player-main h1 { font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.video { position: relative; padding-top: 56.25%; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.download-box { border: 1px solid var(--line); border-radius: 6px; padding: 28px; text-align: center; background: #fafafa; }
.download-box p { margin-bottom: 18px; }

/* --- simple pages: my courses, help, resend --- */
.page { padding-top: 40px; }
.page h1 { font-size: 32px; font-weight: 400; margin-bottom: 14px; }
.note { color: var(--text-soft); margin: 14px 0; }
.resend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.resend input { flex: 1; min-width: 240px; padding: 12px; font: inherit; border: 1px solid #c9ccd1; border-radius: 4px; }

@media (max-width: 800px) {
    .banner { padding: 70px 16px; }
    .banner h1 { font-size: 32px; }
    .banner p { font-size: 18px; }
    .trainer { flex-direction: column; }
    .trainer img { max-width: 100%; width: 100%; }
    .player-page { grid-template-columns: 1fr; }
    .player-side { border-right: 0; border-top: 1px solid var(--line); order: 2; }
    .player-main .content { padding: 20px 16px; }
    .navbar nav { gap: 14px; }
}
.faq h2:not(.section-title) { font-size: 18px; margin: 24px 0 6px; }