/* ========================================================================== 
   BZTRONICS ARTICLE PAGES
   Modern drop-in stylesheet for the legacy /Articles/ pages

   Designed for:
     - TBSW.html
     - SweepGen.html
     - amazon.html

   PURPOSE:
   These older pages were written with very little structural markup. This
   stylesheet deliberately uses mostly element selectors so the pages can be
   modernized WITHOUT rewriting the existing article text or HTML structure.

   INSTALL:
   1. Upload this file to: /Articles/bztronics-articles.css
   2. Add this line inside the <head> of each article page:

      <link rel="stylesheet" href="bztronics-articles.css">

   If an old stylesheet is already linked, place this NEW stylesheet AFTER it
   so these rules win the cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Change these variables first if you want to retune the entire appearance.
   -------------------------------------------------------------------------- */
:root {
  --bz-navy-950: #061321;
  --bz-navy-900: #091a2a;
  --bz-navy-800: #10283d;
  --bz-blue-700: #16466b;
  --bz-cyan: #65ddf5;
  --bz-gold: #e4c15c;
  --bz-gold-dark: #9d7c24;

  --bz-text: #213141;
  --bz-text-soft: #5c6b78;
  --bz-border: #dbe3e8;
  --bz-page: #eef3f6;
  --bz-white: #ffffff;

  --bz-content-width: 1080px;
  --bz-radius: 16px;
  --bz-shadow: 0 22px 65px rgba(3, 18, 31, 0.20);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 15% 0%, rgba(101, 221, 245, 0.10), transparent 32rem),
    radial-gradient(circle at 90% 8%, rgba(228, 193, 92, 0.08), transparent 28rem),
    var(--bz-navy-950);
}

