/* ============================================================================
 * myTalk — shared styles for the public landing page and the slug schedule
 * pages. See CLAUDE.md. No build step: plain CSS.
 * ==========================================================================*/

:root {
  --orange:#f5a623;--navy:#1e3a6e;--navy-dark:#172d54;--navy-darker:#0f2040;--green:#6ab04c;
  --page-bg:#f5f6fa;--white:#ffffff;--border:#dde3ee;--border-light:#eaeff7;
  --text-dark:#1e3a6e;--text-mid:#4a5a7a;--text-muted:#8a96aa;
  --l1:#2a7d5f;--l1-bg:#edf7f3;--l1-border:#a8d9c5;
  --l2:#1e5ea8;--l2-bg:#eef2fb;--l2-border:#aac1e8;
  --l3:#8b2252;--l3-bg:#fbeef4;--l3-border:#dbaac4;
  --radius:8px;--shadow:0 2px 10px rgba(30,58,110,0.09);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito Sans','Noto Sans TC','Noto Sans SC','Noto Sans JP',sans-serif;background:var(--page-bg);color:var(--text-dark);line-height:1.6}

/* ---- Controls bar ---- */
.controls-bar{background:var(--navy-dark);padding:0}
.controls-inner{max-width:960px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:stretch;flex-wrap:wrap}
.brand{display:flex;align-items:center;padding:.55rem 1.2rem .55rem 0;border-right:1px solid rgba(255,255,255,.1);margin-right:1.2rem}
/* The myTalk mark is navy+orange on transparency, so it needs a light chip to
   stay legible on the dark navy bar. */
.brand-chip{background:#fff;border-radius:6px;padding:5px 10px;display:flex;align-items:center}
.brand-chip img{display:block;height:22px;width:auto}
.ctrl-group{display:flex;align-items:center;gap:8px;padding:.6rem 1.2rem .6rem 0;border-right:1px solid rgba(255,255,255,.1);margin-right:1.2rem}
.ctrl-group:last-child{border-right:none;margin-right:0}
.ctrl-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.ctrl-select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:5px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;outline:none;padding:4px 10px;appearance:none;font-family:inherit}
.ctrl-select option{background:var(--navy-dark);color:#fff}
#tz-select{min-width:210px}
.lang-flags{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.lang-btn{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);border-radius:5px;color:rgba(255,255,255,.7);font-size:12px;font-weight:700;cursor:pointer;padding:3px 9px;transition:all .14s;letter-spacing:.02em;font-family:inherit;white-space:nowrap}
.lang-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.lang-btn.active{background:var(--orange);border-color:var(--orange);color:#fff}
.tz-note{font-size:11px;color:rgba(255,255,255,.35);margin-left:auto;font-style:italic;align-self:center;padding:.6rem 0}

/* ---- Page ---- */
.page-body{max-width:960px;margin:0 auto;padding:1.5rem 1.5rem 3rem}
.month-block{background:var(--navy);color:#fff;display:inline-block;padding:.5rem 1.4rem;font-family:'Nunito',sans-serif;font-size:20px;font-weight:700;margin-bottom:.9rem;border-radius:4px}
.notice{display:flex;align-items:flex-start;gap:6px;background:#fff8ec;border:1px solid #f5c96e;border-radius:6px;padding:6px 12px;font-size:12.5px;font-weight:600;color:#a06a0a;margin-bottom:1.25rem}
.notice::before{content:"⚠";flex-shrink:0}
.week-nav{display:flex;gap:6px;margin-bottom:1.1rem;flex-wrap:wrap}
.week-tab{padding:.4rem 1rem;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--text-mid);transition:all .14s;white-space:nowrap;font-family:inherit}
.week-tab:hover{border-color:var(--navy);color:var(--navy)}
.week-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(30,58,110,.22)}
.week-tab.locked{opacity:.6}
.week-tab .lock{font-size:11px;margin-left:5px;opacity:.75}
.tab-dates{font-size:11px;opacity:.6;font-weight:400;margin-left:4px}

.topic-banner{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:var(--radius);padding:1rem 1.4rem;margin-bottom:1.1rem;box-shadow:var(--shadow)}
.topic-week-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1px}
.topic-dates-label{font-size:16px;font-weight:600;color:var(--navy);font-family:'Nunito',sans-serif;margin-bottom:6px}
.topic-label-small{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1px}
.topic-title{font-size:17px;font-weight:700;color:var(--navy);font-family:'Nunito',sans-serif}
.topic-desc{font-size:13px;color:var(--text-mid);margin-top:3px;line-height:1.55}

.levels-grid{display:grid;gap:1rem}
.level-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow)}
.level-header{display:flex;align-items:center;gap:10px;padding:.7rem 1.2rem;border-bottom:1px solid var(--border-light)}
.level-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.level-1 .level-dot{background:var(--l1)}.level-2 .level-dot{background:var(--l2)}.level-3 .level-dot{background:var(--l3)}
.level-1 .level-header{background:var(--l1-bg);border-bottom-color:var(--l1-border)}
.level-2 .level-header{background:var(--l2-bg);border-bottom-color:var(--l2-border)}
.level-3 .level-header{background:var(--l3-bg);border-bottom-color:var(--l3-border)}
.level-name{font-size:13.5px;font-weight:700;font-family:'Nunito',sans-serif}
.level-1 .level-name{color:var(--l1)}.level-2 .level-name{color:var(--l2)}.level-3 .level-name{color:var(--l3)}
.level-cefr{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;margin-left:6px}
.level-1 .level-cefr{background:var(--l1-border);color:var(--l1)}.level-2 .level-cefr{background:var(--l2-border);color:var(--l2)}.level-3 .level-cefr{background:var(--l3-border);color:var(--l3)}

