/* ============================================================
   TYPINGAURA — layout.css
   Page structure: body, header, main, sections, footer.
   No component-level styles here — only structural positioning.
   ============================================================ */

/* ----------------------------------------------------------
   PAGE BASE
---------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  background-color: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ambient background grid lines — purely decorative CSS */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,170,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,170,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
#site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-ui);
  height: var(--header-height);
  background: rgba(7, 7, 15, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
}

.header-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  user-select: none;
}

.logo-mark {
  flex-shrink: 0;
}

.logo-text {
  white-space: nowrap;
}

/* Back-to-tools link — sits to the left of the logo so this tool
   never feels like a dead end on the site */
.back-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--neon-cyan);
}

.back-link svg { flex-shrink: 0; }

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

/* Breadcrumb trail — small, unobtrusive, sits above the main content */
.breadcrumb {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-1);
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin: 0 var(--space-2);
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--neon-cyan);
}

.breadcrumb li[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 500;
}

/* Mode switcher navigation */
.mode-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: var(--space-1);
}

.mode-btn {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.mode-btn:hover {
  color: var(--text-primary);
}

.mode-btn.active {
  background: var(--bg-elevated);
  color: var(--neon-cyan);
  box-shadow: inset 0 0 0 1px var(--border-active);
}

/* Header right: settings + sound toggle */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.icon-btn.active {
  color: var(--neon-cyan);
}

/* ----------------------------------------------------------
   MAIN CONTENT
---------------------------------------------------------- */
#main-content {
  position: relative;
  z-index: var(--z-base);
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

/* ----------------------------------------------------------
   SECTIONS — Test / Results / Lessons
   Only one section is visible at a time (controlled by JS)
---------------------------------------------------------- */
.app-section {
  display: none;
  animation: sectionFadeIn var(--dur-normal) var(--ease-out) forwards;
}

.app-section.active {
  display: block;
}

/* ----------------------------------------------------------
   TEST MODE LAYOUT
---------------------------------------------------------- */
#test-mode {
  display: none;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}

#test-mode.active {
  display: flex;
}

/* Duration selector row */
.duration-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.duration-btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.duration-btn:hover {
  color: var(--text-primary);
}

.duration-btn.active {
  background: var(--bg-elevated);
  color: var(--neon-cyan);
  box-shadow: inset 0 0 0 1px var(--border-active);
}

/* Live stats bar above typing area */
.live-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  max-width: var(--content-width);
}

.live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.live-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}

.live-stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.live-stat--timer .live-stat__value {
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

/* ----------------------------------------------------------
   RESULTS SECTION LAYOUT
---------------------------------------------------------- */
#results-mode {
  display: none;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--content-width);
  margin: 0 auto;
}

#results-mode.active {
  display: flex;
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
#site-footer {
  position: relative;
  z-index: var(--z-base);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.footer-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-link:hover {
  color: var(--neon-cyan);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  max-width: 600px;
}

/* ----------------------------------------------------------
   TOAST NOTIFICATIONS
---------------------------------------------------------- */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  animation: toastIn var(--dur-normal) var(--ease-spring) forwards;
  pointer-events: all;
}

.toast--success {
  border-color: rgba(0,255,136,0.3);
  color: var(--neon-green);
}

.toast--error {
  border-color: rgba(255,34,85,0.3);
  color: var(--neon-red);
}

/* ----------------------------------------------------------
   SEO CONTENT SECTION (below the tool)
---------------------------------------------------------- */
.seo-content {
  max-width: var(--content-width);
  margin: var(--space-16) auto 0;
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.seo-content h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.seo-content h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--neon-cyan);
  margin: var(--space-8) 0 var(--space-3);
}

.seo-content p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-4);
}

.seo-content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-2);
}

.seo-content ul,
.seo-content ol {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.seo-content .curriculum-list {
  margin-bottom: var(--space-5);
}

.seo-content .curriculum-list li {
  break-inside: avoid;
}

.seo-content strong {
  color: var(--text-primary);
}

.faq-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-5) 0;
}

.faq-question {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.faq-answer {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
}