/* ==========================================================================
   Navigation - Mega Menu
   Font: Poppins

   BetterRX 2026 Header (phase-012): Will's `NEW 2026 Navigation` CSS, with
   only the tablet fixes changed — all of them in the Responsive section
   below, each marked "phase-012 T<n>" — the logo's size (dev-011), and
   where a dropdown opens (phase-014 Task 12).
   ========================================================================== */

/* Task 17b addendum 3 A (2026-10-21): the theme's element rules stop at the header's edge. CLEAN styles bare elements
   (li margin-bottom 15px: Technology's links 31 px apart; ul/ol padding; a:hover/a:focus navy; button and heading
   type), and on launch night this header also renders inside the old templates (route (a), 71 pages + 190 posts). So
   one reset for those element types inside the header; :where() keeps it at one class, and every rule below that
   names an element on purpose still wins. */
.brx-nav :where(ul, ol, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brx-nav :where(p, h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

.brx-nav :where(a),
.brx-nav :where(a):hover,
.brx-nav :where(a):focus {
  text-decoration: none;
}

.brx-nav :where(button) {
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.brx-nav {
  --brx-orange-1: #ef7b52;
  --brx-orange-2: #f4a37e;
  --brx-orange-dark: #e05f36;
  --brx-navy: #1c2b3a;
  --brx-text: #24262b;
  --brx-text-muted: #6b6f76;
  --brx-border: #f6d7c8;
  --brx-bg: #ffffff;
  --brx-radius-lg: 20px;
  --brx-radius-md: 14px;
  --brx-radius-sm: 10px;
  --brx-shadow: 0 20px 45px -20px rgba(224, 95, 54, 0.28), 0 2px 10px rgba(20, 20, 30, 0.06);

  /* Round 023, operator addenda 1 and 2 (Lex, 2026-10-21: "type color especially for bold text is not consistent
     throughout nav dropdowns ... we need true consistency"; "I'd use the same shape, the same text size ... full rounded
     corners"). The six panels were built at different times, each with its own text sizes and colours, button and
     spacing. Every one of those values is now one of these tokens, set here once; no rule below writes its own number,
     so no panel can drift again (evidence/dev-023/type/type023.cjs checks one value per role across the panels).
     Weights are the faces the site loads (300/500/700/800): no Poppins 600 face is loaded (T17-21), so 600 was drawn at
     700 and is written 700. Item label and description: Molly's mockup (.item b, .item span); the button: her .formcta. */
  /* text roles */
  --brx-t-top-size: 14px;          /* top-level label (Lex: 500) */
  --brx-t-top-weight: 500;
  --brx-t-top-lh: 24px;
  --brx-t-top-color: #596170;
  --brx-t-head-size: 15px;         /* group heading: Technology's products, Pharmacy Network's segments (today's coral) */
  --brx-t-head-weight: 700;
  --brx-t-head-lh: 1.3;
  --brx-t-head-ls: 0.01em;
  --brx-t-head-color: #e3846a;
  --brx-t-item-size: 15px;         /* item label, in every panel (on a photo card: --brx-t-on-photo) */
  --brx-t-item-weight: 700;
  --brx-t-item-lh: 1.5;
  --brx-t-item-color: #24333f;
  --brx-t-on-photo: #ffffff;
  --brx-t-desc-size: 13px;         /* item description */
  --brx-t-desc-weight: 400;
  --brx-t-desc-lh: 1.4;
  --brx-t-desc-color: #5f5f5f;     /* round 025 (OV 024 LOW-5): was #666, 4.30:1 on the pressed fill; now 4.78 */
  /* the button: the site's (css/brx-2026-system.css, --brx-btn-*: round 023 addendum 5), read with fallbacks below.
     States, for every item, button and trigger (addendum 4): hover = the taupe fill (a pointer only), pressed = a
     deeper taupe (also on phones), keyboard focus = the taupe fill and a 2 px navy ring (never removed) */
  --brx-item-press: #f9d9c0;
  --brx-focus: #24333f;
  /* spacing rhythm */
  --brx-sp-panel: 24px;            /* the card's padding */
  --brx-sp-item-y: 10px;           /* an item's padding (its hover background's edge) */
  --brx-sp-item-x: 12px;           /* ... and the inset every text, heading and button lines up on */
  --brx-sp-item-gap: 0px;          /* between two items in a column: their paddings make 20 px between texts */
  --brx-sp-col-gap: 24px;          /* between two columns of items */
  --brx-sp-desc: 2px;              /* label to its description */
  --brx-sp-head-above: 2px;        /* a group heading's top */
  --brx-sp-head-below: 8px;        /* a group heading to its first item */
  --brx-sp-rule: 12px;             /* around a divider between two groups */
  --brx-sp-btn-above: 16px;        /* the last item to the button */
  --brx-sp-tile-gap: 12px;         /* between Who We Serve's photo tiles */
  --brx-panel-radius: 24px;        /* the dropdown card */
  --brx-item-radius: 10px;
  --brx-item-hover: #fdebda;
  --brx-nav-line: #dee2e5;

  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  background: var(--brx-bg);
  position: relative;
  z-index: 999;
  border-bottom: 1px solid #f1f1f3;
  -webkit-tap-highlight-color: transparent;
}

.brx-nav * {
  box-sizing: border-box;
}

.brx-nav__bar {
  /* round 012: the bar sits on the page frame of the 2026 pages (css/brx-2026-system.css): its content is at most
     --brx-page-max wide and the logo / last button sit on the gutter, like every section's edge. Without the tokens
     (other templates): 1280px and 32px, as before. */
  max-width: calc(var(--brx-page-max, 1216px) + 2 * var(--brx-page-gutter, 32px));
  margin: 0 auto;
  padding: 18px var(--brx-page-gutter, 32px);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ---------------- Logo ---------------- */
.brx-nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/* phase-012 dev-011: the logo's box comes from the image field's width and
   height attributes, so it has its final size before the image arrives
   (module.js measures the bar as soon as the page is parsed). This was
   `height: 36px; width: auto` (30px on phones), but the theme's
   `img { height: auto !important }` beat those heights, so live the logo
   always showed at its image's own size (125 x 53). And `width: auto` threw
   the width attribute away, so until the image loaded the logo was 0 x 0. */
.brx-nav__logo img {
  display: block;
  height: auto;
}

.brx-nav__logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brx-orange-1), var(--brx-orange-2));
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}

/* ---------------- Primary menu ---------------- */
.brx-nav__menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.brx-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.brx-nav__item {
  position: static;
  /* Reset theme's global `li { margin-bottom: 15px }`, which pushes
     trigger text above the bar's vertical center. */
  margin: 0;
}

.brx-nav__trigger {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--brx-t-top-size);
  line-height: var(--brx-t-top-lh);
  white-space: nowrap;
  font-weight: var(--brx-t-top-weight); /* Lex, 2026-10-21: "make top level links not bold" (Molly's mockup: 500); was 600 */
  color: var(--brx-t-top-color);
  padding: 10px 2px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
  touch-action: manipulation;
}

