/* Footer. Colours come from the dbim-theme tokens. No Bootstrap grid needed.
   Selectors start with "footer.footerbox" so the toolkit CSS does not override them.
   Mobile and tablet: one column, centred subscribe block.  Desktop (992px+): two columns. */
footer.footerbox {
  /* Adjust the sizes here; they are estimates until the DBIM type scale is applied */
  --footer-heading-size: 1.5rem;
  --footer-link-size: 1.5rem;
  --footer-text-size: 1.5rem;         /* "This Website belongs to..." line */
  --footer-updated-size: 1.25rem;      /* "Last Updated On" line */

  background: var(--key);
  color: var(--on-key);
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding-block: 2.5rem;
}
footer.footerbox .container-fluid { padding-inline: 1.5rem; }

footer.footerbox .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
/* Mobile order is the markup order: links, lineage, subscribe, last updated */

footer.footerbox h2 {
  margin: 0 0 1.25rem;
  font-size: var(--footer-heading-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase; /* short headings only */
}
footer.footerbox ul { list-style: none; margin: 0; padding: 0; }
footer.footerbox p { margin: 0; }

footer.footerbox a { color: inherit; text-decoration: none; }
footer.footerbox a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer.footerbox a:focus-visible { outline: 2px solid var(--on-key); outline-offset: 3px; }

/* Useful links: 3 columns, filled left to right */
footer.footerbox .footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem 1rem;
  font-size: var(--footer-link-size);
}
footer.footerbox .footer-links a { display: inline-flex; align-items: flex-start; gap: 0.5rem; }
footer.footerbox .footer-links a::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.7em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

footer.footerbox .footer-lineage { font-size: var(--footer-text-size); }

/* Subscribe block: centred on mobile and tablet */
footer.footerbox .footer-subscribe,
footer.footerbox .footer-updated { text-align: center; }
footer.footerbox .footer-updated { font-size: var(--footer-updated-size); }

footer.footerbox .footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
footer.footerbox .footer-social img { display: block; width: 28px; height: 28px; filter: brightness(0) invert(1);}
footer.footerbox .footer-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
footer.footerbox .footer-logos a {
  display: block;
  background: #FFFFFF;
  padding: 0.35rem 0.75rem;
  /* space around the logo */
  border-radius: 0.375rem;
  /* corner curve */
}

footer.footerbox .footer-logos img {
  display: block;
  height: 44px;
  width: auto;
}

/* Very small phones: slightly smaller links so three columns fit */
@media (max-width: 575.98px) {
  footer.footerbox { --footer-link-size: 1.2rem; }
  footer.footerbox .footer-links { gap: 0.625rem 0.75rem; }
}

/* Desktop */
@media (min-width: 992px) {
  footer.footerbox {
    --footer-heading-size: 1.75rem;
    --footer-link-size: 1.75rem;
    --footer-text-size: 1.75rem;
    --footer-updated-size: 1.5rem;
  }
  footer.footerbox .container-fluid { padding-inline: clamp(1rem, 7vw, 8rem); }

  footer.footerbox .footer-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-areas:
      "useful   subscribe"
      "lineage  updated";
    gap: 1rem 1.5rem;
  }
  footer.footerbox .footer-useful    { grid-area: useful; }
  footer.footerbox .footer-subscribe { grid-area: subscribe; text-align: right; }
  footer.footerbox .footer-lineage   { grid-area: lineage; align-self: end; }
  footer.footerbox .footer-updated   { grid-area: updated; align-self: end; text-align: right; }

  footer.footerbox .footer-social,
  footer.footerbox .footer-logos { justify-content: flex-end; }

  /* 7 links = 4 columns (links / 2, rounded up). Add class "cols-4" to the list. */
  footer.footerbox .footer-links.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}