/*
 * tefl-bilingual.css — Shared stylesheet for bilingual Thai/English TEFL tutorial pages
 *
 * Usage: <link rel="stylesheet" href="../css/tefl-bilingual.css"> (from HTML/it/*, HTML/tefl/*, etc.)
 *        <link rel="stylesheet" href="css/tefl-bilingual.css"> (from HTML/ root)
 *
 * Each page must define CSS custom properties (--primary, --header-gradient, etc.) in a <style> block
 * before this stylesheet, or override the defaults below.
 *
 * Vocabulary pattern: <en data-th="Thai translation">English term</en>
 *   - Hover: shows Thai translation tooltip (via title attr set by JS init)
 *   - Click: speaks English pronunciation via Web Speech API
 */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&family=Nunito:wght@400;600;700;800&family=Fira+Code:wght@400;500&display=swap');

/* === DEFAULT THEME (pages override via :root in their own <style>) === */
:root {
  --primary: #0d9488;
  --primary-dark: #134e4a;
  --primary-light: #5eead4;
  --primary-pale: #f0fdfa;
  --accent: #06b6d4;
  --header-gradient: linear-gradient(135deg, #0d9488 0%, #134e4a 100%);
  --body-gradient: linear-gradient(135deg, #5eead4 0%, #0d9488 100%);
  --footer-bg: #134e4a;
}

/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Sarabun','Nunito',sans-serif;line-height:1.7;background:var(--body-gradient);min-height:100vh;padding:10px;}

/* === LAYOUT === */
.container{max-width:1100px;margin:0 auto 30px;background:#fff;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,0.28);overflow:hidden;}
header{background:var(--header-gradient);color:#fff;padding:40px 30px;text-align:center;position:relative;overflow:hidden;}
header::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 60%);pointer-events:none;}
header h1{font-size:2.2em;font-weight:800;text-shadow:2px 3px 6px rgba(0,0,0,0.25);margin-bottom:8px;}
header p{font-size:1.1em;opacity:0.92;}
.content{padding:30px;}
.section{margin-bottom:40px;}
.section h2{font-size:1.6em;font-weight:800;color:#444;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid var(--primary);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* === BILINGUAL BOXES (Thai left / English right) === */
.bilingual-box{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;}
.lang-thai{background:#fff3e0;border-left:5px solid #FF9800;border-radius:12px;padding:20px;}
.lang-thai h3{color:#e65100;margin-bottom:10px;font-size:1em;}
.lang-english{background:#e3f2fd;border-left:5px solid #2196F3;border-radius:12px;padding:20px;}
.lang-english h3{color:#1565c0;margin-bottom:10px;font-size:1em;}

/* === VOCABULARY: <en data-th="Thai">English</en> === */
en{color:#00897B;text-decoration:underline dotted;cursor:pointer;font-weight:600;font-style:normal;}
en:hover{color:#004D40;}

/* === AUDIO BUTTONS === */
.play-btn{background:linear-gradient(135deg,#4CAF50,#45a049);color:#fff;border:none;padding:7px 16px;border-radius:20px;cursor:pointer;font-size:0.85em;font-weight:600;transition:all 0.3s;margin-top:10px;display:inline-flex;align-items:center;gap:6px;}
.play-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(76,175,80,0.4);}

/* === VOCAB GRID / CARDS === */
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:20px 0;}
.vocab-card{background:#fff;border:2px solid #e0e0e0;border-radius:16px;padding:20px;transition:all 0.3s;box-shadow:0 3px 10px rgba(0,0,0,0.07);}
.vocab-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12);border-color:var(--primary);}
.vocab-term{font-size:1.2em;font-weight:800;color:#333;margin-bottom:6px;}
.vocab-thai{color:#e65100;font-size:1em;font-weight:600;margin-bottom:8px;}
.vocab-definition{font-size:0.9em;color:#555;line-height:1.5;margin-bottom:10px;}

/* === TUTORIAL STEPS === */
.tutorial-step{background:#f8f9fa;border-radius:14px;padding:22px;margin:16px 0;border-left:5px solid var(--accent);}
.tutorial-step h4{color:#333;margin-bottom:14px;font-size:1.1em;font-weight:700;display:flex;align-items:center;gap:10px;}
.step-number{background:var(--header-gradient);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.95em;flex-shrink:0;}

/* === CALLOUT BOXES === */
.tip-box{background:#e8f5e9;border-left:5px solid #4CAF50;border-radius:12px;padding:18px;margin:16px 0;}
.tip-box h4{color:#2e7d32;margin-bottom:8px;font-weight:700;}
.fun-fact{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border-radius:14px;padding:22px;margin:20px 0;}
.fun-fact h4{color:#6c4f00;margin-bottom:10px;font-weight:800;}
.warning-box{background:#fff3cd;border-left:5px solid #ffc107;border-radius:12px;padding:18px;margin:16px 0;}
.warning-box h4{color:#856404;margin-bottom:8px;font-weight:700;}
.encourage{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;border-radius:16px;padding:24px;margin:24px 0;text-align:center;}
.encourage h3{font-size:1.4em;margin-bottom:8px;}

/* === CODE BLOCKS === */
.code-block{background:#1e2030;color:#cdd6f4;padding:22px;border-radius:14px;font-family:'Fira Code',monospace;font-size:0.88em;overflow-x:auto;margin:16px 0;line-height:1.7;white-space:pre;}
.code-block .comment{color:#7f848e;}
.code-block .keyword{color:#60a5fa;}
.code-block .string{color:#a6e3a1;}
.code-block .tag{color:#f97316;}

/* === FEATURE LISTS === */
.feature-list{list-style:none;padding:0;}
.feature-list li{padding:8px 0 8px 28px;position:relative;color:#444;}
.feature-list li::before{content:'✅';position:absolute;left:0;}

/* === REFERENCE TABLES === */
.ref-table{width:100%;border-collapse:collapse;margin:16px 0;}
.ref-table th{background:var(--header-gradient);color:#fff;padding:12px;text-align:left;font-size:0.95em;}
.ref-table td{padding:11px 12px;border-bottom:1px solid #e0e0e0;font-size:0.9em;vertical-align:top;}
.ref-table tr:nth-child(even){background:#f8f9fa;}
.ref-table tr:hover{background:#e0f2f1;}

/* === NAVIGATION FOOTER === */
.nav-footer{display:flex;gap:14px;justify-content:center;padding:24px;flex-wrap:wrap;}
.nav-btn{background:var(--header-gradient);color:#fff;padding:14px 28px;border:none;border-radius:30px;font-size:1em;cursor:pointer;text-decoration:none;font-weight:700;transition:all 0.3s;display:inline-block;}
.nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);}
footer{background:var(--footer-bg);color:rgba(255,255,255,0.8);text-align:center;padding:24px;font-size:0.9em;}
footer a{color:var(--primary-light);text-decoration:none;}

/* === LANGUAGE TOGGLE CONTROLS === */
.lang-controls{display:flex;gap:12px;justify-content:center;margin:20px 0;flex-wrap:wrap;position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.95);padding:12px;border-radius:12px;backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,0.08);}
.lang-toggle{padding:10px 24px;border-radius:24px;border:2px solid;font-weight:700;font-size:0.95em;cursor:pointer;transition:all 0.3s;font-family:inherit;}
.lang-toggle.th-toggle{border-color:#FF9800;color:#e65100;background:#fff3e0;}
.lang-toggle.th-toggle:hover,.lang-toggle.th-toggle.active{background:#FF9800;color:#fff;}
.lang-toggle.en-toggle{border-color:#2196F3;color:#1565c0;background:#e3f2fd;}
.lang-toggle.en-toggle:hover,.lang-toggle.en-toggle.active{background:#2196F3;color:#fff;}
body.hide-thai .lang-thai,body.hide-thai .thai-text{display:none !important;}
body.hide-english .lang-english,body.hide-english .english-text{display:none !important;}
body.hide-thai .bilingual-box,body.hide-english .bilingual-box{grid-template-columns:1fr;}

/* === PHRASE TIP BOXES === */
.phrase-box{background:linear-gradient(135deg,#e0f2f1,#b2dfdb);border-left:5px solid #00897B;border-radius:12px;padding:18px;margin:16px 0;}
.phrase-box h4{color:#004D40;margin-bottom:12px;font-weight:700;}
.phrase-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.06);flex-wrap:wrap;gap:8px;}
.phrase-item:last-child{border-bottom:none;}
.phrase-en{color:#1565c0;font-weight:600;}
.phrase-th{color:#e65100;}
.phrase-audio{background:none;border:none;cursor:pointer;font-size:1.2em;padding:2px 6px;transition:transform 0.2s;}
.phrase-audio:hover{transform:scale(1.2);}

/* === GLOSSARY === */
.glossary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:20px 0;}
.glossary-item{background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e0e0e0;transition:all 0.3s;}
.glossary-item:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.glossary-term{font-weight:800;color:var(--primary-dark);font-size:1.05em;cursor:pointer;}
.glossary-thai{color:#e65100;font-weight:600;font-size:0.95em;margin:4px 0;}
.glossary-def{font-size:0.88em;color:#555;line-height:1.5;}

/* === ARCHITECTURE DIAGRAMS === */
.arch-container{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0;}
.arch-box{border-radius:16px;padding:24px;}
.arch-box h3{text-align:center;margin-bottom:16px;font-size:1.15em;}
.arch-box.simple{background:#dcfce7;border:2px solid #22c55e;}
.arch-box.full{background:#eff6ff;border:2px solid #2563eb;}
.arch-flow{display:flex;flex-direction:column;align-items:center;gap:0;}
.arch-node{background:#fff;border:2px solid #94a3b8;border-radius:12px;padding:12px 20px;text-align:center;font-weight:600;font-size:0.92em;width:90%;max-width:280px;transition:all 0.3s;}
.arch-node:hover{transform:scale(1.03);box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.arch-node.user{border-color:#8b5cf6;background:#f5f3ff;}
.arch-node.gh{border-color:#24292e;background:#f6f8fa;}
.arch-node.cf{border-color:#f6821f;background:#fff7ed;}
.arch-node.ssl{border-color:#22c55e;background:#f0fdf4;}
.arch-arrow{font-size:1.5em;color:#94a3b8;line-height:1;margin:4px 0;}

/* === COST COMPARISON === */
.cost-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;}
.cost-card{border-radius:16px;padding:24px;text-align:center;}
.cost-card.paid{background:#fee2e2;border:2px solid #ef4444;}
.cost-card.free{background:#dcfce7;border:2px solid #22c55e;}
.cost-card h3{font-size:1.3em;margin-bottom:12px;}
.cost-card .price{font-size:2.2em;font-weight:800;margin:10px 0;}
.cost-card.paid .price{color:#ef4444;}
.cost-card.free .price{color:#22c55e;}
.cost-card ul{text-align:left;list-style:none;padding:0;}
.cost-card ul li{padding:4px 0 4px 24px;position:relative;}
.cost-card.paid ul li::before{content:'💸';position:absolute;left:0;}
.cost-card.free ul li::before{content:'🎉';position:absolute;left:0;}

/* === LOGO ROW === */
.logo-row{display:flex;justify-content:center;align-items:center;gap:40px;margin:20px 0;flex-wrap:wrap;}
.logo-box{text-align:center;padding:20px 30px;border-radius:16px;}
.logo-box.github{background:#24292e;color:#fff;}
.logo-box.cloudflare{background:#f6821f;color:#fff;}
.logo-box .logo-icon{font-size:3em;margin-bottom:8px;}
.logo-box .logo-name{font-size:1.2em;font-weight:700;}
.plus-sign{font-size:2.5em;font-weight:800;color:var(--primary);}

/* === RESPONSIVE === */
@media(max-width:768px){
  .bilingual-box,.cost-compare,.arch-container{grid-template-columns:1fr;}
  .vocab-grid{grid-template-columns:1fr 1fr;}
  .content{padding:18px;}
  header h1{font-size:1.6em;}
  .logo-row{gap:15px;}
  .glossary-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .vocab-grid{grid-template-columns:1fr;}
}