/* round 023 (addendum 4): one state set for the six. Hover (a pointer that hovers: with a mouse it also opens the menu,
   module.js), open and pressed: the coral label, and the caret turns while open; keyboard focus: the navy ring. */
@media (hover: hover) {
  .brx-nav__trigger:hover {
    color: var(--brx-orange-dark);
  }
}

.brx-nav__item.is-open .brx-nav__trigger,
.brx-nav__trigger[aria-expanded="true"],
.brx-nav__trigger:active {
  color: var(--brx-orange-dark);
}

.brx-nav .brx-nav__trigger:focus-visible {
  outline: 2px solid var(--brx-focus);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: none;
}

/* Task 17b addendum 1 (Lex, 2026-10-21: "we should add carets"): a 10 px chevron 6 px after each label, as Molly's
   mockup draws it; it turns over while its menu is open. Desktop only: the ☰ menu keeps its + / -. Drawn only while
   the bar has room for them (module.js, fitCarets: .brx-nav--carets); without the script, none. */
.brx-nav__caret {
  display: none;
}

.brx-nav--carets .brx-nav__caret {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.brx-nav__item.is-open .brx-nav__caret {
  transform: rotate(180deg);
}

/* ---------------- Dropdown panels ---------------- */
.brx-panel {
  position: absolute;
  left: 0;
  right: 0;
  /* .brx-nav__item is `position: static`, so this panel is positioned
     relative to .brx-nav (the whole bar), not the individual <li> — on
     purpose, since the panel needs to span/center under the full bar, not
     just the trigger. But that leaves a dead zone between the bottom of
     the trigger button (short, vertically centered in the taller bar) and
     top: 100% here (the bar's own bottom edge): moving the cursor straight
     down through that gap exits the <li>'s hover box and fires
     mouseleave — closing the menu before the cursor ever reaches the
     panel. Pulling the box up by BRIDGE and padding it back down by the
     same amount bridges that gap with real (if invisible while closed)
     hoverable area, without moving the visible card at all. */
  --brx-panel-bridge: 28px;
  top: calc(100% - var(--brx-panel-bridge));
  padding-top: var(--brx-panel-bridge);
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  /* round 023 (addendum 4): a closed card is also hidden, so Tab never walks into links nobody can see (they were in the
     Tab order, invisible: measured live, 6 of 6 triggers); visibility waits out the fade */
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  z-index: 20;
}

.brx-nav__item.is-open .brx-panel {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

/* phase-014 Task 12: the card opens under its own item. The panel above spans
   the whole header, so centring the card in it put every dropdown in the
   middle of the page, whichever item was hovered. module.js measures on each
   open and moves the panel there, kept inside the bar's padding (the logo's
   and the buttons' edges). Round 025 Addendum 5: the panel moves, not the card
   inside it, and takes the card's width (--brx-panel-left, --brx-panel-width),
   so an open dropdown's box is its card and the bridge above it, not the
   header's full width (a pointer leaving the card sideways left it open).
   Without the script the panel spans the header and centres the card, as
   before. Desktop only: below 1200px the panels are the ☰ menu's accordion and
   keep their own layout. */
@media (min-width: 1200px) {
  .brx-panel {
    left: var(--brx-panel-left, 0px);
    right: auto;
    width: var(--brx-panel-width, 100%);
  }
}

.brx-panel__inner {
  background: var(--brx-bg);
  border: 1px solid var(--brx-border);
  border-radius: var(--brx-panel-radius);
  box-shadow: var(--brx-shadow);
  padding: var(--brx-sp-panel);
  margin-top: 14px;
  display: flex;
  gap: var(--brx-sp-btn-above);
}

/* Solutions: two flagship-product columns + a single CTA button nested
   inside the CareTempo column (phase-013 redesign — was two link columns +
   a photo CTA card). align-items: flex-start (not stretch) is the reason
   the CTA now sits right under CareTempo's own content instead of being
   pulled down to match the taller Intelligent Medication Management
   column — a shared grid row was stretching both columns to equal height,
   which is what pushed the CTA so far down before. */
.brx-panel--solutions .brx-panel__inner--products {
  /* Solutions mock (Oct 2026): two product columns split by a hairline
     divider, then ONE full-width CTA spanning both columns underneath. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(660px, 100%);
}

/* round 038 (Task 17q): one product switched off. The card takes one column of the 660 px card (its 299 px column +
   2 x 24 px padding + 2 x 1 px border), so the product left keeps its line breaks and nothing sits empty beside it.
   Desktop only: below 1200px the ☰ menu's rule further down sets width: 100% and wins. */
.brx-panel--solutions .brx-panel__inner--one {
  width: min(349px, 100%);
}

.brx-panel__inner--one .brx-products {
  grid-template-columns: 1fr;
}

.brx-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--brx-sp-col-gap) / 2);
  align-items: stretch;
}

.brx-cols {
  display: flex;
  gap: 40px;
  padding-right: 8px;
}

.brx-col {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brx-col__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brx-orange-dark);
  text-decoration: none;
  margin-bottom: 2px;
}

.brx-col__title--muted {
  color: var(--brx-text);
}

/* ---------------- Product column (Solutions panel) ---------------- */
/* Both pillars get the same subtle box and the same padding — not a
   :hover state, this is how the panel looks at rest. Only CareTempo
   needs a ".brx-product-group" wrapper (its CTA lives outside this box,
   below it); Intelligent Medication Management is just this div. */
.brx-product {
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  /* round 023: the heading's own margins set the space to its links (--brx-sp-head-*) */
  gap: 0;
  padding: 0;
}

.brx-products > .brx-product {
  min-width: 0;
}

