/*  THE SEARCH ICON AND THE LITTLE PERSON.

    ⚠ EVERY COLOUR IS STATED. This module is dropped into five templates
    whose headers range from white to near-black, and a panel that inherits
    its text colour ends up white on white - the exact fault the translate
    control had. Backgrounds and text are set together, always.

    ⚠ AND THE ICONS ARE STROKED, NOT FILLED, so `currentColor` makes them
    follow the header's own text colour without an icon font.
*/
.macc { display: inline-flex; align-items: center; gap: .15rem; }

.macc-item { position: relative; }

.macc-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .5rem; margin: 0;
  background: none; border: 0; border-radius: 4px;
  font: inherit; font-size: .85rem; line-height: 1;
  color: inherit; cursor: pointer;
}
.macc-btn:hover, .macc-btn:focus-visible { background: rgba(127, 127, 127, .18); }

.macc-icon {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.macc-label { white-space: nowrap; }

/* ⚠ THE PANEL OPENS LEFTWARD. This row lives at the right edge of a header,
   so a panel anchored left runs off the page. */
.macc-panel {
  position: absolute; z-index: 1000; top: calc(100% + 6px); right: 0;
  min-width: 16rem; padding: .7rem;
  background: #ffffff; color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, .22); border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  text-align: left;
}
.macc-panel[hidden] { display: none; }

.macc-form { display: flex; gap: .35rem; align-items: center; }
.macc-form--stack { display: grid; gap: .45rem; }

.macc-panel input[type="search"],
.macc-panel input[type="text"],
.macc-panel input[type="password"] {
  width: 100%; padding: .4rem .5rem; font: inherit; font-size: .9rem;
  background: #ffffff; color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px;
}

.macc-panel button[type="submit"] {
  padding: .45rem .9rem; font: inherit; font-size: .85rem; font-weight: 600;
  background: #1c2647; color: #ffffff;
  border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap;
}
.macc-panel button[type="submit"]:hover { filter: brightness(1.15); }

.macc-check { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #1a1a1a; }
.macc-check input { width: auto; }

.macc-greeting { margin: 0 0 .5rem; font-size: .9rem; color: #1a1a1a; }

.macc-links { display: flex; gap: .8rem; margin: .6rem 0 0; font-size: .8rem; }
.macc-links a { color: #24506e; text-decoration: none; }
.macc-links a:hover { text-decoration: underline; }

/* Screen-reader-only, without depending on the template having a class for it. */
.macc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* On a narrow screen the words go and the icons stay. */
@media (max-width: 40rem) {
  .macc-label { display: none; }
  .macc-panel { min-width: 0; width: 84vw; }
}

/* ── THE SOCIAL ROW IN A HEADER SLOT ───────────────────────────────────────
   Not this module's markup - Helix renders `ul.social-icons` straight into a
   header position from the template style - but it lives on the same line as
   these controls and had the same fault: a default list lays the icons out
   as a block and they wrapped two-by-two in a narrow column.

   ⚠ NOWRAP AND NO LIST CHROME. The row stays a row at any column width;
   below the large breakpoint the header stacks anyway and this is moot. */
#sp-top1 ul.social-icons,
#sp-top2 ul.social-icons,
.sp-column > ul.social-icons {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: .3rem; margin: 0; padding: 0; list-style: none;
}
#sp-top1 ul.social-icons > li,
#sp-top2 ul.social-icons > li,
.sp-column > ul.social-icons > li { margin: 0; padding: 0; list-style: none; }

.sp-column > ul.social-icons a { display: inline-flex; padding: .15rem; line-height: 1; }