/* ============================================================
   Uncommon Christian Network — stylesheet module: footer

   The site footer: brand + socials, three link columns, a "we're here"
   contact card, then a bottom bar carrying the motto, a waveform and the
   copyright. The globe bleeds in behind the brand column and a dot field
   fades in at the lower right.

   Own ft-* namespace. The older .site-footer / .footer-* rules in layout.css
   still style the shell; everything specific to this layout lives here and is
   scoped under .ft so the two can't fight.
   Load order (header.php): base, layout, home, live, media-hub, who, footer,
   support, pages.
   ============================================================ */

.ft{
  /* The hero's violet, matching media-hub.css and who.css exactly. */
  --ft-violet:#a775be;
  --ft-violet-hi:#c9a7db;
  --ft-violet-deep:#4a3358;
  --ft-edge:rgba(167,117,190,.28);
  --ft-edge-hi:rgba(167,117,190,.6);
  --ft-glow:rgba(167,117,190,.26);
  --ft-ink:#f2eff3;
  --ft-ink-2:#b6afbc;
  --ft-ink-3:#8b8592;

  position:relative;z-index:1;isolation:isolate;overflow:hidden;
  margin-top:0;padding:clamp(38px,4vw,58px) 0 clamp(20px,2vw,28px);
  border-top:1px solid var(--ft-edge);
  background:
    radial-gradient(ellipse 60% 70% at 12% 30%,rgba(122,86,140,.14),transparent 68%),
    linear-gradient(180deg,#0a0812 0%,#07060d 100%);
  color:var(--ft-ink-2);
}

/* Ambient art — both sit under everything and never take pointer events. */
/* Sits over the brand column horizontally — behind the UCN logo — but centred
   on the footer's own height, so it reads as a backdrop rather than a badge
   pinned to the lockup. Anchored to the shell so it tracks the content rail. */
.ft-globe{
  position:absolute;z-index:-1;left:min(150px,20%);top:50%;transform:translate(-50%,-50%);
  width:clamp(230px,21vw,380px);height:auto;opacity:.08;pointer-events:none}
.ft-dots{
  position:absolute;z-index:-1;right:-4%;bottom:-10%;width:min(44%,620px);height:300px;
  pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(167,117,190,.85) 0 1.15px,transparent 1.5px);
  background-size:9px 9px;
  transform:skewY(-8deg);
  mask-image:radial-gradient(ellipse 70% 90% at 78% 70%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 78% 70%,#000,transparent 72%)}

.ft-shell{position:relative;width:min(calc(100% - 48px),1320px);margin-inline:auto}

/* ---------- Top row ---------- */
.ft-top{
  display:grid;
  grid-template-columns:minmax(240px,1.15fr) repeat(3,minmax(0,.85fr)) minmax(230px,1fr);
  gap:clamp(22px,3vw,46px);align-items:start;
  padding-bottom:clamp(26px,3vw,40px)}

/* Brand column */
.ft-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ft-ink)}
.ft-lockup img{width:64px;height:auto;flex:none}
.ft-lockup span{font:800 clamp(17px,1.35vw,21px)/1.18 var(--display);letter-spacing:-.01em}
.ft-lockup b{color:var(--ft-violet);font-weight:800}
.ft-tag{margin:16px 0 18px;color:var(--ft-ink-2);font-size:15px;line-height:1.5}
.ft-social{display:flex;gap:10px}
.ft-social span{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--ft-edge);color:var(--ft-violet);
  background:rgba(167,117,190,.05);transition:border-color .2s,color .2s,background .2s}
.ft-social span:hover{border-color:var(--ft-edge-hi);color:var(--ft-violet-hi);background:rgba(167,117,190,.12)}
.ft-social svg{width:19px;height:19px}

/* Link columns */
.ft-col{display:flex;flex-direction:column;min-width:0}
.ft-col h4{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid var(--ft-edge);
  color:var(--ft-ink);font:700 clamp(12px,.95vw,14px)/1 var(--display);
  letter-spacing:.16em;text-transform:uppercase}
.ft-col h4 svg{width:20px;height:20px;color:var(--ft-violet);flex:none}
.ft-col a{
  display:flex;align-items:center;gap:11px;padding:7px 0;
  color:var(--ft-ink-2);font-size:15px;text-decoration:none;
  transition:color .18s}