.brx-product + .brx-product {
  border-left: 1px solid var(--brx-nav-line);
  padding-left: calc(var(--brx-sp-col-gap) / 2);
}

/* Wraps CareTempo's box + the CTA together so the CTA still lands in this
   column's position (not stretched to match Intelligent Medication
   Management's height) without being visually inside the gray box. */
.brx-product-group {
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

.brx-product-group .brx-product {
  flex: 0 0 auto;
  min-width: 0;
}

/* round 023 (addendum 4): a product is one item: its icon, its name and its line (BetterVisit's) are one link, with the
   items' padding and states; its margins take the padding back, so its words sit where the headings' rhythm puts them */
.brx-product__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin-top: calc(var(--brx-sp-head-above) - var(--brx-sp-item-y));
  padding: var(--brx-sp-item-y) var(--brx-sp-item-x);
  border-radius: var(--brx-item-radius);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

/* its links start --brx-sp-head-below under its words (the list, not the heading, takes the padding back: a product
   with no links, BetterVisit, ends on its own padding, like any item) */
.brx-product__header + .brx-product__links {
  margin-top: calc(var(--brx-sp-head-below) - var(--brx-sp-item-y));
}

.brx-product__header .brx-product__desc {
  grid-column: 1 / -1;
  margin-top: var(--brx-sp-head-below);
  padding: 0;
}

.brx-product__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--brx-radius-sm);
  background: linear-gradient(160deg, #ea9a76, #e3836a);
}

.brx-product__icon img,
.brx-product__icon svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.brx-product__title {
  font-size: var(--brx-t-head-size);
  font-weight: var(--brx-t-head-weight);
  line-height: var(--brx-t-head-lh);
  text-transform: uppercase;
  letter-spacing: var(--brx-t-head-ls);
  color: var(--brx-t-head-color);
}

.brx-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* round 023: items touch; their own padding is the space between them */
  gap: var(--brx-sp-item-gap);
}

/* round 023: a link in Technology's lists is an item like every other panel's: the item label's type, the item's
   padding, and the same hover (Molly's .item:hover) */
.brx-linklist a {
  display: block;
  padding: var(--brx-sp-item-y) var(--brx-sp-item-x);
  border-radius: var(--brx-item-radius);
  font-size: var(--brx-t-item-size);
  font-weight: var(--brx-t-item-weight);
  line-height: var(--brx-t-item-lh);
  color: var(--brx-t-item-color);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

/* (its states: the state rules at the end of this file) */

/* ---------------- Image / CTA cards ---------------- */
.brx-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: 190px;
  min-height: 160px;
  border-radius: var(--brx-radius-md);
  text-decoration: none;
  background: linear-gradient(135deg, var(--brx-orange-2), var(--brx-orange-1));
  flex-shrink: 0;
}

.brx-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fixed pixel zone, not a percentage of height: a percentage-based
     gradient darkens proportionally MORE of a taller card, so a CTA card
     stretched tall (e.g. Solutions, next to two long link columns) ended
     up almost entirely covered by the dark end of the gradient — reading
     as "solid color block" with barely any photo visible. Keeping the
     darkened zone a fixed height means a taller card just shows more of
     the actual photo instead of more overlay. */
  background: linear-gradient(
    to bottom,
    rgba(224, 95, 54, 0) 0%,
    rgba(224, 95, 54, 0.08) calc(100% - 120px),
    rgba(196, 68, 36, 0.82) 100%
  );
}

.brx-card__shape {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.brx-card__label {
  position: relative;
  z-index: 1;
  color: var(--brx-t-on-photo);
  font-size: var(--brx-t-item-size);
  font-weight: var(--brx-t-item-weight);
  line-height: var(--brx-t-item-lh);
  padding: 16px;
}

.brx-card--cta {
  width: 210px;
}

.brx-card--small {
  width: auto;
  min-height: auto;
}

.brx-card--tall {
  width: 220px;
  min-height: 100%;
}

/* ---------------- Icon item rows (Pharmacy Alliance / Support & Care) ---------------- */
.brx-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-auto-rows: minmax(70px, auto);
  gap: 6px 28px;
  align-items: stretch;
}

.brx-icon-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: var(--brx-sp-item-y) var(--brx-sp-item-x);
  border-radius: var(--brx-item-radius);
  transition: background-color 0.15s ease;
}

/* (its states: the state rules at the end of this file) */

.brx-icon-item__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brx-orange-1), var(--brx-orange-2));
  display: flex;
  align-items: center;
  justify-content: center;
}

.brx-icon-item__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.brx-icon-item__label {
  font-size: var(--brx-t-item-size);
  font-weight: var(--brx-t-item-weight);
  line-height: var(--brx-t-item-lh);
  color: var(--brx-t-item-color);
}

/* Support & Care layout — keep the two links on one row,
   with the CTA directly underneath. */
.brx-nav .brx-split:has(.brx-grid-2x2--support) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
}

.brx-nav .brx-grid-2x2--support {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: auto;
  gap: 6px 28px;
  align-content: start;
}

/* Row-of-cards layouts (Who We Serve / Learn / BetterRX Difference) */
.brx-row-cards {
  gap: var(--brx-sp-tile-gap);
}

.brx-row-cards .brx-card {
  width: 175px;
  min-height: 190px;
}

.brx-row-cards--four .brx-card {
  width: 155px;
  min-height: 170px;
}

