/* ══════════════════════════════════════════════════════════════
   AdvoComply Design System — global entry point.
   Consumers link THIS one file. It is an @import manifest only.
   ══════════════════════════════════════════════════════════════ */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";

/* ── Footer bottom bar: stack on tablet & mobile ──────── */
@media (max-width: 1024px) {
  .site-footer-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer-links { flex-direction: column; align-items: flex-start; gap: 10px; max-width: 100%; }
  .site-footer-bar > span:first-child { max-width: 100%; line-height: 1.5; overflow-wrap: anywhere; }
}

/* ── Footer columns: stack on tablet & mobile ──────── */
@media (max-width: 1024px) {
  .site-footer-cols { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 48px !important; }
  .site-footer-col { justify-self: start !important; margin-left: 0 !important; }
}

/* ── Footer link spacing on tablet & mobile ──────── */
@media (max-width: 1024px) {
  .site-footer-cols a { line-height: 1.6 !important; padding: 6px 0 !important; margin-top: 8px !important; }
  .site-footer-cols a:first-of-type { margin-top: 0 !important; }
  .site-footer-cols > div > div[style*="lineHeight"],
  .site-footer-cols > div > div { line-height: 1.8 !important; }
}
@media (max-width: 640px) {
  .site-footer-cols { padding: 40px 24px 32px !important; gap: 32px !important; }
  .site-footer-cols a { padding: 8px 0 !important; }
}

/* ── Footer touch targets on tablet & mobile ──────── */
@media (max-width: 1024px) {
  .site-footer-cols a,
  .site-footer-bar a,
  .site-footer-links a {
    display: inline-block !important;
    min-height: 44px !important;
    padding: 10px 4px !important;
    line-height: 1.5 !important;
  }
  .site-footer-cols > div > a { display: block !important; }
}

/* ── Footer social icons stack & center on mobile ──────── */
@media (max-width: 1024px) {
  .site-footer-cols .site-footer-social {
    display: flex !important;
    justify-content: center !important;
    margin: 24px auto 0 !important;
    width: 100% !important;
  }
  .site-footer-col--end { justify-self: stretch !important; text-align: left; }
}
@media (max-width: 640px) {
  .site-footer-cols .site-footer-social { justify-content: center !important; }
}

/* ── About hero: allow wrap on tablet & mobile ──────── */
@media (max-width: 1024px) {
  .about-hero-h1 { white-space: normal !important; font-size: 40px !important; }
}
@media (max-width: 640px) {
  .about-hero-h1 { font-size: 32px !important; }
}

/* ── Footer accordion (tablet & mobile) ──────── */
.site-footer-chev { display: none; }
@media (max-width: 1024px) {
  .site-footer-title { padding: 12px 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .site-footer-chev { display: block !important; color: #fff; }
  .site-footer-panel { display: none; padding-top: 12px; padding-bottom: 8px; }
  .site-footer-panel.is-open { display: block; }
}
@media (min-width: 1025px) {
  .site-footer-title { cursor: default !important; }
}

/* ── Footer link hover (all viewports) ──────── */
.site-footer-cols a:hover,
.site-footer-bar a:hover,
.site-footer-links a:hover,
.site-footer-social:hover { color: #009fe3 !important; }

/* ── Footer icon hover (all viewports) ──────── */
.site-footer-cols a:hover svg,
.site-footer-bar a:hover svg,
.site-footer-links a:hover svg,
.site-footer-social:hover svg,
.site-footer-title:hover,
.site-footer-title:hover svg { color: #009fe3 !important; fill: currentColor; stroke: currentColor; }