/* Shared site footer — nav only.
   Loaded by server-rendered content pages (about, curations, beach, now).
   --nav-rgb adapts to dark pages (cream, default) and light pages (navy, .on-light). */

.site-footer {
  --nav-rgb: 240, 232, 212;
  margin-top: clamp(44px, 8vw, 80px);
  padding-top: clamp(22px, 3.5vw, 30px);
}
.site-footer.on-light { --nav-rgb: 10, 21, 37; }

/* --- nav --- */
/* Mirrors the homepage bottom strip: the menu group sits on the left and the
   delamatre.com link on the right (space-between), collapsing to a centered
   column on phones — with the same two spacings the homepage uses. */
.footer-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vmin, 36px);
  /* Match the content column (.page is max-width: 760px, centered) so the menu
     aligns under the page content instead of spreading across wide desktops. */
  max-width: 760px;
  margin: 0 auto;
}
.footer-nav {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(14px, 2vmin, 22px);
}
/* Home link — a text line filling the space the weather/tide/coords occupy
   only on the homepage. A single line (rather than an icon) reads better when
   it collapses under the menu on phones. */
.footer-home {
  align-self: flex-end;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9px, 1.2vmin, 10px);
  letter-spacing: 0.16em;
  color: rgba(var(--nav-rgb), 0.6);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  transition: color 200ms linear;
}
.footer-home:hover,
.footer-home:focus-visible {
  color: rgb(var(--nav-rgb));
  outline: none;
}
@media (max-width: 480px) {
  .footer-strip { flex-direction: column; align-items: center; }
  .footer-nav { justify-content: center; }
  .footer-home { align-self: center; padding-bottom: 0; }
}
.footer-nav .service {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(var(--nav-rgb), 0.6);
  text-decoration: none;
  transition: color 200ms linear, transform 200ms ease;
}
.footer-nav .service:hover,
.footer-nav .service:focus-visible {
  color: rgb(var(--nav-rgb));
  outline: none;
  transform: translateY(-1px);
}
.footer-nav .service[aria-current="page"] { color: rgb(var(--nav-rgb)); }
.footer-nav .service svg {
  width: clamp(24px, 3.4vmin, 32px);
  height: clamp(24px, 3.4vmin, 32px);
  display: block;
}
.footer-nav .service svg .ln {
  stroke: currentColor;
  stroke-width: 1.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.footer-nav .service-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9px, 1.2vmin, 10px);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  text-align: center;
  white-space: nowrap;
}
.footer-nav a.service[target="_blank"] .service-label::after {
  content: '';
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background-color: currentColor;
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.beach-flag-dot { transition: color 400ms ease; }