/* ---------------- Header CTA button ---------------- */
.brx-nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* round 023 (addendum 5): the site's button (css/brx-2026-system.css); the bar's two take its small size (below) */
  padding: var(--brx-btn-pad-y, 14px) var(--brx-btn-pad-x, 28px);
  border-radius: var(--brx-btn-radius, 999px);
  background: var(--brx-btn-primary-strong, linear-gradient(135deg, #ef7b52, #e05f36));
  color: #fff !important;
  font-size: var(--brx-btn-size, 14px);
  font-weight: var(--brx-btn-weight, 700);
  line-height: var(--brx-btn-lh, 1.15);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

/* (the button's states: the state rules at the end of this file) */

/* the bar's two (Sign In, Schedule a Call): the site's button in its small size, so the bar still fits from 1200 px */
.brx-nav__actions .brx-nav__cta {
  padding: var(--brx-btn-pad-y-sm, 12px) var(--brx-btn-pad-x-sm, 24px);
}

/* Sign In — solid navy, same size/shape as the primary orange CTA. */
.brx-nav__cta--secondary {
  background: var(--brx-btn-dark, #1c2b3a);
}

.brx-nav__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brx-nav__cta--mobile {
  display: none;
}

.brx-nav__cta--mobile + .brx-nav__cta--mobile {
  margin-top: 12px;
}

/* Support & Care: 2 items should occupy a single row. Addendum 3 G: desktop only (the ☰ menu keeps one column; this
   rule outranked its one-column rule and squeezed Support & Care into two 100 px columns at 390). */
@media (min-width: 1200px) {
  .brx-panel--support .brx-icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-items: center;
  }

  .brx-panel--support .brx-iconpanel {
    width: min(540px, 100%);
  }
}


/* ---------------- Mobile toggle ---------------- */
.brx-nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 44x44 hit area meets the WCAG 2.5.5 minimum touch target size, even
     though the visible icon (see span width below) stays compact. */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  flex-shrink: 0;
}

.brx-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brx-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.brx-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.brx-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.brx-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Responsive

   phase-012 tablet fixes (measured on the live /care-tempo page, 2026-09-24):
   T1  The one-row bar (logo + six triggers + both buttons) needs ~1,190px.
       From 901px up to ~1,246px it did not fit: at 1024px the buttons ran
       131px off-screen and the whole page scrolled sideways. The hamburger
       layout now starts below 1200px (was 900px; module.js matches), and
       1200-1279px trims the side padding so the bar fits.
   T2  (module.js) On touch screens a tap on a trigger opened its panel and
       closed it again at once, so the desktop dropdowns never opened.
   T3  In the hamburger layout the collapsed menu still formed a second flex
       row, so the bar's row gap left 24px (16px on phones) of blank space
       under the logo. The bar has no row gap in the hamburger layout; the
       open menu keeps the same space as its own top margin, which the
       menu's max-height subtracts, so the open menu still fits the screen.
   T4  At tablet widths (600-1199px) the photo cards of Who We Serve, Learn
       and BetterRX Difference sit side by side instead of one full-width
       strip per card.
   Decision 10 (owner, after the switch): two-step collapse. Below 1200px
       only the six menus fold into the toggle; Sign In and Schedule a Call
       stay in the bar (desktop size) while the logo, both buttons and the
       toggle fit on one row, and move into the menu when they don't. No
       width decides this: module.js measures the bar and sets
       .brx-nav--actions-fit (dev-009). A viewport breakpoint (522px) did,
       and wrapped the toggle wherever a scrollbar took 15px of the row.
   ========================================================================== */
/* phase-012 T1: was (max-width: 1024px); widened to the band where the bar was
   tight, plus less side padding. Below 1200px the hamburger rules override. */
/* ===== Icon-list dropdowns (Oct 2026 mocks): Pharmacy Alliance, Support & Care,
   Learn, BetterRX Difference. Gradient icon tiles + bold labels in a grid, then the
   same full-width CTA as Solutions. ===== */
.brx-iconpanel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Addendum 3 G: the cards' desktop widths, desktop only (the ☰ menu's panels take its full width). Round 025 (OV 024
   §E, Lex: "2. yes, fix both"): an icon panel's label never wraps on desktop, and its columns are all as wide as its
   longest label (CSS Grid: under a max-content size, 1fr tracks share the largest track's need), so Learn's
   "Events & Webinars" and "Content Library" (2 lines in 3 x 167 px columns at every width) take one line each and the
   card grows from 600 to about 784 px. These widths stay as each card's least width; module.js still places the card
   under its item and inside the bar's padding. */
@media (min-width: 1200px) {
  .brx-iconpanel--md { width: max-content; min-width: min(540px, 100%); }
  .brx-iconpanel--lg { width: max-content; min-width: min(600px, 100%); }
  .brx-iconpanel--xl { width: max-content; min-width: min(780px, 100%); } /* Support & Care: 3 long labels on one row */

  .brx-iconpanel .brx-icon-item__label { white-space: nowrap; }
  .brx-icon-grid--2 { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
  .brx-icon-grid--3 { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
}

.brx-icon-grid {
  display: grid;
  column-gap: var(--brx-sp-col-gap);
  row-gap: var(--brx-sp-item-gap);
}

.brx-icon-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brx-icon-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 3+ items in a 2-col grid fill top-to-bottom (Our Story / Careers, then
   Customer Stories / Newsroom), matching the mock. */
.brx-icon-grid--colflow:has(> :nth-child(3)) {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
}

.brx-iconpanel .brx-icon-item {
  gap: 14px;
}

.brx-iconpanel .brx-icon-item__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(to bottom left, #eda874, #e07f6c);
}

.brx-iconpanel .brx-icon-item__icon img,
.brx-iconpanel .brx-icon-item__icon svg {
  width: 24px;
  height: 24px;
}

/* ===== Who We Serve photo cards (Oct 2026 mock): warm full-card tint, BetterRX
   heart mark at lower right, centered label. ===== */
.brx-panel--serve .brx-card {
  width: 240px;
  min-height: 250px;
  border-radius: 16px;
  justify-content: center;
}

.brx-panel--serve .brx-card__img { z-index: 0; }

.brx-panel--serve .brx-card::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(242, 180, 130, 0.68) 0%, rgba(234, 146, 114, 0.66) 55%, rgba(212, 102, 92, 0.78) 100%);
}

.brx-panel--serve .brx-card__shape {
  /* BetterRX heart mark (brand PNG from the mock, in File Manager): sits
     lower-right and bleeds off the card's right edge, per the Oct 2026 mock. */
  top: 41%;
  left: 47%;
  width: 69%;
  height: auto;
  aspect-ratio: 234 / 191;
  border-radius: 0;
  background: url("https://5507361.fs1.hubspotusercontent-na1.net/hubfs/5507361/betterrx-heart-1.png") no-repeat center / contain;
  z-index: 2;
}

/* phase-014 Task 17s (round 041, Lex's pick, pen row m5Dpsm): white on the coral heart read 2.4–2.6:1 (1.9–2.0 on
   phones), so the label sits on a white gradient chip: navy letters, 11.96:1. Hover, keyboard focus and pressed (the
   one state a phone shows) turn the chip navy with white letters (9.58:1) and dim the whole card 18 % (the layer below,
   over photo, wash and heart; it replaces the photo-only 90 % the other cards keep). The letters stay where they were:
   18 px margin + 6 px padding = the old 24 px. Not tokens: the 18 %, the pill radius, the 6/14 padding, the navy pair
   (Will's #24333f family: the top banner's #33475b to his button hover #1c2b3a). */
.brx-panel--serve .brx-card__label {
  z-index: 4;
  width: auto;
  max-width: calc(100% - 20px);
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--brx-t-item-color);
  background: linear-gradient(135deg, #ffffff, #f4f6f8);
  box-shadow: var(--brx-shadow-card, 0 2px 10px rgba(20, 20, 30, 0.04));
  text-align: center;
  white-space: nowrap;
}

.brx-panel--serve .brx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .brx-nav .brx-panel--serve .brx-card:hover::before {
    opacity: 1;
  }

  .brx-nav .brx-panel--serve .brx-card:hover .brx-card__label {
    color: #ffffff;
    background: linear-gradient(135deg, #33475b, #1c2b3a);
  }
}

.brx-nav .brx-panel--serve .brx-card:focus-visible::before,
.brx-nav .brx-panel--serve .brx-card:active::before {
  opacity: 1;
}

.brx-nav .brx-panel--serve .brx-card:focus-visible .brx-card__label,
.brx-nav .brx-panel--serve .brx-card:active .brx-card__label {
  color: #ffffff;
  background: linear-gradient(135deg, #33475b, #1c2b3a);
}

.brx-nav .brx-panel--serve .brx-card .brx-card__img,
.brx-nav .brx-panel--serve .brx-card:hover .brx-card__img,
.brx-nav .brx-panel--serve .brx-card:active .brx-card__img {
  filter: none;
}

@media (max-width: 1279px) {
  .brx-nav__bar {
    padding-left: var(--brx-page-gutter, 24px);
    padding-right: var(--brx-page-gutter, 24px);
  }

  .brx-nav__list {
    gap: 16px;
  }

  .brx-cols {
    gap: 24px;
  }
}

/* phase-012 T1: hamburger layout below 1200px (was max-width: 900px). */
@media (max-width: 1199px) {
  /* phase-012 T3: no row gap under the logo, open or closed. The bar height
     module.js measures (menu closed) is then the fixed bar's real top row,
     and the space above the open menu comes from --brx-nav-menu-gap below. */
  .brx-nav__bar {
    row-gap: 0;
  }

  .brx-nav__menu {
    --brx-nav-menu-gap: 24px;
  }

  /* round 023: in the ☰ menu a group's card has no edge of its own: its items line up under the group's label */
  .brx-nav {
    --brx-t-top-size: 16px;
    --brx-sp-panel: 4px 0 16px;
  }

  .brx-nav__toggle {
    display: flex;
    order: 3;
  }

  .brx-nav__bar {
    flex-wrap: wrap;
    /* .brx-nav__menu wraps to its own row, so the first row holds the logo,
       the buttons (until they move into the menu, below) and the toggle —
       without this the logo and toggle would pack to the left. */
    justify-content: space-between;
    padding: 16px var(--brx-page-gutter, 20px);
  }

  /* phase-012 decision 10 (two-step collapse): only the six menus fold into
     the toggle here. Sign In and Schedule a Call stay in the bar, at their
     desktop size, right-aligned next to the toggle, while module.js finds
     they fit (.brx-nav--actions-fit). Until it has looked, and whenever they
     don't fit, they are in the menu, as on phones, so nothing can push the
     toggle onto a second row. */
  .brx-nav__actions {
    order: 2;
    margin-left: auto;
  }

  .brx-nav:not(.brx-nav--actions-fit) .brx-nav__cta--desktop {
    display: none;
  }

  .brx-nav:not(.brx-nav--actions-fit) .brx-nav__actions {
    display: none;
  }

  .brx-nav:not(.brx-nav--actions-fit) .brx-nav__cta--mobile {
    display: inline-flex;
  }

  .brx-nav__cta--mobile {
    margin-top: 20px;
    width: 100%;
  }

  /* While the mobile menu is open, pin the bar (logo + toggle, and the
     buttons where they stay in the bar) to the top of the viewport so the
     close control stays reachable, and let the menu itself scroll within
     the remaining viewport height instead of pushing the whole page down.
     --brx-nav-bar-h is set by module.js from the bar's measured height. */
  .brx-nav.is-menu-open .brx-nav__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--brx-bg);
  }

  .brx-nav.is-menu-open {
    padding-top: var(--brx-nav-bar-h, 68px);
  }

  .brx-nav__menu {
    order: 4;
    flex-basis: 100%;
    /* .brx-nav__menu's base rule (desktop) is display:flex with no
       flex-direction set, so it defaults to row + the browser default
       align-items: stretch. Once open, this element's own height is set
       to nearly the full viewport (below) — with row+stretch still in
       effect, EVERY child (the <ul>, plus the Sign In / Schedule a Call
       buttons) stretched to fill that same ~100vh height, turning the
       pill-shaped CTA buttons into giant capsule shapes. Column direction
       makes stretch apply to WIDTH instead (correct — full-width stacked
       menu) and gives each child its own natural height back. */
    flex-direction: column;
    justify-content: flex-start;
    max-height: 0;
    overflow: hidden;
    /* phase-012 F8: clipping alone leaves the closed menu's links in the Tab
       order, so hide it too. visibility waits out the 0.25s close, so the
       close animation still shows. */
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }

  /* phase-012 T3: the open menu's top margin stands in for the old row gap
     and is subtracted here, so bar + margin + menu = the viewport height. */
  .brx-nav__menu.is-open {
    visibility: visible;
    transition: max-height 0.25s ease, visibility 0s;
    margin-top: var(--brx-nav-menu-gap);
    max-height: calc(100dvh - var(--brx-nav-bar-h, 68px) - var(--brx-nav-menu-gap));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .brx-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 12px;
  }

  .brx-nav__item {
    border-bottom: 1px solid #f1f1f3;
  }

  .brx-nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
  }

  .brx-nav__trigger::after {
    content: "+";
    font-size: 18px;
    color: var(--brx-text-muted);
  }

  .brx-nav__item.is-open .brx-nav__trigger::after {
    content: "\2212";
  }

  .brx-nav--carets .brx-nav__caret {
    display: none;
  }

  .brx-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .brx-nav__item.is-open .brx-panel {
    display: flex;
  }

  .brx-panel__inner {
    flex-direction: column;
    box-shadow: none;
    border: none;
    margin-top: 0;
    width: 100%;
  }

  .brx-cols {
    flex-direction: column;
    gap: 18px;
  }

  .brx-panel--solutions .brx-panel__inner--products {
    flex-direction: column;
    width: 100%;
  }

  .brx-products {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .brx-product,
  .brx-product + .brx-product {
    border-left: none;
    padding: 0;
  }

  /* the two products one under the other: the same divider as Pharmacy Network's two groups */
  .brx-product + .brx-product::before {
    content: "";
    border-top: 1px solid var(--brx-nav-line);
    margin: var(--brx-sp-rule);
  }

  .brx-row-cards,
  .brx-grid-2x2,
  .brx-nav .brx-split {
    display: flex;
    flex-direction: column;
  }

  .brx-card,
  .brx-row-cards .brx-card,
  .brx-row-cards--four .brx-card,
  .brx-card--cta,
  .brx-card--tall {
    width: 100%;
    min-height: 140px;
  }
}

