/* ═══════════════════════════════════════════════════════════════════════════
   GPIBee Website — Shared Stylesheet
   XyphroLabs · Colors: #1A5F8A primary · #2CA8E0 accent
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #333;
  background: #f0f4f8;
  padding-top: 60px;
}

/* ══════════════════════════════════════════════════════ NAVIGATION ══ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: #1A5F8A;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}

.nav-brand {
  font-size: 20px;
  font-weight: 900;
  color: white;
  text-decoration: none;
  letter-spacing: -0.5px;
  margin-right: 24px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.nav-brand .ee { color: #2CA8E0; font-size: 0.73em; }

.nav-links {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 2px;
}

.nav-links > a,
.nav-dropdown > .nav-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.15s;
  white-space: nowrap;
  display: block;
}
.nav-links > a:hover,
.nav-dropdown > .nav-link:hover,
.nav-links > a.active,
.nav-dropdown.active > .nav-link {
  background: rgba(255,255,255,0.16);
  color: white;
}

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-link::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.7;
  margin-left: 1px;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;           /* flush with trigger — no gap to fall through */
  left: 0;
  padding-top: 6px;    /* visual separation lives inside the menu as padding */
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  min-width: 210px;
  overflow: hidden;
  z-index: 2000;
  border: 1px solid rgba(0,0,0,0.07);
}
/* Keep menu open while hovering the trigger OR the menu itself */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.dd-open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: block;
  color: #333;
  padding: 9px 16px;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}
.nav-dropdown-menu a:hover {
  background: #f0f4f8;
  color: #1A5F8A;
  border-left-color: #2CA8E0;
}
.nav-dropdown-menu .dd-divider {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}
.nav-dropdown-menu .dd-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  padding: 8px 16px 3px;
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 6px;
  margin-left: auto;
  transition: background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.nav-toggle:hover { background: rgba(255,255,255,0.15); }

/* ── Mobile nav ── */
@media (max-width: 820px) {
  .nav-toggle { display: block; }

  .nav-links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    background: #164e73;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 12px 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links.nav-open { display: flex; }

  .nav-links > a,
  .nav-dropdown > .nav-link { border-radius: 6px; padding: 10px 12px; }

  .nav-dropdown { width: 100%; }
  .nav-dropdown > .nav-link::after { float: right; }

  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border-radius: 6px;
    background: rgba(0,0,0,0.18);
    margin: 4px 0;
    border: none;
    overflow: hidden;
  }
  .nav-dropdown.dd-open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a {
    color: rgba(255,255,255,0.82);
    border-left: none;
    padding-left: 24px;
  }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.1); color: white; }
  .nav-dropdown-menu .dd-label { color: rgba(255,255,255,0.45); }
  .nav-dropdown-menu .dd-divider { background: rgba(255,255,255,0.12); }
}

/* ══════════════════════════════════════════════════════ LAYOUT ══ */

