/* ==========================================================================
   Odell — portfolio stylesheet · footer

   Load 6 of 8 — see tokens.css for the full map and for
   why the load order carries meaning.

   15 Footer

   The footer and its link row, and the dev entry that sits on its
   doorstep. The dev entry is not part of the footer and is not styled
   as though it were; it lives here because this is the section it
   abuts, and a section of its own would renumber everything after it.
   ========================================================================== */

/* ==========================================================================
   15  FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 1.6rem;
  background: var(--band);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The copy takes the free space on its line rather than sitting at its own
   content width. On a wide footer that changes nothing visible — the copy's
   text is left-aligned inside whatever box it gets, and the extra width it
   swallowed is width the icons were already not using. */
.footer-copy {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: var(--faint);
}

/* An auto margin absorbs the free space on its own flex line. Where the copy
   shares that line there is none left to absorb — flex-grow has taken it —
   so on a wide footer this does nothing and the icons stay flush right. It is
   the fallback for the row wrapping on its own above the breakpoint below,
   which the Spanish copy is the likelier of the two to do, its string being
   the longer. See the block that follows for the case that actually ships. */
.footer-links {
  display: flex;
  gap: 0.4rem;
  margin-inline: auto;
}

/* On a phone the footer stops being a row, and centres.

   Centring is not the mobile-footer convention being applied for its own
   sake — the rest of this page stacks left at this width and stretches its
   items to fill the band. The icons are the one thing here that cannot
   stretch: five 44px buttons and the four 0.4rem gaps between them come to
   246px whatever the viewport does. A 360px phone leaves a 312px band,
   --gutter being 1.5rem a side, so a left edge stops 66px short of the
   right one. Centred, that slack splits into 33 a side and the row reads as
   placed rather than as run out of room. The hero's buttons do not have this
   problem, which is why they stretch and these do not.

   The icons lead and the copyright falls under them, which is the reverse of
   the desktop row. That is deliberate and it is the one thing the two
   layouts disagree about: the buttons are what the footer is for, and a
   copyright line is fine print, which belongs under the thing it qualifies.
   Achieved with order rather than by moving the markup, so the document
   still reads copy-then-links to anything that is not looking at the screen.
   The two are independent — neither is a step in the other — so the visual
   order differing from the DOM order costs nothing here.

   Neither child needs a width. align-items takes them off stretch, so each
   is sized by its content and centred on the cross axis — the icons by the
   auto margin above, which overrides align-items with the same answer. The
   copy is given text-align of its own on top of that, because at these
   widths "© 2026 Odell. Todos los derechos reservados." runs to two lines:
   the box is then only as wide as its longest line, and without this the
   shorter one sits against the left edge of it.

   The band gets taller — 2rem against 1.6rem — because the stack has no
   column of text beside it to hold it together, so the space around it has
   to. The 1rem between the two is the row's own gap, untouched: at this
   width that space is doing a different job than it was in the row, and it
   is the one number here worth adjusting by eye.

   599px because that is already this site's definition of a phone: the
   three other places that ask "is this a phone" ask it at exactly this
   width, and a fourth number here would be one more to keep in step. */
@media (max-width: 599px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    order: -1;
  }

  .site-footer {
    padding-block: 2rem;
  }
}

/* 44px, and the mark grows with it. .icon is sized in em, so raising only the
   box would spend the extra on padding — 2px a side, and nothing a visitor
   could see. The font-size is what actually reads as bigger: 1.1rem is the
   same 10% the box took, which puts the icon at 20.24px against the 18.4px it
   was, so the two keep their proportion. The radius keeps it too — 11px is
   the same 25% of the side that 10px was at 40.

   44 rather than the header's 38 because these five are aimed at with a thumb.
   On a phone they are the whole of the footer above the copyright, and 44 is
   the size a thumb wants where 24 is the floor this site holds itself to
   everywhere else. The row still fits a 320px viewport, where its 246px
   leaves 13px a side. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  border-radius: 11px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.footer-links a:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* ---- The dev entry ---------------------------------------------------- */

/* The link into dev mode. It sits above the footer and outside it, but the
   two share a band, so it is quieter than the footer's own copy rather than
   louder: --faint, which is the colour .footer-copy already uses. Visible
   enough to be found by someone looking, quiet enough that nobody reads it
   as a feature of the page.

   Monospace because it is a path, and the site already says "path" in
   --mono everywhere else it says it (.term, code, kbd). That is also the
   honest register for it: a directory name is a thing a developer
   recognises, and it needs no explanation for the people it is for. */

.dev-entry {
  display: flex;
  justify-content: flex-end;
  padding-block: 0.85rem 0;
}

.dev-entry a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  padding: 0.3rem 0.45rem;
  /* The padding is what makes the hover pill big enough to hit; the negative
     margin is what stops it pushing the text inward, so the label's right
     edge lines up with the footer icons below it rather than sitting 0.45rem
     short of them. */
  margin-right: -0.45rem;
  border-radius: 7px;
  /* The base reset colours links but does not strip the underline, so every
     link on this site takes it off itself. An underlined /dev would be the
     loudest thing in the band, which is the opposite of the brief. */
  text-decoration: none;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.dev-entry a:hover {
  color: var(--accent);
  background: var(--accent-soft);
}