/* Blog-specific styles, layered on top of the site's /style.css.
   Reuses the site palette: #1a73e8 blue, #202124 ink, #5f6368 muted. */

.breadcrumb { font-size: 12.5px; color: #5f6368; margin: 0 0 18px; }
.breadcrumb a { color: #1a73e8; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

article h1 { font-size: 27px; line-height: 1.25; margin: 0 0 10px; color: #202124; }
article h2 { margin-top: 34px; }
article h3 { margin-top: 22px; }
article p { margin: 14px 0; }
article ul, article ol { margin: 14px 0; }
article li { margin-bottom: 6px; }
article a { font-weight: 500; }

.post-meta { font-size: 13px; color: #5f6368; margin: 0 0 22px; }
.lead { font-size: 17px; color: #3c4043; line-height: 1.6; }

/* callout / note box */
.callout {
  background: #e8f0fe; border: 1px solid #d2e3fc; border-left: 4px solid #1a73e8;
  border-radius: 8px; padding: 14px 16px; margin: 20px 0; font-size: 14.5px;
}
.callout.warn { background: #fef7e0; border-color: #feefc3; border-left-color: #f9ab00; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* comparison table */
.table-wrap { overflow-x: auto; margin: 20px 0; }
table.cmp { border-collapse: collapse; width: 100%; font-size: 14px; }
table.cmp th, table.cmp td { border: 1px solid #e0e0e0; padding: 10px 12px; text-align: left; vertical-align: top; }
table.cmp thead th { background: #f1f3f4; font-weight: 600; }
table.cmp tbody th { background: #f8f9fa; font-weight: 600; }
table.cmp td.yes { color: #137333; font-weight: 600; }
table.cmp td.no { color: #c5221f; }

/* FAQ (accordion) */
.faq { margin: 24px 0; }
.faq details {
  border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 10px;
  background: #fff; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px;
  list-style: none; color: #202124;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:before { content: "＋"; color: #1a73e8; margin-right: 10px; font-weight: 700; }
.faq details[open] summary:before { content: "－"; }
.faq details > p { margin: 0 16px 14px; color: #3c4043; }

/* CTA box */
.cta-box {
  background: linear-gradient(135deg, #1a73e8, #174ea6); color: #fff;
  border-radius: 12px; padding: 26px 24px; margin: 34px 0; text-align: center;
}
.cta-box h3 { color: #fff; margin: 0 0 8px; font-size: 19px; }
.cta-box p { margin: 0 0 16px; opacity: 0.92; font-size: 15px; }
.cta-box .cta { margin-top: 0; }

/* share bar */
.share { margin-top: 36px; border-top: 1px solid #e0e0e0; padding-top: 20px; }
.share h2 { font-size: 16px; margin: 0 0 12px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-buttons a, .share-buttons button {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #dadce0; border-radius: 999px; background: #fff;
  color: #3c4043; font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 14px; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.share-buttons a:hover, .share-buttons button:hover { border-color: #1a73e8; color: #1a73e8; background: #e8f0fe; }
.share-buttons svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.share-copy.copied, .share-copy.copied:hover { border-color: #137333; color: #137333; background: #e6f4ea; }

/* related posts */
.related { margin-top: 40px; border-top: 1px solid #e0e0e0; padding-top: 20px; }
.related h2 { font-size: 16px; margin-top: 0; }
.related ul { padding-left: 18px; }

/* post cards (blog index) */
.post-list { display: grid; gap: 18px; margin-top: 8px; }
.post-card {
  border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px 22px; background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.post-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.post-card .tag {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: #1a73e8;
  background: #e8f0fe; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.post-card h2 { margin: 0 0 6px; font-size: 18px; }
.post-card h2 a { color: #202124; text-decoration: none; }
.post-card h2 a:hover { color: #1a73e8; }
.post-card .excerpt { margin: 0 0 10px; color: #3c4043; font-size: 14.5px; }
.post-card .read-more { font-weight: 600; font-size: 14px; text-decoration: none; }