/* Public blog: Actipro-inspired full-entry stream, expressed with the FCS Radzen theme.
 *
 * Surfaces here are derived from --rz-base-background-color, never from --rz-base-100/200/300.
 * In the standard palette that numbered ramp is a FIXED light scale — standard-dark ships the same
 * near-white values — so anything painted with it stayed light on a dark page, which is what made
 * the whole blog surface render light in dark mode. --rz-base-background-color and --rz-text-color
 * do invert, so mixing the two gives a surface that tracks the theme in both directions.
 *
 * Text follows the same rule. --rz-on-* names mean "ink to put ON that colour", so
 * --rz-on-base-lighter is dark in BOTH themes (#262526 light, #19191a dark) — widget headers and
 * footers written with it stayed near-black on the dark surface. --rz-text-color and
 * --rz-text-secondary-color / --rz-text-tertiary-color are the ones that invert.
 *
 * Note also that --rz-border-normal is a BORDER SHORTHAND (`width solid colour`), not a colour:
 * write `border: var(--rz-border-normal)`, never `border: 1px solid var(--rz-border-normal)`. */
:where(.blog-public-layout, .blog-content-surface, .rz-body:has(> .blog-content-surface)) {
  --blog-surface: color-mix(in srgb, var(--rz-base-background-color) 96%, var(--rz-text-color));
  --blog-surface-deep: color-mix(in srgb, var(--rz-base-background-color) 92%, var(--rz-text-color));
}

.blog-public-layout,
.blog-content-surface {
  --blog-title-color: color-mix(in srgb, var(--rz-text-title-color) 88%, var(--rz-base-background-color));
  --blog-copy-color: color-mix(in srgb, var(--rz-text-color) 86%, var(--rz-base-background-color));
  --blog-muted-color: color-mix(in srgb, var(--rz-text-tertiary-color) 84%, var(--rz-base-background-color));
  --blog-heading-color: var(--rz-text-title-color);
  --blog-heading-hover-color: var(--rz-text-color);
  --blog-heading-font: "Slabo 27px", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--blog-copy-color);
  font-family: var(--rz-text-font-family, "Source Sans Pro", "Segoe UI", sans-serif);
}

.blog-public-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 7%, var(--rz-primary-lighter), transparent 30rem),
    linear-gradient(145deg, var(--blog-surface-deep), var(--blog-surface) 34rem, var(--blog-surface-deep));
  background-attachment: fixed;
}

/* PortalLayout contributes only its header and collapsible left navigation. Its body relinquishes
   the normal portal padding/background so the shared blog surface starts at the same inset and uses
   the same page treatment as the public layout. */
.rz-body:has(> .blog-content-surface) {
  padding: 0;
  background:
    radial-gradient(circle at 88% 7%, var(--rz-primary-lighter), transparent 30rem),
    linear-gradient(145deg, var(--blog-surface-deep), var(--blog-surface) 34rem, var(--blog-surface-deep));
  background-attachment: fixed;
}

.blog-public-body {
  flex: 1 0 auto;
}

.blog-shell {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

.blog-archive-page {
  padding-block: 3rem 6rem;
}

.blog-archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 3.15fr) minmax(15.5rem, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.blog-stream {
  min-width: 0;
}

.blog-filter-header,
.blog-stream-empty,
.blog-stream-entry,
.blog-widget {
  background: color-mix(in srgb, var(--rz-base-background-color) 94%, transparent);
  border: var(--rz-border-normal);
  border-radius: var(--rz-border-radius);
  box-shadow: var(--rz-shadow-1);
}

.blog-filter-header {
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.5rem;
}

.blog-filter-header h1,
.blog-stream-empty h1,
.blog-not-found h1 {
  margin: 0;
  color: var(--blog-heading-color);
  font-family: var(--blog-heading-font);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.05;
}

.blog-stream-empty {
  min-height: 24rem;
  display: grid;
  place-items: center;
}

.blog-stream-entry {
  overflow: hidden;
  margin-bottom: 1.5rem;
  scroll-margin-top: 1.25rem;
}

.blog-stream-entry > header {
  padding: 1.5rem 1.75rem 0.75rem;
}

.blog-entry-title-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: var(--rz-border-normal);
}