/* phase-012 T4: tablet widths — photo cards side by side, as in the desktop
   panels. Below 600px they stay one per row (the phone layout above). */
@media (min-width: 600px) and (max-width: 1199px) {
  .brx-row-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .brx-row-cards .brx-card,
  .brx-row-cards--four .brx-card {
    min-height: 160px;
  }
}

/* Small phones: tighten spacing that's otherwise tuned for tablet width. */
@media (max-width: 480px) {
  .brx-nav__bar {
    padding: 14px var(--brx-page-gutter, 16px);
    gap: 16px;
    /* phase-012 T3: the shorthand above would bring the row gap back. */
    row-gap: 0;
  }

  /* phase-012 T3: the phone row gap was 16px (the gap above). */
  .brx-nav__menu {
    --brx-nav-menu-gap: 16px;
  }

  /* phase-012 dev-011: the phone logo height (30px) is gone, see .brx-nav__logo img. */

  .brx-card,
  .brx-row-cards .brx-card,
  .brx-row-cards--four .brx-card,
  .brx-card--cta,
  .brx-card--tall {
    min-height: 120px;
  }
}

/* Body-scroll lock applied by module.js while the mobile menu is open,
   so the page behind the fixed header/menu can't scroll. */
body.brx-nav-lock {
  overflow: hidden;
}

