/*
Theme Name: HealthTechTonic
Theme URI: https://healthtechtonic.com/
Author: HealthTechTonic
Description: A graphite instrument panel block theme for practical HTM learning.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: healthtechtonic
*/

:root {
  --htt-graphite: #0f1318;
  --htt-panel: #171c23;
  --htt-elevated: #202731;
  --htt-edge: #5b6777;
  --htt-text: #f1f4f7;
  --htt-subtle: #b4bec9;
  --htt-green: #3de88f;
  --htt-cyan: #43d9ee;
  --htt-yellow: #f7d84a;
  --htt-paper: #f3f5f8;
  --htt-ink: #12171d;
  --htt-light-subtle: #4a5563;
  --htt-deep-green: #0b7a43;
  --htt-deep-cyan: #00687f;
  --htt-deep-yellow: #7a5c00;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a, button, input, label { -webkit-tap-highlight-color: transparent; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
.htt-option:focus-within {
  outline: 3px solid var(--htt-yellow);
  outline-offset: 4px;
}
.wp-site-blocks { overflow: clip; }
.htt-shell { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.htt-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--htt-edge);
  background: rgba(15, 19, 24, 0.97);
}
.admin-bar .htt-site-header { top: 32px; }
.htt-header-row { min-height: 76px; }
.htt-brand { font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; font-weight: 700; }
.htt-brand a { color: var(--htt-text); text-decoration: none; }
.htt-brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.htt-brand-mark { width: 46px; height: 46px; flex: 0 0 auto; }
.htt-site-header .wp-block-navigation-item__content { color: var(--htt-text); min-height: 44px; display: flex; align-items: center; }
.htt-site-header .wp-block-navigation__responsive-container-open,
.htt-site-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; color: var(--htt-text) !important; }
.htt-site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--htt-graphite) !important; color: var(--htt-text) !important; padding: 1.5rem; }
.htt-site-header .wp-block-navigation__responsive-container.is-menu-open :focus-visible { outline-color: var(--htt-yellow) !important; }
.htt-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--htt-text) !important; }
.htt-site-header .wp-block-navigation__responsive-container.is-menu-open .htt-sign-in a { border-color: var(--htt-cyan) !important; padding: 0.65rem 1rem !important; }
.htt-sign-in a { border: 2px solid var(--htt-cyan); padding: 0.45rem 0.9rem; }

