/*
 * ACIP login theme.
 *
 * Layered over Keycloak's own login stylesheet rather than replacing it: the
 * templates ACIP does not override (password reset, OTP, required actions,
 * error pages) still depend on the parent's structural rules, so this restyles
 * what is shared and leaves the skeleton alone.
 *
 * The palette is the portal's `--acip-*` tokens, value for value. It is
 * restated here because a Keycloak theme is served by Keycloak and cannot
 * import the application's stylesheet — the values are what is shared, not the
 * mechanism. Keep them in step with `acip-frontend/src/app/globals.css`.
 */

/*
 * Figtree, bundled rather than fetched from Google.
 *
 * A login page is the worst place for a third-party request: it blocks first
 * paint on a host outside this deployment, leaks every sign-in attempt's
 * timing to it, and fails closed in an air-gapped install. These are the same
 * variable-weight subsets `next/font` self-hosts for the portal.
 */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --acip-canvas: #f5f5f0;
  --acip-surface: #ffffff;
  --acip-line: #d9d9d9;
  --acip-ink: #1a1a1a;
  --acip-ink-muted: #4e4e4e;
  --acip-ink-disabled: #a5a5a5;
  --acip-accent: #0d8544;
  --acip-accent-hover: #0a6b37;
  --acip-accent-foreground: #ffffff;
  --acip-danger: #b42318;
  --acip-font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html,
body {
  height: 100%;
}

body {
  background: var(--acip-canvas);
  color: var(--acip-ink);
  font-family: var(--acip-font);
  margin: 0;
}

/*
 * Keycloak's own chrome, removed.
 *
 * `login-pf-page` carries the parent theme's dark polygonal artwork and
 * `#kc-header` its realm name — neither belongs to this design, and the header
 * duplicated the card's own title.
 */
.login-pf-page,
body.login-pf,
.login-pf body {
  background: var(--acip-canvas) !important;
  background-image: none !important;
}

.login-pf-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px 16px;
}

#kc-header,
#kc-header-wrapper,
.login-pf-page-header,
#kc-logo,
#kc-logo-wrapper {
  display: none !important;
}

/*
 * The card.
 *
 * Only `.card-pf` is a card. `#kc-form-wrapper` is deliberately left plain:
 * styling both produced the box-inside-a-box the previous revision rendered.
 */
.login-pf-page .card-pf {
  background: var(--acip-surface);
  border: none;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgb(16 24 40 / 6%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  max-width: 560px;
  padding: 32px;
  width: 100%;
}

#kc-content,
#kc-content-wrapper,
#kc-form,
#kc-form-wrapper {
  background: none;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ── Title ─────────────────────────────────────────────────────────────── */

.login-pf-page .login-pf-header {
  margin: 0;
  padding: 0;
}

.login-pf-page #kc-page-title {
  color: var(--acip-ink);
  font-family: var(--acip-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  margin: 0;
  text-align: start;
}

/* ── Form ──────────────────────────────────────────────────────────────── */

#kc-form-login {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#kc-form-login .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.acip-label,
#kc-form-login .control-label,
#kc-form-login .pf-c-form__label {
  color: var(--acip-ink);
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  padding: 0;
}

/*
 * Input shell.
 *
 * The border lives on the wrapper, not the input, so the leading mail glyph and
 * the trailing reveal button sit *inside* one 48px field — which is what the
 * design shows and what a border on the input alone cannot express.
 */
.acip-field {
  align-items: center;
  background: var(--acip-surface);
  border: 1px solid var(--acip-line);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  width: 100%;
}

.acip-field:focus-within {
  border-color: var(--acip-accent);
  box-shadow: 0 0 0 3px rgb(13 133 68 / 15%);
}

.acip-field--invalid {
  border-color: var(--acip-danger);
}

.acip-field__icon {
  align-items: center;
  color: var(--acip-ink-disabled);
  display: flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  width: 20px;
}

/* The parent theme styles bare inputs heavily; this undoes it inside the shell. */
.acip-field input,
.acip-field input.pf-c-form-control,
.acip-field input[type="text"],
.acip-field input[type="email"],
.acip-field input[type="password"] {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--acip-ink);
  flex: 1 1 auto;
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  height: 100%;
  line-height: 24px;
  min-width: 0;
  outline: none;
  padding: 0;
  width: 100%;
}

