/* Site chrome for the static Tech Help site: header, menu, footer, accessibility toolbar, chat.
   Page bodies bring their own .wk-page styles (exported from WordPress as-is). */

/* ===== Self-hosted fonts (Latin subset; were Google Fonts) ===== */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Divi base rules the page designs were tuned against on the live site ===== */
html, body { margin: 0; padding: 0; }
body { font-family: "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 1.7em; font-weight: 500; color: #666; background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { padding-bottom: 10px; line-height: 1em; font-weight: 500; }
p { padding-bottom: 1em; }
p:not(.has-background):last-of-type { padding-bottom: 0; }
img { max-width: 100%; height: auto; }

.th-container { width: 80%; max-width: 1080px; margin: 0 auto; }

/* ===== Header (was the Divi header + wren-kato-menu-style.php) ===== */
.th-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; background: var(--th-panel); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.th-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 98px; }
.th-logo { display: block; flex: none; }
.th-logo img { display: block; height: 44px; width: auto; max-width: none; }
.th-nav ul { display: flex; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.th-nav li { padding-right: 18px; }
.th-nav li:last-child { padding-right: 0; }
.th-nav a { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: #e7eaf0; text-decoration: none; transition: color .2s ease; }
.th-nav a:hover, .th-nav a[aria-current="page"] { color: var(--th-accent); }
.th-burger { display: none; }
.th-mobile-menu { display: none; }
.th-page { padding-top: 98px; }

@media (max-width: 980px) {
  .th-header { position: relative; }
  .th-header__in { height: 80px; }
  .th-page { padding-top: 0; }
  .th-nav { display: none; }
  .th-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 8px; background: none; border: 0; cursor: pointer; }
  .th-burger span { display: block; height: 2px; background: #e7eaf0; border-radius: 2px; }
  .th-mobile-menu:not([hidden]) { display: block; position: absolute; top: 100%; left: 10%; right: 10%; margin: 0; padding: 5%; list-style: none;
    background: var(--th-panel); border: 1px solid #232b38; border-top: none; box-shadow: 0 2px 5px rgba(0,0,0,.1); z-index: 9991; }
  .th-mobile-menu li { border-top: 1px solid #232b38; }
  .th-mobile-menu li:first-child { border-top: none; }
  .th-mobile-menu a { display: block; padding: 10px 5%; font-family: "IBM Plex Mono", monospace; font-size: 16px; letter-spacing: .02em; color: #e7eaf0; text-decoration: none; }
  .th-mobile-menu a:hover, .th-mobile-menu a[aria-current="page"] { color: var(--th-accent); }
}

/* ===== Footer (was the Divi footer bar) ===== */
.th-footer { background: #222; }
.th-footer__in { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
.th-footer__credit { color: #a3a3a3; font-size: 14px; text-decoration: none; }
.th-footer__credit:hover { color: #e7eaf0; }
.th-footer__fb { color: #a3a3a3; display: inline-flex; padding: 4px; }
.th-footer__fb:hover { color: #e7eaf0; }

/* "// NEXT" strip: the page CSS never gave it the content width the other bands have, so it ran edge to edge */
.wk-page .next-strip { max-width: var(--max-w, 1180px); margin-inline: auto; padding-inline: var(--space-3, 24px); box-sizing: border-box; }

/* Home H1 opens with the search phrase, styled as the eyebrow line that used to sit above it */
.wk-page .hero__title .hero__kicker { display: block; line-height: 1.5; font-weight: 500; letter-spacing: .12em; }

/* ===== Looks: Dark (default) / Amber / Light =====
   Every page styles itself from the same seven .wk-page variables, so a look only has to swap those.
   Kept above the high-contrast rules so accessibility mode always wins. The header stays dark in
   Light because the logo is light-on-transparent. */
:root { --th-accent: #6fffe9; --th-panel: #10141c; --th-ink: #05070c; }
html[data-look="amber"] { --th-accent: #ffb86b; --th-panel: #17120c; --th-ink: #0c0906; }
html[data-look="light"] { --th-panel: #0f1622; }
html[data-look="amber"] .wk-page { --bg: #0c0906; --bg-panel: #17120c; --line: #33291d; --text: #f1ebe2; --text-dim: #a3978a; --accent: #ffb86b; --accent-2: #6fffe9; }
html[data-look="light"] .wk-page { --bg: #f5f7fa; --bg-panel: #ffffff; --line: #d6dce6; --text: #0f1622; --text-dim: #4f5a6b; --accent: #0a7d6f; --accent-2: #a55507; }
html[data-look="light"] .wk-page .visor, html[data-look="light"] .wk-page .eye-lens { fill: #0f1622; }
.wk-page .sentinel radialGradient stop { stop-color: var(--accent); }
html.th-theming, html.th-theming * { transition: background-color .3s ease, border-color .3s ease, color .25s ease, fill .3s ease, stroke .3s ease !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.wk-page .th-looks { position: absolute; top: 18px; right: max(24px, calc((100% - 1180px) / 2 + 24px)); z-index: 3;
  display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; }
.wk-page .th-looks__hint { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.wk-page .th-looks__pick { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-panel); }
.wk-page .th-looks button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); transition: background-color .2s ease, color .2s ease; }
.wk-page .th-looks button:hover { color: var(--text); }
.wk-page .th-looks button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
@media (max-width: 560px) { .wk-page .th-looks { top: 12px; right: 12px; } .wk-page .th-looks__hint { display: none; } }
@media print { .wk-page .th-looks { display: none; } }

/* ===== Accessibility toolbar (was wk-accessibility.php) ===== */
html[data-wk-fs] .wk-page { --fs: 1.25; }
html[data-wk-fs] .wk-page { font-size: calc(16px * var(--fs)); }
html[data-wk-fs] .wk-page .eyebrow { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .section-title { font-size: calc(clamp(28px, 4vw, 42px) * var(--fs)); }
html[data-wk-fs] .wk-page .hero__title { font-size: calc(clamp(40px, 6vw, 72px) * var(--fs)); }
html[data-wk-fs] .wk-page .hero__sub { font-size: calc(17px * var(--fs)); }
html[data-wk-fs] .wk-page .telemetry { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .sentinel__caption { font-size: calc(11px * var(--fs)); }
html[data-wk-fs] .wk-page .marquee__track { font-size: calc(13px * var(--fs)); }
html[data-wk-fs] .wk-page .work__code { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .work__title { font-size: calc(19px * var(--fs)); }
html[data-wk-fs] .wk-page .work__desc { font-size: calc(14px * var(--fs)); }
html[data-wk-fs] .wk-page .work__tags { font-size: calc(11px * var(--fs)); }
html[data-wk-fs] .wk-page .about__body { font-size: calc(16px * var(--fs)); }
html[data-wk-fs] .wk-page .about__stats dt { font-size: calc(11px * var(--fs)); }
html[data-wk-fs] .wk-page .about__stats dd { font-size: calc(28px * var(--fs)); }
html[data-wk-fs] .wk-page .contact__cta { font-size: calc(clamp(20px, 3vw, 28px) * var(--fs)); }
html[data-wk-fs] .wk-page .contact__note { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .quick-links { font-size: calc(16px * var(--fs)); }
html[data-wk-fs] .wk-page .next-strip__label { font-size: calc(11px * var(--fs)); }
html[data-wk-fs] .wk-page .next-strip__link { font-size: calc(20px * var(--fs)); }
html[data-wk-fs] .wk-page .footer { font-size: calc(11px * var(--fs)); }
html[data-wk-fs] .wk-page .testimonial-card__quote { font-size: calc(15px * var(--fs)); }
html[data-wk-fs] .wk-page .testimonial-card__meta { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .google-cta__text { font-size: calc(15px * var(--fs)); }
html[data-wk-fs] .wk-page .google-cta__link { font-size: calc(16px * var(--fs)); }
html[data-wk-fs] .wk-page .help-card__label { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .help-card__title { font-size: calc(18px * var(--fs)); }
html[data-wk-fs] .wk-page .help-card__body { font-size: calc(14px * var(--fs)); }
html[data-wk-fs] .wk-page .wk-safety h3 { font-size: calc(20px * var(--fs)); }
html[data-wk-fs] .wk-page .wk-safety p { font-size: calc(15px * var(--fs)); }
html[data-wk-fs] .wk-page .remote-callout__text { font-size: calc(15px * var(--fs)); }
html[data-wk-fs] .wk-page .remote-callout__link { font-size: calc(16px * var(--fs)); }
html[data-wk-fs] .wk-page .contact-form__row label { font-size: calc(12px * var(--fs)); }
html[data-wk-fs] .wk-page .contact-form__row input,
html[data-wk-fs] .wk-page .contact-form__row textarea { font-size: calc(15px * var(--fs)); }
html[data-wk-fs] .wk-page .contact-form__status { font-size: calc(13px * var(--fs)); }
html[data-wk-fs] .th-nav a { font-size: 15px; }
html[data-wk-fs] .th-mobile-menu a { font-size: 20px; }

html[data-wk-hc="1"] .wk-page {
  --bg: #000000; --bg-panel: #000000; --line: #ffffff; --text: #ffffff; --text-dim: #ffffff; --accent: #ffff00; --accent-2: #ffff00;
}
html[data-wk-hc="1"] .wk-page .grain,
html[data-wk-hc="1"] .wk-page .about__grid { display: none !important; }
html[data-wk-hc="1"] .wk-page .visor,
html[data-wk-hc="1"] .wk-page .eye-lens { fill: #000000 !important; }
html[data-wk-hc="1"] .wk-page .ring { opacity: 1 !important; }
html[data-wk-hc="1"] .wk-page .pupil,
html[data-wk-hc="1"] .wk-page .antenna-tip { filter: none !important; }
html[data-wk-hc="1"] .wk-page a:hover,
html[data-wk-hc="1"] .wk-page a:focus-visible { text-decoration: underline; }
html[data-wk-hc="1"] .wk-page .contact-form__row input,
html[data-wk-hc="1"] .wk-page .contact-form__row textarea { background: #000000; border-color: #ffffff; color: #ffffff; }
html[data-wk-hc="1"] .th-header { background: #000; border-bottom: 2px solid #fff; }
html[data-wk-hc="1"] .th-mobile-menu { background: #000 !important; border-color: #fff !important; }
html[data-wk-hc="1"] .th-mobile-menu li { border-top-color: #fff; }
html[data-wk-hc="1"] .th-nav a, html[data-wk-hc="1"] .th-mobile-menu a { color: #fff; }
html[data-wk-hc="1"] .th-burger span { background: #fff; }
html[data-wk-hc="1"] .th-nav a:hover, html[data-wk-hc="1"] .th-nav a[aria-current="page"],
html[data-wk-hc="1"] .th-mobile-menu a:hover, html[data-wk-hc="1"] .th-mobile-menu a[aria-current="page"] { color: #ff0; }
html[data-wk-hc="1"] .circuit3d { display: none; }

.wk-a11y {
  position: fixed; right: 16px; bottom: 16px; z-index: 99999;
  display: flex; gap: 8px; align-items: center;
  background: var(--th-panel); border: 1px solid var(--th-accent); border-radius: 999px;
  padding: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.55);
  font-family: "IBM Plex Mono", monospace;
}
.wk-a11y button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  color: #e7eaf0; font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.wk-a11y button:hover { background: var(--th-accent); color: var(--th-ink); }
.wk-a11y button[aria-pressed="true"] { background: var(--th-accent); color: var(--th-ink); }
.wk-a11y button:focus-visible { outline: 3px solid var(--th-accent); outline-offset: 3px; }
html[data-wk-hc="1"] .wk-a11y { background: #000000; border-color: #ffffff; }
html[data-wk-hc="1"] .wk-a11y button { color: #ffffff; }
html[data-wk-hc="1"] .wk-a11y button:hover,
html[data-wk-hc="1"] .wk-a11y button[aria-pressed="true"] { background: #ffff00; color: #000000; }
html[data-wk-hc="1"] .wk-a11y button:focus-visible { outline-color: #ffff00; }
.wk-a11y__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .wk-a11y { right: 8px; bottom: 8px; gap: 4px; }
  .wk-a11y button { padding: 0 10px; font-size: 12px; }
}
@media print { .wk-a11y { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .wk-a11y button { transition: none; } }

/* ===== Chat helper (was wk-chat.php) ===== */
#wk-chat-launch,#wk-chat-panel,#wk-chat-launch *,#wk-chat-panel *{box-sizing:border-box;}
#wk-chat-launch{position:fixed;left:16px;bottom:16px;z-index:99998;display:inline-flex;align-items:center;gap:9px;background:var(--th-panel);color:#e7eaf0;border:1px solid var(--th-accent);border-radius:999px;padding:9px 16px 9px 11px;min-height:48px;font-family:"IBM Plex Mono",monospace;font-size:14px;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.5);}
#wk-chat-launch:hover{background:var(--th-accent);color:var(--th-ink);}
#wk-chat-launch svg{width:26px;height:26px;flex-shrink:0;}
#wk-chat-launch .d{width:8px;height:8px;border-radius:50%;background:var(--th-accent);box-shadow:0 0 8px var(--th-accent);flex-shrink:0;}
#wk-chat-launch:hover .d{background:var(--th-ink);box-shadow:none;}
#wk-chat-panel{position:fixed;left:16px;bottom:76px;z-index:99999;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 110px);display:none;flex-direction:column;background:var(--th-panel);border:1px solid #232b38;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6);font-family:"Inter",system-ui,sans-serif;}
#wk-chat-panel.o{display:flex;}
.wk-h{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--th-ink);border-bottom:1px solid #232b38;}
.wk-h svg{width:34px;height:34px;flex-shrink:0;}
.wk-h .t{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;color:#e7eaf0;line-height:1.2;}
.wk-h .s{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--th-accent);}
.wk-x{margin-left:auto;background:none;border:none;color:#8891a3;font-size:24px;line-height:1;cursor:pointer;width:38px;height:38px;border-radius:8px;}
.wk-x:hover{color:#e7eaf0;background:#141a24;}
.wk-b{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;}
.wk-m{max-width:86%;padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.5;}
.wk-m.bot{align-self:flex-start;background:var(--th-ink);border:1px solid #232b38;color:#e7eaf0;border-bottom-left-radius:4px;}
.wk-m.user{align-self:flex-end;background:var(--th-accent);color:var(--th-ink);border-bottom-right-radius:4px;}
.wk-m a{color:var(--th-accent);}
.wk-a{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;}
.wk-a>*{display:inline-flex;align-items:center;text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--th-accent);border:1px solid var(--th-accent);border-radius:999px;padding:7px 12px;background:none;cursor:pointer;}
.wk-a>*:hover{background:var(--th-accent);color:var(--th-ink);}
.wk-f{padding:11px;border-top:1px solid #232b38;display:flex;flex-wrap:wrap;gap:7px;background:var(--th-panel);}
.wk-c{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#e7eaf0;background:#141a24;border:1px solid #232b38;border-radius:999px;padding:7px 11px;cursor:pointer;}
.wk-c:hover{border-color:var(--th-accent);color:var(--th-accent);}
html[data-wk-hc="1"] #wk-chat-launch{background:#000;border-color:#fff;color:#fff;}
html[data-wk-hc="1"] #wk-chat-launch:hover{background:#ff0;color:#000;}
html[data-wk-hc="1"] #wk-chat-launch .d{background:#ff0;box-shadow:none;}
html[data-wk-hc="1"] #wk-chat-panel,html[data-wk-hc="1"] .wk-h{background:#000;border-color:#fff;}
html[data-wk-hc="1"] .wk-h .s{color:#ff0;}
html[data-wk-hc="1"] .wk-m.bot{background:#000;border-color:#fff;color:#fff;}
html[data-wk-hc="1"] .wk-m.user{background:#ff0;color:#000;}
html[data-wk-hc="1"] .wk-m a,html[data-wk-hc="1"] .wk-a>*{color:#ff0;border-color:#ff0;}
html[data-wk-hc="1"] .wk-a>*:hover{background:#ff0;color:#000;}
html[data-wk-hc="1"] .wk-c{background:#000;border-color:#fff;color:#fff;}
html[data-wk-hc="1"] .wk-c:hover{border-color:#ff0;color:#ff0;}
html[data-wk-fs] .wk-m{font-size:17px;}
html[data-wk-fs] #wk-chat-launch,html[data-wk-fs] .wk-c,html[data-wk-fs] .wk-a>*{font-size:15px;}
@media (max-width:480px){#wk-chat-panel{left:8px;right:8px;bottom:70px;width:auto;height:calc(100vh - 120px);}#wk-chat-launch{left:8px;bottom:8px;}}
@media print{#wk-chat-launch,#wk-chat-panel{display:none!important;}}