/*
 * Dossier footer. Loaded on every page that renders parts/footer.html (home, privacy, generic pages),
 * so it lives apart from redesign.css, which only the front page loads. Same d- prefix, same tokens.
 */
.d-foot {
  --night: #14123a;
  --violet: #6c4dff;
  --gold: #ffd31a;
  --lilac: #cfc8ff;
  --text: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --prev: #f8f8fb;
  --ring: var(--gold);
  /* namo.css styles the bare footer element as a rounded grid card; reset it here */
  position: relative;
  display: block;
  grid-template-columns: none;
  margin: 0;
  border-radius: 0;
  padding: clamp(48px, 6vw, 80px) 0 40px;
  background: var(--night);
  color: #fff;
  border-top: 2px dashed rgba(255, 211, 26, .4);
  font: 400 1.0625rem/1.6 var(--text);
}
.home .d-foot { --prev: var(--gold); }
.d-foot, .d-foot *, .d-foot *::before, .d-foot *::after { box-sizing: border-box; }
.d-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none; background: radial-gradient(circle at 50% 0, var(--prev) 6.5px, transparent 7px) 0 0 / 24px 12px repeat-x; }
.d-foot :where(p, small) { margin: 0; }
.d-foot a { color: inherit; text-decoration: none; }
.d-foot :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

.d-foot-wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }
.d-foot-top { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; }
.d-logo { display: block; flex: none; width: 120px; height: 44px; border-radius: 4px; background: url(img/namo-logo-transparent.png) 0 50% / 100% auto no-repeat; }
.d-foot-nav { display: flex; flex-wrap: wrap; margin-left: auto; }
.d-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: 600 .8125rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.d-foot-nav a:hover { color: var(--gold); }
.d-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #f6f4ff; }
.d-social > a, .d-social > span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(246, 244, 255, .6); border-radius: 50%; }
.d-social svg { width: 20px; height: 20px; fill: currentColor; }
.d-social > a { border-color: #f6f4ff; }
.d-social > a:hover { border-color: var(--gold); color: var(--gold); }
/* "link in arrivo" icons: still not links, but readable (about 11:1 on night at this opacity) */
.d-social > span { opacity: .78; cursor: not-allowed; }

.d-foot-legal { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 10px; color: var(--lilac); font-size: .9375rem; line-height: 1.55; }
.d-foot-legal p { max-width: 100ch; }
.d-foot-legal strong { color: #fff; }
.d-foot-legal a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.d-foot-legal a svg { display: inline-block; width: .9em; height: .9em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.1em; }
.d-foot-last { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.d-foot-last a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 700px) {
  .d-foot-nav { margin-left: 0; width: 100%; }
}

/* 44px hit areas: the inline source link grows into the paragraph gap (16px above, 10px below, 18px text) without moving the text; short nav links keep a 44px width. */
.d-foot-legal p:not(.d-foot-last) a { display: inline-block; padding: 16px 0 10px; margin: -16px 0 -10px; }
.d-foot-nav a { min-width: 44px; justify-content: center; }