/* Shared styles that are awkward to express as Tailwind utility strings. */

/* Header dropdown menus (desktop) */
.dropdown {
  position: absolute; left: -0.75rem; top: 100%; min-width: 15rem;
  padding: 0.5rem 0; margin-top: 0.5rem;
  background: #fffaf0; border: 1px solid #ddd0b3; border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }
.group:hover > .dropdown, .group:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 0.45rem 1rem; color: #334155; white-space: nowrap; }
.dropdown a:hover { background: #f1e7d0; color: #0e7490; }

/* Blog article figures: diagrams are drawn on white, so frame them */
.article-figure { margin: 2rem 0; }
.article-figure img { width: 100%; height: auto; border-radius: 0.75rem; background: #fff; border: 1px solid #1e293b; }
.article-figure figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: #94a3b8; text-align: center; }

/* Tables inside articles (legacy "custom embed" tables) */
.article-table { overflow-x: auto; margin: 1.75rem 0; border: 1px solid #1e293b; border-radius: 0.75rem; }
.article-table table { margin: 0 !important; width: 100%; font-size: 0.875rem; }
.article-table th { background: #111827; color: #e2e8f0; padding: 0.75rem 1rem !important; text-align: left; vertical-align: bottom; }
.article-table td { padding: 0.7rem 1rem !important; vertical-align: top; border-top: 1px solid #1e293b; }
.article-table tbody tr:nth-child(even) td { background: rgba(17, 24, 39, 0.5); }

/* Cover image on cards */
.card-cover { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; object-position: top; background: #fff; }
.article-table td { color: #cbd5e1; }
.article-table td strong { color: #fff; }
.article-table a { color: #06b6d4; }

/* Code samples in articles: compact so typical 90-col lines fit the column */
.prose pre { font-size: 0.78rem !important; line-height: 1.55 !important; padding: 1.1rem 1.25rem !important; }
.prose pre code { font-size: inherit !important; }