/* Transistor (Integral) — professional tech-manufacturer theme over UIkit
   Palette: white, deep-navy #12315B, circuit-blue #1667B2, brand-red #D6001C */

:root {
  --tr-bg: #FFFFFF;
  --tr-navy: #12315B;
  --tr-blue: #1667B2;
  --tr-red: #D6001C;
  --tr-text: #333333;
  --tr-subtle: #E1E6ED;
}

body { background: #f7f9fb; color: var(--tr-text); font-family: 'Roboto', system-ui, sans-serif; }
h1, h2, h3, h4, .uk-logo, .wordmark { font-family: 'Titillium Web', 'Roboto', sans-serif; color: var(--tr-navy); font-weight: 600; }
a { color: var(--tr-blue); }
a:hover { color: var(--tr-red); }
.container-wide { max-width: 1180px; margin-inline: auto; padding-inline: 1rem; }

/* ---------- Navbar ---------- */
.uk-navbar-container.site-header { background: var(--tr-bg); border-bottom: 3px solid var(--tr-red); position: sticky; top: 0; z-index: 980; }
.site-header .uk-logo.wordmark { color: var(--tr-red); font-weight: 700; font-family: 'Titillium Web'; text-transform: uppercase; letter-spacing: 0.04em; }
.site-header .uk-navbar-nav > li > a { color: var(--tr-navy); font-weight: 500; text-transform: none; min-height: 60px; }
.site-header .uk-navbar-nav > li > a:hover, .site-header .uk-navbar-nav > li.uk-active > a { color: var(--tr-red); }
.uk-navbar-dropdown { border-top: 2px solid var(--tr-red); }
.uk-navbar-dropdown-nav > li > a { color: var(--tr-navy); }
.uk-navbar-dropdown-nav > li > a:hover { color: var(--tr-red); }

/* ---------- Hero ---------- */
.tr-hero { background: linear-gradient(120deg, var(--tr-navy), var(--tr-blue)); color: #fff; padding: 3rem 1.5rem; }
.tr-hero h1 { color: #fff; }
.tr-hero .btn-cta { display: inline-block; background: var(--tr-red); color: #fff; font-weight: 600; padding: 0.6rem 1.4rem; margin-top: 1rem; border-radius: 3px; }
.tr-hero .btn-cta:hover { background: #fff; color: var(--tr-red); }

/* ---------- Cards ---------- */
.uk-card.tr-card { border: 1px solid var(--tr-subtle); border-radius: 4px; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.uk-card.tr-card:hover { box-shadow: 0 8px 22px rgba(18,49,91,.12); transform: translateY(-3px); }
.uk-card.tr-card img { aspect-ratio: 4/3; object-fit: cover; }
.uk-card.tr-card .uk-card-title { font-size: 1.05rem; }
.uk-card.tr-card:hover .uk-card-title a { color: var(--tr-red); }
.tag-red { background: var(--tr-red); color: #fff; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 2px; }
.read-more { color: var(--tr-red); font-weight: 600; }

/* ---------- Prose ---------- */
.uk-article a, .prose a { color: var(--tr-blue); text-decoration: underline; }
.uk-article a:hover { color: var(--tr-red); }
.article-meta { color: var(--tr-red); font-family: 'Titillium Web'; font-weight: 600; font-size: 0.85rem; }
.article-lead { font-size: 1.15rem; color: #555; border-left: 4px solid var(--tr-blue); padding-left: 1rem; }
.toc-top { border: 1px solid var(--tr-subtle); background: #fff; padding: 0.8rem 1rem; margin-bottom: 1.5rem; }
.toc-top ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.4rem 0 0; padding: 0; }
.tr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 0.6rem; }
.tr-gallery img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--tr-subtle); }
.uk-article img, .prose img { max-width: 100%; height: auto; }
table td, table th { border: 1px solid var(--tr-subtle); }

/* ---------- Footer ---------- */
.uk-section-secondary.site-footer { background: var(--tr-navy); color: #cdd6e2; }
.site-footer a { color: #cdd6e2; }
.site-footer a:hover { color: #fff; }
.site-footer .wordmark { color: #fff; }
.footer-copy { color: #8a97a8; font-size: 0.82rem; margin-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem; }

@media print { .site-header, .site-footer, .tr-hero { display: none; } a { color: #000; } }