.acip-field input::placeholder {
  color: var(--acip-ink-disabled);
  font-weight: 500;
  opacity: 1;
}

/* Chrome's autofill repaints the input; keep the shell looking like one field. */
.acip-field input:-webkit-autofill,
.acip-field input:-webkit-autofill:hover,
.acip-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--acip-surface) inset;
  -webkit-text-fill-color: var(--acip-ink);
}

.acip-field__toggle {
  align-items: center;
  background: none;
  border: none;
  color: var(--acip-ink-muted);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  padding: 0;
  width: 20px;
}

.acip-field__toggle:hover {
  color: var(--acip-ink);
}

/* ── Password group + forgot link ──────────────────────────────────────── */

.acip-password-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acip-forgot {
  text-align: end;
}

/* Anchor and button both, so wiring the control to Keycloak's reset flow later
   is a one-line change in login.ftl needing no stylesheet edit. The button
   resets the chrome a <button> carries by default — background, border, padding
   — so it is indistinguishable from the link it stands in for. */
.acip-forgot a,
.acip-forgot button {
  background: none;
  border: 0;
  color: var(--acip-ink-muted);
  cursor: pointer;
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 0;
  text-decoration: none;
}

.acip-forgot a:hover,
.acip-forgot button:hover {
  color: var(--acip-ink);
  text-decoration: underline;
}

/* ── reCAPTCHA row ─────────────────────────────────────────────────────── */

/*
 * Row plus its message, 8px apart — the portal's `RecaptchaRow` wraps the two
 * the same way. Without a wrapper the message was a direct child of
 * `#kc-form-login`, so it took that column's 24px gap instead of belonging to
 * the control it describes.
 */
.acip-recaptcha-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acip-recaptcha {
  align-items: center;
  background: var(--acip-surface);
  border: 1px solid var(--acip-line);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  width: 100%;
}

/* Marked like any other field the form is holding back on. */
.acip-recaptcha--invalid {
  border-color: var(--acip-danger);
}

.acip-recaptcha--invalid .acip-recaptcha__box {
  border-color: var(--acip-danger);
}

.acip-recaptcha__control {
  align-items: center;
  display: flex;
  gap: 16px;
}

.acip-recaptcha__box {
  appearance: none;
  -webkit-appearance: none;
  background: var(--acip-surface);
  border: 1px solid var(--acip-ink-disabled);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  height: 24px;
  margin: 0;
  position: relative;
  width: 24px;
}

.acip-recaptcha__box:checked {
  background: var(--acip-accent);
  border-color: var(--acip-accent);
}

.acip-recaptcha__box:checked::after {
  border: solid var(--acip-accent-foreground);
  border-width: 0 2px 2px 0;
  content: "";
  height: 10px;
  left: 8px;
  position: absolute;
  top: 4px;
  transform: rotate(45deg);
  width: 5px;
}

.acip-recaptcha__box:focus-visible {
  outline: 2px solid var(--acip-accent);
  outline-offset: 2px;
}

.acip-recaptcha__label {
  color: var(--acip-ink);
  cursor: pointer;
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  /*
   * Patternfly styles bare labels — `label { margin-bottom: 5px }` — and a
   * class that never mentions margin does not displace it. In a row centred
   * with `align-items: center` the flex item's *margin* box is what gets
   * centred, so those 5px lifted the text about 2.5px clear of the checkbox
   * beside it. `.acip-label` already zeroes this for the field labels; the
   * reCAPTCHA label was the one that did not.
   */
  margin: 0;
}

.acip-recaptcha__brand {
  align-items: center;
  display: flex;
  flex-direction: column;
  /* `shrink-0` in the portal's own row: the badge is a fixed block, and left
     shrinkable its two captions wrap inside a narrow card. */
  flex-shrink: 0;
  gap: 2px;
}

.acip-recaptcha__brand-name {
  color: #555555;
  font-family: var(--acip-font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 11.7px;
  text-align: center;
}

.acip-recaptcha__brand-legal {
  color: #a1a1aa;
  font-family: var(--acip-font);
  font-size: 8px;
  font-weight: 400;
  line-height: 9.6px;
  text-align: center;
}

/* ── Actions ───────────────────────────────────────────────────────────── */

.acip-actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#kc-form-buttons {
  margin: 0;
  padding: 0;
  width: 100%;
}

