/**
 * Site footer.
 *
 * Type from the live footer template: headings 16/600 at full black, bodies and
 * links 14/400 at #000000B2 — black at 70%, which is what the design uses for
 * secondary text rather than a separate grey.
 */

.deka-footer {
  --deka-footer-muted: rgb(0 0 0 / 0.7);

  margin-top: var(--deka-space-3xl);
  background: var(--deka-sand-075, var(--deka-surface));
}

/*
 * A full viewport height, so the photograph reads as a closing panel rather
 * than a strip.
 *
 * `min-height`, not `height`: the left column carries four contact blocks, the
 * navigation, two project cards and the colophon. On a short viewport — a 1280
 * x 720 laptop, or anyone running larger text — a fixed height would clip the
 * colophon off the bottom. This grows instead.
 *
 * svh rather than vh on mobile, matching the hero: it sizes to the viewport
 * with the address bar showing, so the footer never gets taller than what is
 * actually visible.
 */
.deka-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--deka-space-2xl);
  width: min(100% - 2.5rem, var(--deka-container-wide));
  min-height: 80vh;
  min-height: 80svh;
  margin-inline: auto;
  /*
   * Padding eases off on short viewports so the full 3xl step never pushes the
   * footer past a screen on a laptop.
   */
  padding-block: clamp(1.25rem, 3.4vh, var(--deka-space-2xl));
}

/* Gaps ease off on short viewports. The colophon's `margin-top: auto` takes
   whatever slack is left, so these only set how tightly the upper blocks group
   — never how far the copyright sits from them. */
.deka-footer__content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2.6vh, var(--deka-space-xl));
}

/* --- Logo ------------------------------------------------------------------ */

.deka-footer__logo {
  display: inline-flex;
  width: 13.75rem; /* 220 */
  color: var(--deka-maroon, #5d1520);
}

.deka-footer__logo svg { width: 100%; height: auto; }

.deka-footer__logo:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 4px;
}

/* --- Details and navigation ------------------------------------------------ */

.deka-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--deka-space-xl);
}

.deka-footer__details {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.7vh, var(--deka-space-lg));
}

.deka-footer__heading {
  margin: 0 0 var(--deka-space-3xs);
  font-family: var(--deka-font-display);
  font-size: 1rem; /* 16 */
  font-weight: var(--deka-weight-semibold);
  line-height: 1.4;
  color: #000;
}

.deka-footer__body {
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.6;
  color: var(--deka-footer-muted);
}

.deka-footer__body a {
  color: inherit;
  text-decoration: none;
}

.deka-footer__body a:hover { text-decoration: underline; }

.deka-footer__body a:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 2px;
}

.deka-footer__sep { opacity: 0.5; }

/* Opening hours are one line per day range. */
.deka-footer__line { display: block; }

/* --- Navigation ------------------------------------------------------------ */

.deka-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--deka-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-footer__links a,
.deka-footer__link a {
  font-family: var(--deka-font-display);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--deka-weight-regular);
  color: var(--deka-footer-muted);
  text-decoration: none;
  transition: color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-footer__links a:hover { color: var(--deka-maroon, #5d1520); }

.deka-footer__links a:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 2px;
}

.deka-footer__link.is-current a,
.deka-footer__links .current-menu-item a {
  color: var(--deka-maroon, #5d1520);
}

/* --- Project cards ---------------------------------------------------------- */

.deka-footer__projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--deka-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-footer__project {
  display: flex;
  align-items: center;
  gap: var(--deka-space-sm);
  padding: var(--deka-space-sm);
  border-radius: var(--deka-radius-sm);
  background: var(--deka-surface-card, #fff);
  text-decoration: none;
  transition: transform var(--deka-duration-base) var(--deka-ease-out),
              box-shadow var(--deka-duration-base) var(--deka-ease-out);
}

.deka-footer__project:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.08);
}

.deka-footer__project:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 2px;
}

/* The square DEKA mark, tinted with the project's own accent — the same colour
   its benefits band and CTA button use. */
.deka-footer__project-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem; /* 44 */
  height: 2.75rem;
  border-radius: var(--deka-radius-xs, 0.375rem);
  background: var(--deka-project-colour, #5d1520);
  color: #fff;
}

.deka-footer__project-mark svg { width: 1.5rem; height: 1.5rem; }

.deka-footer__project-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.deka-footer__project-name {
  font-family: var(--deka-font-display);
  font-size: 1rem; /* 16 */
  font-weight: var(--deka-weight-semibold);
  color: #000;
}

.deka-footer__project-place {
  font-family: var(--deka-font-display);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--deka-weight-regular);
  color: var(--deka-footer-muted);
}

/* --- Colophon --------------------------------------------------------------- */

.deka-footer__colophon {
  margin-top: auto; /* sits against the bottom of the photograph beside it */
  padding-top: var(--deka-space-lg);
  border-top: 1px solid var(--deka-divider-warm, rgb(0 0 0 / 0.1));
}

.deka-footer__credit {
  margin: 0;
  font-family: var(--deka-font-display);
  font-size: 0.875rem;
  font-weight: var(--deka-weight-regular);
  line-height: 1.6;
  color: var(--deka-footer-muted);
}

/* --- Photograph -------------------------------------------------------------- */

/*
 * The photograph must not contribute its own height.
 *
 * As a normal flow child, `height: 100%` inside an auto-height parent resolves
 * to `auto`, so the image laid out at its intrinsic aspect ratio — 819 tall at
 * 704 wide, or 786px — and that, not the text, was setting the grid row and
 * pushing the footer past a screen. Positioned out of flow it contributes
 * nothing, so the row is the text column against the 100vh above it.
 */
.deka-footer__media {
  position: relative;
  min-height: 20rem; /* 320, for the single-column case */
  border-radius: var(--deka-radius-md);
  overflow: hidden;
}

/* Full-resolution source, cropped to the column: cover + center center. The
   image is taller than it is wide, so without `cover` it would letterbox. */
.deka-footer__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 64rem) { /* 1024 */
  .deka-footer__inner { grid-template-columns: 1fr; }

  /* The photograph is decorative; below the fold on a laptop it is worth its
     weight, on a phone it is not. */
  .deka-footer__media { display: none; }

  /* And with the photograph gone, so is the reason for the full height — it
     would only add empty space under the colophon. */
  .deka-footer__inner,
  .admin-bar .deka-footer__inner { min-height: 0; }
}

@media (max-width: 37.5rem) { /* 600 */
  .deka-footer__inner { padding-block: var(--deka-space-2xl); }
  .deka-footer__columns { grid-template-columns: 1fr; gap: var(--deka-space-lg); }
  .deka-footer__logo { width: 11rem; }
}