/* TC Logo Connect — landing page.
   Retro-terminal theme. Design tokens lifted verbatim from the companion web
   flasher (webflasher/style.css) so the two pages share one visual language:
   monospace, black background, #ff0000 red accent (matches the logo), white-bordered inverting
   buttons. Dark-only — no theme toggle, no light variants. */

:root {
  --bg: #000;
  --panel: #1a1a1a;
  --text: #e0e0e0;
  --white: #fff;
  --red: #ff0000; /* matches the logo's circles (#f00) */
  --green: #4caf50;
  --amber: #f59e0b;
  --muted: #888;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  /* VT323 is a DOS-style bitmap font (single weight); the monospace stack is
     the fallback if it fails to load. Sizes run larger than a normal font
     because VT323's glyphs are short, and we avoid bold (it would smear). */
  font-family: 'VT323', 'Monaco', 'Menlo', 'Courier New', monospace;
  background: var(--bg);
  color: var(--text);
  font-size: 19px;
  line-height: 1.25;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* Header: transparent floating bar (Interface C style) — the TC Logo mark
   floats over the content at top-left, no background or border. */
.bar {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 1000;
}

.bar-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
}

.logo {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Interface C's logo art carries a hair of transparent margin inside its
   40px box (mark ≈ 39px, flush top, centered) — inset the SVG the same
   way so both sites' brand marks render at the same visible size. */
.logo svg { width: 39px; height: 39px; display: block; }

/* Hero sections: a full-bleed image that scales with the screen width, with
   the text directly underneath. Only hero 1's main title overlays the image. */
.hero {
  max-width: 1170px;
  margin: 0 auto;
  text-align: center;
}

.hero img {
  width: 100%;
  height: auto; /* override the img height="" attribute hint so aspect-ratio drives height */
  aspect-ratio: 5 / 2.7;
  min-height: 400px; /* floor for narrow screens; cover crops to fill it */
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.hero h1 {
  font-size: 76px;
  font-weight: normal;
  line-height: 1.0;
  color: var(--white);
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.hero p {
  font-size: 24px;
  line-height: 1.2;
  color: var(--text);
  max-width: 52ch;
  margin: 0 auto;
  padding-inline: 20px;
}

/* Hero 2 & 3 captions (the <p> directly after the <img>) overlap onto the
   bottom of the image. The overlap is a % of the hero width (margin percentages
   resolve against the containing block's width), so it scales with the hero:
   -5% normally, and -8% once the type shrinks on small screens (≤768px).
   Hero 1's subtitle follows .hero-media, so it's unaffected. */
.hero img + p { margin-top: -5%; }

/* Hero 1 only: the main title overlays its image. The wrapper is the
   positioning context (sized to the image) so the title sits 100px from the
   image top, with the subtitle flowing underneath. */
.hero-media { position: relative; }

.hero-media h1 {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0;
  /* Hard red offset copy behind the white text = layered "block color" look,
     plus a faint dark glow for legibility over the photo. */
  text-shadow: 5px 5px 0 var(--red), 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Three-card grid → single column on narrow screens. */
.cards {
  max-width: 1170px;
  margin: 56px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: var(--panel);
  border: 2px solid var(--white);
  border-radius: 8px;
  padding: 22px;
  max-width: 420px;
  margin-inline: auto; /* center the capped card within its grid cell */
}

/* Card titles get the same red block-offset treatment as the main title
   (scaled down for the smaller text; no dark glow needed on the solid panel). */
.card h3 {
  font-size: 22px;
  font-weight: normal;
  color: var(--white);
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 var(--red);
}

.card p {
  flex: 1;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}

/* ONE shared width for every action button — cards and the download row
   stay in lockstep by construction (both render exactly 260px at all
   viewport widths). */
.card .btn, .downloads .btn { width: 100%; max-width: 260px; }

.card .btn { margin-top: 4px; }

/* Buttons: black fill, 2px white border, invert to white-on-black on hover
   (mirrors webflasher/style.css .btn). */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid var(--white);
  border-radius: 3px;
  background: #000;
  color: var(--white);
  font-family: inherit;
  font-size: 19px;
  font-weight: normal;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

/* Only apply hover on devices that can actually hover (mouse/trackpad). On
   touch screens a tap would otherwise trigger :hover and leave it stuck. */
@media (hover: hover) {
  body:not(.no-hover) .btn:hover { background: var(--white); color: #000; }
}

/* Download row (hero 3): two plain buttons, side by side, stacking on mobile. */
.downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  /* 100px makes each download button track the card buttons EXACTLY at
     every row-mode width: cards give a button (vw−232)/3 — 40px cards
     padding + 48px grid gaps + 144px of card padding/border across three
     cards — and (vw − 2×100 − 2×16 gaps)/3 is the same expression. Both
     then share the 260px cap on wide screens. */
  padding-inline: 100px;
}

/* Row behavior only — the shared width cap lives with .card .btn above.
   (In row mode flex-basis 0 governs sizing; the width:100% kicks in when
   the stack breakpoint switches flex-basis back to auto.) */
.downloads .btn {
  flex: 1 1 0;
  white-space: nowrap;
}

/* Tested-on note under the download buttons — same type as the footer.
   .hero .tested-on out-specifies .hero p, which would otherwise reassert
   the 24px caption size and zero out the top margin. */
.hero .tested-on {
  margin: 16px auto 0;
  font-size: 16px;
  color: var(--muted);
  max-width: 62ch;
}

/* Footer: dim, centered copyright + legal disclaimer. */
footer {
  max-width: 78ch;
  margin: 0 auto;
  padding: 56px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

footer a { color: var(--red); text-decoration: none; }
@media (hover: hover) {
  body:not(.no-hover) footer a:hover { text-decoration: underline; }
}

.foot-legal { display: block; margin-top: 10px; color: #666; }

.foot-links { display: block; margin-top: 10px; }

/* Footer line break: hidden on desktop (copyright + links stay on one line),
   shown on mobile so "License | Support" drops to its own line instead of only
   "Support" wrapping. Paired with .foot-sep, the desktop-only " | " divider. */
.foot-br { display: none; }

@media (max-width: 768px) {
  /* Break the footer after the brand; hide the desktop " | " divider. */
  .foot-sep { display: none; }
  .foot-br { display: inline; }
  .hero h1 { font-size: 52px; }
  .hero p { font-size: 21px; }
  /* Smaller type → bigger caption overlap. */
  .hero img + p { margin-top: -8%; }
}

/* Hero 3's image is a bordered DOSBox window screenshot floating in
   dark canvas padding — the standard -5%/-8% pull-up ran the caption
   into the window border, while no pull-up left the padding gaping.
   -3% eats most of the built-in padding and keeps clear of the window
   at all widths (double .hero class outranks the mobile -8% too). */
.hero.hero-dosbox img + p { margin-top: -3%; }

/* Shared stack breakpoint: the three download buttons need ~852px for a
   single row (3×260px + 2×16px gaps + 40px padding), and the cards
   stack at the same width so the two three-across layouts always agree.
   Buttons become a centered COLUMN — never a 2+1 wrap (flex-basis:100%
   alone cannot do this: line-breaking clamps the basis to max-width
   260px, so two buttons still shared a row). */
@media (max-width: 879px) {
  .cards { grid-template-columns: 1fr; }
  /* The 100px row-mode padding would squeeze stacked buttons under the
     260px cap on phones (and the nowrap labels then overflow the right
     edge) — drop to the standard 20px gutter so they match card buttons. */
  .downloads { flex-direction: column; align-items: center; padding-inline: 20px; }
  .downloads .btn { flex-basis: auto; }
}