.ft-col a:hover{color:var(--ft-ink)}
.ft-li{width:19px;height:19px;color:var(--ft-violet);flex:none}
.ft-col a:hover .ft-li{color:var(--ft-violet-hi)}

/* "We're here" card */
.ft-here{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:22px 20px 24px;border:1px solid var(--ft-edge-hi);border-radius:16px;
  background:linear-gradient(180deg,rgba(24,16,34,.6),rgba(9,7,15,.75));
  box-shadow:inset 0 0 34px rgba(167,117,190,.08)}
.ft-here>svg{width:38px;height:38px;color:var(--ft-violet)}
.ft-here b{color:var(--ft-ink);font:700 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase}
.ft-here p{margin:0;color:var(--ft-ink-2);font-size:14px;line-height:1.5}
.ft-here a{
  display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:11px 24px;border-radius:999px;
  color:#fff;font:700 15px/1 var(--display);text-decoration:none;
  border:1px solid var(--ft-edge-hi);
  background:linear-gradient(135deg,var(--ft-violet),var(--ft-violet-deep));
  box-shadow:0 0 22px var(--ft-glow);transition:box-shadow .2s,transform .2s}
.ft-here a:hover{box-shadow:0 0 30px rgba(167,117,190,.45);transform:translateY(-1px)}
.ft-here a i{font-style:normal;transition:transform .2s}
.ft-here a:hover i{transform:translateX(4px)}

/* ---------- Bottom bar ---------- */
.ft-bottom{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(16px,2.4vw,34px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--ft-edge)}
.ft-badge{width:52px;height:auto;opacity:.9}
.ft-motto{margin:0;color:var(--ft-ink);font-size:15px;line-height:1.5}
.ft-motto span{color:var(--ft-ink-3)}
.ft-wave{width:clamp(120px,14vw,190px);height:auto;opacity:.7}
.ft-copy{margin:0;color:var(--ft-ink-3);font-size:14px;line-height:1.5;text-align:right}

.ft :where(a):focus-visible{outline:2px solid var(--ft-violet-hi);outline-offset:3px}

/* ---------- Responsive ----------
   The reference's compact variant: brand and columns stack, the contact card
   spans, and the bottom bar becomes a centred single column. */
@media (max-width:1180px){
  .ft-top{grid-template-columns:minmax(220px,1fr) repeat(3,minmax(0,1fr));gap:28px}
  .ft-here{grid-column:1/-1;flex-direction:row;justify-content:center;text-align:left;gap:20px;flex-wrap:wrap}
  .ft-here p{flex:0 1 auto}
  .ft-here a{margin-top:0}
}
@media (max-width:820px){
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-brand{grid-column:1/-1}
  /* Phones: the columns stack, so a globe centred on the footer's height ends
     up floating in the middle of the link lists. Pull it up behind the UCN
     lockup instead — the shell is the positioning parent and the lockup sits at
     its top-left, so these are measured off that. */
  /* Over on the right with a gutter, and low enough to sit beside the links
     rather than behind the lockup. transform:none because the base rule centres
     it on its own box — with `right` set, that would pull it back off-screen. */
  .ft-globe{left:auto;right:18px;top:62px;transform:none;
    width:clamp(190px,52vw,300px);opacity:.1}
  .ft-bottom{grid-template-columns:auto minmax(0,1fr);row-gap:16px}
  .ft-wave{display:none}
  .ft-copy{grid-column:1/-1;text-align:left}
}
@media (max-width:560px){
  .ft-shell{width:calc(100% - 28px)}
  .ft-top{grid-template-columns:1fr;gap:26px}
  .ft-here{flex-direction:column;text-align:center}
  .ft-here a{width:100%;justify-content:center}
  .ft-bottom{grid-template-columns:1fr;justify-items:start;text-align:left}
  .ft-badge{width:44px}
  .ft-dots{opacity:.28}
  .ft-globe{left:auto;right:14px;top:56px;transform:none;width:clamp(170px,56vw,250px)}
}
@media (prefers-reduced-motion:reduce){
  .ft-here a,.ft-here a i{transition:none}
}