/*
  File: /home/teachla2/public_html/skills/typing/typing-hub.css
  Purpose: Look of the Typing hub page (skills/typing/index.php): Paragraph Quest card, activity cards, Typing Space panel.
  Last updated: November 8, 2026 5:35 PM (moved here from the inline style block in index.php, no visual change)
*/

#th .th-hero{background:#5b34b8;border:3px solid #5b34b8;border-radius:28px;padding:36px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin:24px 0 8px;box-shadow:0 6px 0 rgba(0,0,0,.14);position:relative;overflow:hidden}
#th .th-hero-text{flex:1 1 340px;max-width:760px;position:relative;z-index:1}
#th .th-hero h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:2.6rem;margin:0 0 10px;color:#ffffff}
#th .th-hero p{margin:0 0 18px;font-size:1.25rem;line-height:1.4;color:#f3edff}
#th .th-star{width:22px;height:22px;vertical-align:-4px;margin-left:2px;filter:drop-shadow(0 0 5px rgba(255,214,90,.9));display:inline-block}
@keyframes th-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px) scale(1.15)}}
#th .th-hero:hover .th-star{animation:th-bounce .6s ease-in-out}
#th .th-hero:hover .th-star:nth-of-type(2){animation-delay:.1s}
#th .th-hero:hover .th-star:nth-of-type(3){animation-delay:.2s}
#th .th-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
#th .th-bs{position:absolute;fill:#ffffff;opacity:.45}
#th .th-bs.tw{animation:th-twinkle 10s ease-in-out infinite}
#th .th-bs.g{fill:#ffe9a8}
@keyframes th-twinkle{0%{opacity:.45}6%{opacity:1}12%{opacity:.2}18%{opacity:.95}26%,100%{opacity:.45}}
#th .th-btns{display:flex;flex-wrap:wrap;gap:14px}
#th .th-btn{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.5rem;text-decoration:none;padding:12px 32px;border-radius:999px;background:#ffffff;color:#5b34b8;border:2px solid #ffffff}
#th .th-btn:hover{filter:brightness(1.08)}
#th .th-more{font-family:'Fredoka',sans-serif;font-weight:600;font-size:2rem;color:#2a2440;margin:36px 0 16px}
#th{max-width:1120px}
#th .th-hero-text{max-width:760px}
#th .th-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#th .th-card{border:2px solid;border-radius:18px;overflow:hidden}
#th .th-blank{border:2px dashed #d9d3ea;border-radius:18px;min-height:120px}

/* Typing Space section: bold orange panel, a picture of the real tool, and a coming soon premium strip */
#th .th-space{background:#fff6ec;border:3px solid #f7c394;border-radius:28px;margin:40px 0 0;overflow:hidden;color:#2a2440}
#th .th-space-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:34px 40px}
#th .th-space-text{flex:1 1 320px;max-width:560px}
#th .th-free{display:inline-block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;color:#fff;background:#0f7a37;border-radius:999px;padding:4px 18px;margin:0 0 12px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
#th .th-space h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:2.6rem;margin:0 0 10px;color:#2a2440}
#th .th-space p{margin:0 0 20px;font-size:1.25rem;line-height:1.4;color:#2a2440}
#th .th-space-btn{display:inline-flex;align-items:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.5rem;text-decoration:none;padding:12px 32px;border-radius:999px;background:#c2570c;color:#fff;border:2px solid #c2570c}
#th .th-space-btn:hover{filter:brightness(1.1)}
#th .th-space-btn .th-coin{margin-left:10px;vertical-align:baseline}
/* Little picture of the tool */
#th .th-preview{flex:0 1 330px;background:#fff;border:2px solid #ecd9c6;border-radius:16px;transform:rotate(2deg);overflow:hidden;font-family:'Nunito',sans-serif}
#th .th-pv-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:2px solid #eee;font-size:.85rem;font-weight:700;color:#2a2440}
#th .th-pv-box{border:2px solid #e2e2e2;border-radius:10px;padding:3px 10px;background:#fff}
#th .th-pv-box.b{font-weight:900}
#th .th-pv-box.i{font-style:italic;font-family:Georgia,serif}
#th .th-pv-page{padding:18px 16px 26px;font-size:1.35rem;line-height:1.35;color:#2a2440;min-height:96px}
#th .th-pv-cursor{display:inline-block;width:2px;height:1.1em;background:#2a2440;vertical-align:-3px;margin-left:2px;animation:th-blink 1s steps(1) infinite}
@keyframes th-blink{50%{opacity:0}}
/* Premium strip */
#th .th-premium{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 40px;background:#f1eee9;border-top:2px solid #f7c394;color:#2a2440}
#th .th-premium svg{flex:0 0 auto;width:22px;height:22px;fill:#3a3450}
#th .th-premium p{flex:1 1 320px;margin:0;font-size:1.05rem;line-height:1.4;color:#3a3450}
#th .th-soon{flex:0 0 auto;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;color:#3a3450;background:#fff;border:2px solid #d9d3ca;border-radius:999px;padding:3px 16px}
#th .th-card h3{margin:0;padding:14px 22px 6px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.5rem}
#th .th-note{margin:0;padding:0 22px 12px;font-size:1.1rem;line-height:1.4;color:#3a3450}

