/* =============================================================================
   FA shared footer styles — SINGLE SOURCE OF TRUTH.
   Linked on every page as <link rel="stylesheet" href="/assets/footer.css">.
   Edit here only; sync_footer.py propagates the matching markup into every page.
   Do NOT put footer CSS back inline in a page — that is the drift this file fixes.
   ========================================================================== */

.footer { background: var(--dark); color: #fff; padding: 72px 32px 36px; }
.footer__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 28px; margin-bottom: 16px; align-items: start; border-bottom: 1px solid rgba(255,255,255,0.1); }

.footer__logo { margin-bottom: 20px; display: flex; align-items: center; gap: 20px; }
.footer__logo img { height: 44px; width: auto; margin-bottom: 0; }
.legitscript-footer img { height: 44px; width: auto; }
.footer__tagline { font-size: 14px; line-height: 1.75; margin-bottom: 22px; color: #fff; }
.footer__hours-title { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.footer__hours-list { font-size: 13.5px; line-height: 2; color: #fff; margin-bottom: 22px; }

.footer__col-title { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.footer__links li { margin: 0; }
.footer__links a { font-size: 14px; color: #fff; transition: color var(--transition); }
.footer__links a:hover { color: #fff; }

.footer__contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #fff; margin-bottom: 12px; line-height: 1.55; }
.footer__contact-item svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; }
.footer__contact-item a { color: #fff; }
.footer__contact-item a:hover { color: #fff; }

.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.footer__social a:hover { background: var(--purple); }
.footer__social svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 1.5; }

/* Location map (element injected by /assets/footer.js). max-width keeps it tidy
   whether its column is narrow (desktop) or full-width (stacked, mobile). */
.footer__map { margin-top: 18px; height: 170px; max-width: 340px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.footer__map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 16px; box-sizing: border-box; text-align: center; text-decoration: none; color: #fff; transition: background .2s ease; }
.footer__map-facade:hover { background: rgba(255,255,255,0.04); }
.footer__map-facade svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.5; }
.footer__map-facade span { font-size: 13px; font-weight: 600; }
.footer__map-facade small { font-size: 12px; opacity: .75; }

.footer__disclaimer { max-width: 1280px; margin: 0 auto; padding: 10px 0 6px; margin-bottom: 0; }
.footer__disclaimer p { font-size: 12px; color: #fff; line-height: 1.6; text-align: center; }
.footer__disclaimer a { color: #fff; text-decoration: underline; }
.footer__disclaimer a:hover { color: #fff; }

.footer__bottom { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.footer__copy { font-size: 13px; color: #fff; }
.footer__legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal-links a { font-size: 13px; color: #fff; transition: color var(--transition); }
.footer__legal-links a:hover { color: #fff; }

/* Tablet / narrow laptop: 4 columns are too tight, drop to 2. */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Phone: single column, and stack the legal bar. */
@media (max-width: 768px) {
  .footer { padding: 52px 20px 28px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .footer__legal-links { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .footer__copy { text-align: center; }
  .footer__disclaimer p { text-align: center; }
}