/* ==========================================================================
   Wissensbank content blocks

   The shapes an article keeps needing — a summary, a note, a picture beside a
   paragraph, a product recommendation, questions, a comparison — as blocks an
   editor picks from the inserter. They are registered as block patterns in
   wp-theme/farmula-redesign/inc/patterns.php; this file is what makes them
   look like the rest of the design.

   Not a Figma frame. The design draws the article template, not the components
   inside a post body, so these follow the design's tokens and its one-square-
   corner card motif rather than a drawing.

   Loaded in three places, which is why every var() carries its value as a
   fallback and no rule leans on a token being defined:

     - the frontend of a redesigned page, after home.css
     - the frontend of a page the redesign has not taken over, alone
     - the block editor's canvas, through add_editor_style()

   Spacing between blocks is deliberately absent: on an article .article__text
   is a flex column with a 24px gap, and in the editor the block list spaces
   its children itself. A margin here would be added on top of both.
   ========================================================================== */

.wb-key,
.wb-note,
.wb-split,
.wb-product,
.wb-faq,
.wb-table {
  font-family: var(--font-body, "DM Sans", sans-serif);
  color: var(--dark-grey, #3b3a47);
}

/* Descendant selectors, not child ones: this WordPress renders a core/group as
   an outer div wrapping a .wp-block-group__inner-container, so a "> h3" under
   .wb-key matches nothing at all. The block markup a classic theme produces is
   one level deeper than the markup the editor saves. */

/* the design's heading face, at the size the cart boxes use for a card title */
.wb-key h3,
.wb-note h3,
.wb-split h3,
.wb-product h3 {
  margin: 0 0 16px;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  color: var(--blue, #29265d);
}

.wb-key p,
.wb-note p,
.wb-split p,
.wb-product p,
.wb-faq p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

/* --- Das Wichtigste in Kürze ---------------------------------------------
   The summary an article opens with. A lilac slab, since a reader scanning
   for it should find it without reading the paragraph above.
   ------------------------------------------------------------------------ */

.wb-key {
  padding: 32px;
  background: var(--light-blue, #efecf9);
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) var(--radius-card, 24px) 0;
}
.wb-key ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
  font-size: 18px;
  line-height: 26px;
}
.wb-key li + li { margin-top: 8px; }
/* the only green in the block: enough to tie it to the rest of the page */
.wb-key li::marker { color: var(--green, #00a687); }

/* --- Hinweis --------------------------------------------------------------
   A white card with an accent edge. Add wb-note--warn in the block's Advanced
   settings for the red edge, which is the one to use when getting it wrong
   costs an animal rather than a euro.
   ------------------------------------------------------------------------ */

.wb-note {
  padding: 24px 32px;
  background: #fff;
  border: 1px solid var(--light-blue, #efecf9);
  border-left: 8px solid var(--green, #00a687);
  border-radius: 0 var(--radius-card, 24px) var(--radius-card, 24px) 0;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(34, 36, 36, 0.04), 0 2px 2px rgba(34, 36, 36, 0.04));
}
.wb-note--warn { border-left-color: var(--red, #fb1b13); }
.wb-note h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 30px;
}

/* --- Bild + Text ----------------------------------------------------------
   Two core columns rather than a flex group: a group's saved markup has
   changed shape twice across WordPress releases, a column's has not.
   ------------------------------------------------------------------------ */

/* The row is declared here rather than left to core's block-library CSS: the
   shop's performance plugin strips stylesheets it thinks a page does not need,
   and a two-column block that quietly becomes one column is exactly the kind
   of regression nobody reports. */
.wb-split,
.wb-product {
  display: flex;
  align-items: center;
  gap: 40px;
}
/* basis 0 so the columns split the row evenly; a column that carries its own
   width — the product image at 240px — sets flex-basis inline and wins */
.wb-split > .wp-block-column,
.wb-product > .wp-block-column {
  flex: 1 1 0%;
  min-width: 0;
}
/* a column the editor gave a width to keeps it: without this the basis is a
   starting point and flex-grow eats the rest of the row anyway */
.wb-split > .wp-block-column[style*="flex-basis"],
.wb-product > .wp-block-column[style*="flex-basis"] {
  flex-grow: 0;
}
.wb-split figure,
.wb-product figure { margin: 0; }
.wb-split img,
.wb-product img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) var(--radius-card, 24px) 0;
}

/* --- Produkt-Empfehlung ---------------------------------------------------
   The one block that sells something. Same slab as the summary, so an article
   reads as two kinds of box rather than five.
   ------------------------------------------------------------------------ */

.wb-product {
  padding: 32px;
  background: var(--light-blue, #efecf9);
  border-radius: var(--radius-card, 24px) var(--radius-card, 24px) var(--radius-card, 24px) 0;
  gap: 32px;
}
.wb-product .wp-block-buttons { margin-top: 24px; }
.wb-product .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-btn, 4px);
  background: var(--green, #00a687);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-decoration: none;
}

/* --- Häufige Fragen -------------------------------------------------------
   One core/details block per question. The home page's FAQ animates its
   answers open with script.js; an article's does not, because the markup an
   editor produces has to keep working without a script that knows its shape.
   ------------------------------------------------------------------------ */

.wb-faq {
  border-bottom: 1px solid var(--divider, #e1def3);
}
.wb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--blue, #29265d);
}
.wb-faq summary::-webkit-details-marker { display: none; }
/* drawn rather than an asset: this stylesheet also runs inside the editor,
   where a relative asset path resolves against wp-admin */
.wb-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 30px;
  color: var(--green, #00a687);
}
.wb-faq[open] summary::after { content: "–"; }
.wb-faq p { padding-bottom: 20px; }

/* --- Vergleichstabelle ----------------------------------------------------
   Scrolls inside its own figure: three columns of prose do not fit 402px, and
   a table that widens the page breaks every other block on it.
   ------------------------------------------------------------------------ */

.wb-table {
  margin: 0;
  overflow-x: auto;
}
.wb-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  line-height: 26px;
}
.wb-table th,
.wb-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--divider, #e1def3);
}
.wb-table th {
  background: var(--light-blue, #efecf9);
  font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  color: var(--blue, #29265d);
}
/* No rule bolds the first column. It reads well on a comparison the design
   drew, and wrong on the tables the knowledge base actually has, where the
   first cell is as often a footnote as a row label. */

/* --- Vorgeschlagene Produkte ----------------------------------------------
   Where an article's [products] shortcode lands, once the theme has pointed
   WooCommerce's loop at the design's card (inc/article-products.php). The
   card itself is the shop grid's flow variant — home.css scopes that variant
   to .shop__grid and .wb-products alike — so this only lays out the grid:
   the shop's 364px column, of which two fit the 960px article column and one
   fits 402px, so neither case needs its own rule.
   ------------------------------------------------------------------------ */

.wb-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, 364px);
  gap: 24px;
}
/* the shortcode arrives wrapped in WooCommerce's own container, which brings
   a list's indent with it and has nothing else to say here */
.fm-products,
.wb-products + .woocommerce,
.article__text .woocommerce { margin: 0; padding: 0; }
.article__text .woocommerce::after { content: none; }

/* --- 402px ----------------------------------------------------------------
   Core stacks columns at 781px on its own. The design's break is 900, and
   between the two the mobile layout is a stretched 402 — so stack there too,
   or a split block keeps two columns while everything around it has one.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* one fluid column: a fixed 364px track would overflow the phone's
     article column by a hair, the flow card is happy at any width */
  .wb-products { grid-template-columns: 100%; }

  .wb-split,
  .wb-product {
    flex-wrap: wrap;
    gap: 24px;
  }
  .wb-split > .wp-block-column,
  .wb-product > .wp-block-column {
    flex-basis: 100% !important;
  }
  .wb-key,
  .wb-product { padding: 24px; }
  .wb-note { padding: 20px 24px; }
}