/* ============================================================
   MUSEF — FOOTER
   Requires msf-tokens.css to be loaded first.

   Trust strip · 4 columns · bottom bar
   <=640px : Shop/Help columns become tap-to-open accordions
   ============================================================ */

.msff *,
.msff *::before,
.msff *::after{ box-sizing:border-box; }

.msff{
  background:var(--msff-bg);
  color:var(--msff-text);
  font-family:var(--msf-font);
  font-size:15px; line-height:1.7;
}

/* ============================================================
   1. TRUST STRIP
   ============================================================ */
.msff-usp{ background:var(--msff-usp); color:var(--msf-ink); }
.msff-usp__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; padding:26px 0;
}
.msff-usp__item{ display:flex; align-items:center; gap:12px; min-width:0; }
.msff-usp__icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--msf-accent-soft); color:var(--msf-accent);
  display:flex; align-items:center; justify-content:center;
}
.msff-usp__icon svg{ width:21px; height:21px; }
.msff-usp__copy{ min-width:0; }
/* these MUST be block — they are spans inside a span */
.msff-usp__t{
  display:block; font-size:14px; font-weight:600;
  line-height:1.3; color:var(--msf-ink);
}
.msff-usp__s{
  display:block; font-size:12px; line-height:1.4; color:var(--msf-muted);
}

/* ============================================================
   2. MAIN COLUMNS
   ============================================================ */
.msff-main{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:40px;
  padding:56px 0 44px;
}
.msff-col{ min-width:0; }   /* stops long strings forcing sideways scroll */

/* ---------- brand ---------- */
.msff-brand__logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:16px;
}
.msff-brand__mark{
  flex:0 0 auto; width:46px; height:46px; border-radius:10px;
  background:var(--msf-accent); color:#fff;
  font-weight:700; font-size:25px; line-height:1;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.msff-brand__mark img{ width:100%; height:100%; object-fit:contain; }
.msff-brand__name{
  display:block;
  font-family:var(--msf-serif);
  font-size:23px; font-weight:700; color:var(--msff-head); line-height:1.15;
}
.msff-brand__name sup{ font-size:.55em; vertical-align:super; }
.msff-brand__tag{
  display:block; font-family:var(--msf-font);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--msf-accent);
}
.msff-brand__about{ font-size:14px; margin:0 0 20px; max-width:38ch; }

.msff-socials{ display:flex; gap:8px; flex-wrap:wrap; }
.msff-social{
  width:var(--msf-tap); height:var(--msf-tap); border-radius:50%;
  background:var(--msff-field); color:var(--msff-head);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; flex:0 0 auto;
  transition:background .18s, color .18s, transform .18s;
}
.msff-social svg{ width:18px; height:18px; }
.msff-social:hover{ background:var(--msf-accent); color:#fff; transform:translateY(-2px); }
.msff-social--wa:hover{ background:var(--msf-wa); }

/* ---------- headings ---------- */
.msff-col__head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:12px;
  background:none; border:0; padding:0; margin:0 0 18px;
  color:var(--msff-head); font:inherit;
  font-size:15px; font-weight:600; letter-spacing:.02em;
  text-align:left; text-transform:uppercase;
}
.msff-chev{ display:none; }   /* mobile only */

/* ---------- links ---------- */
.msff-links{ list-style:none; margin:0; padding:0; }
.msff-links li + li{ margin-top:11px; }
.msff-links a{
  position:relative;
  color:var(--msff-text); text-decoration:none; font-size:14.5px;
  transition:color .18s, padding-left .18s;
}
.msff-links a::before{
  content:''; position:absolute; left:0; top:50%;
  width:0; height:1.5px; background:var(--msf-accent);
  transform:translateY(-50%); transition:width .18s;
}
.msff-links a:hover{ color:var(--msff-head); padding-left:16px; }
.msff-links a:hover::before{ width:10px; }

/* ---------- contact ---------- */
.msff-contact{ list-style:none; margin:0 0 22px; padding:0; }
.msff-contact li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:14.5px; margin-bottom:13px;
}
.msff-contact svg{
  flex:0 0 auto; width:17px; height:17px;
  margin-top:4px; color:var(--msf-accent);
}
.msff-contact a{ color:var(--msff-text); text-decoration:none; overflow-wrap:anywhere; }
.msff-contact a:hover{ color:var(--msf-accent); }

/* ---------- newsletter ---------- */
.msff-news__t{ font-size:13.5px; margin:0 0 10px; }
.msff-news__form{ display:flex; gap:8px; }
.msff-news__form input{
  flex:1 1 auto; min-width:0; height:46px;
  padding:0 16px; border-radius:999px;
  border:1px solid var(--msff-line); background:var(--msff-field);
  color:var(--msff-head); font:inherit; font-size:14px; outline:none;
  transition:border-color .18s;
}
/* #8C7F78 on the dark field failed contrast — barely legible on a phone */
.msff-news__form input::placeholder{ color:#A99C95; opacity:1; }
.msff-news__form input:focus{ border-color:var(--msf-accent); }
.msff-news__form button{
  flex:0 0 auto; height:46px; padding:0 22px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--msf-accent); color:#fff;
  font:inherit; font-size:14px; font-weight:600;
  transition:background .18s;
}
.msff-news__form button:hover{ background:var(--msf-accent-dark); }

