/* NibLog public styles. Override the custom properties from the host stylesheet to match your brand. */
/* Defaults use :where() so they have zero specificity: any ".niblog { --niblog-accent: ... }" rule in the host wins,
   no matter which stylesheet loads first. */
:where(.niblog) {
  --niblog-accent: #2f5d8a;
  --niblog-accent-hover: #1f4468;
  --niblog-text: #1f2937;
  --niblog-muted: #6b7280;
  --niblog-border: #e5e7eb;
  --niblog-surface: #ffffff;
  --niblog-surface-alt: #f9fafb;
  --niblog-max-width: 46rem;
}
.niblog { color: var(--niblog-text); line-height: 1.65; }
.niblog h1, .niblog h2, .niblog h3, .niblog h4, .niblog h5 { color: var(--niblog-text); }
.niblog a { color: var(--niblog-accent); text-decoration: none; }
.niblog a:hover { color: var(--niblog-accent-hover); text-decoration: underline; }
.niblog-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* List */
.niblog-list { max-width: var(--niblog-max-width); margin: 0 auto; }
.niblog-list__header { margin-bottom: 2rem; }
.niblog-list__title { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; }
.niblog-list__intro { color: var(--niblog-muted); font-size: 1.1rem; margin: 0; }
.niblog-list__back { margin: .5rem 0 0; }
.niblog-list__empty { color: var(--niblog-muted); padding: 2rem 0; }
.niblog-list__items { display: grid; gap: 1.5rem; }
.niblog-card { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--niblog-border); border-radius: 1rem; background: var(--niblog-surface); }
@media (min-width: 640px) { .niblog-card:has(.niblog-card__media) { grid-template-columns: 12rem 1fr; } }
.niblog-card__media img { display: block; width: 100%; height: 100%; max-height: 14rem; object-fit: cover; border-radius: .75rem; }
.niblog-card__title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0 0 .35rem; }
.niblog-card__title a { color: inherit; }
.niblog-card__meta { color: var(--niblog-muted); font-size: .9rem; margin: 0 0 .75rem; }
.niblog-card__excerpt { margin: 0 0 .75rem; }
.niblog-card__more { margin: .5rem 0 0; font-weight: 600; }
.niblog-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.niblog-tags a { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--niblog-surface-alt); border: 1px solid var(--niblog-border); font-size: .85rem; }
.niblog-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--niblog-border); }
.niblog-pagination__status { color: var(--niblog-muted); font-size: .9rem; }

/* Post */
.niblog-post { max-width: var(--niblog-max-width); margin: 0 auto; }
.niblog-post__header { margin-bottom: 1.5rem; }
.niblog-post__breadcrumb { font-size: .9rem; margin: 0 0 .5rem; }
.niblog-post__title { font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin: 0 0 .75rem; }
.niblog-post__meta { color: var(--niblog-muted); font-size: .95rem; margin: 0 0 .75rem; }
.niblog-post__hero { margin: 0 0 2rem; }
.niblog-post__hero img { display: block; width: 100%; height: auto; border-radius: 1rem; }
.niblog-post__footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--niblog-border); }
.niblog-preview-banner { max-width: var(--niblog-max-width); margin: 0 auto 1.5rem; padding: .75rem 1rem; border-radius: .75rem; background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; }
.niblog-preview-banner a { margin-left: .5rem; font-weight: 600; }

/* Rendered Markdown */
.niblog-content { font-size: 1.05rem; overflow-wrap: anywhere; }
.niblog-content > :first-child { margin-top: 0; }
.niblog-content p, .niblog-content ul, .niblog-content ol, .niblog-content blockquote, .niblog-content pre, .niblog-content table { margin: 0 0 1.25rem; }
.niblog-content h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; margin: 2.25rem 0 .75rem; }
.niblog-content h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 1.75rem 0 .5rem; }
.niblog-content h4, .niblog-content h5 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.niblog-content ul { list-style: disc; padding-left: 1.5rem; }
.niblog-content ol { list-style: decimal; padding-left: 1.5rem; }
.niblog-content li { margin: .25rem 0; }
.niblog-content a { text-decoration: underline; }
.niblog-content img { display: block; max-width: 100%; height: auto; border-radius: .75rem; margin: 1.5rem auto; }
.niblog-content p:has(> .niblog-image:only-child) { margin: 0; }
.niblog-content .niblog-image { display: block; max-width: 100%; margin: 1.5rem auto; color: inherit; text-decoration: none; }
.niblog-content .niblog-image:hover { text-decoration: none; }
.niblog-content .niblog-image:focus-visible { outline: 3px solid var(--niblog-accent); outline-offset: 4px; border-radius: .75rem; }
.niblog-content .niblog-image img { width: 100%; max-width: none; margin: 0; }
.niblog-content .niblog-image--small { width: 18rem; }
.niblog-content .niblog-image--medium { width: 30rem; }
.niblog-content .niblog-image--full { width: 100%; }
.niblog-content .niblog-image--zoom img { cursor: zoom-in; }
.niblog-content::after { display: block; clear: both; content: ""; }
@media (min-width: 700px) {
  .niblog-content .niblog-image--left { float: left; margin: .35rem 1.5rem 1rem 0; }
  .niblog-content .niblog-image--right { float: right; margin: .35rem 0 1rem 1.5rem; }
  .niblog-content h2, .niblog-content h3, .niblog-content h4, .niblog-content h5, .niblog-content hr { clear: both; }
}
.niblog-content blockquote { border-left: 4px solid var(--niblog-accent); padding: .25rem 0 .25rem 1rem; color: var(--niblog-muted); font-style: italic; }
.niblog-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--niblog-surface-alt); border: 1px solid var(--niblog-border); border-radius: .3rem; padding: .05rem .3rem; }
.niblog-content pre { background: var(--niblog-surface-alt); border: 1px solid var(--niblog-border); border-radius: .75rem; padding: 1rem; overflow-x: auto; }
.niblog-content pre code { background: none; border: 0; padding: 0; }
.niblog-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.niblog-content th, .niblog-content td { border: 1px solid var(--niblog-border); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.niblog-content th { background: var(--niblog-surface-alt); font-weight: 600; }
.niblog-content hr { border: 0; border-top: 1px solid var(--niblog-border); margin: 2rem 0; }
.niblog-byline { white-space: nowrap; }

/* Dependency-free image lightbox. Without JavaScript the image link still opens the original. */
.niblog-lightbox { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); padding: 0; overflow: visible; border: 0; border-radius: .75rem; background: #111827; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.niblog-lightbox::backdrop { background: rgba(15, 23, 42, .82); backdrop-filter: blur(2px); }
.niblog-lightbox__image { display: block; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); width: auto; height: auto; object-fit: contain; border-radius: .75rem; }
.niblog-lightbox__close { position: absolute; top: .6rem; right: .6rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 0; cursor: pointer; }
.niblog-lightbox__close::before, .niblog-lightbox__close::after { position: absolute; top: 50%; left: 50%; width: .85rem; height: 2px; border-radius: 999px; background: currentColor; content: ""; }
.niblog-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.niblog-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.niblog-lightbox__close:hover { background: #0f172a; }
.niblog-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }