/* The CSS of the English section (docs/plan-ingles-2026.md), which only its pages load (BaseLayout). It isn't in the
   components' <style> because Astro adds that to every page that imports the component, even one that doesn't show it,
   and the Spanish pages have to stay byte-identical. */

/* The "Español" of the navbar (Navbar.astro), only on English pages. From 992 px it ends the row of menu names and
   looks like them (DesktopMenu.astro). A phone's top row has no room for it, so below that it's hidden and MobileMenu
   offers Spanish in its own section. DesktopMenu's names have a span for their underline; this link has none, so the
   underline is its background: measured from the middle of the box, where the text is, and as wide as the text. It
   draws in from the left on hover; the link sinks a pixel when pressed. */
.en-nav__lang {
  /* The padding is part of the link's target; the margin gives it back, so its text sits on the page's right margin. */
  --lang-inset: var(--ux-space-3);
  display: none;
  flex: none;
  align-items: center;
  min-height: var(--ux-target-size);
  margin-right: calc(var(--lang-inset) * -1);
  padding-inline: var(--lang-inset);
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.8em - 0.5px) / 0 1px no-repeat content-box;
  color: var(--ux-color-text);
  font-size: var(--ux-text-ui);
  font-weight: var(--ux-weight-regular);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-size var(--ux-duration-base) var(--ux-ease-out),
    translate var(--ux-duration-fast) var(--ux-ease-out);
}

/* Inside the box, like DesktopMenu's. */
.en-nav__lang:focus-visible {
  outline: var(--ux-focus-outline);
  outline-offset: calc(var(--ux-focus-width) * -2);
}

@media (hover: hover) {
  .en-nav__lang:hover {
    background-size: 100% 1px;
  }
}

.en-nav__lang:active {
  translate: 0 var(--ux-press);
}

@media (min-width: 992px) {
  .en-nav__lang {
    display: inline-flex;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .en-nav__lang {
    --lang-inset: var(--ux-space-2);
  }
}

/* The footer (FooterEn.astro) copies .site-footer of Footer.astro: its black, corners, wordmark, links and bottom row.
   With no newsletter and no columns, the links stand where the newsletter stands, one group in two columns, so from
   992 px the wordmark still has something beside it and the footer doesn't read as a black band with one word. */
.en-footer {
  --footer-bg: #141414;
  /* 9.8:1 on the footer's black. */
  --footer-text-muted: rgb(255 255 255 / 0.72);
  --footer-line: rgb(255 255 255 / 0.16);
  --footer-focus: var(--ux-color-accent);
  border-radius: 40px 40px 0 0;
  background-color: var(--footer-bg);
  color: var(--ux-color-on-dark);
  font-family: var(--ux-font-sans);
  font-size: var(--ux-text-ui);
  font-weight: var(--ux-weight-regular);
  line-height: var(--ux-leading-normal);
}

.en-footer p {
  margin: 0;
}

/* On hover the underline rises into place. */
.en-footer a {
  color: inherit;
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition:
    text-decoration-color var(--ux-duration-base) var(--ux-ease-out),
    text-underline-offset var(--ux-duration-base) var(--ux-ease-out);
}

.en-footer a:focus-visible {
  outline: var(--ux-focus-width) solid var(--footer-focus);
  outline-offset: var(--ux-focus-offset);
}

@media (hover: hover) {
  .en-footer a:hover {
    text-decoration-color: currentColor;
    text-underline-offset: 0.2em;
  }
}

.en-footer__inner {
  display: grid;
  gap: var(--ux-space-6);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--ux-space-8) 5% var(--ux-space-6);
}

/* The wordmark is the footer's one loud element. */
.en-footer__brand {
  font-size: clamp(36px, 22px + 4vw, 80px);
  font-weight: var(--ux-weight-bold);
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

.en-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux-space-1) var(--ux-space-5);
}

.en-footer__links a,
.en-footer__bottom a {
  display: flex;
  align-items: center;
  min-height: var(--ux-target-size);
}

/* The one link too long for a column on a phone. */
.en-footer__mail {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.en-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ux-space-5);
  padding-top: var(--ux-space-4);
  border-top: var(--ux-border-width) solid var(--footer-line);
  color: var(--footer-text-muted);
  font-size: var(--ux-text-sm);
}

.en-footer__bottom p {
  margin-right: auto;
}

@media (max-width: 479px) {
  .en-footer {
    border-radius: 24px 24px 0 0;
  }
}

@media (min-width: 992px) {
  .en-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: end;
    gap: var(--ux-space-7);
  }

  .en-footer__bottom {
    grid-column: 1 / -1;
  }
}

/* The notice that a post is a translation (PostPage.astro), under its facts and as quiet as they are. The p beats the
   post's header, which takes the margin off its children, in whichever order the two stylesheets arrive. */
.post-header > p.en-note {
  margin-top: var(--ux-space-3);
  color: var(--ux-color-text-muted);
  font-size: var(--ux-text-sm);
  line-height: var(--ux-leading-normal);
}

/* 44 px tall without making its line taller: the margins give back what the padding adds, as on .breadcrumb-link. */
.en-note a {
  display: inline-block;
  padding-block: max(0px, (var(--ux-target-size) - 1lh) / 2);
  margin-block: min(0px, (1lh - var(--ux-target-size)) / 2);
  color: var(--ux-color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.en-note a:focus-visible {
  outline: var(--ux-focus-outline);
  outline-offset: var(--ux-focus-offset);
}