.classes-table{width:100%;border-collapse:collapse}
.classes-table th{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:.42rem 1.2rem;text-align:left;background:rgba(0,0,0,.018);border-bottom:1px solid var(--border-light)}
.classes-table td{padding:.65rem 1.2rem;font-size:13.5px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.classes-table tr:last-child td{border-bottom:none}
.classes-table tr:hover td{background:rgba(30,58,110,.022)}
.time-cell{font-size:14px;color:var(--text-dark);font-weight:700;white-space:nowrap}
.time-ref{font-size:11px;color:var(--text-muted);display:block;font-weight:400;margin-top:1px}
.session-label{font-size:13px;color:var(--text-mid)}
.session-note{display:block;font-size:11px;font-weight:600;color:#a06a0a;margin-top:2px}
.link-cell{text-align:right}

.join-btn{display:inline-flex;align-items:center;gap:6px;padding:.36rem 1rem;border-radius:6px;font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .14s;border:1.5px solid;white-space:nowrap}
.level-1 .join-btn{color:var(--l1);border-color:var(--l1-border);background:var(--l1-bg)}.level-1 .join-btn:hover{background:var(--l1);color:#fff}
.level-2 .join-btn{color:var(--l2);border-color:var(--l2-border);background:var(--l2-bg)}.level-2 .join-btn:hover{background:var(--l2);color:#fff}
.level-3 .join-btn{color:var(--l3);border-color:var(--l3-border);background:var(--l3-bg)}.level-3 .join-btn:hover{background:var(--l3);color:#fff}
.join-btn.disabled{color:var(--text-muted);border-color:var(--border);background:var(--page-bg);cursor:not-allowed;pointer-events:none;font-weight:600;font-size:11.5px;font-family:'Nunito Sans',sans-serif}
.join-btn.disabled svg{display:none}

.legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;padding:.85rem 1.2rem;background:var(--white);border-radius:var(--radius);border:1px solid var(--border)}
.legend-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-mid);font-weight:600}
.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.footer-note{margin-top:1.1rem;font-size:12px;color:var(--text-muted);text-align:center;line-height:1.9}

/* ---- Gate states (slug page outside its activation window) ---- */
.gate{max-width:620px;margin:3.5rem auto;background:var(--white);border:1px solid var(--border);border-top:4px solid var(--orange);border-radius:var(--radius);box-shadow:var(--shadow);padding:2.2rem 2rem;text-align:center}
.gate-icon{font-size:34px;line-height:1;margin-bottom:.6rem}
.gate-icon svg{width:58px;height:58px;display:block;margin:0 auto}
.gate-title{font-family:'Nunito',sans-serif;font-size:19px;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.gate-msg{font-size:14px;color:var(--text-mid);line-height:1.65}
.gate-link{display:inline-block;margin-top:1.2rem;font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:1px}
.gate-link:hover{color:var(--orange)}

/* ---- Landing page ---- */
.landing-hero{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
/* The myTalk PNG ships on a white plate; multiply drops it into the page
   background instead of showing a white box. */
.landing-hero .hero-mytalk{height:52px;width:auto;mix-blend-mode:multiply}
.landing-hero .hero-ardor{height:56px;width:auto}
.dynamizer{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.15rem 1.5rem;margin-bottom:2rem}
.dynamizer-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.dynamizer-msg{font-family:'Nunito',sans-serif;font-size:17px;font-weight:700;color:var(--navy);line-height:1.45}
.dynamizer-sub{font-size:13px;color:var(--text-mid);margin-top:5px}
.dynamizer-sub a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--orange)}
.dynamizer-sub a:hover{color:var(--orange)}
.section-title{font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:2px solid var(--border-light)}
.archive-empty{background:var(--white);border:1px dashed var(--border);border-radius:var(--radius);padding:1.6rem;text-align:center;font-size:13px;color:var(--text-muted)}
.archive-month{margin-bottom:1.6rem}
.archive-month-label{display:inline-block;background:var(--border-light);color:var(--navy);font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;padding:.3rem 1rem;border-radius:4px;margin-bottom:.7rem}
.archive-week{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:6px;padding:.7rem 1.1rem;margin-bottom:.55rem}
.archive-week-dates{font-size:12px;font-weight:700;color:var(--text-muted)}
.archive-week-topic{font-size:14.5px;font-weight:700;color:var(--navy);font-family:'Nunito',sans-serif;margin-top:1px}
.archive-week-desc{font-size:12.5px;color:var(--text-mid);margin-top:2px;line-height:1.5}
.site-footer{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.site-footer img{height:38px;width:auto;opacity:.9}
.site-footer span{font-size:12px;color:var(--text-muted)}

body.lang-zh-Hant{font-family:'Noto Sans TC','Nunito Sans',sans-serif}
body.lang-zh-Hans{font-family:'Noto Sans SC','Nunito Sans',sans-serif}
body.lang-ja{font-family:'Noto Sans JP','Nunito Sans',sans-serif}

@media(max-width:640px){
  .controls-inner{flex-direction:column}
  .brand,.ctrl-group{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);margin-right:0;padding:.55rem 0}
  .ctrl-group:last-child{border-bottom:none}
  #tz-select{min-width:unset;width:100%}
  .tz-note{display:none}
  .landing-hero{justify-content:center;text-align:center}
  .classes-table td,.classes-table th{padding-left:.85rem;padding-right:.85rem}
}