/* ============================================================
   SUJA — Premium Enterprise Mega-Footer (4-column)
   Content verbatim from Suja-Products.xlsx (Sheet2). Certification
   logos from the Certifications folder. Scoped to .suja-mega-footer.
   ============================================================ */

.suja-mega-footer{
  --mf-link:#64748b;        /* matches product-card link text */
  --mf-link-hover:#0891b2;  /* prior footer color → now the hover */
  --mf-heading:#0c1e35;
  --mf-text:#475569;
  --mf-muted:#64748b;
  --mf-border:#e2e8f0;
  background:#ffffff;
  border-top:1px solid var(--mf-border);
  font-family:'DM Sans', sans-serif;
}
.suja-mega-footer *{ box-sizing:border-box; }
.suja-mf-inner{ max-width:1280px; margin:0 auto; padding:64px 0 0; }

/* ---- 4-column grid ---- */
.suja-mf-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px 36px;
}

/* ---- Column headings — 18px / 700 (per global spec) ---- */
.suja-mf-col-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--mf-heading);
  margin:28px 0 16px;
  letter-spacing:-0.005em;
  line-height:1.3;
}
.suja-mf-col > .suja-mf-col-title:first-child{ margin-top:0; }

/* Eyebrow above a column-title (e.g. "Tailored For You" before
   the "By Facility Type" group). v3.8.13. */
.suja-mf-col-eyebrow{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mf-eyebrow, #0891b2);
  margin: 28px 0 6px;
  line-height: 1.3;
}
.suja-mf-col > .suja-mf-col-eyebrow:first-child{ margin-top: 0; }
.suja-mf-col-eyebrow + .suja-mf-col-title{ margin-top: 0; }

/* ---- Link lists — 15px (per global spec 15-16px) ---- */
.suja-mf-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.suja-mega-footer .suja-mf-links a{
  font-size:15px;
  line-height:1.5;
  color:var(--mf-link);
  text-decoration:none;
  transition:color .18s ease;
  padding:7px 0;
  font-weight:500;
}
.suja-mega-footer .suja-mf-links a:hover{ color:var(--mf-link-hover); text-decoration:none; }

/* ---- Column 1: Brand ---- */
.suja-mf-brand{ padding-right:50px; }   /* extra gap before column 2 */
.suja-mf-brand-logo img{ width:150px; height:auto; display:block; margin-bottom:18px; }
.suja-mf-desc{
  font-size:16px;
  line-height:1.75;
  color:var(--mf-text);
  margin:0 0 24px;
  max-width:440px;
}

/* ---- Certifications: 6 logos, 2 rows x 3 ---- */
.suja-mf-certs-label{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mf-muted); margin:0 0 14px;
}
.suja-mf-certs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  max-width:300px;
}
.suja-mf-cert{
  display:flex; align-items:center; justify-content:center;
  height:58px; padding:8px 10px;
  background:#f8fafc;
  border:1px solid var(--mf-border);
  border-radius:8px;
}
.suja-mf-cert img{
  max-height:38px; max-width:100%;
  width:auto; height:auto;
  object-fit:contain; display:block;
}

/* ---- Social icons (Find Us Online) ---- */
.suja-mf-social{ display:flex; gap:10px; margin-bottom:4px; }
.suja-mf-social a{
  width:34px; height:34px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(8,145,178,0.08);
  color:var(--mf-link);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.suja-mf-social a:hover{ background:var(--mf-link); color:#ffffff; transform:translateY(-2px); }
.suja-mf-social svg{ width:16px; height:16px; fill:currentColor; }

/* ---- Office addresses (inside column 4) ---- */
.suja-mf-offices{ margin-top:24px; }
.suja-mf-addr{ margin-bottom:14px; }
.suja-mf-addr-label{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--mf-heading); margin:0 0 6px;
}
.suja-mf-addr-text{
  font-size:14px; line-height:1.6; color:var(--mf-text); margin:0;
}
.suja-mf-contact-lines{
  display:flex; flex-direction:column; gap:8px;
  margin: 12px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--mf-border);
}
.suja-mf-contact-lines a{
  font-size:15px; color:var(--mf-link); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:500;
}
.suja-mf-contact-lines a:hover{ color:var(--mf-link-hover); }
.suja-mf-contact-lines svg{ width:14px; height:14px; fill:currentColor; flex-shrink:0; }

/* ---- Office locations row (v3.8.16) ----
   Full-width 3-equal-column row sitting between the main footer
   grid and the bottom legal bar. Border-top creates a quiet
   visual separation from the navigation columns above. */
.suja-mf-offices-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 32px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--mf-border);
}
.suja-mf-office{ min-width: 0; }
.suja-mf-office-title{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--mf-heading);
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.suja-mf-office-pin{
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.suja-mf-office-addr{
  font-size: 14px; line-height: 1.6;
  color: var(--mf-text);
  margin: 0;
  max-width: 340px;
}
@media (max-width: 900px){
  .suja-mf-offices-row{ grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px){
  .suja-mf-offices-row{ grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
  .suja-mf-office-addr{ max-width: none; }
}

/* ---- Bottom bar ---- */
.suja-mf-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  margin-top:24px;
  padding:20px 0;
  border-top:1px solid var(--mf-border);
}
.suja-mf-legal{ font-size:13px; color:var(--mf-muted); margin:0; line-height:1.5; }
.suja-mf-legal-links{ display:flex; gap:20px; flex-wrap:wrap; }
/* min-height 24px = WCAG 2.5.8 minimum tap target (was ~21px). */
.suja-mf-legal-links a{ display:inline-flex; align-items:center; min-height:24px; font-size:13px; color:var(--mf-muted); text-decoration:none; }
.suja-mf-legal-links a:hover{ color:var(--mf-link); }

/* ============ RESPONSIVE ============ */
/* Laptop — keep 4 columns, tighter gap */
@media (max-width: 1200px){
  .suja-mf-grid{ grid-template-columns:1.35fr 1fr 1fr 1.15fr; gap:32px 28px; }
  .suja-mf-desc{ max-width:none; }
}
/* Tablet — 2 columns */
@media (max-width: 900px){
  .suja-mf-inner{ padding:48px 20px 0; }
  .suja-mf-grid{ grid-template-columns:1fr 1fr; gap:36px 28px; }
  .suja-mf-brand{ grid-column:1 / -1; padding-right:0; }
}
/* Mobile — stacked */
@media (max-width: 560px){
  .suja-mf-grid{ grid-template-columns:1fr; gap:32px; }
  .suja-mf-certs{ max-width:280px; }
  .suja-mf-bottom{ flex-direction:column; align-items:flex-start; }
}