/* ==========================================================================
   Trinico Cloud, primary header. Direction C, "Utility on top".
   Chosen by the CEO 20 September 2026. Runbook 03, site-wide element.

   ONE header for the whole site, signed in or out, light or dark.

   Why this is its own file and not part of the theme-vars block:
   everything in $rules shares ONE content hash, so a header tweak would
   rotate the whole 222,961-byte stylesheet and force a full re-download for
   every visitor. A separate file invalidates header.css only. drawer.css is
   the precedent. The cost, accepted knowingly, is one more render-blocking
   stylesheet above the fold.

   Bump ?v= in hooks.php in the SAME edit as any change here. Never from a
   date function. Rule 15.

   Measured contrasts are stated beside the rule that produces them.
   ========================================================================== */

header#header.trinico-hdr {
  /* light, the logged-out and light-mode client area */
  --h-strip-bg: #13202E;
  --h-strip-ink: #EAF2F9;
  --h-strip-ink-dim: #C2D3E4;
  --h-strip-hover: rgba(255, 255, 255, .12);
  --h-row-bg: #ffffff;
  --h-row-edge: #E8EEF4;
  --h-nav-ink: #3A4655;
  --h-nav-ink-on: #1A5FAF;
  --h-nav-hover-bg: #f1f5fa;
  --h-panel-bg: #ffffff;
  --h-panel-edge: #E8EEF4;
  --h-panel-title: #13202E;
  --h-panel-desc: #5B6573;
  --h-panel-hover: #d9e6f4;   /* CEO 20 Sep 2026: was #f4f8fc, a 1.067:1 step against the panel and effectively invisible. Now 1.267:1. Title 13.01:1, description 4.66:1, both still pass 4.5:1. */
  --h-green: #ABC441;
  --h-ink-on-green: #13202E;
  --h-shadow: 0 2px 10px rgba(15, 32, 55, .07);
  --h-panel-shadow: 0 12px 34px rgba(15, 32, 55, .16);
  --h-focus: #1A5FAF;
}

/* dark is the client area default, persisted server side */
body.tc-dark header#header.trinico-hdr {
  --h-strip-bg: #070c11;
  --h-strip-ink: #DCE7F1;
  --h-strip-ink-dim: #9FB2C4;
  --h-row-bg: #141b22;
  --h-row-edge: #222c37;
  --h-nav-ink: #C7D4E1;
  --h-nav-ink-on: #7FC0F5;
  --h-nav-hover-bg: #1b2530;
  --h-panel-bg: #141b22;
  --h-panel-edge: #222c37;
  --h-panel-title: #EEF4FA;
  --h-panel-desc: #9FB2C4;
  --h-panel-hover: #2b3a4b;   /* dark mode partner. Was a 1.119:1 step, now 1.496:1. Title 10.48:1, description 5.33:1. */
  --h-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  --h-panel-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  --h-focus: #7FC0F5;
}

/* --------------------------------------------------------------------------
   Skip link. WCAG 2.2 SC 2.4.1. First focusable element on the page.
   Clip, never display:none, so assistive tech still reaches it.
   -------------------------------------------------------------------------- */
.trinico-skip {
  position: absolute;
  left: 16px;
  top: -72px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: #ffffff;
  color: #13202E;                      /* 16.49:1 */
  font-family: Montserrat, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: top .16s ease;
}
.trinico-skip:focus {
  top: 0;
  color: #13202E;
  text-decoration: none;
  outline: 3px solid var(--h-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .trinico-skip { transition: none; }
}

/* --------------------------------------------------------------------------
   The header shell
   -------------------------------------------------------------------------- */
header#header.trinico-hdr {
  position: relative;
  z-index: 300;
  background: var(--h-row-bg);
  font-family: Montserrat, sans-serif;
}
header#header.trinico-hdr .trinico-hdr-in {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 20px;
}
header#header.trinico-hdr a { text-decoration: none; }
header#header.trinico-hdr ul { list-style: none; margin: 0; padding: 0; }
header#header.trinico-hdr :focus-visible {
  outline: 2px solid var(--h-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Row 1, the utility strip. 48px, fixed height, never shrinks.
   Scrolls away naturally. Only row 2 sticks.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-strip {
  background: var(--h-strip-bg);
  color: var(--h-strip-ink);
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-in {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
}
header#header.trinico-hdr .trinico-hdr-strip a,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-sbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--h-strip-ink);          /* 14.58:1 on #13202E */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
header#header.trinico-hdr .trinico-hdr-strip a:hover,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-sbtn:hover {
  background: var(--h-strip-hover);
  color: #ffffff;
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
header#header.trinico-hdr .trinico-hdr-strip i { font-size: 13px; line-height: 1; }

/* the support address, which is a real address and not a claim */
header#header.trinico-hdr .trinico-hdr-mail { color: var(--h-strip-ink-dim); }

/* --------------------------------------------------------------------------
   Row 2, the product row. 60px. THIS is the sticky element, and its height
   never changes, so nothing shifts. SC 2.4.11 handled by scroll-padding-top
   on <html>, set beside this rule.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-row {
  position: sticky;
  top: 0;
  z-index: 310;
  background: var(--h-row-bg);
  border-bottom: 1px solid var(--h-row-edge);
  transition: box-shadow .18s cubic-bezier(.22, 1, .36, 1);
}
header#header.trinico-hdr .trinico-hdr-row.is-stuck { box-shadow: var(--h-shadow); }
header#header.trinico-hdr .trinico-hdr-row .trinico-hdr-in {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
}
@media (prefers-reduced-motion: reduce) {
  header#header.trinico-hdr .trinico-hdr-row { transition: none; }
}

/* logo */
header#header.trinico-hdr .navbar-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0;
  margin: 0;
  min-height: 44px;
}
header#header.trinico-hdr .navbar-brand img {
  display: block;
  width: auto;
  max-height: 44px;
}