.blog-stream-entry h1,
.blog-stream-entry h2 {
  flex: 1 1 auto;
  margin: 0;
  color: var(--blog-heading-color);
  font-family: var(--blog-heading-font);
  font-size: clamp(1.45rem, 2.7vw, 1.85rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: normal;
  text-wrap: balance;
}

.blog-stream-entry h1 {
  color: var(--blog-heading-color);
  font-size: clamp(1.8rem, 3.7vw, 2.5rem);
}

.blog-stream-entry h1 a,
.blog-stream-entry h2 a {
  color: inherit;
  text-decoration: none;
}

.blog-stream-entry h1 a:hover,
.blog-stream-entry h1 a:focus-visible,
.blog-stream-entry h2 a:hover,
.blog-stream-entry h2 a:focus-visible {
  color: var(--blog-heading-hover-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-entry-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-top: 0.2rem;
}

.blog-entry-tools a {
  width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  color: var(--rz-primary);
  border-radius: 50%;
  text-decoration: none;
}

.blog-entry-tools .rz-icon {
  font-size: 1.3rem;
}

.blog-linkedin-mark {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.blog-entry-tools a:hover,
.blog-entry-tools a:focus-visible {
  color: var(--rz-primary-dark);
  background: var(--rz-primary-lighter);
  outline: none;
}

.blog-entry-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0.6rem 0 0;
  color: var(--blog-muted-color);
  font-size: 0.84rem;
  line-height: 1.4;
}

.blog-entry-meta time {
  flex: 0 0 auto;
  text-align: end;
}

.blog-single-summary {
  max-width: 46rem;
  margin: 1rem 0 0;
  color: var(--blog-copy-color);
  font-size: 1.05rem;
  line-height: 1.55;
}

.blog-entry-content {
  max-width: none;
  padding: 1.75rem;
  color: var(--blog-copy-color);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
}

.blog-entry-content > :first-child {
  margin-top: 0;
}

.blog-entry-content > :last-child {
  margin-bottom: 0;
}

.blog-entry-content p {
  margin-block: 0 1.35rem;
}

.blog-entry-content h1,
.blog-entry-content h2,
.blog-entry-content h3,
.blog-entry-content h4 {
  color: var(--blog-heading-color);
  font-family: var(--blog-heading-font);
  font-weight: 300;
  letter-spacing: normal;
}

.blog-entry-content h2 {
  margin-block: 2.5rem 0.85rem;
  font-size: 1.45rem;
  line-height: 1.3;
}

.blog-entry-content h3 {
  margin-block: 2rem 0.75rem;
  font-size: 1.2rem;
}

.blog-entry-content a {
  color: var(--rz-primary);
}

.blog-entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rz-border-radius);
  box-shadow: var(--rz-shadow-1);
}

.blog-entry-content .wiki-video-player {
  overflow: hidden;
  margin: 1.75rem 0;
  background: var(--blog-surface);
  border: var(--rz-border-normal);
  border-radius: var(--rz-border-radius);
  box-shadow: var(--rz-shadow-1);
}

.blog-entry-content .wiki-video-player video {
  display: block;
  width: 100%;
  max-height: 72vh;
  margin: 0;
  background: var(--blog-surface);
  border-radius: 0;
  box-shadow: none;
}

.blog-entry-content blockquote {
  margin: 2rem 0;
  padding: 0.3rem 0.25rem 0.3rem 1.25rem;
  color: var(--blog-title-color);
  border-inline-start: 3px solid var(--rz-primary);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.55;
}

.blog-entry-content li::marker {
  color: var(--rz-primary);
}

.blog-entry-footer {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.75rem;
  background: var(--blog-surface);
  border-top: var(--rz-border-normal);
  color: var(--rz-text-secondary-color);
}

.blog-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.blog-entry-tags:empty {
  display: none;
}

