/* ============================================================================
 * footer.css — site footer. Markup from assets/js/components/footer.js.
 * The footer is always dark, in both themes: it anchors the page and keeps
 * the licence and insurance lines visually distinct from body content.
 * ==========================================================================*/

.site-footer {
  background: var(--navy);
  color: var(--text-on-dark-muted);
  margin-block-start: auto;
}
:root[data-theme="dark"] .site-footer {
  background: var(--bg-deep);
  border-block-start: 1px solid var(--border);
}

.footer__top { padding-block: clamp(48px, 6vw, 76px) var(--gap-lg); }

.footer__grid {
  display: grid;
  gap: var(--gap-lg);
}
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: var(--gap-md); }
}

/* ------------------------------------------------------------ brand column */
.footer__brand { margin-block-end: 14px; }
.footer__name {
  font-size: 1.16rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  display: block;
}
.footer__about {
  font-size: .93rem;
  line-height: 1.75;
  max-width: 42ch;
  margin-block-end: var(--gap-md);
}

/* -------------------------------------------------------- credentials block
 * Licence number and insurance line: required on every page, so they get a
 * bordered panel rather than being lost in the link columns.
 * ------------------------------------------------------------------------ */
.footer__creds {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
:root[data-theme="dark"] .footer__creds {
  background: var(--surface);
  border-color: var(--border);
}

.cred { display: flex; gap: 12px; align-items: flex-start; }
.cred > .ico { width: 20px; height: 20px; flex: none; margin-block-start: 2px; color: var(--accent); }
.cred__label { font-size: .84rem; }
.cred__value {
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
}
.cred__note {
  display: block;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
  margin-block-start: 2px;
}
.cred__note--wide { font-size: .84rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------------------ link columns */
.footer__h {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-block-end: 18px;
}
:root.is-ar .footer__h { letter-spacing: 0; text-transform: none; font-size: .95rem; }

.footer__links { display: grid; gap: 11px; }
.footer__links a {
  color: var(--text-on-dark-muted);
  font-size: .92rem;
  transition: color .18s var(--ease), padding-inline-start .18s var(--ease);
}
.footer__links a:hover { color: var(--accent); padding-inline-start: 4px; }

/* ---------------------------------------------------------- contact column */
.footer__contact { display: grid; gap: 14px; }
.footer__contact a,
.footer__addr {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--text-on-dark-muted);
  font-size: .92rem;
  line-height: 1.6;
}
.footer__contact a:hover { color: #fff; }
.footer__contact .ico,
.footer__addr .ico {
  width: 18px; height: 18px;
  flex: none;
  margin-block-start: 2px;
  color: var(--accent);
}
.footer__contact .is-pending { text-decoration-color: var(--accent); }

/* ---------------------------------------------------------------- bottom */
.footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  padding-block: var(--gap-md);
  font-size: .85rem;
}
:root[data-theme="dark"] .footer__bottom { border-block-start-color: var(--border); }

.footer__bottomInner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--gap-md);
  align-items: center;
  justify-content: space-between;
}
.footer__copy, .footer__legal { margin: 0; }
.footer__legal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, .62);
}
.footer__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}