.login-pf-page #kc-login,
.login-pf-page input[type="submit"].acip-submit {
  align-items: center;
  background: var(--acip-accent);
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--acip-accent-foreground);
  cursor: pointer;
  display: flex;
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  line-height: 24px;
  padding: 0 16px;
  text-align: center;
  transition: background-color 0.15s ease-in-out;
  width: 100%;
}

.login-pf-page #kc-login:hover {
  background: var(--acip-accent-hover);
}

.acip-register {
  color: var(--acip-ink-muted);
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  text-align: center;
}

.acip-register a {
  color: var(--acip-accent);
  text-decoration: none;
}

.acip-register a:hover {
  text-decoration: underline;
}

/* ── Messages ──────────────────────────────────────────────────────────── */

.acip-field-error,
#kc-form-login .pf-c-form__helper-text,
#kc-form-login .kc-feedback-text {
  color: var(--acip-danger);
  display: block;
  font-family: var(--acip-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/*
 * `hidden` has to keep working, and the rule above is why it did not.
 *
 * Patternfly carries `[hidden] { display: none }` — one class of specificity,
 * same as `.acip-field-error`, and this stylesheet loads after it, so
 * `display: block` won and the reCAPTCHA message stayed a rendered element
 * whenever it was empty. Being a flex child of `.acip-recaptcha-group` it then
 * drew that column's gap out of thin air, which is the loose space that sat
 * under the "I'm not a robot" row on a page with nothing wrong with it. The
 * script toggles the attribute, so honouring it is all this needs.
 */
.acip-field-error[hidden] {
  display: none;
}

.login-pf-page .alert,
.login-pf-page .pf-c-alert {
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--acip-font);
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 8px;
  padding: 12px 16px;
}

.login-pf-page .alert-error,
.login-pf-page .pf-m-danger {
  background: #fef3f2;
  border-color: #fecdca;
  color: var(--acip-danger);
}

