/* ==========================================================================
   Tool shell — shared app bar for the standalone PEMIX tool pages
   (ROI calculators, Protocol advisors). These pages live under /tools/,
   are not linked anywhere in the site nav, and use this shell instead of
   the normal site header/footer so they read as a standalone digital tool
   rather than part of the marketing site.
   ========================================================================== */

:root {
  --dripem-darkest-green: #1D3F1F;
  --dripem-dark-green: #28592B;
  --dripem-mid-green: #448B43;
  --dripem-light-green: #63BA64;
  --dripem-beige: #ECE0D3;
  --bg-white: #ffffff;
}

* { box-sizing: border-box; }

.dripem-tool-body {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  background: #f3f6f3;
}

/* 3 column grid: left content, a centered slot (used by the partner logo
   when present), and a matching empty column on the right so the center
   slot lands at the true middle of the bar, not just the middle of
   whatever the left content happens to take up. */
.dripem-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 12px 24px;
  background: var(--bg-white);
  border-bottom: 1px solid #e4ece1;
  position: sticky;
  top: 0;
  z-index: 40;
}

.dripem-toolbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dripem-toolbar__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.dripem-toolbar__logo {
  height: 28px;
  width: auto;
  display: block;
}

.dripem-toolbar__divider {
  width: 1px;
  height: 24px;
  background: #dfe8df;
  flex-shrink: 0;
}

.dripem-toolbar__product {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.dripem-toolbar__product-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--dripem-darkest-green);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dripem-toolbar__product-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--dripem-mid-green);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.02em;
}

.dripem-toolbar__product-sub {
  font-size: 10.5px;
  color: #7a8a77;
  margin-top: 1px;
}

.dripem-toolbar__tool-tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dripem-mid-green);
  background: #eaf5ea;
  border: 1px solid #c9e3c8;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.dripem-tool-main {
  padding-block: 4px;
}

@media (max-width: 560px) {
  .dripem-toolbar {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 10px 14px;
    column-gap: 10px;
  }
  .dripem-toolbar__left {
    flex-wrap: wrap;
    gap: 10px;
  }
  .dripem-toolbar__tool-tag {
    margin-left: 0;
    order: 3;
    width: 100%;
    text-align: center;
  }
  .dripem-toolbar__logo {
    height: 24px;
  }
}