/* ProTech Innovations — footer redesign (agent 03).
   Load AFTER assets/css/main.css. No JavaScript required; no layout-moving
   motion; content is fully readable with JS disabled and with
   prefers-reduced-motion. All visible copy, links, hrefs, and legal lines
   are unchanged — this stylesheet only restyles the canonical footer block
   in footer-pattern.html. Shared token names per DESIGN-CONTRACT.md;
   values match the brand anchors (#0B1220 navy, #20C9C0 teal, #0E5BD6 blue).
   NOTE: --blue is used ONLY in the decorative accent gradient (a graphic,
   not text): blue text on navy is 3.11:1 and fails AA, so footer text uses
   white, #D7DEE8, #C7CDD6, or teal — all verified AA or better (see
   REPORT.md). */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6; --ink:#0B1220;
  --muted:#5B6472; --paper:#FFFFFF; --line:#E5E7EB;
  --footer-text:#D7DEE8; --footer-muted:#C7CDD6;
  --footer-line:rgba(255,255,255,.16);
  --radius-sm:8px; --radius-md:10px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 16px 40px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.15s; --dur-normal:.3s; --dur-slow:.5s;
}

/* Base: navy field with a faint abstract teal glow (background only, so it
   reserves no space and can never shift layout). Padding lives on
   .footer-inner so the block degrades gracefully if this file is absent. */
footer.site{
  background-color:var(--navy);
  background-image:radial-gradient(640px 260px at 16% 0%, rgba(32,201,192,.14), transparent 70%);
  color:var(--footer-text);
  padding:0;
  margin-top:0;
}

/* Teal-to-blue accent bar across the top edge (decorative graphic). */
.footer-accent{
  height:4px;
  background:linear-gradient(90deg, var(--teal) 0%, var(--blue) 100%);
}

.footer-inner{padding:56px 0 40px}

/* Four-column organisation: brand first, then the three link groups. */
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px 32px;
  align-items:start;
}

/* Brand column: mark + name + tagline + the existing leads paragraph. */
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.footer-mark{display:block;width:44px;height:44px;flex:none;margin-bottom:16px}
.footer-mark svg{display:block;width:44px;height:44px}
.footer-brand-name{display:block;color:#fff;font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.01em;margin-bottom:10px}
.footer-brand p{color:var(--footer-text);margin:0 0 14px;max-width:38ch}
.footer-brand p:last-child{margin-bottom:0}
.footer-lead{color:var(--footer-muted);font-size:14px;line-height:1.65}

/* Link columns: small teal eyebrow headings with a short rule beneath. */
.footer-col{min-width:0}
.footer-heading{
  display:block;color:var(--teal);font-size:13px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.4;margin-bottom:14px;
}
.footer-heading::after{
  content:"";display:block;width:24px;height:2px;border-radius:2px;
  background:var(--teal);margin-top:10px;
}
.footer-col a{
  display:block;padding:8px 0;color:var(--footer-text);text-decoration:none;
  overflow-wrap:break-word;
  transition:transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover{
  color:#fff;text-decoration:underline;text-underline-offset:3px;
  transform:translateX(4px);
}
html[dir="rtl"] .footer-col a:hover{transform:translateX(-4px)}

/* Honesty disclaimer, separated from the columns and the bottom bar. */
.footer-note{
  margin:36px 0 0;padding-top:24px;border-top:1px solid var(--footer-line);
  color:var(--footer-muted);font-size:14px;line-height:1.65;max-width:72ch;
}

/* Bottom bar: copyright, pipeline line, language + back-to-top. */
.footer-bottom{
  margin-top:24px;padding-top:24px;border-top:1px solid var(--footer-line);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px 24px;flex-wrap:wrap;color:var(--footer-muted);font-size:14px;line-height:1.6;
}
.footer-bottom span{overflow-wrap:break-word}
.footer-bottom a{
  display:inline-block;padding:6px 0;color:#fff;text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.footer-bottom a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* Focus stays clearly visible on the dark field (teal on navy: 9.07:1). */
footer.site a:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:8px;
}

/* Responsive: two columns, then one; the brand column spans full width. */
@media(max-width:900px){
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-brand{grid-column:1 / -1}
  .footer-inner{padding:48px 0 36px}
}
@media(max-width:600px){
  .footer-main{grid-template-columns:minmax(0,1fr);gap:32px}
  .footer-bottom{flex-direction:column;gap:8px}
  .footer-inner{padding:44px 0 32px}
}

/* Reduced motion: all footer motion off, content fully visible. */
@media (prefers-reduced-motion: reduce){
  footer.site *,footer.site *::after{transition:none!important}
}