/* Icon-list dropdowns + Who We Serve on tablet/mobile (accordion panels). */
@media (max-width: 1199px) {
  .brx-iconpanel,
  .brx-iconpanel--md,
  .brx-iconpanel--lg,
  .brx-iconpanel--xl {
    width: 100%;
  }

  .brx-icon-grid,
  .brx-icon-grid--2,
  .brx-icon-grid--3,
  .brx-icon-grid--colflow:has(> :nth-child(3)) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .brx-panel--serve .brx-card__label {
    white-space: normal;
  }
}

/* phase-014 Task 17t (round 042, Lex's pick B, pen frame kFzzf): on phones (one card per row, below 600px) the Who We
   Serve cards were 120-140px strips. The theme's `img { height: auto !important }` keeps each photo at its own shape,
   pinned to the card's top, so a strip showed the top third: the chip sat on the mouths and the heart covered
   Clinical Leaders' face. A 16:9 card shows head to chin at any phone width (the photo and the card grow together),
   and the heart takes its desktop size (165.6 of 358px), lower right, under the chins. Tablets (600-1199px, cards
   side by side) and desktop don't change. Not tokens: 16:9, the heart's place. */
@media (max-width: 599px) {
  .brx-panel--serve .brx-row-cards .brx-card {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .brx-panel--serve .brx-card__shape {
    top: 75%;
    left: 64.5%;
    width: 46.26%;
  }
}

/* ==========================================================================
   phase-014 Task 17b (the v2 launch, round 022)
   ========================================================================== */

/* The header stays at the top of the window (Lex's pick). Sticky, not fixed: its space stays in the page, so the 2026
   pages need no offset. It is set on HubSpot's wrapper around this module (the module's name in both layouts,
   templates/layouts/base-2026.html and, from the launch, base.html), because a sticky box only travels inside its
   parent: the wrapper's parent is .body-wrapper, the whole page. No ancestor may clip overflow (hidden/auto/scroll
   make it the sticky box's scroller, MDN position: sticky): measured visible on both layouts (dev-022 chain022.json).
   --brx-header-h is the header's height: these values are the bar's (its padding 14/16/18 px around the 53 px logo,
   + the 1 px line), measured 82/86/90 px at 390/1024/1280, and module.js sets the measured height once it runs. */
:root {
  --brx-header-h: 86px;
}

@media (max-width: 480px) {
  :root {
    --brx-header-h: 82px;
  }
}

@media (min-width: 1200px) {
  :root {
    --brx-header-h: 90px;
  }
}

#hs_cos_wrapper_brx_2026_header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* A jump to a section (a link to another page's #anchor, the browser's own find, a keyboard skip) lands below the
   header, not under it (MDN scroll-padding-top: set on the scroll container, here the page). The theme's own handler
   for same-page # links scrolls to 100 px above the target, which already clears the header. */
html {
  scroll-padding-top: var(--brx-header-h, 90px);
}

/* An open dropdown never runs past the bottom of the window: it scrolls inside itself (a short window, 1280 x 720
   with a long list). Below the card: the header, then the card's 14 px top margin and 16 px of room. */
@media (min-width: 1200px) {
  .brx-panel__inner {
    max-height: calc(100vh - var(--brx-header-h, 90px) - 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Descriptions (Molly's mockup words): one line of muted text under a link or an icon item's label. */
.brx-linklist__desc,
.brx-icon-item__desc,
.brx-product__desc {
  display: block;
  margin: var(--brx-sp-desc) 0 0;
  font-size: var(--brx-t-desc-size); /* addendum 2: Molly's mockup (.item span), the same in all three panels */
  font-weight: var(--brx-t-desc-weight);
  line-height: var(--brx-t-desc-lh);
  color: var(--brx-t-desc-color);
}

/* BetterVisit's line under its heading: on the items' inset */
.brx-product__desc {
  margin: 0;
  padding: 0 var(--brx-sp-item-x);
}

/* The theme's list items add a 15 px bottom margin around each link (round 022: 31 px apart live). */
.brx-panel--solutions .brx-product__links:has(.brx-linklist__desc) > li {
  margin-bottom: 0;
}

.brx-iconpanel .brx-icon-item--desc {
  align-items: flex-start;
}

.brx-icon-item__text {
  display: flex;
  flex-direction: column;
  padding-top: 3px;
}

/* Pharmacy Network: each segment heading (For Hospices, For Pharmacies) starts a column; it looks like the product
   headings of Technology (Lex's pick: the same coral). */
.brx-icon-segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--brx-sp-col-gap);
}

.brx-icon-segment {
  display: flex;
  flex-direction: column;
}

.brx-icon-segment__title {
  margin: var(--brx-sp-head-above) var(--brx-sp-item-x) var(--brx-sp-head-below);
  font-size: var(--brx-t-head-size);
  font-weight: var(--brx-t-head-weight);
  line-height: var(--brx-t-head-lh);
  letter-spacing: var(--brx-t-head-ls);
  text-transform: uppercase;
  color: var(--brx-t-head-color);
}

.brx-icon-segment__items {
  display: flex;
  flex-direction: column;
  gap: var(--brx-sp-item-gap);
}

/* With descriptions the two icon cards widen from 540 to 640 px, and Support & Care's rows come closer. */
@media (min-width: 1200px) {
  .brx-iconpanel--md:has(.brx-icon-item__desc),
  .brx-panel--support .brx-iconpanel:has(.brx-icon-item__desc) {
    width: min(640px, 100%);
  }
}

.brx-panel--support .brx-icon-grid:has(.brx-icon-item__desc) {
  align-items: start;
}

/* The ☰ menu (below 1200px): segments one under the other. */
@media (max-width: 1199px) {
  .brx-icon-segments {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    row-gap: 18px;
  }
}

/* ---------------- Task 17b addendum 2: Molly's mockup for the items with a description ----------------
   Operator, on Lex's "yes, let's do it" (2026-10-21): her doc says what is in the menu, her mockup how the new parts
   look (_pm/work/active/014-site-polish/2026-10-20-molly-navigation-v2-mockup.html: .item, .item b, .item span,
   .item:hover, .col, .col h4, .sep, .formcta). In Pharmacy Network and Support & Care an item with a description is
   the mockup's item: no icon, a bold navy label, a grey line under it, a taupe background on hover (and on keyboard
   focus: the theme removes focus outlines, T16-13); the column is the mockup's 300 px; Pharmacy Network's segments
   stack with its thin divider; Get Support is its outline button with an arrow. Kept as today: the card, the segment
   headings' coral (Lex's STOP-1 pick), the Join button. Items without a description keep the icon look. */
@media (min-width: 1200px) {
  .brx-panel--pharmacy .brx-iconpanel:has(.brx-icon-item__desc),
  .brx-panel--support .brx-iconpanel:has(.brx-icon-item__desc) {
    /* round 025 (OV 024 §E, every icon panel): at least the mockup's 350, wider when a label needs it ("Custom
       Tailored Pharmacy Alliance" took 2 lines in 276 px at every desktop width); the descriptions don't widen the
       card (contain: inline-size: their own width counts as nothing), they wrap inside it */
    width: max-content;
    min-width: min(350px, 100%);
  }

  .brx-iconpanel .brx-icon-item__desc {
    contain: inline-size;
  }
}

.brx-panel--support .brx-icon-grid:has(.brx-icon-item__desc) {
  grid-template-columns: 1fr;
}

.brx-panel--pharmacy .brx-icon-segments:has(.brx-icon-item__desc) {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  row-gap: 0;
}

.brx-panel--pharmacy .brx-icon-segments:has(.brx-icon-item__desc) .brx-icon-segment + .brx-icon-segment::before {
  content: "";
  border-top: 1px solid var(--brx-nav-line);
  margin: var(--brx-sp-rule);
}

.brx-panel--pharmacy .brx-iconpanel .brx-icon-item--desc,
.brx-panel--support .brx-iconpanel .brx-icon-item--desc {
  display: block;
}

.brx-panel--pharmacy .brx-icon-item--desc .brx-icon-item__icon,
.brx-panel--support .brx-icon-item--desc .brx-icon-item__icon {
  display: none;
}

.brx-panel--pharmacy .brx-icon-item--desc .brx-icon-item__text,
.brx-panel--support .brx-icon-item--desc .brx-icon-item__text {
  padding-top: 0;
}

/* Round 025 Addendum 5 (Molly: "let's make the nav consistent for all and have text"): Learn and BetterRX Difference
   with descriptions are read like Support & Care: one item per row, the label with its description under it, in the
   same type. They keep their icons (these two panels' own design; Technology's BetterVisit shows icon, name and line
   the same way). The card: Support & Care's rule (at least 350 px, wider when a label needs it) plus the icon and its
   gap (46 + 14 px), so the descriptions wrap in the same 276 px text column as Support & Care's. */
.brx-panel--learn .brx-icon-grid:has(.brx-icon-item__desc),
.brx-panel--difference .brx-icon-grid:has(.brx-icon-item__desc) {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  grid-auto-flow: row;
}

/* beside the icon, the label and description take the rest of the row (a description adds no width of its own on
   desktop, contain: inline-size, so without this the column was only as wide as the label) */
.brx-icon-item--desc .brx-icon-item__text {
  flex: 1;
}

@media (min-width: 1200px) {
  .brx-panel--learn .brx-iconpanel:has(.brx-icon-item__desc),
  .brx-panel--difference .brx-iconpanel:has(.brx-icon-item__desc) {
    width: max-content;
    min-width: min(410px, 100%);
  }
}

/* ---------------- Round 023: the dropdowns' button (operator addenda 2 and 5) ----------------
   Lex (02:26): "cta in dropdowns ... vs our buttons ... horizontal spacing isn't the same". The dropdowns' button is the
   site's button (css/brx-2026-system.css --brx-btn-*: Will's section CTAs, measured): a pill, 14/28 px, 14 px bold,
   44 px tall, its label centred, as wide as its label, on the items' text edge (no arrow: no other button on the site
   has one). Round 025 Addendum 5 (Molly: "Can we make all of the CTAs the same button color style in the nav?"): every
   dropdown's button is the filled one, the header's gradient, the same button as the bar's own Schedule a Call. Round
   023 had made Join our Pharmacy Network and Get Support a light variant (white, coral edge); Molly saw two white
   buttons among three orange. Phones (under 768 px): full width, as Will's are there. */
.brx-nav .brx-panel__cta {
  align-self: flex-start;
  width: auto;
  margin: 0 var(--brx-sp-item-x);
  letter-spacing: 0;
  text-align: center;
  box-shadow: none;
}

@media (max-width: 767px) {
  .brx-nav .brx-panel__cta {
    align-self: stretch;
  }
}

/* ---------------- Round 023 (operator addendum 4): one state set ----------------
   Lex (02:2x): "the whole item is highlighted on hover ... But for this one: only bold ones get highlighted. not the whole
   thing with description ... hover states need to be meaninful and consistent too". Every item is one link around all
   of its words (module.html), and every item in every panel has the same states:
     hover (a pointer that hovers)   the taupe fill of Molly's .item:hover
     keyboard focus (Tab)            the same fill and a 2 px navy ring, 2 px out (CLEAN removes outlines, T16-13: set here)
     pressed (mouse or finger)       a deeper taupe: the one state a phone shows
   Who We Serve's photos can't show a fill: their photo darkens instead (hover 90 %, pressed 80 %), with the same ring.
   The buttons darken by 8 % on hover and 16 % pressed, and take the ring. */
@media (hover: hover) {
  .brx-nav .brx-linklist a:hover,
  .brx-nav .brx-icon-item:hover,
  .brx-nav .brx-product__header:hover {
    background: var(--brx-item-hover);
  }

  .brx-nav .brx-card:hover .brx-card__img {
    filter: brightness(0.9);
  }

  .brx-nav .brx-nav__cta:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.08);
  }
}

.brx-nav .brx-linklist a:focus-visible,
.brx-nav .brx-icon-item:focus-visible,
.brx-nav .brx-product__header:focus-visible {
  background: var(--brx-item-hover);
}

.brx-nav .brx-linklist a:focus-visible,
.brx-nav .brx-icon-item:focus-visible,
.brx-nav .brx-product__header:focus-visible,
.brx-nav .brx-card:focus-visible,
.brx-nav .brx-nav__cta:focus-visible {
  outline: 2px solid var(--brx-focus);
  outline-offset: 2px;
}

.brx-nav .brx-linklist a:active,
.brx-nav .brx-icon-item:active,
.brx-nav .brx-product__header:active {
  background: var(--brx-item-press);
}

/* CLEAN's own focus look: once the visitor has pressed Tab it adds .user-is-tabbing to the page and gives whatever is
   focused a blue glow (".user-is-tabbing :focus { box-shadow: 0 0 3px 3px rgba(2,114,252,.7); outline: none }",
   template_main-head.css), so a mouse press after any Tab showed it too. Our controls' focus look is the ring above. */
.brx-nav a:focus,
.brx-nav button:focus {
  box-shadow: none;
}

/* the tiles' photo moves, the link itself doesn't (CLEAN gives links a 0.4 s transition of everything, which drew the
   ring growing in) */
.brx-nav .brx-card {
  transition: none;
}

.brx-nav .brx-card .brx-card__img {
  transition: filter 0.15s ease;
}

.brx-nav .brx-card:active .brx-card__img {
  filter: brightness(0.8);
}

.brx-nav .brx-nav__cta:active {
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.16);
}

