/*
Theme Name: Domotz Blog
Theme URI: https://blog.domotz.com
Author: Domotz
Description: Blog theme sharing the "Modern Authority" design system of the Domotz Help Center theme (help.domotz.com) — same tokens, Inter + Space Grotesk, header/footer shell, dark-gradient hero and article typography — with blog-specific templates (editorial home, card-grid archives, author box, tags, related posts). Styling is a self-contained, locally compiled Tailwind build (assets/css/tailwind.css). Replaces Divi on blog.domotz.com.
Version: 1.1.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: domotz-blog
*/

/*
  Supplements only. The design system (tokens, preflight, utilities,
  .article-content, .img-transform, .bg-grid, .text-gradient, line-clamp,
  fade-up) ships pre-compiled in assets/css/tailwind.css — built locally from
  this theme's own files with the project's exact tokens, so it is byte-for-byte
  faithful to the Next.js reference with NO remote/CDN dependency.

  Below: only the few pieces that aren't Tailwind utilities — the JS lightbox
  overlay and WordPress' pagination markup.
*/

/*
  Sticky-header offset. The desktop header is two stacked rows (h-16 + h-14 =
  120px). Anchored headings and the sticky TOC rail must clear it so their tops
  aren't hidden under the menu when scrolled.
*/
html { scroll-padding-top: 8rem; }                 /* native + smooth anchor jumps */
.article-content :is(h2, h3, .article-heading) {
  scroll-margin-top: 8rem;
}
@media (min-width: 1024px) {
  .dz-toc-rail {
    top: 8rem;                                       /* was top-28 (7rem) → clipped */
    max-height: calc(100vh - 9.5rem);
  }
}

/* image lightbox overlay (theme.js) */
.dz-lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgb(0 0 0 / 0.85);
  padding: 1rem; backdrop-filter: blur(4px);
}
.dz-lightbox img { max-height: 88vh; max-width: 100%; cursor: zoom-out; border-radius: 0.5rem; object-fit: contain; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6); }
.dz-lightbox .dz-lightbox-cap { margin-top: 0.75rem; max-width: 42rem; text-align: center; font-size: 0.875rem; color: rgb(255 255 255 / 0.7); }
.dz-lightbox-close {
  position: absolute; right: 1rem; top: 1rem; display: flex; height: 2.5rem; width: 2.5rem;
  align-items: center; justify-content: center; border-radius: 9999px; border: 0;
  background: rgb(255 255 255 / 0.1); color: #fff; cursor: pointer;
}
.dz-lightbox-close:hover { background: rgb(255 255 255 / 0.2); }

/* WordPress paginate_links() output */
.dz-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; padding: 0.4rem 0.65rem; border-radius: 0.6rem;
  border: 1px solid hsl(var(--border)); color: hsl(var(--foreground));
  font-weight: 600; text-decoration: none; transition: all 0.15s ease;
}
.dz-pagination a.page-numbers:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.dz-pagination .page-numbers.current {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary));
}
.dz-pagination .page-numbers.dots { border-color: transparent; }


/* ------------------------------------------------------------------
   Blog-only supplements (Gutenberg content inside .article-content).
   The core block library CSS stays enqueued on the blog; these rules
   align its output with the Help Center typography.
   ------------------------------------------------------------------ */
.article-content figure { margin-left: 0; margin-right: 0; }
.article-content figcaption,
.article-content .wp-element-caption {
  margin-top: 0.5rem; text-align: center; font-size: 0.85rem; color: hsl(var(--muted-foreground));
}
.article-content .aligncenter { margin-left: auto; margin-right: auto; }
.article-content .alignleft  { float: left;  margin: 0.3em 1.5em 1em 0; }
.article-content .alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.article-content::after { content: ""; display: table; clear: both; }

/* Responsive video / iframe embeds (YouTube, Vimeo, Wistia…) */
.article-content iframe { max-width: 100%; border: 0; border-radius: 0.75rem; }
.article-content .wp-block-embed__wrapper { position: relative; }
.article-content .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.article-content .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Gutenberg buttons → theme primary pill */
.article-content .wp-block-button__link {
  display: inline-flex; border-radius: 9999px; background: hsl(var(--primary));
  color: hsl(var(--primary-foreground)); padding: 0.6rem 1.4rem; font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow-glow-primary);
}
.article-content .wp-block-button__link:hover { filter: brightness(1.1); }
.article-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.article-content hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 2.5em 0; }
.article-content h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-top: 1.4em; }
.article-content blockquote p + p { margin-top: 0.6em; }
.article-content :not(pre) > code { background: hsl(var(--secondary)); padding: 0.1em 0.35em; border-radius: 0.3rem; }
.article-content thead th { background: hsl(var(--secondary)); font-weight: 600; }

/* Avatars from get_avatar() */
img.avatar { object-fit: cover; }

/* Screen-reader text (WP core class used by paginate_links & plugins) */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* ------------------------------------------------------------------
   Legacy Divi Builder content (rendered by inc/divi-compat.php)
   ------------------------------------------------------------------ */
.article-content .dz-et-box {
  border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card));
  padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm);
}
.article-content .dz-et-box > * + * { margin-top: 0.75em; }
.article-content .dz-et-box h3 { margin-top: 0; }
.article-content .dz-et-blurb-img { max-width: 4.5rem; border-radius: 0.5rem; }
.article-content .dz-et-toggle {
  border: 1px solid hsl(var(--border)); border-radius: 0.75rem; padding: 0.75rem 1rem; background: hsl(var(--card));
}
.article-content .dz-et-toggle summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); }
.article-content .dz-et-toggle[open] summary { margin-bottom: 0.6rem; }
.article-content .dz-et-toggle > div > * + * { margin-top: 0.8em; }
.article-content .dz-et-toggle + .dz-et-toggle { margin-top: 0.5rem; }
.article-content .dz-et-gallery {
  display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.article-content .dz-et-gallery img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.article-content cite { font-style: normal; font-size: 0.9em; font-weight: 600; color: hsl(var(--foreground)); }

/* Author box bio (keeps authors' own formatting) */
.dz-author-bio > * + * { margin-top: 0.6em; }
.dz-author-bio strong { color: hsl(var(--foreground)); font-weight: 600; }
.dz-author-bio a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }

/* Boxes built in the editor (columns / groups with a background), e.g. the
   hand-made "Table of contents" box: card look, no double rules, tight rhythm. */
.article-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.article-content .wp-block-column { flex: 1 1 0; min-width: 0; }
.article-content .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
.article-content .wp-block-column.has-background,
.article-content .wp-block-group.has-background {
  border-radius: 1rem; border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-sm);
}
.article-content :is(.wp-block-column, .wp-block-group) > * + * { margin-top: 0.9em; }
.article-content :is(.wp-block-column, .wp-block-group) :is(h2, h3) {
  margin-top: 0; padding-bottom: 0; border-bottom: 0;
}
.article-content .wp-block-separator { margin: 1.25em 0; }
.article-content .wp-block-column .wp-block-buttons { margin-top: 1.25em; }
.article-content .wp-block-button__width-100 { width: 100%; }
.article-content .wp-block-button__width-100 .wp-block-button__link { width: 100%; justify-content: center; }
.article-content .no-border-radius.wp-block-button__link { border-radius: 0.6rem; }
@media (max-width: 781px) {
  .article-content .wp-block-column[style*="flex-basis"] { flex-basis: 100% !important; }
}

/* Article featured image: full width, natural height, capped so very tall
   images don't push the text below the fold (contained, never cropped). */
.dz-hero-img { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: contain; margin: 0 auto; }