/* The product switcher on every product page (markup: src/templates/suite-switcher.mjs; behaviour:
   /assets/suite-switcher.js). Navigation option B, approved 2026-10-09 (prototype:
   easysuite-home-directions/nav-options/site-b).
   The product logo in each header gets a small chevron button. It opens a panel with "EasySuite home" and the
   three products, each with its approved one-line description. The logo and the button share one flex item
   (.suite-brand), so the header's own layout is unchanged. Disclosure pattern: a real <button> with
   aria-expanded and aria-controls, plain links inside; Escape, a click outside and tabbing away close it,
   and the arrow keys move between the links. Closed, the panel is display: none, so it covers nothing.
   Each product page sets the --sw-* variables below. */

/* The EasySuite logo: "Rising Tiles" (/brand/easysuite-logo.svg). Its wordmark caps are 56% of its height and
   its baseline sits at 78% of its height, so set inline it is lowered by the remaining 22% to share the
   baseline of the words beside it. */
.suite-logo {
  display: inline-block; width: auto; height: var(--suite-logo-h, 24px);
  vertical-align: calc(var(--suite-logo-h, 24px) * -0.2167);
}

.suite-brand { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
.suite-switch__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the chevron */
.suite-switch__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: 0 0 0 2px;
  background: transparent; border: 1px solid var(--sw-rule); border-radius: var(--sw-r-sm);
  color: #003282; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}
.suite-switch__chev {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s cubic-bezier(.23, 1, .32, 1);
}
.suite-switch__btn:hover { background: var(--sw-tint); border-color: var(--sw-rule-2); }
.suite-switch__btn[aria-expanded="true"] { background: var(--sw-tint); border-color: var(--sw-rule-2); }
.suite-switch__btn[aria-expanded="true"] .suite-switch__chev { transform: rotate(180deg); }
@media (pointer: coarse) { .suite-switch__btn { width: 34px; height: 34px; } }
.suite-nowrap { white-space: nowrap; }

/* the panel */
.suite-switch__panel {
  position: absolute; z-index: 60; top: calc(100% + 14px); left: 0;
  width: min(400px, calc(100vw - 2 * var(--sw-gut)));
  padding: 8px;
  background: #fff; border: 1px solid var(--sw-rule); border-radius: var(--sw-r);
  box-shadow: 0 1px 1px rgba(14, 27, 61, .04), 0 4px 10px rgba(14, 27, 61, .06), 0 18px 40px rgba(14, 27, 61, .10);
  font-family: var(--sw-font); text-align: left;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .16s cubic-bezier(.23, 1, .32, 1), transform .16s cubic-bezier(.23, 1, .32, 1);
}
.suite-switch.is-open .suite-switch__panel { opacity: 1; transform: none; }
.suite-switch__panel[hidden] { display: none; }

.suite-switch__home, .suite-switch__item {
  display: block; text-decoration: none; border-radius: var(--sw-r-sm); color: inherit;
}
.suite-switch__home { padding: 14px 14px 15px; background: var(--sw-tint); }
.suite-switch__homehead { display: block; line-height: 1; white-space: nowrap; }
.suite-switch__home .suite-logo { --suite-logo-h: 26px; margin-right: 3px; }
.suite-switch__homeword { font-size: 15px; font-weight: 600; color: #003282; line-height: 1; }
.suite-switch__home .suite-switch__line { margin-top: 7px; }
.suite-switch__home:hover .suite-switch__homeword, .suite-switch__item:hover .suite-switch__name {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

.suite-switch__label { margin: 14px 14px 4px; font: var(--sw-label-font); letter-spacing: var(--sw-label-track); text-transform: var(--sw-label-case); color: var(--sw-muted); }
.suite-switch__list { margin: 0; padding: 0; list-style: none; }
.suite-switch__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 11px 14px; }
.suite-switch__item:hover { background: var(--sw-tint); }
.suite-switch__mark { width: 26px; height: 26px; object-fit: contain; margin-top: 1px; }
.suite-switch__text { display: block; min-width: 0; }
.suite-switch__name { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #003282; }
.suite-switch__here {
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: #003282;
  padding: 4px 7px; border-radius: 99px; background: var(--sw-wash);
}
.suite-switch__item:hover .suite-switch__here { text-decoration: none; }
.suite-switch__line { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--sw-muted); }
.suite-switch__panel a:focus-visible { outline: 2px solid var(--sw-focus); outline-offset: -2px; }

/* ---------- each product page ---------- */
.suite-switch--easyink {
  --sw-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sw-rule: #DADDE4; --sw-rule-2: #C3C9D5; --sw-tint: #F1F3F7; --sw-wash: #DDF5FD; --sw-muted: #5B6479; --sw-focus: #006CB3;
  --sw-r: 3px; --sw-r-sm: 3px; --sw-gut: 18px;
  --sw-label-font: 600 11px/1.2 'Public Sans', system-ui, sans-serif; --sw-label-track: .12em; --sw-label-case: uppercase;
}
.suite-switch--easydocs {
  --sw-font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --sw-rule: #dde3ec; --sw-rule-2: #cfd8e5; --sw-tint: #eef3f9; --sw-wash: #e2f3fc; --sw-muted: #56637f; --sw-focus: #003282;
  --sw-r: 4px; --sw-r-sm: 3px; --sw-gut: var(--gutter);
  --sw-label-font: 400 11.5px/1.2 "DM Mono", ui-monospace, monospace; --sw-label-track: .06em; --sw-label-case: uppercase;
}
.suite-switch--easyengage {
  --sw-font: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --sw-rule: #e2e6ed; --sw-rule-2: #cdd4de; --sw-tint: #f4f6f9; --sw-wash: #e0f5fd; --sw-muted: #5a6579; --sw-focus: #003282;
  --sw-r: 12px; --sw-r-sm: 8px; --sw-gut: var(--gut);
  --sw-label-font: 600 13px/1.3 "Mona Sans", "Helvetica Neue", Arial, sans-serif; --sw-label-track: .01em; --sw-label-case: none;
}
.suite-switch--easydocs .suite-switch__name { font-weight: 500; }

/* EasyEngage between 900 and 979px: the nav already fills the header, so it gives up a little room */
@media (min-width: 900px) and (max-width: 979px) {
  .top__in .nav { gap: 18px; }
  .top__in .logo svg { width: 158px; }
}
/* EasyDocs on the narrowest phones: the logo steps down a size and the header gap narrows to EasyEngage's 8px,
   so the chevron fits beside the logo and "Book a demo" stays on one line (at 320px with a 34px touch chevron
   the row needs 284.7px of its 288px). */
@media (max-width: 359px) {
  .top-in .brand img { height: 23px; }
  .top-in { gap: 8px; }
  .top-in .btn-sm { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .suite-switch__panel, .suite-switch__chev, .suite-switch__btn { transition: none; }
}