/* ==========================================================================
   Shared stylesheet for musclebiplane.org pages.
   Lives in the site's existing root-level /css/ folder and is linked from
   pages with an absolute path (href="/css/site.css"), so the same tag
   works unchanged no matter how deep a page sits in the folder structure.

   Structure:
   1. Reset + base element styles
   2. Per-page color themes (add one block per page as you migrate pages
      over to this shared file)
   3. Layout rules for the MuscleBiplane FAST page (mbopen2.php)
   4. Layout rules for the Engines & Propellers links page
   5. Layout rules for the BlackEagle540 Motor article page
   ========================================================================== */

/* ---------- 1. Reset + base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.5rem 1rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

a { color: var(--link-color); }
a:visited { color: var(--link-visited); }
a:active { color: var(--link-active); }

/* ---------- 2. Per-page color themes ---------- */

/* MuscleBiplane FAST page (mbopen2.php) */
body.page-fast {
  --bg-color: #000032;
  --text-color: #ffffcc;
  --link-color: #ffffcc;
  --link-visited: #ccffcc;
  --link-active: #ff3333;
  background: var(--bg-color);
  color: var(--text-color);
}

/* Homepage theme, included here so the homepage can switch to this shared
   file later instead of keeping its own inline <style> block. Not used by
   mbopen2.php. */
body.page-home {
  --bg-color: #000020;
  --text-color: #ffffcc;
  --link-color: #66ff66;
  --link-visited: #ffff33;
  --link-active: #ff6666;
  background: var(--bg-color) url("/image1/rivet2.jpg") repeat;
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
}

/* Engines & Propellers links page */
body.page-links {
  --bg-color: #000000;
  --text-color: #ffffff;
  --link-color: #ffff00;
  --link-visited: #33ff33;
  --link-active: #ff0000;
  background: var(--bg-color) url("/image2/bg1.gif") fixed;
  color: var(--text-color);
}

/* BlackEagle540 Motor article page */
body.page-motor-article {
  --bg-color: #330066;
  --text-color: #ffffff;
  --link-color: #ffff00;
  --link-visited: #00ff00;
  --link-active: #ff0000;
  background: var(--bg-color) url("/image1/mainbg.gif") fixed;
  color: var(--text-color);
}

/* ---------- 3. MuscleBiplane FAST page layout ---------- */

.fast-grid {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  grid-template-areas:
    "title    .        tagline"
    ".        spell     .      "
    "navleft  hero      navright"
    ".        contact   .      "
    ".        copyright .      ";
  gap: 1rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.fast-header-left  { grid-area: title; }
.fast-header-right { grid-area: tagline; }
.fast-subtitle     { grid-area: spell; }
.fast-nav-col-left  { grid-area: navleft; }
.fast-hero          { grid-area: hero; justify-self: center; }
.fast-nav-col-right { grid-area: navright; }
.fast-contact       { grid-area: contact; }
.fast-copyright     { grid-area: copyright; }

.fast-header-left,
.fast-header-right {
  margin: 0;
  font-weight: normal;
}
.fast-header-left b,
.fast-header-right { font-size: 0.95rem; }
.fast-header-left b { font-size: 1.1rem; }

.fast-subtitle {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.5em;
}

.fast-nav-col-left,
.fast-nav-col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fast-nav-col-left img,
.fast-nav-col-right img { display: block; }

.fast-hero img { display: block; max-width: 100%; height: auto; }

.fast-contact {
  font-size: 0.9rem;
  font-weight: bold;
}

.fast-copyright {
  font-size: 0.75rem;
}
.fast-copyright p { margin: 0; }

.fast-footer-note {
  max-width: 900px;
  margin: 1rem auto 0;
  text-align: right;
  font-size: 0.75rem;
  color: #ff0000;
}

/* Stack everything into one column on narrow screens, and let the two
   12-icon nav lists wrap into a compact grid instead of one long column. */
@media (max-width: 680px) {
  .fast-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "tagline"
      "spell"
      "hero"
      "navleft"
      "navright"
      "contact"
      "copyright";
  }
  .fast-nav-col-left,
  .fast-nav-col-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- 4. Engines & Propellers links page layout ---------- */

.links-page {
  max-width: 1100px;
  margin: 0 auto;
}

.links-title {
  text-align: right;
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0 0 0.5rem;
}

.links-jumpnav {
  text-align: center;
  font-size: 0.8rem;
  margin: 0 0 2rem;
}
.links-jumpnav a { margin: 0 0.15rem; }

.links-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.links-column {
  flex: 1 1 260px;
  min-width: 240px;
}

.links-column section { margin-bottom: 2rem; }

.links-column h2 {
  font-size: 0.95rem;
  text-decoration: underline;
  font-weight: bold;
  margin: 0 0 0.5rem;
}

.links-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.5;
}

.links-back {
  text-align: center;
  margin-top: 2rem;
}
.links-back img { display: inline-block; max-width: 100%; height: auto; }

/* ---------- 5. BlackEagle540 Motor article page layout ---------- */

.article-page {
  max-width: 1100px;
  margin: 0 auto;
}

.article-hero {
  text-align: center;
  margin-bottom: 1.5rem;
}
.article-hero h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
}
.article-hero .subtitle {
  color: #00ff00;
  font-weight: bold;
  margin: 0.25rem 0;
}
.article-hero .byline {
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}

.article-divider {
  border: 0;
  border-top: 2px solid #ffffff55;
  max-width: 700px;
  margin: 2rem auto;
}

.article-prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
}
.article-prose h2 {
  text-align: center;
  text-decoration: underline;
  font-size: 1.4rem;
  margin-top: 2.5rem;
}
.article-prose h3 {
  font-size: 1.05rem;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}
.article-prose .subtitle-line {
  text-align: center;
  font-weight: bold;
  margin: 0.25rem 0;
}

.accent-green { color: #00ff00; }
.accent-red   { color: #ff0000; }
.accent-white { color: #ffffff; }
.accent-yellow { color: #ffff33; }

.article-figure {
  max-width: 950px;
  margin: 2.5rem auto;
  text-align: center;
}
.article-figure figcaption {
  color: #ffff00;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.article-figure img {
  display: block;
  width: 100%;
  max-width: 950px;
  height: auto;
  margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.article-footer-nav {
  text-align: center;
  font-size: 0.85rem;
  color: #ffff33;
  font-weight: bold;
  margin-top: 1rem;
}
.article-footer-nav a { margin: 0 0.3rem; }
.article-footer-nav p { margin: 0.5rem 0; }

.article-end {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
}
.article-end a { color: #ff0000; }