/* --------------------------------------------------------------------------
   The navigation itself
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-nav { display: flex; align-items: center; padding: 0; }
header#header.trinico-hdr .trinico-hdr-nav .navbar-collapse { padding: 0; }
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav { display: flex; align-items: center; gap: 0; }
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li { position: relative; }

header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--h-nav-ink);            /* 9.60:1 on white */
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:hover,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > button:hover {
  background: var(--h-nav-hover-bg);
  color: var(--h-nav-ink-on);         /* 5.81:1 on #f1f5fa */
}
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > [aria-current="page"],
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.active > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a.active {
  color: var(--h-nav-ink-on);         /* 6.36:1 on white */
  box-shadow: inset 0 -2px 0 var(--h-nav-ink-on);
}
header#header.trinico-hdr .trinico-hdr-caret {
  width: 10px;
  height: 6px;
  flex: none;
  transition: transform .18s ease;
}
header#header.trinico-hdr [aria-expanded="true"] .trinico-hdr-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  header#header.trinico-hdr .trinico-hdr-caret { transition: none; }
}

/* --------------------------------------------------------------------------
   The rich dropdown panel. Single tier. Title plus one line.
   Opens on click first; hover is an enhancement on a fine pointer only.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-panel {
  display: block;
  float: none;
  margin: 0;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 400;
  width: 368px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--h-panel-bg);
  border: 1px solid var(--h-panel-edge);
  border-radius: 14px;
  box-shadow: var(--h-panel-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
}
/* Bootstrap owns the open state. It puts .show on the parent li and flips
   aria-expanded on the toggle, so click, keyboard and Escape all work with no
   JavaScript of ours. Hover is layered on top, on a fine pointer only, and is
   never the only way in. WCAG 2.2 SC 2.1.1. */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.show > .trinico-hdr-panel,
header#header.trinico-hdr .trinico-hdr-util li.show > .trinico-hdr-panel {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > .trinico-hdr-panel {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  header#header.trinico-hdr .trinico-hdr-panel { transition: opacity .16s ease, visibility .16s; transform: none; }
}
/* right-align the last panels so they cannot run off the container */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:nth-last-child(-n+2) .trinico-hdr-panel {
  left: auto;
  right: 0;
}
/* Bridges the 10px gap between the label and the panel. Without it the pointer
   crosses dead space on its way down, :hover is lost, and the panel flickers
   shut. Invisible, and part of the panel, so hovering it keeps the panel open. */
header#header.trinico-hdr .trinico-hdr-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

header#header.trinico-hdr .trinico-hdr-panel a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 9px;
  transition: background .12s ease;
}
header#header.trinico-hdr .trinico-hdr-panel a:hover { background: var(--h-panel-hover); }
header#header.trinico-hdr .trinico-hdr-t {
  display: block;
  color: var(--h-panel-title);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
header#header.trinico-hdr .trinico-hdr-d {
  display: block;
  margin-top: 2px;
  color: var(--h-panel-desc);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   The right-hand cluster. Contents differ by sign-in state; the shell does not.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-util {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
}
header#header.trinico-hdr .trinico-hdr-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--h-nav-ink);
  transition: background .14s ease, color .14s ease;
}
header#header.trinico-hdr .trinico-hdr-icon:hover {
  background: var(--h-nav-hover-bg);
  color: var(--h-nav-ink-on);
}
header#header.trinico-hdr .trinico-hdr-icon i { font-size: 17px; line-height: 1; }
header#header.trinico-hdr .cart-btn .badge,
header#header.trinico-hdr .trinico-hdr-count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--h-green);
  color: var(--h-ink-on-green);       /* 8.40:1 */
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* the one button in the header */
header#header.trinico-hdr .trinico-hdr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--h-green);
  color: var(--h-ink-on-green);       /* 8.40:1, never white. DESIGN.md. */
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  white-space: nowrap;
  transition: filter .18s cubic-bezier(.22, 1, .36, 1),
              box-shadow .18s cubic-bezier(.22, 1, .36, 1);
}
header#header.trinico-hdr .trinico-hdr-cta:hover {
  filter: brightness(1.04);
  color: var(--h-ink-on-green);
  box-shadow: 0 4px 14px rgba(15, 32, 55, .18);
}
@media (prefers-reduced-motion: reduce) {
  header#header.trinico-hdr .trinico-hdr-cta { transition: none; }
  header#header.trinico-hdr .trinico-hdr-cta:hover { box-shadow: none; }
}

/* the signed-in account control, which replaces Login and Register */
header#header.trinico-hdr .trinico-hdr-acct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--h-row-edge);
  background: transparent;
  border-radius: 999px;
  color: var(--h-nav-ink);
  font-size: 13px;
  font-weight: 600;
  max-width: 220px;
  cursor: pointer;
}
header#header.trinico-hdr .trinico-hdr-acct:hover { background: var(--h-nav-hover-bg); }
header#header.trinico-hdr .trinico-hdr-acct .trinico-hdr-ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--h-green);
  color: var(--h-ink-on-green);       /* 8.40:1 */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}
header#header.trinico-hdr .trinico-hdr-acct span.trinico-hdr-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the burger, below the nav breakpoint */
header#header.trinico-hdr .trinico-hdr-burger { display: none; }