.blog-entry-tags a {
  padding: 0.18rem 0.45rem;
  color: var(--rz-primary);
  background: var(--rz-primary-lighter);
  border-radius: var(--rz-border-radius);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-entry-tags a:hover,
.blog-entry-tags a:focus-visible {
  color: var(--rz-on-primary);
  background: var(--rz-primary);
}

/* Sidebar widgets */
.blog-sidebar {
  display: grid;
  gap: 1rem;
}

.blog-widget {
  overflow: hidden;
  padding: 1.15rem;
}

.blog-widget h2 {
  margin: -1.15rem -1.15rem 1rem;
  padding: 0.7rem 1rem;
  color: var(--rz-text-secondary-color);
  background: var(--blog-surface);
  border-bottom: var(--rz-border-normal);
  font-family: var(--blog-heading-font);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.05;
}

.blog-widget p {
  margin: 0;
  color: var(--blog-copy-color);
  font-size: 0.86rem;
  line-height: 1.55;
}

.blog-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.blog-search .rz-textbox {
  min-width: 0;
  width: 100%;
}

.blog-search .rz-button {
  min-width: var(--rz-input-height);
  padding-inline: 0.65rem;
}

.blog-widget-rss,
.blog-widget-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: var(--rz-primary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-widget-rss:hover,
.blog-widget-rss:focus-visible,
.blog-widget-link:hover,
.blog-widget-link:focus-visible {
  color: var(--rz-primary-dark);
}

/* The cloud itself is the shared FcsTagCloud (layout and sizes in fcs-theme.css); the blog only
   colours the hover and the selected tag its own way. */
.blog-tag-cloud a:hover,
.blog-tag-cloud a:focus-visible,
.blog-tag-cloud a.active {
  color: var(--blog-title-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-year-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1rem;
}

.blog-year-list a {
  display: inline-flex;
  justify-content: flex-start;
  gap: 0.3rem;
  padding-block: 0.25rem;
  color: var(--rz-primary);
  font-size: 0.9rem;
  text-decoration: none;
}

.blog-year-list a strong {
  font-weight: 700;
}

.blog-year-list a span {
  color: var(--blog-muted-color);
  font-weight: 400;
}

.blog-year-list a:hover,
.blog-year-list a:focus-visible,
.blog-year-list a.active {
  color: var(--blog-title-color);
  text-decoration: underline;
}

/* Numeric archive pagination */
.blog-number-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2rem;
}

.blog-number-pagination a,
.blog-number-pagination span {
  min-width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  padding-inline: 0.45rem;
  color: var(--blog-copy-color);
  background: var(--rz-base-background-color);
  border: var(--rz-border-normal);
  border-radius: var(--rz-border-radius);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.blog-number-pagination a:hover,
.blog-number-pagination a:focus-visible,
.blog-number-pagination .current {
  color: var(--rz-on-primary);
  background: var(--rz-primary);
  border-color: var(--rz-primary);
}

.blog-number-pagination .disabled,
.blog-number-pagination .ellipsis {
  color: var(--blog-muted-color);
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

/* Single article */
.blog-single-entry {
  margin-bottom: 0;
}

.blog-article-content {
  font-size: 1.04rem;
  line-height: 1.76;
}

.blog-article-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rz-border-normal);
}

.blog-article-pagination-slot {
  min-height: 7rem;
}

.blog-article-pagination-slot + .blog-article-pagination-slot {
  border-inline-start: var(--rz-border-normal);
}

.blog-article-pagination a {
  min-height: 7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem 1.5rem;
  color: inherit;
  text-decoration: none;
}

.blog-article-pagination-next {
  text-align: end;
}

.blog-article-pagination span {
  color: var(--blog-muted-color);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-article-pagination strong {
  margin-top: 0.45rem;
  color: var(--blog-title-color);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.blog-article-pagination a:hover strong,
.blog-article-pagination a:focus-visible strong {
  color: var(--rz-primary);
}

.blog-not-found,
.blog-loading {
  min-height: 32rem;
  display: grid;
  place-items: center;
}

/* Footer. Not mixed further toward the surface: the footer is already de-emphasised by position,
   and mixing dropped it to 3.7:1 against its own background, under WCAG AA. */
.blog-public-footer {
  flex: 0 0 auto;
  color: var(--rz-text-secondary-color);
  background: var(--blog-surface);
  border-top: var(--rz-border-normal);
}

.blog-footer-inner {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
}

.blog-footer-inner nav {
  display: flex;
  gap: 1.5rem;
}

.blog-footer-inner a {
  color: inherit;
  text-decoration: none;
}

.blog-footer-inner a:hover,
.blog-footer-inner a:focus-visible {
  color: var(--rz-primary);
}

@media (max-width: 900px) {
  .blog-archive-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .blog-shell {
    width: min(100% - 1.5rem, 1180px);
  }

  .blog-archive-page {
    padding-block: 1.5rem 4.5rem;
  }

  .blog-stream-entry > header,
  .blog-entry-content {
    padding: 1.25rem;
  }

  .blog-entry-title-row {
    gap: 0.65rem;
  }

  .blog-entry-tools {
    gap: 0.15rem;
  }

  .blog-entry-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .blog-entry-meta time {
    text-align: start;
  }

  .blog-entry-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.8rem 1.25rem;
  }

  .blog-sidebar {
    grid-template-columns: 1fr;
  }

  .blog-article-pagination {
    grid-template-columns: 1fr;
  }

  .blog-article-pagination-slot + .blog-article-pagination-slot {
    border-top: var(--rz-border-normal);
    border-inline-start: 0;
  }

  .blog-article-pagination-next {
    text-align: start;
  }

  .blog-footer-inner {
    min-height: 7rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-public-layout *,
  .blog-public-layout *::before,
  .blog-public-layout *::after {
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.blog-public-layout) {
    scroll-behavior: smooth;
  }
}