/* Addendum 1, option C (the operator's pick for Lex): where the six carets don't fit, the bar first tightens the
   room around the menu (the bar's two gaps), then as much of the space between the items as it
   needs, never under 12 px (Lex: "too tight"), then the labels 1 px smaller (module.js fitCarets sets that space). The
   carets are always drawn. Labels and buttons keep their size wherever the carets fit as is. */
@media (min-width: 1200px) {
  .brx-nav--carets-tight .brx-nav__bar {
    gap: 12px;
  }

  .brx-nav--carets-small {
    --brx-t-top-size: 13px;
  }
}

/
/* ==========================================================================
   phase-014 round 034: Top announcement banner
   ========================================================================== */

/* Banner height fallback. module.js can update this with the measured height.
   The banner scrolls away while the header sticks, as before. */
:root:has(.brx-banner) {
  --brx-banner-h: 56px;
}

#hs_cos_wrapper_brx_2026_header {
  top: calc(-1 * var(--brx-banner-h, 0px));
}

/* Banner container */
.brx-banner {
  background: #33475b;
  padding: 10px var(--brx-page-gutter, 16px);
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Keeps the image and announcement aligned */

.brx-banner__inner {
  max-width: var(--brx-page-max, 1216px);
  min-height: 36px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}


/* Optional announcement image */
.brx-banner__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 110px;
  max-height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Announcement text */
.brx-banner .brx-banner__text {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}

/* Announcement link */
.brx-banner .brx-banner__link,
.brx-banner .brx-banner__link:hover,
.brx-banner .brx-banner__link:focus,
.brx-banner .brx-banner__link:active {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: none;
}

.brx-banner .brx-banner__link:hover {
  text-decoration-thickness: 2px;
}

.brx-banner .brx-banner__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: none;
}

/* Mobile banner adjustments */
@media (max-width: 600px) {
  .brx-banner__inner {
    gap: 8px;
  }

  .brx-banner__image {
    max-width: 72px;
    max-height: 30px;
  }

  .brx-banner .brx-banner__text {
    font-size: 11px;
    line-height: 16px;
  }
}

/* Divider and spacing only when a banner image is present */
.brx-banner__inner:has(.brx-banner__image) .brx-banner__text {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: 24px;
}


/* Mobile menu positioning when the banner is visible */
@media (max-width: 1199px) {
  .brx-nav.is-menu-open .brx-nav__bar {
    top: var(--brx-banner-vis, 0px);
  }

  .brx-nav__menu.is-open {
    max-height: calc(100dvh - var(--brx-nav-bar-h, 68px) - var(--brx-nav-menu-gap) - var(--brx-banner-vis, 0px));
  }
}

/* Desktop dropdown positioning when the banner is visible */
@media (min-width: 1200px) {
  .brx-panel__inner {
    max-height: calc(100vh - var(--brx-header-h, 90px) - var(--brx-banner-h, 0px) - 30px);
  }
}
.brx-banner__inner:has(.brx-banner__image) .brx-banner__text {
  padding-left: 12px;
}