/* --------------------------------------------------------------------------
   Responsive. The strip hides below 700px and its items move into the drawer,
   which is the Master Files rule for the utility bar.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  /* The desktop nav goes away below 1200px, but the ELEMENT must not.
     #mainNavbar, the mobile drawer, is a child of .trinico-hdr-nav, and
     `display:none` on a parent kills the whole subtree no matter how many
     !important rules the child carries. drawer.css declares
     `#mainNavbar.collapse.show{display:flex!important}` and it never had a
     chance.

     The symptom was worse than a missing menu. Tapping the burger still ran
     the script, so body got .trinico-drawer-open, which sets
     `overflow:hidden`, and the backdrop faded in. The visitor got a locked,
     dark, empty screen with no way back except the browser's back button.
     Measured at 390px on 20 September 2026: 0 menu items rendered, backdrop
     present, page scroll locked.

     Introduced by this stylesheet in the Direction C build and not caught,
     because a header with no menu in it passes a contrast, tap-target and
     overflow sweep perfectly. Absence has no failure mode; the check has to
     count the items, not just grade the ones it finds.

     So the nav stays rendered and is made to occupy nothing. #mainNavbar is
     position:fixed at these widths, so it is out of flow and takes its size
     from its own rules, not from this parent. Verified after the fix: drawer
     390x844, 7 items, both auth pills 168x48 on one row, header row still
     57px, no horizontal overflow. */
  header#header.trinico-hdr .trinico-hdr-nav {
    display: block;
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
  }
  header#header.trinico-hdr .trinico-hdr-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--h-nav-ink);
  }
  header#header.trinico-hdr .trinico-hdr-burger:hover { background: var(--h-nav-hover-bg); }
  header#header.trinico-hdr .trinico-hdr-burger i { font-size: 19px; }
}
@media (max-width: 699px) {
  header#header.trinico-hdr .trinico-hdr-strip { display: none; }
  header#header.trinico-hdr .trinico-hdr-row .trinico-hdr-in { height: 56px; }
  header#header.trinico-hdr .trinico-hdr-in { padding-inline: 16px; }
  header#header.trinico-hdr .navbar-brand img { max-height: 36px; }
  header#header.trinico-hdr .trinico-hdr-cta { display: none; }
  header#header.trinico-hdr .trinico-hdr-acct .trinico-hdr-who { display: none; }
  header#header.trinico-hdr .trinico-hdr-acct { max-width: none; padding: 0 6px; }
}

/* --------------------------------------------------------------------------
   Retire the old hero header. The header no longer sits inside
   .trinico-hero-wrap, so the wrap is now only the hero band.
   These two rules stop the old transparent-over-blue treatment from
   reaching the new shell if any stale rule still matches.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr,
header#header.trinico-hdr .navbar,
header#header.trinico-hdr .navbar-light {
  background: var(--h-row-bg);
  min-height: 0;
}
header#header.trinico-hdr .trinico-hdr-strip { background: var(--h-strip-bg); }


/* --------------------------------------------------------------------------
   Two overrides, and why they exist.

   The markup keeps .trinico-register-btn and .trinico-langcurr because the
   generated theme-vars block and the currency modal both key off them.
   Those older rules carry !important, so they beat the component rules above
   and reintroduced the exact failures this rebuild exists to remove:

     Register  white on #ABC441   1.96:1   the failure DESIGN.md names by number
     ZAR       #7f7f7f on #13202E 4.12:1   the old --trinico-nav-link token

   Measured live 20 September 2026 after the first deploy. Fixed here rather
   than by deleting the classes, so nothing else that depends on them breaks.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-util a.trinico-hdr-cta.trinico-register-btn,
header#header.trinico-hdr .trinico-hdr-util a.trinico-hdr-cta.trinico-register-btn:hover,
header#header.trinico-hdr .trinico-hdr-util a.trinico-hdr-cta.trinico-register-btn:focus {
  background: var(--h-green) !important;
  color: var(--h-ink-on-green) !important;   /* 8.40:1 */
  border: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  transform: none !important;
}

