/*
 * Blueprint 03: desktop header 64 px, paper white, 1 px rule below, static —
 * not sticky. Mobile header 56 px with a tap-to-call icon and a menu button;
 * the sheet is a <dialog> and the only fixed element on the site is the slim
 * bar that appears after 100 vh on a phone.
 *
 * The 3 px Sulsys blue spine across the top is the one mark that appears on
 * every page of the site including the deepest product page. It costs nothing,
 * it is never decorative, and it is the reason a visitor three clicks into
 * Nexys MAT still knows whose software they are reading about.
 */

.header {
  background: var(--paper);
  border-top: 3px solid var(--blue);
  border-bottom: var(--hairline) solid var(--rule);
  position: relative;
  z-index: 3;
}

/*
 * The header is paper on every page, including the ones that open on navy.
 * V4 briefly painted it navy over the navy hero; that put the mark in white,
 * and the mark is #012A81 and #059E3D or it is not the mark. The paper header
 * is also the surface the opening lands the mark on.
 */

/* The corner the opening lands on. Its opacity is the script's to set. */
.corner {
  display: inline-flex;
  align-items: center;
}

/* The header's action: the phone, set in the document voice. */
.phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding-inline: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border: var(--hairline) solid var(--rule-strong);
  transition: border-color var(--t-colour) linear;
}

.phone:hover {
  border-color: var(--ink);
}

.inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s2);
}

/* ---- Desktop navigation ------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.list {
  display: flex;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.link {
  display: inline-block;
  padding-block: var(--s2);
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-colour) linear;
  white-space: nowrap;
}

.link:hover {
  border-bottom-color: var(--rule);
}

.link[aria-current="page"] {
  border-bottom-color: var(--blue);
  font-weight: 500;
}

.right {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/* ---- The Modulet panel: four rows, no imagery -------------------------- */

.hasPanel {
  position: relative;
}

.trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s2);
  font-size: var(--step-small);
  font-family: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-colour) linear;
}

.trigger:hover,
.trigger[aria-expanded="true"] {
  border-bottom-color: var(--blue);
}

.chev {
  font-size: 0.625rem;
  color: var(--muted);
}

.panel {
  position: absolute;
  top: calc(100% + var(--s2));
  left: calc(var(--s4) * -1);
  z-index: 40;
  min-width: 25rem;
  background: var(--paper);
  border: var(--hairline) solid var(--ink);
  list-style: none;
  margin: 0;
  padding: 0;
}

.panelRow {
  border-bottom: var(--hairline) solid var(--rule);
}

.panelRow:last-child {
  border-bottom: 0;
}

.panelLink {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--t-colour) linear;
}

.panelLink:hover {
  background: var(--paper-2);
}

.panelCode {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

.panelBrand {
  font-weight: 500;
  font-size: var(--step-small);
}

.panelName {
  display: block;
  font-size: var(--step-mono);
  color: var(--ink-2);
}

/* ---- Language switch --------------------------------------------------- */

.lang {
  display: flex;
  border: var(--hairline) solid var(--rule-strong);
}

/*
 * Four locales now, not two. The chips are two characters each, so they are
 * padded to the character rather than to a comfortable button: the header
 * already carries a logo, six navigation items, a disclosure, a channel icon
 * and a call to action, and a 44 px-per-chip switch would be 190 px of it.
 * The 44 px target comes back below 1200 px, where the switch moves into the
 * sheet and has the room for it.
 */
.langItem {
  padding: var(--s1) var(--s2);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-2);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  transition:
    background-color var(--t-colour) linear,
    color var(--t-colour) linear;
}

.langItem + .langItem {
  border-left: var(--hairline) solid var(--rule-strong);
}

.langItem:hover {
  background: var(--paper-2);
}

.langCurrent {
  background: var(--ink);
  color: var(--paper);
}

.langCurrent:hover {
  background: var(--ink);
}

/* ---- Mobile ------------------------------------------------------------- */

.mobileOnly {
  display: none;
}

.iconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: var(--hairline) solid var(--rule-strong);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--t-colour) linear;
}

.iconButton:hover {
  border-color: var(--ink);
}

.sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}

.sheet::backdrop {
  background: rgb(18 20 18 / 0.6);
}

.sheetInner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--s4) var(--pad-x) var(--s5);
  gap: var(--s5);
}

.sheetTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: var(--hairline) solid var(--rule);
}

.sheetBrand {
  display: grid;
  gap: var(--s2);
  justify-items: start;
  /* The mark, at the size it has in the header it was opened from. */
  --mark-h: 22px;
}

.sheetBrandTag {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.sheetLabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheetList {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.sheetItem {
  border-bottom: var(--hairline) solid var(--rule);
}

.sheetLink {
  display: block;
  padding: var(--s4) 0;
  min-height: 44px;
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--ink);
}

.sheetLink[aria-current="page"] {
  font-weight: 500;
}

.sheetSub {
  list-style: none;
  margin: calc(var(--s3) * -1) 0 0;
  padding: 0;
  border-top: var(--hairline) solid var(--rule);
}

.sheetSub > li {
  border-bottom: var(--hairline) solid var(--rule);
}

.sheetSubLink {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step-small);
}

.sheetFoot {
  display: grid;
  gap: var(--s3);
}

/* ---- The one fixed element: the slim mobile bar ------------------------ */

.slimBar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: var(--hairline);
  background: var(--rule);
  border-top: var(--hairline) solid var(--rule);
}

.slimBar[data-visible="true"] {
  display: grid;
  grid-template-columns: auto 1fr;
}

.slimCall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding-inline: var(--s5);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
}

.slimDemo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--s4);
  background: var(--green-ink);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/*
 * The row returns at 1024. V3.3 needed 1200 for a logo, six items, a
 * disclosure, a channel icon, four chips and a button; V4's row is a mark,
 * three words, four chips and the phone, which fits in all four languages at
 * 1024 with room to read it.
 */
@media (max-width: 1023px) {
  .langItem {
    min-height: 44px;
    padding-inline: var(--s4);
  }

  .desktopOnly {
    display: none;
  }

  .mobileOnly {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
}

@media (min-width: 1024px) {
  .slimBar {
    display: none !important;
  }
}

@media print {
  .header,
  .slimBar {
    display: none;
  }
}

/* ---- The Facebook channel ------------------------------------------------ */

/*
 * One icon, beside the language switch. Facebook is how Sulsys talks to its
 * town — it is not a product surface, so it gets a channel's weight and not a
 * card's. Posts that actually prove something are still cited where they prove
 * it, on the page that makes the claim.
 */
.channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-colour) linear;
}

.channel:hover {
  color: var(--blue);
}

.sheetChannel {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  color: var(--ink);
  font-size: var(--step-small);
  text-decoration: none;
}