/* ahen26 - footer: a brand + donate column, the footer modules (menu, sites, contact) in a grid, and a bottom bar with the copyright
   and the accessibility / privacy links. Loaded after projects.css. To go back to the previous look, remove its <link> in index.php
   (and the footer markup change in index.php). */

footer {
  display: block;
  width: 100%;
  background: #16242e;
  color: #cdd6dd;
  border-top: 4px solid var(--green);
  padding-block: 0;
}
footer a { color: #cdd6dd; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer .footer1:not(:has(li)) { display: none; }   /* the old top strip of the footer is empty today */

/* ---- the grid ---- */
footer .footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  gap: 36px clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 44px);
}
/* the footer modules: undo the float / fixed-width rules of the old stylesheets */
footer .footer-grid > .moduletable_footermenu,
footer .footer-grid > .moduletable_weblinks,
footer .footer-grid > .moduletable {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  padding: 0;
}
footer .footer-grid h3 {
  margin: 0 0 16px;
  padding: 0 0 12px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  position: relative;
}
footer .footer-grid h3::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  border-radius: 3px;
  background: var(--green);
}
footer .footer-grid ul { margin: 0; padding: 0; list-style: none; }
footer .footer-grid li { display: block; float: none; width: auto; padding: 0; line-height: 1.9; font-size: .98rem; }
footer .footer-grid li a { display: inline-block; padding: 2px 0; }

/* contact module: keep its icons, give the lines some air */
footer .footer-grid .moduletable.contact p { margin: 0 0 12px; }
footer .footer-grid .moduletable.contact a { display: inline-flex; align-items: center; gap: 10px; }

/* ---- brand + donate ---- */
footer .footer-brand__name { margin: 0 0 4px; color: #fff; font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
footer .footer-brand__tag { margin: 0 0 20px; color: #9fd08f; font-size: 1.05rem; font-weight: 600; }
/* the donation is asked once, in the text of the home page; in the footer it is only a quiet link */
footer a.footer-brand__cta {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
footer a.footer-brand__cta::after { content: ' \2192'; }
html[dir="rtl"] footer a.footer-brand__cta::after { content: ' \2190'; }
footer a.footer-brand__cta:hover,
footer a.footer-brand__cta:focus-visible { color: #fff; text-decoration-thickness: 2px; }
footer .footer-brand__tax { margin: 12px 0 0; color: #9fb0ba; font-size: .9rem; line-height: 1.5; }

/* ---- bottom bar ---- */
footer .footer-legal { border-top: 1px solid rgba(255,255,255,.12); }
footer .footer-legal__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 18px;
}
footer .footer-legal__copy { margin: 0; color: #9fb0ba; font-size: .9rem; }
footer .footer-legal__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
footer .footer-legal__links li { display: block; }
footer .footer-legal__links a { color: #cdd6dd; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---- tablet / phone ---- */
@media (max-width: 1023px) {
  footer .footer-grid { grid-template-columns: repeat(2, 1fr); }
  footer .footer-grid > .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  footer .footer-legal__row { flex-direction: column; align-items: flex-start; }
}

/* the footer menu: one of its links carries an icon class (ahicon) that drew a stray boxed icon beside the text */
footer .moduletable_footermenu a.ahicon { background: none; border: 0; padding: 0; }
footer .moduletable_footermenu a.ahicon::before { content: none; }