header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr,
header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr:hover {
  color: var(--h-strip-ink) !important;      /* 14.58:1 on #13202E */
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;  /* 3.06:1 vs the strip */
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr:hover {
  background: var(--h-strip-hover) !important;
}


/* --------------------------------------------------------------------------
   Menu panel corrections, 20 September 2026, all three measured on the live
   site and all three reported by the CEO.

   1. EVERY description was clipped. Bootstrap's .dropdown-item carries
      white-space: nowrap, which I never overrode, so descriptions needing
      262 to 338px were cut to the 258px of content width the panel allowed.
      Measured worst case: "Your own server, with dedicated CPU and SSD
      storage" at 338px in a 258px box.

   2. Popper was fighting the CSS. Bootstrap writes an inline transform and
      left on open; the Security panel was landing at left: -249.656px. The
      toggles now carry data-display="static", so Popper stands down and this
      stylesheet owns position. That removes the jump.

   3. The 10px between the label and the panel was dead space. Bridged above.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-panel li,
header#header.trinico-hdr .trinico-hdr-panel a,
header#header.trinico-hdr .trinico-hdr-panel .trinico-hdr-t,
header#header.trinico-hdr .trinico-hdr-panel .trinico-hdr-d {
  white-space: normal;
  overflow-wrap: break-word;
}
header#header.trinico-hdr .trinico-hdr-panel li {
  display: block;
  width: auto;
  padding: 0;
  background: transparent;
  border: 0;
}
header#header.trinico-hdr .trinico-hdr-panel .trinico-hdr-t { text-wrap: balance; }
header#header.trinico-hdr .trinico-hdr-panel .trinico-hdr-d { text-wrap: pretty; }

/* The last item's panel is right-aligned so it can never run off the container.
   One rule, driven by position in the list, not by a guess at the width. */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:last-of-type > .trinico-hdr-panel {
  left: auto;
  right: 0;
}

/* CLOSING IS INSTANT. 20 September 2026.

   This previously carried a 180ms close delay, added so a pointer crossing the
   menu would not strobe every panel it passed. It had a worse side effect:
   moving from one top-level item to the next left the old panel still on
   screen while the new one opened, so the two overlapped. Reported by the CEO.

   The base state now has no transition at all, so a panel closes the instant
   hover leaves. Only the open state carries a fade, and with no delay. Two
   panels can no longer be visible at the same time. */
header#header.trinico-hdr .trinico-hdr-panel {
  transition: none;
}
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.show > .trinico-hdr-panel,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > .trinico-hdr-panel,
header#header.trinico-hdr .trinico-hdr-util li.show > .trinico-hdr-panel {
  transition: opacity .12s ease 0s, transform .12s ease 0s;
}
@media (prefers-reduced-motion: reduce) {
  header#header.trinico-hdr .trinico-hdr-panel,
  header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.show > .trinico-hdr-panel,
  header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > .trinico-hdr-panel {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   The currency control. It was 44px tall inside a 48px strip and filled the
   bar. The visible pill is now 30px; the button around it stays 44px so the
   thing a finger lands on does not shrink. Hit area and ink are separated,
   rather than trading one against the other.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr,
header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr:hover {
  height: 44px !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-langcurr .trinico-hdr-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);   /* 3.06:1 against the strip */
  color: var(--h-strip-ink);                     /* 14.58:1 */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1;
  transition: background .14s ease, border-color .14s ease;
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-langcurr:hover .trinico-hdr-pill {
  background: var(--h-strip-hover);
  border-color: rgba(255, 255, 255, .55);
}


/* ==========================================================================
   Utility strip, second pass. 20 September 2026.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEIGHT. The strip was 48px because 44px targets were forced into it. That
   floor is our house TOUCH convention; this strip is display:none below 700px,
   so it is pointer-only. WCAG 2.2 SC 2.5.8 requires 24px and these are 32px.

   Measured live on 20 September 2026, true dark utility strips:
     DigitalOcean 38px over a 72px header
     Hetzner      40px pre-header
     Afrihost     60px dark nav-pre over a 100px nav
   40px sits on the field median. Header total goes 109px to 100px.

   The house deliverable audit will flag these 32px controls. That is a known,
   deliberate exception with a number behind it, not an oversight.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr,
header#header.trinico-hdr .trinico-hdr-strip button.trinico-hdr-sbtn.trinico-langcurr:hover {
  height: 32px !important;
  padding: 0 2px !important;
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-langcurr .trinico-hdr-pill {
  height: 26px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   THE SIGNED-IN CONTROLS. These were lifted verbatim from the old header so
   their popover JS would keep working, and that was right. What I missed is
   that they were styled by `header.header .topbar` rules, and the topbar no
   longer exists. With nothing matching them they fell back to Bootstrap:
   .btn renders dark text on our dark strip, and .input-group-text draws a
   light grey box. The result was an illegible strip for every signed-in
   client, which is exactly what the CEO reported.

   Everything below paints them as strip furniture. Contrast is against
   #13202E and every value clears 4.5:1.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .trinico-hdr-strip .btn,
header#header.trinico-hdr .trinico-hdr-strip .btn:hover,
header#header.trinico-hdr .trinico-hdr-strip .btn:focus,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark:hover,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark:focus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--h-strip-ink);            /* 14.58:1 */
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
header#header.trinico-hdr .trinico-hdr-strip .btn:hover,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark:hover {
  background: var(--h-strip-hover);
  color: #ffffff;
}
header#header.trinico-hdr .trinico-hdr-strip .btn i,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark i { font-size: 13px; line-height: 1; }

/* "Logged in as:" was a white Bootstrap input-group box on a dark bar */
header#header.trinico-hdr .trinico-hdr-strip .input-group,
header#header.trinico-hdr .trinico-hdr-strip .input-group-prepend,
header#header.trinico-hdr .trinico-hdr-strip .btn-group {
  display: inline-flex;
  align-items: center;
  width: auto;
  background: transparent;
  border: 0;
}
header#header.trinico-hdr .trinico-hdr-strip .input-group-text {
  background: transparent;
  border: 0;
  padding: 0 8px 0 4px;
  color: var(--h-strip-ink-dim);        /* #C2D3E4, 10.35:1 */
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1px;
}