/* Activity lists: numbered, one column, links only */
#th .th-list{margin:0;padding:4px 22px 18px;font-size:1.15rem;font-weight:700;line-height:1.4;list-style-position:inside}
#th .th-list li{margin:0 0 8px;break-inside:avoid}
#th .th-list li::marker{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--c)}
#th .th-list a{color:var(--c);text-decoration:none}
/* A quiz indented under its lesson: arrow, no number */
#th .th-sub{list-style:none;margin:6px 0 0;padding:0 0 0 28px;font-size:1.05rem;font-weight:700}
#th .th-sub li{margin:0 0 6px}
#th .th-sub li::before{content:"\21B3";color:var(--c);margin-right:8px}
#th .th-list a:hover,#th .th-list a:focus{text-decoration:underline}
/* One column inside each card, since the cards sit two across */
#th .th-list{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}

/* Single link (Typing Space) */
#th .th-single{margin:0;padding:2px 22px 18px;font-size:1.15rem;font-weight:700}
#th .th-single a{color:var(--c);text-decoration:none}
#th .th-single a:hover,#th .th-single a:focus{text-decoration:underline}

/* Coin badge: shown after activities that pay coins (logged in students only) */
#th .th-coin{display:inline-block;margin-left:8px;vertical-align:-4px}
#th .th-coin svg{display:block}
#th .th-btn[data-key]{display:inline-flex;align-items:center}
#th .th-btn .th-coin{margin-left:10px;vertical-align:baseline}
#th .th-legend{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0 0 4px;font-size:1.15rem;font-weight:700;color:#3a3450}
#th .th-legend[hidden]{display:none}
#th .th-legend svg{display:block}

#th .th-a{background:#f3edff;border-color:#9d7ce8;--c:#5b34b8;--t:#e0d4fa}
#th .th-b{background:#e8f9ee;border-color:#22c55e;--c:#0f7a37;--t:#c6eed6}
#th .th-c{background:#e3f7fb;border-color:#06b6d4;--c:#0a6f82;--t:#c2e9f1}
#th .th-d{background:#fdeceb;border-color:#e8433a;--c:#a82119;--t:#f9d0cd}
#th .th-e{background:#fff4e0;border-color:#f4a52c;--c:#8a5200;--t:#fbdfaa}
/* Category title bar */
#th .th-card h3{margin:0 0 12px;padding:10px 22px;background:var(--t);color:var(--c)}

@media (max-width:1000px){
  #th .th-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #th .th-cards .th-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:700px){
  #th .th-space-top{padding:24px 20px}
  #th .th-space h2{font-size:2rem}
  #th .th-premium{padding:16px 20px}
  #th .th-cards{grid-template-columns:minmax(0,1fr)}
  #th .th-blank{display:none}
  #th .th-hero{padding:24px 20px}
  #th .th-hero h2{font-size:2rem}
}