/* FAQ pages: the hub (/faqs, public/faqs.html) and one page per course
   (/faqs/<course>, public/faqs/<course>.html). Loaded after /pages.css, so
   everything here builds on the same tokens and the same .faq accordion.

   Owner, 16 Oct 2026: "make different pages, for each course, there will be
   more courses coming, it will confuse people." So the hub is a list of
   cards — adding a course is one more .fcard on the hub plus one more page in
   this folder, copied from an existing one. */

/* breadcrumb back to the hub */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px;font-size:14px;font-weight:600;color:var(--ink-dim)}
.crumb a{color:var(--maya)}.crumb a:hover{text-decoration:underline}
.crumb .sep{color:var(--muted)}

.courses-h{font-family:var(--f-display);font-weight:800;font-size:22px;margin:0 0 6px}
.courses-sub{color:var(--ink-dim);font-size:15px;margin:0 0 16px}

/* hub: one card per course */
.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-bottom:14px}
.fcard{position:relative;background:var(--raised);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .18s}
.fcard:hover{border-color:var(--maya);transform:translateY(-2px)}
.fcard h3{font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1.2}
.fcard h3 a::after{content:"";position:absolute;inset:0;border-radius:16px}
.fcard .for{color:var(--ink-dim);font-size:15px;line-height:1.5}
.fcard .price{font-family:var(--f-display);font-weight:800;color:var(--maya-deep);font-size:20px;white-space:nowrap}
.fcard .price s{color:var(--muted);font-weight:600;font-size:14px;margin-left:6px}
.fcard .price small{display:block;font-family:var(--f-body);font-weight:700;font-size:12.5px;color:var(--maya-deep);white-space:normal;margin-top:2px}
.fcard .mini{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14.5px;color:var(--ink-dim)}
.fcard .mini li{display:flex;gap:8px}
.fcard .mini li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--maya);margin-top:10px}
.fcard .go{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--maya)}
.fcard .go svg{width:16px;height:16px}
.bnote{background:var(--maya-soft);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;font-size:15px;color:var(--ink-dim);margin:0 0 40px}
.bnote b{color:var(--ink)}
.bnote a{color:var(--maya);font-weight:700}

/* course page: the facts box */
.crow{background:var(--raised);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;display:grid;gap:14px;margin-bottom:40px}
.crow h2{font-family:var(--f-display);font-weight:800;font-size:18px;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between}
.crow .price{font-family:var(--f-display);font-weight:800;color:var(--maya-deep);font-size:20px;white-space:nowrap}
.crow .price s{color:var(--muted);font-weight:600;font-size:14px;margin-left:6px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.facts div{background:var(--maya-soft);border-radius:12px;padding:10px 12px}
.facts dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--maya-deep);margin:0 0 4px}
.facts dd{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink)}
.crow .note{font-size:14.5px;color:var(--ink-dim);line-height:1.5}
.crow .note b{color:var(--ink)}
.crow .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.crow .acts .more{font-weight:700;font-size:14.5px;color:var(--maya)}
.crow .acts .more:hover{text-decoration:underline}
@media (max-width:720px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.faq-group{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--maya-deep);margin:30px 0 12px}
.faq-group:first-of-type{margin-top:0}
.faq .ans a{color:var(--maya);font-weight:600}
[data-lang="kn"] .facts dt,[data-lang="kn"] .faq-group{letter-spacing:.03em;line-height:1.5}

/* the buy button, and the bar that keeps it on screen on course pages */
.buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--maya);color:#fff;font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;white-space:nowrap}
.buy:hover{filter:brightness(.95)}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:color-mix(in srgb,var(--raised) 94%,transparent);backdrop-filter:saturate(1.3) blur(12px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(34,24,32,.08);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.buybar .in{max-width:820px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:10px}
.buybar .what{flex:1;min-width:0;line-height:1.25}
.buybar .what b{display:block;font-family:var(--f-display);font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .what .sub{display:block;font-size:13px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .buy{padding:11px 16px}
.buybar .wa{flex:none;width:44px;height:44px;border-radius:12px;background:var(--wa);color:#fff;display:grid;place-items:center}
.buybar .wa svg{width:22px;height:22px}
/* The bar carries the WhatsApp link, so the round floating one would only sit on top of it. */
body.has-buybar{padding-bottom:76px}
body.has-buybar .wa-float{display:none}
@media (max-width:400px){.buybar .what b{font-size:15px}.buybar .buy{padding:11px 13px;font-size:14px}}