/* the client name, with the initials chip the old header drew via data-initials */
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client {
  max-width: 230px;
  overflow: hidden;
  color: #ffffff;                       /* 16.1:1 */
  font-weight: 600;
}
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client::before {
  content: attr(data-initials);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--h-green);
  color: var(--h-ink-on-green);         /* 8.40:1 */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin {
  background: var(--h-orange, #FF6600);
  color: #13202E;                       /* 5.62:1 */
  font-weight: 700;
}
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin:hover {
  background: #ff7a1f;
  color: #13202E;
}

/* Every strip button shares one gap, set on .btn above. The notifications
   button used to carry its own 6px, which meant the dark-mode button beside
   it sat 1px differently. One value, one place. */

@media (max-width: 991px) {
  header#header.trinico-hdr .trinico-hdr-strip .input-group-text { display: none; }
  header#header.trinico-hdr .trinico-hdr-strip .btn-active-client { max-width: 150px; }
}


/* ==========================================================================
   STICKY, done properly. 20 September 2026.

   It never worked. `position: sticky` was on .trinico-hdr-row, whose
   containing block is header#header at 109px, and a sticky box can only stick
   inside its parent. Measured: at scrollY 600 the row sat at -552. The
   property was applied and did nothing, on every page, signed in or out.

   The header itself is the sticky element now, offset upward by the strip's
   height. The strip scrolls away, the product row pins at the top, and the
   sticky element's height never changes, so nothing shifts. body is
   overflow-x: clip rather than hidden, which is what makes this possible at
   all; clip does not create a scroll container. Never change that to hidden.
   ========================================================================== */
header#header.trinico-hdr {
  position: sticky;
  top: -40px;                 /* exactly the strip height: it scrolls off, the row stays */
  z-index: 500;
}
header#header.trinico-hdr .trinico-hdr-row {
  position: relative;         /* was sticky, which could never work from here */
  top: auto;
}
/* the shadow arrives once the row is actually pinned, never at rest */
header#header.trinico-hdr .trinico-hdr-row { box-shadow: none; }
header#header.trinico-hdr.is-pinned .trinico-hdr-row { box-shadow: var(--h-shadow); }

@media (max-width: 699px) {
  /* the strip is hidden here, so there is nothing to scroll away */
  header#header.trinico-hdr { top: 0; }
}


/* ==========================================================================
   The reason sticky only lasted one screen. 20 September 2026.

   The Nexus parent's theme.min.css carries `body, html { height: 100% }`, so
   body's BOX is one viewport tall while its content scrolls on. A sticky
   element cannot travel past its containing block, so the header unstuck at
   exactly 840px: body's 900px box minus the 60px row. Measured by binary
   search on the live page.

   height:auto with min-height:100% keeps the "at least one viewport" intent
   and lets the box grow with the content. Checked before changing it: nothing
   that is a direct child of body relies on a percentage height. The nine
   height:100% rules in the theme are all inside modals, overlays and iframes,
   which resolve against their own containing blocks.

   This is a child-theme override. The parent is not touched.
   ========================================================================== */
html, body { height: auto; min-height: 100%; }

/* --------------------------------------------------------------------------
   The logo was 44px in a 60px row, which is 73% of the bar and read as
   oversized beside 14px nav labels. 34px puts the mark at about 146px wide
   from its 600x140 source and lets the navigation lead, which is what the
   measured field does: the registrar we looked at runs a modest mark in a
   64px bar with the products carrying the row.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   The logo, and the dark-mode swap. Ruled by the Director 20 September 2026:
   Website Design Team/Correspondence/2026-09-20-Director-ruling-dark-mode-header-logo.md

   The box is PINNED in both modes rather than left to the images' intrinsic
   sizes. The two official files happen to be identical at 600x87, so the swap
   would not move anything today, but pinning makes the no-jump guarantee
   structural: if either asset is ever replaced with one of a different
   intrinsic size, the header still cannot shift.

   207 x 30 is the 6.8966 aspect of the official horizontal mark at a 30px cap.
   object-fit keeps the artwork correct inside that box whatever it is.

   header-logo-white.svg is NOT used here. It is a different lockup at aspect
   4.2976 and swapping to it would move the logo about 78px.
   -------------------------------------------------------------------------- */
header#header.trinico-hdr .navbar-brand img {
  width: 207px;
  height: 30px;
  max-height: 30px;
  object-fit: contain;
  object-position: left center;
}
body.tc-dark header#header.trinico-hdr .navbar-brand img {
  content: url("/templates/trinico/images/logos/trinico-horizontal-white-600.png");
  width: 207px;
  height: 30px;
}
@media (max-width: 699px) {
  header#header.trinico-hdr .navbar-brand img,
  body.tc-dark header#header.trinico-hdr .navbar-brand img {
    width: 179px;
    height: 26px;
    max-height: 26px;
  }
}


/* ==========================================================================
   Signed-in strip, descendants. 20 September 2026.

   Reported by the CEO and reproduced locally: four controls rendering at
   1.69:1 on the dark strip. All four were #444444, the old
   --trinico-header-text token, inherited by the ELEMENTS INSIDE the controls.
   I had coloured the button and the link; the <i> and <span> inside them kept
   their own colour and I never checked a descendant.

   The old .topbar CSS used a `*` catch-all for exactly this reason. This is
   the same idea, scoped so it cannot reach the green pill or the initials
   chip, both of which carry their own ink on their own fill.
   ========================================================================== */
header#header.trinico-hdr .trinico-hdr-strip .btn i,
header#header.trinico-hdr .trinico-hdr-strip .btn svg,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark i,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark span,
header#header.trinico-hdr .trinico-hdr-strip .btn span,
header#header.trinico-hdr .trinico-hdr-strip a i,
header#header.trinico-hdr .trinico-hdr-strip a svg,
header#header.trinico-hdr .trinico-hdr-strip a span:not(.trinico-hdr-pill),
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client span,
header#header.trinico-hdr .trinico-hdr-strip .btn-group .btn i {
  color: inherit !important;
  opacity: 1;
}

/* Font Awesome duotone draws a second layer at 40% by default, which is what
   made the switch-account glyph look washed out even once it inherited. */
