/*
Theme Name:   Link to NetEra
Theme URI:    https://linktonetera.com
Description:  Theme for Link to NetEra. Renders lessons, tools, labs and news from the Link to NetEra Content plugin, and attaches the site's existing vanilla-JS engines. Content types and fields live in the plugin, not here, so this theme can be redesigned or replaced without touching a single lesson.
Author:       Link to NetEra
Version:      1.0.0
Requires PHP: 7.4
Tested up to: 6.7
License:      GPL-2.0-or-later
Text Domain:  ltn
*/

/*
  This file is intentionally thin.

  The site's real stylesheets: design-tokens.css, base.css, components.css: 
  are copied into assets/css/ unchanged and enqueued ahead of this one in
  functions.php. Everything below is only what WordPress needs that the static
  site did not: admin bar offset, alignment classes, and the couple of classes
  core generates.

  Keeping the token layer untouched is deliberate. It is the source of truth for
  the palette and the contrast ratios documented beside each value, and forking
  it here would create a second source that quietly drifts.
*/

/* WordPress admin bar pushes everything down 32px; sticky offsets must follow */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
.admin-bar .topics-bar { top: calc(68px + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .topics-bar { top: calc(68px + 46px); }
}

/* classes the block editor emits that the static site never needed */
.alignwide { max-width: min(100%, 1180px); margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--sp-3) var(--sp-2) 0; }
.alignright { float: right; margin: 0 0 var(--sp-2) var(--sp-3); }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	text-align: center;
	margin-top: var(--sp-1);
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	left: var(--sp-2);
	top: var(--sp-2);
	z-index: 100;
	background: var(--accent);
	color: var(--on-accent);
	padding: 12px 16px;
	border-radius: var(--r-sm);
	width: auto;
	height: auto;
	clip-path: none;
}

/* the curriculum index, from the v3 prototype */
.index { border-top: 1px solid var(--border); }
.idx { border-bottom: 1px solid var(--border); }
.idx__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4) 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	text-align: left;
	min-height: 44px;
}
.idx__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); flex: 0 0 auto; }
.idx__t { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 600; flex: 1; letter-spacing: -.02em; }
.idx__c { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.idx__x {
	position: relative;
	width: 30px; height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	transition: background-color .25s ease, border-color .25s ease;
}
.idx__x::before, .idx__x::after { content: ""; position: absolute; background: currentColor; transition: transform .3s ease; }
.idx__x::before { width: 11px; height: 1.5px; }
.idx__x::after { width: 1.5px; height: 11px; }
.idx[open] .idx__x { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.idx[open] .idx__x::after { transform: scaleY(0); }
.idx__body { overflow: hidden; height: 0; transition: height .45s ease; }
.idx[open] .idx__body { height: auto; }
.idx__inner { padding-bottom: var(--sp-4); display: grid; gap: 10px; }
@media (min-width: 720px) { .idx__inner { grid-template-columns: repeat(2, 1fr); } }
.idx__inner a { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; color: var(--text-muted); }
.idx__inner a:hover { color: var(--accent); }
.idx__inner b { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--slate-400); }

@media (prefers-reduced-motion: reduce) {
	.idx__body, .idx__x, .idx__x::before, .idx__x::after { transition: none; }
}

/* ============================================================================
   Home page: the v1 prototype layout.

   Written against the existing token layer (--surface, --accent, --sp-*) rather
   than a second palette, so the home page inherits the light/dark theme and the
   section-band depth already tuned in design-tokens.css. v3's Geist/mint scheme
   would have needed both a font import and a parallel set of colours.
   ============================================================================ */

/* Hero: headline → live panel → pitch on a phone. The panel must clear the
   fold; buried below a lead paragraph and two buttons it may as well not exist,
   which is the fault this order corrects. */
.home-hero .hero__inner { gap: var(--sp-4); }
.home-hero .hero__intro { order: 1; }
.home-hero .hero__art   { order: 2; }
.home-hero .hero__pitch { order: 3; }

@media (min-width: 1024px) {
	.home-hero .hero__inner { grid-template-columns: 7fr 5fr; gap: 0 var(--sp-8); }
	.home-hero .hero__intro { grid-column: 1; grid-row: 1; }
	.home-hero .hero__pitch { grid-column: 1; grid-row: 2; }
	.home-hero .hero__art   { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Track tabs */
.home-tabs {
	display: flex;
	gap: var(--sp-1);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-bottom: var(--sp-4);
	padding-bottom: 4px;
}
.home-tabs::-webkit-scrollbar { display: none; }
.home-tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--sp-2);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	color: var(--text-muted);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-sm);
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.home-tab:hover { color: var(--text); border-color: var(--line-strong); }
.home-tab[aria-selected="true"] {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-soft);
}

.home-lessons { display: grid; gap: var(--sp-2); }
@media (min-width: 700px) { .home-lessons { grid-template-columns: repeat(2, 1fr); } }
.home-lesson {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	transition: border-color .15s ease, transform .15s ease;
}
.home-lesson:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.home-lesson__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); flex: 0 0 auto; }
.home-lesson__t { font-family: var(--font-head); font-weight: 600; color: var(--text); }

/* No .reveal rules here on purpose.
   base.css already defines .reveal / .reveal.is-in: with directional variants
   and the shared --t-slow duration, and main.js already toggles .is-in on every
   .reveal element site-wide. Redefining either would create a second source for
   the same behaviour, which is exactly the drift this project keeps eliminating
   elsewhere. The markup just uses .reveal and inherits both. */

@media (prefers-reduced-motion: reduce) {
	.home-lesson:hover { transform: none; }
}