/* ==========================================================================
   content.css — global typography + long-form content + flash alerts
   Markup: applies to bare h1-h3/p tags site-wide (token-driven type scale),
   plus .otzivi-content (HtmlPurifier review body) and Bootstrap .alert
   (common\widgets\Alert in the shared layout).
   Notes:  scoped to .otzivi-scope to avoid clobbering legacy admin-only
   pages that aren't part of the redesign surface.
   ========================================================================== */

.otzivi-scope {
  background: var(--otzivi-bg);
  color: var(--otzivi-text);
  transition: background-color .2s ease, color .2s ease;
}

.otzivi-scope h1 {
  font-family: var(--otzivi-font-display);
  font-weight: var(--otzivi-fw-bold);
  font-size: var(--otzivi-fs-h1);
  line-height: var(--otzivi-lh-display);
  letter-spacing: var(--otzivi-ls-tight);
  color: var(--otzivi-text);
}
.otzivi-scope h2 {
  font-family: var(--otzivi-font-display);
  font-weight: var(--otzivi-fw-bold);
  font-size: var(--otzivi-fs-h2);
  line-height: var(--otzivi-lh-heading);
  letter-spacing: var(--otzivi-ls-tight);
  color: var(--otzivi-text);
}
.otzivi-scope h3 {
  font-family: var(--otzivi-font-base);
  font-weight: var(--otzivi-fw-semibold);
  font-size: var(--otzivi-fs-h3);
  color: var(--otzivi-text);
}
.otzivi-scope p {
  color: var(--otzivi-text);
  font-size: var(--otzivi-fs-body);
  line-height: var(--otzivi-lh-body);
}

/* theme/style.css's bare "h1,h2,h3,h4,h5,h6{color:#212121}" catch-all has no
   h4/h5/h6 override anywhere in this redesign, and links nested inside any
   heading don't inherit color from it — cover both globally. */
.otzivi-scope h4,
.otzivi-scope h5,
.otzivi-scope h6 {
  color: var(--otzivi-text);
}
.otzivi-scope h1 a,
.otzivi-scope h2 a,
.otzivi-scope h3 a,
.otzivi-scope h4 a,
.otzivi-scope h5 a,
.otzivi-scope h6 a {
  color: inherit;
}

/* .page-title (theme/style.css:309) hardcodes background-color: #f3f3f3 on
   every page's title band — fix globally here instead of per-page, since
   every view uses this bare legacy class, not just the ones that also add
   .otzivi-page-title. */
.otzivi-scope .page-title {
  background: var(--otzivi-surface-soft);
  border-bottom: 1px solid var(--otzivi-border);
}
.otzivi-scope .page-title .breadcrumb a { color: var(--otzivi-primary); }
.otzivi-scope .page-title .breadcrumb .active { color: var(--otzivi-text-muted); }

.otzivi-content {
  color: var(--otzivi-text);
  font-size: var(--otzivi-fs-body);
  line-height: var(--otzivi-lh-prose);
  max-width: 75ch;
}
.otzivi-content p { margin-bottom: var(--otzivi-space-16); }
.otzivi-content a { color: var(--otzivi-primary); }
.otzivi-content blockquote {
  border-left: 3px solid var(--otzivi-primary);
  padding-left: var(--otzivi-space-16);
  color: var(--otzivi-text-muted);
}

/* ── Sidebar categories widget ────────────────────────────── */
/* Shared .otzivi-sidebar-widget .categories-list markup used by /company,
   /blog, /blog/top and the blog detail sidebar. theme/style.css's
   ".categories-widget ul a span"/"...a:hover span" hardcode a light-blue pill
   (#e6eff9, no dark-mode variant) and an orange hover fill (#ff6600) with
   white text, with enough specificity to survive a color-only override —
   leaving muted-gray text on legacy orange on hover, unreadable. Own both
   states fully here instead. */
.otzivi-sidebar-widget .categories-list {
  border-left: 3px solid var(--otzivi-border);
}
.otzivi-sidebar-widget .categories-list li a {
  color: var(--otzivi-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--otzivi-space-12);
  /* theme/style.css's own ".categories-widget ul a" has padding-left:30px to
     clear the list's left accent border — our padding shorthand zeroed that
     out (3-class selector outranks its 1-class one), leaving link text flush
     against the stripe. Keep left breathing room explicitly. */
  padding: var(--otzivi-space-8) 0 var(--otzivi-space-8) var(--otzivi-space-16);
  margin-left: -3px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--otzivi-border);
  transition: border-color .2s ease, color .2s ease;
}
.otzivi-sidebar-widget .categories-list li:last-child a {
  border-bottom: none;
}
.otzivi-sidebar-widget .categories-list li.active a,
.otzivi-sidebar-widget .categories-list li a:hover {
  color: var(--otzivi-primary);
  border-left-color: var(--otzivi-primary);
}
.otzivi-sidebar-widget .categories-list .count {
  display: inline-flex;
  align-items: center;
  padding: var(--otzivi-space-4) var(--otzivi-space-12);
  border-radius: var(--otzivi-radius-pill);
  background: var(--otzivi-surface-soft);
  color: var(--otzivi-text-muted);
  font-size: var(--otzivi-fs-label);
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.otzivi-sidebar-widget .categories-list li a:hover .count,
.otzivi-sidebar-widget .categories-list li.active .count {
  background: var(--otzivi-primary-button);
  color: #fff;
}

.alert {
  border-radius: var(--otzivi-radius-sm);
  border: 1px solid var(--otzivi-border);
  padding: var(--otzivi-space-16);
}
.alert-success { background: var(--otzivi-surface-soft); color: var(--otzivi-success); border-color: var(--otzivi-success); }
.alert-danger  { background: var(--otzivi-surface-soft); color: var(--otzivi-danger); border-color: var(--otzivi-danger); }
.alert-warning { background: var(--otzivi-surface-soft); color: var(--otzivi-accent-hover); border-color: var(--otzivi-accent); }
.alert-info    { background: var(--otzivi-surface-soft); color: var(--otzivi-primary); border-color: var(--otzivi-primary); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .otzivi-scope h1 { font-size: var(--otzivi-fs-h1-sm); }
  .otzivi-scope h2 { font-size: var(--otzivi-fs-h2-sm); }
  .otzivi-scope h3 { font-size: var(--otzivi-fs-h3-sm); }
}