header#header.trinico-hdr .trinico-hdr-strip .fad,
header#header.trinico-hdr .trinico-hdr-strip .fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .7;
}

/* the two controls that must NOT inherit, because they sit on their own fill */
header#header.trinico-hdr .trinico-hdr-strip .trinico-langcurr .trinico-hdr-pill {
  color: var(--h-strip-ink) !important;   /* 14.58:1 on the strip */
}
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client::before {
  color: var(--h-ink-on-green) !important; /* 8.40:1 on brand green */
}
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin,
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin i,
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin span {
  color: #13202E !important;               /* 5.62:1 on brand orange */
}

/* the mail address on the left, and its envelope */
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-mail,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-mail i {
  color: var(--h-strip-ink-dim) !important; /* #C2D3E4, 10.35:1 */
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-mail:hover,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-mail:hover i {
  color: #ffffff !important;
}


/* The same descendant fault, one row down. The cart glyph kept #444444, which
   passes on the white product row (9.74:1) and fails in the client area's dark
   mode (1.78:1). Icons take the colour of the control that holds them. */
header#header.trinico-hdr .trinico-hdr-icon i,
header#header.trinico-hdr .trinico-hdr-icon svg,
header#header.trinico-hdr .trinico-hdr-burger i,
header#header.trinico-hdr .trinico-hdr-burger svg,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a i,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a .trinico-mi-icon {
  color: inherit !important;
}


/* ==========================================================================
   Hover and current, made authoritative. 20 September 2026.

   Reported by the CEO: main menu text disappeared on hover. Measured on the
   live page: the label computed to rgb(255,255,255) at opacity .75 on a white
   row, a contrast of 1.0. Invisible.

   Three rules were competing for the hover colour and mine was the only one
   without !important, so it lost every time:
     theme.min.css   a:hover                     -> #0056b3
     drawer.css      #mainNavbar ... a:hover      -> #1B77C9 !important
     hooks.php inline #mainNavbar ... a:hover     -> #fff !important, opacity .75 !important

   The inline one has been corrected at source, because it was written for the
   old header where the row was blue. These carry !important so the header's
   own stylesheet is the last word on its own hover state whatever else loads.
   ========================================================================== */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:hover,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:focus,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:hover .trinico-mi-label,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:focus .trinico-mi-label,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > a .trinico-mi-label {
  color: var(--h-nav-ink-on) !important;   /* #1A5FAF, 5.81:1 on the #f1f5fa hover fill */
  opacity: 1 !important;
  background-color: var(--h-nav-hover-bg);
}
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a[aria-current="page"],
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a[aria-current="page"] .trinico-mi-label,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.active > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.active > a .trinico-mi-label {
  color: var(--h-nav-ink-on) !important;   /* 6.36:1 on white */
  opacity: 1 !important;
}
/* the resting label must also win, or it inherits whatever loaded last */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a .trinico-mi-label {
  color: var(--h-nav-ink);                 /* 9.60:1 on white */
  opacity: 1;
}


/* ==========================================================================
   Everything else that sticks must clear the header. 20 September 2026.

   Reported by the CEO: the client area's left and right rail cards slid
   underneath the sticky menu. They are sticky themselves, at top:14px, which
   was measured from the viewport and therefore from behind the header.

   Measured in the generated theme stylesheet:
     .tc-app.tc-dash .tc-rail                    { position:sticky; top:14px }
     #order-standard_cart .cart-sidebar.tc-has-nav { position:sticky; top:14px }

   The stuck height is stated once here and everything else derives from it,
   so there is one number to change if the row height ever moves. It matches
   scroll-padding-top, which is what keeps a focused field from landing behind
   the header (SC 2.4.11).
   ========================================================================== */
:root {
  --tc-header-stuck: 60px;   /* the product row; the strip scrolls away */
  --tc-sticky-gap: 16px;
}
@media (max-width: 699px) {
  :root { --tc-header-stuck: 57px; }
}

/* Every sticky thing on the site, found by grepping all four stylesheets for
   `position: sticky` rather than by guessing at names. .trinico-appside is the
   client area's LEFT rail and it declares position:sticky at the END of a long
   rule, which is why a first, narrower search missed it and only the right
   rail was corrected. */
.tc-app.tc-dash .tc-rail,
.tc-app .tc-rail,
.trinico-appside,
#order-standard_cart .cart-sidebar.tc-has-nav,
.sticky-top {
  top: calc(var(--tc-header-stuck) + var(--tc-sticky-gap)) !important;
}

/* The generated stylesheet also carries `header.header{position:sticky;top:0;
   z-index:1030}` from the old header. This file has been overriding its `top`
   since Direction C shipped; match its z-index so the header is reliably above
   the rails and any other sticky content, whichever stylesheet loads last. */
header#header.trinico-hdr { z-index: 1030; }


/* ==========================================================================
   Nav items must not move on hover. 20 September 2026.

   Reported by the CEO: the menu text jumped on mouse over. Measured on the
   live page, hovering "Hosting":

     padding-left  8px -> 0px
     width       88.8 -> 80.8px
     the label shifted 8px left, and every item after it moved with it

   Two hover rules were changing the geometry, both with !important, both
   written for the mobile drawer rather than the desktop bar:

     drawer.css    #mainNavbar ... a:hover -> padding-left: 28px !important
     inline block  #mainNavbar ... a:hover -> padding-left: inherit !important

   `inherit` resolved to the li's 0px, which is where the 8px jump came from.
   The same inline rule also carries `background: transparent !important`,
   which was silently cancelling the hover fill, so there was no hover
   feedback at all.

   Geometry is pinned here for every state. A menu item changes COLOUR on
   hover and nothing else; it must never change size, position or weight,
   because that moves its neighbours.
   ========================================================================== */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:link,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:visited,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:hover,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:focus,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:active,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.show > a {
  padding: 0 8px !important;
  margin: 0 !important;
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.1px !important;
  border: 0 !important;
  transform: none !important;
}

