/* The site footer (components/SiteFooter.astro): the same footer on every area — abdulosama.com, Learn, Respond, Flovo
   (Abdul, 2026-10-13). Moved out of site.css so layouts that don't load site.css (Learn) get it too. */
/* ---- Footer v2 — CTA strip + brand/social + 3 columns + legal bar ---- */
.ao-footer {
  position: relative;
  background: var(--abdul-ink-950);
  color: rgba(255,255,255,0.82);
  padding: 0 clamp(18px, 4vw, 40px) 24px;
  margin-top: 120px; /* room for the floating CTA strip */
}
/* Faint brand glow rising from the footer's horizon */
.ao-footer::before {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0; height: 65%;
  background: radial-gradient(ellipse 90% 80% at 50% 115%,
    rgba(61, 24, 191, 0.35) 0%, rgba(52, 224, 232, 0.06) 45%, transparent 75%);
  pointer-events: none;
}
.ao-footer > * { position: relative; }
/* The one call to action (components/FootConnect.astro, 2026-10-05): talk to Abdul AI (type / speak) or stay in touch
   (name + WhatsApp). Floats half over the page above, like the strip it replaced. */
.fc {
  max-width: 1080px; margin: 0 auto -24px; transform: translateY(-64px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px 40px; align-items: center;
  background: var(--abdul-gradient-violet); border-radius: var(--r-2xl); color: #fff;
  padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px);
  box-shadow: var(--glow-violet), inset 0 1px 0 rgba(255,255,255,0.18);
}
.fc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.9); }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; background: #1fd896; box-shadow: 0 0 0 4px rgba(31,216,150,.2); }
.fc h3 { margin: 0 0 8px; font-family: var(--font-arabic-display); font-feature-settings: var(--ff-swash); font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.3; color: #fff; }
.fc-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.84); max-width: 46ch; }
.fc-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px; text-decoration: none;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); transition: transform var(--dur-base), background var(--dur-base); }
.fc-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); }
.fc-btn--primary { background: var(--abdul-gradient-salmon); border-color: transparent; box-shadow: var(--glow-salmon); }
.fc-btn--primary:hover { background: var(--abdul-gradient-salmon); filter: brightness(1.05); }
.fc-btn:active { transform: scale(.98); }
.fc-stay { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.fc-stay-t { display: flex; gap: 12px; align-items: center; margin: 0 0 4px; font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.6; }
.fc-stay-t b { display: block; font-size: 15.5px; color: #fff; margin-bottom: 2px; }
.fc-wa { flex: none; width: 46px; height: 46px; padding: 8px; border-radius: 13px; background: #fff; box-sizing: border-box; }
.fc-field { display: block; flex: 1; min-width: 0; }
.fc-field input, .fc-cc { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: #fff; color: #16103a; font: inherit; font-size: 16px; box-sizing: border-box; }
.fc-field input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.fc-phone { display: flex; gap: 8px; }
.fc-cc { flex: 0 0 100px; display: flex; align-items: center; gap: 2px; padding: 0 0 0 10px; }
.fc-cc input { width: 100%; min-width: 0; border: 0; height: 44px; font: inherit; font-size: 16px; background: transparent; outline: none; color: #16103a; }
.fc-submit { height: 48px; border: 0; border-radius: 12px; background: #16103a; color: #fff; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.fc-submit:active { transform: scale(.98); }
 .fc-submit[disabled] { opacity: .6; cursor: wait; }
.fc-msg { margin: 0; font-size: 14px; font-weight: 600; }
 .fc-msg.is-ok { color: #8ff5c8; }
 .fc-msg.is-err { color: #ffc2c8; }
.fc-consent { margin: 0; font-size: 12px; color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .fc { grid-template-columns: 1fr; transform: translateY(-48px); } }
.fc.fc--solo { grid-template-columns: 1fr; max-width: 760px; }
/* CTA strip — floats half-out of the ink block (no longer used by the site layout; kept for any page that still renders it) */
.ao-foot-cta {
  max-width: 1040px;
  margin: 0 auto;
  transform: translateY(-56px);
  background: var(--abdul-gradient-violet);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-shadow: var(--glow-violet), inset 0 1px 0 rgba(255,255,255,0.18);
}
.ao-foot-cta-text h3 {
  margin: 0 0 6px;
  font-family: var(--font-arabic-display);
  font-feature-settings: var(--ff-swash);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900; color: #fff;
}
.ao-foot-cta-text p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,0.82); line-height: 1.6; }
.ao-foot-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ao-foot-btn-primary {
  background: var(--abdul-gradient-salmon); color: #fff;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 14.5px; text-decoration: none;
  box-shadow: var(--glow-salmon);
  transition: transform var(--dur-base), filter var(--dur-base);
}
.ao-foot-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ao-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px;
  padding: 24px 0 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 820px) { .ao-footer-inner { grid-template-columns: 1fr; gap: 32px; } }
.ao-footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.ao-footer-mark { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); }
.ao-footer-name { font-family: var(--font-arabic-display); font-feature-settings: var(--ff-swash); font-size: 21px; font-weight: 700; color: #fff; }
.ao-footer-tag { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.ao-foot-social { display: flex; gap: 8px; margin-top: 14px; }
.ao-foot-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  transition: all var(--dur-base) var(--ease-standard);
}
.ao-foot-social a:hover {
  background: var(--abdul-gradient-salmon);
  border-color: transparent; color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--glow-salmon);
}
.ao-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .ao-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ao-footer-cols { grid-template-columns: 1fr 1fr; } }
.ao-footer-cols h5 { font-size: 13px; font-weight: 800; color: var(--abdul-cyan-400); margin: 0 0 18px; }
.ao-footer-cols a { display: block; color: rgba(255,255,255,0.72); text-decoration: none; font-size: 15px; padding: 7px 0; transition: color 160ms, transform 160ms var(--ease-standard); }
.ao-footer-cols a:hover { color: #fff; transform: translateX(-3px); }
.ao-foot-legal {
  max-width: 1200px; margin: 28px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.ao-foot-legal-links { display: flex; gap: 18px; }
/* Giant name across the bottom of the footer, whole, BEHIND the columns and legal bar (Abdul, 2026-10-05). Its look is a set of
   variables so it can be tuned live at /dev/wordmark (localhost only): weight, size, spacing, and a "light from beneath" —
   a radial mask centred under the footer's glow, so the letters show near the light and fade into the dark away from it.
   The footer isolates a stacking context so z-index -1 sits above its background and below its content. */
.ao-footer {
  isolation: isolate;
  /* the name's variables live on the footer: its size also sets the room under the legal bar, so the name has its own band */
  --wm-weight: 700; --wm-k: .185; --wm-cap: 255px; --wm-word: 0em; --wm-track: 0em; --wm-lh: 1.5; --wm-bottom: 0px;
  --wm-rgb: 255, 255, 255; --wm-alpha: .1; --wm-fade: 0; --wm-room: 1.42;
  --wm-light-x: 50%; --wm-light-y: 115%; --wm-light-w: 75%; --wm-light-h: 110%;
  --wm-size: min(calc((100vw - 2 * clamp(18px, 4vw, 40px)) * var(--wm-k)), var(--wm-cap));   /* ≈ the footer's full width */
  padding-bottom: calc(var(--wm-size) * var(--wm-room));
}
html[lang="en"] .ao-footer { --wm-k: .146; --wm-cap: 201px; }
/* The number field (js/foot-field.js): a canvas filling the footer, under the name and the content. */
.ao-footer > .ao-foot-field { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.ao-footer > .ao-foot-wordmark {
  position: absolute; inset-inline: 0; bottom: var(--wm-bottom); z-index: -1;
  text-align: center; white-space: nowrap; overflow: visible;
  pointer-events: none; user-select: none;
}
.ao-foot-wordmark span {
  display: inline-block; padding: .15em .1em;
  font-family: 'Ghroob Geometric Text', var(--font-arabic-display); font-feature-settings: var(--ff-swash);
  font-weight: var(--wm-weight);
  font-size: var(--wm-size);
  line-height: var(--wm-lh); letter-spacing: var(--wm-track); word-spacing: var(--wm-word);
  /* Solid letters, faded as ONE layer: with a translucent colour the overlapping joins of connected Arabic letters were
     painted twice and showed as brighter seams. */
  color: rgb(var(--wm-rgb)); opacity: var(--wm-alpha);
  -webkit-mask-image: radial-gradient(ellipse var(--wm-light-w) var(--wm-light-h) at var(--wm-light-x) var(--wm-light-y), #000 0%, rgba(0,0,0,var(--wm-fade)) 100%);
          mask-image: radial-gradient(ellipse var(--wm-light-w) var(--wm-light-h) at var(--wm-light-x) var(--wm-light-y), #000 0%, rgba(0,0,0,var(--wm-fade)) 100%);
}
.ao-foot-legal a { color: rgba(255,255,255,0.45); text-decoration: none; }
.ao-foot-legal a:hover { color: var(--abdul-cyan-400); }
.ao-foot-btn-primary:active {
  transform: scale(0.98);
  transition-duration: var(--dur-fast, 120ms);
}
.ao-foot-legal span { color: rgba(255,255,255,.72); }
.ao-foot-social .brand-logo { width: 18px; height: 18px; }
/* The footer's "talk to me" (voice) shows only to visitors voice-gate.js finds eligible */
.fc-btn[data-talk="voice"] { display: none; }
 html[data-voice="yes"] .fc-btn[data-talk="voice"] { display: inline-flex; }