.htt-hero {
  min-height: 650px;
  display: grid;
  align-items: center;
  background-image: linear-gradient(rgba(91, 103, 119, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 103, 119, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.htt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.htt-eyebrow { color: var(--htt-green); font-weight: 800; letter-spacing: 0.05em; }
.htt-hero h1 { font-size: clamp(3rem, 7vw, 6.8rem); letter-spacing: -0.045em; margin: 0.12em 0 0.25em; text-wrap: balance; }
.htt-hero h1 strong { display: block; color: var(--htt-cyan); font-weight: 400; }
.htt-lead { max-width: 620px; color: var(--htt-subtle); font-size: clamp(1rem, 2vw, 1.25rem); }
.htt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.htt-button .wp-block-button__link { min-height: 50px; display: inline-flex; align-items: center; padding: 0.65rem 1.25rem; }
.htt-button-primary .wp-block-button__link { color: var(--htt-graphite); background: var(--htt-green); border-color: var(--htt-green); }
.htt-button-secondary .wp-block-button__link { color: var(--htt-text); background: var(--htt-graphite); border: 2px solid var(--htt-cyan); border-color: var(--htt-cyan); }
.htt-scope { border: 1px solid var(--htt-edge); background: var(--htt-panel); padding: 1.25rem; box-shadow: 14px 14px 0 var(--htt-elevated); }
.htt-scope-label { color: var(--htt-subtle); font: 700 0.75rem/1.4 monospace; letter-spacing: 0.08em; }
.htt-screen { min-height: 330px; display: grid; place-items: center; border: 1px solid #35404d; background-color: #101820; background-image: linear-gradient(rgba(67, 217, 238, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 217, 238, 0.08) 1px, transparent 1px); background-size: 25px 25px; overflow: hidden; }
.htt-screen svg { width: 120%; filter: drop-shadow(0 0 7px rgba(61, 232, 143, 0.55)); }
.htt-wave { stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: htt-trace 3.5s ease-out 0.2s 1 forwards; }
@keyframes htt-trace { to { stroke-dashoffset: 0; } }
.htt-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 0.9rem; }
.htt-meter { border: 1px solid var(--htt-edge); padding: 0.7rem; color: var(--htt-subtle); font: 700 0.72rem/1.4 monospace; }
.htt-meter strong { display: block; color: var(--htt-text); font: 700 1.05rem/1.4 var(--wp--preset--font-family--sans); }
.htt-meter:nth-child(1) strong { color: var(--htt-green); }
.htt-meter:nth-child(2) strong { color: var(--htt-cyan); }
.htt-meter:nth-child(3) strong { color: var(--htt-yellow); }

.htt-values { border-block: 1px solid var(--htt-edge); background: var(--htt-panel); }
.htt-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.htt-value { min-height: 150px; padding: 1.7rem; border-inline-start: 1px solid var(--htt-edge); }
.htt-value:last-child { border-inline-end: 1px solid var(--htt-edge); }
.htt-value h2 { color: var(--htt-text); font-size: 1.55rem; margin: 0 0 0.4rem; }
.htt-value p { color: var(--htt-subtle); margin: 0; }

.htt-section { padding-block: clamp(4rem, 8vw, 7rem); }
.htt-content-page { padding-inline: 24px; }
.htt-content-page .htt-catalog-section { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw) !important; }
@media (min-width: 901px) {
  .htt-content-page:has(.htt-catalog-section) > .wp-block-post-title { width: min(1280px, calc(100vw - 48px)); max-width: none; }
}
.htt-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.htt-section-head h2, .htt-copy h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); margin: 0.15em 0; }
.htt-section-head p, .htt-copy p { color: inherit; }
.htt-catalog-section { background: var(--htt-paper); color: var(--htt-ink); }
.htt-catalog-section .htt-eyebrow { color: var(--htt-deep-green); }
.has-paper-background-color a, .htt-catalog-section a { color: var(--htt-deep-cyan); }
.has-paper-background-color a:focus-visible, .htt-catalog-section a:focus-visible { outline-color: var(--htt-deep-cyan); }
.htt-catalog-intro { color: var(--htt-light-subtle); }
.htt-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.htt-course { min-height: 350px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--htt-edge); background: #fff; padding: 1.6rem; }
.htt-course::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--htt-deep-green); }
.htt-course:nth-child(3n + 2)::before { background: var(--htt-deep-cyan); }
.htt-course:nth-child(3n + 3)::before { background: var(--htt-deep-yellow); }
.htt-course-track { color: var(--htt-light-subtle); font: 700 0.75rem/1.4 monospace; letter-spacing: 0.04em; }
.htt-course h3 { color: var(--htt-ink); font-size: 1.55rem; margin: 1.2rem 0 0.75rem; }
.htt-course-summary { color: var(--htt-light-subtle); }
.htt-course-footer { margin-top: auto; border-top: 1px solid var(--htt-edge); padding-top: 1rem; }
.htt-course-meta { color: var(--htt-light-subtle); font-weight: 700; }
.htt-course a { color: var(--htt-deep-green); display: inline-flex; min-height: 44px; align-items: center; font-weight: 800; text-underline-offset: 5px; }
.htt-practice { background: var(--htt-panel); border-block: 1px solid var(--htt-edge); }
.htt-practice-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); }
.htt-question { background: var(--htt-graphite); border: 1px solid var(--htt-edge); box-shadow: 9px 9px 0 var(--htt-elevated); padding: clamp(1.25rem, 3vw, 2rem); }
.htt-question fieldset { border: 0; margin: 0; padding: 0; }
.htt-question legend { font: 400 1.3rem/1.45 var(--wp--preset--font-family--serif); margin-bottom: 1rem; }
.htt-option { min-height: 50px; display: flex; gap: 0.8rem; align-items: center; border: 1px solid var(--htt-edge); padding: 0.75rem; margin: 0.65rem 0; cursor: pointer; }
.htt-option:hover { border-color: var(--htt-green); background: var(--htt-panel); }
.htt-option input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; accent-color: var(--htt-green); }
.htt-quiz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; }
.htt-quiz-actions button { min-height: 46px; padding: 0.55rem 0.9rem; border: 2px solid var(--htt-cyan); background: var(--htt-graphite); color: var(--htt-text); font: 800 0.9rem/1.2 var(--wp--preset--font-family--sans); cursor: pointer; }
.htt-quiz-actions .htt-check { background: var(--htt-green); border-color: var(--htt-green); color: var(--htt-graphite); }
.htt-feedback { border-left: 4px solid var(--htt-yellow); background: var(--htt-elevated); padding: 0.9rem; }
.htt-feedback:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }

.htt-cohort { background: var(--htt-graphite); }
.htt-cohort-grid, .htt-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.htt-cohort-art { min-height: 280px; border: 1px solid var(--htt-edge); background: var(--htt-panel); display: grid; place-items: center; }
.htt-cohort-art svg { width: min(80%, 420px); }
.htt-about { background: var(--htt-elevated); border-block: 1px solid var(--htt-edge); }
.htt-byline { color: var(--htt-green); font-weight: 800; }
.htt-footer { padding-block: 2.5rem; }
.htt-footer a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

@media (max-width: 900px) {
  .htt-hero-grid, .htt-practice-grid, .htt-cohort-grid, .htt-about-grid, .htt-section-head { grid-template-columns: 1fr; }
  .htt-catalog { grid-template-columns: 1fr; }
  .htt-values-grid { grid-template-columns: 1fr; }
  .htt-value, .htt-value:last-child { border-inline: 0; border-bottom: 1px solid var(--htt-edge); }
  .htt-scope { max-width: 660px; }
}
@media (max-width: 640px) {
  .htt-shell { width: calc(100% - 28px); }
  .htt-content-page { padding-inline: 16px; }
  .htt-hero { min-height: auto; padding-block: 3.5rem; }
  .htt-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .htt-hero h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .htt-screen { min-height: 220px; }
  .htt-meters { grid-template-columns: 1fr; }
  .htt-actions { display: grid; }
  .htt-actions .wp-block-button, .htt-actions .wp-block-button__link { width: 100%; }
  .admin-bar .htt-site-header { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .htt-wave { animation: none; stroke-dashoffset: 0; }
}