/* the hover fill, which the same inline rule was cancelling */
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:hover,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a:focus,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li:hover > a,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li.show > a {
  background-color: var(--h-nav-hover-bg) !important;
  background-image: none !important;
}




/* ==========================================================================
   Dark mode, restored. 20 September 2026. CSS only; the markup is untouched.

   The moon button has carried `.tc-darktoggle{display:none!important;}` from
   hooks.php since before this rebuild, and the real control was a switch that
   JavaScript injects into `.dropdown.account .dropdown-menu`. Direction C
   dropped $secondaryNavbar, which WAS that dropdown, so the switch had no host
   and dark mode became unreachable.

   `.trinico-hdr-dark` has been ADDED TO THE SAME SELECTOR LISTS as the strip's
   .btn above, rather than given a parallel set of values. One declaration
   block styles both, so the dark-mode button and the notifications button
   beside it cannot drift apart: change one, both change.

   The only thing declared here is the reversal of the display:none, and only
   for our instance, so any other copy of the moon button stays hidden.
   ========================================================================== */
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark {
  display: inline-flex !important;
}
@media (max-width: 1100px) {
  header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark-text { display: none; }
}


/* ==========================================================================
   ONE TYPE, ONE INK, across the whole strip. 20 September 2026.

   Measured before this rule, the bar carried THREE colours, TWO sizes and two
   different letter-spacings:

     #EAF2F9 13px    Help, Contact us, Service status, Dark mode, notifications
     #C2D3E4 12.5px  "Logged in as:"          (dimmer AND smaller AND lighter)
     #C2D3E4 13px    support@trinico.cloud    (dimmer)
     #ffffff 13px    the client name          (brighter)
     mixed           letter-spacing normal vs .1px

   That is four typographic decisions in a 40px bar, and it read as four
   different systems. One value each now, declared once.

   The only things that keep their own ink are the two controls that sit on
   their own coloured fill, because they must: the initials chip on brand green
   and Return to admin on brand orange. Those are re-asserted below, after the
   blanket rule, so the exception is visible rather than accidental.
   ========================================================================== */
header#header.trinico-hdr .trinico-hdr-strip,
header#header.trinico-hdr .trinico-hdr-strip a,
header#header.trinico-hdr .trinico-hdr-strip button,
header#header.trinico-hdr .trinico-hdr-strip label,
header#header.trinico-hdr .trinico-hdr-strip span,
header#header.trinico-hdr .trinico-hdr-strip .btn,
header#header.trinico-hdr .trinico-hdr-strip .input-group-text,
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-mail,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-dark {
  font-family: Montserrat, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .1px !important;
  color: var(--h-strip-ink) !important;   /* 14.58:1 light, 15.65:1 dark */
}

/* Icons keep their own family, obviously, but take the same ink and optical
   size as the words they sit beside. */
header#header.trinico-hdr .trinico-hdr-strip i,
header#header.trinico-hdr .trinico-hdr-strip svg {
  font-family: inherit;
  color: var(--h-strip-ink) !important;
  font-size: 13px !important;
  opacity: 1 !important;
}
header#header.trinico-hdr .trinico-hdr-strip .fa,
header#header.trinico-hdr .trinico-hdr-strip .fas,
header#header.trinico-hdr .trinico-hdr-strip .far,
header#header.trinico-hdr .trinico-hdr-strip .fad,
header#header.trinico-hdr .trinico-hdr-strip .fal,
header#header.trinico-hdr .trinico-hdr-strip .fab {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Duotone", "Font Awesome 6 Free" !important;
}
header#header.trinico-hdr .trinico-hdr-strip .fad,
header#header.trinico-hdr .trinico-hdr-strip .fa-duotone {
  font-family: "Font Awesome 6 Duotone" !important;
  letter-spacing: .1px !important;   /* no visual effect on a single glyph; set so the bar reports one value */
}

/* hover: one ink for every control on the bar */
header#header.trinico-hdr .trinico-hdr-strip a:hover,
header#header.trinico-hdr .trinico-hdr-strip a:hover span,
header#header.trinico-hdr .trinico-hdr-strip a:hover i,
header#header.trinico-hdr .trinico-hdr-strip button:hover,
header#header.trinico-hdr .trinico-hdr-strip button:hover span,
header#header.trinico-hdr .trinico-hdr-strip button:hover i,
header#header.trinico-hdr .trinico-hdr-strip .btn:hover,
header#header.trinico-hdr .trinico-hdr-strip .btn:hover span,
header#header.trinico-hdr .trinico-hdr-strip .btn:hover i {
  color: #ffffff !important;              /* 16.1:1 */
}

/* THE TWO DELIBERATE EXCEPTIONS, re-asserted after the blanket rule. */
header#header.trinico-hdr .trinico-hdr-strip .btn-active-client::before {
  color: var(--h-ink-on-green) !important;   /* 8.40:1 on #ABC441 */
  font-family: Montserrat, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin,
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin:hover,
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin i,
header#header.trinico-hdr .trinico-hdr-strip .btn-return-to-admin span {
  color: #13202E !important;                 /* 5.62:1 on #FF6600 */
}


