/* Drake KB — per-article PRODUCT BADGE (grey pill with the product logo).
 *
 * Rendered by badge.php, which wraps the theme's core/post-title block and the
 * badge in `.drake-title-row`:
 *
 *   <div class="drake-title-row">
 *     <div class="drake-title-cell"><h1 class="wp-block-post-title">…</h1></div>
 *     <div class="drake-product-badge" data-product="Drake Tax"><img …></div>
 *   </div>
 *
 * SCOPE DISCIPLINE: everything below is scoped to .drake-title-row /
 * .drake-product-badge. The <h1> itself is owned by title.css (smaller mixed-case
 * blue title with a blue left bar) and is NOT restyled here — the row only
 * neutralises the h1's default block margins so the two cells line up.
 */

.drake-title-row {
  display: flex;
  align-items: flex-start;      /* badge tops align with the title's first line */
  justify-content: space-between;
  gap: 20px;
  /* Inherit the vertical rhythm the title block used to own on its own. */
  margin: 6px 0 10px;
}

/* ALIGN WITH THE ARTICLE BODY, NOT THE PAGE.
 *
 * The title block and the article body are siblings inside the same
 * .wp-block-column, but the body below splits itself into
 * `.drake-doc-main` + a 240px `.drake-right-rail` with a 20px gap
 * (right-rail.css, not ours to change). The title row has no such split, so a
 * right-aligned badge would float over the rail column and read as part of the
 * rail's card stack instead of the title.
 *
 * Reserving rail-width + gap on the row's right edge lands the badge flush with
 * the article body's right edge, which is where the source KB puts it. The
 * :has() guard means the inset only applies when a rail is actually present, so
 * a rail-less doc view still uses the full width. Keep the 260px in sync with
 * right-rail.css's `flex: 0 0 240px` + `gap: 20px` if those ever change.
 */
.wp-block-column:has(.drake-right-rail) .drake-title-row {
  /* Was 260px (full rail width + gap), which squeezed the title cell to ~537px
   * and forced titles like "Drake Tax Online - Drake SmartExtract TM (Beta)"
   * (653px of text) onto two lines. The badge is right-aligned inside the row
   * anyway, so only a modest inset is needed to keep it clear of the rail. */
  padding-right: 24px;
}

/* The title cell takes all remaining width; min-width:0 lets long titles wrap
 * instead of forcing the flex row wider than the content column. */
.drake-title-cell {
  flex: 1 1 auto;
  min-width: 0;
}

/* The h1 keeps its own look (title.css) but must not add margins inside the
 * row, or the badge would drift out of alignment with the first line. */
.drake-title-cell > .wp-block-post-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * The pill
 * ------------------------------------------------------------------------- */
.drake-product-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  /* White, not --drake-bg-alt: the page canvas is now grey (layout.css), so a
   * grey pill read as a muddy grey-on-grey box. The logos are also supplied as
   * dark-on-transparent PNGs, which need a light backing to stay legible. */
  background: var(--drake-bg, #ffffff);
  border: 1px solid var(--drake-line, #d9dde1);
  border-radius: 8px;
  /* Never let a wide logo (e.g. DrakePortals_309x47) push into the right rail. */
  max-width: 230px;
  box-sizing: border-box;
}

.drake-product-badge img {
  display: block;
  height: auto;
  max-height: 34px;
  max-width: 100%;
  width: auto;
  /* Beat the theme/BetterDocs' global `img { width: 100% }`-style rules, which
   * would otherwise stretch a small logo to the pill's full width. */
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Narrow viewports: stack the badge under the title rather than squeezing the
 * title into a sliver. Below the tablet breakpoint the pill is not worth the
 * vertical space at all, so it is hidden (it is decorative — the product is
 * already named in the breadcrumb).
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Below this breakpoint right-rail.css stacks the rail under the article, so
   * there is no rail column left to reserve room for. */
  .wp-block-column:has(.drake-right-rail) .drake-title-row {
    padding-right: 0;
  }
  .drake-title-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .drake-title-cell {
    flex: 1 1 100%;
  }
  .drake-product-badge {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .drake-product-badge {
    display: none;
  }
}

@media print {
  .drake-product-badge {
    border-color: #ccc;
    background: none;
  }
}