/* ============================================================
   3. BOTTOM BAR
   ============================================================ */
.msff-bottom{ background:var(--msff-bg2); border-top:1px solid var(--msff-line); }
.msff-bottom__grid{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:18px 0;
}
.msff-copy{ font-size:13.5px; margin:0; }
.msff-copy a{ color:var(--msf-accent); text-decoration:none; }

.msff-pay{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.msff-pay span{
  padding:5px 11px; border-radius:6px;
  background:var(--msff-field); border:1px solid var(--msff-line);
  font-size:11px; font-weight:600; letter-spacing:.05em;
  color:var(--msff-text); white-space:nowrap;
}

.msff-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.msff-legal a{ color:var(--msff-text); text-decoration:none; font-size:13px; }
.msff-legal a:hover{ color:var(--msf-accent); }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width:1024px){
  .msff-main{ grid-template-columns:1fr 1fr; gap:36px 30px; padding:46px 0 36px; }
  .msff-col--brand,
  .msff-col--contact{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .msff-usp__grid{ grid-template-columns:repeat(2,1fr); gap:16px; padding:22px 0; }
}

/* ---- mobile: accordions ---- */
@media (max-width:640px){
  .msff-usp__grid{ grid-template-columns:1fr; gap:0; padding:8px 0; }
  .msff-usp__item{ padding:12px 0; border-bottom:1px solid rgba(0,0,0,.06); }
  .msff-usp__item:last-child{ border-bottom:0; }

  .msff-main{ grid-template-columns:1fr; gap:0; padding:32px 0 24px; }
  .msff-col--brand{ padding-bottom:26px; }
  .msff-brand__about{ max-width:none; }

  .msff-col--acc{ border-top:1px solid var(--msff-line); }
  .msff-col--acc:last-of-type{ border-bottom:1px solid var(--msff-line); }
  .msff-col--acc .msff-col__head{
    margin:0; padding:15px 0;
    min-height:52px;
  }
  .msf-js .msff-col--acc .msff-col__head{ cursor:pointer; }
  /* Everything below is scoped to .msf-js. Without JavaScript the
     columns stay open and the chevron never appears — a collapsed
     accordion with no working toggle would hide the links for good. */
  .msf-js .msff-chev{
    display:block; flex:0 0 auto;
    width:18px; height:18px; color:var(--msf-accent);
    transition:transform .25s;
  }
  .msf-js .msff-col--acc.is-open .msff-chev{ transform:rotate(180deg); }

  /* max-height beats grid-template-rows here: Safari 15 and older
     Android browsers do not animate 0fr->1fr reliably */
  .msf-js .msff-col__body{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .msf-js .msff-col--acc.is-open .msff-col__body{ max-height:480px; }
  .msff-links{ padding-bottom:16px; }
  .msff-links a{
    display:flex; align-items:center;
    min-height:var(--msf-tap); padding-block:2px;
  }

  .msff-col--contact{ padding-top:26px; }
  .msff-news__form{ flex-direction:column; }
  .msff-news__form button{ width:100%; }

  .msff-bottom__grid{
    flex-direction:column; align-items:center;
    text-align:center; gap:14px; padding:22px 0;
  }
  .msff-pay{ justify-content:center; }
  .msff-legal{ justify-content:center; gap:14px; }
}

@media (max-width:480px){
  /* five chips at full size wrap 4 + 1; tightening them keeps the row even */
  .msff-pay{ gap:6px; }
  .msff-pay span{ padding:5px 9px; font-size:10px; letter-spacing:.04em; }
}

@media (max-width:360px){
  .msff-brand__name{ font-size:20px; }
  .msff-pay{ gap:5px; }
  .msff-pay span{ padding:4px 7px; font-size:9.5px; }
}

/* Desktop safety: accordions can never be left collapsed above 640px */
@media (min-width:641px){
  .msff-col__body{ max-height:none !important; overflow:visible !important; }
  .msff-col--acc .msff-col__head{ cursor:default; }
}

/* ============================================================
   A11Y
   ============================================================ */
.msff a:focus-visible,
.msff button:focus-visible,
.msff input:focus-visible{
  outline:2px solid var(--msf-accent);
  outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .msff-col__body,.msff-chev,.msff-social,.msff-links a{ transition:none; }
}

/* ============================================================
   THEME GUARDS
   Same reasoning as the header: beat theme rules that target
   links and lists inside the footer.
   ============================================================ */
.msff .msff-links,
.msff .msff-contact,
.msff .msff-legal{ list-style:none; }
.msff .msff-links a,
.msff .msff-contact a,
.msff .msff-legal a,
.msff .msff-copy a{ text-decoration:none; }
.msff .msff-col .msff-col__head{ text-transform:uppercase; }
.msff .msff-social svg,
.msff .msff-usp__icon svg{ max-width:none; height:auto; }

/* The collapse lives on .msff-col__body itself and clips with its own
   overflow. It must NOT depend on an inner wrapper element — the
   previous draft put overflow:hidden on `.msff-col__body > div`, and
   when that wrapper was dropped during the WordPress port the panel
   stopped clipping and leaked a sliver of the first link. */
.msff .msff-col--acc .msff-col__body{ overflow:hidden; }