.page      { max-width: 960px;  margin: 0 auto; padding: 32px 24px 80px; }
.page-wide { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

/* ══════════════════════════════════════════════════════ HERO ══ */

.hero {
  background: linear-gradient(135deg, #1A5F8A 0%, #0e3d5e 100%);
  color: white;
  border-radius: 14px;
  padding: 52px 48px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; top: -90px; right: -90px;
  width: 380px; height: 380px;
  background: rgba(44,168,224,0.1); border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: -50px; right: 110px;
  width: 200px; height: 200px;
  background: rgba(44,168,224,0.07); border-radius: 50%;
  pointer-events: none;
}
.hero-brand {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.5px;
  position: relative;
}
.hero-brand .ee { color: #2CA8E0; font-size: 0.7em; }
.hero-sub {
  color: rgba(255,255,255,0.68);
  font-size: 15px;
  margin-top: 6px;
  position: relative;
}
.hero-tagline {
  font-size: 21px;
  font-weight: 700;
  margin-top: 22px;
  max-width: 560px;
  line-height: 1.35;
  position: relative;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(44,168,224,0.22);
  border: 1px solid rgba(44,168,224,0.55);
  color: #a8dcf5;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 14px;
  position: relative;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
  position: relative;
}

/* ══════════════════════════════════════════════════════ BUTTONS ══ */

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-primary  { background: #2CA8E0; color: white; }
.btn-primary:hover { background: #239ccf; }
.btn-outline  { background: rgba(255,255,255,0.13); color: white; border: 1.5px solid rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.22); }
.btn-blue     { background: #1A5F8A; color: white; }
.btn-blue:hover { background: #16527a; }

/* ══════════════════════════════════════════════════════ CARDS ══ */

.card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1A5F8A;
  border-bottom: 2px solid #2CA8E0;
  padding-bottom: 8px;
  margin-bottom: 18px;
}
.section-label {
  font-size: 13px;
  font-weight: 700;
  color: #2CA8E0;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 6px;
}
.section-heading {
  font-size: 26px;
  font-weight: 700;
  color: #1A5F8A;
  margin-bottom: 6px;
}
.section-sub {
  color: #666;
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════ FEATURE GRID ══ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.feature-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 22px 22px 20px;
  border-top: 3px solid #2CA8E0;
}
.feature-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); transition: all 0.2s; }
.feature-icon { font-size: 28px; margin-bottom: 10px; height: 33px; display: flex; align-items: center; }
.feature-title { font-size: 14px; font-weight: 700; color: #1A5F8A; margin-bottom: 7px; }
.feature-desc  { font-size: 13px; color: #555; line-height: 1.55; }

/* ══════════════════════════════════════════════════════ TABLES ══ */

table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
thead tr { background: #1A5F8A; }
thead th { color: white; font-weight: 700; padding: 10px 14px; text-align: left; white-space: nowrap; }
tbody tr:nth-child(odd)  { background: #f8fafc; }
tbody tr:nth-child(even) { background: #eef3f8; }
td { padding: 9px 14px; vertical-align: middle; line-height: 1.4; }
.check   { color: #1ca84b; font-size: 17px; font-weight: 700; }
.cross   { color: #c0392b; font-size: 17px; }
.partial { color: #e6960c; font-size: 14px; font-weight: 600; }
.better  { color: #1A5F8A; font-weight: 700; }
.highlight-row td { background: #eaf4fb !important; border-top: 1px solid #c8e4f4; border-bottom: 1px solid #c8e4f4; }

/* ══════════════════════════════════════════════════════ NOTES ══ */

.note {
  background: #e8f3fb;
  border-left: 4px solid #2CA8E0;
  border-radius: 0 6px 6px 0;
  padding: 11px 16px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.55;
}
.warn {
  background: #fff8e8;
  border-left: 4px solid #e6960c;
  border-radius: 0 6px 6px 0;
  padding: 11px 16px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.55;
}
.label { font-weight: 700; margin-right: 5px; }

/* ══════════════════════════════════════════════════════ CODE ══ */

code {
  font-family: 'Courier New', Courier, monospace;
  background: #eef2f6;
  border: 1px solid #cdd8e4;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 13px;
  color: #1A5F8A;
  overflow-wrap: break-word;
}
pre {
  background: #1a2533;
  border-radius: 8px;
  padding: 18px 22px;
  overflow-x: auto;
  margin: 14px 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #c8d6e5;
}
pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.cm  { color: #6a9955; }   /* comment  */
.kw  { color: #569cd6; }   /* keyword  */
.st  { color: #ce9178; }   /* string   */
.fn  { color: #dcdcaa; }   /* function */
.py  { color: #9cdcfe; }   /* variable */
.nm  { color: #b5cea8; }   /* number   */

/* ══════════════════════════════════════════════════════ IFRAME CONTAINER ══ */

.iframe-wrap {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border: 1px solid #cdd8e4;
}
.iframe-wrap iframe {
  display: block;
  width: 100%;
  border: none;
  min-height: 85vh;
}

/* ══════════════════════════════════════════════════════ VERSION BAR ══ */

.version-bar {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 14px 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.version-bar label { font-weight: 700; color: #1A5F8A; font-size: 14px; white-space: nowrap; }
.version-bar select {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  border: 1px solid #cdd8e4;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background: #f8fafc;
  cursor: pointer;
}
.version-bar select:focus { outline: 2px solid #2CA8E0; outline-offset: 1px; }
.lang-pills { display: flex; gap: 8px; }
.lang-pill {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid #cdd8e4;
  color: #666;
  background: white;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.lang-pill.active { background: #1A5F8A; color: white; border-color: #1A5F8A; }
.lang-pill:hover:not(.active) { border-color: #2CA8E0; color: #1A5F8A; }

/* ══════════════════════════════════════════════════════ TUTORIAL LAYOUT ══ */

.tutorial-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.toc-sidebar {
  position: sticky;
  top: 80px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}
.toc-sidebar-header {
  background: #1A5F8A;
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 16px;
}
.toc-sidebar a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.13s;
  line-height: 1.35;
}
.toc-sidebar a:hover  { background: #f0f4f8; color: #1A5F8A; border-left-color: #b0d0e8; }
.toc-sidebar a.active { background: #eef4fb; color: #1A5F8A; border-left-color: #2CA8E0; font-weight: 600; }
.toc-sidebar a.h3 { padding-left: 28px; font-size: 12px; color: #888; }
.toc-divider { height: 1px; background: #eee; margin: 4px 0; }

/* Steps */
.steps { margin: 16px 0; }
.step  { display: flex; gap: 18px; margin-bottom: 22px; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: #1A5F8A;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
}
.step-body  { flex: 1; min-width: 0; }
.step-title { font-size: 15px; font-weight: 700; color: #1A5F8A; margin-bottom: 8px; }
.step-body p { margin: 6px 0; line-height: 1.55; }

/* ══════════════════════════════════════════════════════ TUTORIAL CARDS ══ */

.tutorial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.tutorial-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  border-top: 3px solid #1A5F8A;
  transition: all 0.2s;
  display: block;
}
.tutorial-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.14); transform: translateY(-3px); }
.tutorial-card-icon  { font-size: 32px; margin-bottom: 12px; display: block; }
.tutorial-card-logo  { display: block; margin-bottom: 12px; }
.tutorial-card-logo img { display: block; }

/* Inline-scaled version of the same 48px tutorial logo/badge markup, for
   compact contexts (e.g. the resource table on support.html). Keeps the
   logo defined once in tutorials/manifest.js as the single source of truth
   — this just clips+scales it down rather than re-defining a smaller asset. */
.tutorial-logo-inline {
  display: inline-block;
  width: 20px;
  height: 20px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}
.tutorial-logo-inline > * {
  display: block;
  transform: scale(0.4167);
  transform-origin: top left;
}
.tutorial-card-title { font-size: 16px; font-weight: 700; color: #1A5F8A; margin-bottom: 8px; }
.tutorial-card-desc  { font-size: 13px; color: #666; line-height: 1.55; }
.tutorial-card-tags  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.tag {
  background: #f0f4f8;
  color: #555;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid #cdd8e4;
}

/* ══════════════════════════════════════════════════════ CONTACT ══ */

.contact-hero {
  background: linear-gradient(135deg, #1A5F8A 0%, #0e3d5e 100%);
  border-radius: 14px;
  padding: 48px 44px;
  text-align: center;
  color: white;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: rgba(44,168,224,0.1); border-radius: 50%;
  pointer-events: none;
}
.contact-email-link {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: #2CA8E0;
  text-decoration: none;
  padding: 14px 28px;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(44,168,224,0.5);
  border-radius: 10px;
  margin-top: 20px;
  transition: all 0.15s;
  word-break: break-all;
}
.contact-email-link:hover { background: rgba(44,168,224,0.2); border-color: #2CA8E0; }

/* ══════════════════════════════════════════════════════ BUY CARDS ══ */

.shop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.shop-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 28px 28px 24px;
  text-align: center;
  border-bottom: 3px solid #2CA8E0;
}
.shop-card-name { font-size: 18px; font-weight: 700; color: #1A5F8A; margin-bottom: 8px; }
.shop-card-desc { font-size: 13px; color: #666; line-height: 1.55; margin-bottom: 18px; }
.shop-flag { font-size: 20px; margin-bottom: 6px; display: block; }

/* ══════════════════════════════════════════════════════ PHOTO STORY ══ */

.story-hint {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin: 0 0 16px;
}

.photo-stack-wrap {
  background: linear-gradient(180deg, #eef3f8 0%, #e4ecf4 100%);
  border-radius: 14px;
  padding: 10px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}

.photo-stack {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  touch-action: none;
}

.polaroid {
  position: absolute;
  width: clamp(110px, 15vw, 170px);
  background: white;
  padding: 8px 8px 10px;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  transform: rotate(var(--rot)) scale(var(--zoom, 1));
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.15s ease, transform 0.08s ease-out;
}
.polaroid:hover  { box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
.polaroid:focus-visible { outline: 3px solid #2CA8E0; outline-offset: 2px; }
.polaroid.dragging { cursor: grabbing; box-shadow: 0 16px 32px rgba(0,0,0,0.35); transition: none; }
.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.polaroid-cap {
  margin-top: 7px;
  font-size: 11px;
  font-style: italic;
  color: #555;
  text-align: center;
  line-height: 1.25;
  pointer-events: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.photo-stack-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 24px;
}

.stack-btn {
  background: white;
  border: 1.5px solid #cdd8e4;
  color: #1A5F8A;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
}
.stack-btn:hover { border-color: #2CA8E0; background: #f0f8fc; }

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,20,30,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 40px 20px;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-inner {
  max-width: 720px;
  width: 100%;
  text-align: center;
}
.lightbox-img-wrap {
  display: inline-block;
  max-width: 100%;
  max-height: 68vh;
  /* Was "hidden" — that clipped the zoomed-in image to its original
     unzoomed box. The wrap's layout size doesn't change when the image
     scales (transforms don't affect layout), so with overflow visible
     the picture genuinely grows on screen instead of being cropped. */
  overflow: visible;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  background: white;
  touch-action: none;
}
.lightbox-img-wrap img {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  padding: 10px;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.lightbox-img-wrap img.zoomed { cursor: grab; }
.lightbox-img-wrap img.zoomed.panning { cursor: grabbing; }
.lightbox-caption {
  color: white;
  font-size: 15px;
  margin-top: 16px;
  font-style: italic;
  transition: opacity 0.15s ease;
}
.lightbox-zoom-hint {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  margin-top: 8px;
  transition: opacity 0.15s ease;
}
/* While zoomed, the enlarged image can visually extend over the caption
   area below it — fade those out so they don't get overlapped. */
.lightbox.img-zoomed .lightbox-caption,
.lightbox.img-zoomed .lightbox-zoom-hint {
  opacity: 0;
  pointer-events: none;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 22px;
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  z-index: 5;
}
.lightbox-close:hover { color: #2CA8E0; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  font-size: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

/* ══════════════════════════════════════════════════════ BREADCRUMB ══ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #888;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.breadcrumb a { color: #2CA8E0; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #ccc; }

/* ══════════════════════════════════════════════════════ INLINE LIST ══ */

.content-body p { margin: 10px 0; line-height: 1.6; }
.content-body h2 { font-size: 20px; color: #1A5F8A; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #e0eaf2; }
.content-body h3 { font-size: 16px; color: #1A5F8A; margin: 20px 0 8px; }
.content-body ul, .content-body ol { margin: 10px 0 10px 22px; line-height: 1.65; }
.content-body li { margin: 4px 0; }

/* ══════════════════════════════════════════════════════ BRAND NAME ══ */

/* Usage anywhere in body text:
   <b class="gpib">GPIB</b><b class="gpibee-ee">EE</b>
   GPIB = bold near-black.  EE = bold blue, ~78% of surrounding font size. */
b.gpib      { font-weight: 700; color: #111;    font-style: normal; }
b.gpibee-ee { font-weight: 700; color: #2CA8E0; font-size: 0.78em; font-style: normal; vertical-align: baseline; }

/* Dark-background contexts — GPIB stays white */
.nav b.gpib,
.hero b.gpib,
.contact-hero b.gpib,
.buy-hero b.gpib,
thead b.gpib           { color: #fff; }

/* ══════════════════════════════════════════════════════ FOOTER ══ */

.footer {
  text-align: center;
  color: #aaa;
  font-size: 12px;
  padding: 12px 0 0;
  border-top: 1px solid #dde4ed;
  margin-top: 48px;
  line-height: 1.8;
}
.footer b.gpib      { color: #111;    font-weight: 700; }
.footer b.gpibee-ee { color: #2CA8E0; font-weight: 700; font-size: 0.78em; }
/* legacy selectors still referenced in some footers */
.footer .gpib   { color: #111;    font-weight: 700; }
.footer .gpibee { color: #2CA8E0; font-weight: 700; font-size: 0.78em; }

/* ══════════════════════════════════════════════════════ RESPONSIVE ══ */

@media (max-width: 768px) {
  .tutorial-layout { grid-template-columns: minmax(0, 1fr); }
  .content-body { min-width: 0; }
  .toc-sidebar { position: static; margin-bottom: 16px; }
  .toc-sidebar-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .toc-sidebar-header::after {
    content: '▸';
    font-size: 12px;
    transition: transform 0.15s ease;
  }
  .toc-sidebar.open .toc-sidebar-header::after { transform: rotate(90deg); }
  .toc-sidebar a, .toc-sidebar .toc-divider { display: none; }
  .toc-sidebar.open a, .toc-sidebar.open .toc-divider { display: block; }
  .hero { padding: 36px 28px; }
  .hero-brand { font-size: 42px; }
  .hero-tagline { font-size: 18px; }
  .hero-actions { margin-top: 22px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .card { padding: 22px 20px; }
  .contact-hero { padding: 36px 28px; }
  .contact-email-link { font-size: 17px; padding: 11px 20px; }
  .photo-stack { height: 760px; }
}
@media (max-width: 480px) {
  body { padding-top: 60px; }
  .page, .page-wide { padding: 18px 14px 60px; }
  .feature-grid { grid-template-columns: 1fr; }
  .photo-stack { height: 900px; }
  .polaroid { width: clamp(96px, 32vw, 130px); padding: 6px 6px 8px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
  .lightbox-close { top: 12px; right: 16px; font-size: 28px; }
  .hero { padding: 28px 20px; border-radius: 10px; }
  .hero-brand { font-size: 36px; }
  .hero-tagline { font-size: 16px; }
  thead th { font-size: 12px; padding: 8px 10px; }
  td { font-size: 13px; padding: 8px 10px; }
  .version-bar { flex-direction: column; align-items: stretch; }
  .lang-pills { justify-content: center; }
}