/* ------------------------------------------------------------------
   The one site footer.

   Self-contained on purpose. It renders on the homepage, on a guide, on
   a legal document and inside a trip workspace, and those pages load
   different stylesheet families — so this file inherits nothing and
   states every value it needs. Colours and type match what the homepage
   footer already used; nothing here changes the palette.
   ------------------------------------------------------------------ */

.site-footer {
  --footer-ink: #f4f1fa;
  --footer-body: rgba(221, 218, 239, .74);
  --footer-quiet: rgba(185, 182, 216, .72);
  --footer-rule: rgba(176, 187, 232, .18);
  --footer-edge: rgba(110, 122, 188, .24);
  --footer-accent: #a78aff;
  --footer-accent-soft: #cdbdff;

  box-sizing: border-box;
  margin: 40px 24px 24px;
  padding: 30px 30px 16px;
  border: 1px solid var(--footer-edge);
  border-top-color: rgba(142, 106, 255, .4);
  border-radius: 0 0 25px 25px;
  color: var(--footer-body);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background:
    radial-gradient(circle at 58% 0, rgba(75, 59, 151, .2), transparent 34%),
    #071229;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after { box-sizing: border-box; }

/* The homepage renders the footer as the closing edge of the page card,
   so it must sit flush against the section above it. */
.m-home .site-footer,
.trips-home .site-footer { margin-top: 0; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 310px repeat(3, minmax(0, 1fr));
  gap: 20px 22px;
}

/* ---- brand column ---- */

.site-footer__about {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 10px 22px 0 0;
  border-right: 1px solid var(--footer-rule);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fbfaff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
}

.site-footer__brand svg {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 7px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #7658e9, #4c39af);
  box-shadow: 0 6px 15px rgba(64, 43, 155, .42);
}

.site-footer__about p {
  max-width: 320px;
  margin: 13px 0 0;
  font-size: 14px;
}

/* ---- what Togvia does ---- */

.site-footer__features {
  grid-column: 2 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.site-footer__features article {
  min-height: 112px;
  padding: 15px 13px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(137, 151, 209, .25);
  border-radius: 10px;
  background: rgba(13, 25, 56, .58);
}

.site-footer__features article > * { min-width: 0; overflow-wrap: break-word; }

.site-footer__features article > svg {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  padding: 11px;
  border: 1px solid rgba(144, 113, 255, .55);
  border-radius: 8px;
  color: #c7afff;
  background: rgba(84, 60, 184, .25);
}

.site-footer__features strong {
  display: block;
  color: var(--footer-ink);
  font-size: 14px;
  font-weight: 700;
}

.site-footer__features p {
  margin: 7px 0 0;
  color: rgba(218, 217, 233, .72);
  font-size: 12px;
  line-height: 1.42;
}

/* ---- link columns ---- */

.site-footer__nav {
  grid-row: 2;
  padding: 6px 4px 0;
}

.site-footer__nav strong {
  display: block;
  margin-bottom: 12px;
  color: var(--footer-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-footer__nav a {
  display: block;
  width: fit-content;
  margin: 6px 0;
  color: rgba(235, 233, 245, .84);
  font-size: 13px;
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { color: var(--footer-accent-soft); }

/* ---- legal bar ---- */

.site-footer__legal {
  margin-top: 18px;
  padding-top: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--footer-rule);
  color: var(--footer-quiet);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }

.site-footer__legal a {
  color: var(--footer-quiet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--footer-accent-soft); }

.site-footer :is(a, button):focus-visible {
  outline: 2px solid var(--footer-accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- compact variant, used inside the trip workspace ---- */

.site-footer--compact { padding: 22px 26px 14px; }
.site-footer--compact .site-footer__grid { grid-template-columns: 280px repeat(3, minmax(0, 1fr)); }
.site-footer--compact .site-footer__about { grid-row: 1; }
.site-footer--compact .site-footer__nav { grid-row: 1; }

/* ---- narrow screens ---- */

@media (max-width: 1080px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer__about { grid-column: 1 / -1; grid-row: auto; padding: 0 0 4px; border-right: 0; }
  .site-footer__features { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__nav { grid-row: auto; }
  .site-footer--compact .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer--compact .site-footer__about,
  .site-footer--compact .site-footer__nav { grid-row: auto; }
}

@media (max-width: 720px) {
  .site-footer { margin: 24px 8px 16px; padding: 22px 16px 14px; border-radius: 0 0 17px 17px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .site-footer__brand { font-size: 25px; }
  .site-footer__about p { font-size: 13px; }
  .site-footer__features { grid-template-columns: 1fr 1fr; gap: 9px; }
  .site-footer__features article { min-height: 0; padding: 12px; display: block; }
  .site-footer__features article > svg { width: 36px; height: 36px; padding: 8px; margin-bottom: 8px; }
  .site-footer__legal { display: block; line-height: 2; text-align: left; }
  .site-footer__legal nav { margin-top: 4px; }
}

@media (max-width: 460px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__features { grid-template-columns: 1fr; }
}

@media print { .site-footer { display: none; } }

/* ------------------------------------------------------------------
   Modernist theme.

   Ported unchanged from the old .m-footer-* rules in trips-meridian.css
   when the footer became a shared component. Modernist is the only
   appearance that restyles the footer; the other three inherit the
   default treatment above, which is what they did before.
   ------------------------------------------------------------------ */

[data-theme='modernist'] .site-footer {
  margin: 0;
  padding: 32px 48px 16px;
  border: 0;
  border-top: 2px solid #201e1d;
  border-radius: 0;
  color: #d7d3d3;
  background: #201e1d;
}

[data-theme='modernist'] .site-footer__about { border-right-color: #605d5d; }
[data-theme='modernist'] .site-footer__about p { color: #bab6b6; }

[data-theme='modernist'] .site-footer__brand {
  color: #fff;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  text-transform: uppercase;
}

[data-theme='modernist'] .site-footer__brand svg {
  border-radius: 0;
  color: #fff;
  background: #ec3013;
  box-shadow: none;
}

[data-theme='modernist'] .site-footer__features article { border-color: #605d5d; border-radius: 0; background: #2d2b2b; }
[data-theme='modernist'] .site-footer__features article > svg { border-color: #ff9783; border-radius: 0; color: #ff9783; background: transparent; }
[data-theme='modernist'] .site-footer__features strong { color: #fff; }
[data-theme='modernist'] .site-footer__features p { color: #bab6b6; }

[data-theme='modernist'] .site-footer__nav strong { color: #ff9783; }
[data-theme='modernist'] .site-footer__nav a { color: #f3f2f2; }
[data-theme='modernist'] .site-footer__nav a:hover { color: #ff9783; }

[data-theme='modernist'] .site-footer__legal { border-top-color: #605d5d; color: #bab6b6; }
[data-theme='modernist'] .site-footer__legal a { color: #bab6b6; }
[data-theme='modernist'] .site-footer__legal a:hover { color: #ff9783; }

@media (max-width: 720px) {
  [data-theme='modernist'] .site-footer { margin: 0; border-radius: 0; }
  [data-theme='modernist'] .site-footer__about { border-bottom: 2px solid #605d5d; padding-bottom: 18px; }
}