/* ==========================================================
   Soul Code Academy — shared visual layer (v1, 2026-08-30)
   Loaded AFTER each page's inline <style>. Overrides only what
   should be identical site-wide: type scale, buttons, cards,
   nav height, background pattern, focus, mobile behaviours.
   ========================================================== */

:root{
  --sc-red:#b3261e;
  --sc-red-deep:#8f1e18;
  --sc-ink:#111111;
  --sc-ink-soft:#4a4a4a;
  --sc-line:#e4e4e4;
  --sc-bg:#fcfcfc;
  --sc-r:14px;
  --sc-btn-h:48px;
  --sc-nav-h:68px;
  --fserif:"Noto Serif TC","Noto Serif SC",serif;
  --fsans:"Noto Sans TC","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --fen:"Space Grotesk",var(--fsans);
}

/* ---------- Type scale ---------- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fsans);font-size:16px;line-height:1.75;color:var(--sc-ink)}
h1{font-family:var(--fserif);font-weight:900;font-size:clamp(30px,4.2vw,40px);line-height:1.28;letter-spacing:.01em}
h2{font-family:var(--fserif);font-weight:700;font-size:clamp(24px,3vw,30px);line-height:1.3}
h3{font-family:var(--fserif);font-weight:700;font-size:18px;line-height:1.4}
h4{font-size:16px;font-weight:700}
p{font-size:16px}
.lede,.hero-lede,.cblock-sub{font-size:clamp(16px,1.8vw,17.5px);line-height:1.8}
.eyebrow,.sec-tag{font-family:var(--fen);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--sc-red)}
small,.meta,.xsum,.hint,.note,.faq-a{font-size:15px;line-height:1.7}
.xen,.cc-en,.h-en{font-family:var(--fen);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}
section{padding:56px 0}
@media(max-width:600px){section{padding:44px 0} h1{font-size:30px} h2{font-size:24px}}

/* ---------- Nav ---------- */
.nav-in{height:var(--sc-nav-h)}
.nav-links a{min-height:44px;display:inline-flex;align-items:center}
.navtoggle{width:44px;height:44px;border-radius:10px}
@media(max-width:900px){
  .nav-links{top:var(--sc-nav-h)}
  .catnav{top:var(--sc-nav-h)}
  /* language buttons move into the menu */
  .nav-in>.lang{display:none}
  .nav-links .lang{display:flex;margin:10px 28px 8px;align-self:flex-start;border-radius:10px}
  .nav-links .lang button{padding:10px 16px;min-height:44px;font-size:14px}
}

/* ---------- Buttons: two styles only ---------- */
.btn,.btn-primary,.btn-ghost,.enrollbtn,.calc-btn,.xreg-btn,.sc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--sc-btn-h);padding:0 22px;border-radius:10px;
  font-family:var(--fsans);font-size:16px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;line-height:1.2;
  transition:transform .15s,box-shadow .2s,background .2s,color .2s;
}
.btn-primary,.enrollbtn,.calc-btn,.sc-btn{
  background:var(--sc-red);color:#fff;border:1.5px solid var(--sc-red);
  box-shadow:0 8px 20px -10px rgba(179,38,30,.55);
}
.btn-primary:hover,.enrollbtn:hover,.calc-btn:hover,.sc-btn:hover{background:var(--sc-red-deep);border-color:var(--sc-red-deep);transform:translateY(-1px)}
.btn-ghost,.sc-btn.ghost,.btn.ghost{
  background:#fff;color:var(--sc-red);border:1.5px solid var(--sc-red);box-shadow:none;
}
.btn-ghost:hover,.sc-btn.ghost:hover,.btn.ghost:hover{background:#fbf1f0;transform:translateY(-1px)}
.btn[disabled],.sc-btn[disabled],.enrollbtn[disabled]{opacity:.5;cursor:default;transform:none}
.iconbtn{width:44px;height:44px}
.lang button{min-height:36px}

/* ---------- Cards ---------- */
.card,.xcard,.scard,.faq-item,.pcard,.tcard{background:#fff;border:1px solid var(--sc-line);border-radius:var(--sc-r)}
.xcard{border-top:3px solid var(--sc-red)}

/* ---------- Background pattern: low contrast, decorative only ---------- */
.binary,.binary2,.bin,.bin2{opacity:.04!important;font-size:12px;line-height:2;color:var(--sc-ink)!important}
header .binary{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 35%,transparent 25%,#000 100%);mask-image:radial-gradient(ellipse 70% 80% at 50% 35%,transparent 25%,#000 100%)}

/* ---------- Focus & accessibility ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--sc-red);outline-offset:3px;border-radius:6px}
a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(179,38,30,.12)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Course cards (data-driven) ---------- */
.sc-course{display:flex;flex-direction:column;gap:6px;padding:26px 24px}
.sc-course .sc-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--fen);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sc-red);font-weight:600}
.sc-course h3{margin:2px 0 0}
.sc-course .sc-en{font-family:var(--fen);font-size:12.5px;color:#8a8a8a;letter-spacing:.1em;margin-bottom:8px}
.sc-course .sc-row{display:flex;gap:12px;font-size:15px;padding:8px 0;border-top:1px dashed var(--sc-line)}
.sc-course .sc-row .k{flex:0 0 4.5em;color:#8a8a8a;font-size:13.5px;letter-spacing:.06em;padding-top:2px}
.sc-course .sc-price{margin:14px 0 6px;font-family:var(--fserif);font-size:28px;font-weight:700;line-height:1.1;color:var(--sc-ink)}
.sc-course .sc-price .cur{font-family:var(--fen);font-size:14px;font-weight:500;margin-right:4px;color:var(--sc-ink-soft)}
.sc-course .sc-price-alt{font-size:13.5px;color:#8a8a8a;margin-bottom:12px}
.sc-course .sc-price-alt span{white-space:nowrap}
.sc-course .sc-btn{margin-top:auto;width:100%}
.sc-course .sc-note{font-size:13px;color:#8a8a8a;margin-top:8px;text-align:center}
.sc-status{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:#f3f3f3;color:var(--sc-ink-soft)}
.sc-status.open{background:#e9f5ee;color:#1f6b45}
.sc-status.full,.sc-status.closed{background:#f3f3f3;color:#777}
.sc-status.waitlist,.sc-status.tbc{background:#fbf1f0;color:var(--sc-red)}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:24px}
.sc-empty{text-align:center;color:#8a8a8a;padding:30px;border:1px dashed var(--sc-line);border-radius:var(--sc-r)}
.schip small{font-size:12px}

/* ---------- Mobile sticky CTA ---------- */
.sc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--sc-line)}
.sc-sticky .sc-btn{width:100%}
@media(max-width:760px){
  .sc-sticky{display:block}
  body.has-sticky{padding-bottom:78px}
}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Mobile hero: primary CTA above the fold ---------- */
@media(max-width:600px){
  header{padding:40px 0 44px}
  header .emblem{width:104px;height:104px;margin-bottom:18px}
  header .eyebrow{margin-bottom:10px}
  header h1{margin-bottom:12px}
  header .lede,header .hero-lede{font-size:15px;line-height:1.7}
  header .cta-row{gap:10px}
  header .cta-row .btn-primary{width:100%}
  header .cta-row .btn-ghost{min-height:40px;font-size:14px;padding:0 14px;border-width:1px;flex:1}
}