/* ==========================================================================
   Log out. CEO, 20 September 2026. Green, to the right of the client name.

   Brand green with DARK ink. Green takes #13202E at 8.40:1; white on it is
   1.96:1 and is the exact failure DESIGN.md names by number, so it is never
   used. Sized to the strip's 32px like every other control on the bar, not to
   the 44px of the product row, because it lives in the strip.
   ========================================================================== */
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  margin-left: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--h-green);
  color: var(--h-ink-on-green) !important;   /* 8.40:1 */
  font-family: Montserrat, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: filter .16s cubic-bezier(.22, 1, .36, 1);
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout:hover,
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout:focus {
  background: var(--h-green) !important;
  color: var(--h-ink-on-green) !important;
  filter: brightness(1.06);
  text-decoration: none;
}
header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout i {
  color: var(--h-ink-on-green) !important;
  font-size: 12.5px !important;
}
@media (prefers-reduced-motion: reduce) {
  header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout { transition: none; }
}
@media (max-width: 1100px) {
  header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout-text { display: none; }
  header#header.trinico-hdr .trinico-hdr-strip .trinico-hdr-logout { padding: 0 10px; }
}


/* ==========================================================================
   One arrow per menu item, not two. CEO, 20 September 2026.

   Bootstrap draws its own caret on .dropdown-toggle as an ::after built from
   borders: an 8x4 solid triangle, border-top 4px solid, with a 3.57px left
   margin. navbar.tpl also renders our own 10x6 SVG chevron. Both were showing,
   so every dropdown item carried two arrows.

   Ours is the one that stays: it is a stroked chevron that matches the rest of
   the header's line weight, it rotates on open, and it inherits currentColor
   so it follows the label through hover and dark mode. Bootstrap's is a filled
   triangle that does none of that.

   Scoped to this header only. Dropdowns elsewhere, the client area and the
   cart, keep Bootstrap's caret because they have no SVG of their own.
   ========================================================================== */
header#header.trinico-hdr .dropdown-toggle::after,
header#header.trinico-hdr .trinico-hdr-nav .navbar-nav > li > a.dropdown-toggle::after,
header#header.trinico-hdr .trinico-hdr-util .dropdown-toggle::after,
header#header.trinico-hdr .trinico-hdr-strip .dropdown-toggle::after {
  display: none !important;
}


/* ==========================================================================
   The closed drawer must be inert, not merely off to the right.

   drawer.css parks it with `right:0; width:100vw; transform:translateX(100%)`.
   Measured at a 390px viewport on 20 September 2026 the closed drawer occupies
   x 380 to 770, so 10px of it is still inside the viewport. It did not show
   while the nav above it was display:none, and it does now that the nav is
   rendered again, so this is a consequence of that fix and is closed with it.

   visibility, not display: display:none would kill the slide-in, which is the
   whole point of the transform. visibility:hidden keeps the box laid out so
   the transition still runs, paints nothing, and takes it out of hit testing.
   .collapsing is excluded because Bootstrap sets that class DURING the open,
   before .show lands; hiding it then would make the drawer flash in from
   nowhere instead of sliding.
   ========================================================================== */
@media (max-width: 1199.98px) {
  header#header.trinico-hdr .trinico-hdr-nav #mainNavbar.collapse:not(.show):not(.collapsing) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  header#header.trinico-hdr .trinico-hdr-nav #mainNavbar.collapse.show,
  header#header.trinico-hdr .trinico-hdr-nav #mainNavbar.collapsing {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* WCAG 2.2 SC 2.5.8, 24px minimum. The drawer's contact line renders its
     links at 20px tall. Measured 20px on 20 September 2026, the only target
     under 24px anywhere in the drawer. Padding rather than a height, so the
     line does not grow and the layout is untouched. */
  #mainNavbar .trinico-drawer-contact a {
    min-height: 24px;
    padding-block: 2px;
    align-items: center;
  }
}


/* ==========================================================================
   No divider lines inside a dropdown. CEO, 20 September 2026.

   The panel reset zeroed borders on `li`, but Bootstrap does not draw a
   divider on an li. It emits its own element:

     <div class="dropdown-divider">   border-top: 1px solid #e9ecef

   A div, so `.trinico-hdr-panel li { border: 0 }` never touched it. That is
   why the signed-out home page measures zero dividers while other menus show
   lines, and why it looked like only "some" dropdowns had them.

   Two sources feed these. WHMCS inserts dividers into its own stock menus at
   runtime, and the menu config carries two `is_divider` entries of its own in
   the Account dropdown. Hiding the rendered element closes both at once,
   rather than chasing each source.

   Scoped to this header. Dividers elsewhere on the site are untouched.
   ========================================================================== */
header#header.trinico-hdr .dropdown-divider,
header#header.trinico-hdr .divider,
header#header.trinico-hdr .trinico-hdr-panel hr,
header#header.trinico-hdr .dropdown-menu hr,
header#header.trinico-hdr .trinico-hdr-panel li.divider,
header#header.trinico-hdr .dropdown-menu > li.divider {
  display: none !important;
}

/* Belt and braces: anything inside a panel that still tries to draw a hairline
   with a top or bottom border has it removed. The panel's own outer border is
   set on .trinico-hdr-panel itself and is not affected by this. */
header#header.trinico-hdr .trinico-hdr-panel > *,
header#header.trinico-hdr .trinico-hdr-panel li,
header#header.trinico-hdr .trinico-hdr-panel a {
  border-top: 0 !important;
  border-bottom: 0 !important;
}