/* Zadex base styles shared by every widget. Kept tiny on purpose. */
.zadex {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}
.zadex *,
.zadex *::before,
.zadex *::after {
  box-sizing: border-box;
}
.zadex img {
  max-width: 100%;
  height: auto;
}

/* ---- Theme resets ------------------------------------------------------------------------------
   Zero-specificity baselines (:where) for the markup our widgets render, so a theme's element rules
   (button, ul, figure, h2 ...) do not leak in while every widget's own class still wins (widget
   style.css files are bundled after this file). Markup that WordPress produces inside a widget
   (sidebar, shortcode, html, rich text, WooCommerce widgets = `.woocommerce` roots) keeps the theme's styling on purpose. Typography is inherited.
   Themes that colour buttons with `button:not(:hover):not(.has-text-color):not(.has-background)` (0,3,1,
   Twenty Twenty-One and friends) are skipped because every widget <button> carries the WordPress convention
   classes `has-text-color has-background`; `button:hover` (0,1,1) is answered by each widget's own
   `:is(:hover, :active)` rule. See docs/WIDGET-GUIDE.md "Buttons and theme CSS". */
.zadex :where(button, [type='button'], [type='submit'], [type='reset']):where(:not(:where(.zx-sidebar, .zx-shortcode, .zx-html, .zx-text, .woocommerce) *)) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
/* Themes draw a focus outline on every `button:focus` (0,1,1), i.e. also after a mouse click. Widget buttons
   keep only the keyboard ring (their own :focus-visible rules). */
.zadex :where(button, [type='button'], [type='submit'], [type='reset']):where(:not(:where(.zx-sidebar, .zx-shortcode, .zx-html, .zx-text, .woocommerce) *)):focus:not(:focus-visible) {
  outline: none;
}
/* Lists that belong to a widget (icon list ...) carry a zx- class: no theme bullets, indent or margins. */
.zadex :where(ul[class*='zx-'], ol[class*='zx-']) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.zadex :where(ul[class*='zx-'], ol[class*='zx-']) > :where(li) {
  margin: 0;
  padding: 0;
}
/* Media widgets use <figure>: drop the browser/theme figure margins. */
.zadex :where(figure):where(:not(:where(.zx-sidebar, .zx-shortcode, .zx-html, .zx-text, .woocommerce) *)) {
  margin: 0;
}
.zadex :where(figure) > :where(img) {
  border-style: none;
}
/* Only the heading widget loses the theme's heading margins (gap is a container setting); headings
   inside other widgets or rich text keep the theme rhythm. */
.zadex :where(.zx-heading) {
  margin: 0;
}

/* Page panel > "Hide page title" (body class from Frontend::body_class / the canvas): hides the theme's
   title markup around the content, never anything inside the Zadex document. */
body.zadex-hide-title :is(.wp-block-post-title, .entry-title, .page-title):not(.zadex *) {
  display: none;
}