/* Bilingual chrome: the header switcher, the Spanish offer line, and the
   footer note that says what is and is not in Spanish.

   Loaded on both language trees. The pages carry their own colours as CSS
   custom properties, so everything here reads --ink, --line and friends and
   inherits whichever palette the page set. The one page that does not define
   them is the legal tree, which is not bilingual and does not load this file.

   Spanish runs 20 to 40 percent longer than English. Every box below is sized
   by its content rather than by a fixed width for that reason. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 60, 35, .2);
  color: inherit;
  text-decoration: none;
}

.lang-switch::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  opacity: .55;
  /* A globe, inlined so the switcher needs no network request and no sprite. */
  -webkit-mask: var(--lang-globe) center / contain no-repeat;
  mask: var(--lang-globe) center / contain no-repeat;
}

:root {
  --lang-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.7 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.7-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-color: currentColor;
}

.lang-switch .lang-short {
  display: none;
}

/* Making room in the header.

   The nav was laid out for a brand, a row of links and two buttons, and it
   filled its width. A third control has to be paid for somewhere, and Spanish
   labels run longer than the English ones they replace, so the bill comes due
   twice. Three rules pay it, in the order a shrinking window hits them. */

/* 1. A gap, so the brand and the first link cannot touch when the row is
      exactly full. This one is not about language. */
.nav {
  gap: 16px;
}

.nav-right .btn {
  white-space: nowrap;
}

/* 2. Spanish collapses its link row into the menu button earlier than English
      does. `App para el celular` and `Preguntas frecuentes` are half again as
      wide as `Mobile app` and `FAQ`, and at 1024 they wrapped onto a second
      line and pushed the header past the window. The menu button's own script
      sets an inline display, so it still opens below this breakpoint. */
@media (max-width: 1150px) {
  html[lang^="es"] .nav-links {
    display: none;
  }

  html[lang^="es"] .menu-btn {
    display: block;
  }
}

/* 3. On a phone the switcher drops to its two letter label and the row tightens
      up. Measured at 390 wide, which is where it is tightest. */
@media (max-width: 520px) {
  .nav {
    gap: 8px;
    padding: 0 16px;
  }

  .nav-right {
    gap: 8px;
  }

  .nav-right .btn {
    padding: 9px 12px;
    font-size: 13px;
  }

  .lang-switch {
    padding: 8px 10px;
    font-size: 13px;
  }

  .lang-switch .lang-long {
    display: none;
  }

  .lang-switch .lang-short {
    display: inline;
  }
}

/* The hero headline is held to 15ch, which is the measure the English lines
   were written to. The Spanish headlines are longer by the same 20 to 40
   percent as everything else, and at 15ch they break into a stack with a
   one word line in the middle. A wider measure gives them the same two or
   three balanced lines the English gets. */
html[lang^="es"] .hero h1 {
  max-width: 20ch;
}

/* The hero's underlined phrase is set to one unbroken line in English. Spanish
   runs 20 to 40 percent longer, and an unbreakable line that is wider than the
   measure above does not shrink the measure: it hangs out of the centred block
   and the last line of the headline sits visibly off centre. That is not only a
   phone problem. Measured at 1024, the pond page's underlined phrase ran 42
   pixels past the right edge of its own h1 and the plumbing page's ran 3, and
   both grow with the window. So the Spanish phrase is allowed to wrap at every
   width. It still sets on one line wherever one line fits, because normal only
   breaks a line that has to break.

   The English underline is an absolutely positioned bar, which would draw once
   across the whole wrapped block; a background paints once per line box, so the
   wrapped Spanish keeps an underline under each line. The values below are the
   same bar: --green (#1a9750) at .3 alpha, .14em tall, .06em off the baseline. */
html[lang^="es"] .hero h1 .u {
  white-space: normal;
  background: linear-gradient(rgba(26, 151, 80, .3), rgba(26, 151, 80, .3))
    0 calc(100% - .06em) / 100% .14em no-repeat;
}

html[lang^="es"] .hero h1 .u::after {
  display: none;
}

/* The offer. One line, at the bottom, never a redirect. It is written into the
   page by assets/lang.js only when the reader's browser asks for Spanish and
   they have not already answered. */
.lang-offer {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 13px 18px;
  border-radius: 14px;
  background: #14532d;
  color: #eafaef;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 18px 40px -20px rgba(10, 30, 18, .75);
}

.lang-offer p {
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
}

.lang-offer a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.lang-offer button {
  flex: none;
  background: none;
  border: 1.5px solid rgba(234, 250, 239, .45);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.lang-offer button:hover,
.lang-offer button:focus-visible {
  border-color: #fff;
}

@media (max-width: 480px) {
  .lang-offer {
    font-size: 14.5px;
    padding: 12px 14px;
  }

  .lang-offer a,
  .lang-offer button {
    white-space: normal;
  }
}

/* The footer note on the Spanish pages. */
.lang-note {
  max-width: 78ch;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line, rgba(20, 60, 35, .12));
  color: var(--mute, #6f8074);
  font-size: 13.5px;
  line-height: 1.65;
}