/*
Theme Name: Typing Practice Studio
Theme URI: https://example.com/
Author: OpenAI
Description: A modern, responsive WordPress theme for typing speed tests, difficult paragraphs, accuracy tracking, and practice resources.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: typing-practice-studio
*/
:root{--ink:#172033;--muted:#697386;--brand:#4f46e5;--brand2:#06b6d4;--paper:#f6f8fc;--line:#e4e8f1;--good:#12805c;--bad:#d9485f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.header-inner{max-width:1180px;margin:auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:850;font-size:1.25rem;letter-spacing:-.04em;color:var(--ink)}.brand-mark{display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;width:34px;height:34px;border-radius:11px;margin-right:8px;font-size:1rem}.main-nav{display:flex;gap:22px;align-items:center;font-weight:650;font-size:.93rem}.main-nav a{color:#475168}.menu-toggle{display:none;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:10px}.container{max-width:1180px;margin:auto;padding:34px 22px}.hero{background:radial-gradient(circle at 85% 15%,#d8f7ff 0,transparent 30%),linear-gradient(135deg,#fff,#eef0ff);border:1px solid #e4e7fb;border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.4fr .8fr;gap:36px;align-items:center}.eyebrow{display:inline-flex;padding:6px 11px;border-radius:99px;background:#e8eaff;color:#4338ca;font-weight:750;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;letter-spacing:-.055em;margin:18px 0}.hero p{font-size:1.1rem;color:var(--muted);max-width:640px}.button,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;border:0;border-radius:12px;padding:13px 20px;font-weight:750;cursor:pointer}.button:hover{background:#3730a3;color:white;text-decoration:none}.hero-card{background:#fff;border:1px solid var(--line);padding:26px;border-radius:22px;box-shadow:0 20px 50px #27326b12}.hero-card .big{font-size:3.2rem;font-weight:850;letter-spacing:-.06em;line-height:1}.hero-card small{color:var(--muted)}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.stat{background:#f8f9ff;border:1px solid var(--line);border-radius:14px;padding:14px}.stat strong{display:block;font-size:1.2rem}.stat span{color:var(--muted);font-size:.8rem}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:42px 0 18px}.section-heading h2{font-size:1.8rem;letter-spacing:-.04em;margin:0}.section-heading p{color:var(--muted);margin:5px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.info-card,.content-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}.info-card .icon{font-size:1.6rem}.info-card h3{margin:12px 0 6px}.info-card p{color:var(--muted);margin:0}.practice-shell{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 15px 40px #1d2a4a0a}.practice-top{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.practice-top h1,.practice-top h2{margin:0;letter-spacing:-.04em}.controls{display:flex;gap:9px;flex-wrap:wrap}.controls select,.controls button,.practice-actions button{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px;font:inherit;font-weight:650;color:var(--ink);cursor:pointer}.controls button.primary,.practice-actions button.primary{background:var(--brand);color:white;border-color:var(--brand)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.metric{background:#fff;padding:18px 22px}.metric span{display:block;color:var(--muted);font-size:.8rem;font-weight:700}.metric strong{display:block;font-size:1.8rem;letter-spacing:-.05em;margin-top:3px}.text-panel{padding:25px 26px 16px}.typing-passage{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(1rem,2vw,1.16rem);line-height:2;letter-spacing:.01em;color:#9299a9;white-space:pre-wrap;overflow-wrap:anywhere;min-height:135px}.typing-passage span.correct{color:var(--good);background:#e5f7ef}.typing-passage span.incorrect{color:#c52642;background:#ffe6eb;text-decoration:underline;text-decoration-thickness:2px}.typing-passage span.current{border-left:2px solid var(--brand);background:#eef0ff}.typing-input{display:block;width:calc(100% - 52px);margin:0 26px 20px;min-height:140px;resize:vertical;padding:16px;border:1.5px solid #dce1ee;border-radius:14px;font:1rem/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;outline:none}.typing-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px #4f46e51a}.practice-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 26px 24px;flex-wrap:wrap}.status{font-size:.9rem;color:var(--muted)}.result-banner{display:none;margin:0 26px 22px;background:#eefbf5;border:1px solid #c6f0dc;border-radius:12px;padding:14px 16px;color:#116749}.result-banner.show{display:block}.tip{background:#fff8e8;border:1px solid #f3e1ad;padding:16px 18px;border-radius:14px;color:#6c5313;margin-top:18px}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.entry-content{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,42px)}.entry-content h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-.05em}.entry-content h2{letter-spacing:-.03em}.entry-content p,.entry-content li{color:#495367}.site-footer{margin-top:50px;background:#11182b;color:#d9dfef}.footer-inner{max-width:1180px;margin:auto;padding:32px 22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer-inner p{margin:0;color:#aab3c8}.footer-inner a{color:#fff}.page-title{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em;margin:0 0 8px}.muted{color:var(--muted)}.page-intro{margin-bottom:25px}.article-list{display:grid;gap:14px}.article-item{background:#fff;padding:22px;border:1px solid var(--line);border-radius:15px}.article-item h2{margin:0 0 5px}.article-item p{margin:0;color:var(--muted)}.pagination{margin-top:24px}.dark-mode{--ink:#eef1ff;--muted:#aab4cc;--paper:#101526;--line:#29324a;background:var(--paper);color:var(--ink)}.dark-mode .site-header,.dark-mode .practice-shell,.dark-mode .metric,.dark-mode .info-card,.dark-mode .content-card,.dark-mode .entry-content,.dark-mode .article-item,.dark-mode .hero-card,.dark-mode .controls select,.dark-mode .controls button,.dark-mode .practice-actions button{background:#171f34;color:var(--ink);border-color:var(--line)}.dark-mode .hero{background:linear-gradient(135deg,#1a2440,#172d3b);border-color:var(--line)}.dark-mode .stat{background:#1b2540;border-color:var(--line)}.dark-mode .main-nav a,.dark-mode .brand{color:var(--ink)}.dark-mode .typing-input{background:#11182b;color:var(--ink);border-color:var(--line)}.dark-mode .typing-passage{color:#8995ad}.dark-mode .practice-top,.dark-mode .metrics{border-color:var(--line)}.dark-mode .practice-actions button.primary,.dark-mode .controls button.primary{background:var(--brand);color:#fff}.dark-mode .menu-toggle{background:#171f34;color:var(--ink);border-color:var(--line)}
@media(max-width:800px){.hero{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.main-nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;padding:18px 22px;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.main-nav.open{display:flex}.menu-toggle{display:inline-flex}.header-inner{padding:12px 16px}.container{padding:24px 16px}.text-panel{padding:20px 18px 12px}.typing-input{width:calc(100% - 36px);margin:0 18px 18px}.practice-actions{padding:0 18px 20px}.result-banner{margin:0 18px 18px}.metric{padding:14px 16px}.metric strong{font-size:1.5rem}.section-heading{align-items:flex-start;flex-direction:column}}
/*
 * Professional header/footer styles for the Typing Practice website.
 * Add to style.css or enqueue this file from your theme.
 */
:root {
  --tp-ink: #172033;
  --tp-muted: #65718a;
  --tp-brand: #315efb;
  --tp-brand-dark: #2148d8;
  --tp-line: #e7ebf3;
  --tp-soft: #f6f8fc;
  --tp-white: #fff;
}
.tp-site { margin: 0; color: var(--tp-ink); background: var(--tp-white); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.tp-header { position: relative; z-index: 50; width: 100%; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--tp-line); box-shadow: 0 3px 18px rgba(23,32,51,.035); }
.tp-header__inner { max-width: 1200px; min-height: 82px; padding: 14px 24px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.tp-brand__link, .tp-footer__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tp-ink); }
.tp-brand__mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #315efb, #6d8cff); color: #fff; font-size: 24px; box-shadow: 0 7px 16px rgba(49,94,251,.22); }
.tp-brand__words { display: flex; flex-direction: column; gap: 3px; }
.tp-brand__name { font-weight: 800; letter-spacing: -.035em; font-size: 20px; line-height: 1.15; }
.tp-brand__tagline { color: var(--tp-muted); font-size: 11px; letter-spacing: .015em; }
.tp-nav { display: flex; align-items: center; gap: 7px; }
.tp-nav__link { padding: 11px 12px; border-radius: 10px; color: #46516a; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease; }
.tp-nav__link:hover, .tp-nav__link:focus-visible { color: var(--tp-brand); background: #f0f4ff; }
.tp-nav__cta { display: inline-flex; align-items: center; gap: 9px; margin-left: 7px; padding: 12px 17px; border-radius: 11px; color: #fff; background: var(--tp-brand); text-decoration: none; font-size: 14px; font-weight: 750; box-shadow: 0 6px 14px rgba(49,94,251,.18); }
.tp-nav__cta:hover, .tp-nav__cta:focus-visible { background: var(--tp-brand-dark); color: #fff; }
.tp-menu-toggle { display: none; border: 1px solid var(--tp-line); border-radius: 10px; background: #fff; color: var(--tp-ink); padding: 9px 11px; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tp-menu-toggle__icon { display: flex; flex-direction: column; gap: 4px; }
.tp-menu-toggle__icon span { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; }
.tp-main { min-height: 48vh; }
.tp-skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; color: #fff; background: var(--tp-ink); }
.tp-skip-link:focus { top: 12px; }
.tp-footer { margin-top: 64px; color: #dbe2f1; background: #121a2b; }
.tp-footer__inner { max-width: 1200px; padding: 52px 24px 0; margin: 0 auto; }
.tp-footer__top { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, 1fr)); gap: 42px; padding-bottom: 42px; }
.tp-footer__brand { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.tp-footer__brand .tp-brand__mark { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; }
.tp-footer__about p { max-width: 310px; margin: 18px 0 0; color: #aeb9ce; font-size: 14px; line-height: 1.8; }
.tp-footer__column h2 { margin: 5px 0 18px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tp-footer__column ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tp-footer__column a { color: #aeb9ce; font-size: 14px; text-decoration: none; transition: color .18s ease; }
.tp-footer__column a:hover, .tp-footer__column a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.tp-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(219,226,241,.13); padding: 20px 0; color: #9aa7bf; font-size: 12px; }
.tp-footer__bottom p { margin: 0; }
@media (max-width: 980px) {
  .tp-header__inner { gap: 14px; }
  .tp-menu-toggle { display: inline-flex; margin-left: auto; }
  .tp-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 12px 20px 20px; flex-direction: column; align-items: stretch; gap: 4px; background: #fff; border-bottom: 1px solid var(--tp-line); box-shadow: 0 14px 22px rgba(23,32,51,.08); }
  .tp-nav.is-open { display: flex; }
  .tp-nav__link { padding: 13px 12px; }
  .tp-nav__cta { justify-content: center; margin: 7px 0 0; }
  .tp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (max-width: 560px) {
  .tp-header__inner { min-height: 72px; padding: 12px 16px; }
  .tp-brand__mark { width: 39px; height: 39px; border-radius: 12px; font-size: 21px; }
  .tp-brand__name { font-size: 17px; }
  .tp-brand__tagline { font-size: 10px; }
  .tp-footer { margin-top: 42px; }
  .tp-footer__inner { padding: 38px 20px 0; }
  .tp-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 30px; }
  .tp-footer__about { grid-column: 1 / -1; }
  .tp-footer__bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-nav__link, .tp-nav__cta, .tp-footer__column a { transition: none; }
}