/*
TLabs_site/css/TLabs_styles.css — www.toptroniclaboratories.com
Generated/Updated on: 2026-09-05T12:40:02+1000
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced without the written permission of Toptronic® Ltd.
For copyright inquiries: jacques@toptronic.com
Build: 002 | Styles for the 2-page toptronic.ltd site.
WHITE background theme (Jacques' order, session 0041): light pages,
dark navy text, gold accents (darkened on white for contrast).
Old-engine friendly: plain hex colors and px sizes FIRST, modern
clamp()/custom properties only as progressive enhancement (0039 lesson).
*/

/* ---------- 1. Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  /* fallbacks first (old engines) */
  background-color: #ffffff;
  color: #1c2b4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
@supports (font-family: system-ui) {
  body { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
}

a { color: #a16a00; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- 2. Header ---------- */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e3e8f2;
  padding: 14px 0;
  position: relative;
  z-index: 10;
}
.site-header .wrap {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.brand { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; gap: 12px; }
.brand img { height: 44px; width: auto; display: block; border-radius: 8px; }
.brand-name {
  color: #12203c; font-size: 20px; font-weight: 700; letter-spacing: 1px;
}
.brand-name .reg { font-size: 12px; vertical-align: super; }

.site-nav a {
  color: #44506b; font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  margin-left: 26px; padding: 6px 2px;
}
.site-nav a.active, .site-nav a:hover { color: #a16a00; }

/* ---------- 3. Hero ---------- */
.hero {
  background-color: #f4f7fc; /* fallback first */
  background-image: -webkit-linear-gradient(160deg, #f4f7fc 55%, #e8eefb);
  background-image: linear-gradient(160deg, #f4f7fc 55%, #e8eefb);
  border-bottom: 1px solid #e3e8f2;
  padding: 72px 0 64px;
  text-align: center;
}
.hero h1 {
  color: #12203c;
  font-size: 34px; /* fallback */
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.15; letter-spacing: 0.5px;
}
.hero .gold { color: #a16a00; }
.hero p.tag {
  color: #44506b; font-size: 17px; max-width: 760px;
  margin: 22px auto 0; text-transform: uppercase; letter-spacing: 1px;
}
/* Brand statement line (verbatim, uppercase). Gold rules make it pop
   on the light hero; plain color + borders stay as old-engine fallback. */
.hero p.brandline {
  color: #a16a00; font-size: 15px; max-width: 820px;
  margin: 26px auto 0; letter-spacing: 1px; font-weight: 700;
  border-top: 1px solid #d9e0ec;
  padding-top: 18px;
}
.hero .hands { margin-top: 34px; }
.hero .hands img { width: 180px; height: auto; border-radius: 10px; display: inline-block; }

/* ---------- 4. Phone banner (the ONE number) ---------- */
.phone-banner { text-align: center; padding: 52px 0 10px; }
.phone-banner .label {
  color: #5d6b8a; text-transform: uppercase; letter-spacing: 3px; font-size: 14px;
}
.phone-banner a.big {
  display: inline-block; margin-top: 10px;
  color: #a16a00; font-size: 30px; font-size: clamp(26px, 5vw, 44px);
  font-weight: 700; letter-spacing: 1px;
}
.phone-banner .sub { color: #5d6b8a; font-size: 14px; margin-top: 6px; }

/* ---------- 5. Cards / info grid ---------- */
.grid {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; margin: 44px 0;
}
.grid > * { -webkit-box-flex: 1; -ms-flex: 1 1 280px; flex: 1 1 280px; }
.card {
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 14px;
  padding: 28px 26px; text-align: center;
}
.card h2 { color: #12203c; font-size: 19px; letter-spacing: 1px; margin-bottom: 12px; }
.card p, .card a { font-size: 17px; }
.card .small { color: #5d6b8a; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 8px; }

/* ---------- 6. Map ---------- */
.map-section { padding: 10px 0 60px; }
.map-section h2 { color: #12203c; font-size: 22px; text-align: center; margin-bottom: 18px; }
.map-box { border: 1px solid #d9e0ec; border-radius: 14px; overflow: hidden; }
.map-box iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-block; margin-top: 14px; padding: 12px 26px;
  background-color: #f0b429; color: #12203c; font-weight: 700;
  border-radius: 999px; letter-spacing: 1px; font-size: 15px;
}
.btn:hover, .btn:focus { text-decoration: none; background-color: #ffc94d; }

/* ---------- 8. Footer ---------- */
.site-footer { border-top: 1px solid #e3e8f2; padding: 30px 0 40px; text-align: center; }
.site-footer p { color: #5d6b8a; font-size: 13px; }
.site-footer a { color: #44506b; }
.site-footer .stars { margin: 0 auto 12px; width: 140px; border-radius: 8px; display: block; }

/* ---------- 8b. THE TOPTRONIC FAMILY (same pattern as t10142.com) ---------- */
.family { margin: 0 auto 24px; padding-bottom: 20px; border-bottom: 1px solid #e3e8f2; max-width: 900px; }
.family h2 {
  color: #12203c; font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 14px;
}
.family ul {
  list-style: none; padding: 0; margin: 0;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  gap: 8px 22px;
}
/* old-engine flex-gap fallback (0039 lesson) */
.family li { margin: 4px 11px; }
@supports (gap: 8px) { .family li { margin: 0; } }
.family a { color: #44506b; font-size: 14px; }
.family a:hover, .family a:focus { color: #a16a00; }
.family a[aria-current="page"] { color: #a16a00; font-weight: 700; }

/* ---------- 8c. Visitor IP + country-from-IP line ---------- */
.footer-ip { margin-top: 14px; font-size: 12px; color: #5d6b8a; letter-spacing: 0.02em; }
.footer-ip .ip-value { font-family: Consolas, "Cascadia Mono", monospace; color: #44506b; }

/* ---------- 8c-b. Dual logo (TOPTRONIC + Microchip) — session 0053 ----------
   Jacques' order: same as the old site — bottom of the footer, centered,
   270px wide (the old site shipped this exact file at width=270). */
.footer-dual-logo { margin: 18px 0 4px; }
.footer-dual-logo img { width: 270px; height: auto; display: block; margin: 0 auto; }

/* ---------- 8d. Country + Language selectors (header, top right) ----------
   WHAT: a small preference widget — a native <select> for Language (its
   options depend on the chosen country) and a custom dropdown for Country
   with a filter box above the list (type "Sw" -> Switzerland/Sweden).
   WHY CUSTOM for country only: a native <select> cannot host a filter box.
   Old-engine friendly: plain colors/px first, then enhancements. The whole
   widget is hidden in the HTML and revealed by JS, so with JavaScript
   disabled the header looks exactly as it did before (fail-soft). */
.geo-zone {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
  gap: 6px 14px;
}
#geo-selectors {
  display: none; /* JS reveals it as flex when everything is built */
  position: relative;
}
#geo-selectors[data-ready="1"] { display: -webkit-box; display: -ms-flexbox; display: flex; }
#geo-selectors { -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.geo-label {
  color: #5d6b8a; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  margin-right: 4px;
}
.geo-select {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px; color: #12203c; background-color: #ffffff;
  border: 1px solid #d9e0ec; border-radius: 8px; padding: 7px 10px;
  max-width: 210px;
}
/* Desktop rule: the Language + Country row is ONE line, always. Long
   country names shrink instead of wrapping (the language <select> yields
   space first, then the label truncates with an ellipsis). Wrapping is
   allowed ONLY inside the 640px mobile block. */
.geo-label { white-space: nowrap; }
.geo-lang { min-width: 0; }
#geo-selectors[data-ready="1"] { flex-wrap: nowrap; -ms-flex-wrap: nowrap; }
#geo-selectors .geo-hint { width: auto; }
.geo-select:focus { outline: 2px solid #f0b429; outline-offset: 1px; }
.geo-select:disabled { color: #9aa7c2; background-color: #f4f7fc; }
.geo-country-btn { cursor: pointer; text-align: left; min-width: 150px; max-width: 210px; }
/* The country text truncates with an ellipsis instead of pushing the row
   into a second line ("United Kingdom — Dutch (F…"). */
.geo-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Globe icon + text inside the country button: a tiny flex row keeps the
   16px icon and the label vertically aligned at every font size. */
.geo-country-btn {
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 8px;
}
.geo-globe { -ms-flex-negative: 0; flex-shrink: 0; color: #a16a00; }
/* Honesty hint: "Preference saved. This site is currently in English
   only." — fades out after ~4 s. Absolutely positioned so it NEVER
   changes the widget's height (the one-line desktop rule stays true
   whether the hint is visible or not). */
.geo-hint {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  width: 100%; font-size: 12px; color: #5d6b8a;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease;
  z-index: 51;
}
.geo-hint.is-visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .geo-hint { transition: none; } }
/* The dropdown panel: filter box on top, scrollable country list below.
   z-index keeps it above the hero and cards; panel is position:absolute
   inside the relatively-positioned #geo-selectors. */
.geo-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  width: 260px; background-color: #ffffff;
  border: 1px solid #d9e0ec; border-radius: 12px;
  box-shadow: 0 10px 26px rgba(18, 32, 60, 0.16);
  padding: 10px;
}
.geo-filter {
  width: 100%; font-size: 14px; color: #12203c;
  border: 1px solid #d9e0ec; border-radius: 8px; padding: 7px 9px;
  margin-bottom: 8px;
}
.geo-filter:focus { outline: 2px solid #f0b429; outline-offset: 1px; }
.geo-list { max-height: 240px; overflow-y: auto; }
.geo-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
  color: #44506b; font-size: 14px; padding: 8px 10px;
  font-family: Georgia, "Times New Roman", serif;
}
.geo-opt:hover, .geo-opt:focus { background-color: #f4f7fc; color: #a16a00; outline: none; }
.geo-opt.is-active { color: #a16a00; font-weight: 700; }
.geo-empty { color: #9aa7c2; font-size: 13px; padding: 8px 10px; }
/* Footer line that echoes the honest selection (see Tltd_geo_selectors). */
.geo-footer-line { margin-top: 6px; font-size: 12px; color: #5d6b8a; }

/* ---------- 9. Small screens (no drawer needed: only 2 links) ---------- */
@media (max-width: 640px) {
  .site-header .wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; }
  .site-nav a { margin: 0 12px; }
  /* Selectors: on phones the two controls may stack (there is no room for
     one row); the ellipsis rules above keep each control tidy. */
  #geo-selectors[data-ready="1"] { justify-content: center; flex-wrap: wrap; -ms-flex-wrap: wrap; }
  .geo-panel { right: auto; left: 50%; margin-left: -130px; }
  .hero { padding: 52px 0 46px; }
  .map-box iframe { height: 300px; }
}

/* ---------- 10. Reduced motion (nothing animates on this site yet; net stays last) ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* End of Tltd_styles.css */

/* --- Session 0050b: About / Registrations / Investors pages --- */
.about-block { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 24px; margin-bottom: 24px; }
.about-block h2 { color: #e8b84b; margin-bottom: 14px; }
.about-block p { color: #c9d4ea; line-height: 1.65; margin: 0 0 12px; font-size: 15px; }
.about-block img { display: block; max-width: 100%; border-radius: 10px; margin: 14px auto;
  border: 1px solid rgba(255,255,255,0.12); }
.card img { display: block; max-width: 100%; border-radius: 10px; margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.12); }
.brandline { color: #8fa0c2; font-size: 12px; letter-spacing: 0.04em; margin: 10px 0; }
@media (max-width: 720px) { .about-block { padding: 16px; } }
/* --- Session 0051: ONE-LINE header on desktop (Jacques' order) ---
   PROBLEM: brand + 5 nav links + the Language/Country selectors measured
   187 + 628 + 418 = 1233px at a 1080px viewport, so the selectors wrapped
   to a second line. FIX (measured in a real browser): slightly smaller nav
   text/spacing, a slightly smaller logo, and tighter selector boxes bring
   the total to ~988px with ~48px of spare room. Plain px only (old-engine
   friendly). Below 640px the old stacking behaviour is untouched. */
@media (min-width: 641px) {
  .site-nav a { font-size: 13px; letter-spacing: 1px; margin-left: 14px; }
  .brand img { height: 36px; }
  .brand-name { font-size: 17px; }
  .geo-select { padding: 6px 8px; max-width: 160px; font-size: 13px; }
  .geo-country-btn { min-width: 120px; max-width: 160px; }
  .geo-label { margin-right: 2px; letter-spacing: 1px; font-size: 10px; }
  #geo-selectors { gap: 4px 8px; }
}

/* --- Session 0053: ONE-LINE header rule (Jacques' order, TLabs) ---
   TLabs carries a LONGER brand name and a 4th nav link ("Book a Paid
   Consultation") than Tltd, so the 0051 budget does not fit: measured
   need at 17px brand + 13px nav is ~1090px at a 1080px viewport.
   FIX: enforce ONE visual row — .wrap becomes nowrap on desktop and each
   of the three blocks is allowed to shrink (nav links tighten, brand
   name truncates with an ellipsis, selector boxes shrink). Everything
   stays on the same line from 1024px up; between 641-1023px the row may
   still wrap (as before). Below 640px the mobile stacking is untouched. */
@media (min-width: 1024px) {
  .site-header .wrap { flex-wrap: nowrap; -ms-flex-wrap: nowrap; }
  .brand { min-width: 0; }
  .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-nav { min-width: 0; white-space: nowrap; gap: 4px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  /* Session 0053b (Jacques: menu text must never overlap): real spacing
     between links — padding on each side + whitespace nowrap per link, so
     translated longer labels can never paint over each other. */
  .site-nav a { font-size: 12px; letter-spacing: 0.5px; margin-left: 0; padding: 6px 11px; white-space: nowrap; }
  .geo-zone { min-width: 0; }
  #geo-selectors { flex-wrap: nowrap; -ms-flex-wrap: nowrap; }
  .geo-select { padding: 5px 6px; max-width: 140px; font-size: 12px; }
  .geo-country-btn { min-width: 110px; max-width: 140px; }
  .geo-label { font-size: 9px; margin-right: 2px; }
}

/* End of session 0050b additions */

/* ---------- 11. TLabs Articles pages (session 0053) ---------- */
.article-list { list-style: none; margin: 34px 0; padding: 0; }
.article-list li { margin: 0 0 12px; }
.article-list a {
  display: block; padding: 14px 18px;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 12px;
  color: #12203c; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase;
}
.article-list a:hover, .article-list a:focus { color: #a16a00; border-color: #f0b429; text-decoration: none; }
.article-body p { margin: 0 0 16px; max-width: 820px; margin-left: auto; margin-right: auto; }
.article-body ul { max-width: 780px; margin: 0 auto 18px; padding-left: 22px; }
.article-body li { margin-bottom: 12px; color: #2a3a5c; }
.article-eyebrow {
  color: #a16a00; font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  text-align: center; margin: 0 0 10px; font-weight: 700;
}
.brand-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px auto; max-width: 980px; }
.brand-grid img { height: 56px; width: auto; filter: grayscale(0); background-color: #fff;
  border: 1px solid #e3e8f2; border-radius: 10px; padding: 8px 14px; }
.product-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px auto; max-width: 980px; }
.product-grid img { max-height: 170px; width: auto; background-color: #fff;
  border: 1px solid #e3e8f2; border-radius: 10px; padding: 6px; }
.section-title { text-align: center; color: #12203c; font-size: 20px; letter-spacing: 1px; margin: 40px 0 8px; }

/* ---------- 12. Blog post cards on Articles (session 0053) ----------
   Mirrors the old /posts layout: thumbnail image on top, title link and
   teaser paragraph under it, 3 cards per row on desktop. */
.post-grid { display: flex; flex-wrap: wrap; gap: 22px; margin: 30px 0; }
.post-card {
  flex: 1 1 280px; max-width: 380px; margin: 0 auto;
  background-color: #f8fafd; border: 1px solid #d9e0ec; border-radius: 14px;
  padding: 16px; text-align: center;
}
.post-card img {
  width: 100%; height: auto; border-radius: 10px; display: block;
  border: 1px solid #e3e8f2; background-color: #fff;
}
.post-card-title {
  display: block; margin: 12px 0 8px; color: #12203c; font-weight: 700;
  font-size: 15px; line-height: 1.4;
}
.post-card-title:hover, .post-card-title:focus { color: #a16a00; }
.post-card p { color: #5d6b8a; font-size: 13px; line-height: 1.5; }
/* End of session 0053 additions */