.login-pf-page .alert-success,
.login-pf-page .pf-m-success {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.login-pf-page .alert-warning,
.login-pf-page .pf-m-warning {
  background: #fffaeb;
  border-color: #fedf89;
  color: #b54708;
}

/* A visible focus ring everywhere: it is a keyboard user's only cue to position. */
.login-pf-page a:focus-visible,
.login-pf-page button:focus-visible,
.login-pf-page input:focus-visible {
  outline: 2px solid var(--acip-accent);
  outline-offset: 2px;
}

/*
 * ...except inside a field shell, which already has one.
 *
 * `.acip-field:focus-within` recolours the shell's border and lays a 3px green
 * ring around it. The rule above then drew a *second* green rectangle on the
 * input itself, offset 2px — one green panel nested in another, on Email and
 * Password both, and on Email from the moment the page loaded because it is
 * autofocused. The `outline: none` set with the input's other resets could not
 * hold it off: `.acip-field input` carries one class where
 * `.login-pf-page input:focus-visible` carries two.
 *
 * Must stay after that rule — it matches with the same specificity and wins on
 * order alone. Nothing is lost accessibly: the shell's border and ring are the
 * focus indicator, and they are the one the design draws.
 */
.acip-field input:focus-visible {
  outline: none;
}

/* Arabic is served RTL; the parent theme sets `dir` on <html>. */
html[dir="rtl"] .acip-forgot {
  text-align: start;
}

@media (max-width: 575px) {
  .login-pf-page .card-pf {
    border-radius: 16px;
    padding: 24px;
  }

  .acip-recaptcha {
    padding: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Page shell — header, main, footer.
 *
 * Mirrors the portal's own `Navbar` and `Footer` components measure for
 * measure (px-32/py-4 header, 1760px footer at 80px/72px, Manrope headings),
 * so the two chromes cannot drift visibly apart.
 * ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --acip-chip: #f0fdf4;
  --acip-chip-border: #bbf7d0;
  --acip-chip-foreground: #15803d;
  --acip-ink-strong: #0a0a0a;
  --acip-accent-subtle: rgb(13 133 68 / 0.1);
  --acip-font-manrope: "Manrope", "Figtree", system-ui, sans-serif;
}

/* The shell owns page height so the footer sits below the fold, never floating
   up into a short page. */
.acip-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.acip-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/*
 * The national flag, as an image and not as the flag emoji.
 *
 * A flag emoji is two Regional Indicator code points, and whether a font draws
 * them as a picture or falls back to the bare two-letter code is the platform's
 * choice: Windows 10 and several Linux emoji fonts ship no flag glyphs at all,
 * so the same markup showed a flag on some machines and the letters "BF" on
 * others. The portal settled this for itself long ago — every flag it renders
 * comes from the `flag-icons` SVG set — and this is the same file from that set,
 * bundled here for the same reason the fonts are: a login page must not depend
 * on a request leaving the deployment.
 *
 * The geometry is `flag-icons`' own, so a flag beside a wordmark is the same
 * shape here as on the portal's header: sized from `font-size`, one line tall,
 * and 4:3 wide. Each slot below therefore sets only a size.
 */
.acip-flag {
  background-image: url("../flags/bf.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  flex-shrink: 0;
  line-height: 1em;
  position: relative;
  width: 1.333333em;
}

/*
 * What gives the element its height, and it is not optional.
 *
 * The flag is a background image on an empty span, so the box has no content
 * to generate a line box and `line-height` has nothing to apply to — the
 * element would lay out one line wide and zero high, and the flag would not
 * appear at all.
 *
 * A non-breaking space and not a plain one, which is the same character
 * `flag-icons` uses here: a lone ordinary space is collapsible white space, so
 * it can be dropped and take the line box with it. Written as an escape rather
 * than the literal character so it survives a re-encoding of this file.
 */
.acip-flag::before {
  content: "\00a0";
}

/* ── Header ────────────────────────────────────────────────────────────── */

.acip-header {
  background: var(--acip-surface);
  border-bottom: 1px solid var(--acip-accent);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 50;
}

.acip-header__inner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 16px 24px;
  width: 100%;
}

.acip-header__brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

/*
 * The pressable part of the brand — the flag and the wordmark, nothing else.
 *
 * Carries the row's own 12px gap so wrapping the two in a link changes no
 * spacing: what used to be one gap between siblings of `.acip-header__brand`
 * is now the link's internal gap, and the row's remaining gaps still separate
 * it from the tagline and the chip.
 *
 * `hover:opacity-80` and the small radius are the portal's `Navbar` brand
 * link, value for value, so the one control the two headers share also
 * responds the same way.
 *
 * The focus ring is declared here rather than inherited. This header sits
 * outside `.login-pf-page`, so the stylesheet's own
 * `.login-pf-page a:focus-visible` rule does not reach it — and a link that is
 * the only way off this page must not be invisible to a keyboard.
 */
.acip-header__brand-link {
  align-items: center;
  border-radius: 4px;
  display: flex;
  gap: 12px;
  min-width: 0;
  /*
   * Removes the translucent grey box a tap draws on iOS and Android. The
   * press is answered by `:active` below instead, so the feedback is the
   * design's rather than the browser's.
   */
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease-in-out;
}

/*
 * Every state named, and that is not belt-and-braces.
 *
 * Patternfly styles bare anchors — `a { color: #0088ce; text-decoration: none }`
 * and `a:hover { color: #00659c; text-decoration: underline }` — and a rule
 * carrying an element plus a pseudo-class outweighs a bare class. So the base
 * state took this theme's colour while hover reverted to patternfly's blue and
 * pulled an underline with it. Listing the states is what settles it, rather
 * than an `!important` that the next state would need too.
 */
.acip-header__brand-link,
.acip-header__brand-link:link,
.acip-header__brand-link:visited,
.acip-header__brand-link:hover,
.acip-header__brand-link:focus,
.acip-header__brand-link:active {
  color: inherit;
  text-decoration: none;
}

/*
 * The blue ring, removed where it is actually drawn.
 *
 * It is the browser's own — patternfly's `a:focus { outline: 5px auto
 * -webkit-focus-ring-color }` — and `:focus` is the part that matters: it
 * matches a *mouse click*, which is exactly when `:focus-visible` does not.
 * So the accent ring below was never reached on a click, and the ring that
 * appeared was the one nothing had overridden.
 */
.acip-header__brand-link:focus {
  outline: none;
}

/*
 * Given back to a keyboard, and only to a keyboard. After the rule above on
 * purpose: the two match with the same weight, so order is what decides, and a
 * keyboard focus satisfies both.
 */
.acip-header__brand-link:focus-visible {
  outline: 2px solid var(--acip-accent);
  outline-offset: 2px;
}

/* The portal's own brand link fades on hover; a press goes one step further,
   which is what replaces the tap highlight removed above. */
.acip-header__brand-link:hover {
  opacity: 0.8;
}

.acip-header__brand-link:active {
  opacity: 0.6;
}

.acip-header__flag {
  font-size: 30px;
}

.acip-header__wordmark {
  color: var(--acip-ink-strong);
  font-family: var(--acip-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.acip-header__tagline {
  color: var(--acip-ink-strong);
  display: none;
  font-family: var(--acip-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.acip-chip {
  align-items: center;
  background: var(--acip-chip);
  border: 1px solid var(--acip-chip-border);
  border-radius: 4px;
  color: var(--acip-chip-foreground);
  display: none;
  flex-shrink: 0;
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  gap: 4px;
  line-height: 24px;
  padding: 8px 16px;
}

.acip-header__nav {
  align-items: center;
  display: none;
  gap: 32px;
}

.acip-header__nav-item {
  color: var(--acip-ink);
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.acip-header__actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 16px;
}

/* Locale switcher */
.acip-locale {
  position: relative;
}

.acip-locale__button {
  align-items: center;
  background: var(--acip-surface);
  border: 1px solid var(--acip-line);
  /* `rounded-lg` on the portal's trigger, which this theme's scale puts at 10px. */
  border-radius: 10px;
  color: var(--acip-ink);
  cursor: pointer;
  display: flex;
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  gap: 16px;
  line-height: 24px;
  padding: 8px 16px;
  /* `transition-colors`, so the hover border arrives the same way it does there. */
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* `hover:border-acip-accent` on the portal's own switcher, matched here. */
.acip-locale__button:hover {
  border-color: var(--acip-accent);
}

/*
 * Both glyphs are `text-acip-ink-muted` on the portal's switcher. They inherit
 * `currentColor` from the button, which is full ink, so the colour has to be
 * stated rather than left to inherit.
 */
.acip-locale__globe,
.acip-locale__chevron {
  color: var(--acip-ink-muted);
}

.acip-locale__globe {
  margin-inline-end: -8px;
}

.acip-locale__current {
  margin-inline-end: auto;
}

.acip-locale__list {
  background: var(--acip-surface);
  border: 1px solid var(--acip-line);
  /* `rounded-lg`, as on the trigger. */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgb(16 24 40 / 10%);
  display: none;
  inset-inline-end: 0;
  list-style: none;
  margin: 4px 0 0;
  /*
   * At least as wide as the trigger, and never narrower than the portal's own
   * menu — `min-w-[140px]` on its `DropdownMenuContent`. The trigger governs on
   * a wide screen, where it is the larger of the two; the floor governs on a
   * narrow one, where the trigger has collapsed to a glyph and a menu sized to
   * it would be unreadable.
   */
  min-width: max(100%, 140px);
  padding: 4px;
  position: absolute;
  top: 100%;
  z-index: 60;
}

.acip-locale__list.is-open {
  display: block;
}

/*
 * The portal's menu rows are `rounded-md px-1.5 py-1 text-sm` with no weight of
 * their own -- a step smaller than the trigger's own label, which is shadcn's
 * default and deliberately kept rather than rounded up to the trigger's 16px.
 */
.acip-locale__item {
  border-radius: 8px;
  color: var(--acip-ink);
  display: block;
  font-family: var(--acip-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 4px 6px;
  text-decoration: none;
  white-space: nowrap;
}

.acip-locale__item:hover {
  background: var(--acip-canvas);
}

/*
 * The language in use, which the portal's menu marks with `bg-accent
 * font-semibold` -- the same fill as hover, told apart by the weight. Without
 * it the menu lists three languages and says nothing about which one you are
 * reading, the one thing it is opened to find out.
 */
.acip-locale__item--current {
  background: var(--acip-canvas);
  font-weight: 600;
}

/*
 * Below `sm` the switcher sheds its own label, exactly as the portal's compact
 * appearance drops it (`hidden sm:inline`), leaving the globe and its caret.
 * The language is still named in the menu, in its own language.
 *
 * This began as a matter of fit. The header also carried a Login call to
 * action, and at 360px — 312px of content width — brand (124) + gap (24) +
 * switcher (154) + gap (16) + that label (104) came to 422. With the call to
 * action gone the row is 124 + 24 + 154 = 302 and would fit either way, so
 * what keeps the label hidden is now parity with the portal rather than
 * space: the brand chip is as wide as its translated text, 302 of 312 is no
 * margin to rely on across three locales, and the menu names the language
 * regardless. Dropping it leaves 124 + 24 + 76 = 224px inside 312.
 */
@media (max-width: 639px) {
  .acip-locale__current {
    display: none;
  }

  /* Pulls the globe toward the label; with no label it would meet the caret. */
  .acip-locale__globe {
    margin-inline-end: 0;
  }

  .acip-locale__button {
    gap: 8px;
  }
}

@media (min-width: 640px) {
  .acip-chip {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .acip-header__inner {
    padding: 16px 64px;
  }

  .acip-header__nav {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .acip-header__inner {
    padding: 16px 128px;
  }

  .acip-header__tagline {
    display: inline;
  }
}

/* ── Assistance ────────────────────────────────────────────────────────── */

.acip-assist {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 32px auto 0;
  max-width: 560px;
  padding: 0 32px;
  width: 100%;
}

.acip-assist__title {
  color: var(--acip-ink-muted);
  font-family: var(--acip-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
}

.acip-assist__body {
  color: var(--acip-ink-muted);
  font-family: var(--acip-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
}

.acip-assist__body strong {
  font-weight: 700;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.acip-footer {
  background: var(--acip-canvas);
  border-top: 1px solid var(--acip-accent);
  width: 100%;
}

.acip-footer__inner {
  box-sizing: border-box;
  display: grid;
  gap: 48px;
  margin: 0 auto;
  max-width: 1760px;
  padding: 72px 24px;
  width: 100%;
}

.acip-footer__brand-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.acip-footer__flag {
  font-size: 22px;
}

.acip-footer__wordmark {
  color: var(--acip-ink);
  font-family: var(--acip-font-manrope);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 33px;
}

.acip-footer__tagline {
  color: var(--acip-ink);
  font-family: var(--acip-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 8px 0 0;
}

.acip-footer__description {
  color: var(--acip-ink-muted);
  font-family: var(--acip-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 24.5px;
  margin: 16px 0 0;
  max-width: 366px;
}

.acip-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.acip-footer__contact li {
  align-items: center;
  color: var(--acip-ink-muted);
  display: flex;
  font-family: var(--acip-font);
  font-size: 13px;
  font-weight: 400;
  gap: 8px;
  line-height: 19.5px;
}

.acip-footer__contact svg {
  color: var(--acip-accent);
  flex-shrink: 0;
}

.acip-footer__badge {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.acip-footer__badge-icon {
  align-items: center;
  background: var(--acip-accent-subtle);
  border-radius: 9999px;
  color: var(--acip-accent);
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.acip-footer__badge-text {
  color: var(--acip-ink-muted);
  font-family: var(--acip-font);
  font-size: 14px;
  line-height: 21px;
}

.acip-footer__badge-text strong {
  display: block;
  font-weight: 600;
}

.acip-footer__badge-text span {
  display: block;
  font-weight: 300;
}

.acip-footer__columns {
  display: grid;
  gap: 40px;
}

.acip-footer__column h2 {
  color: var(--acip-ink);
  font-family: var(--acip-font-manrope);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 21px;
  margin: 0;
}

.acip-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.acip-footer__column li {
  color: var(--acip-ink-muted);
  font-family: var(--acip-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

@media (min-width: 640px) {
  .acip-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .acip-footer__inner {
    gap: 64px;
    grid-template-columns: minmax(0, 365px) 1fr;
    padding: 72px 80px;
  }

  .acip-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: end;
  }

  .acip-footer__column {
    max-width: 260px;
    width: 100%;
  }
}