/* guides.css — shared styles for /guides/ (hub + articles).
   Loaded with an ABSOLUTE path (/css/guides.css): guides live in nested directories
   (/guides/<slug>/index.html), so a relative "css/..." href would resolve to
   /guides/<slug>/css/... and 404. about.html and gdl-guide.html use relative paths
   because they sit at the web root — do not copy that pattern here.
   Deliberately NOT in server/index.js VERSIONED (guides are not served through
   serveHtmlWithHashes, so the rewrite would never fire) and NOT in sw.js PRECACHE
   (unversioned + precached is the 2026-08-07 stale-bytes trap, and these pages have
   no offline value). It is served max-age=3600, must-revalidate. */

.gd-intro { font-size: .93rem; color: #444; line-height: 1.7; margin: 0 0 6px; }
.gd-intro strong { color: #1a1a2e; }

.gd-reviewed { font-size: .76rem; color: #6b6b6b; margin: 0 0 18px; line-height: 1.6; }
.gd-reviewed a { color: #0b57d0; }

.gd-h2 {
  font-size: 1.05rem; color: #003580; margin: 26px 0 10px;
  padding-bottom: 6px; border-bottom: 2px solid #e8edf5;
}
.gd-h3 { font-size: .95rem; color: #1a1a2e; margin: 18px 0 6px; }

.gd-body p { font-size: .89rem; color: #444; line-height: 1.75; margin: 0 0 12px; }
.gd-body ul, .gd-body ol { margin: 0 0 14px; padding-left: 22px; }
.gd-body li { font-size: .89rem; color: #444; line-height: 1.7; margin-bottom: 7px; }
.gd-body a { color: #0b57d0; font-weight: 600; }

/* Quick-answers table — scrolls on narrow screens instead of breaking the layout */
.gd-tablewrap { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.gd-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 320px; }
.gd-table caption {
  caption-side: top; text-align: left; font-size: .78rem; color: #6b6b6b;
  padding-bottom: 6px; font-style: italic;
}
.gd-table th, .gd-table td {
  border: 1px solid #e2e8f2; padding: 8px 10px; text-align: left; vertical-align: top;
}
.gd-table th { background: #f5f8fc; color: #003580; font-weight: 700; }
.gd-table td strong { color: #1a1a2e; }

.gd-callout {
  background: #f5f8fc; border-left: 4px solid #003580; border-radius: 0 8px 8px 0;
  padding: 12px 14px; margin: 0 0 16px;
}
.gd-callout p { font-size: .86rem; color: #444; line-height: 1.7; margin: 0; }
.gd-callout p + p { margin-top: 8px; }
.gd-callout strong { color: #003580; }

/* E-E-A-T / sources block */
.gd-eeat {
  background: #fafbfd; border: 1px solid #e8edf5; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 18px;
}
.gd-eeat p { font-size: .83rem; color: #555; line-height: 1.7; margin: 0 0 9px; }
.gd-eeat p:last-child { margin-bottom: 0; }
.gd-eeat strong { color: #1a1a2e; }
.gd-eeat a { color: #0b57d0; }
.gd-sources { margin: 0 0 10px; padding-left: 20px; }
.gd-sources li { font-size: .82rem; color: #555; line-height: 1.65; margin-bottom: 5px; }

/* Related links */
.gd-related { display: grid; gap: 8px; margin: 0 0 18px; }
.gd-related a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: #fff; border: 1px solid #e2e8f2; border-radius: 10px;
  padding: 11px 13px; transition: border-color .15s, transform .15s;
}
.gd-related a:hover { border-color: #003580; transform: translateY(-1px); }
.gd-related .gd-rel-ico { font-size: 1.15rem; flex: 0 0 auto; }
.gd-related .gd-rel-t { display: flex; flex-direction: column; }
.gd-related strong { font-size: .87rem; color: #003580; }
.gd-related span.gd-rel-s { font-size: .78rem; color: #666; line-height: 1.5; }

/* CTA */
.gd-cta {
  background: linear-gradient(135deg, #003580, #0055a5); border-radius: 12px;
  padding: 18px 16px; text-align: center; margin: 20px 0 6px;
}
.gd-cta .gd-cta-title { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.gd-cta .gd-cta-sub { color: rgba(255,255,255,.85); font-size: .8rem; margin: 0 0 12px; }
.gd-cta-btn {
  display: inline-block; background: #fff; color: #003580; font-weight: 700;
  font-size: .9rem; padding: 10px 22px; border-radius: 9px; text-decoration: none;
}
.gd-cta-btn:hover { background: #f0f4fa; }

/* Hub grid */
.gd-hub-grid { display: grid; gap: 10px; margin: 0 0 20px; }
.gd-hub-card {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid #e2e8f2; border-radius: 12px; padding: 14px 15px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.gd-hub-card:hover {
  border-color: #003580; transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,53,128,.08);
}
.gd-hub-card strong {
  display: block; font-size: .92rem; color: #003580; margin-bottom: 5px; line-height: 1.45;
}
.gd-hub-card span { display: block; font-size: .82rem; color: #555; line-height: 1.65; }

/* FAQ (details/summary) */
.gd-faq { margin: 0 0 18px; }
.gd-faq details {
  border: 1px solid #e2e8f2; border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
  background: #fff;
}
.gd-faq summary {
  font-size: .88rem; font-weight: 700; color: #003580; cursor: pointer; line-height: 1.5;
}
.gd-faq details p { font-size: .86rem; color: #444; line-height: 1.7; margin: 9px 0 0; }

@media (min-width: 640px) {
  .gd-hub-grid { grid-template-columns: 1fr 1fr; }
  .gd-related { grid-template-columns: 1fr 1fr; }
}