body {
  width: calc(100% - 48px);
  max-width: var(--bz-content-width);
  min-height: 100vh;
  margin: 34px auto;
  padding: 46px 62px 52px;

  background: var(--bz-white);
  color: var(--bz-text);
  border-top: 6px solid var(--bz-gold);
  border-radius: var(--bz-radius);
  box-shadow: var(--bz-shadow);

  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Prevent extra spacing from old empty heading tags. */
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty,
p:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   3. LEGACY PAGE MASTHEAD
   The old articles do not have a modern header wrapper, so we turn their
   existing logo + first H1 + first H3 into a centered branded masthead.
   -------------------------------------------------------------------------- */
body > img:first-of-type {
  display: block;
  width: auto;
  max-width: 110px;
  height: auto;
  margin: 2px auto 14px;
}

body > h1:first-of-type {
  margin: 0;
  color: var(--bz-navy-950);
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

body > h3:first-of-type {
  margin: 10px auto 0;
  color: var(--bz-blue-700);
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
}

body > h3:first-of-type::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 24px auto 30px;
  background: linear-gradient(90deg, var(--bz-gold), var(--bz-cyan));
  border-radius: 99px;
}

/* --------------------------------------------------------------------------
   4. ARTICLE HEADINGS
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h4 {
  margin: 38px 0 22px;
  padding: 0 0 13px;
  color: var(--bz-navy-950);
  border-bottom: 1px solid var(--bz-border);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

h5 {
  margin: 32px 0 12px;
  color: var(--bz-blue-700);
  font-size: 1.18rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. BODY COPY
   -------------------------------------------------------------------------- */
p {
  margin: 0 0 1.15rem;
}

strong,
b {
  color: var(--bz-navy-950);
  font-weight: 800;
}

em,
i {
  color: #344c60;
}

ol,
ul {
  margin: 0 0 1.5rem 1.25rem;
  padding: 0;
}

li {
  margin: 0.38rem 0;
  padding-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   6. LINKS
   -------------------------------------------------------------------------- */
a {
  color: #0b638f;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease, background-color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}

a:hover,
a:focus-visible {
  color: var(--bz-gold-dark);
}

/* Amazon recommendations get a cleaner call-to-action treatment. */
a[href^="https://amzn.to/"] {
  display: inline-block;
  margin: 5px 4px 9px 0;
  padding: 10px 15px;
  color: var(--bz-white);
  background: var(--bz-navy-800);
  border: 1px solid var(--bz-navy-800);
  border-radius: 8px;
  text-decoration: none;
  line-height: 1.35;
}

a[href^="https://amzn.to/"]:hover,
a[href^="https://amzn.to/"]:focus-visible {
  color: var(--bz-navy-950);
  background: var(--bz-gold);
  border-color: var(--bz-gold);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. OLD BUTTONS / BACK BUTTON
   Handles real BUTTON tags and the old-fashioned INPUT buttons that appear
   on some versions of these pages.
   -------------------------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 42px;
  padding: 9px 16px;
  color: var(--bz-white);
  background: var(--bz-navy-800);
  border: 1px solid var(--bz-navy-800);
  border-radius: 8px;
  box-shadow: none;
  font: 700 0.94rem/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  color: var(--bz-navy-950);
  background: var(--bz-gold);
  border-color: var(--bz-gold);
}

/* --------------------------------------------------------------------------
   8. IMAGES / MEDIA
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

video,
iframe {
  display: block;
  max-width: 100%;
  margin: 24px auto;
  border: 0;
  border-radius: 12px;
}

/* Tame the old RSS graphic if it is present. */
img[src*="rss" i],
img[alt*="rss" i] {
  width: 30px;
  height: auto;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   9. RULES / ARTICLE SEPARATORS
   -------------------------------------------------------------------------- */
hr {
  height: 1px;
  margin: 38px 0 20px;
  background: var(--bz-border);
  border: 0;
}

/* --------------------------------------------------------------------------
   10. OPTIONAL LEGACY TABLE CLEANUP
   Some old HTML generators used tables purely for layout. These rules keep
   them from looking like 1997 escaped from a museum.
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  margin: 22px 0;
  border-collapse: collapse;
  background: var(--bz-white);
}

th,
td {
  padding: 12px 14px;
  border: 1px solid var(--bz-border);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--bz-navy-950);
  background: #f2f6f8;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   11. TEXT SELECTION / ACCESSIBILITY
   -------------------------------------------------------------------------- */
::selection {
  color: var(--bz-navy-950);
  background: #f6df97;
}

:focus-visible {
  outline: 3px solid rgba(101, 221, 245, 0.7);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE LAYOUT
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body {
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 32px 23px 38px;
    border-radius: 11px;
    font-size: 16px;
  }

  body > img:first-of-type {
    max-width: 88px;
  }

  h4 {
    margin-top: 30px;
  }

  a[href^="https://amzn.to/"] {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   13. PRINT
   Makes the articles clean and economical when printed.
   -------------------------------------------------------------------------- */
@media print {
  html,
  body {
    background: #fff !important;
  }

  body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #000;
  }

  a {
    color: #000;
  }

  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   14. BUTTON / CTA CONTRAST SAFETY OVERRIDE
   Legacy article markup contains old inline/link color rules that can make
   button text render black on the dark navy CTA background. These final
   rules intentionally use !important so the text remains readable even when
   an old page contains inline color styling or visited-link rules.
   -------------------------------------------------------------------------- */

/* Dark CTA state: always use light text. */
a[href*="amzn.to" i],
a[href*="amazon.com" i],
a.button,
a.btn,
.button a,
.btn a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Keep nested text/icons inside legacy button links readable too. */
a[href*="amzn.to" i] *,
a[href*="amazon.com" i] *,
a.button *,
a.btn *,
.button a *,
.btn a *,
button * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Gold hover state: dark text gives the strongest contrast. */
a[href*="amzn.to" i]:hover,
a[href*="amzn.to" i]:focus-visible,
a[href*="amazon.com" i]:hover,
a[href*="amazon.com" i]:focus-visible,
a.button:hover,
a.button:focus-visible,
a.btn:hover,
a.btn:focus-visible,
button:hover,
button:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible {
  color: var(--bz-navy-950) !important;
  -webkit-text-fill-color: var(--bz-navy-950) !important;
}